components/dom_distiller/core/css/distilledpage.css

   1 /* Copyright 2014 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file. */
   4
   5 /* Set the global 'box-sizing' state to 'border-box'.
   6  * *::after and *::before used to select pseudo-elements not selectable by *. */
   7
   8 *,
   9 *::after,
  10 *::before {
  11   box-sizing: border-box;
  12 }
  13
  14 /* Remove all margins and padding from certain element and add word wrap. */
  15
  16 blockquote,
  17 body,
  18 caption,
  19 dd,
  20 dl,
  21 fieldset,
  22 figure,
  23 form,
  24 h1,
  25 h2,
  26 h3,
  27 h4,
  28 h5,
  29 h6,
  30 hr,
  31 legend,
  32 ol,
  33 p,
  34 pre,
  35 ul,
  36 table,
  37 td,
  38 th {
  39   margin: 0;
  40   padding: 0;
  41   word-wrap: break-word;
  42 }
  43
  44 /* Prevent 'sub' and 'sup' affecting 'line-height'. */
  45
  46 sub,
  47 sup {
  48   font-size: 75%;
  49   line-height: 0;
  50   position: relative;
  51   vertical-align: baseline;
  52 }
  53
  54 sup {
  55   top: -0.5em;
  56 }
  57
  58 sub {
  59   bottom: -0.25em;
  60 }
  61
  62 /* Remove most spacing between table cells. */
  63
  64 table {
  65   border-collapse: collapse;
  66   border-spacing: 0;
  67   display: block;
  68   overflow-x: auto;
  69 }
  70
  71 td,
  72 th {
  73   padding: 0.5rem;
  74 }
  75
  76 /* Base typography. */
  77
  78 html {
  79   font-size: 14px;
  80   height: 100%;
  81 }
  82
  83 body {
  84   height: 100%;
  85   line-height: 1.714;
  86   margin: 0px auto;
  87   text-rendering: optimizeLegibility;
  88   transition-property: color, background-color;
  89   transition-duration: 0.5s;
  90   transition-timing-function: ease;
  91   overflow-x: hidden;
  92   -webkit-overflow-scrolling: touch;
  93 }
  94
  95 /* Classes for light, dark and sepia themes.
  96  * Must agree with classes returned by useTheme() in dom_distiller_viewer.js
  97  * and with CSS class constants in viewer.cc */
  98
  99 .light {
 100   color: #424242;
 101   background-color: #FAFAFA;
 102 }
 103
 104 .dark {
 105   color: #E0E0E0;
 106   background-color: #212121;
 107 }
 108
 109 .sepia {
 110   color: #000;
 111   background-color: rgb(203, 173, 141);
 112 }
 113
 114 .light a:link,
 115 .sepia a:link {
 116   color: #55F;
 117 }
 118
 119 .dark a:link {
 120   color: #88F;
 121 }
 122
 123 .light a:visited,
 124 .sepia a:visited {
 125   color: #902290;
 126 }
 127
 128 .dark a:visited {
 129   color: #D872D8;
 130 }
 131
 132 .light code,
 133 .light pre {
 134   background-color: #EEE;
 135   border-color: #AAA;
 136 }
 137
 138 .sepia code,
 139 .sepia pre {
 140   background-color: rgb(217, 196, 175);
 141   border-color: rgb(147, 125, 102);
 142 }
 143
 144 .dark code,
 145 .dark pre {
 146   background-color: #333;
 147   border-color: #555;
 148 }
 149
 150 .light tbody tr:nth-child(odd) {
 151   background-color: #EEE;
 152 }
 153
 154 .light th, .light td {
 155   border-left: 1px solid #AAA;
 156 }
 157
 158 .sepia tbody tr:nth-child(odd) {
 159   background-color: rgb(217, 196, 175);
 160 }
 161
 162 .sepia th, .sepia td {
 163   border-left: 1px solid rgb(147, 125, 102);
 164 }
 165
 166 .dark tbody tr:nth-child(odd) {
 167   background-color: #333;
 168 }
 169
 170 .dark th, .dark td {
 171   border-left: 1px solid #555;
 172 }
 173
 174 /* #contentWrap is added to be more specific than the color theme rules */
 175 #contentWrap th:first-child { border-left: none; }
 176 #contentWrap td:first-child { border-left: none; }
 177
 178
 179 /* Font settings */
 180
 181 .serif {
 182   font-family: serif;
 183 }
 184
 185 .sans-serif {
 186   font-family: 'Roboto', sans-serif;
 187 }
 188
 189 .monospace {
 190   font-family: monospace;
 191 }
 192
 193 /* Define vertical rhythm (baseline grid of 4px). */
 194
 195 blockquote,
 196 caption,
 197 code,
 198 dd,
 199 dl,
 200 fieldset,
 201 figure,
 202 form,
 203 hr,
 204 legend,
 205 ol,
 206 p,
 207 pre,
 208 q,
 209 table,
 210 td,
 211 th,
 212 ul {
 213   margin-bottom: 1.143rem;
 214 }
 215
 216 h1,
 217 h2,
 218 h3,
 219 h4,
 220 h5,
 221 h6 {
 222   line-height: 1.417;
 223   margin: 1em 0;
 224 }
 225
 226 /* Content. */
 227
 228 /* Margins for Show Original link. */
 229
 230 .light #closeReaderView {
 231   border-top: 1px solid #E0E0E0;
 232   color: #4285F4;
 233 }
 234
 235 .dark #closeReaderView {
 236   border-top: 1px solid #555;
 237   color: #3adaff;
 238 }
 239
 240 .sepia #closeReaderView {
 241   border-top: 1px solid rgb(147, 125, 102);
 242   color: #55F;
 243 }
 244
 245 #closeReaderView {
 246   flex: 0 0 auto;
 247   font-family: 'Roboto', sans-serif;
 248   font-weight: 700;
 249   line-height: 14px;
 250   padding: 24px 16px;
 251   font-size: 14px;
 252   text-align: right;
 253   text-decoration: none;
 254   text-transform: uppercase;
 255   width: 100%;
 256 }
 257
 258 @media print {
 259   #closeReaderView {
 260     display: none;
 261   }
 262
 263   /* Remove backgrounds and custom colors. */
 264   .light, .dark, .sepia {
 265       color: #000 !important;
 266       background-color: #fff !important;
 267   }
 268
 269   /* If the transition duration is unchanged, the above color changes
 270   happen after the document is ready for print. */
 271   body {
 272       transition-duration: unset !important;
 273   }
 274 }
 275
 276 #content {
 277   margin: 24px 16px 24px 16px;
 278 }
 279
 280 #mainContent {
 281   flex: 1 1 auto;
 282   margin: 0px auto;
 283   max-width: 35em;
 284   width: 100%;
 285 }
 286
 287 #articleHeader {
 288   margin-top: 24px;
 289   width: 100%;
 290 }
 291
 292 #titleHolder {
 293   font-size: 1.714rem;
 294   line-height: 1.417;
 295   margin: 0 16px;
 296 }
 297
 298 blockquote {
 299   border-left: 4px solid #888;
 300   padding-left: 1em;
 301 }
 302
 303 cite {
 304   opacity: .8;
 305   font-style: italic;
 306 }
 307
 308 hr {
 309   opacity: .5;
 310   border-style: solid;
 311   height: 1px 0 0 0;
 312   width: 75%;
 313 }
 314
 315
 316 q {
 317   opacity: .8;
 318   display:block;
 319   font-style: italic;
 320   font-weight: 600;
 321 }
 322
 323 embed,
 324 img,
 325 object,
 326 video {
 327   max-width: 100%;
 328 }
 329
 330 /* TODO(sunangel): make images zoomable. */
 331
 332 img {
 333   display: block;
 334   height: auto;
 335   margin: 0.6rem auto 0.4rem 0;
 336 }
 337
 338 /* TODO(nyquist): set these classes directly in the dom distiller. */
 339
 340 embed+[class*='caption'],
 341 figcaption,
 342 img+[class*='caption'],
 343 object+[class*='caption'],
 344 video+[class*='caption'] {
 345   opacity: .8;
 346   display: table;
 347   margin-bottom: 1rem;
 348   font-size: 0.857rem;
 349   line-height: 1.667;
 350 }
 351
 352 ol,
 353 ul {
 354   margin-left: 1.296rem;
 355 }
 356
 357 code, pre {
 358   border: 1px solid;
 359   border-radius: 2px;
 360 }
 361
 362 pre code {
 363   border: none;
 364 }
 365
 366 pre {
 367   line-height: 1.642;
 368   padding: .5em;
 369   white-space: pre-wrap;
 370 }
 371
 372 .hidden {
 373   display: none;
 374 }
 375
 376 /* Footer feedback form. */
 377 #contentWrap {
 378   display: flex;
 379   flex-flow: column;
 380   min-height: 100%;
 381   overflow: auto;
 382   position: relative;
 383   z-index: 1;
 384 }
 385
 386 #feedbackContainer {
 387   font-size: 14px;
 388   position: relative;
 389   z-index: 2;
 390 }
 391
 392 .footerFeedback {
 393   background-color: #4285F4;
 394   clear: both;
 395   color: #fff;
 396   display: none;
 397   height: 120px;
 398   margin-top: -120px;
 399   width: 100%;
 400 }
 401
 402 .feedbackContent {
 403   font-size: 14px;
 404   background-color: #4285F4;
 405   clear: both;
 406   padding: 14px;
 407 }
 408
 409 #feedbackQuestion {
 410   font-size: 1.4em;
 411   font-weight: 700;
 412   text-align: center;
 413   width: 100%;
 414 }
 415
 416 .feedbackButtonWrap {
 417   margin-top: 14px;
 418   text-align: center;
 419   width: 100%;
 420 }
 421
 422 .feedbackButton {
 423   -webkit-user-select: none;
 424   background-color: #FFFFFF;
 425   border-radius: 3px;
 426   color: #4285F4;
 427   display: inline-block;
 428   font-weight: 900;
 429   height: 35px;
 430   margin: 0px 4% 0px 4%;
 431   padding-top: 8px;
 432   text-align: center;
 433   text-transform: uppercase;
 434   user-select: none;
 435   width: 40%;
 436 }
 437
 438 .clear {
 439   clear: both;
 440 }
 441
 442 /* Feedback fade out */
 443 .fadeOut {
 444   animation-duration: 0.5s;
 445   animation-name: fadeOutAndSwipeAnimation;
 446 }
 447
 448 @keyframes fadeOutAndSwipeAnimation {
 449   from {
 450     margin-left: 0%;
 451     opacity: 1;
 452   }
 453
 454   to {
 455     margin-left: -100%;
 456     opacity: 0;
 457   }
 458 }
 459
 460 /* Iframe sizing. */
 461 .youtubeContainer {
 462   height: 0px;
 463   /* This is the perecnt height of a standard HD video. */
 464   padding-bottom: 56.25%;
 465   position: relative;
 466   width: 100%;
 467 }
 468
 469 .youtubeIframe {
 470   height: 100%;
 471   left: 0px;
 472   position: absolute;
 473   top: 0px;
 474   width: 100%;
 475 }
 476
 477 /* Loading Indicator. */
 478 #loader {
 479   height: 22px;
 480   margin-left: auto;
 481   margin-right: auto;
 482   position: relative;
 483   width: 22px;
 484 }
 485
 486 #loader * {
 487   display: block;
 488   position: absolute;
 489 }
 490
 491 #loader .circle {
 492   border-radius: 50%;
 493   height: 100%;
 494   opacity: 0;
 495   overflow: hidden;
 496   width: 100%;
 497 }
 498
 499 #loader .mask {
 500   height: 100%;
 501   opacity: 0;
 502   overflow: hidden;
 503   width: 100%;
 504 }
 505
 506 #loader .mask.first {
 507   transition-delay: 0.22s;
 508   transition-duration: 0s;
 509   transition-property: border-color;
 510 }
 511
 512 #loader .circle.initial .mask {
 513   height: 50%;
 514   top: 0;
 515 }
 516
 517 #loader .circle.red .mask.first {
 518   border-bottom: 1px solid #555;
 519   height: 50%;
 520   top: 0;
 521 }
 522
 523 #loader .circle.red .mask.second {
 524   bottom: 0;
 525   height: 50%;
 526 }
 527
 528 #loader .circle.yellow .mask.first {
 529   border-left: 1px solid #888;
 530   right: 0;
 531   width: 50%;
 532 }
 533
 534 #loader .circle.yellow .mask.second {
 535   left: 0;
 536   width: 50%;
 537 }
 538
 539 #loader .circle.green .mask.first {
 540   border-top: 1px solid #555;
 541   bottom: 0;
 542   height: 50%;
 543 }
 544
 545 #loader .circle.green .mask.second {
 546   height: 50%;
 547   top: 0;
 548 }
 549
 550 #loader .circle.blue .mask.first {
 551   border-right: 1px solid #888;
 552   left: 0;
 553   width: 50%;
 554 }
 555
 556 #loader .circle.blue .mask.second {
 557   right: 0;
 558   width: 50%;
 559 }
 560
 561 #loader .circle .mask .base {
 562   border-radius: 50%;
 563   height: 100%;
 564   opacity: 0;
 565   transition-property: opacity;
 566   transition-timing-function: linear;
 567   transition-duration: 0s;
 568   transition-delay: 0s;
 569   width: 100%;
 570 }
 571
 572 #loader .circle .mask .mover {
 573   border-radius: 50%;
 574   height: 100%;
 575   transition-delay: 0s;
 576   transition-duration: 0.22s;
 577   transition-property: background-color, left, top, right, bottom, width,
 578       height;
 579   transition-timing-function: ease-in;
 580   width: 100%;
 581 }
 582
 583 #loader .circle .mask.second .mover,
 584 #loader .circle.initial .mask .mover {
 585   transition-delay: 0.22s;
 586   transition-timing-function: ease-out;
 587 }
 588
 589 #loader .circle.red .mask.first .base {
 590   height: 200%;
 591   top: 0;
 592 }
 593 #loader .circle.red .mask.second .base {
 594   bottom: 0;
 595   height: 200%;
 596 }
 597
 598 #loader .circle.yellow .mask.first .base {
 599   right: 0;
 600   width: 200%;
 601 }
 602
 603 #loader .circle.yellow .mask.second .base {
 604   left: 0;
 605   width: 200%;
 606 }
 607
 608 #loader .circle.green .mask.first .base {
 609   bottom: 0;
 610   height: 200%;
 611 }
 612
 613 #loader .circle.green .mask.second .base {
 614   height: 200%;
 615   top: 0;
 616 }
 617
 618 #loader .circle.blue .mask.first .base {
 619   left: 0;
 620   width: 200%;
 621 }
 622
 623 #loader .circle.blue .mask.second .base {
 624   right: 0;
 625   width: 200%;
 626 }
 627
 628 #loader .circle.initial .mask .mover {
 629   height: 0;
 630   top: 100%;
 631 }
 632
 633 #loader .circle.red .mask.first .mover {
 634   height: 200%;
 635   top: 0;
 636 }
 637
 638 #loader .circle.red .mask.second .mover {
 639   bottom: 100%;
 640   height: 0;
 641 }
 642
 643 #loader .circle.yellow .mask.first .mover {
 644   right: 0;
 645   width: 200%;
 646 }
 647
 648 #loader .circle.yellow .mask.second .mover {
 649   left: 100%;
 650   width: 0;
 651 }
 652
 653 #loader .circle.green .mask.first .mover {
 654   bottom: 0;
 655   height: 200%;
 656 }
 657
 658 #loader .circle.green .mask.second .mover {
 659  height: 0;
 660  top: 100%;
 661 }
 662
 663 #loader .circle.blue .mask.first .mover {
 664   left: 0;
 665   width: 200%;
 666 }
 667
 668 #loader .circle.blue .mask.second .mover {
 669   right: 100%;
 670   width: 0;
 671 }
 672
 673 /* Initial State. */
 674 #loader.initial .circle.initial,
 675 #loader.initial .circle.initial .mask {
 676   opacity: 1;
 677 }
 678 #loader.initial .circle.initial .mask .mover {
 679   height: 200%;
 680   top: 0;
 681 }
 682
 683 /* Moving from Red to Yellow. */
 684 #loader.yellow .circle.yellow,
 685 #loader.yellow .circle.yellow .mask,
 686 #loader.yellow .circle.yellow .mask .base {
 687   opacity: 1;
 688 }
 689 #loader.yellow .circle.yellow .mask.first .mover {
 690   right: 100%;
 691   width: 0;
 692 }
 693 #loader.yellow .circle.yellow .mask.second .mover {
 694   left: 0;
 695   width: 200%;
 696 }
 697
 698 /* Moving from Yellow to Green. */
 699 #loader.green .circle.green,
 700 #loader.green .circle.green .mask,
 701 #loader.green .circle.green .mask .base {
 702   opacity: 1;
 703 }
 704 #loader.green .circle.green .mask.first .mover {
 705   bottom: 100%;
 706   height: 0;
 707 }
 708 #loader.green .circle.green .mask.second .mover {
 709   height: 200%;
 710   top: 0;
 711 }
 712
 713
 714 /* Moving from Green to Blue. */
 715 #loader.blue .circle.blue,
 716 #loader.blue .circle.blue .mask,
 717 #loader.blue .circle.blue .mask .base {
 718   opacity: 1;
 719 }
 720 #loader.blue .circle.blue .mask.first .mover {
 721   left: 100%;
 722   width: 0;
 723 }
 724 #loader.blue .circle.blue .mask.second .mover {
 725   right: 0;
 726   width: 200%;
 727 }
 728
 729 /* Moving from Blue to Red. */
 730 #loader.red .circle.red,
 731 #loader.red .circle.red .mask,
 732 #loader.red .circle.red .mask .base {
 733   opacity: 1;
 734 }
 735 #loader.red.firstTime .circle.red .mask.second .base {
 736   opacity: 0;
 737 }
 738 #loader.red .circle.red .mask.first .mover {
 739   height: 0;
 740   top: 100%;
 741 }
 742 #loader.red .circle.red .mask.second .mover {
 743   bottom: 0;
 744   height: 200%;
 745 }
 746
 747 #loader .circle.red .mask.first {
 748   border-bottom-color: rgb(60,120,248);
 749 }
 750
 751 #loader .circle.yellow .mask.first {
 752   border-left-color: rgb(250,36,36);
 753 }
 754
 755 #loader .circle.green .mask.first {
 756   border-top-color: rgb(255,211,75);
 757 }
 758
 759 #loader .circle.blue .mask.first {
 760   border-right-color: rgb(0,177,95);
 761 }
 762
 763 #loader .circle.red .mask.first .base {
 764   background-color: rgb(250,36,36);
 765 }
 766
 767 #loader .circle.red .mask.second .base {
 768   background-color: rgb(60,120,248);
 769 }
 770
 771 #loader .circle.yellow .mask.first .base {
 772   background-color: rgb(255,211,75);
 773 }
 774
 775 #loader .circle.yellow .mask.second .base {
 776   background-color: rgb(250,36,36);
 777 }
 778
 779 #loader .circle.green .mask.first .base {
 780   background-color: rgb(0,177,95);
 781 }
 782
 783 #loader .circle.green .mask.second .base {
 784   background-color: rgb(255,211,75);
 785 }
 786
 787 #loader .circle.blue .mask.first .base {
 788   background-color: rgb(60,120,248);
 789 }
 790
 791 #loader .circle.blue .mask.second .base {
 792   background-color: rgb(0,177,95);
 793 }
 794
 795 #loader .circle.initial .mask .mover {
 796   background-color: rgb(33,89,189);
 797 }
 798
 799 #loader .circle.red .mask.first .mover {
 800   background-color: rgb(60,120,248);
 801 }
 802
 803 #loader .circle.red .mask.second .mover {
 804   background-color: rgb(158,18,18);
 805 }
 806
 807 #loader .circle.yellow .mask.first .mover {
 808   background-color: rgb(250,36,36);
 809 }
 810
 811 #loader .circle.yellow .mask.second .mover {
 812   background-color: rgb(222,161,26);
 813 }
 814
 815 #loader .circle.green .mask.first .mover {
 816   background-color: rgb(255,211,75);
 817 }
 818
 819 #loader .circle.green .mask.second .mover {
 820   background-color: rgb(0,137,72);
 821 }
 822
 823 #loader .circle.blue .mask.first .mover {
 824   background-color: rgb(0,177,95);
 825 }
 826
 827 #loader .circle.blue .mask.second .mover {
 828   background-color: rgb(33,89,189);
 829 }
 830
 831 #loader.initial .circle.initial .mask .mover {
 832   background-color: rgb(60,120,248);
 833 }
 834
 835 #loader.yellow .circle.yellow .mask.first {
 836   border-color: rgb(255,211,75);
 837 }
 838
 839 #loader.yellow .circle.yellow .mask.first .mover {
 840   background-color: rgb(158,18,18);
 841 }
 842
 843 #loader.yellow .circle.yellow .mask.second .mover {
 844   background-color: rgb(255,211,75);
 845 }
 846
 847 #loader.green .circle.green .mask.first {
 848  border-color: rgb(0,177,95);
 849 }
 850
 851 #loader.green .circle.green .mask.first .mover {
 852  background-color: rgb(222,161,26);
 853 }
 854
 855 #loader.green .circle.green .mask.second .mover {
 856  background-color: rgb(0,177,95);
 857 }
 858
 859 #loader.blue .circle.blue .mask.first {
 860   border-color: rgb(60,120,248);
 861 }
 862
 863 #loader.blue .circle.blue .mask.first .mover {
 864   background-color: rgb(0,137,72);
 865 }
 866
 867 #loader.blue .circle.blue .mask.second .mover {
 868   background-color: rgb(60,120,248);
 869 }
 870
 871 #loader.red .circle.red .mask.first {
 872   border-color: rgb(250,36,36);
 873 }
 874
 875 #loader.red .circle.red .mask.first .mover {
 876   background-color: rgb(33,89,189);
 877 }
 878
 879 #loader.red .circle.red .mask.second .mover {
 880   background-color: rgb(250,36,36);
 881 }