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