1 /* 2 * The default style sheet used to render HTML. 3 * 4 * Copyright (C) 2000 Lars Knoll (knoll (at) 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 26 html { 27 display: block 28 } 29 30 /* children of the <head> element all have display:none */ 31 head { 32 display: none 33 } 34 35 meta { 36 display: none 37 } 38 39 title { 40 display: none 41 } 42 43 link { 44 display: none 45 } 46 47 style { 48 display: none 49 } 50 51 script { 52 display: none 53 } 54 55 /* generic block-level elements */ 56 57 body { 58 display: block; 59 margin: 8px 60 } 61 62 p { 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 70 div { 71 display: block 72 } 73 74 layer { 75 display: block 76 } 77 78 article, aside, footer, header, hgroup, nav, section { 79 display: block 80 } 81 82 marquee { 83 display: inline-block; 84 overflow: -webkit-marquee 85 } 86 87 address { 88 display: block 89 } 90 91 blockquote { 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 99 figcaption { 100 display: block 101 } 102 103 figure { 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 111 q { 112 display: inline 113 } 114 115 q:before { 116 content: open-quote; 117 } 118 119 q:after { 120 content: close-quote; 121 } 122 123 center { 124 display: block; 125 /* special centering to be able to emulate the html4/netscape behaviour */ 126 text-align: -webkit-center 127 } 128 129 hr { 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 139 map { 140 display: inline 141 } 142 143 /* heading elements */ 144 145 h1 { 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 185 h2 { 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 195 h3 { 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 205 h4 { 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 214 h5 { 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 224 h6 { 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 236 table { 237 display: table; 238 border-collapse: separate; 239 border-spacing: 2px; 240 border-color: gray 241 } 242 243 thead { 244 display: table-header-group; 245 vertical-align: middle; 246 border-color: inherit 247 } 248 249 tbody { 250 display: table-row-group; 251 vertical-align: middle; 252 border-color: inherit 253 } 254 255 tfoot { 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) */ 262 table > tr { 263 vertical-align: middle; 264 } 265 266 col { 267 display: table-column 268 } 269 270 colgroup { 271 display: table-column-group 272 } 273 274 tr { 275 display: table-row; 276 vertical-align: inherit; 277 border-color: inherit 278 } 279 280 td, th { 281 display: table-cell; 282 vertical-align: inherit 283 } 284 285 th { 286 font-weight: bold 287 } 288 289 caption { 290 display: table-caption; 291 text-align: -webkit-center 292 } 293 294 /* lists */ 295 296 ul, 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 306 ol { 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 316 li { 317 display: list-item 318 } 319 320 ul ul, ol ul { 321 list-style-type: circle 322 } 323 324 ol ol ul, ol ul ul, ul ol ul, ul ul ul { 325 list-style-type: square 326 } 327 328 dd { 329 display: block; 330 -webkit-margin-start: 40px 331 } 332 333 dl { 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 341 dt { 342 display: block 343 } 344 345 ol ul, ul ol, ul ul, ol ol { 346 -webkit-margin-before: 0; 347 -webkit-margin-after: 0 348 } 349 350 /* form elements */ 351 352 form { 353 display: block; 354 margin-top: 0__qem; 355 } 356 357 label { 358 cursor: default; 359 } 360 361 legend { 362 display: block; 363 -webkit-padding-start: 2px; 364 -webkit-padding-end: 2px; 365 border: none 366 } 367 368 fieldset { 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 379 button { 380 -webkit-appearance: button; 381 } 382 383 /* Form controls don't go vertical. */ 384 input, textarea, keygen, select, button, isindex, meter, progress { 385 -webkit-block-flow: tb !important; 386 } 387 388 input, 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 402 input[type="hidden"] { 403 display: none 404 } 405 406 input, 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 416 input[type="search"] { 417 -webkit-appearance: searchfield; 418 -webkit-box-sizing: border-box; 419 } 420 421 input[type="search"]::-webkit-search-cancel-button { 422 -webkit-appearance: searchfield-cancel-button; 423 display: inline-block; 424 } 425 426 input[type="search"]::-webkit-search-decoration { 427 -webkit-appearance: searchfield-decoration; 428 display: inline-block; 429 } 430 431 input[type="search"]::-webkit-search-results-decoration { 432 -webkit-appearance: searchfield-results-decoration; 433 display: inline-block; 434 } 435 436 input[type="search"]::-webkit-search-results-button { 437 -webkit-appearance: searchfield-results-button; 438 display: inline-block; 439 } 440 441 input::-webkit-input-list-button { 442 -webkit-appearance: list-button; 443 display: inline-block; 444 } 445 446 input::-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 454 input::-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 463 input::-webkit-input-speech-button { 464 -webkit-appearance: -webkit-input-speech-button; 465 display: inline-block; 466 } 467 468 keygen, select { 469 -webkit-border-radius: 5px; 470 } 471 472 keygen::-webkit-keygen-select { 473 margin: 0px; 474 } 475 476 textarea { 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 490 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 491 color: darkGray; 492 } 493 494 input[type="password"] { 495 -webkit-text-security: disc !important; 496 } 497 498 input[type="hidden"], input[type="image"], input[type="file"] { 499 -webkit-appearance: initial; 500 padding: initial; 501 background-color: initial; 502 border: initial; 503 } 504 505 input[type="file"] { 506 -webkit-box-align: baseline; 507 text-align: start !important; 508 } 509 510 input:-webkit-autofill { 511 background-color: #FAFFBD !important; 512 background-image:none !important; 513 color: #000000 !important; 514 } 515 516 input[type="radio"], input[type="checkbox"] { 517 margin: 3px 0.5ex; 518 padding: initial; 519 background-color: initial; 520 border: initial; 521 } 522 523 input[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 528 input[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 539 input[type="range"] { 540 -webkit-appearance: slider-horizontal; 541 padding: initial; 542 border: initial; 543 margin: 2px; 544 } 545 546 input[type="range"]::-webkit-slider-thumb { 547 -webkit-appearance: sliderthumb-horizontal; 548 display: block; 549 } 550 551 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, 552 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled, 553 select:disabled, keygen:disabled, optgroup:disabled, option:disabled, datagrid:disabled { 554 color: GrayText 555 } 556 557 input[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 561 input[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 565 area, param { 566 display: none 567 } 568 569 input[type="checkbox"] { 570 -webkit-appearance: checkbox; 571 -webkit-box-sizing: border-box; 572 } 573 574 input[type="radio"] { 575 -webkit-appearance: radio; 576 -webkit-box-sizing: border-box; 577 } 578 579 select { 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 591 select[size], 592 select[multiple], 593 select[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 601 select[size="0"], 602 select[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 610 optgroup { 611 font-weight: bolder; 612 } 613 614 option { 615 font-weight: normal; 616 } 617 618 output { 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 678 meter { 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 687 meter::-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 693 meter::-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 699 meter::-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 705 meter::-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 713 progress { 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 722 progress::-webkit-progress-bar { 723 background-color: gray; 724 height: 100%; 725 -webkit-box-sizing: border-box; 726 } 727 728 progress::-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 737 datagrid { 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 751 u, ins { 752 text-decoration: underline 753 } 754 755 strong, b { 756 font-weight: bolder 757 } 758 759 i, cite, em, var, address { 760 font-style: italic 761 } 762 763 tt, code, kbd, samp { 764 font-family: monospace 765 } 766 767 pre, xmp, plaintext, listing { 768 display: block; 769 font-family: monospace; 770 white-space: pre; 771 margin: 1__qem 0 772 } 773 774 mark { 775 background-color: yellow; 776 color: black 777 } 778 779 big { 780 font-size: larger 781 } 782 783 small { 784 font-size: smaller 785 } 786 787 s, strike, del { 788 text-decoration: line-through 789 } 790 791 sub { 792 vertical-align: sub; 793 font-size: smaller 794 } 795 796 sup { 797 vertical-align: super; 798 font-size: smaller 799 } 800 801 nobr { 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 */ 812 html:focus, body:focus, input[readonly]:focus { 813 outline: none 814 } 815 816 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus { 817 outline-offset: -2px 818 } 819 820 input[type="button"]:focus, 821 input[type="checkbox"]:focus, 822 input[type="file"]:focus, 823 input[type="hidden"]:focus, 824 input[type="image"]:focus, 825 input[type="radio"]:focus, 826 input[type="reset"]:focus, 827 input[type="search"]:focus, 828 input[type="submit"]:focus, 829 input[type="file"]:focus::-webkit-file-upload-button { 830 outline-offset: 0 831 } 832 833 a:-webkit-any-link { 834 color: -webkit-link; 835 text-decoration: underline; 836 cursor: auto; 837 } 838 839 a:-webkit-any-link:active { 840 color: -webkit-activelink 841 } 842 843 /* HTML5 ruby elements */ 844 845 ruby, rt { 846 text-indent: 0; /* blocks used for ruby rendering should not trigger this */ 847 } 848 849 rt { 850 line-height: normal; 851 -webkit-text-emphasis: none; 852 } 853 854 ruby > rt { 855 display: block; 856 font-size: 50%; 857 text-align: -webkit-auto; 858 } 859 860 ruby > rp { 861 display: none; 862 } 863 864 /* other elements */ 865 866 noframes { 867 display: none 868 } 869 870 frameset, frame { 871 display: block 872 } 873 874 frameset { 875 border-color: inherit 876 } 877 878 iframe { 879 border: 2px inset 880 } 881 882 details { 883 display: block 884 } 885 886 summary { 887 display: block 888 } 889 890 summary::-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