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