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