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