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     padding-left: 2px;
 288     padding-right: 2px;
 289     border: none
 290 }
 291
 292 fieldset {
 293     display: block;
 294     margin-left: 2px;
 295     margin-right: 2px;
 296     padding: 0.35em 0.75em 0.625em;
 297     border: 2px groove ThreeDFace
 298 }
 299
 300 button {
 301     -webkit-appearance: button;
 302 }
 303
 304 input, textarea, keygen, select, button, isindex, datagrid {
 305     margin: 0__qem;
 306     font: -webkit-small-control;
 307     color: initial;
 308     letter-spacing: normal;
 309     word-spacing: normal;
 310     line-height: normal;
 311     text-transform: none;
 312     text-indent: 0;
 313     text-shadow: none;
 314     display: inline-block;
 315     text-align: -webkit-auto;
 316 }
 317
 318 input[type="hidden"] {
 319     display: none
 320 }
 321
 322 input, input[type="password"], input[type="search"], isindex {
 323     -webkit-appearance: textfield;
 324     padding: 1px;
 325     background-color: white;
 326     border: 2px inset;
 327     -webkit-rtl-ordering: logical;
 328     -webkit-user-select: text;
 329     cursor: auto;
 330 }
 331
 332 input[type="search"] {
 333     -webkit-appearance: searchfield;
 334     -webkit-box-sizing: border-box;
 335 }
 336
 337 input[type="search"]::-webkit-search-cancel-button {
 338     -webkit-appearance: searchfield-cancel-button;
 339     display: inline-block;
 340 }
 341
 342 input[type="search"]::-webkit-search-decoration {
 343     -webkit-appearance: searchfield-decoration;
 344     display: inline-block;
 345 }
 346
 347 input[type="search"]::-webkit-search-results-decoration {
 348     -webkit-appearance: searchfield-results-decoration;
 349     display: inline-block;
 350 }
 351
 352 input[type="search"]::-webkit-search-results-button {
 353     -webkit-appearance: searchfield-results-button;
 354     display: inline-block;
 355 }
 356
 357 input::-webkit-input-list-button {
 358     -webkit-appearance: list-button;
 359     display: inline-block;
 360 }
 361
 362 input::-webkit-inner-spin-button {
 363     -webkit-appearance: inner-spin-button;
 364     display: inline-block;
 365     -webkit-user-select: none;
 366 }
 367
 368 input::-webkit-outer-spin-button {
 369     -webkit-appearance: outer-spin-button;
 370     display: inline-block;
 371     margin-left: 2px;
 372     -webkit-user-select: none;
 373 }
 374
 375 input::-webkit-input-speech-button {
 376     -webkit-appearance: input-speech-button;
 377     display: inline-block;
 378 }
 379
 380 textarea {
 381     -webkit-appearance: textarea;
 382     background-color: white;
 383     border: 1px solid;
 384     -webkit-rtl-ordering: logical;
 385     -webkit-user-select: text;
 386     -webkit-box-orient: vertical;
 387     resize: auto;
 388     cursor: auto;
 389     padding: 2px;
 390     white-space: pre-wrap;
 391     word-wrap: break-word;
 392 }
 393
 394 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
 395     color: darkGray;
 396 }
 397
 398 input[type="password"] {
 399     -webkit-text-security: disc !important;
 400 }
 401
 402 input[type="hidden"], input[type="image"], input[type="file"] {
 403     -webkit-appearance: initial;
 404     padding: initial;
 405     background-color: initial;
 406     border: initial;
 407 }
 408
 409 input[type="file"] {
 410     -webkit-box-align: baseline;
 411     text-align: start !important;
 412 }
 413
 414 input:-webkit-autofill {
 415     background-color: #FAFFBD !important;
 416     background-image:none !important;
 417 }
 418
 419 input[type="radio"], input[type="checkbox"] {
 420     margin: 3px 0.5ex;
 421     padding: initial;
 422     background-color: initial;
 423     border: initial;
 424 }
 425
 426 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button {
 427     -webkit-appearance: push-button;
 428     white-space: pre
 429 }
 430
 431 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
 432     -webkit-box-align: center;
 433     text-align: center;
 434     cursor: default;
 435     color: ButtonText;
 436     padding: 2px 6px 3px 6px;
 437     border: 2px outset ButtonFace;
 438     background-color: ButtonFace;
 439     -webkit-box-sizing: border-box
 440 }
 441
 442 input[type="range"] {
 443     -webkit-appearance: slider-horizontal;
 444     padding: initial;
 445     border: initial;
 446     margin: 2px;
 447 }
 448
 449 input[type="range"]::-webkit-slider-thumb {
 450     -webkit-appearance: sliderthumb-horizontal;
 451 }
 452
 453 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
 454 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
 455 select:disabled, keygen:disabled, optgroup:disabled, option:disabled, datagrid:disabled {
 456     color: GrayText
 457 }
 458
 459 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
 460     border-style: inset
 461 }
 462
 463 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 {
 464     border-style: outset
 465 }
 466
 467 area, param {
 468     display: none
 469 }
 470
 471 input[type="checkbox"] {
 472     -webkit-appearance: checkbox;
 473     -webkit-box-sizing: border-box;
 474 }
 475
 476 input[type="radio"] {
 477     -webkit-appearance: radio;
 478     -webkit-box-sizing: border-box;
 479 }
 480
 481 keygen, select {
 482     -webkit-appearance: menulist;
 483     -webkit-box-sizing: border-box;
 484     -webkit-box-align: center;
 485     border: 1px solid;
 486     -webkit-border-radius: 5px;
 487     white-space: pre;
 488     -webkit-rtl-ordering: logical;
 489     color: black;
 490     background-color: white;
 491     cursor: default;
 492 }
 493
 494 select[size],
 495 select[multiple],
 496 select[size][multiple] {
 497     -webkit-appearance: listbox;
 498     -webkit-box-align: start;
 499     border: 1px inset gray;
 500     -webkit-border-radius: initial;
 501     white-space: initial;
 502 }
 503
 504 select[size="0"],
 505 select[size="1"] {
 506     -webkit-appearance: menulist;
 507     -webkit-box-align: center;
 508     border: 1px solid;
 509     -webkit-border-radius: 5px;
 510     white-space: pre;
 511 }
 512
 513 datalist {
 514     display: none;
 515 }
 516
 517 optgroup {
 518     font-weight: bolder;
 519 }
 520
 521 option {
 522     font-weight: normal;
 523 }
 524
 525 /* meter */
 526
 527 meter {
 528     -webkit-appearance: meter;
 529     display: inline-block;
 530     height: 1em;
 531     width: 5em;
 532     vertical-align: -0.2em;
 533 }
 534
 535 meter::-webkit-meter {
 536     -webkit-appearance: meter;
 537 }
 538
 539 meter::-webkit-meter-horizontal-bar {
 540     -webkit-appearance: meter;
 541     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));
 542 }
 543
 544 meter::-webkit-meter-vertical-bar {
 545     -webkit-appearance: meter;
 546     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));
 547 }
 548
 549 meter::-webkit-meter-horizontal-optimum-value {
 550     -webkit-appearance: meter;
 551     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));
 552 }
 553
 554 meter::-webkit-meter-horizontal-suboptimal-value {
 555     -webkit-appearance: meter;
 556     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));
 557 }
 558
 559 meter::-webkit-meter-horizontal-even-less-good-value {
 560     -webkit-appearance: meter;
 561     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));
 562 }
 563
 564 meter::-webkit-meter-vertical-optimum-value {
 565     -webkit-appearance: meter;
 566     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));
 567 }
 568
 569 meter::-webkit-meter-vertical-suboptimal-value {
 570     -webkit-appearance: meter;
 571     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));
 572 }
 573
 574 meter::-webkit-meter-vertical-even-less-good-value {
 575     -webkit-appearance: meter;
 576     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));
 577 }
 578
 579 /* progress */
 580
 581 progress {
 582     -webkit-appearance: progress-bar;
 583     display: inline-block;
 584     height: 1em;
 585     width: 10em;
 586     vertical-align: -0.2em;
 587     background-color: gray;
 588 }
 589
 590 progress::-webkit-progress-bar-value {
 591     -webkit-appearance: progress-bar;
 592     background-color: green;
 593 }
 594
 595 /* datagrid */
 596
 597 datagrid {
 598     height: 150px; /* We don't use width:300px in CSS, since we want width:intrinsic and width:min-intrinsic to reset to 300 properly. */
 599     -webkit-appearance: datagrid;
 600     -webkit-box-sizing: border-box;
 601     -webkit-rtl-ordering: logical;
 602     color: black;
 603     background-color: white;
 604     cursor: default;
 605     border: 1px inset gray;
 606     white-space: initial;
 607 }
 608
 609 /* inline elements */
 610
 611 u, ins {
 612     text-decoration: underline
 613 }
 614
 615 strong, b {
 616     font-weight: bolder
 617 }
 618
 619 i, cite, em, var, address {
 620     font-style: italic
 621 }
 622
 623 tt, code, kbd, samp {
 624     font-family: monospace
 625 }
 626
 627 pre, xmp, plaintext, listing {
 628     display: block;
 629     font-family: monospace;
 630     white-space: pre;
 631     margin: 1__qem 0
 632 }
 633
 634 mark {
 635     background-color: yellow;
 636     color: black
 637 }
 638
 639 big {
 640     font-size: larger
 641 }
 642
 643 small {
 644     font-size: smaller
 645 }
 646
 647 s, strike, del {
 648     text-decoration: line-through
 649 }
 650
 651 sub {
 652     vertical-align: sub;
 653     font-size: smaller
 654 }
 655
 656 sup {
 657     vertical-align: super;
 658     font-size: smaller
 659 }
 660
 661 nobr {
 662     white-space: nowrap
 663 }
 664
 665 /* states */
 666
 667 :focus {
 668     outline: auto 5px -webkit-focus-ring-color
 669 }
 670
 671 /* Read-only text fields do not show a focus ring but do still receive focus */
 672 html:focus, body:focus, input[readonly]:focus {
 673     outline: none
 674 }
 675
 676 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
 677     outline-offset: -2px
 678 }
 679
 680 input[type="button"]:focus,
 681 input[type="checkbox"]:focus,
 682 input[type="file"]:focus,
 683 input[type="hidden"]:focus,
 684 input[type="image"]:focus,
 685 input[type="radio"]:focus,
 686 input[type="reset"]:focus,
 687 input[type="search"]:focus,
 688 input[type="submit"]:focus,
 689 input[type="file"]:focus::-webkit-file-upload-button {
 690     outline-offset: 0
 691 }
 692
 693 a:-webkit-any-link {
 694     color: -webkit-link;
 695     text-decoration: underline;
 696     cursor: auto;
 697 }
 698
 699 a:-webkit-any-link:active {
 700     color: -webkit-activelink
 701 }
 702
 703 /* HTML5 ruby elements */
 704
 705 ruby, rt {
 706     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
 707     line-height: normal;
 708 }
 709
 710 ruby > rt {
 711     display: block;
 712     font-size: 60%; /* make slightly larger than 50% for better readability */
 713     text-align: center;
 714 }
 715
 716 ruby > rp {
 717     display: none;
 718 }
 719
 720 /* other elements */
 721
 722 noframes {
 723     display: none
 724 }
 725
 726 frameset, frame {
 727     display: block
 728 }
 729
 730 frameset {
 731     border-color: inherit
 732 }
 733
 734 iframe {
 735     border: 2px inset
 736 }
 737
 738 /* page */
 739
 740 @page {
 741     /* FIXME: Define the right default values for page properties. */
 742     size: auto;
 743     margin: auto;
 744     padding: 0px;
 745     border-width: 0px;
 746 }
 747
 748 /* noscript is handled internally, as it depends on settings */