WebCore/css/html.css

   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 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     margin: 1.0__qem 0px
  65 }
  66
  67 div {
  68     display: block
  69 }
  70
  71 layer {
  72     display: block
  73 }
  74
  75 article, aside, footer, header, hgroup, nav, section {
  76     display: block
  77 }
  78
  79 marquee {
  80     display: inline-block;
  81     overflow: -webkit-marquee
  82 }
  83
  84 address {
  85     display: block
  86 }
  87
  88 blockquote {
  89     display: block;
  90     margin: 1__qem 40px 1em 40px
  91 }
  92
  93 q {
  94     display: inline
  95 }
  96
  97 q:before {
  98     content: '"'
  99     /* FIXME: content: open-quote; */
 100 }
 101
 102 q:after {
 103     content: '"'
 104     /* FIXME: content: close-quote; */
 105 }
 106
 107 center {
 108     display: block;
 109     /* special centering to be able to emulate the html4/netscape behaviour */
 110     text-align: -webkit-center
 111 }
 112
 113 hr {
 114     display: block;
 115     margin: 0.5em auto;
 116     border-style: inset;
 117     border-width: 1px
 118 }
 119
 120 map {
 121     display: inline
 122 }
 123
 124 /* heading elements */
 125
 126 h1 {
 127     display: block;
 128     font-size: 2em;
 129     margin: .67__qem 0 .67em 0;
 130     font-weight: bold
 131 }
 132
 133 h2 {
 134     display: block;
 135     font-size: 1.5em;
 136     margin: .83__qem 0 .83em 0;
 137     font-weight: bold
 138 }
 139
 140 h3 {
 141     display: block;
 142     font-size: 1.17em;
 143     margin: 1__qem 0 1em 0;
 144     font-weight: bold
 145 }
 146
 147 h4 {
 148     display: block;
 149     margin: 1.33__qem 0 1.33em 0;
 150     font-weight: bold
 151 }
 152
 153 h5 {
 154     display: block;
 155     font-size: .83em;
 156     margin: 1.67__qem 0 1.67em 0;
 157     font-weight: bold
 158 }
 159
 160 h6 {
 161     display: block;
 162     font-size: .67em;
 163     margin: 2.33__qem 0 2.33em 0;
 164     font-weight: bold
 165 }
 166
 167 /* tables */
 168
 169 table {
 170     display: table;
 171     border-collapse: separate;
 172     border-spacing: 2px;
 173     border-color: gray
 174 }
 175
 176 thead {
 177     display: table-header-group;
 178     vertical-align: middle;
 179     border-color: inherit
 180 }
 181
 182 tbody {
 183     display: table-row-group;
 184     vertical-align: middle;
 185     border-color: inherit
 186 }
 187
 188 tfoot {
 189     display: table-footer-group;
 190     vertical-align: middle;
 191     border-color: inherit
 192 }
 193
 194 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
 195 table > tr {
 196     vertical-align: middle;
 197 }
 198
 199 col {
 200     display: table-column
 201 }
 202
 203 colgroup {
 204     display: table-column-group
 205 }
 206
 207 tr {
 208     display: table-row;
 209     vertical-align: inherit;
 210     border-color: inherit
 211 }
 212
 213 td, th {
 214     display: table-cell;
 215     vertical-align: inherit
 216 }
 217
 218 th {
 219     font-weight: bold
 220 }
 221
 222 caption {
 223     display: table-caption;
 224     text-align: -webkit-center
 225 }
 226
 227 /* lists */
 228
 229 ul, menu, dir {
 230     display: block;
 231     list-style-type: disc;
 232     margin: 1__qem 0 1em 0;
 233     -webkit-padding-start: 40px
 234 }
 235
 236 ol {
 237     display: block;
 238     list-style-type: decimal;
 239     margin: 1__qem 0 1em 0;
 240     -webkit-padding-start: 40px
 241 }
 242
 243 li {
 244     display: list-item
 245 }
 246
 247 ul ul, ol ul {
 248     list-style-type: circle
 249 }
 250
 251 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
 252     list-style-type: square
 253 }
 254
 255 dd {
 256     display: block;
 257     -webkit-margin-start: 40px
 258 }
 259
 260 dl {
 261     display: block;
 262     margin: 1__qem 0 1em 0
 263 }
 264
 265 dt {
 266     display: block
 267 }
 268
 269 ol ul, ul ol, ul ul, ol ol {
 270     margin-top: 0;
 271     margin-bottom: 0
 272 }
 273
 274 /* form elements */
 275
 276 form {
 277     display: block;
 278     margin-top: 0__qem
 279 }
 280
 281 label {
 282     cursor: default;
 283 }
 284
 285 legend {
 286     display: block;
 287     -webkit-padding-start: 2px;
 288     -webkit-padding-end: 2px;
 289     border: none
 290 }
 291
 292 fieldset {
 293     display: block;
 294     -webkit-margin-start: 2px;
 295     -webkit-margin-end: 2px;
 296     -webkit-padding-before: 0.35em;
 297     -webkit-padding-start: 0.75em;
 298     -webkit-padding-end: 0.75em;
 299     -webkit-padding-after: 0.625em;
 300     border: 2px groove ThreeDFace
 301 }
 302
 303 button {
 304     -webkit-appearance: button;
 305 }
 306
 307 /* Form controls don't go vertical. */
 308 input, textarea, keygen, select, button, isindex, meter, progress {
 309     -webkit-block-flow: tb !important;
 310 }
 311
 312 input, textarea, keygen, select, button, isindex, datagrid {
 313     margin: 0__qem;
 314     font: -webkit-small-control;
 315     color: initial;
 316     letter-spacing: normal;
 317     word-spacing: normal;
 318     line-height: normal;
 319     text-transform: none;
 320     text-indent: 0;
 321     text-shadow: none;
 322     display: inline-block;
 323     text-align: -webkit-auto;
 324 }
 325
 326 input[type="hidden"] {
 327     display: none
 328 }
 329
 330 input, input[type="password"], input[type="search"], isindex {
 331     -webkit-appearance: textfield;
 332     padding: 1px;
 333     background-color: white;
 334     border: 2px inset;
 335     -webkit-rtl-ordering: logical;
 336     -webkit-user-select: text;
 337     cursor: auto;
 338 }
 339
 340 input[type="search"] {
 341     -webkit-appearance: searchfield;
 342     -webkit-box-sizing: border-box;
 343 }
 344
 345 input[type="search"]::-webkit-search-cancel-button {
 346     -webkit-appearance: searchfield-cancel-button;
 347     display: inline-block;
 348 }
 349
 350 input[type="search"]::-webkit-search-decoration {
 351     -webkit-appearance: searchfield-decoration;
 352     display: inline-block;
 353 }
 354
 355 input[type="search"]::-webkit-search-results-decoration {
 356     -webkit-appearance: searchfield-results-decoration;
 357     display: inline-block;
 358 }
 359
 360 input[type="search"]::-webkit-search-results-button {
 361     -webkit-appearance: searchfield-results-button;
 362     display: inline-block;
 363 }
 364
 365 input::-webkit-input-list-button {
 366     -webkit-appearance: list-button;
 367     display: inline-block;
 368 }
 369
 370 input::-webkit-inner-spin-button {
 371     -webkit-appearance: inner-spin-button;
 372     display: inline-block;
 373     -webkit-user-select: none;
 374 }
 375
 376 input::-webkit-outer-spin-button {
 377     -webkit-appearance: outer-spin-button;
 378     display: inline-block;
 379     margin-left: 2px;
 380     -webkit-user-select: none;
 381 }
 382
 383 input::-webkit-input-speech-button {
 384     -webkit-appearance: -webkit-input-speech-button;
 385     display: inline-block;
 386 }
 387
 388 textarea {
 389     -webkit-appearance: textarea;
 390     background-color: white;
 391     border: 1px solid;
 392     -webkit-rtl-ordering: logical;
 393     -webkit-user-select: text;
 394     -webkit-box-orient: vertical;
 395     resize: auto;
 396     cursor: auto;
 397     padding: 2px;
 398     white-space: pre-wrap;
 399     word-wrap: break-word;
 400 }
 401
 402 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
 403     color: darkGray;
 404 }
 405
 406 input[type="password"] {
 407     -webkit-text-security: disc !important;
 408 }
 409
 410 input[type="hidden"], input[type="image"], input[type="file"] {
 411     -webkit-appearance: initial;
 412     padding: initial;
 413     background-color: initial;
 414     border: initial;
 415 }
 416
 417 input[type="file"] {
 418     -webkit-box-align: baseline;
 419     text-align: start !important;
 420 }
 421
 422 input:-webkit-autofill {
 423     background-color: #FAFFBD !important;
 424     background-image:none !important;
 425 }
 426
 427 input[type="radio"], input[type="checkbox"] {
 428     margin: 3px 0.5ex;
 429     padding: initial;
 430     background-color: initial;
 431     border: initial;
 432 }
 433
 434 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button {
 435     -webkit-appearance: push-button;
 436     white-space: pre
 437 }
 438
 439 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
 440     -webkit-box-align: center;
 441     text-align: center;
 442     cursor: default;
 443     color: ButtonText;
 444     padding: 2px 6px 3px 6px;
 445     border: 2px outset ButtonFace;
 446     background-color: ButtonFace;
 447     -webkit-box-sizing: border-box
 448 }
 449
 450 input[type="range"] {
 451     -webkit-appearance: slider-horizontal;
 452     padding: initial;
 453     border: initial;
 454     margin: 2px;
 455 }
 456
 457 input[type="range"]::-webkit-slider-thumb {
 458     -webkit-appearance: sliderthumb-horizontal;
 459 }
 460
 461 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
 462 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
 463 select:disabled, keygen:disabled, optgroup:disabled, option:disabled, datagrid:disabled {
 464     color: GrayText
 465 }
 466
 467 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
 468     border-style: inset
 469 }
 470
 471 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 {
 472     border-style: outset
 473 }
 474
 475 area, param {
 476     display: none
 477 }
 478
 479 input[type="checkbox"] {
 480     -webkit-appearance: checkbox;
 481     -webkit-box-sizing: border-box;
 482 }
 483
 484 input[type="radio"] {
 485     -webkit-appearance: radio;
 486     -webkit-box-sizing: border-box;
 487 }
 488
 489 keygen, select {
 490     -webkit-appearance: menulist;
 491     -webkit-box-sizing: border-box;
 492     -webkit-box-align: center;
 493     border: 1px solid;
 494     -webkit-border-radius: 5px;
 495     white-space: pre;
 496     -webkit-rtl-ordering: logical;
 497     color: black;
 498     background-color: white;
 499     cursor: default;
 500 }
 501
 502 select[size],
 503 select[multiple],
 504 select[size][multiple] {
 505     -webkit-appearance: listbox;
 506     -webkit-box-align: start;
 507     border: 1px inset gray;
 508     -webkit-border-radius: initial;
 509     white-space: initial;
 510 }
 511
 512 select[size="0"],
 513 select[size="1"] {
 514     -webkit-appearance: menulist;
 515     -webkit-box-align: center;
 516     border: 1px solid;
 517     -webkit-border-radius: 5px;
 518     white-space: pre;
 519 }
 520
 521 datalist {
 522     display: none;
 523 }
 524
 525 optgroup {
 526     font-weight: bolder;
 527 }
 528
 529 option {
 530     font-weight: normal;
 531 }
 532
 533 output {
 534     display: inline;
 535 }
 536
 537 /* meter */
 538
 539 meter {
 540     -webkit-appearance: meter;
 541     display: inline-block;
 542     height: 1em;
 543     width: 5em;
 544     vertical-align: -0.2em;
 545 }
 546
 547 meter::-webkit-meter {
 548     -webkit-appearance: meter;
 549 }
 550
 551 meter::-webkit-meter-horizontal-bar {
 552     -webkit-appearance: meter;
 553     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));
 554 }
 555
 556 meter::-webkit-meter-vertical-bar {
 557     -webkit-appearance: meter;
 558     background: -webkit-gradient(linear, left top, right top, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
 559 }
 560
 561 meter::-webkit-meter-horizontal-optimum-value {
 562     -webkit-appearance: meter;
 563     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));
 564 }
 565
 566 meter::-webkit-meter-horizontal-suboptimal-value {
 567     -webkit-appearance: meter;
 568     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));
 569 }
 570
 571 meter::-webkit-meter-horizontal-even-less-good-value {
 572     -webkit-appearance: meter;
 573     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));
 574 }
 575
 576 meter::-webkit-meter-vertical-optimum-value {
 577     -webkit-appearance: meter;
 578     background: -webkit-gradient(linear, left top, right top, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
 579 }
 580
 581 meter::-webkit-meter-vertical-suboptimal-value {
 582     -webkit-appearance: meter;
 583     background: -webkit-gradient(linear, left top, right top, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
 584 }
 585
 586 meter::-webkit-meter-vertical-even-less-good-value {
 587     -webkit-appearance: meter;
 588     background: -webkit-gradient(linear, left top, right top, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
 589 }
 590
 591 /* progress */
 592
 593 progress {
 594     -webkit-appearance: progress-bar;
 595     display: inline-block;
 596     height: 1em;
 597     width: 10em;
 598     vertical-align: -0.2em;
 599     background-color: gray;
 600 }
 601
 602 progress::-webkit-progress-bar-value {
 603     -webkit-appearance: progress-bar;
 604     background-color: green;
 605 }
 606
 607 /* datagrid */
 608
 609 datagrid {
 610     height: 150px; /* We don't use width:300px in CSS, since we want width:intrinsic and width:min-intrinsic to reset to 300 properly. */
 611     -webkit-appearance: datagrid;
 612     -webkit-box-sizing: border-box;
 613     -webkit-rtl-ordering: logical;
 614     color: black;
 615     background-color: white;
 616     cursor: default;
 617     border: 1px inset gray;
 618     white-space: initial;
 619 }
 620
 621 /* inline elements */
 622
 623 u, ins {
 624     text-decoration: underline
 625 }
 626
 627 strong, b {
 628     font-weight: bolder
 629 }
 630
 631 i, cite, em, var, address {
 632     font-style: italic
 633 }
 634
 635 tt, code, kbd, samp {
 636     font-family: monospace
 637 }
 638
 639 pre, xmp, plaintext, listing {
 640     display: block;
 641     font-family: monospace;
 642     white-space: pre;
 643     margin: 1__qem 0
 644 }
 645
 646 mark {
 647     background-color: yellow;
 648     color: black
 649 }
 650
 651 big {
 652     font-size: larger
 653 }
 654
 655 small {
 656     font-size: smaller
 657 }
 658
 659 s, strike, del {
 660     text-decoration: line-through
 661 }
 662
 663 sub {
 664     vertical-align: sub;
 665     font-size: smaller
 666 }
 667
 668 sup {
 669     vertical-align: super;
 670     font-size: smaller
 671 }
 672
 673 nobr {
 674     white-space: nowrap
 675 }
 676
 677 /* states */
 678
 679 :focus {
 680     outline: auto 5px -webkit-focus-ring-color
 681 }
 682
 683 /* Read-only text fields do not show a focus ring but do still receive focus */
 684 html:focus, body:focus, input[readonly]:focus {
 685     outline: none
 686 }
 687
 688 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
 689     outline-offset: -2px
 690 }
 691
 692 input[type="button"]:focus,
 693 input[type="checkbox"]:focus,
 694 input[type="file"]:focus,
 695 input[type="hidden"]:focus,
 696 input[type="image"]:focus,
 697 input[type="radio"]:focus,
 698 input[type="reset"]:focus,
 699 input[type="search"]:focus,
 700 input[type="submit"]:focus,
 701 input[type="file"]:focus::-webkit-file-upload-button {
 702     outline-offset: 0
 703 }
 704
 705 a:-webkit-any-link {
 706     color: -webkit-link;
 707     text-decoration: underline;
 708     cursor: auto;
 709 }
 710
 711 a:-webkit-any-link:active {
 712     color: -webkit-activelink
 713 }
 714
 715 /* HTML5 ruby elements */
 716
 717 ruby, rt {
 718     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
 719     line-height: normal;
 720 }
 721
 722 ruby > rt {
 723     display: block;
 724     font-size: 60%; /* make slightly larger than 50% for better readability */
 725     text-align: center;
 726 }
 727
 728 ruby > rp {
 729     display: none;
 730 }
 731
 732 /* other elements */
 733
 734 noframes {
 735     display: none
 736 }
 737
 738 frameset, frame {
 739     display: block
 740 }
 741
 742 frameset {
 743     border-color: inherit
 744 }
 745
 746 iframe {
 747     border: 2px inset
 748 }
 749
 750 /* page */
 751
 752 @page {
 753     /* FIXME: Define the right default values for page properties. */
 754     size: auto;
 755     margin: auto;
 756     padding: 0px;
 757     border-width: 0px;
 758 }
 759
 760 /* noscript is handled internally, as it depends on settings */