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