Default.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865
  1. /* Default user-agent stylesheet for LibWeb
  2. * Note: This stylesheet starts with a bunch of ad-hoc custom rules.
  3. * After that, rules from the HTML spec follow.
  4. */
  5. html {
  6. font-family: sans-serif;
  7. color: -libweb-palette-base-text;
  8. }
  9. body {
  10. margin: 8px;
  11. }
  12. center {
  13. text-align: -libweb-center;
  14. }
  15. blink {
  16. display: inline;
  17. }
  18. /* FIXME: This doesn't seem right. */
  19. label {
  20. display: inline-block;
  21. }
  22. /* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
  23. input, textarea {
  24. border: 1px solid -libweb-palette-threed-shadow1;
  25. min-width: 80px;
  26. min-height: 16px;
  27. width: 120px;
  28. cursor: text;
  29. overflow: hidden;
  30. }
  31. textarea {
  32. padding: 2px;
  33. display: inline-block;
  34. overflow: scroll;
  35. }
  36. input[type=submit], input[type=button], input[type=reset], input[type=checkbox], input[type=radio] {
  37. border: none;
  38. min-width: unset;
  39. min-height: unset;
  40. width: unset;
  41. cursor: unset;
  42. }
  43. input::placeholder {
  44. color: rgb(117, 117, 117);
  45. }
  46. button, input[type=submit], input[type=button], input[type=reset] {
  47. padding: 1px 4px;
  48. background-color: -libweb-palette-button;
  49. border: 1px solid -libweb-palette-threed-shadow1;
  50. color: -libweb-palette-button-text;
  51. }
  52. button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
  53. background-color: -libweb-palette-hover-highlight;
  54. }
  55. input[type=checkbox] {
  56. display: inline-block;
  57. width: 12px;
  58. height: 12px;
  59. margin: 2px;
  60. border: 1px solid -libweb-palette-threed-shadow1;
  61. }
  62. input[type=checkbox]:checked {
  63. /*
  64. This roughly resembles ClassicStylePainter's paint_check_box() while uncoupling the styling from LibGfx, similar to
  65. <button> above. This is a simple checkmark that still looks ok at 2x scale.
  66. Eventually we should respect the `accent-color` property here, which may require going back to an implementation via
  67. CheckBoxPaintable::paint().
  68. */
  69. image-rendering: pixelated;
  70. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAEhJREFUKFNjYBgs4D/MIYxEuAiuGKiWkZAGFMUgw5mQbECWBAljKAYJwmxAl0Tnw81FdhK6DcgGYtWA0xlw1TgY2GzCoZQWwgCU1woFwvnCFQAAAABJRU5ErkJggg==);
  71. }
  72. option {
  73. display: none;
  74. }
  75. /* 15.3.1 Hidden elements
  76. * https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
  77. */
  78. area, base, basefont, datalist, head, link, meta, noembed,
  79. noframes, param, rp, script, style, template, title {
  80. display: none;
  81. }
  82. [hidden]:not([hidden=until-found i]) {
  83. display: none;
  84. }
  85. [hidden=until-found i]:not(embed) {
  86. content-visibility: hidden;
  87. }
  88. embed[hidden] {
  89. display: inline;
  90. height: 0;
  91. width: 0;
  92. }
  93. input[type=hidden i] {
  94. display: none !important;
  95. }
  96. @media (scripting) {
  97. noscript {
  98. display: none !important;
  99. }
  100. }
  101. /* 15.3.2 The page
  102. * https://html.spec.whatwg.org/multipage/rendering.html#the-page
  103. */
  104. html, body {
  105. display: block;
  106. }
  107. /* 15.3.3 Flow content
  108. * https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
  109. */
  110. address, blockquote, center, dialog, div, figure, figcaption, footer, form,
  111. header, hr, legend, listing, main, p, plaintext, pre, xmp {
  112. display: block;
  113. }
  114. blockquote, figure, listing, p, plaintext, pre, xmp {
  115. margin-top: 1em;
  116. margin-bottom: 1em;
  117. }
  118. blockquote, figure {
  119. margin-left: 40px;
  120. margin-right: 40px;
  121. }
  122. address {
  123. font-style: italic;
  124. }
  125. listing, plaintext, pre, xmp {
  126. font-family: monospace;
  127. white-space: pre;
  128. }
  129. dialog:not([open]) {
  130. display: none;
  131. }
  132. dialog {
  133. position: absolute;
  134. inset-left: 0;
  135. inset-right: 0;
  136. width: fit-content;
  137. height: fit-content;
  138. margin: auto;
  139. border: solid;
  140. padding: 1em;
  141. background-color: Canvas;
  142. color: CanvasText;
  143. }
  144. dialog::backdrop {
  145. background: rgba(0, 0, 0, 0.1);
  146. }
  147. slot {
  148. display: contents;
  149. }
  150. /* 15.3.4 Phrasing content
  151. * https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
  152. */
  153. cite, dfn, em, i, var {
  154. font-style: italic;
  155. }
  156. b, strong {
  157. font-weight: bolder;
  158. }
  159. code, kbd, samp, tt {
  160. font-family: monospace;
  161. }
  162. big {
  163. font-size: larger;
  164. }
  165. small {
  166. font-size: smaller;
  167. }
  168. sub {
  169. vertical-align: sub;
  170. }
  171. sup {
  172. vertical-align: super;
  173. }
  174. sub, sup {
  175. line-height: normal;
  176. font-size: smaller;
  177. }
  178. ruby {
  179. display: ruby;
  180. }
  181. rt {
  182. display: ruby-text;
  183. }
  184. :link {
  185. color: -libweb-link;
  186. }
  187. :visited {
  188. color: -libweb-palette-visited-link;
  189. }
  190. :link:active, :visited:active {
  191. color: -libweb-palette-active-link;
  192. }
  193. :link, :visited {
  194. text-decoration: underline;
  195. cursor: pointer;
  196. }
  197. :focus-visible {
  198. outline: auto;
  199. }
  200. mark {
  201. background: yellow;
  202. color: black;
  203. }
  204. /* this color is just a suggestion and can be changed based on implementation feedback */
  205. abbr[title], acronym[title] {
  206. text-decoration: dotted underline;
  207. }
  208. ins, u {
  209. text-decoration: underline;
  210. }
  211. del, s, strike {
  212. text-decoration: line-through;
  213. }
  214. q::before {
  215. content: open-quote;
  216. }
  217. q::after {
  218. content: close-quote;
  219. }
  220. br {
  221. display-outside: newline;
  222. }
  223. /* this also has bidi implications */
  224. nobr {
  225. white-space: nowrap;
  226. }
  227. wbr {
  228. display-outside: break-opportunity;
  229. }
  230. /* this also has bidi implications */
  231. nobr wbr {
  232. white-space: normal;
  233. }
  234. /* 15.3.5 Bidirectional text
  235. * https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering
  236. */
  237. [dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) {
  238. direction: ltr;
  239. }
  240. [dir]:dir(rtl), bdi:dir(rtl) {
  241. direction: rtl;
  242. }
  243. address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
  244. legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
  245. h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead,
  246. tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
  247. [dir=ltr i], [dir=rtl i], [dir=auto i] {
  248. unicode-bidi: isolate;
  249. }
  250. bdo, bdo[dir] {
  251. unicode-bidi: isolate-override;
  252. }
  253. input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],
  254. [type=email i]), textarea[dir=auto i], pre[dir=auto i] {
  255. unicode-bidi: plaintext;
  256. }
  257. /* 15.3.6 Sections and headings
  258. * https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings
  259. */
  260. article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
  261. display: block;
  262. }
  263. h1 {
  264. margin-top: 0.67em;
  265. margin-bottom: 0.67em;
  266. font-size: 2.00em;
  267. font-weight: bold;
  268. }
  269. h2 {
  270. margin-top: 0.83em;
  271. margin-bottom: 0.83em;
  272. font-size: 1.50em;
  273. font-weight: bold;
  274. }
  275. h3 {
  276. margin-top: 1.00em;
  277. margin-bottom: 1.00em;
  278. font-size: 1.17em;
  279. font-weight: bold;
  280. }
  281. h4 {
  282. margin-top: 1.33em;
  283. margin-bottom: 1.33em;
  284. font-size: 1.00em;
  285. font-weight: bold;
  286. }
  287. h5 {
  288. margin-top: 1.67em;
  289. margin-bottom: 1.67em;
  290. font-size: 0.83em;
  291. font-weight: bold;
  292. }
  293. h6 {
  294. margin-top: 2.33em;
  295. margin-bottom: 2.33em;
  296. font-size: 0.67em;
  297. font-weight: bold;
  298. }
  299. :is(article, aside, nav, section) h1 {
  300. margin-top: 0.83em;
  301. margin-bottom: 0.83em;
  302. font-size: 1.50em;
  303. }
  304. :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
  305. margin-top: 1.00em;
  306. margin-bottom: 1.00em;
  307. font-size: 1.17em;
  308. }
  309. :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
  310. margin-top: 1.33em;
  311. margin-bottom: 1.33em;
  312. font-size: 1.00em;
  313. }
  314. :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
  315. margin-top: 1.67em;
  316. margin-bottom: 1.67em;
  317. font-size: 0.83em;
  318. }
  319. :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
  320. margin-top: 2.33em;
  321. margin-bottom: 2.33em;
  322. font-size: 0.67em;
  323. }
  324. /* 15.3.7 Lists
  325. * https://html.spec.whatwg.org/multipage/rendering.html#lists
  326. */
  327. dir, dd, dl, dt, menu, ol, ul {
  328. display: block;
  329. }
  330. li {
  331. display: list-item;
  332. text-align: match-parent;
  333. }
  334. dir, dl, menu, ol, ul {
  335. margin-top: 1em;
  336. margin-bottom: 1em;
  337. }
  338. :is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
  339. margin-top: 0;
  340. margin-bottom: 0;
  341. }
  342. dd {
  343. margin-left: 40px;
  344. }
  345. dir, menu, ol, ul {
  346. padding-left: 40px;
  347. }
  348. ol, ul, menu {
  349. counter-reset: list-item;
  350. }
  351. ol {
  352. list-style-type: decimal;
  353. }
  354. dir, menu, ul {
  355. list-style-type: disc;
  356. }
  357. :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  358. list-style-type: circle;
  359. }
  360. :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  361. list-style-type: square;
  362. }
  363. /* 15.3.8 Tables
  364. * https://html.spec.whatwg.org/multipage/rendering.html#tables-2
  365. */
  366. table {
  367. display: table;
  368. }
  369. caption {
  370. display: table-caption;
  371. }
  372. colgroup, colgroup[hidden] {
  373. display: table-column-group;
  374. }
  375. col, col[hidden] {
  376. display: table-column;
  377. }
  378. thead, thead[hidden] {
  379. display: table-header-group;
  380. }
  381. tbody, tbody[hidden] {
  382. display: table-row-group;
  383. }
  384. tfoot, tfoot[hidden] {
  385. display: table-footer-group;
  386. }
  387. tr, tr[hidden] {
  388. display: table-row;
  389. }
  390. td, th {
  391. display: table-cell;
  392. }
  393. colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
  394. tfoot[hidden], tr[hidden] {
  395. visibility: collapse;
  396. }
  397. table {
  398. box-sizing: border-box;
  399. border-spacing: 2px;
  400. border-collapse: separate;
  401. text-indent: initial;
  402. }
  403. td, th {
  404. padding: 1px;
  405. }
  406. th {
  407. font-weight: bold;
  408. }
  409. caption {
  410. text-align: center;
  411. }
  412. thead, tbody, tfoot, table > tr {
  413. vertical-align: middle;
  414. }
  415. tr, td, th {
  416. vertical-align: inherit;
  417. }
  418. thead, tbody, tfoot, tr {
  419. border-color: inherit;
  420. }
  421. table[rules=none i], table[rules=groups i], table[rules=rows i],
  422. table[rules=cols i], table[rules=all i], table[frame=void i],
  423. table[frame=above i], table[frame=below i], table[frame=hsides i],
  424. table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
  425. table[frame=box i], table[frame=border i],
  426. table[rules=none i] > tr > td, table[rules=none i] > tr > th,
  427. table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
  428. table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
  429. table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
  430. table[rules=all i] > tr > td, table[rules=all i] > tr > th,
  431. table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
  432. table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
  433. table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
  434. table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
  435. table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
  436. table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
  437. table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
  438. table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
  439. table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
  440. table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
  441. table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
  442. table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
  443. table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
  444. table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
  445. table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  446. border-color: black;
  447. }
  448. /* 15.3.10 Form controls
  449. * https://html.spec.whatwg.org/multipage/rendering.html#form-controls
  450. */
  451. input, select, button, textarea {
  452. letter-spacing: initial;
  453. word-spacing: initial;
  454. line-height: initial;
  455. text-transform: initial;
  456. text-indent: initial;
  457. text-shadow: initial;
  458. appearance: auto;
  459. }
  460. input, select, textarea {
  461. text-align: initial;
  462. }
  463. input:is([type=reset i], [type=button i], [type=submit i]), button {
  464. text-align: center;
  465. }
  466. input, button {
  467. display: inline-block;
  468. }
  469. input[type=hidden i], input[type=file i], input[type=image i] {
  470. appearance: none;
  471. }
  472. input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
  473. [type=submit i], [type=color i], [type=search i]), select, button {
  474. box-sizing: border-box;
  475. }
  476. textarea {
  477. white-space: pre-wrap;
  478. }
  479. /* 15.3.11 The hr element
  480. * https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2
  481. */
  482. hr {
  483. color: gray;
  484. border-style: inset;
  485. border-width: 1px;
  486. margin: 0.5em auto;
  487. overflow: hidden;
  488. }
  489. /* 15.3.12 The fieldset and legend elements
  490. * https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements
  491. */
  492. fieldset {
  493. display: block;
  494. margin-left: 2px;
  495. margin-right: 2px;
  496. border: groove 2px ThreeDFace;
  497. padding: 0.35em 0.75em 0.625em;
  498. min-inline-size: min-content;
  499. }
  500. legend {
  501. padding-left: 2px;
  502. padding-right: 2px;
  503. }
  504. legend[align=left i] {
  505. justify-self: left;
  506. }
  507. legend[align=center i] {
  508. justify-self: center;
  509. }
  510. legend[align=right i] {
  511. justify-self: right;
  512. }
  513. /* 15.3.8 Embedded content
  514. * https://html.spec.whatwg.org/multipage/rendering.html#tables-2
  515. */
  516. table {
  517. display: table;
  518. }
  519. caption {
  520. display: table-caption;
  521. }
  522. colgroup, colgroup[hidden] {
  523. display: table-column-group;
  524. }
  525. col, col[hidden] {
  526. display: table-column;
  527. }
  528. thead, thead[hidden] {
  529. display: table-header-group;
  530. }
  531. tbody, tbody[hidden] {
  532. display: table-row-group;
  533. }
  534. tfoot, tfoot[hidden] {
  535. display: table-footer-group;
  536. }
  537. tr, tr[hidden] {
  538. display: table-row;
  539. }
  540. td, th {
  541. display: table-cell;
  542. }
  543. colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
  544. tfoot[hidden], tr[hidden] {
  545. visibility: collapse;
  546. }
  547. table {
  548. box-sizing: border-box;
  549. border-spacing: 2px;
  550. border-collapse: separate;
  551. text-indent: initial;
  552. }
  553. td, th {
  554. padding: 1px;
  555. }
  556. th {
  557. font-weight: bold;
  558. }
  559. caption {
  560. text-align: center;
  561. }
  562. thead, tbody, tfoot, table > tr {
  563. vertical-align: middle;
  564. }
  565. tr, td, th {
  566. vertical-align: inherit;
  567. }
  568. thead, tbody, tfoot, tr {
  569. border-color: inherit;
  570. }
  571. table[rules=none i], table[rules=groups i], table[rules=rows i],
  572. table[rules=cols i], table[rules=all i], table[frame=void i],
  573. table[frame=above i], table[frame=below i], table[frame=hsides i],
  574. table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
  575. table[frame=box i], table[frame=border i],
  576. table[rules=none i] > tr > td, table[rules=none i] > tr > th,
  577. table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
  578. table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
  579. table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
  580. table[rules=all i] > tr > td, table[rules=all i] > tr > th,
  581. table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
  582. table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
  583. table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
  584. table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
  585. table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
  586. table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
  587. table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
  588. table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
  589. table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
  590. table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
  591. table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
  592. table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
  593. table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
  594. table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
  595. table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  596. border-color: black;
  597. }
  598. /* 15.4.1 Embedded content
  599. * https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
  600. */
  601. iframe {
  602. border: 2px inset;
  603. }
  604. video {
  605. object-fit: contain;
  606. }
  607. /* 15.4.3 Attributes for embedded content and images
  608. * https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
  609. */
  610. iframe[frameborder='0'], iframe[frameborder=no i] { border: none; }
  611. embed[align=left i], iframe[align=left i], img[align=left i],
  612. input[type=image i][align=left i], object[align=left i] {
  613. float: left;
  614. }
  615. embed[align=right i], iframe[align=right i], img[align=right i],
  616. input[type=image i][align=right i], object[align=right i] {
  617. float: right;
  618. }
  619. embed[align=top i], iframe[align=top i], img[align=top i],
  620. input[type=image i][align=top i], object[align=top i] {
  621. vertical-align: top;
  622. }
  623. embed[align=baseline i], iframe[align=baseline i], img[align=baseline i],
  624. input[type=image i][align=baseline i], object[align=baseline i] {
  625. vertical-align: baseline;
  626. }
  627. embed[align=texttop i], iframe[align=texttop i], img[align=texttop i],
  628. input[type=image i][align=texttop i], object[align=texttop i] {
  629. vertical-align: text-top;
  630. }
  631. embed[align=absmiddle i], iframe[align=absmiddle i], img[align=absmiddle i],
  632. input[type=image i][align=absmiddle i], object[align=absmiddle i],
  633. embed[align=abscenter i], iframe[align=abscenter i], img[align=abscenter i],
  634. input[type=image i][align=abscenter i], object[align=abscenter i] {
  635. vertical-align: middle;
  636. }
  637. embed[align=bottom i], iframe[align=bottom i], img[align=bottom i],
  638. input[type=image i][align=bottom i], object[align=bottom i] {
  639. vertical-align: bottom;
  640. }
  641. /* 15.5.4 The details and summary elements
  642. * https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
  643. */
  644. summary {
  645. display: list-item;
  646. counter-increment: list-item 0;
  647. list-style: disclosure-closed inside;
  648. }
  649. details[open] > summary {
  650. list-style-type: disclosure-open;
  651. }
  652. /* 15.5.12 The marquee element
  653. * https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2
  654. */
  655. marquee {
  656. display: inline-block;
  657. text-align: initial;
  658. }
  659. /* 15.5.13 The meter element
  660. * https://html.spec.whatwg.org/multipage/rendering.html#the-meter-element-2
  661. */
  662. meter {
  663. appearance: auto;
  664. }
  665. /* 15.5.14 The progress element
  666. * https://html.spec.whatwg.org/multipage/rendering.html#the-progress-element-2
  667. */
  668. progress {
  669. appearance: auto;
  670. }
  671. /* https://www.w3.org/TR/mediaqueries-5/#descdef-media-inverted-colors
  672. */
  673. @media (inverted-colors) {
  674. img:not(picture>img),
  675. picture,
  676. video {
  677. filter: invert(100%);
  678. }
  679. }
  680. /* This is the same as default intrinsic size of a <progress> element */
  681. progress {
  682. width: 300px;
  683. height: 12px;
  684. }
  685. /* The default progress-value/bar CSS below is the same as Blink/WebKit.
  686. * Note: Setting any more than the backgrond-color may have unintended consequences, as sites don't expect to unset more than that.
  687. */
  688. progress::-webkit-progress-bar {
  689. width: inherit;
  690. height: inherit;
  691. background-color: grey;
  692. }
  693. progress::-webkit-progress-value {
  694. height: inherit;
  695. background-color: green;
  696. }