<attachment> shouldn't use "user-select: all"
[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-2011, 2014 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, link, meta, script, style, title {
32     display: none
33 }
34
35 /* generic block-level elements */
36
37 body {
38     display: block;
39     margin: 8px
40 }
41
42 p {
43     display: block;
44     -webkit-margin-before: 1__qem;
45     -webkit-margin-after: 1__qem;
46     -webkit-margin-start: 0;
47     -webkit-margin-end: 0;
48 }
49
50 address, article, aside, div, footer, header, hgroup, layer, main, nav, section {
51     display: block
52 }
53
54 marquee {
55     display: inline-block;
56     overflow: -webkit-marquee
57 }
58
59 blockquote {
60     display: block;
61     -webkit-margin-before: 1__qem;
62     -webkit-margin-after: 1em;
63     -webkit-margin-start: 40px;
64     -webkit-margin-end: 40px;
65 }
66
67 figcaption {
68     display: block
69 }
70
71 figure {
72     display: block;
73     -webkit-margin-before: 1em;
74     -webkit-margin-after: 1em;
75     -webkit-margin-start: 40px;
76     -webkit-margin-end: 40px;
77 }
78
79 q {
80     display: inline
81 }
82
83 q::before {
84     content: open-quote;
85 }
86
87 q::after {
88     content: close-quote;
89 }
90
91 center {
92     display: block;
93     /* special centering to be able to emulate the html4/netscape behaviour */
94     text-align: -webkit-center
95 }
96
97 hr {
98     display: block;
99     -webkit-margin-before: 0.5em;
100     -webkit-margin-after: 0.5em;
101     -webkit-margin-start: auto;
102     -webkit-margin-end: auto;
103     border-style: inset;
104     border-width: 1px
105 }
106
107 video {
108     object-fit: contain;
109 }
110
111 /* heading elements */
112
113 h1 {
114     display: block;
115     font-size: 2em;
116     -webkit-margin-before: 0.67__qem;
117     -webkit-margin-after: 0.67em;
118     -webkit-margin-start: 0;
119     -webkit-margin-end: 0;
120     font-weight: bold
121 }
122
123 :-webkit-any(article,aside,nav,section) h1 {
124     font-size: 1.5em;
125     -webkit-margin-before: 0.83__qem;
126     -webkit-margin-after: 0.83em;
127 }
128
129 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
130     font-size: 1.17em;
131     -webkit-margin-before: 1__qem;
132     -webkit-margin-after: 1em;
133 }
134
135 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
136     font-size: 1.00em;
137     -webkit-margin-before: 1.33__qem;
138     -webkit-margin-after: 1.33em;
139 }
140
141 :-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 {
142     font-size: .83em;
143     -webkit-margin-before: 1.67__qem;
144     -webkit-margin-after: 1.67em;
145 }
146
147 :-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 {
148     font-size: .67em;
149     -webkit-margin-before: 2.33__qem;
150     -webkit-margin-after: 2.33em;
151 }
152
153 h2 {
154     display: block;
155     font-size: 1.5em;
156     -webkit-margin-before: 0.83__qem;
157     -webkit-margin-after: 0.83em;
158     -webkit-margin-start: 0;
159     -webkit-margin-end: 0;
160     font-weight: bold
161 }
162
163 h3 {
164     display: block;
165     font-size: 1.17em;
166     -webkit-margin-before: 1__qem;
167     -webkit-margin-after: 1em;
168     -webkit-margin-start: 0;
169     -webkit-margin-end: 0;
170     font-weight: bold
171 }
172
173 h4 {
174     display: block;
175     -webkit-margin-before: 1.33__qem;
176     -webkit-margin-after: 1.33em;
177     -webkit-margin-start: 0;
178     -webkit-margin-end: 0;
179     font-weight: bold
180 }
181
182 h5 {
183     display: block;
184     font-size: .83em;
185     -webkit-margin-before: 1.67__qem;
186     -webkit-margin-after: 1.67em;
187     -webkit-margin-start: 0;
188     -webkit-margin-end: 0;
189     font-weight: bold
190 }
191
192 h6 {
193     display: block;
194     font-size: .67em;
195     -webkit-margin-before: 2.33__qem;
196     -webkit-margin-after: 2.33em;
197     -webkit-margin-start: 0;
198     -webkit-margin-end: 0;
199     font-weight: bold
200 }
201
202 /* tables */
203
204 table {
205     display: table;
206     border-collapse: separate;
207     border-spacing: 2px;
208     border-color: gray
209 }
210
211 thead {
212     display: table-header-group;
213     vertical-align: middle;
214     border-color: inherit
215 }
216
217 tbody {
218     display: table-row-group;
219     vertical-align: middle;
220     border-color: inherit
221 }
222
223 tfoot {
224     display: table-footer-group;
225     vertical-align: middle;
226     border-color: inherit
227 }
228
229 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
230 table > tr {
231     vertical-align: middle;
232 }
233
234 col {
235     display: table-column
236 }
237
238 colgroup {
239     display: table-column-group
240 }
241
242 tr {
243     display: table-row;
244     vertical-align: inherit;
245     border-color: inherit
246 }
247
248 td, th {
249     display: table-cell;
250     vertical-align: inherit
251 }
252
253 th {
254     font-weight: bold
255 }
256
257 caption {
258     display: table-caption;
259     text-align: -webkit-center
260 }
261
262 /* lists */
263
264 ul, menu, dir {
265     display: block;
266     list-style-type: disc;
267     -webkit-margin-before: 1__qem;
268     -webkit-margin-after: 1em;
269     -webkit-margin-start: 0;
270     -webkit-margin-end: 0;
271     -webkit-padding-start: 40px
272 }
273
274 ol {
275     display: block;
276     list-style-type: decimal;
277     -webkit-margin-before: 1__qem;
278     -webkit-margin-after: 1em;
279     -webkit-margin-start: 0;
280     -webkit-margin-end: 0;
281     -webkit-padding-start: 40px
282 }
283
284 li {
285     display: list-item;
286     text-align: -webkit-match-parent;
287 }
288
289 ul ul, ol ul {
290     list-style-type: circle
291 }
292
293 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
294     list-style-type: square
295 }
296
297 dd {
298     display: block;
299     -webkit-margin-start: 40px
300 }
301
302 dl {
303     display: block;
304     -webkit-margin-before: 1__qem;
305     -webkit-margin-after: 1em;
306     -webkit-margin-start: 0;
307     -webkit-margin-end: 0;
308 }
309
310 dt {
311     display: block
312 }
313
314 ol ul, ul ol, ul ul, ol ol {
315     -webkit-margin-before: 0;
316     -webkit-margin-after: 0
317 }
318
319 /* form elements */
320
321 form {
322     display: block;
323     margin-top: 0__qem;
324 }
325
326 label {
327     cursor: default;
328 }
329
330 legend {
331     display: block;
332     -webkit-padding-start: 2px;
333     -webkit-padding-end: 2px;
334     border: none
335 }
336
337 fieldset {
338     display: block;
339     -webkit-margin-start: 2px;
340     -webkit-margin-end: 2px;
341     -webkit-padding-before: 0.35em;
342     -webkit-padding-start: 0.75em;
343     -webkit-padding-end: 0.75em;
344     -webkit-padding-after: 0.625em;
345     border: 2px groove ThreeDFace;
346     min-width: -webkit-min-content;
347 }
348
349 button {
350     -webkit-appearance: button;
351 }
352
353 /* Form controls don't go vertical. */
354 input, textarea, keygen, select, button, isindex, meter, progress {
355     -webkit-writing-mode: horizontal-tb !important;
356 }
357
358 input, textarea, keygen, select, button, isindex {
359     margin: 0__qem;
360 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
361     font: -webkit-small-control;
362 #endif
363     color: initial;
364     letter-spacing: normal;
365     word-spacing: normal;
366     line-height: normal;
367     text-transform: none;
368     text-indent: 0;
369     text-shadow: none;
370     display: inline-block;
371     text-align: start;
372 }
373
374 input[type="hidden"] {
375     display: none
376 }
377
378 input,
379 input:matches([type="password"], [type="search"]),
380 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
381 textarea,
382 input[type="range"],
383 #endif
384 isindex {
385     -webkit-appearance: textfield;
386     background-color: white;
387 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
388     border-radius: 5px;
389     font: 11px Helvetica, -webkit-pictograph;
390     border: 1px solid #4c4c4c;
391     padding: 0.2em 0.5em 0.3em 0.5em;
392 #else
393     border: 2px inset;
394     padding: 1px;
395 #endif
396     -webkit-rtl-ordering: logical;
397     -webkit-user-select: text;
398     cursor: auto;
399 }
400
401 input[type="search"] {
402     -webkit-appearance: searchfield;
403     box-sizing: border-box;
404 }
405
406 input::-webkit-textfield-decoration-container {
407     display: -webkit-flex;
408     -webkit-align-items: center;
409     content: none !important;
410 }
411
412 input[type="search"]::-webkit-textfield-decoration-container {
413     direction: ltr;
414 }
415
416 input::-webkit-clear-button {
417     -webkit-appearance: searchfield-cancel-button;
418     display: inline-block;
419     -webkit-flex: none;
420     margin-left: 2px;
421 }
422
423 input[type="search"]::-webkit-search-cancel-button {
424     -webkit-appearance: searchfield-cancel-button;
425     display: block;
426     -webkit-flex: none;
427     -webkit-align-self: flex-start;
428     margin: auto 0;
429 }
430
431 input[type="search"]::-webkit-search-decoration {
432     -webkit-appearance: searchfield-decoration;
433     display: block;
434     -webkit-flex: none;
435     -webkit-align-self: flex-start;
436     margin: auto 0;
437 }
438
439 input[type="search"]::-webkit-search-results-decoration {
440     -webkit-appearance: searchfield-results-decoration;
441     display: block;
442     -webkit-flex: none;
443     -webkit-align-self: flex-start;
444     margin: auto 0;
445 }
446
447 input[type="search"]::-webkit-search-results-button {
448     -webkit-appearance: searchfield-results-button;
449     display: block;
450     -webkit-flex: none;
451 }
452
453 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
454 datalist {
455     display: none;
456 }
457 #endif
458
459 #if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
460 input[type="date"] {
461     -webkit-align-items: center;
462     -webkit-appearance: menulist-button;
463     display: -webkit-inline-flex;
464     overflow: hidden;
465 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
466     width: 10em;
467 #endif
468 }
469 #endif
470 #if defined(ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE) && ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE
471 input[type="datetime"] {
472     -webkit-align-items: center;
473     -webkit-appearance: menulist-button;
474     display: -webkit-inline-flex;
475     overflow: hidden;
476 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
477     width: 10em;
478 #endif
479 }
480 #endif
481 #if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
482 input[type="datetime-local"] {
483     -webkit-align-items: center;
484     -webkit-appearance: menulist-button;
485     display: -webkit-inline-flex;
486     overflow: hidden;
487 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
488     width: 10em;
489 #endif
490 }
491 #endif
492 #if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
493 input[type="month"] {
494     -webkit-align-items: center;
495     -webkit-appearance: menulist-button;
496     display: -webkit-inline-flex;
497     overflow: hidden;
498 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
499     width: 10em;
500 #endif
501 }
502 #endif
503 #if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
504 input[type="time"] {
505     -webkit-align-items: center;
506     -webkit-appearance: menulist-button;
507     display: -webkit-inline-flex;
508     overflow: hidden;
509 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
510     width: 10em;
511 #endif
512 }
513 #endif
514 #if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
515 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
516 input[type="week"] {
517     -webkit-align-items: center;
518     -webkit-appearance: menulist-button;
519     display: -webkit-inline-flex;
520     overflow: hidden;
521     width: 10em;
522 }
523 #endif
524 #endif
525
526 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
527 input::-webkit-date-and-time-value {
528     margin: 1px 24px 1px 4px;
529     white-space: pre;
530 }
531 #endif
532
533 input::-webkit-inner-spin-button {
534     -webkit-appearance: inner-spin-button;
535     display: block;
536     position: relative;
537     cursor: default;
538     /* This height property is ignored for input type "number" and others which
539      * use RenderTextControlSingleLine as renderer which sets height of spin
540      * button in layout(). */
541     height: 1.5em;
542     vertical-align: top;
543     -webkit-flex: none;
544     -webkit-user-select: none;
545 }
546
547 input::-webkit-auto-fill-button {
548     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="black" d="M12,0H4C1.8,0,0,1.8,0,4v8c0,2.2,1.8,4,4,4h8c2.2,0,4-1.8,4-4V4C16,1.8,14.2,0,12,0z M9.6,7.1l0,1.2l-1,1L9.4,10l-0.7,0.7 l0.7,0.7l-0.7,0.7l0.7,0.7l-1.2,1.2c-0.2,0.2-0.3,0.2-0.5,0l-1-1l0-6C5.7,6.6,5.1,5.6,5.1,4.5c0-1.6,1.3-3,3-3c1.7,0,3,1.3,3,3 C11.1,5.6,10.5,6.6,9.6,7.1z"/><circle fill="black" cx="8.1" cy="3.6" r="1"/></svg>');
549     align-self:stretch;
550     opacity: .4;
551     -webkit-flex: none;
552     -webkit-user-select: none;
553 }
554
555 input::-webkit-auto-fill-button:hover {
556     opacity: .85;
557 }
558
559 input::-webkit-auto-fill-button:active {
560     opacity: 1;
561 }
562
563 input::-webkit-caps-lock-indicator {
564     -webkit-appearance: caps-lock-indicator;
565     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path fill="black" fill-opacity="0.4" d="M12.5 0.5A 4 4 0 0 1 16.5 4.5L 16.5 12.5A 4 4 0 0 1 12.5 16.5L 4.5 16.5A 4 4 0 0 1 0.5 12.5L 0.5 4.5A 4 4 0 0 1 4.5 0.5L 12.5 0.5M 8.5 2L 4 7L 6.25 7L 6.25 10.25L 10.75 10.25L 10.75 7L 13 7L 8.5 2M 10.75 12L 6.25 12L 6.25 14.25L 10.75 14.25L 10.75 12"/></svg>');
566     align-self:stretch;
567     -webkit-flex: none;
568     -webkit-user-select: none;
569 }
570
571 keygen, select {
572     border-radius: 5px;
573 }
574
575 keygen::-webkit-keygen-select {
576     margin: 0px;
577 }
578
579 textarea {
580     -webkit-appearance: textarea;
581 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
582     background-color: white;
583     border: 1px solid;
584     -webkit-rtl-ordering: logical;
585     -webkit-user-select: text;
586 #else
587     -webkit-nbsp-mode: space;
588     -webkit-line-break: after-white-space;
589 #endif
590     -webkit-flex-direction: column;
591     resize: auto;
592     cursor: auto;
593     padding: 2px;
594     white-space: pre-wrap;
595     word-wrap: break-word;
596 }
597
598 ::-webkit-input-placeholder {
599     -webkit-text-security: none;
600     color: darkGray;
601     pointer-events: none !important;
602 }
603
604 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder {
605     white-space: pre;
606     word-wrap: normal;
607     overflow: hidden;
608 }
609
610 input[type="password"] {
611     -webkit-text-security: disc !important;
612 }
613
614 input:matches([type="hidden"], [type="image"], [type="file"]) {
615     -webkit-appearance: initial;
616     padding: initial;
617     background-color: initial;
618     border: initial;
619 }
620
621 input[type="file"] {
622     -webkit-align-items: baseline;
623     color: inherit;
624     text-align: start !important;
625 }
626
627 input:-webkit-autofill {
628 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
629     background-color: #F7EC87 !important;
630 #else
631     background-color: #FAFFBD !important;
632 #endif
633     background-image:none !important;
634     color: #000000 !important;
635 }
636
637 input:matches([type="radio"], [type="checkbox"]) {
638     margin: 3px 2px;
639 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
640     border: 1px solid #4c4c4c;
641     box-sizing: border-box;
642 #else
643     padding: initial;
644     background-color: initial;
645     border: initial;
646 #endif
647 }
648
649 input:matches([type="button"], [type="submit"], [type="reset"]) {
650     -webkit-appearance: push-button;
651     white-space: pre
652 }
653
654 input[type="file"]::-webkit-file-upload-button {
655     -webkit-appearance: push-button;
656     white-space: nowrap;
657     margin: 0;
658     font-size: inherit;
659 }
660
661 input:matches([type="button"], [type="submit"], [type="reset"]), input[type="file"]::-webkit-file-upload-button, button {
662     -webkit-align-items: flex-start;
663     text-align: center;
664     cursor: default;
665     color: ButtonText;
666 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
667     padding: 2px 6px 3px 6px;
668     border: 2px outset ButtonFace;
669     background-color: ButtonFace;
670 #else
671     padding: 0 1.0em;
672     border: 1px solid #4c4c4c;
673     /* We want to be as close to background-color:transparent as possible without actually being transparent. */
674     background-color: rgba(255, 255, 255, 0.01);
675     font: 11px Helvetica;
676 #endif
677     box-sizing: border-box
678 }
679
680 input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::-webkit-file-upload-button:active, button:active {
681     color: ActiveButtonText;
682 }
683
684 input[type="range"] {
685     -webkit-appearance: slider-horizontal;
686     padding: initial;
687     border: initial;
688     margin: 2px;
689     color: #909090;
690 }
691
692 input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
693     -webkit-flex: 1;
694     box-sizing: border-box;
695     display: -webkit-flex;
696     -webkit-align-contents: center;
697 }
698
699 input[type="range"]::-webkit-slider-runnable-track {
700     -webkit-flex: 1;
701     -webkit-align-self: center;
702
703     box-sizing: border-box;
704     display: block;
705 }
706
707 input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
708     -webkit-appearance: sliderthumb-horizontal;
709     box-sizing: border-box;
710     display: block;
711 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
712     background-color: white;
713     border: 1px solid rgb(66, 66, 66);
714     padding: 0px;
715 #endif
716 }
717
718 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
719 input[type="range"]::-webkit-slider-thumb:active {
720     background-color: black;
721 }
722
723 input:disabled, textarea:disabled {
724     opacity: 0.4;
725 }
726
727 input[readonly], textarea[readonly] {
728     border-color: rgb(188, 188, 188);
729 }
730
731 textarea::-webkit-input-placeholder {
732     text-indent: 2px;
733 }
734 #endif
735
736 input:matches([type="button"], [type="submit"], [type="reset"]):disabled,
737 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
738 select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
739 select[disabled]>option {
740     color: GrayText
741 }
742
743 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
744 input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]:active::-webkit-file-upload-button, button:active {
745     border-style: inset
746 }
747
748 input:matches([type="button"], [type="submit"], [type="reset"]):active:disabled,
749 input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
750     border-style: outset
751 }
752 #endif
753
754 area, param {
755     display: none
756 }
757
758 input[type="checkbox"] {
759     -webkit-appearance: checkbox;
760 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
761     box-sizing: border-box;
762 #else
763     border-radius: 5px;
764     width: 16px;
765     height: 16px;
766     padding: 0px;
767     /* We want to be as close to background:transparent as possible without actually being transparent */
768     background-color: rgba(255, 255, 255, 0.01);
769 #endif
770 }
771
772 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
773 input[type="radio"] {
774     -webkit-appearance: radio;
775     border-radius: 8px;
776     width: 16px;
777     height: 16px;
778     padding: 0px;
779     /* We want to be as close to background:transparent as possible without actually being transparent */
780     background-color: rgba(255, 255, 255, 0.01);
781 }
782
783 input:matches([type="checkbox"], [type="radio"]):checked {
784     background:rgba(0, 0, 0, 0.8);
785     border-color:rgba(255, 255, 255, 0.0);
786 }
787
788 input:matches([type="checkbox"], [type="radio"]):checked:disabled {
789     opacity:0.4;
790     background:rgba(0, 0, 0, 0.8);
791 }
792 #endif
793
794 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
795 input[type="radio"] {
796     -webkit-appearance: radio;
797     box-sizing: border-box;
798 }
799 #endif
800
801 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
802 select:focus {
803     border-color: rgb(17, 46, 135);
804 }
805 #endif
806
807 #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
808
809 input[type="color"] {
810     -webkit-appearance: square-button;
811     width: 44px;
812     height: 23px;
813 }
814
815 input[type="color"]::-webkit-color-swatch-wrapper {
816     display:-webkit-flex;
817     padding: 4px 2px;
818     box-sizing: border-box;
819     width: 100%;
820     height: 100%
821 }
822
823 input[type="color"]::-webkit-color-swatch {
824     background-color: #000000;
825     border: 1px solid #777777;
826     -webkit-flex: 1;
827 }
828
829 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
830
831 input[type="color"][list] {
832     -webkit-appearance: menulist;
833     width: 88px;
834     height: 23px;
835 }
836
837 input[type="color"][list]::-webkit-color-swatch-wrapper {
838     padding-left: 8px;
839     padding-right: 24px;
840 }
841
842 input[type="color"][list]::-webkit-color-swatch {
843     border-color: #000000;
844 }
845
846 #endif // defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
847
848 #endif // defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
849
850 select {
851     box-sizing: border-box;
852 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
853     -webkit-appearance: menulist-button;
854     letter-spacing: normal;
855     word-spacing: normal;
856     line-height: normal;
857     border: 1px solid #4c4c4c;
858     /* We want to be as close to background:transparent as possible without actually being transparent */
859     background-color: rgba(255, 255, 255, 0.01);
860     font: 11px Helvetica;
861     padding: 0 0.4em 0 0.4em;
862 #else
863     -webkit-appearance: menulist;
864     border: 1px solid;
865     color: black;
866     background-color: white;
867 #endif
868     -webkit-align-items: center;
869     white-space: pre;
870     -webkit-rtl-ordering: logical;
871     cursor: default;
872 }
873
874 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
875 select:matches([size], [multiple], [size][multiple]) {
876     -webkit-appearance: listbox;
877     -webkit-align-items: flex-start;
878     border: 1px inset gray;
879     border-radius: initial;
880     white-space: initial;
881 }
882
883 select:matches([size="0"], [size="1"]) {
884     -webkit-appearance: menulist;
885     -webkit-align-items: center;
886     border: 1px solid;
887     border-radius: 5px;
888     white-space: pre;
889 }
890 #endif
891
892 optgroup {
893     font-weight: bolder;
894 }
895
896 option {
897     font-weight: normal;
898 }
899
900 output {
901     display: inline;
902 }
903
904 /* form validation message bubble */
905
906 ::-webkit-validation-bubble {
907     display: inline-block;
908     z-index: 2147483647;
909     position: absolute;
910     opacity: 0.95;
911     line-height: 0;
912     margin: 0;
913     -webkit-text-security: none;
914     -webkit-transition: opacity 05.5s ease;
915 }
916
917 ::-webkit-validation-bubble-message {
918     display: -webkit-flex;
919     position: relative;
920     top: -4px;
921     font: message-box;
922     color: black;
923     min-width: 50px;
924     max-width: 200px;
925     border: solid 2px #400;
926     background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
927     padding: 8px;
928     border-radius: 8px;
929     -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
930         inset -2px -2px 1px #d0c4c4,
931         inset 2px 2px 1px white;
932     line-height: normal;
933     white-space: normal;
934     z-index: 2147483644;
935 }
936
937 ::-webkit-validation-bubble-text-block {
938     -webkit-flex: 1;
939 }
940
941 ::-webkit-validation-bubble-heading {
942     font-weight: bold;
943 }
944
945 ::-webkit-validation-bubble-arrow {
946     display: inline-block;
947     position: relative;
948     left: 32px;
949     width: 16px;
950     height: 16px;
951     background-color: #f8ecec;
952     border-width: 2px 0 0 2px;
953     border-style: solid;
954     border-color: #400;
955     box-shadow: inset 2px 2px 1px white;
956     -webkit-transform-origin: 0 0;
957     -webkit-transform: rotate(45deg);
958     z-index: 2147483645;
959 }
960
961 ::-webkit-validation-bubble-arrow-clipper {
962     display: block;
963     overflow: hidden;
964     height: 16px;
965 }
966
967 #if defined(ENABLE_METER_ELEMENT) && ENABLE_METER_ELEMENT
968 /* meter */
969
970 meter {
971     -webkit-appearance: meter;
972     box-sizing: border-box;
973     display: inline-block;
974     height: 1em;
975     width: 5em;
976     vertical-align: -0.2em;
977 }
978
979 meter::-webkit-meter-inner-element {
980     -webkit-appearance: inherit;
981     box-sizing: inherit;
982     height: 100%;
983     width: 100%;
984 }
985
986 meter::-webkit-meter-bar {
987     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));
988     height: 100%;
989     width: 100%;
990     box-sizing: border-box;
991 }
992
993 meter::-webkit-meter-optimum-value {
994     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));
995     height: 100%;
996     box-sizing: border-box;
997 }
998
999 meter::-webkit-meter-suboptimum-value {
1000     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));
1001     height: 100%;
1002     box-sizing: border-box;
1003 }
1004
1005 meter::-webkit-meter-even-less-good-value {
1006     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));
1007     height: 100%;
1008     box-sizing: border-box;
1009 }
1010 #endif
1011
1012 /* progress */
1013
1014 progress {
1015     -webkit-appearance: progress-bar;
1016     box-sizing: border-box;
1017     display: inline-block;
1018     height: 1em;
1019     width: 10em;
1020     vertical-align: -0.2em;
1021 }
1022
1023 progress::-webkit-progress-inner-element {
1024     -webkit-appearance: inherit;
1025     box-sizing: inherit;
1026     height: 100%;
1027     width: 100%;
1028 }
1029
1030 progress::-webkit-progress-bar {
1031     background-color: gray;
1032     height: 100%;
1033     width: 100%;
1034     box-sizing: border-box;
1035 }
1036
1037 progress::-webkit-progress-value {
1038     background-color: green;
1039     height: 100%;
1040     width: 50%; /* should be removed later */
1041     box-sizing: border-box;
1042 }
1043
1044 /* inline elements */
1045
1046 u, ins {
1047     text-decoration: underline
1048 }
1049
1050 strong, b {
1051     font-weight: bold
1052 }
1053
1054 i, cite, em, var, address, dfn {
1055     font-style: italic
1056 }
1057
1058 tt, code, kbd, samp {
1059     font-family: monospace
1060 }
1061
1062 pre, xmp, plaintext, listing {
1063     display: block;
1064     font-family: monospace;
1065     white-space: pre;
1066     margin: 1__qem 0
1067 }
1068
1069 mark {
1070     background-color: yellow;
1071     color: black
1072 }
1073
1074 big {
1075     font-size: larger
1076 }
1077
1078 small {
1079     font-size: smaller
1080 }
1081
1082 s, strike, del {
1083     text-decoration: line-through
1084 }
1085
1086 sub {
1087     vertical-align: sub;
1088     font-size: smaller
1089 }
1090
1091 sup {
1092     vertical-align: super;
1093     font-size: smaller
1094 }
1095
1096 nobr {
1097     white-space: nowrap
1098 }
1099
1100 /* states */
1101
1102 :focus { 
1103     outline: auto 5px -webkit-focus-ring-color
1104 }
1105
1106 /* Read-only text fields do not show a focus ring but do still receive focus */
1107 html:focus, body:focus, input[readonly]:focus { 
1108     outline: none
1109 }
1110
1111 applet:focus, embed:focus, iframe:focus, object:focus {
1112     outline: none
1113 }
1114   
1115 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
1116     outline-offset: -2px
1117 }
1118
1119 input:matches([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="reset"], [type="search"], [type="submit"]):focus,
1120 input[type="file"]:focus::-webkit-file-upload-button {
1121     outline-offset: 0
1122 }
1123     
1124 a:-webkit-any-link {
1125     color: -webkit-link;
1126     text-decoration: underline;
1127     cursor: auto;
1128 }
1129
1130 a:-webkit-any-link:active {
1131     color: -webkit-activelink
1132 }
1133
1134 /* HTML5 ruby elements */
1135
1136 ruby, rt {
1137     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
1138 }
1139
1140 rt {
1141     line-height: normal;
1142     -webkit-text-emphasis: none;
1143 }
1144
1145 ruby > rt {
1146     display: block;
1147     font-size: -webkit-ruby-text;
1148     text-align: start;
1149 }
1150
1151 ruby > rp {
1152     display: none;
1153 }
1154
1155 /* other elements */
1156
1157 noframes {
1158     display: none
1159 }
1160
1161 frameset, frame {
1162     display: block
1163 }
1164
1165 frameset {
1166     border-color: inherit
1167 }
1168
1169 iframe {
1170     border: 2px inset
1171 }
1172
1173 details {
1174     display: block
1175 }
1176
1177 summary {
1178     display: block
1179 }
1180
1181 summary::-webkit-details-marker {
1182     display: inline-block;
1183     width: 0.66em;
1184     height: 0.66em;
1185     margin-right: 0.4em;
1186 }
1187
1188 #if defined(ENABLE_TEMPLATE_ELEMENT) && ENABLE_TEMPLATE_ELEMENT
1189 template {
1190     display: none
1191 }
1192 #endif
1193
1194 bdi, output {
1195     unicode-bidi: -webkit-isolate;
1196 }
1197
1198 bdo {
1199     unicode-bidi: bidi-override;
1200 }
1201
1202 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
1203 applet, embed, object, img {
1204     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1205 }
1206 :-webkit-any-link img {
1207     -webkit-tap-highlight-color: inherit;
1208 }
1209 #endif
1210
1211 #if defined(ENABLE_ATTACHMENT_ELEMENT) && ENABLE_ATTACHMENT_ELEMENT
1212 attachment {
1213     -webkit-appearance: attachment;
1214 }
1215 #endif
1216
1217 /* page */
1218
1219 @page {
1220     /* FIXME: Define the right default values for page properties. */
1221     size: auto;
1222     margin: auto;
1223     padding: 0px;
1224     border-width: 0px;
1225 }
1226
1227 /* noscript is handled internally, as it depends on settings. */
1228