1/*
2https://html.spec.whatwg.org/multipage/#form-controls
3*/
4
5@namespace url(http://www.w3.org/1999/xhtml);
6
7/*
8FIXME: Uncomment this when :lang() is supported, or do something equivalent.
9@import url(quotes.css);
10*/
11
12[hidden], area, base, basefont, datalist, head, link, menu[type=popup i], meta,
13noembed, noframes, param, rp, script, source, style, template, track, title {
14  display: none;
15}
16
17embed[hidden] { display: inline; height: 0; width: 0; }
18
19/* FIXME: only if scripting is enabled */
20noscript { display: none !important; }
21
22input[type=hidden i] { display: none !important; }
23
24
25html, body { display: block; }
26
27body { margin: 8px; }
28
29
30address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
31legend, listing, main, p, plaintext, pre, summary, xmp {
32  display: block;
33}
34
35blockquote, figure, listing, p, plaintext, pre, xmp {
36  margin-top: 1em; margin-bottom: 1em;
37}
38
39blockquote, figure { margin-left: 40px; margin-right: 40px; }
40
41address { font-style: italic; }
42listing, plaintext, pre, xmp {
43  font-family: monospace; white-space: pre;
44}
45
46dialog:not([open]) { display: none; }
47dialog {
48  position: absolute;
49  left: 0; right: 0;
50  /* FIXME: support fit-content */
51  width: fit-content;
52  height: fit-content;
53  margin: auto;
54  border: solid;
55  padding: 1em;
56  background: white;
57  color: black;
58}
59/* FIXME: support ::backdrop */
60dialog::backdrop {
61  position: fixed;
62  top: 0; right: 0; bottom: 0; left: 0;
63  background: rgba(0,0,0,0.1);
64}
65
66/* for small devices, modal dialogs go full-screen */
67@media screen and (max-width: 540px) {
68  /* FIXME: support :modal */
69  dialog:modal {
70    top: 0;
71    width: auto;
72    margin: 1em;
73  }
74}
75
76
77cite, dfn, em, i, var { font-style: italic; }
78b, strong { font-weight: bolder; }
79code, kbd, samp, tt { font-family: monospace; }
80big { font-size: larger; }
81small { font-size: smaller; }
82
83sub { vertical-align: sub; }
84sup { vertical-align: super; }
85sub, sup { line-height: normal; font-size: smaller; }
86
87ruby { display: ruby; }
88rt { display: ruby-text; }
89
90/*
91 * All tag names that can be links are listed here, because applying pseudo-class selectors
92 * disables style sharing, so we want to apply pseudo-class selectors to as few elements as
93 * possible.
94 */
95a:link, area:link { color: #0000EE; }
96a:visited, area:visited { color: #551A8B; }
97a:link, a:visited,
98area:link, area:visited { text-decoration: underline; cursor: pointer; }
99a:link[rel~=help], a:visited[rel~=help],
100area:link[rel~=help], area:visited[rel~=help] { cursor: help; }
101
102/*
103 * FIXME: use `outline: auto;`
104 */
105a:focus, area:focus,
106input:focus, textarea:focus, button:focus { outline: thin dotted; }
107
108mark { background: yellow; color: black; }
109
110abbr[title], acronym[title] { text-decoration: dotted underline; }
111ins, u { text-decoration: underline; }
112del, s, strike { text-decoration: line-through; }
113blink { text-decoration: blink; }
114
115q::before { content: open-quote; }
116q::after { content: close-quote; }
117
118/*br { display-outside: newline; } /* this also has bidi implications */
119br::before { content: "\A"; white-space: pre }
120
121nobr { white-space: nowrap; }
122wbr { display-outside: break-opportunity; } /* this also has bidi implications */
123nobr wbr { white-space: normal; }
124
125
126[dir]:dir(ltr), bdi:dir(ltr), input[type=tel]:dir(ltr) { direction: ltr; }
127[dir]:dir(rtl), bdi:dir(rtl) { direction: rtl; }
128
129address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
130legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
131h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead,
132tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
133[dir=ltr i], [dir=rtl i], [dir=auto i] {
134  unicode-bidi: isolate;
135}
136
137bdo, bdo[dir] { unicode-bidi: isolate-override; }
138
139textarea[dir=auto i], pre[dir=auto i] { unicode-bidi: plaintext; }
140
141
142article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
143  display: block;
144}
145
146h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
147h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
148h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
149h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
150h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
151h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
152
153:matches(article, aside, nav, section) h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
154:matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
155:matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
156:matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
157:matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
158
159:matches(article, aside, nav, section) hgroup > h1 ~ h2 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
160:matches(article, aside, nav, section) :matches(article, aside, nav, section) hgroup > h1 ~ h2 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
161:matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) hgroup > h1 ~ h2 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
162:matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) hgroup > h1 ~ h2 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
163
164:matches(article, aside, nav, section) hgroup > h1 ~ h3 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
165:matches(article, aside, nav, section) :matches(article, aside, nav, section) hgroup > h1 ~ h3 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
166:matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) hgroup > h1 ~ h3 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
167
168:matches(article, aside, nav, section) hgroup > h1 ~ h4 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
169:matches(article, aside, nav, section) :matches(article, aside, nav, section) hgroup > h1 ~ h4 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
170
171:matches(article, aside, nav, section) hgroup > h1 ~ h5 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
172
173
174dir, dd, dl, dt, menu, ol, ul { display: block; }
175li { display: list-item; }
176
177dir, dl, menu, ol, ul { margin-top: 1em; margin-bottom: 1em; }
178
179:matches(dir, dl, menu, ol, ul) :matches(dir, dl, menu, ol, ul) {
180  margin-top: 0; margin-bottom: 0;
181}
182
183dd { margin-left: 40px; } /* FIXME: use margin-inline-start when supported */
184dir, menu, ol, ul { padding-left: 40px; } /* FIXME: use padding-inline-start when supported */
185
186ol { list-style-type: decimal; }
187
188dir, menu, ul { list-style-type: disc; }
189
190:matches(dir, menu, ol, ul) :matches(dir, menu, ul) {
191  list-style-type: circle;
192}
193
194:matches(dir, menu, ol, ul) :matches(dir, menu, ol, ul) :matches(dir, menu, ul) {
195  list-style-type: square;
196}
197
198
199table { display: table; }
200caption { display: table-caption; }
201colgroup, colgroup[hidden] { display: table-column-group; }
202col, col[hidden] { display: table-column; }
203thead, thead[hidden] { display: table-header-group; }
204tbody, tbody[hidden] { display: table-row-group; }
205tfoot, tfoot[hidden] { display: table-footer-group; }
206tr, tr[hidden] { display: table-row; }
207td, th, td[hidden], th[hidden] { display: table-cell; }
208
209colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
210tfoot[hidden], tr[hidden], td[hidden], th[hidden] {
211  visibility: collapse;
212}
213
214table {
215  box-sizing: border-box;
216  border-spacing: 2px;
217  border-collapse: separate;
218  text-indent: initial;
219}
220td, th { padding: 1px; }
221th { font-weight: bold; }
222
223thead, tbody, tfoot, table > tr { vertical-align: middle; }
224tr, td, th { vertical-align: inherit; }
225
226
227table, td, th { border-color: gray; }
228thead, tbody, tfoot, tr { border-color: inherit; }
229table:matches(
230  [rules=none i], [rules=groups i], [rules=rows i],
231  [rules=cols i], [rules=all i],
232  [frame=void i], [frame=above i], [frame=below i],
233  [frame=hsides i], [frame=lhs i], [frame=rhs i],
234  [frame=vsides i], [frame=box i], [frame=border i]
235),
236table:matches(
237  [rules=none i], [rules=groups i], [rules=rows i],
238  [rules=cols i], [rules=all i]
239) > tr > :matches(td, th),
240table:matches(
241  [rules=none i], [rules=groups i], [rules=rows i],
242  [rules=cols i], [rules=all i]
243) > :matches(thead, tbody, tfoot) > tr > :matches(td, th) {
244  border-color: black;
245}
246
247
248:matches(table, thead, tbody, tfoot, tr) > form {
249  display: none !important;
250}
251
252
253input, select, option, optgroup, button, textarea, keygen {
254  text-indent: initial;
255  text-transform: none;
256}
257
258textarea { white-space: pre-wrap; }
259
260input[type="radio"], input[type="checkbox"], input[type="reset"], input[type="button"],
261input[type="submit"], select, button {
262  box-sizing: border-box;
263}
264
265input, textarea, select, button { display: inline-block; }
266
267hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }
268
269
270fieldset {
271  display: block; /* https://www.w3.org/Bugs/Public/show_bug.cgi?id=27018 */
272  margin-left: 2px; margin-right: 2px;
273  border: groove 2px;
274  border-color: ThreeDFace; /* FIXME: system color */
275  padding: 0.35em 0.625em 0.75em;
276  min-width: min-content;
277}
278
279legend {
280  padding-left: 2px; padding-right: 2px;
281}
282
283iframe:not([seamless]) { border: 2px inset; }
284iframe[seamless] { display: block; }
285video { object-fit: contain; }
286
287
288textarea { white-space: pre-wrap; }
289
290*|*:not(:root):fullscreen {
291  position:fixed !important;
292  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
293  margin:0 !important;
294  box-sizing:border-box !important;
295  min-width:0 !important;
296  max-width:none !important;
297  min-height:0 !important;
298  max-height:none !important;
299  width:100% !important;
300  height:100% !important;
301  transform:none !important;
302
303  /* intentionally not !important */
304  object-fit:contain;
305}
306
307iframe:fullscreen {
308  border:none !important;
309  padding:0 !important;
310}
311