mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 23:57:34 +00:00
LibWeb: Replace most of our default UA stylesheet with spec rules
The HTML spec provides a set of suitable default CSS rules for our UA stylesheet, so let's use those instead of inventing our own. :^) Note that I had to replace "foo-block-start" properties with "foo-top" since we don't support the block/inline direction based properties yet.
This commit is contained in:
Andreas Kling
parent
4b9c5635b3
commit
d27136fcb0
1 changed files with 577 additions and 250 deletions
|
|
@ -1,175 +1,20 @@
|
||||||
html {
|
html, body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
color: -libweb-palette-base-text;
|
color: -libweb-palette-base-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
a {
|
||||||
font-size: 2em;
|
cursor: pointer;
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin: 0.83em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.17em;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin: 1.33em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 0.83em;
|
|
||||||
margin: 1.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 0.67em;
|
|
||||||
margin: 2.33em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-family: monospace;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
margin-top: 8px;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp,
|
|
||||||
tt {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
u,
|
|
||||||
ins {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
s,
|
|
||||||
strike,
|
|
||||||
del {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong,
|
|
||||||
b {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
i,
|
|
||||||
em,
|
|
||||||
address,
|
|
||||||
cite,
|
|
||||||
dfn,
|
|
||||||
var {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
address,
|
|
||||||
blockquote,
|
|
||||||
body,
|
|
||||||
dd,
|
|
||||||
div,
|
|
||||||
dl,
|
|
||||||
dt,
|
|
||||||
fieldset,
|
|
||||||
form,
|
|
||||||
frame,
|
|
||||||
frameset,
|
|
||||||
hgroup,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
noframes,
|
|
||||||
ol,
|
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
center,
|
|
||||||
dir,
|
|
||||||
hr,
|
|
||||||
menu,
|
|
||||||
pre,
|
|
||||||
header,
|
|
||||||
footer,
|
|
||||||
nav,
|
|
||||||
main,
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
section {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
center {
|
center {
|
||||||
text-align: -libweb-center;
|
text-align: -libweb-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
margin: 8px 0 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4,
|
|
||||||
p,
|
|
||||||
blockquote,
|
|
||||||
ul,
|
|
||||||
fieldset,
|
|
||||||
form,
|
|
||||||
ol,
|
|
||||||
dl,
|
|
||||||
dir,
|
|
||||||
menu {
|
|
||||||
margin: 4px 0 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin: 2px 0 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: list-item;
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
color: -libweb-link;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
|
|
@ -180,75 +25,6 @@ blink {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
display: table-header-group;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
display: table-row-group;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
tfoot {
|
|
||||||
display: table-footer-group;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr {
|
|
||||||
display: table-row;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
display: table-cell;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
col {
|
|
||||||
display: table-column;
|
|
||||||
}
|
|
||||||
|
|
||||||
colgroup {
|
|
||||||
display: table-column-group;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin-left: 25px;
|
|
||||||
margin-right: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(ul, ol) ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(ul, ol) :is(ul, ol) ul {
|
|
||||||
list-style-type: square;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
|
/* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
|
||||||
input, textarea {
|
input, textarea {
|
||||||
border: 1px solid -libweb-palette-threed-shadow1;
|
border: 1px solid -libweb-palette-threed-shadow1;
|
||||||
|
|
@ -288,41 +64,163 @@ option {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
details {
|
|
||||||
display: block;
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: block;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 15.3.1 Hidden elements
|
/* 15.3.1 Hidden elements
|
||||||
* https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
|
* https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
|
||||||
*/
|
*/
|
||||||
/* FIXME: Add `noframes` once frames are implemented. */
|
|
||||||
/* FIXME: Add `noembed` once <embed> is implemented. */
|
area, base, basefont, datalist, head, link, meta, noembed,
|
||||||
/* FIXME: Add `rp` once <ruby> is implemented. */
|
noframes, param, rp, script, style, template, title {
|
||||||
[hidden], area, base, basefont, datalist, head, link, meta, /*noembed,*/
|
|
||||||
/*noframes,*/ param, /*rp,*/ script, style, template, title {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
embed[hidden] { display: inline; height: 0; width: 0; }
|
[hidden]:not([hidden=until-found i]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
input[type=hidden i] { display: none !important; }
|
[hidden=until-found i]:not(embed) {
|
||||||
|
content-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
embed[hidden] {
|
||||||
|
display: inline;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=hidden i] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
@media (scripting) {
|
@media (scripting) {
|
||||||
noscript { display: none !important; }
|
noscript {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.2 The page
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#the-page
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.3 Flow content
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
|
||||||
|
*/
|
||||||
|
address, blockquote, center, dialog, div, figure, figcaption, footer, form,
|
||||||
|
header, hr, legend, listing, main, p, plaintext, pre, xmp {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote, figure, listing, p, plaintext, pre, xmp {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote, figure {
|
||||||
|
margin-left: 40px;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
listing, plaintext, pre, xmp {
|
||||||
|
font-family: monospace;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog:not([open]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
position: absolute;
|
||||||
|
inset-left: 0;
|
||||||
|
inset-right: 0;
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
border: solid;
|
||||||
|
padding: 1em;
|
||||||
|
background-color: Canvas;
|
||||||
|
color: CanvasText;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog::backdrop {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
slot {
|
||||||
|
display: contents;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 15.3.4 Phrasing content
|
/* 15.3.4 Phrasing content
|
||||||
* https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
|
* https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
|
||||||
*/
|
*/
|
||||||
abbr[title],
|
|
||||||
acronym[title] {
|
cite, dfn, em, i, var {
|
||||||
text-decoration: dotted underline;
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
b, strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, kbd, samp, tt {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
big {
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
vertical-align: sub;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub, sup {
|
||||||
|
line-height: normal;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
ruby {
|
||||||
|
display: ruby;
|
||||||
|
}
|
||||||
|
|
||||||
|
rt {
|
||||||
|
display: ruby-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
:link {
|
||||||
|
color: -libweb-link;
|
||||||
|
}
|
||||||
|
|
||||||
|
:visited {
|
||||||
|
color: -libweb-palette-visited-link;
|
||||||
|
}
|
||||||
|
|
||||||
|
:link:active, :visited:active {
|
||||||
|
color: -libweb-palette-active-link;
|
||||||
|
}
|
||||||
|
|
||||||
|
:link, :visited {
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
|
|
@ -330,10 +228,439 @@ mark {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* this color is just a suggestion and can be changed based on implementation feedback */
|
||||||
|
|
||||||
|
abbr[title], acronym[title] {
|
||||||
|
text-decoration: dotted underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
ins, u {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
del, s, strike {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
q::before {
|
||||||
|
content: open-quote;
|
||||||
|
}
|
||||||
|
|
||||||
|
q::after {
|
||||||
|
content: close-quote;
|
||||||
|
}
|
||||||
|
|
||||||
|
br {
|
||||||
|
display-outside: newline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this also has bidi implications */
|
||||||
|
nobr {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
wbr {
|
||||||
|
display-outside: break-opportunity;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this also has bidi implications */
|
||||||
|
nobr wbr {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.5 Bidirectional text
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering
|
||||||
|
*/
|
||||||
|
|
||||||
|
[dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir]:dir(rtl), bdi:dir(rtl) {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
|
||||||
|
legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
|
||||||
|
h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead,
|
||||||
|
tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
|
||||||
|
[dir=ltr i], [dir=rtl i], [dir=auto i] {
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
bdo, bdo[dir] {
|
||||||
|
unicode-bidi: isolate-override;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],
|
||||||
|
[type=email i]), textarea[dir=auto i], pre[dir=auto i] {
|
||||||
|
unicode-bidi: plaintext;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.6 Sections and headings
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings
|
||||||
|
*/
|
||||||
|
|
||||||
|
article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0.67em;
|
||||||
|
margin-bottom: 0.67em;
|
||||||
|
font-size: 2.00em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0.83em;
|
||||||
|
margin-bottom: 0.83em;
|
||||||
|
font-size: 1.50em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: 1.00em;
|
||||||
|
margin-bottom: 1.00em;
|
||||||
|
font-size: 1.17em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-top: 1.33em;
|
||||||
|
margin-bottom: 1.33em;
|
||||||
|
font-size: 1.00em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
margin-top: 1.67em;
|
||||||
|
margin-bottom: 1.67em;
|
||||||
|
font-size: 0.83em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
margin-top: 2.33em;
|
||||||
|
margin-bottom: 2.33em;
|
||||||
|
font-size: 0.67em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(article, aside, nav, section) h1 {
|
||||||
|
margin-top: 0.83em;
|
||||||
|
margin-bottom: 0.83em;
|
||||||
|
font-size: 1.50em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
|
||||||
|
margin-top: 1.00em;
|
||||||
|
margin-bottom: 1.00em;
|
||||||
|
font-size: 1.17em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
|
||||||
|
margin-top: 1.33em;
|
||||||
|
margin-bottom: 1.33em;
|
||||||
|
font-size: 1.00em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
|
||||||
|
margin-top: 1.67em;
|
||||||
|
margin-bottom: 1.67em;
|
||||||
|
font-size: 0.83em;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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 {
|
||||||
|
margin-top: 2.33em;
|
||||||
|
margin-bottom: 2.33em;
|
||||||
|
font-size: 0.67em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.7 Lists
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#lists
|
||||||
|
*/
|
||||||
|
dir, dd, dl, dt, menu, ol, ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: list-item;
|
||||||
|
text-align: match-parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
dir, dl, menu, ol, ul {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
dir, menu, ol, ul {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul, menu {
|
||||||
|
counter-reset: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
dir, menu, ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(dir, menu, ol, ul) :is(dir, menu, ul) {
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.8 Tables
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#tables-2
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
display: table-caption;
|
||||||
|
}
|
||||||
|
|
||||||
|
colgroup, colgroup[hidden] {
|
||||||
|
display: table-column-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
col, col[hidden] {
|
||||||
|
display: table-column;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead, thead[hidden] {
|
||||||
|
display: table-header-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody, tbody[hidden] {
|
||||||
|
display: table-row-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot, tfoot[hidden] {
|
||||||
|
display: table-footer-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr, tr[hidden] {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
|
||||||
|
tfoot[hidden], tr[hidden] {
|
||||||
|
visibility: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-spacing: 2px;
|
||||||
|
border-collapse: separate;
|
||||||
|
text-indent: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead, tbody, tfoot, table > tr {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr, td, th {
|
||||||
|
vertical-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead, tbody, tfoot, tr {
|
||||||
|
border-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
table[rules=none i], table[rules=groups i], table[rules=rows i],
|
||||||
|
table[rules=cols i], table[rules=all i], table[frame=void i],
|
||||||
|
table[frame=above i], table[frame=below i], table[frame=hsides i],
|
||||||
|
table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
|
||||||
|
table[frame=box i], table[frame=border i],
|
||||||
|
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
|
||||||
|
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
|
||||||
|
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
|
||||||
|
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
|
||||||
|
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
|
||||||
|
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
|
||||||
|
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
|
||||||
|
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
|
||||||
|
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
|
||||||
|
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
|
||||||
|
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
|
||||||
|
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
|
||||||
|
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
|
||||||
|
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
|
||||||
|
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
|
||||||
|
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
|
||||||
|
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
|
||||||
|
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
|
||||||
|
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
|
||||||
|
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
|
||||||
|
border-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.10 Form controls
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#form-controls
|
||||||
|
*/
|
||||||
|
|
||||||
|
input, select, button, textarea {
|
||||||
|
letter-spacing: initial;
|
||||||
|
word-spacing: initial;
|
||||||
|
line-height: initial;
|
||||||
|
text-transform: initial;
|
||||||
|
text-indent: initial;
|
||||||
|
text-shadow: initial;
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, textarea {
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:is([type=reset i], [type=button i], [type=submit i]), button {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=hidden i], input[type=file i], input[type=image i] {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
|
||||||
|
[type=submit i], [type=color i], [type=search i]), select, button {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.11 The hr element
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
color: gray;
|
||||||
|
border-style: inset;
|
||||||
|
border-width: 1px;
|
||||||
|
margin: 0.5em auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.3.12 The fieldset and legend elements
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
display: block;
|
||||||
|
margin-left: 2px;
|
||||||
|
margin-right: 2px;
|
||||||
|
border: groove 2px ThreeDFace;
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
min-inline-size: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
padding-left: 2px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend[align=left i] {
|
||||||
|
justify-self: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend[align=center i] {
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend[align=right i] {
|
||||||
|
justify-self: right;
|
||||||
|
}
|
||||||
|
|
||||||
/* 15.4.1 Embedded content
|
/* 15.4.1 Embedded content
|
||||||
* https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
|
* https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
|
||||||
*/
|
*/
|
||||||
iframe { border: 2px inset; }
|
iframe {
|
||||||
|
border: 2px inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.5.4 The details and summary elements
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
counter-increment: list-item 0;
|
||||||
|
list-style: disclosure-closed inside;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] > summary {
|
||||||
|
list-style-type: disclosure-open;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.5.12 The marquee element
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2
|
||||||
|
*/
|
||||||
|
|
||||||
|
marquee {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.5.13 The meter element
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#the-meter-element-2
|
||||||
|
*/
|
||||||
|
|
||||||
|
meter {
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.5.14 The progress element
|
||||||
|
* https://html.spec.whatwg.org/multipage/rendering.html#the-progress-element-2
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* https://www.w3.org/TR/mediaqueries-5/#descdef-media-inverted-colors
|
/* https://www.w3.org/TR/mediaqueries-5/#descdef-media-inverted-colors
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue