1/* 2 * The default style sheet used to render HTML. 3 * 4 * Copyright (C) 2000 Lars Knoll (knoll@kde.org) 5 * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved. 6 * 7 * This library is free software; you can redistribute it and/or 8 * modify it under the terms of the GNU Library General Public 9 * License as published by the Free Software Foundation; either 10 * version 2 of the License, or (at your option) any later version. 11 * 12 * This library is distributed in the hope that it will be useful, 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 15 * Library General Public License for more details. 16 * 17 * You should have received a copy of the GNU Library General Public License 18 * along with this library; see the file COPYING.LIB. If not, write to 19 * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, 20 * Boston, MA 02110-1301, USA. 21 * 22 */ 23 24@namespace "http://www.w3.org/1999/xhtml"; 25 26html { 27 display: block 28} 29 30/* children of the <head> element all have display:none */ 31head { 32 display: none 33} 34 35meta { 36 display: none 37} 38 39title { 40 display: none 41} 42 43link { 44 display: none 45} 46 47style { 48 display: none 49} 50 51script { 52 display: none 53} 54 55/* generic block-level elements */ 56 57body { 58 display: block; 59 margin: 8px 60} 61 62p { 63 display: block; 64 -webkit-margin-before: 1__qem; 65 -webkit-margin-after: 1__qem; 66 -webkit-margin-start: 0; 67 -webkit-margin-end: 0; 68} 69 70div { 71 display: block 72} 73 74layer { 75 display: block 76} 77 78article, aside, footer, header, hgroup, nav, section { 79 display: block 80} 81 82marquee { 83 display: inline-block; 84 overflow: -webkit-marquee 85} 86 87address { 88 display: block 89} 90 91blockquote { 92 display: block; 93 -webkit-margin-before: 1__qem; 94 -webkit-margin-after: 1em; 95 -webkit-margin-start: 40px; 96 -webkit-margin-end: 40px; 97} 98 99figcaption { 100 display: block 101} 102 103figure { 104 display: block; 105 -webkit-margin-before: 1em; 106 -webkit-margin-after: 1em; 107 -webkit-margin-start: 40px; 108 -webkit-margin-end: 40px; 109} 110 111q { 112 display: inline 113} 114 115q:before { 116 content: open-quote; 117} 118 119q:after { 120 content: close-quote; 121} 122 123center { 124 display: block; 125 /* special centering to be able to emulate the html4/netscape behaviour */ 126 text-align: -webkit-center 127} 128 129hr { 130 display: block; 131 -webkit-margin-before: 0.5em; 132 -webkit-margin-after: 0.5em; 133 -webkit-margin-start: auto; 134 -webkit-margin-end: auto; 135 border-style: inset; 136 border-width: 1px 137} 138 139map { 140 display: inline 141} 142 143/* heading elements */ 144 145h1 { 146 display: block; 147 font-size: 2em; 148 -webkit-margin-before: 0.67__qem; 149 -webkit-margin-after: 0.67em; 150 -webkit-margin-start: 0; 151 -webkit-margin-end: 0; 152 font-weight: bold 153} 154 155:-webkit-any(article,aside,nav,section) h1 { 156 font-size: 1.5em; 157 -webkit-margin-before: 0.83__qem; 158 -webkit-margin-after: 0.83em; 159} 160 161:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 { 162 font-size: 1.17em; 163 -webkit-margin-before: 1__qem; 164 -webkit-margin-after: 1em; 165} 166 167:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 { 168 font-size: 1.00em; 169 -webkit-margin-before: 1.33__qem; 170 -webkit-margin-after: 1.33em; 171} 172 173:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 { 174 font-size: .83em; 175 -webkit-margin-before: 1.67__qem; 176 -webkit-margin-after: 1.67em; 177} 178 179:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 { 180 font-size: .67em; 181 -webkit-margin-before: 2.33__qem; 182 -webkit-margin-after: 2.33em; 183} 184 185h2 { 186 display: block; 187 font-size: 1.5em; 188 -webkit-margin-before: 0.83__qem; 189 -webkit-margin-after: 0.83em; 190 -webkit-margin-start: 0; 191 -webkit-margin-end: 0; 192 font-weight: bold 193} 194 195h3 { 196 display: block; 197 font-size: 1.17em; 198 -webkit-margin-before: 1__qem; 199 -webkit-margin-after: 1em; 200 -webkit-margin-start: 0; 201 -webkit-margin-end: 0; 202 font-weight: bold 203} 204 205h4 { 206 display: block; 207 -webkit-margin-before: 1.33__qem; 208 -webkit-margin-after: 1.33em; 209 -webkit-margin-start: 0; 210 -webkit-margin-end: 0; 211 font-weight: bold 212} 213 214h5 { 215 display: block; 216 font-size: .83em; 217 -webkit-margin-before: 1.67__qem; 218 -webkit-margin-after: 1.67em; 219 -webkit-margin-start: 0; 220 -webkit-margin-end: 0; 221 font-weight: bold 222} 223 224h6 { 225 display: block; 226 font-size: .67em; 227 -webkit-margin-before: 2.33__qem; 228 -webkit-margin-after: 2.33em; 229 -webkit-margin-start: 0; 230 -webkit-margin-end: 0; 231 font-weight: bold 232} 233 234/* tables */ 235 236table { 237 display: table; 238 border-collapse: separate; 239 border-spacing: 2px; 240 border-color: gray 241} 242 243thead { 244 display: table-header-group; 245 vertical-align: middle; 246 border-color: inherit 247} 248 249tbody { 250 display: table-row-group; 251 vertical-align: middle; 252 border-color: inherit 253} 254 255tfoot { 256 display: table-footer-group; 257 vertical-align: middle; 258 border-color: inherit 259} 260 261/* for tables without table section elements (can happen with XHTML or dynamically created tables) */ 262table > tr { 263 vertical-align: middle; 264} 265 266col { 267 display: table-column 268} 269 270colgroup { 271 display: table-column-group 272} 273 274tr { 275 display: table-row; 276 vertical-align: inherit; 277 border-color: inherit 278} 279 280td, th { 281 display: table-cell; 282 vertical-align: inherit 283} 284 285th { 286 font-weight: bold 287} 288 289caption { 290 display: table-caption; 291 text-align: -webkit-center 292} 293 294/* lists */ 295 296ul, menu, dir { 297 display: block; 298 list-style-type: disc; 299 -webkit-margin-before: 1__qem; 300 -webkit-margin-after: 1em; 301 -webkit-margin-start: 0; 302 -webkit-margin-end: 0; 303 -webkit-padding-start: 40px 304} 305 306ol { 307 display: block; 308 list-style-type: decimal; 309 -webkit-margin-before: 1__qem; 310 -webkit-margin-after: 1em; 311 -webkit-margin-start: 0; 312 -webkit-margin-end: 0; 313 -webkit-padding-start: 40px 314} 315 316li { 317 display: list-item 318} 319 320ul ul, ol ul { 321 list-style-type: circle 322} 323 324ol ol ul, ol ul ul, ul ol ul, ul ul ul { 325 list-style-type: square 326} 327 328dd { 329 display: block; 330 -webkit-margin-start: 40px 331} 332 333dl { 334 display: block; 335 -webkit-margin-before: 1__qem; 336 -webkit-margin-after: 1em; 337 -webkit-margin-start: 0; 338 -webkit-margin-end: 0; 339} 340 341dt { 342 display: block 343} 344 345ol ul, ul ol, ul ul, ol ol { 346 -webkit-margin-before: 0; 347 -webkit-margin-after: 0 348} 349 350/* form elements */ 351 352form { 353 display: block; 354 margin-top: 0__qem; 355} 356 357label { 358 cursor: default; 359} 360 361legend { 362 display: block; 363 -webkit-padding-start: 2px; 364 -webkit-padding-end: 2px; 365 border: none 366} 367 368fieldset { 369 display: block; 370 -webkit-margin-start: 2px; 371 -webkit-margin-end: 2px; 372 -webkit-padding-before: 0.35em; 373 -webkit-padding-start: 0.75em; 374 -webkit-padding-end: 0.75em; 375 -webkit-padding-after: 0.625em; 376 border: 2px groove ThreeDFace 377} 378 379button { 380 -webkit-appearance: button; 381} 382 383/* Form controls don't go vertical. */ 384input, textarea, keygen, select, button, isindex, meter, progress { 385 -webkit-block-flow: tb !important; 386} 387 388input, textarea, keygen, select, button, isindex, datagrid { 389 margin: 0__qem; 390 font: -webkit-small-control; 391 color: initial; 392 letter-spacing: normal; 393 word-spacing: normal; 394 line-height: normal; 395 text-transform: none; 396 text-indent: 0; 397 text-shadow: none; 398 display: inline-block; 399 text-align: -webkit-auto; 400} 401 402input[type="hidden"] { 403 display: none 404} 405 406input, input[type="password"], input[type="search"], isindex { 407 -webkit-appearance: textfield; 408 padding: 1px; 409 background-color: white; 410 border: 2px inset; 411 -webkit-rtl-ordering: logical; 412 -webkit-user-select: text; 413 cursor: auto; 414} 415 416input[type="search"] { 417 -webkit-appearance: searchfield; 418 -webkit-box-sizing: border-box; 419} 420 421input[type="search"]::-webkit-search-cancel-button { 422 -webkit-appearance: searchfield-cancel-button; 423 display: inline-block; 424} 425 426input[type="search"]::-webkit-search-decoration { 427 -webkit-appearance: searchfield-decoration; 428 display: inline-block; 429} 430 431input[type="search"]::-webkit-search-results-decoration { 432 -webkit-appearance: searchfield-results-decoration; 433 display: inline-block; 434} 435 436input[type="search"]::-webkit-search-results-button { 437 -webkit-appearance: searchfield-results-button; 438 display: inline-block; 439} 440 441input::-webkit-input-list-button { 442 -webkit-appearance: list-button; 443 display: inline-block; 444} 445 446input::-webkit-inner-spin-button { 447 -webkit-appearance: inner-spin-button; 448 display: inline-block; 449 position: relative; 450 cursor: default; 451 -webkit-user-select: none; 452} 453 454input::-webkit-outer-spin-button { 455 -webkit-appearance: outer-spin-button; 456 display: inline-block; 457 position: relative; 458 cursor: default; 459 margin-left: 2px; 460 -webkit-user-select: none; 461} 462 463input::-webkit-input-speech-button { 464 -webkit-appearance: -webkit-input-speech-button; 465 display: inline-block; 466} 467 468keygen, select { 469 -webkit-border-radius: 5px; 470} 471 472keygen::-webkit-keygen-select { 473 margin: 0px; 474} 475 476textarea { 477 -webkit-appearance: textarea; 478 background-color: white; 479 border: 1px solid; 480 -webkit-rtl-ordering: logical; 481 -webkit-user-select: text; 482 -webkit-box-orient: vertical; 483 resize: auto; 484 cursor: auto; 485 padding: 2px; 486 white-space: pre-wrap; 487 word-wrap: break-word; 488} 489 490input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 491 color: darkGray; 492} 493 494input[type="password"] { 495 -webkit-text-security: disc !important; 496} 497 498input[type="hidden"], input[type="image"], input[type="file"] { 499 -webkit-appearance: initial; 500 padding: initial; 501 background-color: initial; 502 border: initial; 503} 504 505input[type="file"] { 506 -webkit-box-align: baseline; 507 text-align: start !important; 508} 509 510input:-webkit-autofill { 511 background-color: #FAFFBD !important; 512 background-image:none !important; 513 color: #000000 !important; 514} 515 516input[type="radio"], input[type="checkbox"] { 517 margin: 3px 0.5ex; 518 padding: initial; 519 background-color: initial; 520 border: initial; 521} 522 523input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button { 524 -webkit-appearance: push-button; 525 white-space: pre 526} 527 528input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { 529 -webkit-box-align: center; 530 text-align: center; 531 cursor: default; 532 color: ButtonText; 533 padding: 2px 6px 3px 6px; 534 border: 2px outset ButtonFace; 535 background-color: ButtonFace; 536 -webkit-box-sizing: border-box 537} 538 539input[type="range"] { 540 -webkit-appearance: slider-horizontal; 541 padding: initial; 542 border: initial; 543 margin: 2px; 544} 545 546input[type="range"]::-webkit-slider-thumb { 547 -webkit-appearance: sliderthumb-horizontal; 548 display: block; 549} 550 551input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, 552input[type="file"]:disabled::-webkit-file-upload-button, button:disabled, 553select:disabled, keygen:disabled, optgroup:disabled, option:disabled, datagrid:disabled { 554 color: GrayText 555} 556 557input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active { 558 border-style: inset 559} 560 561input[type="button"]:active:disabled, input[type="submit"]:active:disabled, input[type="reset"]:active:disabled, input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled { 562 border-style: outset 563} 564 565area, param { 566 display: none 567} 568 569input[type="checkbox"] { 570 -webkit-appearance: checkbox; 571 -webkit-box-sizing: border-box; 572} 573 574input[type="radio"] { 575 -webkit-appearance: radio; 576 -webkit-box-sizing: border-box; 577} 578 579select { 580 -webkit-appearance: menulist; 581 -webkit-box-sizing: border-box; 582 -webkit-box-align: center; 583 border: 1px solid; 584 white-space: pre; 585 -webkit-rtl-ordering: logical; 586 color: black; 587 background-color: white; 588 cursor: default; 589} 590 591select[size], 592select[multiple], 593select[size][multiple] { 594 -webkit-appearance: listbox; 595 -webkit-box-align: start; 596 border: 1px inset gray; 597 -webkit-border-radius: initial; 598 white-space: initial; 599} 600 601select[size="0"], 602select[size="1"] { 603 -webkit-appearance: menulist; 604 -webkit-box-align: center; 605 border: 1px solid; 606 -webkit-border-radius: 5px; 607 white-space: pre; 608} 609 610optgroup { 611 font-weight: bolder; 612} 613 614option { 615 font-weight: normal; 616} 617 618output { 619 display: inline; 620} 621 622/* form validation message bubble */ 623 624::-webkit-validation-bubble { 625 display: inline-block; 626 z-index: 2147483647; 627 position: absolute; 628 opacity: 0.95; 629 line-height: 0; 630 margin: 0; 631 -webkit-text-security: none; 632 -webkit-transition: opacity 05.5s ease; 633} 634 635::-webkit-validation-bubble-message { 636 display: block; 637 position: relative; 638 top: -4px; 639 font: message-box; 640 color: black; 641 min-width: 50px; 642 max-width: 200px; 643 border: solid 2px #400; 644 background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc)); 645 padding: 8px; 646 -webkit-border-radius: 8px; 647 -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6), 648 inset -2px -2px 1px #d0c4c4, 649 inset 2px 2px 1px white; 650 line-height: normal; 651 z-index: 2147483644; 652} 653 654::-webkit-validation-bubble-arrow { 655 display: inline-block; 656 position: relative; 657 left: 32px; 658 width: 16px; 659 height: 16px; 660 background-color: #f8ecec; 661 border-width: 2px 0 0 2px; 662 border-style: solid; 663 border-color: #400; 664 box-shadow: inset 2px 2px 1px white; 665 -webkit-transform-origin: 0 0; 666 -webkit-transform: rotate(45deg); 667 z-index: 2147483645; 668} 669 670::-webkit-validation-bubble-arrow-clipper { 671 display: block; 672 overflow: hidden; 673 height: 16px; 674} 675 676/* meter */ 677 678meter { 679 -webkit-appearance: meter; 680 -webkit-box-sizing: border-box; 681 display: inline-box; 682 height: 1em; 683 width: 5em; 684 vertical-align: -0.2em; 685} 686 687meter::-webkit-meter-bar { 688 background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); 689 height: 100%; 690 -webkit-box-sizing: border-box; 691} 692 693meter::-webkit-meter-optimum-value { 694 background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); 695 height: 100%; 696 -webkit-box-sizing: border-box; 697} 698 699meter::-webkit-meter-suboptimum-value { 700 background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); 701 height: 100%; 702 -webkit-box-sizing: border-box; 703} 704 705meter::-webkit-meter-even-less-good-value { 706 background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); 707 height: 100%; 708 -webkit-box-sizing: border-box; 709} 710 711/* progress */ 712 713progress { 714 -webkit-appearance: progress-bar; 715 -webkit-box-sizing: border-box; 716 display: inline-block; 717 height: 1em; 718 width: 10em; 719 vertical-align: -0.2em; 720} 721 722progress::-webkit-progress-bar { 723 background-color: gray; 724 height: 100%; 725 -webkit-box-sizing: border-box; 726} 727 728progress::-webkit-progress-value { 729 background-color: green; 730 height: 100%; 731 width: 50%; /* should be removed later */ 732 -webkit-box-sizing: border-box; 733} 734 735/* datagrid */ 736 737datagrid { 738 height: 150px; /* We don't use width:300px in CSS, since we want width:intrinsic and width:min-intrinsic to reset to 300 properly. */ 739 -webkit-appearance: datagrid; 740 -webkit-box-sizing: border-box; 741 -webkit-rtl-ordering: logical; 742 color: black; 743 background-color: white; 744 cursor: default; 745 border: 1px inset gray; 746 white-space: initial; 747} 748 749/* inline elements */ 750 751u, ins { 752 text-decoration: underline 753} 754 755strong, b { 756 font-weight: bolder 757} 758 759i, cite, em, var, address { 760 font-style: italic 761} 762 763tt, code, kbd, samp { 764 font-family: monospace 765} 766 767pre, xmp, plaintext, listing { 768 display: block; 769 font-family: monospace; 770 white-space: pre; 771 margin: 1__qem 0 772} 773 774mark { 775 background-color: yellow; 776 color: black 777} 778 779big { 780 font-size: larger 781} 782 783small { 784 font-size: smaller 785} 786 787s, strike, del { 788 text-decoration: line-through 789} 790 791sub { 792 vertical-align: sub; 793 font-size: smaller 794} 795 796sup { 797 vertical-align: super; 798 font-size: smaller 799} 800 801nobr { 802 white-space: nowrap 803} 804 805/* states */ 806 807:focus { 808 outline: auto 5px -webkit-focus-ring-color 809} 810 811/* Read-only text fields do not show a focus ring but do still receive focus */ 812html:focus, body:focus, input[readonly]:focus { 813 outline: none 814} 815 816input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus { 817 outline-offset: -2px 818} 819 820input[type="button"]:focus, 821input[type="checkbox"]:focus, 822input[type="file"]:focus, 823input[type="hidden"]:focus, 824input[type="image"]:focus, 825input[type="radio"]:focus, 826input[type="reset"]:focus, 827input[type="search"]:focus, 828input[type="submit"]:focus, 829input[type="file"]:focus::-webkit-file-upload-button { 830 outline-offset: 0 831} 832 833a:-webkit-any-link { 834 color: -webkit-link; 835 text-decoration: underline; 836 cursor: auto; 837} 838 839a:-webkit-any-link:active { 840 color: -webkit-activelink 841} 842 843/* HTML5 ruby elements */ 844 845ruby, rt { 846 text-indent: 0; /* blocks used for ruby rendering should not trigger this */ 847} 848 849rt { 850 line-height: normal; 851 -webkit-text-emphasis: none; 852} 853 854ruby > rt { 855 display: block; 856 font-size: 50%; 857 text-align: -webkit-auto; 858} 859 860ruby > rp { 861 display: none; 862} 863 864/* other elements */ 865 866noframes { 867 display: none 868} 869 870frameset, frame { 871 display: block 872} 873 874frameset { 875 border-color: inherit 876} 877 878iframe { 879 border: 2px inset 880} 881 882details { 883 display: block 884} 885 886summary { 887 display: block 888} 889 890summary::-webkit-details-marker { 891 display: inline-block; 892 width: 0.66em; 893 height: 0.66em; 894 margin-right: 0.4em; 895} 896 897/* page */ 898 899@page { 900 /* FIXME: Define the right default values for page properties. */ 901 size: auto; 902 margin: auto; 903 padding: 0px; 904 border-width: 0px; 905} 906 907/* noscript is handled internally, as it depends on settings */ 908