WebCore:
[WebKit-https.git] / WebCore / css / html4.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 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 marquee {
76     display: inline-block;
77     overflow: -webkit-marquee
78 }
79
80 address {
81     display: block
82 }
83
84 blockquote {
85     display: block;
86     margin: 1__qem 40px 1em 40px
87 }
88
89 q {
90     display: inline
91 }
92
93 q:before {
94     content: '"'
95     /* FIXME: content: open-quote; */
96 }
97
98 q:after {
99     content: '"'
100     /* FIXME: content: close-quote; */
101 }
102
103 center {
104     display: block;
105     /* special centering to be able to emulate the html4/netscape behaviour */
106     text-align: -webkit-center
107 }
108
109 hr {
110     display: block;
111     margin: 0.5em auto;
112     border-style: inset;
113     border-width: 1px
114 }
115
116 map {
117     display: inline
118 }
119
120 /* heading elements */
121
122 h1 {
123     display: block;
124     font-size: 2em;
125     margin: .67__qem 0 .67em 0;
126     font-weight: bold
127 }
128
129 h2 {
130     display: block;
131     font-size: 1.5em;
132     margin: .83__qem 0 .83em 0;
133     font-weight: bold
134 }
135
136 h3 {
137     display: block;
138     font-size: 1.17em;
139     margin: 1__qem 0 1em 0;
140     font-weight: bold
141 }
142
143 h4 {
144     display: block;
145     margin: 1.33__qem 0 1.33em 0;
146     font-weight: bold
147 }
148
149 h5 {
150     display: block;
151     font-size: .83em;
152     margin: 1.67__qem 0 1.67em 0;
153     font-weight: bold
154 }
155
156 h6 {
157     display: block;
158     font-size: .67em;
159     margin: 2.33__qem 0 2.33em 0;
160     font-weight: bold
161 }
162
163 /* tables */
164
165 table {
166     display: table;
167     border-collapse: separate;
168     border-spacing: 2px;
169     border-color: gray
170 }
171
172 table[align="center"] {
173     margin-left: auto;
174     margin-right: auto
175 }
176
177 thead {
178     display: table-header-group;
179     vertical-align: middle;
180     border-color: inherit
181 }
182
183 tbody {
184     display: table-row-group;
185     vertical-align: middle;
186     border-color: inherit
187 }
188
189 tfoot {
190     display: table-footer-group;
191     vertical-align: middle;
192     border-color: inherit
193 }
194
195 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
196 table > tr {
197     vertical-align: middle;
198 }
199
200 col {
201     display: table-column
202 }
203
204 colgroup {
205     display: table-column-group
206 }
207
208 tr {
209     display: table-row;
210     vertical-align: inherit;
211     border-color: inherit
212 }
213
214 td, th {
215     display: table-cell;
216     vertical-align: inherit
217 }
218
219 th {
220     font-weight: bold
221 }
222
223 caption {
224     display: table-caption;
225     text-align: -webkit-center
226 }
227
228 /* lists */
229
230 ul, menu, dir {
231     display: block;
232     list-style-type: disc;
233     margin: 1__qem 0 1em 0;
234     -webkit-padding-start: 40px
235 }
236
237 ol {
238     display: block;
239     list-style-type: decimal;
240     margin: 1__qem 0 1em 0;
241     -webkit-padding-start: 40px
242 }
243
244 li {
245     display: list-item
246 }
247
248 ul ul, ol ul {
249     list-style-type: circle
250 }
251
252 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
253     list-style-type: square
254 }
255
256 dd {
257     display: block;
258     -webkit-margin-start: 40px
259 }
260
261 dl {
262     display: block;
263     margin: 1__qem 0 1em 0
264 }
265
266 dt {
267     display: block
268 }
269
270 ol ul, ul ol, ul ul, ol ol {
271     margin-top: 0;
272     margin-bottom: 0
273 }
274
275 /* form elements */
276
277 form {
278     display: block;
279     margin: 0__qem 0 1em 0
280 }
281
282 label {
283     cursor: default;
284 }
285
286 legend {
287     display: block;
288     padding-left: 2px;
289     padding-right: 2px;
290     border: none
291 }
292
293 fieldset {
294     display: block;
295     margin-left: 2px;
296     margin-right: 2px;
297     padding: 0.35em 0.75em 0.625em;
298     border: 2px groove ThreeDFace
299 }
300
301 button {
302     -webkit-appearance: button;
303 }
304
305 input, textarea, keygen, select, button, isindex {
306     margin: 0__qem;
307     font: -webkit-small-control;
308     color: initial;
309     letter-spacing: normal;
310     word-spacing: normal;
311     line-height: normal;
312     text-transform: none;
313     text-indent: 0;
314     text-shadow: none;
315     display: inline-block;
316     text-align: -webkit-auto;
317 }
318
319 input[type="hidden"] {
320     display: none
321 }
322
323 input, input[type="password"], input[type="search"], isindex {
324     -webkit-appearance: textfield;
325     padding: 1px;
326     background-color: white;
327     border: 2px inset;
328     -webkit-rtl-ordering: logical;
329     -webkit-user-select: text;
330     cursor: auto;
331 }
332
333 input[type="search"] {
334     -webkit-appearance: searchfield;
335     -webkit-box-sizing: border-box;
336 }
337
338 input[type="search"]::-webkit-search-cancel-button {
339     -webkit-appearance: searchfield-cancel-button;
340 }
341
342 input[type="search"]::-webkit-search-decoration {
343     -webkit-appearance: searchfield-decoration;
344 }
345
346 input[type="search"]::-webkit-search-results-decoration {
347     -webkit-appearance: searchfield-results-decoration;
348 }
349
350 input[type="search"]::-webkit-search-results-button {
351     -webkit-appearance: searchfield-results-button;
352 }
353
354 textarea {
355     -webkit-appearance: textarea;
356     background-color: white;
357     border: 1px solid;
358     -webkit-rtl-ordering: logical;
359     -webkit-user-select: text;
360     -webkit-box-orient: vertical;
361     resize: auto;
362     cursor: auto;
363 }
364
365 input[type="password"] {
366     -webkit-text-security: disc !important;
367 }
368
369 input[type="hidden"], input[type="image"], input[type="file"] {
370     -webkit-appearance: initial;
371     padding: initial;
372     background-color: initial;
373     border: initial;
374 }
375
376 input[type="file"] {
377     -webkit-box-align: baseline;
378 }
379
380 input:-webkit-autofill {
381     background-color: #FAFFBD !important;
382     background-image:none !important;
383 }
384
385 input[type="radio"], input[type="checkbox"] {
386     margin: 3px 0.5ex;
387     padding: initial;
388     background-color: initial;
389     border: initial;
390 }
391
392 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button {
393     -webkit-appearance: push-button;
394     white-space: pre
395 }
396
397 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
398     -webkit-box-align: center;
399     text-align: center;
400     cursor: default;
401     color: ButtonText;
402     padding: 2px 6px 3px 6px;
403     border: 2px outset ButtonFace;
404     background-color: ButtonFace;
405     -webkit-box-sizing: border-box
406 }
407
408 input[type="range"] {
409     -webkit-appearance: slider-horizontal;
410     padding: initial;
411     border: initial;
412     margin: 2px;
413 }
414
415 input[type="range"]::-webkit-slider-thumb {
416     -webkit-appearance: sliderthumb-horizontal;
417 }
418
419 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="file"]:disabled::-webkit-file-upload-button, button:disabled, select:disabled, keygen:disabled, optgroup:disabled, option:disabled {
420     color: GrayText
421 }
422
423 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
424     border-style: inset
425 }
426
427 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 {
428     border-style: outset
429 }
430
431 area, param {
432     display: none
433 }
434
435 input[type="checkbox"] {
436     -webkit-appearance: checkbox;
437     -webkit-box-sizing: border-box;
438 }
439
440 input[type="radio"] {
441     -webkit-appearance: radio;
442     -webkit-box-sizing: border-box;
443 }
444
445 keygen, select {
446     -webkit-appearance: menulist;
447     -webkit-box-sizing: border-box;
448     -webkit-box-align: center;
449     border: 1px solid;
450     -webkit-border-radius: 5px;
451     white-space: pre;
452     -webkit-rtl-ordering: logical;
453     color: black;
454     background-color: white;
455     cursor: default;
456 }
457
458 select[size],
459 select[multiple],
460 select[size][multiple] {
461     -webkit-appearance: listbox;
462     -webkit-box-align: start;
463     border: 1px inset gray;
464     -webkit-border-radius: initial;
465     white-space: initial;
466 }
467
468 select[size="0"],
469 select[size="1"] {
470     -webkit-appearance: menulist;
471     -webkit-box-align: center;
472     border: 1px solid;
473     -webkit-border-radius: 5px;
474     white-space: pre;
475 }
476
477 optgroup {
478     font-weight: bolder;
479 }
480
481 option {
482     font-weight: normal;
483 }
484
485 /* inline elements */
486
487 u, ins {
488     text-decoration: underline
489 }
490
491 strong, b {
492     font-weight: bolder
493 }
494
495 i, cite, em, var, address {
496     font-style: italic
497 }
498
499 tt, code, kbd, samp {
500     font-family: monospace
501 }
502
503 pre, xmp, plaintext, listing {
504     display: block;
505     font-family: monospace;
506     white-space: pre;
507     margin: 1__qem 0
508 }
509
510 big {
511     font-size: larger
512 }
513
514 small {
515     font-size: smaller
516 }
517
518 s, strike, del {
519     text-decoration: line-through
520 }
521
522 sub {
523     vertical-align: sub;
524     font-size: smaller
525 }
526
527 sup {
528     vertical-align: super;
529     font-size: smaller
530 }
531
532 nobr {
533     white-space: nowrap
534 }
535
536 /* states */
537
538 :focus { 
539     outline: auto 5px -webkit-focus-ring-color
540 }
541
542 /* Read-only text fields do not show a focus ring but do still receive focus */
543 html:focus, body:focus, input[readonly]:focus { 
544     outline: none
545 }
546   
547 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
548     outline-offset: -2px
549 }
550
551 input[type="button"]:focus,
552 input[type="checkbox"]:focus,
553 input[type="file"]:focus,
554 input[type="hidden"]:focus,
555 input[type="image"]:focus,
556 input[type="radio"]:focus,
557 input[type="reset"]:focus,
558 input[type="search"]:focus,
559 input[type="submit"]:focus,
560 input[type="file"]:focus::-webkit-file-upload-button {
561     outline-offset: 0
562 }
563     
564 a:-webkit-any-link {
565     color: -webkit-link;
566     text-decoration: underline;
567     cursor: auto;
568 }
569
570 a:-webkit-any-link:active {
571     color: -webkit-activelink
572 }
573
574 /* other elements */
575
576 noframes {
577     display: none
578 }
579
580 frameset, frame {
581     display: block
582 }
583
584 frameset {
585     border-color: inherit
586 }
587
588 iframe {
589     border: 2px inset
590 }
591
592 /* media controls */
593 /* FIXME this is not the final styling */
594
595 audio {
596     width: 234px;
597     height: 69px;
598 }
599
600 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
601     position: absolute;
602     left: 0; right: 0; top: 0; bottom: 0;
603     margin: auto;
604     width: 230px;
605     height: 65px;
606     border: 2px solid #eee;
607     background: rgba(0,0,0,0.6);
608     -webkit-border-radius: 10px;
609     -webkit-user-select: none;
610 }
611
612 video::-webkit-media-controls-panel {
613     margin-bottom: 10%;
614 }
615
616 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
617     -webkit-appearance: none;
618     position: absolute;
619     margin: 5px auto auto auto;
620     left: 0; right: 0; top: 0; bottom: 0;
621     border: 0;
622     color: white;
623     background: transparent;
624     cursor: pointer;
625     text-align: center; 
626     font-size: 25pt;
627     width: 2em;
628     height: 1.2em;
629 }
630
631 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
632     -webkit-appearance: slider-horizontal;
633     position: absolute;
634     margin: auto auto 5px 10px;
635     left: 0; right: 0; top: 0; bottom: 1px;
636     width: 60%;
637     height: 12px;
638     border: 2px solid white;
639     -webkit-border-radius: 6px;
640     z-index: 1;
641 }
642
643 audio::-webkit-media-controls-time-display, video::-webkit-media-controls-time-display {
644     position: absolute;
645     margin: auto 5px 5px 5px;
646     left: 0; right: 0; top: 0; bottom: 0px;
647     height: 1.2em;
648     text-align: right;
649     padding-right: 5px;
650     -webkit-border-radius: 7px;
651     background-color: #eee;
652     color: black;
653     font-size: 10pt;
654 }
655
656 /* noscript is handled internally, as it depends on settings */