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 16blockquote, 17body, 18caption, 19dd, 20dl, 21fieldset, 22figure, 23form, 24h1, 25h2, 26h3, 27h4, 28h5, 29h6, 30hr, 31legend, 32ol, 33p, 34pre, 35ul, 36table, 37td, 38th { 39 margin: 0; 40 padding: 0; 41 word-wrap: break-word; 42} 43 44/* Prevent 'sub' and 'sup' affecting 'line-height'. */ 45 46sub, 47sup { 48 font-size: 75%; 49 line-height: 0; 50 position: relative; 51 vertical-align: baseline; 52} 53 54sup { 55 top: -0.5em; 56} 57 58sub { 59 bottom: -0.25em; 60} 61 62/* Remove most spacing between table cells. */ 63 64table { 65 border-collapse: collapse; 66 border-spacing: 0; 67} 68 69td, 70th { 71 padding: 0; 72} 73 74/* Base typography. */ 75 76body, 77html { 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 117blockquote, 118caption, 119code, 120dd, 121dl, 122fieldset, 123figure, 124form, 125hr, 126legend, 127ol, 128p, 129pre, 130q, 131table, 132td, 133th, 134ul { 135 margin-bottom: 1rem; 136} 137 138h2, 139h3, 140h4, 141h5, 142h6 { 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 161body { 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 172a:link { 173 color: #55F; 174} 175 176a:visited { 177 color: #902290; 178} 179 180blockquote { 181 border-left: 4px solid #eee; 182 padding-left: 1em; 183} 184 185cite { 186 color: rgba(0, 0, 0, .54); 187 font-style: italic; 188} 189 190hr { 191 background-color: #e4dfdf; 192 border: none; 193 height: 1px; 194 margin: inherit auto; 195 width: 75%; 196} 197 198h1 { 199 font-size: 1.7rem; 200 line-height: 1.9rem; 201 margin-bottom: 0.444rem; 202} 203 204q { 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 213embed, 214img, 215object, 216video { 217 max-width: 100%; 218} 219 220/* TODO(sunangel): make images zoomable. */ 221 222img { 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 230embed+[class*='caption'], 231figcaption, 232img+[class*='caption'], 233object+[class*='caption'], 234video+[class*='caption'] { 235 color: rgba(0,0,0,.54); 236 display: table; 237 font-style: italic; 238 margin: 0 auto; 239} 240 241ol, 242ul { 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 262pre code { 263 border: none; 264 padding: 0; 265} 266 267pre { 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