/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ body { padding: 64px 0; max-width: 660px; margin: 0 auto; } @media (max-width: 785px) { body { padding-top: 64px; -moz-padding-end: 0; padding-bottom: 64px; -moz-padding-start: 51px; } } body.loaded { transition: color 0.4s, background-color 0.4s; } .light, .light-button { color: #333333; background-color: #ffffff; } .dark, .dark-button { color: #eeeeee; background-color: #333333; } .sepia, .sepia-button { color: #333333; background-color: #f0ece7; } .sans-serif, .sans-serif .remove-button { font-family: "Fira Sans", Helvetica, Arial, sans-serif; } .serif, .serif .remove-button { font-family: "Charis SIL", Georgia, "Times New Roman", serif; } .font-size1 { font-size: 10px; } .font-size2 { font-size: 12px; } .font-size3 { font-size: 14px; } .font-size4 { font-size: 16px; } .font-size5 { font-size: 18px; } .font-size6 { font-size: 20px; } .font-size7 { font-size: 22px; } .font-size8 { font-size: 24px; } .font-size9 { font-size: 26px; } /* Loading/error message */ .message { margin-top: 40px; display: none; text-align: center; width: 100%; font-size: 0.9em; } /* Header */ .header { text-align: start; display: none; } .domain { font-size: 0.9em; line-height: 1.48em; padding-bottom: 4px; font-family: "Fira Sans", Helvetica, Arial, sans-serif; text-decoration: none; border-bottom: 1px solid; color: #0095dd; } .light > .container > .header > .domain, .sepia > .container > .header > .domain { border-bottom-color: #333333; } .dark > .container > .header > .domain { border-bottom-color: #eeeeee; } .header > h1 { font-size: 1.33em; line-height: 1.25em; width: 100%; margin: 30px 0; padding: 0; } .header > .credits { font-size: 0.9em; line-height: 1.48em; margin: 0 0 30px 0; padding: 0; font-style: italic; } /* Content */ #moz-reader-content { display: none; font-size: 1em; line-height: 1.6em; } .content h1, .content h2, .content h3 { font-weight: bold; } #moz-reader-content h1 { font-size: 1.33em; line-height: 1.25em; } #moz-reader-content h2 { font-size: 1.1em; line-height: 1.51em; } #moz-reader-content h3 { font-size: 1em; line-height: 1.66em; } .content a { text-decoration: underline; font-weight: normal; } .content a, .content a:visited, .content a:hover, .content a:active { color: #0095dd; } .content * { max-width: 100%; height: auto; } .content p, .content code, .content pre, .content blockquote, .content ul, .content ol, .content li, .content figure, .content .wp-caption { margin: 0 0 30px 0; } .content p > img:only-child, .content p > a:only-child > img:only-child, .content .wp-caption img, .content figure img { display: block; } .content img[moz-reader-center] { margin-left: auto; margin-right: auto; } #moz-reader-content .caption, #moz-reader-content .wp-caption-text, #moz-reader-content figcaption { font-size: 0.9em; line-height: 1.48em; font-style: italic; } .content code, .content pre { white-space: pre-wrap; } .content blockquote { padding: 0; -moz-padding-start: 16px; } .light > .container > .content blockquote, .sepia > .container > .content blockquote { -moz-border-start: 2px solid #333333; } .dark > .container > .content blockquote { -moz-border-start: 2px solid #eeeeee; } .dark *::-moz-selection { background-color: #FFFFFF; color: #0095DD; } .dark a::-moz-selection { color: #DD4800; } .content ul, .content ol { padding: 0; } .content ul { -moz-padding-start: 30px; list-style: disc; } .content ol { -moz-padding-start: 30px; list-style: decimal; } /*======= Controls toolbar =======*/ .toolbar { font-family: "Fira Sans", Helvetica, Arial, sans-serif; position: fixed; height: 100%; top: 0; left: 0; margin: 0; padding: 0; list-style: none; background-color: #fbfbfb; -moz-user-select: none; border-right: 1px solid #b5b5b5; } .button { display: block; background-size: 24px 24px; background-repeat: no-repeat; color: #333; background-color: #fbfbfb; height: 40px; padding: 0; } .toolbar .button { width: 40px; background-position: center; margin-right: -1px; border-top: 0; border-left: 0; border-right: 1px solid #b5b5b5; border-bottom: 1px solid #c1c1c1; } .button[hidden] { display: none; } .dropdown { text-align: center; list-style: none; margin: 0; padding: 0; } .dropdown li { margin: 0; padding: 0; } /*======= Font style popup =======*/ .dropdown-popup { min-width: 300px; text-align: start; position: absolute; left: 48px; /* offset to account for toolbar width */ z-index: 1000; background-color: #fbfbfb; visibility: hidden; border-radius: 4px; border: 1px 1px 0 1px solid #b5b5b5; box-shadow: 0 1px 12px #666; } .dropdown-popup > hr { display: none; } .open > .dropdown-popup { visibility: visible; } .dropdown-arrow { position: absolute; top: 30px; /* offset arrow from top of popup */ left: -16px; width: 24px; height: 24px; background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); display: block; } #font-type-buttons, #font-size-buttons, #color-scheme-buttons { display: flex; flex-direction: row; } #font-type-buttons > button:first-child { border-top-left-radius: 3px; } #font-type-buttons > button:last-child { border-top-right-radius: 3px; } #color-scheme-buttons > button:first-child { border-bottom-left-radius: 3px; } #color-scheme-buttons > button:last-child { border-bottom-right-radius: 3px; } #font-type-buttons > button, #font-size-buttons > button, #color-scheme-buttons > button { text-align: center; border: 0; } #font-type-buttons > button, #font-size-buttons > button { width: 50%; background-color: transparent; border-left: 1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; } #color-scheme-buttons > button { width: 33.33%; font-size: 14px; } #color-scheme-buttons > .dark-button { margin-top: -1px; height: 61px; } #font-type-buttons > button:first-child, #font-size-buttons > button:first-child { border-left: 0; } #font-type-buttons > button { display: inline-block; font-size: 58px; height: 100px; } /* Make the serif button content the same size as the sans-serif button content. */ #font-type-buttons > .serif-button { padding-top: 1px; font-size: 60px; } #font-size-buttons > button, #color-scheme-buttons > button { height: 60px; } #font-type-buttons > button:active:hover, #font-type-buttons > button.selected, #color-scheme-buttons > button:active:hover, #color-scheme-buttons > button.selected { box-shadow: inset 0 -3px 0 0 #fc6420; } #font-type-buttons > button:active:hover, #font-type-buttons > button.selected { border-bottom: 1px solid #FC6420; } #font-type-buttons > button > div { color: #666; font-size: 12px; margin-top: -4px; } .button:hover, #font-size-buttons > button:hover, #font-type-buttons > button:hover { background-color: #ebebeb; } .dropdown.open, .button:active, #font-size-buttons > button:active, #font-size-buttons > button.selected { background-color: #dadada; } /* Only used on Android */ #font-size-sample { display: none; } .serif-button { font-family: "Charis SIL", Georgia, "Times New Roman", serif; } .minus-button, .plus-button { background-color: transparent; border: 0; background-size: 18px 18px; background-repeat: no-repeat; background-position: center; } .footer { height: 64px; background-color: #ebebeb; position: absolute; left: 0; width: 100%; text-align: center; padding: 12px 0; box-sizing: border-box; box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset; } .sepia .footer { background-color: #dedad4; } .remove-button { background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); margin: 0 auto; border: 1px solid #c1c1c1; background-position: 10px 7px; padding-left: 42px; padding-right: 10px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size: 18px; } /*======= Toolbar icons =======*/ /* Android-only controls */ .share-button { display: none; } .close-button { background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); height: 68px; background-position: center 8px; } .close-button:hover { background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); background-color: #d94141; border-bottom: 1px solid #d94141; border-right: 1px solid #d94141; } .close-button:hover:active { background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); background-color: #AE2325; border-bottom: 1px solid #AE2325; border-right: 1px solid #AE2325; } .style-button { background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); } .toggle-button.on { background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); } .toggle-button { background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); } .list-button { background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); } .list-button.on { background-color: #d9d9d9; } .minus-button { background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); } .plus-button { background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); } @media print { .toolbar { display: none; } .footer { display: none; } }