dc27ff84e3d38a0fd448c785a0340c877a25d2dd
[WebKit-https.git] / 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 }
588
589 progress::-webkit-progress-bar {
590     -webkit-appearance: progress-bar;
591 }
592
593 /* datagrid */
594
595 datagrid {
596     height: 150px; /* We don't use width:300px in CSS, since we want width:intrinsic and width:min-intrinsic to reset to 300 properly. */
597     -webkit-appearance: datagrid;
598     -webkit-box-sizing: border-box;
599     -webkit-rtl-ordering: logical;
600     color: black;
601     background-color: white;
602     cursor: default;
603     border: 1px inset gray;
604     white-space: initial;
605 }
606
607 /* inline elements */
608
609 u, ins {
610     text-decoration: underline
611 }
612
613 strong, b {
614     font-weight: bolder
615 }
616
617 i, cite, em, var, address {
618     font-style: italic
619 }
620
621 tt, code, kbd, samp {
622     font-family: monospace
623 }
624
625 pre, xmp, plaintext, listing {
626     display: block;
627     font-family: monospace;
628     white-space: pre;
629     margin: 1__qem 0
630 }
631
632 big {
633     font-size: larger
634 }
635
636 small {
637     font-size: smaller
638 }
639
640 s, strike, del {
641     text-decoration: line-through
642 }
643
644 sub {
645     vertical-align: sub;
646     font-size: smaller
647 }
648
649 sup {
650     vertical-align: super;
651     font-size: smaller
652 }
653
654 nobr {
655     white-space: nowrap
656 }
657
658 /* states */
659
660 :focus { 
661     outline: auto 5px -webkit-focus-ring-color
662 }
663
664 /* Read-only text fields do not show a focus ring but do still receive focus */
665 html:focus, body:focus, input[readonly]:focus { 
666     outline: none
667 }
668   
669 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
670     outline-offset: -2px
671 }
672
673 input[type="button"]:focus,
674 input[type="checkbox"]:focus,
675 input[type="file"]:focus,
676 input[type="hidden"]:focus,
677 input[type="image"]:focus,
678 input[type="radio"]:focus,
679 input[type="reset"]:focus,
680 input[type="search"]:focus,
681 input[type="submit"]:focus,
682 input[type="file"]:focus::-webkit-file-upload-button {
683     outline-offset: 0
684 }
685     
686 a:-webkit-any-link {
687     color: -webkit-link;
688     text-decoration: underline;
689     cursor: auto;
690 }
691
692 a:-webkit-any-link:active {
693     color: -webkit-activelink
694 }
695
696 /* HTML5 ruby elements */
697
698 ruby, rt {
699     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
700     line-height: normal;
701 }
702
703 ruby > rt {
704     display: block;
705     font-size: 60%; /* make slightly larger than 50% for better readability */
706     text-align: center;
707 }
708
709 ruby > rp {
710     display: none;
711 }
712
713 /* other elements */
714
715 noframes {
716     display: none
717 }
718
719 frameset, frame {
720     display: block
721 }
722
723 frameset {
724     border-color: inherit
725 }
726
727 iframe {
728     border: 2px inset
729 }
730
731 /* page */
732
733 @page {
734     /* FIXME: Define the right default values for page properties. */
735     size: auto;
736     margin: 1in;
737 }
738
739 /* noscript is handled internally, as it depends on settings */