1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
11 @media (max-width: 785px) {
16 -moz-padding-start: 51px;
21 transition: color 0.4s, background-color 0.4s;
27 background-color: #ffffff;
33 background-color: #333333;
39 background-color: #f0ece7;
43 .sans-serif .remove-button {
44 font-family: "Fira Sans", Helvetica, Arial, sans-serif;
48 .serif .remove-button {
49 font-family: "Charis SIL", Georgia, "Times New Roman", serif;
89 /* Loading/error message */
110 font-family: "Fira Sans", Helvetica, Arial, sans-serif;
111 text-decoration: none;
112 border-bottom: 1px solid;
116 .light > .container > .header > .domain,
117 .sepia > .container > .header > .domain {
118 border-bottom-color: #333333;
121 .dark > .container > .header > .domain {
122 border-bottom-color: #eeeeee;
143 #moz-reader-content {
155 #moz-reader-content h1 {
160 #moz-reader-content h2 {
165 #moz-reader-content h3 {
171 text-decoration: underline;
195 .content .wp-caption {
199 .content p > img:only-child,
200 .content p > a:only-child > img:only-child,
201 .content .wp-caption img,
202 .content figure img {
206 .content img[moz-reader-center] {
211 #moz-reader-content .caption,
212 #moz-reader-content .wp-caption-text,
213 #moz-reader-content figcaption {
221 white-space: pre-wrap;
224 .content blockquote {
226 -moz-padding-start: 16px;
229 .light > .container > .content blockquote,
230 .sepia > .container > .content blockquote {
231 -moz-border-start: 2px solid #333333;
234 .dark > .container > .content blockquote {
235 -moz-border-start: 2px solid #eeeeee;
237 .dark *::-moz-selection {
238 background-color: #FFFFFF;
241 .dark a::-moz-selection {
251 -moz-padding-start: 30px;
256 -moz-padding-start: 30px;
260 /*======= Controls toolbar =======*/
263 font-family: "Fira Sans", Helvetica, Arial, sans-serif;
271 background-color: #fbfbfb;
272 -moz-user-select: none;
273 border-right: 1px solid #b5b5b5;
278 background-size: 24px 24px;
279 background-repeat: no-repeat;
281 background-color: #fbfbfb;
288 background-position: center;
292 border-right: 1px solid #b5b5b5;
293 border-bottom: 1px solid #c1c1c1;
312 /*======= Font style popup =======*/
318 left: 48px; /* offset to account for toolbar width */
320 background-color: #fbfbfb;
323 border: 1px 1px 0 1px solid #b5b5b5;
324 box-shadow: 0 1px 12px #666;
327 .dropdown-popup > hr {
331 .open > .dropdown-popup {
337 top: 30px; /* offset arrow from top of popup */
341 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
347 #color-scheme-buttons {
352 #font-type-buttons > button:first-child {
353 border-top-left-radius: 3px;
355 #font-type-buttons > button:last-child {
356 border-top-right-radius: 3px;
358 #color-scheme-buttons > button:first-child {
359 border-bottom-left-radius: 3px;
361 #color-scheme-buttons > button:last-child {
362 border-bottom-right-radius: 3px;
365 #font-type-buttons > button,
366 #font-size-buttons > button,
367 #color-scheme-buttons > button {
372 #font-type-buttons > button,
373 #font-size-buttons > button {
375 background-color: transparent;
376 border-left: 1px solid #B5B5B5;
377 border-bottom: 1px solid #B5B5B5;
380 #color-scheme-buttons > button {
385 #color-scheme-buttons > .dark-button {
390 #font-type-buttons > button:first-child,
391 #font-size-buttons > button:first-child {
395 #font-type-buttons > button {
396 display: inline-block;
401 /* Make the serif button content the same size as the sans-serif button content. */
402 #font-type-buttons > .serif-button {
407 #font-size-buttons > button,
408 #color-scheme-buttons > button {
412 #font-type-buttons > button:active:hover,
413 #font-type-buttons > button.selected,
414 #color-scheme-buttons > button:active:hover,
415 #color-scheme-buttons > button.selected {
416 box-shadow: inset 0 -3px 0 0 #fc6420;
419 #font-type-buttons > button:active:hover,
420 #font-type-buttons > button.selected {
421 border-bottom: 1px solid #FC6420;
424 #font-type-buttons > button > div {
431 #font-size-buttons > button:hover,
432 #font-type-buttons > button:hover {
433 background-color: #ebebeb;
438 #font-size-buttons > button:active,
439 #font-size-buttons > button.selected {
440 background-color: #dadada;
443 /* Only used on Android */
449 font-family: "Charis SIL", Georgia, "Times New Roman", serif;
454 background-color: transparent;
456 background-size: 18px 18px;
457 background-repeat: no-repeat;
458 background-position: center;
463 background-color: #ebebeb;
469 box-sizing: border-box;
470 box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
474 background-color: #dedad4;
478 background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
480 border: 1px solid #c1c1c1;
481 background-position: 10px 7px;
485 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
490 /*======= Toolbar icons =======*/
492 /* Android-only controls */
498 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
500 background-position: center 8px;
503 .close-button:hover {
504 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
505 background-color: #d94141;
506 border-bottom: 1px solid #d94141;
507 border-right: 1px solid #d94141;
510 .close-button:hover:active {
511 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
512 background-color: #AE2325;
513 border-bottom: 1px solid #AE2325;
514 border-right: 1px solid #AE2325;
518 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
522 background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
526 background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
530 background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
533 background-color: #d9d9d9;
537 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
541 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");