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