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 nav {
  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 textarea {
 363     -webkit-appearance: textarea;
 364     background-color: white;
 365     border: 1px solid;
 366     -webkit-rtl-ordering: logical;
 367     -webkit-user-select: text;
 368     -webkit-box-orient: vertical;
 369     resize: auto;
 370     cursor: auto;
 371     padding: 2px;
 372     white-space: pre-wrap;
 373     word-wrap: break-word;
 374 }
 375
 376 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
 377     color: darkGray;
 378 }
 379
 380 input[type="password"] {
 381     -webkit-text-security: disc !important;
 382 }
 383
 384 input[type="hidden"], input[type="image"], input[type="file"] {
 385     -webkit-appearance: initial;
 386     padding: initial;
 387     background-color: initial;
 388     border: initial;
 389 }
 390
 391 input[type="file"] {
 392     -webkit-box-align: baseline;
 393     text-align: start !important;
 394 }
 395
 396 input:-webkit-autofill {
 397     background-color: #FAFFBD !important;
 398     background-image:none !important;
 399 }
 400
 401 input[type="radio"], input[type="checkbox"] {
 402     margin: 3px 0.5ex;
 403     padding: initial;
 404     background-color: initial;
 405     border: initial;
 406 }
 407
 408 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button {
 409     -webkit-appearance: push-button;
 410     white-space: pre
 411 }
 412
 413 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
 414     -webkit-box-align: center;
 415     text-align: center;
 416     cursor: default;
 417     color: ButtonText;
 418     padding: 2px 6px 3px 6px;
 419     border: 2px outset ButtonFace;
 420     background-color: ButtonFace;
 421     -webkit-box-sizing: border-box
 422 }
 423
 424 input[type="range"] {
 425     -webkit-appearance: slider-horizontal;
 426     padding: initial;
 427     border: initial;
 428     margin: 2px;
 429 }
 430
 431 input[type="range"]::-webkit-slider-thumb {
 432     -webkit-appearance: sliderthumb-horizontal;
 433 }
 434
 435 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
 436 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
 437 select:disabled, keygen:disabled, optgroup:disabled, option:disabled, datagrid:disabled {
 438     color: GrayText
 439 }
 440
 441 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
 442     border-style: inset
 443 }
 444
 445 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 {
 446     border-style: outset
 447 }
 448
 449 area, param {
 450     display: none
 451 }
 452
 453 input[type="checkbox"] {
 454     -webkit-appearance: checkbox;
 455     -webkit-box-sizing: border-box;
 456 }
 457
 458 input[type="radio"] {
 459     -webkit-appearance: radio;
 460     -webkit-box-sizing: border-box;
 461 }
 462
 463 keygen, select {
 464     -webkit-appearance: menulist;
 465     -webkit-box-sizing: border-box;
 466     -webkit-box-align: center;
 467     border: 1px solid;
 468     -webkit-border-radius: 5px;
 469     white-space: pre;
 470     -webkit-rtl-ordering: logical;
 471     color: black;
 472     background-color: white;
 473     cursor: default;
 474 }
 475
 476 select[size],
 477 select[multiple],
 478 select[size][multiple] {
 479     -webkit-appearance: listbox;
 480     -webkit-box-align: start;
 481     border: 1px inset gray;
 482     -webkit-border-radius: initial;
 483     white-space: initial;
 484 }
 485
 486 select[size="0"],
 487 select[size="1"] {
 488     -webkit-appearance: menulist;
 489     -webkit-box-align: center;
 490     border: 1px solid;
 491     -webkit-border-radius: 5px;
 492     white-space: pre;
 493 }
 494
 495 datalist {
 496     display: none;
 497 }
 498
 499 optgroup {
 500     font-weight: bolder;
 501 }
 502
 503 option {
 504     font-weight: normal;
 505 }
 506
 507 /* datagrid */
 508
 509 datagrid {
 510     height: 150px; /* We don't use width:300px in CSS, since we want width:intrinsic and width:min-intrinsic to reset to 300 properly. */
 511     -webkit-appearance: datagrid;
 512     -webkit-box-sizing: border-box;
 513     -webkit-rtl-ordering: logical;
 514     color: black;
 515     background-color: white;
 516     cursor: default;
 517     border: 1px inset gray;
 518     white-space: initial;
 519 }
 520
 521 /* inline elements */
 522
 523 u, ins {
 524     text-decoration: underline
 525 }
 526
 527 strong, b {
 528     font-weight: bolder
 529 }
 530
 531 i, cite, em, var, address {
 532     font-style: italic
 533 }
 534
 535 tt, code, kbd, samp {
 536     font-family: monospace
 537 }
 538
 539 pre, xmp, plaintext, listing {
 540     display: block;
 541     font-family: monospace;
 542     white-space: pre;
 543     margin: 1__qem 0
 544 }
 545
 546 big {
 547     font-size: larger
 548 }
 549
 550 small {
 551     font-size: smaller
 552 }
 553
 554 s, strike, del {
 555     text-decoration: line-through
 556 }
 557
 558 sub {
 559     vertical-align: sub;
 560     font-size: smaller
 561 }
 562
 563 sup {
 564     vertical-align: super;
 565     font-size: smaller
 566 }
 567
 568 nobr {
 569     white-space: nowrap
 570 }
 571
 572 /* states */
 573
 574 :focus {
 575     outline: auto 5px -webkit-focus-ring-color
 576 }
 577
 578 /* Read-only text fields do not show a focus ring but do still receive focus */
 579 html:focus, body:focus, input[readonly]:focus {
 580     outline: none
 581 }
 582
 583 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
 584     outline-offset: -2px
 585 }
 586
 587 input[type="button"]:focus,
 588 input[type="checkbox"]:focus,
 589 input[type="file"]:focus,
 590 input[type="hidden"]:focus,
 591 input[type="image"]:focus,
 592 input[type="radio"]:focus,
 593 input[type="reset"]:focus,
 594 input[type="search"]:focus,
 595 input[type="submit"]:focus,
 596 input[type="file"]:focus::-webkit-file-upload-button {
 597     outline-offset: 0
 598 }
 599
 600 a:-webkit-any-link {
 601     color: -webkit-link;
 602     text-decoration: underline;
 603     cursor: auto;
 604 }
 605
 606 a:-webkit-any-link:active {
 607     color: -webkit-activelink
 608 }
 609
 610 /* HTML5 ruby elements */
 611
 612 ruby, rt {
 613     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
 614 }
 615
 616 ruby > rt {
 617     display: block;
 618     font-size: 60%; /* make slightly larger than 50% for better readability */
 619     text-align: center;
 620 }
 621
 622 ruby > rp {
 623     display: none;
 624 }
 625
 626 /* other elements */
 627
 628 noframes {
 629     display: none
 630 }
 631
 632 frameset, frame {
 633     display: block
 634 }
 635
 636 frameset {
 637     border-color: inherit
 638 }
 639
 640 iframe {
 641     border: 2px inset
 642 }
 643
 644 /* noscript is handled internally, as it depends on settings */