88e83b0f1631b530c02ef57a5b47e880eb522130
[WebKit-https.git] / Source / 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, 2009, 2010, 2011 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     -webkit-margin-before: 1__qem;
65     -webkit-margin-after: 1__qem;
66     -webkit-margin-start: 0;
67     -webkit-margin-end: 0;
68 }
69
70 div {
71     display: block
72 }
73
74 layer {
75     display: block
76 }
77
78 article, aside, footer, header, hgroup, nav, section {
79     display: block
80 }
81
82 marquee {
83     display: inline-block;
84     overflow: -webkit-marquee
85 }
86
87 address {
88     display: block
89 }
90
91 blockquote {
92     display: block;
93     -webkit-margin-before: 1__qem;
94     -webkit-margin-after: 1em;
95     -webkit-margin-start: 40px;
96     -webkit-margin-end: 40px;
97 }
98
99 figcaption {
100     display: block
101 }
102
103 figure {
104     display: block;
105     -webkit-margin-before: 1em;
106     -webkit-margin-after: 1em;
107     -webkit-margin-start: 40px;
108     -webkit-margin-end: 40px;
109 }
110
111 q {
112     display: inline
113 }
114
115 q:before {
116     content: open-quote;
117 }
118
119 q:after {
120     content: close-quote;
121 }
122
123 center {
124     display: block;
125     /* special centering to be able to emulate the html4/netscape behaviour */
126     text-align: -webkit-center
127 }
128
129 hr {
130     display: block;
131     -webkit-margin-before: 0.5em;
132     -webkit-margin-after: 0.5em;
133     -webkit-margin-start: auto;
134     -webkit-margin-end: auto;
135     border-style: inset;
136     border-width: 1px
137 }
138
139 map {
140     display: inline
141 }
142
143 /* heading elements */
144
145 h1 {
146     display: block;
147     font-size: 2em;
148     -webkit-margin-before: 0.67__qem;
149     -webkit-margin-after: 0.67em;
150     -webkit-margin-start: 0;
151     -webkit-margin-end: 0;
152     font-weight: bold
153 }
154
155 :-webkit-any(article,aside,nav,section) h1 {
156     font-size: 1.5em;
157     -webkit-margin-before: 0.83__qem;
158     -webkit-margin-after: 0.83em;
159 }
160
161 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
162     font-size: 1.17em;
163     -webkit-margin-before: 1__qem;
164     -webkit-margin-after: 1em;
165 }
166
167 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
168     font-size: 1.00em;
169     -webkit-margin-before: 1.33__qem;
170     -webkit-margin-after: 1.33em;
171 }
172
173 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
174     font-size: .83em;
175     -webkit-margin-before: 1.67__qem;
176     -webkit-margin-after: 1.67em;
177 }
178
179 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
180     font-size: .67em;
181     -webkit-margin-before: 2.33__qem;
182     -webkit-margin-after: 2.33em;
183 }
184
185 h2 {
186     display: block;
187     font-size: 1.5em;
188     -webkit-margin-before: 0.83__qem;
189     -webkit-margin-after: 0.83em;
190     -webkit-margin-start: 0;
191     -webkit-margin-end: 0;
192     font-weight: bold
193 }
194
195 h3 {
196     display: block;
197     font-size: 1.17em;
198     -webkit-margin-before: 1__qem;
199     -webkit-margin-after: 1em;
200     -webkit-margin-start: 0;
201     -webkit-margin-end: 0;
202     font-weight: bold
203 }
204
205 h4 {
206     display: block;
207     -webkit-margin-before: 1.33__qem;
208     -webkit-margin-after: 1.33em;
209     -webkit-margin-start: 0;
210     -webkit-margin-end: 0;
211     font-weight: bold
212 }
213
214 h5 {
215     display: block;
216     font-size: .83em;
217     -webkit-margin-before: 1.67__qem;
218     -webkit-margin-after: 1.67em;
219     -webkit-margin-start: 0;
220     -webkit-margin-end: 0;
221     font-weight: bold
222 }
223
224 h6 {
225     display: block;
226     font-size: .67em;
227     -webkit-margin-before: 2.33__qem;
228     -webkit-margin-after: 2.33em;
229     -webkit-margin-start: 0;
230     -webkit-margin-end: 0;
231     font-weight: bold
232 }
233
234 /* tables */
235
236 table {
237     display: table;
238     border-collapse: separate;
239     border-spacing: 2px;
240     border-color: gray
241 }
242
243 thead {
244     display: table-header-group;
245     vertical-align: middle;
246     border-color: inherit
247 }
248
249 tbody {
250     display: table-row-group;
251     vertical-align: middle;
252     border-color: inherit
253 }
254
255 tfoot {
256     display: table-footer-group;
257     vertical-align: middle;
258     border-color: inherit
259 }
260
261 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
262 table > tr {
263     vertical-align: middle;
264 }
265
266 col {
267     display: table-column
268 }
269
270 colgroup {
271     display: table-column-group
272 }
273
274 tr {
275     display: table-row;
276     vertical-align: inherit;
277     border-color: inherit
278 }
279
280 td, th {
281     display: table-cell;
282     vertical-align: inherit
283 }
284
285 th {
286     font-weight: bold
287 }
288
289 caption {
290     display: table-caption;
291     text-align: -webkit-center
292 }
293
294 /* lists */
295
296 ul, menu, dir {
297     display: block;
298     list-style-type: disc;
299     -webkit-margin-before: 1__qem;
300     -webkit-margin-after: 1em;
301     -webkit-margin-start: 0;
302     -webkit-margin-end: 0;
303     -webkit-padding-start: 40px
304 }
305
306 ol {
307     display: block;
308     list-style-type: decimal;
309     -webkit-margin-before: 1__qem;
310     -webkit-margin-after: 1em;
311     -webkit-margin-start: 0;
312     -webkit-margin-end: 0;
313     -webkit-padding-start: 40px
314 }
315
316 li {
317     display: list-item
318 }
319
320 ul ul, ol ul {
321     list-style-type: circle
322 }
323
324 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
325     list-style-type: square
326 }
327
328 dd {
329     display: block;
330     -webkit-margin-start: 40px
331 }
332
333 dl {
334     display: block;
335     -webkit-margin-before: 1__qem;
336     -webkit-margin-after: 1em;
337     -webkit-margin-start: 0;
338     -webkit-margin-end: 0;
339 }
340
341 dt {
342     display: block
343 }
344
345 ol ul, ul ol, ul ul, ol ol {
346     -webkit-margin-before: 0;
347     -webkit-margin-after: 0
348 }
349
350 /* form elements */
351
352 form {
353     display: block;
354     margin-top: 0__qem;
355 }
356
357 label {
358     cursor: default;
359 }
360
361 legend {
362     display: block;
363     -webkit-padding-start: 2px;
364     -webkit-padding-end: 2px;
365     border: none
366 }
367
368 fieldset {
369     display: block;
370     -webkit-margin-start: 2px;
371     -webkit-margin-end: 2px;
372     -webkit-padding-before: 0.35em;
373     -webkit-padding-start: 0.75em;
374     -webkit-padding-end: 0.75em;
375     -webkit-padding-after: 0.625em;
376     border: 2px groove ThreeDFace
377 }
378
379 button {
380     -webkit-appearance: button;
381 }
382
383 /* Form controls don't go vertical. */
384 input, textarea, keygen, select, button, isindex, meter, progress {
385     -webkit-block-flow: tb !important;
386 }
387
388 input, textarea, keygen, select, button, isindex {
389     margin: 0__qem;
390     font: -webkit-small-control;
391     color: initial;
392     letter-spacing: normal;
393     word-spacing: normal;
394     line-height: normal;
395     text-transform: none;
396     text-indent: 0;
397     text-shadow: none;
398     display: inline-block;
399     text-align: -webkit-auto;
400 }
401
402 input[type="hidden"] {
403     display: none
404 }
405
406 input, input[type="password"], input[type="search"], isindex {
407     -webkit-appearance: textfield;
408     padding: 1px;
409     background-color: white;
410     border: 2px inset;
411     -webkit-rtl-ordering: logical;
412     -webkit-user-select: text;
413     cursor: auto;
414 }
415
416 input[type="search"] {
417     -webkit-appearance: searchfield;
418     -webkit-box-sizing: border-box;
419 }
420
421 input[type="search"]::-webkit-search-cancel-button {
422     -webkit-appearance: searchfield-cancel-button;
423     display: inline-block;
424 }
425
426 input[type="search"]::-webkit-search-decoration {
427     -webkit-appearance: searchfield-decoration;
428     display: inline-block;
429 }
430
431 input[type="search"]::-webkit-search-results-decoration {
432     -webkit-appearance: searchfield-results-decoration;
433     display: inline-block;
434 }
435
436 input[type="search"]::-webkit-search-results-button {
437     -webkit-appearance: searchfield-results-button;
438     display: inline-block;
439 }
440
441 #if defined(ENABLE_DATALIST) && ENABLE_DATALIST
442 input::-webkit-input-list-button {
443     -webkit-appearance: list-button;
444     display: inline-block;
445 }
446 #endif
447
448 input::-webkit-inner-spin-button {
449     -webkit-appearance: inner-spin-button;
450     display: inline-block;
451     position: relative;
452     cursor: default;
453     vertical-align: top;
454     -webkit-user-select: none;
455 }
456
457 input::-webkit-outer-spin-button {
458     -webkit-appearance: outer-spin-button;
459     display: inline-block;
460     position: relative;
461     cursor: default;
462     margin-left: 2px;
463     vertical-align: top;
464     -webkit-user-select: none;
465 }
466
467 #if defined(ENABLE_INPUT_SPEECH) && ENABLE_INPUT_SPEECH
468 input::-webkit-input-speech-button {
469     -webkit-appearance: -webkit-input-speech-button;
470     display: inline-block;
471     vertical-align: top;
472 }
473 #endif
474
475 keygen, select {
476     -webkit-border-radius: 5px;
477 }
478
479 keygen::-webkit-keygen-select {
480     margin: 0px;
481 }
482
483 textarea {
484     -webkit-appearance: textarea;
485     background-color: white;
486     border: 1px solid;
487     -webkit-rtl-ordering: logical;
488     -webkit-user-select: text;
489     -webkit-box-orient: vertical;
490     resize: auto;
491     cursor: auto;
492     padding: 2px;
493     white-space: pre-wrap;
494     word-wrap: break-word;
495 }
496
497 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
498     color: darkGray;
499 }
500
501 input[type="password"] {
502     -webkit-text-security: disc !important;
503 }
504
505 input[type="hidden"], input[type="image"], input[type="file"] {
506     -webkit-appearance: initial;
507     padding: initial;
508     background-color: initial;
509     border: initial;
510 }
511
512 input[type="file"] {
513     -webkit-box-align: baseline;
514     text-align: start !important;
515 }
516
517 input:-webkit-autofill {
518     background-color: #FAFFBD !important;
519     background-image:none !important;
520     color: #000000 !important;
521 }
522
523 input[type="radio"], input[type="checkbox"] {
524     margin: 3px 0.5ex;
525     padding: initial;
526     background-color: initial;
527     border: initial;
528 }
529
530 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button {
531     -webkit-appearance: push-button;
532     white-space: pre
533 }
534
535 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
536     -webkit-box-align: center;
537     text-align: center;
538     cursor: default;
539     color: ButtonText;
540     padding: 2px 6px 3px 6px;
541     border: 2px outset ButtonFace;
542     background-color: ButtonFace;
543     -webkit-box-sizing: border-box
544 }
545
546 input[type="range"] {
547     -webkit-appearance: slider-horizontal;
548     padding: initial;
549     border: initial;
550     margin: 2px;
551 }
552
553 input[type="range"]::-webkit-slider-thumb {
554     -webkit-appearance: sliderthumb-horizontal;
555     display: block;
556 }
557
558 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
559 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
560 select:disabled, keygen:disabled, optgroup:disabled, option:disabled {
561     color: GrayText
562 }
563
564 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
565     border-style: inset
566 }
567
568 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 {
569     border-style: outset
570 }
571
572 area, param {
573     display: none
574 }
575
576 input[type="checkbox"] {
577     -webkit-appearance: checkbox;
578     -webkit-box-sizing: border-box;
579 }
580
581 input[type="radio"] {
582     -webkit-appearance: radio;
583     -webkit-box-sizing: border-box;
584 }
585
586 select {
587     -webkit-appearance: menulist;
588     -webkit-box-sizing: border-box;
589     -webkit-box-align: center;
590     border: 1px solid;
591     white-space: pre;
592     -webkit-rtl-ordering: logical;
593     color: black;
594     background-color: white;
595     cursor: default;
596 }
597
598 select[size],
599 select[multiple],
600 select[size][multiple] {
601     -webkit-appearance: listbox;
602     -webkit-box-align: start;
603     border: 1px inset gray;
604     -webkit-border-radius: initial;
605     white-space: initial;
606 }
607
608 select[size="0"],
609 select[size="1"] {
610     -webkit-appearance: menulist;
611     -webkit-box-align: center;
612     border: 1px solid;
613     -webkit-border-radius: 5px;
614     white-space: pre;
615 }
616
617 optgroup {
618     font-weight: bolder;
619 }
620
621 option {
622     font-weight: normal;
623 }
624
625 output {
626     display: inline;
627 }
628
629 /* form validation message bubble */
630
631 ::-webkit-validation-bubble {
632     display: inline-block;
633     z-index: 2147483647;
634     position: absolute;
635     opacity: 0.95;
636     line-height: 0;
637     margin: 0;
638     -webkit-text-security: none;
639     -webkit-transition: opacity 05.5s ease;
640 }
641
642 ::-webkit-validation-bubble-message {
643     display: block;
644     position: relative;
645     top: -4px;
646     font: message-box;
647     color: black;
648     min-width: 50px;
649     max-width: 200px;
650     border: solid 2px #400;
651     background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
652     padding: 8px;
653     -webkit-border-radius: 8px;
654     -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
655         inset -2px -2px 1px #d0c4c4,
656         inset 2px 2px 1px white;
657     line-height: normal;
658     white-space: normal;
659     z-index: 2147483644;
660 }
661
662 ::-webkit-validation-bubble-arrow {
663     display: inline-block;
664     position: relative;
665     left: 32px;
666     width: 16px;
667     height: 16px;
668     background-color: #f8ecec;
669     border-width: 2px 0 0 2px;
670     border-style: solid;
671     border-color: #400;
672     box-shadow: inset 2px 2px 1px white;
673     -webkit-transform-origin: 0 0;
674     -webkit-transform: rotate(45deg);
675     z-index: 2147483645;
676 }
677
678 ::-webkit-validation-bubble-arrow-clipper {
679     display: block;
680     overflow: hidden;
681     height: 16px;
682 }
683
684 #if defined(ENABLE_METER_TAG) && ENABLE_METER_TAG
685 /* meter */
686
687 meter {
688     -webkit-appearance: meter;
689     -webkit-box-sizing: border-box;
690     display: inline-box;
691     height: 1em;
692     width: 5em;
693     vertical-align: -0.2em;
694 }
695
696 meter::-webkit-meter-bar {
697     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));
698     height: 100%;
699     width: 100%;
700     -webkit-box-sizing: border-box;
701 }
702
703 meter::-webkit-meter-optimum-value {
704     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));
705     height: 100%;
706     -webkit-box-sizing: border-box;
707 }
708
709 meter::-webkit-meter-suboptimum-value {
710     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));
711     height: 100%;
712     -webkit-box-sizing: border-box;
713 }
714
715 meter::-webkit-meter-even-less-good-value {
716     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));
717     height: 100%;
718     -webkit-box-sizing: border-box;
719 }
720 #endif
721
722 #if defined(ENABLE_PROGRESS_TAG) && ENABLE_PROGRESS_TAG
723 /* progress */
724
725 progress {
726     -webkit-appearance: progress-bar;
727     -webkit-box-sizing: border-box;
728     display: inline-block;
729     height: 1em;
730     width: 10em;
731     vertical-align: -0.2em;
732 }
733
734 progress::-webkit-progress-bar {
735     background-color: gray;
736     height: 100%;
737     width: 100%;
738     -webkit-box-sizing: border-box;
739 }
740
741 progress::-webkit-progress-value {
742     background-color: green;
743     height: 100%;
744     width: 50%; /* should be removed later */
745     -webkit-box-sizing: border-box;
746 }
747 #endif
748
749 /* inline elements */
750
751 u, ins {
752     text-decoration: underline
753 }
754
755 strong, b {
756     font-weight: bolder
757 }
758
759 i, cite, em, var, address {
760     font-style: italic
761 }
762
763 tt, code, kbd, samp {
764     font-family: monospace
765 }
766
767 pre, xmp, plaintext, listing {
768     display: block;
769     font-family: monospace;
770     white-space: pre;
771     margin: 1__qem 0
772 }
773
774 mark {
775     background-color: yellow;
776     color: black
777 }
778
779 big {
780     font-size: larger
781 }
782
783 small {
784     font-size: smaller
785 }
786
787 s, strike, del {
788     text-decoration: line-through
789 }
790
791 sub {
792     vertical-align: sub;
793     font-size: smaller
794 }
795
796 sup {
797     vertical-align: super;
798     font-size: smaller
799 }
800
801 nobr {
802     white-space: nowrap
803 }
804
805 /* states */
806
807 :focus { 
808     outline: auto 5px -webkit-focus-ring-color
809 }
810
811 /* Read-only text fields do not show a focus ring but do still receive focus */
812 html:focus, body:focus, input[readonly]:focus { 
813     outline: none
814 }
815   
816 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
817     outline-offset: -2px
818 }
819
820 input[type="button"]:focus,
821 input[type="checkbox"]:focus,
822 input[type="file"]:focus,
823 input[type="hidden"]:focus,
824 input[type="image"]:focus,
825 input[type="radio"]:focus,
826 input[type="reset"]:focus,
827 input[type="search"]:focus,
828 input[type="submit"]:focus,
829 input[type="file"]:focus::-webkit-file-upload-button {
830     outline-offset: 0
831 }
832     
833 a:-webkit-any-link {
834     color: -webkit-link;
835     text-decoration: underline;
836     cursor: auto;
837 }
838
839 a:-webkit-any-link:active {
840     color: -webkit-activelink
841 }
842
843 /* HTML5 ruby elements */
844
845 ruby, rt {
846     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
847 }
848
849 rt {
850     line-height: normal;
851     -webkit-text-emphasis: none;
852 }
853
854 ruby > rt {
855     display: block;
856     font-size: 50%;
857     text-align: -webkit-auto;
858 }
859
860 ruby > rp {
861     display: none;
862 }
863
864 /* other elements */
865
866 noframes {
867     display: none
868 }
869
870 frameset, frame {
871     display: block
872 }
873
874 frameset {
875     border-color: inherit
876 }
877
878 iframe {
879     border: 2px inset
880 }
881
882 details {
883     display: block
884 }
885
886 summary {
887     display: block
888 }
889
890 summary::-webkit-details-marker {
891     display: inline-block;
892     width: 0.66em;
893     height: 0.66em;
894     margin-right: 0.4em;
895 }
896
897 /* page */
898
899 @page {
900     /* FIXME: Define the right default values for page properties. */
901     size: auto;
902     margin: auto;
903     padding: 0px;
904     border-width: 0px;
905 }
906
907 /* noscript is handled internally, as it depends on settings. */
908