From da3c2755e14e83b2d8b5d45315c1574200f740e8 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 17 May 2015 20:26:17 +0200 Subject: [PATCH] sync both themes with toolkit windows theme changes in Mozilla 39 cycle --- EarlyBlue/global/aboutReader.css | 521 ++--------------------- EarlyBlue/global/aboutReaderContent.css | 113 +++++ EarlyBlue/global/aboutReaderControls.css | 397 +++++++++++++++++ EarlyBlue/global/global.css | 4 + EarlyBlue/global/in-content/common.css | 6 +- EarlyBlue/global/notification.css | 13 +- EarlyBlue/global/reader/pocket.svg | 28 ++ EarlyBlue/global/tabbox.css | 4 +- LCARStrek/global/aboutReader.css | 521 ++--------------------- LCARStrek/global/global.css | 4 + LCARStrek/global/in-content/common.css | 6 +- LCARStrek/global/notification.css | 13 +- LCARStrek/global/tabbox.css | 4 +- 13 files changed, 672 insertions(+), 962 deletions(-) create mode 100644 EarlyBlue/global/aboutReaderContent.css create mode 100644 EarlyBlue/global/aboutReaderControls.css create mode 100644 EarlyBlue/global/reader/pocket.svg diff --git a/EarlyBlue/global/aboutReader.css b/EarlyBlue/global/aboutReader.css index b852c609..8121e5f9 100644 --- a/EarlyBlue/global/aboutReader.css +++ b/EarlyBlue/global/aboutReader.css @@ -4,8 +4,6 @@ body { padding: 64px 0; - max-width: 660px; - margin: 0 auto; } @media (max-width: 785px) { @@ -21,531 +19,106 @@ body.loaded { transition: color 0.4s, background-color 0.4s; } -.light, -.light-button { +body.light { color: #333333; background-color: #ffffff; } -.dark, -.dark-button { +body.dark { color: #eeeeee; background-color: #333333; } -.sepia, -.sepia-button { - color: #333333; - background-color: #f0ece7; +body.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +body.dark a::-moz-selection { + color: #DD4800; } -.sans-serif, -.sans-serif .remove-button { - font-family: "Fira Sans", Helvetica, Arial, sans-serif; +body.sepia { + color: #5b4636; + background-color: #f4ecd8; } -.serif, -.serif .remove-button { - font-family: "Charis SIL", Georgia, "Times New Roman", serif; +body.sans-serif, +body.sans-serif .remove-button { + font-family: Helvetica, Arial, sans-serif; } -.font-size1 { - font-size: 10px; +body.serif, +body.serif .remove-button { + font-family: Georgia, "Times New Roman", serif; } -.font-size2 { +#container { + max-width: 30em; + margin: 0 auto; +} + +#container.font-size1 { font-size: 12px; } -.font-size3 { +#container.font-size2 { font-size: 14px; } -.font-size4 { +#container.font-size3 { font-size: 16px; } -.font-size5 { +#container.font-size4 { font-size: 18px; } -.font-size6 { +#container.font-size5 { font-size: 20px; } -.font-size7 { +#container.font-size6 { font-size: 22px; } -.font-size8 { +#container.font-size7 { font-size: 24px; } -.font-size9 { +#container.font-size8 { 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; +#container.font-size9 { + font-size: 28px; } -.content ul, -.content ol { - padding: 0; -} +/* Override some controls and content styles based on color scheme */ -.content ul { - -moz-padding-start: 30px; - list-style: disc; +body.light > .container > .header > .domain { + border-bottom-color: #333333 !important; } -.content ol { - -moz-padding-start: 30px; - list-style: decimal; +body.sepia > .container > .header > .domain { + border-bottom-color: #5b4636 !important; } -/*======= 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; +body.dark > .container > .header > .domain { + border-bottom-color: #eeeeee !important; } -.button { - display: block; - background-size: 24px 24px; - background-repeat: no-repeat; - color: #333; - background-color: #fbfbfb; - height: 40px; - padding: 0; +body.sepia > .container > .footer { + background-color: #dedad4 !important; } -.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; +body.light blockquote { + -moz-border-start: 2px solid #333333 !important; } -.button[hidden] { - display: none; +body.sepia blockquote { + -moz-border-start: 2px solid #5b4636 !important; } -.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; - } +body.dark blockquote { + -moz-border-start: 2px solid #eeeeee !important; } diff --git a/EarlyBlue/global/aboutReaderContent.css b/EarlyBlue/global/aboutReaderContent.css new file mode 100644 index 00000000..84127513 --- /dev/null +++ b/EarlyBlue/global/aboutReaderContent.css @@ -0,0 +1,113 @@ +/* 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/. */ + +#moz-reader-content { + display: none; + font-size: 1em; + line-height: 1.6em; +} + +h1, +h2, +h3 { + font-weight: bold; +} + +h1 { + font-size: 1.6em; + line-height: 1.25em; +} + +h2 { + font-size: 1.2em; + line-height: 1.51em; +} + +h3 { + font-size: 1em; + line-height: 1.66em; +} + +a { + text-decoration: underline; + font-weight: normal; +} + +a, +a:visited, +a:hover, +a:active { + color: #0095dd; +} + +* { + max-width: 100%; + height: auto; +} + +p, +code, +pre, +blockquote, +ul, +ol, +li, +figure, +.wp-caption { + margin: 0 0 30px 0; +} + +p > img:only-child, +p > a:only-child > img:only-child, +.wp-caption img, +figure img { + display: block; +} + +img[moz-reader-center] { + margin-left: auto; + margin-right: auto; +} + +.caption, +.wp-caption-text, +figcaption { + font-size: 0.9em; + line-height: 1.48em; + font-style: italic; +} + +code, +pre { + white-space: pre-wrap; +} + +blockquote { + padding: 0; + -moz-padding-start: 16px; +} + +ul, +ol { + padding: 0; +} + +ul { + -moz-padding-start: 30px; + list-style: disc; +} + +ol { + -moz-padding-start: 30px; + list-style: decimal; +} + +/* Hide elements with common "hidden" class names */ +.visually-hidden, +.visuallyhidden, +.hidden, +.invisible, +.sr-only { + display: none; +} diff --git a/EarlyBlue/global/aboutReaderControls.css b/EarlyBlue/global/aboutReaderControls.css new file mode 100644 index 00000000..005a3b9b --- /dev/null +++ b/EarlyBlue/global/aboutReaderControls.css @@ -0,0 +1,397 @@ +/* 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/. */ + +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia-button { + color: #5b4636; + background-color: #f4ecd8; +} + +.sans-serif-button { + font-family: Helvetica, Arial, sans-serif; +} + +.serif-button { + font-family: Georgia, "Times New Roman", serif; +} + +/* Loading/error message */ + +#reader-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: Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.header > h1 { + font-size: 1.6em; + 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; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: 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 solid #b5b5b5; + border-bottom-width: 0; + 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: 62px; + height: 100px; +} + +#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; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +#font-type-buttons > button > .description { + color: #666; + font-size: 12px; + margin-top: -5px; +} + +/* Font sizes are different per-platform, so we need custom CSS to line them up. */ +%ifdef XP_MACOSX +#font-type-buttons > .sans-serif-button > .name { + margin-top: 10px; +} + +#font-type-buttons > .sans-serif-button > .description { + margin-top: -4px; +} + +#font-type-buttons > .serif-button > .name { + font-size: 63px; +} +%elifdef XP_WIN +#font-type-buttons > .sans-serif-button > .name { + margin-top: 2px; +} + +#font-type-buttons > .sans-serif-button > .description { + margin-top: -4px; +} + +#font-type-buttons > .serif-button > .name { + font-size: 63px; +} +%else +#font-type-buttons > .sans-serif-button > .name { + margin-top: 5px; +} + +#font-type-buttons > .sans-serif-button > .description { + margin-top: -8px; +} + +#font-type-buttons > .serif-button > .name { + font-size: 70px; +} +%endif + +.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; +} + +.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; +} + +.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"); +} + +#pocket-button { + background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark"); +} + +#pocket-button:hover:active { + background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added"); +} + +@media print { + .toolbar { + display: none !important; + } + .footer { + display: none !important; + } +} diff --git a/EarlyBlue/global/global.css b/EarlyBlue/global/global.css index 1aa900ba..803e7ab7 100644 --- a/EarlyBlue/global/global.css +++ b/EarlyBlue/global/global.css @@ -264,6 +264,10 @@ description { outline: 1px dotted; } +popupnotificationcontent { + margin-top: .5em; +} + /* :::::: autoscroll popup ::::: */ .autoscroller { diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css index e222bce7..fc758782 100644 --- a/EarlyBlue/global/in-content/common.css +++ b/EarlyBlue/global/in-content/common.css @@ -117,7 +117,7 @@ xul|tab:hover { background-color: #ebebeb; } -xul|tab[selected] { +xul|tab[visuallyselected] { background-color: #ebebeb; padding-bottom: 0; / compensate the 4px border / border-bottom: 4px solid #ff9500; @@ -478,6 +478,10 @@ xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } +xul|radio { + -moz-margin-start: 0; +} + xul|*.radio-check { -moz-appearance: none; width: 23px; diff --git a/EarlyBlue/global/notification.css b/EarlyBlue/global/notification.css index 2c43f685..dad7931e 100644 --- a/EarlyBlue/global/notification.css +++ b/EarlyBlue/global/notification.css @@ -60,14 +60,19 @@ notification[type="critical"] { max-width: 24em; } -.popup-notification-learnmore-link { - margin-top: 1em !important; -} - +.popup-notification-originHost:not([value]), .popup-notification-learnmore-link:not([href]) { display: none; } +.popup-notification-originHost { + margin-bottom: .3em !important; +} + +.popup-notification-learnmore-link { + margin-top: .5em !important; +} + .popup-notification-button-container { margin-top: 17px; } diff --git a/EarlyBlue/global/reader/pocket.svg b/EarlyBlue/global/reader/pocket.svg new file mode 100644 index 00000000..63b22fa6 --- /dev/null +++ b/EarlyBlue/global/reader/pocket.svg @@ -0,0 +1,28 @@ + + + + + + + + + diff --git a/EarlyBlue/global/tabbox.css b/EarlyBlue/global/tabbox.css index f97d69f0..7f9149cc 100644 --- a/EarlyBlue/global/tabbox.css +++ b/EarlyBlue/global/tabbox.css @@ -44,7 +44,7 @@ tab { margin: 0 !important; } -tab[selected="true"] { +tab[visuallyselected="true"] { font-weight: bold; background-color: #EDF1FF; } @@ -59,7 +59,7 @@ tab:-moz-focusring > .tab-middle { } /* -tab:first-of-type[selected="true"] { +tab:first-of-type[visuallyselected="true"] { -moz-padding-end: 5px; -moz-padding-start: 5px; } diff --git a/LCARStrek/global/aboutReader.css b/LCARStrek/global/aboutReader.css index b852c609..8121e5f9 100644 --- a/LCARStrek/global/aboutReader.css +++ b/LCARStrek/global/aboutReader.css @@ -4,8 +4,6 @@ body { padding: 64px 0; - max-width: 660px; - margin: 0 auto; } @media (max-width: 785px) { @@ -21,531 +19,106 @@ body.loaded { transition: color 0.4s, background-color 0.4s; } -.light, -.light-button { +body.light { color: #333333; background-color: #ffffff; } -.dark, -.dark-button { +body.dark { color: #eeeeee; background-color: #333333; } -.sepia, -.sepia-button { - color: #333333; - background-color: #f0ece7; +body.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +body.dark a::-moz-selection { + color: #DD4800; } -.sans-serif, -.sans-serif .remove-button { - font-family: "Fira Sans", Helvetica, Arial, sans-serif; +body.sepia { + color: #5b4636; + background-color: #f4ecd8; } -.serif, -.serif .remove-button { - font-family: "Charis SIL", Georgia, "Times New Roman", serif; +body.sans-serif, +body.sans-serif .remove-button { + font-family: Helvetica, Arial, sans-serif; } -.font-size1 { - font-size: 10px; +body.serif, +body.serif .remove-button { + font-family: Georgia, "Times New Roman", serif; } -.font-size2 { +#container { + max-width: 30em; + margin: 0 auto; +} + +#container.font-size1 { font-size: 12px; } -.font-size3 { +#container.font-size2 { font-size: 14px; } -.font-size4 { +#container.font-size3 { font-size: 16px; } -.font-size5 { +#container.font-size4 { font-size: 18px; } -.font-size6 { +#container.font-size5 { font-size: 20px; } -.font-size7 { +#container.font-size6 { font-size: 22px; } -.font-size8 { +#container.font-size7 { font-size: 24px; } -.font-size9 { +#container.font-size8 { 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; +#container.font-size9 { + font-size: 28px; } -.content ul, -.content ol { - padding: 0; -} +/* Override some controls and content styles based on color scheme */ -.content ul { - -moz-padding-start: 30px; - list-style: disc; +body.light > .container > .header > .domain { + border-bottom-color: #333333 !important; } -.content ol { - -moz-padding-start: 30px; - list-style: decimal; +body.sepia > .container > .header > .domain { + border-bottom-color: #5b4636 !important; } -/*======= 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; +body.dark > .container > .header > .domain { + border-bottom-color: #eeeeee !important; } -.button { - display: block; - background-size: 24px 24px; - background-repeat: no-repeat; - color: #333; - background-color: #fbfbfb; - height: 40px; - padding: 0; +body.sepia > .container > .footer { + background-color: #dedad4 !important; } -.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; +body.light blockquote { + -moz-border-start: 2px solid #333333 !important; } -.button[hidden] { - display: none; +body.sepia blockquote { + -moz-border-start: 2px solid #5b4636 !important; } -.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; - } +body.dark blockquote { + -moz-border-start: 2px solid #eeeeee !important; } diff --git a/LCARStrek/global/global.css b/LCARStrek/global/global.css index 9172104f..6b2a9124 100644 --- a/LCARStrek/global/global.css +++ b/LCARStrek/global/global.css @@ -322,6 +322,10 @@ description { outline: 1px dotted; } +popupnotificationcontent { + margin-top: .5em; +} + /* :::::: autoscroll popup ::::: */ .autoscroller { diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index f06fc51c..d1bb5265 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -117,7 +117,7 @@ xul|tab:hover { background-color: #ebebeb; } -xul|tab[selected] { +xul|tab[visuallyselected] { background-color: #ebebeb; padding-bottom: 0; / compensate the 4px border / border-bottom: 4px solid #ff9500; @@ -482,6 +482,10 @@ xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } +xul|radio { + -moz-margin-start: 0; +} + xul|*.radio-check { -moz-appearance: none; width: 23px; diff --git a/LCARStrek/global/notification.css b/LCARStrek/global/notification.css index 6a429fae..97aed0e3 100644 --- a/LCARStrek/global/notification.css +++ b/LCARStrek/global/notification.css @@ -67,14 +67,19 @@ notification[type="critical"] { max-width: 24em; } -.popup-notification-learnmore-link { - margin-top: 1em !important; -} - +.popup-notification-originHost:not([value]), .popup-notification-learnmore-link:not([href]) { display: none; } +.popup-notification-originHost { + margin-bottom: .3em !important; +} + +.popup-notification-learnmore-link { + margin-top: .5em !important; +} + .popup-notification-button-container { margin-top: 17px; } diff --git a/LCARStrek/global/tabbox.css b/LCARStrek/global/tabbox.css index a35fcc2b..a88fc0af 100644 --- a/LCARStrek/global/tabbox.css +++ b/LCARStrek/global/tabbox.css @@ -47,7 +47,7 @@ tab { margin: 0 !important; } -tab[selected="true"] { +tab[visuallyselected="true"] { font-weight: bold; background-color: #008484; } @@ -72,7 +72,7 @@ tab:first-of-type { -moz-margin-start: 5px; } /* -tab:first-of-type[selected="true"] { +tab:first-of-type[visuallyselected="true"] { -moz-padding-end: 5px; -moz-padding-start: 5px; } -- 2.43.0