From d27136fcb07cac8573cd2d2a1f070ad02dcfcf58 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Wed, 14 Sep 2022 12:10:14 +0200 Subject: [PATCH] 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. --- Userland/Libraries/LibWeb/CSS/Default.css | 827 +++++++++++++++------- 1 file changed, 577 insertions(+), 250 deletions(-) diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css index 30ef6d8fde..1cbea820d6 100644 --- a/Userland/Libraries/LibWeb/CSS/Default.css +++ b/Userland/Libraries/LibWeb/CSS/Default.css @@ -1,175 +1,20 @@ -html { +html, body { font-family: sans-serif; color: -libweb-palette-base-text; } -a { - cursor: pointer; -} - body { margin: 8px; } -h1 { - font-size: 2em; - 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; +a { + cursor: pointer; } 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 { margin-top: 0.5em; margin-bottom: 0.5em; @@ -180,75 +25,6 @@ blink { 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. */ input, textarea { border: 1px solid -libweb-palette-threed-shadow1; @@ -288,41 +64,163 @@ option { display: none; } -details { - display: block; - padding-left: 1em; -} - -summary { - display: block; - font-weight: bold; -} - /* 15.3.1 Hidden elements * https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements */ -/* FIXME: Add `noframes` once frames are implemented. */ -/* FIXME: Add `noembed` once is implemented. */ -/* FIXME: Add `rp` once is implemented. */ -[hidden], area, base, basefont, datalist, head, link, meta, /*noembed,*/ -/*noframes,*/ param, /*rp,*/ script, style, template, title { - display: none; + +area, base, basefont, datalist, head, link, meta, noembed, +noframes, param, rp, script, style, template, title { + 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) { - 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 * https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */ -abbr[title], -acronym[title] { - text-decoration: dotted underline; + +cite, dfn, em, i, var { + 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 { @@ -330,10 +228,439 @@ mark { 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 * 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 */