aboutReader.css (13262B)
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/. */ 4 5 /* Avoid adding ID selector rules in this style sheet, since they could 6 * inadvertently match elements in the article content. */ 7 8 body { 9 padding: 64px 51px; 10 } 11 12 body.loaded { 13 transition: color 0.4s, background-color 0.4s; 14 } 15 16 body.light { 17 color: #000000; 18 background-color: #bfbbb6; 19 } 20 21 body.dark { 22 color: #bfbbb6; 23 background-color: #181411; 24 } 25 26 body.dark *::-moz-selection { 27 background-color: #bfbbb6; 28 color: #33658a; 29 } 30 body.dark a::-moz-selection { 31 color: #a63221; 32 } 33 34 body.sepia { 35 color: #5b4636; 36 background-color: #f4ecd8; 37 } 38 39 body.sans-serif, 40 body.sans-serif .remove-button { 41 font-family: sans-serif; 42 } 43 44 body.serif, 45 body.serif .remove-button { 46 font-family: serif; 47 } 48 49 .container { 50 --font-size: 12; 51 max-width: 30em; 52 margin: 0 auto; 53 font-size: var(--font-size); 54 } 55 56 .container.content-width1 { 57 max-width: 20em; 58 } 59 60 .container.content-width2 { 61 max-width: 25em; 62 } 63 64 .container.content-width3 { 65 max-width: 30em; 66 } 67 68 .container.content-width4 { 69 max-width: 35em; 70 } 71 72 .container.content-width5 { 73 max-width: 40em; 74 } 75 76 .container.content-width6 { 77 max-width: 45em; 78 } 79 80 .container.content-width7 { 81 max-width: 50em; 82 } 83 84 .container.content-width8 { 85 max-width: 55em; 86 } 87 88 .container.content-width9 { 89 max-width: 60em; 90 } 91 92 /* Override some controls and content styles based on color scheme */ 93 94 body.light > .container > .header > .domain { 95 border-bottom-color: #333333 !important; 96 } 97 98 body.sepia > .container > .header > .domain { 99 border-bottom-color: #5b4636 !important; 100 } 101 102 body.dark > .container > .header > .domain { 103 border-bottom-color: #eeeeee !important; 104 } 105 106 body.sepia > .container > .footer { 107 background-color: #dedad4 !important; 108 } 109 110 body.light blockquote { 111 border-inline-start: 2px solid #333333 !important; 112 } 113 114 body.sepia blockquote { 115 border-inline-start: 2px solid #5b4636 !important; 116 } 117 118 body.dark blockquote { 119 border-inline-start: 2px solid #eeeeee !important; 120 } 121 122 /* Add toolbar transition base on loaded class */ 123 124 body.loaded .toolbar { 125 transition: transform 0.3s ease-out; 126 } 127 128 body:not(.loaded) .toolbar:-moz-locale-dir(ltr) { 129 transform: translateX(-100%); 130 } 131 132 body:not(.loaded) .toolbar:-moz-locale-dir(rtl) { 133 transform: translateX(100%); 134 } 135 136 .light-button { 137 color: #000000; 138 background-color: #bfbbb6; 139 } 140 141 .dark-button { 142 color: #eeeeee; 143 background-color: #181411; 144 } 145 146 .sepia-button { 147 color: #5b4636; 148 background-color: #f4ecd8; 149 } 150 151 .sans-serif-button { 152 font-family: sans-serif; 153 } 154 155 .serif-button { 156 font-family: serif; 157 } 158 159 /* Loading/error message */ 160 161 .reader-message { 162 margin-top: 40px; 163 display: none; 164 text-align: center; 165 width: 100%; 166 font-size: 0.9em; 167 } 168 169 /* Header */ 170 171 .header { 172 text-align: start; 173 display: none; 174 } 175 176 .domain { 177 font-size: 0.9em; 178 line-height: 1.48em; 179 padding-bottom: 4px; 180 font-family: sans-serif; 181 text-decoration: none; 182 border-bottom: 1px solid; 183 color: #0095dd; 184 } 185 186 .header > h1 { 187 font-size: 1.6em; 188 line-height: 1.25em; 189 width: 100%; 190 margin: 30px 0; 191 padding: 0; 192 } 193 194 .header > .credits { 195 font-size: 0.9em; 196 line-height: 1.48em; 197 margin: 0 0 10px 0; 198 padding: 0; 199 font-style: italic; 200 } 201 202 .header > .meta-data { 203 font-size: 0.65em; 204 margin: 0 0 15px 0; 205 } 206 207 /*======= Controls toolbar =======*/ 208 209 .toolbar { 210 font-family: sans-serif; 211 position: fixed; 212 height: 100%; 213 top: 0; 214 left: 0; 215 margin: 0; 216 padding: 0; 217 list-style: none; 218 background-color: #181411; 219 -moz-user-select: none; 220 border-right: 1px solid #b5b5b5; 221 z-index: 1; 222 } 223 224 .button { 225 display: block; 226 background-size: 24px 24px; 227 background-repeat: no-repeat; 228 color: #333; 229 background-color: #181411; 230 height: 40px; 231 padding: 0; 232 } 233 234 .toolbar .button { 235 width: 40px; 236 background-position: center; 237 margin-right: -1px; 238 border-top: 0; 239 border-left: 0; 240 border-right: 1px solid #b5b5b5; 241 border-bottom: 1px solid #c1c1c1; 242 } 243 244 .button[hidden] { 245 display: none; 246 } 247 248 .dropdown { 249 text-align: center; 250 list-style: none; 251 margin: 0; 252 padding: 0; 253 } 254 255 .dropdown li { 256 margin: 0; 257 padding: 0; 258 } 259 260 /*======= Popup =======*/ 261 262 .dropdown-popup { 263 min-width: 300px; 264 text-align: start; 265 position: absolute; 266 left: 48px; /* offset to account for toolbar width */ 267 z-index: 1000; 268 background-color: #181411; 269 visibility: hidden; 270 border-radius: 4px; 271 border: 1px solid #b5b5b5; 272 border-bottom-width: 0; 273 box-shadow: 0 1px 3px #c1c1c1; 274 } 275 276 .keep-open .dropdown-popup { 277 z-index: initial; 278 } 279 280 .dropdown-popup > hr { 281 display: none; 282 } 283 284 .open > .dropdown-popup { 285 visibility: visible; 286 } 287 288 .dropdown-arrow { 289 position: absolute; 290 top: 30px; /* offset arrow from top of popup */ 291 left: -16px; 292 width: 16px; 293 height: 24px; 294 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); 295 display: block; 296 } 297 298 /*======= Font style popup =======*/ 299 300 .font-type-buttons, 301 .font-size-buttons, 302 .color-scheme-buttons, 303 .content-width-buttons, 304 .line-height-buttons { 305 display: flex; 306 flex-direction: row; 307 } 308 309 .font-type-buttons > button:first-child { 310 border-top-left-radius: 3px; 311 } 312 .font-type-buttons > button:last-child { 313 border-top-right-radius: 3px; 314 } 315 .color-scheme-buttons > button:first-child { 316 border-bottom-left-radius: 3px; 317 } 318 .color-scheme-buttons > button:last-child { 319 border-bottom-right-radius: 3px; 320 } 321 322 .font-type-buttons > button, 323 .font-size-buttons > button, 324 .color-scheme-buttons > button, 325 .content-width-buttons > button, 326 .line-height-buttons > button { 327 text-align: center; 328 border: 0; 329 } 330 331 .font-type-buttons > button, 332 .font-size-buttons > button, 333 .content-width-buttons > button, 334 .line-height-buttons > button { 335 width: 50%; 336 background-color: transparent; 337 border-left: 1px solid #B5B5B5; 338 border-bottom: 1px solid #B5B5B5; 339 } 340 341 .color-scheme-buttons > button { 342 width: 33.33%; 343 font-size: 14px; 344 } 345 346 .color-scheme-buttons > .dark-button { 347 margin-top: -1px; 348 height: 61px; 349 } 350 351 .font-type-buttons > button:first-child, 352 .font-size-buttons > button:first-child, 353 .content-width-buttons > button:first-child, 354 .line-height-buttons > button:first-child { 355 border-left: 0; 356 } 357 358 .font-type-buttons > button { 359 display: inline-block; 360 font-size: 62px; 361 height: 100px; 362 } 363 364 .font-size-buttons > button, 365 .color-scheme-buttons > button, 366 .content-width-buttons > button, 367 .line-height-buttons > button { 368 height: 60px; 369 } 370 371 .font-type-buttons > button:active:hover, 372 .font-type-buttons > button.selected, 373 .color-scheme-buttons > button:active:hover, 374 .color-scheme-buttons > button.selected { 375 box-shadow: inset 0 -3px 0 0 #fc6420; 376 } 377 378 .font-type-buttons > button:active:hover, 379 .font-type-buttons > button.selected { 380 border-bottom: 1px solid #FC6420; 381 } 382 383 /* Make the serif button content the same size as the sans-serif button content. */ 384 .font-type-buttons > button > .description { 385 color: #666; 386 font-size: 12px; 387 margin-top: -5px; 388 } 389 390 /* Font sizes are different per-platform, so we need custom CSS to line them up. */ 391 %ifdef XP_MACOSX 392 .font-type-buttons > .sans-serif-button > .name { 393 margin-top: 10px; 394 } 395 396 .font-type-buttons > .sans-serif-button > .description { 397 margin-top: -4px; 398 } 399 400 .font-type-buttons > .serif-button > .name { 401 font-size: 63px; 402 } 403 %elifdef XP_WIN 404 .font-type-buttons > .sans-serif-button > .name { 405 margin-top: 2px; 406 } 407 408 .font-type-buttons > .sans-serif-button > .description { 409 margin-top: -4px; 410 } 411 412 .font-type-buttons > .serif-button > .name { 413 font-size: 63px; 414 } 415 %else 416 .font-type-buttons > .sans-serif-button > .name { 417 margin-top: 5px; 418 } 419 420 .font-type-buttons > .sans-serif-button > .description { 421 margin-top: -8px; 422 } 423 424 .font-type-buttons > .serif-button > .name { 425 font-size: 70px; 426 } 427 %endif 428 429 .button:hover, 430 .font-size-buttons > button:hover, 431 .font-type-buttons > button:hover, 432 .content-width-buttons > button:hover, 433 .line-height-buttons > button:hover { 434 background-color: #181411; 435 } 436 437 .dropdown.open, 438 .button:active, 439 .font-size-buttons > button:active, 440 .font-size-buttons > button.selected, 441 .content-width-buttons > button:active, 442 .content-width-buttons > button.selected, 443 .line-height-buttons > button:active, 444 .line-height-buttons > button.selected { 445 background-color: #181411; 446 } 447 448 /* Only used on Android */ 449 .font-size-sample { 450 display: none; 451 } 452 453 .minus-button, 454 .plus-button, 455 .content-width-minus-button, 456 .content-width-plus-button, 457 .line-height-minus-button, 458 .line-height-plus-button { 459 background-color: transparent; 460 border: 0; 461 background-size: 18px 18px; 462 background-repeat: no-repeat; 463 background-position: center; 464 } 465 466 /*======= Toolbar icons =======*/ 467 468 .close-button { 469 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); 470 height: 68px; 471 background-position: center 8px; 472 } 473 474 .close-button:hover { 475 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); 476 background-color: #d94141; 477 border-bottom: 1px solid #d94141; 478 border-right: 1px solid #d94141; 479 } 480 481 .close-button:hover:active { 482 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); 483 background-color: #AE2325; 484 border-bottom: 1px solid #AE2325; 485 border-right: 1px solid #AE2325; 486 } 487 488 .style-button { 489 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); 490 } 491 492 .minus-button { 493 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); 494 } 495 496 .plus-button { 497 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); 498 } 499 500 .content-width-minus-button { 501 background-size: 42px 16px; 502 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); 503 } 504 505 .content-width-plus-button { 506 background-size: 44px 16px; 507 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg"); 508 } 509 510 .line-height-minus-button { 511 background-size: 34px 14px; 512 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg"); 513 } 514 515 .line-height-plus-button { 516 background-size: 34px 24px; 517 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg"); 518 } 519 520 @media print { 521 .toolbar { 522 display: none !important; 523 } 524 } 525 526 /*======= Article content =======*/ 527 528 /* Note that any class names from the original article that we want to match on 529 * must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that 530 * Readability.js doesn't strip them out */ 531 532 .moz-reader-content { 533 display: none; 534 font-size: 1em; 535 line-height: 1.6em; 536 } 537 538 .moz-reader-content.line-height1 { 539 line-height: 1em; 540 } 541 542 .moz-reader-content.line-height2 { 543 line-height: 1.2em; 544 } 545 546 .moz-reader-content.line-height3 { 547 line-height: 1.4em; 548 } 549 550 .moz-reader-content.line-height4 { 551 line-height: 1.6em; 552 } 553 554 .moz-reader-content.line-height5 { 555 line-height: 1.8em; 556 } 557 558 .moz-reader-content.line-height6 { 559 line-height: 2.0em; 560 } 561 562 .moz-reader-content.line-height7 { 563 line-height: 2.2em; 564 } 565 566 .moz-reader-content.line-height8 { 567 line-height: 2.4em; 568 } 569 570 .moz-reader-content.line-height9 { 571 line-height: 2.6em; 572 } 573 574 @media print { 575 .moz-reader-content p, 576 .moz-reader-content code, 577 .moz-reader-content pre, 578 .moz-reader-content blockquote, 579 .moz-reader-content ul, 580 .moz-reader-content ol, 581 .moz-reader-content li, 582 .moz-reader-content figure, 583 .moz-reader-content .wp-caption { 584 margin: 0 0 10px 0 !important; 585 padding: 0 !important; 586 } 587 } 588 589 .moz-reader-content h1, 590 .moz-reader-content h2, 591 .moz-reader-content h3 { 592 font-weight: bold; 593 } 594 595 .moz-reader-content h1 { 596 font-size: 1.6em; 597 line-height: 1.25em; 598 } 599 600 .moz-reader-content h2 { 601 font-size: 1.2em; 602 line-height: 1.51em; 603 } 604 605 .moz-reader-content h3 { 606 font-size: 1em; 607 line-height: 1.66em; 608 } 609 610 .moz-reader-content a:link { 611 text-decoration: underline; 612 font-weight: normal; 613 } 614 615 .moz-reader-content a:link, 616 .moz-reader-content a:link:hover, 617 .moz-reader-content a:link:active { 618 color: #0095dd; 619 } 620 621 .moz-reader-content a:visited { 622 color: #c2e; 623 } 624 625 .moz-reader-content * { 626 max-width: 100%; 627 height: auto; 628 } 629 630 .moz-reader-content p, 631 .moz-reader-content p, 632 .moz-reader-content code, 633 .moz-reader-content pre, 634 .moz-reader-content blockquote, 635 .moz-reader-content ul, 636 .moz-reader-content ol, 637 .moz-reader-content li, 638 .moz-reader-content figure, 639 .moz-reader-content .wp-caption { 640 margin: -10px -10px 20px -10px; 641 padding: 10px; 642 border-radius: 5px; 643 } 644 645 .moz-reader-content li { 646 margin-bottom: 0; 647 } 648 649 .moz-reader-content li > ul, 650 .moz-reader-content li > ol { 651 margin-bottom: -10px; 652 } 653 654 .moz-reader-content p > img:only-child, 655 .moz-reader-content p > a:only-child > img:only-child, 656 .moz-reader-content .wp-caption img, 657 .moz-reader-content figure img { 658 display: block; 659 } 660 661 .moz-reader-content img[moz-reader-center] { 662 margin-left: auto; 663 margin-right: auto; 664 } 665 666 .moz-reader-content .caption, 667 .moz-reader-content .wp-caption-text 668 .moz-reader-content figcaption { 669 font-size: 0.9em; 670 line-height: 1.48em; 671 font-style: italic; 672 } 673 674 .moz-reader-content code, 675 .moz-reader-content pre { 676 white-space: pre-wrap; 677 } 678 679 .moz-reader-content blockquote { 680 padding: 0; 681 padding-inline-start: 16px; 682 } 683 684 .moz-reader-content ul, 685 .moz-reader-content ol { 686 padding: 0; 687 } 688 689 .moz-reader-content ul { 690 padding-inline-start: 30px; 691 list-style: disc; 692 } 693 694 .moz-reader-content ol { 695 padding-inline-start: 30px; 696 list-style: decimal; 697 } 698 699 /* Hide elements with common "hidden" class names */ 700 .moz-reader-content .visually-hidden, 701 .moz-reader-content .visuallyhidden, 702 .moz-reader-content .hidden, 703 .moz-reader-content .invisible, 704 .moz-reader-content .sr-only { 705 display: none; 706 }