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
 264 #content {
 265   margin: 24px 16px 24px 16px;
 266 }
 267
 268 #mainContent {
 269   flex: 1 1 auto;
 270   margin: 0px auto;
 271   max-width: 35em;
 272   width: 100%;
 273 }
 274
 275 #articleHeader {
 276   margin-top: 24px;
 277   width: 100%;
 278 }
 279
 280 #titleHolder {
 281   font-size: 1.714rem;
 282   line-height: 1.417;
 283   margin: 0 16px;
 284 }
 285
 286 blockquote {
 287   border-left: 4px solid #888;
 288   padding-left: 1em;
 289 }
 290
 291 cite {
 292   opacity: .8;
 293   font-style: italic;
 294 }
 295
 296 hr {
 297   opacity: .5;
 298   border-style: solid;
 299   height: 1px 0 0 0;
 300   width: 75%;
 301 }
 302
 303
 304 q {
 305   opacity: .8;
 306   display:block;
 307   font-style: italic;
 308   font-weight: 600;
 309 }
 310
 311 embed,
 312 img,
 313 object,
 314 video {
 315   max-width: 100%;
 316 }
 317
 318 /* TODO(sunangel): make images zoomable. */
 319
 320 img {
 321   display: block;
 322   height: auto;
 323   margin: 0.6rem auto 0.4rem 0;
 324 }
 325
 326 /* TODO(nyquist): set these classes directly in the dom distiller. */
 327
 328 embed+[class*='caption'],
 329 figcaption,
 330 img+[class*='caption'],
 331 object+[class*='caption'],
 332 video+[class*='caption'] {
 333   opacity: .8;
 334   display: table;
 335   margin-bottom: 1rem;
 336   font-size: 0.857rem;
 337   line-height: 1.667;
 338 }
 339
 340 ol,
 341 ul {
 342   margin-left: 1.296rem;
 343 }
 344
 345 code, pre {
 346   border: 1px solid;
 347   border-radius: 2px;
 348 }
 349
 350 pre code {
 351   border: none;
 352 }
 353
 354 pre {
 355   line-height: 1.642;
 356   padding: .5em;
 357   white-space: pre-wrap;
 358 }
 359
 360 .hidden {
 361   display: none;
 362 }
 363
 364 /* Footer feedback form. */
 365 #contentWrap {
 366   display: flex;
 367   flex-flow: column;
 368   min-height: 100%;
 369   overflow: auto;
 370   position: relative;
 371   z-index: 1;
 372 }
 373
 374 #feedbackContainer {
 375   font-size: 14px;
 376   position: relative;
 377   z-index: 2;
 378 }
 379
 380 .footerFeedback {
 381   background-color: #4285F4;
 382   clear: both;
 383   color: #fff;
 384   display: none;
 385   height: 120px;
 386   margin-top: -120px;
 387   width: 100%;
 388 }
 389
 390 .feedbackContent {
 391   font-size: 14px;
 392   background-color: #4285F4;
 393   clear: both;
 394   padding: 14px;
 395 }
 396
 397 #feedbackQuestion {
 398   font-size: 1.4em;
 399   font-weight: 700;
 400   text-align: center;
 401   width: 100%;
 402 }
 403
 404 .feedbackButtonWrap {
 405   margin-top: 14px;
 406   text-align: center;
 407   width: 100%;
 408 }
 409
 410 .feedbackButton {
 411   -webkit-user-select: none;
 412   background-color: #FFFFFF;
 413   border-radius: 3px;
 414   color: #4285F4;
 415   display: inline-block;
 416   font-weight: 900;
 417   height: 35px;
 418   margin: 0px 4% 0px 4%;
 419   padding-top: 8px;
 420   text-align: center;
 421   text-transform: uppercase;
 422   user-select: none;
 423   width: 40%;
 424 }
 425
 426 .clear {
 427   clear: both;
 428 }
 429
 430 /* Feedback fade out */
 431 .fadeOut {
 432   animation-duration: 0.5s;
 433   animation-name: fadeOutAndSwipeAnimation;
 434 }
 435
 436 @keyframes fadeOutAndSwipeAnimation {
 437   from {
 438     margin-left: 0%;
 439     opacity: 1;
 440   }
 441
 442   to {
 443     margin-left: -100%;
 444     opacity: 0;
 445   }
 446 }
 447
 448 /* Iframe sizing. */
 449 .youtubeContainer {
 450   height: 0px;
 451   /* This is the perecnt height of a standard HD video. */
 452   padding-bottom: 56.25%;
 453   position: relative;
 454   width: 100%;
 455 }
 456
 457 .youtubeIframe {
 458   height: 100%;
 459   left: 0px;
 460   position: absolute;
 461   top: 0px;
 462   width: 100%;
 463 }
 464
 465 /* Loading Indicator. */
 466 #loader {
 467   height: 22px;
 468   margin-left: auto;
 469   margin-right: auto;
 470   position: relative;
 471   width: 22px;
 472 }
 473
 474 #loader * {
 475   display: block;
 476   position: absolute;
 477 }
 478
 479 #loader .circle {
 480   border-radius: 50%;
 481   height: 100%;
 482   opacity: 0;
 483   overflow: hidden;
 484   width: 100%;
 485 }
 486
 487 #loader .mask {
 488   height: 100%;
 489   opacity: 0;
 490   overflow: hidden;
 491   width: 100%;
 492 }
 493
 494 #loader .mask.first {
 495   transition-delay: 0.22s;
 496   transition-duration: 0s;
 497   transition-property: border-color;
 498 }
 499
 500 #loader .circle.initial .mask {
 501   height: 50%;
 502   top: 0;
 503 }
 504
 505 #loader .circle.red .mask.first {
 506   border-bottom: 1px solid #555;
 507   height: 50%;
 508   top: 0;
 509 }
 510
 511 #loader .circle.red .mask.second {
 512   bottom: 0;
 513   height: 50%;
 514 }
 515
 516 #loader .circle.yellow .mask.first {
 517   border-left: 1px solid #888;
 518   right: 0;
 519   width: 50%;
 520 }
 521
 522 #loader .circle.yellow .mask.second {
 523   left: 0;
 524   width: 50%;
 525 }
 526
 527 #loader .circle.green .mask.first {
 528   border-top: 1px solid #555;
 529   bottom: 0;
 530   height: 50%;
 531 }
 532
 533 #loader .circle.green .mask.second {
 534   height: 50%;
 535   top: 0;
 536 }
 537
 538 #loader .circle.blue .mask.first {
 539   border-right: 1px solid #888;
 540   left: 0;
 541   width: 50%;
 542 }
 543
 544 #loader .circle.blue .mask.second {
 545   right: 0;
 546   width: 50%;
 547 }
 548
 549 #loader .circle .mask .base {
 550   border-radius: 50%;
 551   height: 100%;
 552   opacity: 0;
 553   transition-property: opacity;
 554   transition-timing-function: linear;
 555   transition-duration: 0s;
 556   transition-delay: 0s;
 557   width: 100%;
 558 }
 559
 560 #loader .circle .mask .mover {
 561   border-radius: 50%;
 562   height: 100%;
 563   transition-delay: 0s;
 564   transition-duration: 0.22s;
 565   transition-property: background-color, left, top, right, bottom, width,
 566       height;
 567   transition-timing-function: ease-in;
 568   width: 100%;
 569 }
 570
 571 #loader .circle .mask.second .mover,
 572 #loader .circle.initial .mask .mover {
 573   transition-delay: 0.22s;
 574   transition-timing-function: ease-out;
 575 }
 576
 577 #loader .circle.red .mask.first .base {
 578   height: 200%;
 579   top: 0;
 580 }
 581 #loader .circle.red .mask.second .base {
 582   bottom: 0;
 583   height: 200%;
 584 }
 585
 586 #loader .circle.yellow .mask.first .base {
 587   right: 0;
 588   width: 200%;
 589 }
 590
 591 #loader .circle.yellow .mask.second .base {
 592   left: 0;
 593   width: 200%;
 594 }
 595
 596 #loader .circle.green .mask.first .base {
 597   bottom: 0;
 598   height: 200%;
 599 }
 600
 601 #loader .circle.green .mask.second .base {
 602   height: 200%;
 603   top: 0;
 604 }
 605
 606 #loader .circle.blue .mask.first .base {
 607   left: 0;
 608   width: 200%;
 609 }
 610
 611 #loader .circle.blue .mask.second .base {
 612   right: 0;
 613   width: 200%;
 614 }
 615
 616 #loader .circle.initial .mask .mover {
 617   height: 0;
 618   top: 100%;
 619 }
 620
 621 #loader .circle.red .mask.first .mover {
 622   height: 200%;
 623   top: 0;
 624 }
 625
 626 #loader .circle.red .mask.second .mover {
 627   bottom: 100%;
 628   height: 0;
 629 }
 630
 631 #loader .circle.yellow .mask.first .mover {
 632   right: 0;
 633   width: 200%;
 634 }
 635
 636 #loader .circle.yellow .mask.second .mover {
 637   left: 100%;
 638   width: 0;
 639 }
 640
 641 #loader .circle.green .mask.first .mover {
 642   bottom: 0;
 643   height: 200%;
 644 }
 645
 646 #loader .circle.green .mask.second .mover {
 647  height: 0;
 648  top: 100%;
 649 }
 650
 651 #loader .circle.blue .mask.first .mover {
 652   left: 0;
 653   width: 200%;
 654 }
 655
 656 #loader .circle.blue .mask.second .mover {
 657   right: 100%;
 658   width: 0;
 659 }
 660
 661 /* Initial State. */
 662 #loader.initial .circle.initial,
 663 #loader.initial .circle.initial .mask {
 664   opacity: 1;
 665 }
 666 #loader.initial .circle.initial .mask .mover {
 667   height: 200%;
 668   top: 0;
 669 }
 670
 671 /* Moving from Red to Yellow. */
 672 #loader.yellow .circle.yellow,
 673 #loader.yellow .circle.yellow .mask,
 674 #loader.yellow .circle.yellow .mask .base {
 675   opacity: 1;
 676 }
 677 #loader.yellow .circle.yellow .mask.first .mover {
 678   right: 100%;
 679   width: 0;
 680 }
 681 #loader.yellow .circle.yellow .mask.second .mover {
 682   left: 0;
 683   width: 200%;
 684 }
 685
 686 /* Moving from Yellow to Green. */
 687 #loader.green .circle.green,
 688 #loader.green .circle.green .mask,
 689 #loader.green .circle.green .mask .base {
 690   opacity: 1;
 691 }
 692 #loader.green .circle.green .mask.first .mover {
 693   bottom: 100%;
 694   height: 0;
 695 }
 696 #loader.green .circle.green .mask.second .mover {
 697   height: 200%;
 698   top: 0;
 699 }
 700
 701
 702 /* Moving from Green to Blue. */
 703 #loader.blue .circle.blue,
 704 #loader.blue .circle.blue .mask,
 705 #loader.blue .circle.blue .mask .base {
 706   opacity: 1;
 707 }
 708 #loader.blue .circle.blue .mask.first .mover {
 709   left: 100%;
 710   width: 0;
 711 }
 712 #loader.blue .circle.blue .mask.second .mover {
 713   right: 0;
 714   width: 200%;
 715 }
 716
 717 /* Moving from Blue to Red. */
 718 #loader.red .circle.red,
 719 #loader.red .circle.red .mask,
 720 #loader.red .circle.red .mask .base {
 721   opacity: 1;
 722 }
 723 #loader.red.firstTime .circle.red .mask.second .base {
 724   opacity: 0;
 725 }
 726 #loader.red .circle.red .mask.first .mover {
 727   height: 0;
 728   top: 100%;
 729 }
 730 #loader.red .circle.red .mask.second .mover {
 731   bottom: 0;
 732   height: 200%;
 733 }
 734
 735 #loader .circle.red .mask.first {
 736   border-bottom-color: rgb(60,120,248);
 737 }
 738
 739 #loader .circle.yellow .mask.first {
 740   border-left-color: rgb(250,36,36);
 741 }
 742
 743 #loader .circle.green .mask.first {
 744   border-top-color: rgb(255,211,75);
 745 }
 746
 747 #loader .circle.blue .mask.first {
 748   border-right-color: rgb(0,177,95);
 749 }
 750
 751 #loader .circle.red .mask.first .base {
 752   background-color: rgb(250,36,36);
 753 }
 754
 755 #loader .circle.red .mask.second .base {
 756   background-color: rgb(60,120,248);
 757 }
 758
 759 #loader .circle.yellow .mask.first .base {
 760   background-color: rgb(255,211,75);
 761 }
 762
 763 #loader .circle.yellow .mask.second .base {
 764   background-color: rgb(250,36,36);
 765 }
 766
 767 #loader .circle.green .mask.first .base {
 768   background-color: rgb(0,177,95);
 769 }
 770
 771 #loader .circle.green .mask.second .base {
 772   background-color: rgb(255,211,75);
 773 }
 774
 775 #loader .circle.blue .mask.first .base {
 776   background-color: rgb(60,120,248);
 777 }
 778
 779 #loader .circle.blue .mask.second .base {
 780   background-color: rgb(0,177,95);
 781 }
 782
 783 #loader .circle.initial .mask .mover {
 784   background-color: rgb(33,89,189);
 785 }
 786
 787 #loader .circle.red .mask.first .mover {
 788   background-color: rgb(60,120,248);
 789 }
 790
 791 #loader .circle.red .mask.second .mover {
 792   background-color: rgb(158,18,18);
 793 }
 794
 795 #loader .circle.yellow .mask.first .mover {
 796   background-color: rgb(250,36,36);
 797 }
 798
 799 #loader .circle.yellow .mask.second .mover {
 800   background-color: rgb(222,161,26);
 801 }
 802
 803 #loader .circle.green .mask.first .mover {
 804   background-color: rgb(255,211,75);
 805 }
 806
 807 #loader .circle.green .mask.second .mover {
 808   background-color: rgb(0,137,72);
 809 }
 810
 811 #loader .circle.blue .mask.first .mover {
 812   background-color: rgb(0,177,95);
 813 }
 814
 815 #loader .circle.blue .mask.second .mover {
 816   background-color: rgb(33,89,189);
 817 }
 818
 819 #loader.initial .circle.initial .mask .mover {
 820   background-color: rgb(60,120,248);
 821 }
 822
 823 #loader.yellow .circle.yellow .mask.first {
 824   border-color: rgb(255,211,75);
 825 }
 826
 827 #loader.yellow .circle.yellow .mask.first .mover {
 828   background-color: rgb(158,18,18);
 829 }
 830
 831 #loader.yellow .circle.yellow .mask.second .mover {
 832   background-color: rgb(255,211,75);
 833 }
 834
 835 #loader.green .circle.green .mask.first {
 836  border-color: rgb(0,177,95);
 837 }
 838
 839 #loader.green .circle.green .mask.first .mover {
 840  background-color: rgb(222,161,26);
 841 }
 842
 843 #loader.green .circle.green .mask.second .mover {
 844  background-color: rgb(0,177,95);
 845 }
 846
 847 #loader.blue .circle.blue .mask.first {
 848   border-color: rgb(60,120,248);
 849 }
 850
 851 #loader.blue .circle.blue .mask.first .mover {
 852   background-color: rgb(0,137,72);
 853 }
 854
 855 #loader.blue .circle.blue .mask.second .mover {
 856   background-color: rgb(60,120,248);
 857 }
 858
 859 #loader.red .circle.red .mask.first {
 860   border-color: rgb(250,36,36);
 861 }
 862
 863 #loader.red .circle.red .mask.first .mover {
 864   background-color: rgb(33,89,189);
 865 }
 866
 867 #loader.red .circle.red .mask.second .mover {
 868   background-color: rgb(250,36,36);
 869 }