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