mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-29 07:42:04 +00:00
Bug 1417837 - Part 1: De-scope about:reader style sheets. r=Gijs
MozReview-Commit-ID: 8C65ljtFDrh --HG-- extra : rebase_source : 442d8cbaf7f7252b6b6393845d2d09e265678ae9
This commit is contained in:
Cameron McCormack
parent
f5baa30de9
commit
0c46625eab
@ -118,3 +118,409 @@ body.dark > .container > .content blockquote {
|
||||
color: #aaaaaa !important;
|
||||
border-left-color: #777777 !important;
|
||||
}
|
||||
|
||||
#reader-message {
|
||||
margin-top: 40px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: start;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.domain,
|
||||
.credits {
|
||||
font-size: 0.9em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.domain {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: #00acff !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.domain-border {
|
||||
margin-top: 15px;
|
||||
border-bottom: 1.5px solid #777777;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.header > h1 {
|
||||
font-size: 1.33em;
|
||||
font-weight: 700;
|
||||
line-height: 1.1em;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.header > .credits {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/*======= Controls toolbar =======*/
|
||||
|
||||
.toolbar {
|
||||
font-family: sans-serif;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0;
|
||||
list-style: none;
|
||||
pointer-events: none;
|
||||
transition: opacity 420ms linear;
|
||||
}
|
||||
|
||||
.toolbar > * {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: block;
|
||||
background-position: center;
|
||||
background-size: 26px 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #0979D9;
|
||||
border-radius: 10000px;
|
||||
margin: 20px;
|
||||
border: 0;
|
||||
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: #086ACC;
|
||||
}
|
||||
|
||||
/* Remove dotted border when button is focused */
|
||||
.button::-moz-focus-inner,
|
||||
.dropdown-popup > div > button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button[hidden],
|
||||
.toolbar[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-toggle,
|
||||
#reader-popup {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
left: 0;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*======= Font style popup =======*/
|
||||
|
||||
.dropdown-popup {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: calc(100% - 30px);
|
||||
margin: 15px;
|
||||
z-index: 1000;
|
||||
background: #EBEBF0;
|
||||
visibility: hidden;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
/* Only used on desktop */
|
||||
.dropdown-popup > hr,
|
||||
.dropdown-arrow,
|
||||
#font-type-buttons > button > .name,
|
||||
#content-width-buttons,
|
||||
#line-height-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.open > .dropdown-popup {
|
||||
visibility: visible;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons,
|
||||
#font-size-buttons,
|
||||
#color-scheme-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#color-scheme-buttons > button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button {
|
||||
width: 50%;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button {
|
||||
font-size: 24px;
|
||||
color: #AFB1B3;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button:active,
|
||||
#font-type-buttons > button.selected {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#font-size-sample {
|
||||
flex: 0;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
margin: 0 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.serif-button {
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.minus-button,
|
||||
.plus-button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-size: 24px 6px;
|
||||
margin-left: 50px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-size: 24px 24px;
|
||||
margin-right: 50px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button {
|
||||
width: 33%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #BFBFBF;
|
||||
padding: 10px;
|
||||
margin: 15px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button:active,
|
||||
#color-scheme-buttons > button.selected {
|
||||
border: 2px solid #0A84FF;
|
||||
}
|
||||
|
||||
.dark-button {
|
||||
color: #eeeeee;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.auto-button {
|
||||
color: #000000;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.light-button {
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/*======= Toolbar icons =======*/
|
||||
|
||||
/* desktop-only controls */
|
||||
.close-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-plus-hdpi.png');
|
||||
}
|
||||
|
||||
@media screen and (min-resolution: 2dppx) {
|
||||
.style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-plus-xhdpi.png');
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-resolution: 3dppx) {
|
||||
.style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-xxhdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-xxhdpi.png');
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-plus-xxhdpi.png');
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
.dropdown-popup {
|
||||
width: 350px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*======= 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;
|
||||
}
|
||||
|
||||
#moz-reader-content a {
|
||||
text-decoration: underline !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#moz-reader-content a,
|
||||
#moz-reader-content a:visited,
|
||||
#moz-reader-content a:hover,
|
||||
#moz-reader-content a:active {
|
||||
color: #00acff !important;
|
||||
}
|
||||
|
||||
#moz-reader-content * {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#moz-reader-content p {
|
||||
line-height: 1.4em !important;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
/* Covers all images showing edge-to-edge using a
|
||||
an optional caption text */
|
||||
#moz-reader-content .wp-caption,
|
||||
#moz-reader-content figure {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
|
||||
/* Images marked to be shown edge-to-edge with an
|
||||
optional captio ntext */
|
||||
#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;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Account for body padding to make image full width */
|
||||
#moz-reader-content img[moz-reader-full-width] {
|
||||
width: calc(100% + 40px);
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
/* Image caption text */
|
||||
#moz-reader-content .caption,
|
||||
#moz-reader-content .wp-caption-text,
|
||||
#moz-reader-content figcaption {
|
||||
font-size: 0.9em;
|
||||
font-family: sans-serif;
|
||||
margin: 0px !important;
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
/* Ensure all pre-formatted code inside the reader content
|
||||
are properly wrapped inside content width */
|
||||
#moz-reader-content code,
|
||||
#moz-reader-content pre {
|
||||
white-space: pre-wrap !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
#moz-reader-content blockquote {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
padding-inline-start: 16px !important;
|
||||
border: 0px !important;
|
||||
border-left: 2px solid !important;
|
||||
}
|
||||
|
||||
#moz-reader-content ul,
|
||||
#moz-reader-content ol {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#moz-reader-content ul {
|
||||
padding-inline-start: 30px !important;
|
||||
list-style: disc !important;
|
||||
}
|
||||
|
||||
#moz-reader-content ol {
|
||||
padding-inline-start: 35px !important;
|
||||
list-style: decimal !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@ -1,114 +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;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #00acff !important;
|
||||
}
|
||||
|
||||
* {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.4em !important;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
/* Covers all images showing edge-to-edge using a
|
||||
an optional caption text */
|
||||
.wp-caption,
|
||||
figure {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
|
||||
/* Images marked to be shown edge-to-edge with an
|
||||
optional captio ntext */
|
||||
p > img:only-child,
|
||||
p > a:only-child > img:only-child,
|
||||
.wp-caption img,
|
||||
figure img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Account for body padding to make image full width */
|
||||
img[moz-reader-full-width] {
|
||||
width: calc(100% + 40px);
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
/* Image caption text */
|
||||
.caption,
|
||||
.wp-caption-text,
|
||||
figcaption {
|
||||
font-size: 0.9em;
|
||||
font-family: sans-serif;
|
||||
margin: 0px !important;
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
/* Ensure all pre-formatted code inside the reader content
|
||||
are properly wrapped inside content width */
|
||||
code,
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
padding-inline-start: 16px !important;
|
||||
border: 0px !important;
|
||||
border-left: 2px solid !important;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: 30px !important;
|
||||
list-style: disc !important;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-inline-start: 35px !important;
|
||||
list-style: decimal !important;
|
||||
}
|
||||
|
||||
/* Hide elements with common "hidden" class names */
|
||||
.visually-hidden,
|
||||
.visuallyhidden,
|
||||
.hidden,
|
||||
.invisible,
|
||||
.sr-only {
|
||||
display: none;
|
||||
}
|
||||
@ -1,292 +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/. */
|
||||
|
||||
#reader-message {
|
||||
margin-top: 40px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: start;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.domain,
|
||||
.credits {
|
||||
font-size: 0.9em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.domain {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: #00acff !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.domain-border {
|
||||
margin-top: 15px;
|
||||
border-bottom: 1.5px solid #777777;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.header > h1 {
|
||||
font-size: 1.33em;
|
||||
font-weight: 700;
|
||||
line-height: 1.1em;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.header > .credits {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/*======= Controls toolbar =======*/
|
||||
|
||||
.toolbar {
|
||||
font-family: sans-serif;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0;
|
||||
list-style: none;
|
||||
pointer-events: none;
|
||||
transition: opacity 420ms linear;
|
||||
}
|
||||
|
||||
.toolbar > * {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: block;
|
||||
background-position: center;
|
||||
background-size: 26px 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #0979D9;
|
||||
border-radius: 10000px;
|
||||
margin: 20px;
|
||||
border: 0;
|
||||
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: #086ACC;
|
||||
}
|
||||
|
||||
/* Remove dotted border when button is focused */
|
||||
.button::-moz-focus-inner,
|
||||
.dropdown-popup > div > button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button[hidden],
|
||||
.toolbar[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-toggle,
|
||||
#reader-popup {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
left: 0;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*======= Font style popup =======*/
|
||||
|
||||
.dropdown-popup {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: calc(100% - 30px);
|
||||
margin: 15px;
|
||||
z-index: 1000;
|
||||
background: #EBEBF0;
|
||||
visibility: hidden;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
/* Only used on desktop */
|
||||
.dropdown-popup > hr,
|
||||
.dropdown-arrow,
|
||||
#font-type-buttons > button > .name,
|
||||
#content-width-buttons,
|
||||
#line-height-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.open > .dropdown-popup {
|
||||
visibility: visible;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons,
|
||||
#font-size-buttons,
|
||||
#color-scheme-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#color-scheme-buttons > button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button {
|
||||
width: 50%;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button {
|
||||
font-size: 24px;
|
||||
color: #AFB1B3;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button:active,
|
||||
#font-type-buttons > button.selected {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#font-size-sample {
|
||||
flex: 0;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
margin: 0 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.serif-button {
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.minus-button,
|
||||
.plus-button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-size: 24px 6px;
|
||||
margin-left: 50px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-size: 24px 24px;
|
||||
margin-right: 50px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button {
|
||||
width: 33%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #BFBFBF;
|
||||
padding: 10px;
|
||||
margin: 15px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button:active,
|
||||
#color-scheme-buttons > button.selected {
|
||||
border: 2px solid #0A84FF;
|
||||
}
|
||||
|
||||
.dark-button {
|
||||
color: #eeeeee;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.auto-button {
|
||||
color: #000000;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.light-button {
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/*======= Toolbar icons =======*/
|
||||
|
||||
/* desktop-only controls */
|
||||
.close-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-plus-hdpi.png');
|
||||
}
|
||||
|
||||
@media screen and (min-resolution: 2dppx) {
|
||||
.style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-plus-xhdpi.png');
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-resolution: 3dppx) {
|
||||
.style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-xxhdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-xxhdpi.png');
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-plus-xxhdpi.png');
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
.dropdown-popup {
|
||||
width: 350px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@ -15,8 +15,6 @@ chrome.jar:
|
||||
skin/aboutMemory.css (aboutMemory.css)
|
||||
skin/aboutPrivateBrowsing.css (aboutPrivateBrowsing.css)
|
||||
skin/aboutReader.css (aboutReader.css)
|
||||
skin/aboutReaderContent.css (aboutReaderContent.css)
|
||||
skin/aboutReaderControls.css (aboutReaderControls.css)
|
||||
skin/aboutSupport.css (aboutSupport.css)
|
||||
skin/config.css (config.css)
|
||||
skin/defines.css (defines.css)
|
||||
@ -25,8 +23,6 @@ chrome.jar:
|
||||
% override chrome://global/skin/about.css chrome://browser/skin/about.css
|
||||
% override chrome://global/skin/aboutMemory.css chrome://browser/skin/aboutMemory.css
|
||||
% override chrome://global/skin/aboutReader.css chrome://browser/skin/aboutReader.css
|
||||
% override chrome://global/skin/aboutReaderContent.css chrome://browser/skin/aboutReaderContent.css
|
||||
% override chrome://global/skin/aboutReaderControls.css chrome://browser/skin/aboutReaderControls.css
|
||||
% override chrome://global/skin/aboutSupport.css chrome://browser/skin/aboutSupport.css
|
||||
% override chrome://global/skin/netError.css chrome://browser/skin/netError.css
|
||||
|
||||
|
||||
@ -41,13 +41,9 @@ function NarrateControls(mm, win, languagePromise) {
|
||||
dropdown.className = "dropdown";
|
||||
dropdown.id = "narrate-dropdown";
|
||||
// We need inline svg here for the animation to work (bug 908634 & 1190881).
|
||||
// The style animation can't be scoped (bug 830056).
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
dropdown.innerHTML =
|
||||
localize`<style scoped>
|
||||
@import url("chrome://global/skin/narrateControls.css");
|
||||
</style>
|
||||
<li>
|
||||
localize`<li>
|
||||
<button class="dropdown-toggle button" id="narrate-toggle"
|
||||
title="${"narrate"}" hidden>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
|
||||
/* This file defines specific rules for print preview when using simplify mode.
|
||||
* Some of these rules (styling for title and author on the header element)
|
||||
* already exist on aboutReaderControls.css, however, we decoupled it from the
|
||||
* original file so we don't need to load a bunch of extra queries that will not
|
||||
* take effect when using the simplify page checkbox. */
|
||||
* already exist in aboutReader.css, however, we decoupled it from the original
|
||||
* file so we don't need to load a bunch of extra queries that will not take
|
||||
* effect when using the simplify page checkbox. */
|
||||
|
||||
body {
|
||||
padding-top: 0px;
|
||||
@ -29,4 +29,4 @@ body {
|
||||
line-height: 1.48em;
|
||||
margin: 0 0 30px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,9 +13,6 @@
|
||||
<body>
|
||||
<div id="container" class="container">
|
||||
<div id="reader-header" class="header">
|
||||
<style scoped>
|
||||
@import url("chrome://global/skin/aboutReaderControls.css");
|
||||
</style>
|
||||
<a id="reader-domain" class="domain"></a>
|
||||
<div class="domain-border"></div>
|
||||
<h1 id="reader-title"></h1>
|
||||
@ -28,24 +25,15 @@
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<style scoped>
|
||||
@import url("chrome://global/skin/aboutReaderContent.css");
|
||||
</style>
|
||||
<div id="moz-reader-content"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<style scoped>
|
||||
@import url("chrome://global/skin/aboutReaderControls.css");
|
||||
</style>
|
||||
<div id="reader-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="reader-toolbar" class="toolbar">
|
||||
<style scoped>
|
||||
@import url("chrome://global/skin/aboutReaderControls.css");
|
||||
</style>
|
||||
<li><button id="close-button" class="button close-button"/></li>
|
||||
<ul id="style-dropdown" class="dropdown">
|
||||
<li><button class="dropdown-toggle button style-button"/></li>
|
||||
|
||||
@ -677,12 +677,6 @@ var Printing = {
|
||||
contentElement.setAttribute("class", "content");
|
||||
containerElement.appendChild(contentElement);
|
||||
|
||||
// Create style element for content div and import aboutReaderContent.css
|
||||
let controlContentStyle = content.document.createElement("style");
|
||||
controlContentStyle.setAttribute("scoped", "");
|
||||
controlContentStyle.textContent = "@import url(\"chrome://global/skin/aboutReaderContent.css\");";
|
||||
contentElement.appendChild(controlContentStyle);
|
||||
|
||||
// Jam the article's content into content div
|
||||
let readerContent = content.document.createElement("div");
|
||||
readerContent.setAttribute("id", "moz-reader-content");
|
||||
|
||||
@ -163,3 +163,576 @@ 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");
|
||||
-moz-context-properties: fill;
|
||||
fill: #808080;
|
||||
height: 68px;
|
||||
background-position: center 8px;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
fill: #fff;
|
||||
background-color: #d94141;
|
||||
border-bottom: 1px solid #d94141;
|
||||
border-right: 1px solid #d94141;
|
||||
}
|
||||
|
||||
.close-button:hover:active {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,178 +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;
|
||||
padding: 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;
|
||||
}
|
||||
@ -1,394 +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 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");
|
||||
-moz-context-properties: fill;
|
||||
fill: #808080;
|
||||
height: 68px;
|
||||
background-position: center 8px;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
fill: #fff;
|
||||
background-color: #d94141;
|
||||
border-bottom: 1px solid #d94141;
|
||||
border-right: 1px solid #d94141;
|
||||
}
|
||||
|
||||
.close-button:hover:active {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -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/aboutRights.css (../../shared/aboutRights.css)
|
||||
skin/classic/global/aboutLicense.css (../../shared/aboutLicense.css)
|
||||
skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css)
|
||||
@ -50,7 +48,6 @@ toolkit.jar:
|
||||
skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg)
|
||||
skin/classic/global/illustrations/about-license.svg (../../shared/illustrations/about-license.svg)
|
||||
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)
|
||||
|
||||
@ -44,3 +44,190 @@ 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;
|
||||
}
|
||||
|
||||
.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");
|
||||
-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");
|
||||
-moz-context-properties: fill;
|
||||
fill: rgb(128 128 128);
|
||||
}
|
||||
|
||||
#narrate-skip-previous:disabled,
|
||||
#narrate-skip-next:disabled {
|
||||
fill: rgb(128 128 128 / 50%);
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
@ -1,186 +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");
|
||||
-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");
|
||||
-moz-context-properties: fill;
|
||||
fill: rgb(128 128 128);
|
||||
}
|
||||
|
||||
#narrate-skip-previous:disabled,
|
||||
#narrate-skip-next:disabled {
|
||||
fill: rgb(128 128 128 / 50%);
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user