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 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 } 682