diff options
Diffstat (limited to 'toolkit/themes')
| -rw-r--r-- | toolkit/themes/shared/aboutReader.css | 626 | ||||
| -rw-r--r-- | toolkit/themes/shared/aboutReaderContent.css | 177 | ||||
| -rw-r--r-- | toolkit/themes/shared/aboutReaderControls.css | 388 | ||||
| -rw-r--r-- | toolkit/themes/shared/jar.inc.mn | 5 | ||||
| -rw-r--r-- | toolkit/themes/shared/narrate.css | 195 | ||||
| -rw-r--r-- | toolkit/themes/shared/narrateControls.css | 185 | ||||
| -rw-r--r-- | toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg | 5 | ||||
| -rw-r--r-- | toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg | 5 | ||||
| -rw-r--r-- | toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg | 5 | ||||
| -rw-r--r-- | toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg | 5 | ||||
| -rw-r--r-- | toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg | 16 |
11 files changed, 801 insertions, 811 deletions
diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css index 49436de84..4dbf11f6d 100644 --- a/toolkit/themes/shared/aboutReader.css +++ b/toolkit/themes/shared/aboutReader.css @@ -2,23 +2,13 @@ * 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/. */ +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ + body { padding: 64px 51px; } -@media print { - #container { - max-width: 100% !important; - font-size: 14px !important; - font-family: Georgia, "Times New Roman", serif !important; - } - - body { - padding-top: 0px; - padding-bottom: 0px; - } -} - body.loaded { transition: color 0.4s, background-color 0.4s; } @@ -56,80 +46,80 @@ body.serif .remove-button { font-family: Georgia, "Times New Roman", serif; } -#container { +.container { max-width: 30em; margin: 0 auto; } -#container.font-size1 { +.container.font-size1 { font-size: 12px; } -#container.font-size2 { +.container.font-size2 { font-size: 14px; } -#container.font-size3 { +.container.font-size3 { font-size: 16px; } -#container.font-size4 { +.container.font-size4 { font-size: 18px; } -#container.font-size5 { +.container.font-size5 { font-size: 20px; } -#container.font-size6 { +.container.font-size6 { font-size: 22px; } -#container.font-size7 { +.container.font-size7 { font-size: 24px; } -#container.font-size8 { +.container.font-size8 { font-size: 26px; } -#container.font-size9 { +.container.font-size9 { font-size: 28px; } -#container.content-width1 { +.container.content-width1 { max-width: 20em; } -#container.content-width2 { +.container.content-width2 { max-width: 25em; } -#container.content-width3 { +.container.content-width3 { max-width: 30em; } -#container.content-width4 { +.container.content-width4 { max-width: 35em; } -#container.content-width5 { +.container.content-width5 { max-width: 40em; } -#container.content-width6 { +.container.content-width6 { max-width: 45em; } -#container.content-width7 { +.container.content-width7 { max-width: 50em; } -#container.content-width8 { +.container.content-width8 { max-width: 55em; } -#container.content-width9 { +.container.content-width9 { max-width: 60em; } @@ -176,3 +166,575 @@ body:not(.loaded) .toolbar:-moz-locale-dir(ltr) { body:not(.loaded) .toolbar:-moz-locale-dir(rtl) { transform: translateX(100%); } + +.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 10px 0; + padding: 0; + font-style: italic; +} + +.header > .meta-data { + font-size: 0.65em; + margin: 0 0 15px 0; +} + +/*======= 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; + z-index: 1; +} + +.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; +} + +/*======= 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 3px #c1c1c1; +} + +.keep-open .dropdown-popup { + z-index: initial; +} + +.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: 16px; + height: 24px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; +} + +/*======= Font style popup =======*/ + +.font-type-buttons, +.font-size-buttons, +.color-scheme-buttons, +.content-width-buttons, +.line-height-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, +.content-width-buttons > button, +.line-height-buttons > button { + text-align: center; + border: 0; +} + +.font-type-buttons > button, +.font-size-buttons > button, +.content-width-buttons > button, +.line-height-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, +.content-width-buttons > button:first-child, +.line-height-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, +.content-width-buttons > button, +.line-height-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, +.content-width-buttons > button:hover, +.line-height-buttons > button:hover { + background-color: #ebebeb; +} + +.dropdown.open, +.button:active, +.font-size-buttons > button:active, +.font-size-buttons > button.selected, +.content-width-buttons > button:active, +.content-width-buttons > button.selected, +.line-height-buttons > button:active, +.line-height-buttons > button.selected { + background-color: #dadada; +} + +/* Only used on Android */ +.font-size-sample { + display: none; +} + +.minus-button, +.plus-button, +.content-width-minus-button, +.content-width-plus-button, +.line-height-minus-button, +.line-height-plus-button { + background-color: transparent; + border: 0; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +/*======= Toolbar icons =======*/ + +.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"); +} + +.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"); +} + +.content-width-minus-button { + background-size: 42px 16px; + background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); +} + +.content-width-plus-button { + background-size: 44px 16px; + background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg"); +} + +.line-height-minus-button { + background-size: 34px 14px; + background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg"); +} + +.line-height-plus-button { + background-size: 34px 24px; + background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg"); +} + +@media print { + .toolbar { + display: none !important; + } +} + +/*======= Article content =======*/ + +/* Note that any class names from the original article that we want to match on + * must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that + * Readability.js doesn't strip them out */ + +.moz-reader-content { + display: none; + font-size: 1em; + line-height: 1.6em; +} + +.moz-reader-content.line-height1 { + line-height: 1em; +} + +.moz-reader-content.line-height2 { + line-height: 1.2em; +} + +.moz-reader-content.line-height3 { + line-height: 1.4em; +} + +.moz-reader-content.line-height4 { + line-height: 1.6em; +} + +.moz-reader-content.line-height5 { + line-height: 1.8em; +} + +.moz-reader-content.line-height6 { + line-height: 2.0em; +} + +.moz-reader-content.line-height7 { + line-height: 2.2em; +} + +.moz-reader-content.line-height8 { + line-height: 2.4em; +} + +.moz-reader-content.line-height9 { + line-height: 2.6em; +} + +@media print { + .moz-reader-content p, + .moz-reader-content code, + .moz-reader-content pre, + .moz-reader-content blockquote, + .moz-reader-content ul, + .moz-reader-content ol, + .moz-reader-content li, + .moz-reader-content figure, + .moz-reader-content .wp-caption { + margin: 0 0 10px 0 !important; + padding: 0 !important; + } +} + +.moz-reader-content h1, +.moz-reader-content h2, +.moz-reader-content h3 { + font-weight: bold; +} + +.moz-reader-content h1 { + font-size: 1.6em; + line-height: 1.25em; +} + +.moz-reader-content h2 { + font-size: 1.2em; + line-height: 1.51em; +} + +.moz-reader-content h3 { + font-size: 1em; + line-height: 1.66em; +} + +.moz-reader-content a:link { + text-decoration: underline; + font-weight: normal; +} + +.moz-reader-content a:link, +.moz-reader-content a:link:hover, +.moz-reader-content a:link:active { + color: #0095dd; +} + +.moz-reader-content a:visited { + color: #c2e; +} + +.moz-reader-content * { + max-width: 100%; + height: auto; +} + +.moz-reader-content p, +.moz-reader-content p, +.moz-reader-content code, +.moz-reader-content pre, +.moz-reader-content blockquote, +.moz-reader-content ul, +.moz-reader-content ol, +.moz-reader-content li, +.moz-reader-content figure, +.moz-reader-content .wp-caption { + margin: -10px -10px 20px -10px; + padding: 10px; + border-radius: 5px; +} + +.moz-reader-content li { + margin-bottom: 0; +} + +.moz-reader-content li > ul, +.moz-reader-content li > ol { + margin-bottom: -10px; +} + +.moz-reader-content p > img:only-child, +.moz-reader-content p > a:only-child > img:only-child, +.moz-reader-content .wp-caption img, +.moz-reader-content figure img { + display: block; +} + +.moz-reader-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; +} + +.moz-reader-content code, +.moz-reader-content pre { + white-space: pre-wrap; +} + +.moz-reader-content blockquote { + padding: 0; + padding-inline-start: 16px; +} + +.moz-reader-content ul, +.moz-reader-content ol { + padding: 0; +} + +.moz-reader-content ul { + padding-inline-start: 30px; + list-style: disc; +} + +.moz-reader-content ol { + padding-inline-start: 30px; + list-style: decimal; +} + +/* Hide elements with common "hidden" class names */ +.moz-reader-content .visually-hidden, +.moz-reader-content .visuallyhidden, +.moz-reader-content .hidden, +.moz-reader-content .invisible, +.moz-reader-content .sr-only { + display: none; +} diff --git a/toolkit/themes/shared/aboutReaderContent.css b/toolkit/themes/shared/aboutReaderContent.css deleted file mode 100644 index 633391d37..000000000 --- a/toolkit/themes/shared/aboutReaderContent.css +++ /dev/null @@ -1,177 +0,0 @@ -/* 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; -} - -#moz-reader-content.line-height1 { - line-height: 1em; -} - -#moz-reader-content.line-height2 { - line-height: 1.2em; -} - -#moz-reader-content.line-height3 { - line-height: 1.4em; -} - -#moz-reader-content.line-height4 { - line-height: 1.6em; -} - -#moz-reader-content.line-height5 { - line-height: 1.8em; -} - -#moz-reader-content.line-height6 { - line-height: 2.0em; -} - -#moz-reader-content.line-height7 { - line-height: 2.2em; -} - -#moz-reader-content.line-height8 { - line-height: 2.4em; -} - -#moz-reader-content.line-height9 { - line-height: 2.6em; -} - -@media print { - p, - code, - pre, - blockquote, - ul, - ol, - li, - figure, - .wp-caption { - margin: 0 0 10px 0 !important; - } -} - -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:link { - text-decoration: underline; - font-weight: normal; -} - -a:link, -a:link:hover, -a:link:active { - color: #0095dd; -} - -a:visited { - color: #c2e; -} - -* { - max-width: 100%; - height: auto; -} - -p, -code, -pre, -blockquote, -ul, -ol, -li, -figure, -.wp-caption { - margin: -10px -10px 20px -10px; - padding: 10px; - border-radius: 5px; -} - -li { - margin-bottom: 0; -} - -li > ul, -li > ol { - margin-bottom: -10px; -} - -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; - padding-inline-start: 16px; -} - -ul, -ol { - padding: 0; -} - -ul { - padding-inline-start: 30px; - list-style: disc; -} - -ol { - padding-inline-start: 30px; - list-style: decimal; -} - -/* Hide elements with common "hidden" class names */ -.visually-hidden, -.visuallyhidden, -.hidden, -.invisible, -.sr-only { - display: none; -} diff --git a/toolkit/themes/shared/aboutReaderControls.css b/toolkit/themes/shared/aboutReaderControls.css deleted file mode 100644 index afd65f458..000000000 --- a/toolkit/themes/shared/aboutReaderControls.css +++ /dev/null @@ -1,388 +0,0 @@ -/* 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; - z-index: 1; -} - -.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; -} - -/*======= 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; -} - -.keep-open .dropdown-popup { - z-index: initial; -} - -.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 style popup =======*/ - -#font-type-buttons, -#font-size-buttons, -#color-scheme-buttons, -#content-width-buttons, -#line-height-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, -#content-width-buttons > button, -#line-height-buttons > button { - text-align: center; - border: 0; -} - -#font-type-buttons > button, -#font-size-buttons > button, -#content-width-buttons > button, -#line-height-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, -#content-width-buttons > button:first-child, -#line-height-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, -#content-width-buttons > button, -#line-height-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, -#content-width-buttons > button:hover, -#line-height-buttons > button:hover { - background-color: #ebebeb; -} - -.dropdown.open, -.button:active, -#font-size-buttons > button:active, -#font-size-buttons > button.selected, -#content-width-buttons > button:active, -#content-width-buttons > button.selected, -#line-height-buttons > button:active, -#line-height-buttons > button.selected { - background-color: #dadada; -} - -/* Only used on Android */ -#font-size-sample { - display: none; -} - -.minus-button, -.plus-button, -.content-width-minus-button, -.content-width-plus-button, -.line-height-minus-button, -.line-height-plus-button { - background-color: transparent; - border: 0; - background-size: 18px 18px; - background-repeat: no-repeat; - background-position: center; -} - -/*======= Toolbar icons =======*/ - -.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"); -} - -.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"); -} - -.content-width-minus-button { - background-size: 42px 16px; - background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); -} - -.content-width-plus-button { - background-size: 44px 16px; - background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg"); -} - -.line-height-minus-button { - background-size: 34px 14px; - background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg"); -} - -.line-height-plus-button { - background-size: 34px 24px; - background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg"); -} - -@media print { - .toolbar { - display: none !important; - } -} diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index bdfca2a05..675353409 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -15,9 +15,7 @@ toolkit.jar: skin/classic/global/aboutCache.css (../../shared/aboutCache.css) skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css) skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css) - skin/classic/global/aboutReader.css (../../shared/aboutReader.css) - skin/classic/global/aboutReaderContent.css (../../shared/aboutReaderContent.css) -* skin/classic/global/aboutReaderControls.css (../../shared/aboutReaderControls.css) +* skin/classic/global/aboutReader.css (../../shared/aboutReader.css) skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) skin/classic/global/appPicker.css (../../shared/appPicker.css) skin/classic/global/config.css (../../shared/config.css) @@ -34,7 +32,6 @@ toolkit.jar: skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg) skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css) skin/classic/global/narrate.css (../../shared/narrate.css) - skin/classic/global/narrateControls.css (../../shared/narrateControls.css) skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg) skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg) skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg) diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css index 8a44e78e2..836b5d686 100644 --- a/toolkit/themes/shared/narrate.css +++ b/toolkit/themes/shared/narrate.css @@ -1,3 +1,6 @@ +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ + .narrating { position: relative; z-index: 1; @@ -22,7 +25,7 @@ body.dark .narrating { z-index: -1; border-bottom-style: solid; border-bottom-width: 7px; - transition: left 0.1s ease; + transition: left 0.1s ease, width 0.1s ease; } .narrating > .narrate-word-highlight { @@ -44,3 +47,193 @@ body.sepia .narrate-word-highlight { body.dark .narrate-word-highlight { border-bottom-color: #6f6f6f; } + +.narrate-dropdown { + --border-color: #e5e5e5; +} + +.narrate-toggle > svg { + display: block; + margin: 0 8px; +} + +.narrate-dropdown > .dropdown-popup button { + background-color: transparent; +} + +.narrate-dropdown > .dropdown-popup button:hover:not(:disabled) { + background-color: #eaeaea; +} + +.narrate-row { + display: flex; + align-items: center; + min-height: 40px; + box-sizing: border-box; +} + +.narrate-row:not(:first-child) { + border-top: 1px solid var(--border-color); +} + +/* Control buttons */ + +.narrate-control > button { + background-size: 24px 24px; + background-repeat: no-repeat; + background-position: center center; + height: 64px; + width: 100px; + border: none; + color: #666; + box-sizing: border-box; +} + +.narrate-control > button:not(:first-child) { + border-left: 1px solid var(--border-color); +} + +.narrate-skip-previous { + border-top-left-radius: 3px; + background-image: url("chrome://global/skin/narrate/back.svg#enabled"); + -moz-context-properties: fill; + fill: rgb(128 128 128); +} + +.narrate-skip-next { + border-top-right-radius: 3px; + background-image: url("chrome://global/skin/narrate/forward.svg#enabled"); + -moz-context-properties: fill; + fill: rgb(128 128 128); +} + +.narrate-skip-previous:disabled { + background-image: url("chrome://global/skin/narrate/back.svg#disabled"); +} + +.narrate-skip-next:disabled { + background-image: url("chrome://global/skin/narrate/forward.svg#disabled"); +} + +.narrate-start-stop { + background-image: url("chrome://global/skin/narrate/start.svg"); +} + +.narrate-dropdown.speaking .narrate-start-stop { + background-image: url("chrome://global/skin/narrate/stop.svg"); +} + +/* Rate control */ + +.narrate-rate::before, .narrate-rate::after { + content: ''; + width: 48px; + height: 40px; + background-position: center; + background-repeat: no-repeat; + background-size: 24px auto; +} + +.narrate-rate::before { + background-image: url("chrome://global/skin/narrate/slow.svg"); +} + +.narrate-rate::after { + background-image: url("chrome://global/skin/narrate/fast.svg"); +} + +.narrate-rate-input { + margin: 0 1px; + flex-grow: 1; +} + +.narrate-rate-input::-moz-range-track { + background-color: #979797; + height: 2px; +} + +.narrate-rate-input::-moz-range-progress { + background-color: #2EA3FF; + height: 2px; +} + +.narrate-rate-input::-moz-range-thumb { + background-color: #808080; + height: 16px; + width: 16px; + border-radius: 8px; + border-width: 0; +} + +.narrate-rate-input:active::-moz-range-thumb { + background-color: #2EA3FF; +} + +/* Voice selection */ + +.voiceselect { + width: 100%; +} + +.voiceselect > button.select-toggle, +.voiceselect > .options > button.option { + -moz-appearance: none; + border: none; + width: 100%; + min-height: 40px; +} + +.voiceselect.open > button.select-toggle { + border-bottom: 1px solid var(--border-color); +} + +.voiceselect > button.select-toggle::after { + content: ''; + background-image: url("chrome://global/skin/narrate/arrow.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + display: inline-block; + width: 1.5em; + height: 1em; + vertical-align: middle; +} + +.voiceselect > .options > button.option:not(:first-child) { + border-top: 1px solid var(--border-color); +} + +.voiceselect > .options > button.option { + box-sizing: border-box; +} + +.voiceselect > .options:not(.hovering) > button.option:focus { + background-color: #eaeaea; +} + +.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) { + background-color: transparent; +} + +.voiceselect > .options > button.option::-moz-focus-inner { + outline: none; + border: 0; +} + +.voiceselect > .options { + display: none; + overflow-y: auto; +} + +.voiceselect.open > .options { + display: block; +} + +.current-voice { + color: #7f7f7f; +} + +.voiceselect:not(.open) > button, +.voiceselect .option:last-child { + border-radius: 0 0 3px 3px; +} diff --git a/toolkit/themes/shared/narrateControls.css b/toolkit/themes/shared/narrateControls.css deleted file mode 100644 index 91d02d85a..000000000 --- a/toolkit/themes/shared/narrateControls.css +++ /dev/null @@ -1,185 +0,0 @@ -:scope { - --border-color: #e5e5e5; -} - -#narrate-toggle > svg { - display: block; - margin: 0 8px; -} - -.dropdown-popup button { - background-color: transparent; -} - -.dropdown-popup button:hover:not(:disabled) { - background-color: #eaeaea; -} - -.narrate-row { - display: flex; - align-items: center; - min-height: 40px; - box-sizing: border-box; -} - -.narrate-row:not(:first-child) { - border-top: 1px solid var(--border-color); -} - -/* Control buttons */ - -#narrate-control > button { - background-size: 24px 24px; - background-repeat: no-repeat; - background-position: center center; - height: 64px; - width: 100px; - border: none; - color: #666; - box-sizing: border-box; -} - -#narrate-control > button:not(:first-child) { - border-left: 1px solid var(--border-color); -} - -#narrate-skip-previous { - border-top-left-radius: 3px; - background-image: url("chrome://global/skin/narrate/back.svg#enabled"); -} - -#narrate-skip-next { - border-top-right-radius: 3px; - background-image: url("chrome://global/skin/narrate/forward.svg#enabled"); -} - -#narrate-skip-previous:disabled { - background-image: url("chrome://global/skin/narrate/back.svg#disabled"); -} - -#narrate-skip-next:disabled { - background-image: url("chrome://global/skin/narrate/forward.svg#disabled"); -} - -#narrate-start-stop { - background-image: url("chrome://global/skin/narrate/start.svg"); -} - -#narrate-dropdown.speaking #narrate-start-stop { - background-image: url("chrome://global/skin/narrate/stop.svg"); -} - -/* Rate control */ - -#narrate-rate::before, #narrate-rate::after { - content: ''; - width: 48px; - height: 40px; - background-position: center; - background-repeat: no-repeat; - background-size: 24px auto; -} - -#narrate-rate::before { - background-image: url("chrome://global/skin/narrate/slow.svg"); -} - -#narrate-rate::after { - background-image: url("chrome://global/skin/narrate/fast.svg"); -} - -#narrate-rate-input { - margin: 0 1px; - flex-grow: 1; -} - -#narrate-rate-input::-moz-range-track { - background-color: #979797; - height: 2px; -} - -#narrate-rate-input::-moz-range-progress { - background-color: #2EA3FF; - height: 2px; -} - -#narrate-rate-input::-moz-range-thumb { - background-color: #808080; - height: 16px; - width: 16px; - border-radius: 8px; - border-width: 0; -} - -#narrate-rate-input:active::-moz-range-thumb { - background-color: #2EA3FF; -} - -/* Voice selection */ - -.voiceselect { - width: 100%; -} - -.voiceselect > button.select-toggle, -.voiceselect > .options > button.option { - -moz-appearance: none; - border: none; - width: 100%; - min-height: 40px; -} - -.voiceselect.open > button.select-toggle { - border-bottom: 1px solid var(--border-color); -} - -.voiceselect > button.select-toggle::after { - content: ''; - background-image: url("chrome://global/skin/narrate/arrow.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: 12px 12px; - display: inline-block; - width: 1.5em; - height: 1em; - vertical-align: middle; -} - -.voiceselect > .options > button.option:not(:first-child) { - border-top: 1px solid var(--border-color); -} - -.voiceselect > .options > button.option { - box-sizing: border-box; -} - -.voiceselect > .options:not(.hovering) > button.option:focus { - background-color: #eaeaea; -} - -.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) { - background-color: transparent; -} - -.voiceselect > .options > button.option::-moz-focus-inner { - outline: none; - border: 0; -} - -.voiceselect > .options { - display: none; - overflow-y: auto; -} - -.voiceselect.open > .options { - display: block; -} - -.current-voice { - color: #7f7f7f; -} - -.voiceselect:not(.open) > button, -.option:last-child { - border-radius: 0 0 3px 3px; -} diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg index 48bbb9e89..482a392fb 100644 --- a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg +++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- 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/. --> -<svg version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="42" height="16" viewBox="0 0 42 16" diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg index bcdcbe8ad..da02e608f 100644 --- a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg +++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- 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/. --> -<svg version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="44" height="16" viewBox="0 0 44 16" diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg index 05d52828a..59517c246 100644 --- a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg +++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- 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/. --> -<svg version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="38" height="14" viewBox="0 0 38 14" diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg index 0a5ee0dcc..ba50c5a52 100644 --- a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg +++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- 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/. --> -<svg version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="38" height="24" viewBox="0 0 38 24" diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg index 837392ff3..9c663119f 100644 --- a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg +++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg @@ -1,8 +1,8 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
- <polygon opacity="0.15" points="16.583,0.015 16.569,0 4.583,12 16.569,24 16.583,23.985"/>
- <polygon fill="#fbfbfb" points="16.575,1.021 16.561,1.008 5.583,12 16.577,23.008 16.591,22.994 "/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 24"> + <polygon points="16.58 0.01 16.57 0 4.58 12 16.57 24 16.58 23.98 16.58 0.01" fill="#b5b5b5"/> + <polyline points="16.63 1.51 6.08 12.01 16.63 22.5" fill="#fbfbfb"/> +</svg> |
