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