Default.css

/* Default user-agent stylesheet for LibWeb
 * Note: This stylesheet starts with a bunch of ad-hoc custom rules.
 *       After that, rules from the HTML spec follow.
 */

html {
    font-family: serif;
    color: CanvasText;
}

body {
    margin: 8px;
}

center {
    text-align: -libweb-center;
}

blink {
    display: inline;
}

/* FIXME: This doesn't seem right. */
label {
    display: inline-block;
}

/* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
input:not([type=submit], input[type=button], input[type=image], input[type=reset], input[type=color], input[type=checkbox], input[type=file], input[type=radio], input[type=range]), textarea {
    border: 1px solid ButtonBorder;
    min-height: 16px;
    cursor: text;
    overflow: hidden;

    background-color: Field;
    color: FieldText;
}

textarea {
    padding: 2px;
    display: inline-block;
    overflow: auto;
    font-family: monospace;
}

input::placeholder, textarea::placeholder {
    color: GrayText;
    line-height: initial;
}

button, input[type=submit], input[type=button], input[type=reset], select, ::file-selector-button {
    padding: 1px 4px;
    background-color: ButtonFace;
    border: 1px solid ButtonBorder;
    color: ButtonText;
    cursor: default;
}

button:disabled, input[type=submit]:disabled, input[type=button]:disabled, input[type=reset]:disabled, select:disabled {
    /* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
     *        version of our light ButtonFace color. Once we support `color-scheme: dark`
     *        we'll need to use a different color for that.
     */
    background-color: #e5e0d7;
    color: GrayText;
}

input[type=image] {
    cursor: pointer;
}

button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
    /* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
     *        version of our light ButtonFace color. Once we support `color-scheme: dark`
     *        we'll need to use a different color for that.
     */
    background-color: #e5e0d7;
}

option {
    display: none;
}

/* Custom <input type="range"> styles */
input[type=range] {
    display: inline-block;
    width: 20ch;
    height: 16px;
}
input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
    display: block;
}
input[type=range]::-webkit-slider-runnable-track {
    position: relative;
    height: 4px;
    width: 100%;
    margin-top: 6px;
    background-color: Background;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
input[type=range]::-webkit-slider-thumb {
    margin-top: -6px;
    width: 16px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    outline: 1px solid rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Custom <meter> styles */
meter {
    display: inline-block;
    width: 300px;
    height: 12px;
}
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
    display: block;
    height: 100%;
}
meter::-webkit-meter-bar {
    background-color: hsl(0, 0%, 96%);
    border: 1px solid rgba(0, 0, 0, 0.5);
}
meter::-webkit-meter-optimum-value {
    background-color: hsl(141, 53%, 53%);
}
meter::-webkit-meter-suboptimum-value {
    background-color: hsl(48, 100%, 67%);
}
meter::-webkit-meter-even-less-good-value {
    background-color: hsl(348, 100%, 61%);
}

/* Custom <progress> styles */
progress {
    display: inline-block;
    width: 300px;
    height: 12px;
}
progress::-webkit-progress-bar, progress::-webkit-progress-value {
    display: block;
    height: 100%;
}
progress::-webkit-progress-bar {
    background-color: Background;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

/* 15.3.1 Hidden elements
 * https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
 */

area, base, basefont, datalist, head, link, meta, noembed,
noframes, param, rp, script, style, template, title {
    display: none;
}

[hidden]:not([hidden=until-found i]) {
    display: none;
}

[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;
    }
}

/* 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, search, 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-inline-start: 0;
    inset-inline-end: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background-color: Canvas;
    color: CanvasText;
}

dialog:modal {
    position: fixed;
    overflow: auto;
    inset-block: 0;
    max-width: calc(100% - 6px - 2em);
    max-height: calc(100% - 6px - 2em);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.1);
}

[popover]:not(:popover-open):not(dialog[open]) {
    display:none;
}

dialog:popover-open {
    display:block;
}

[popover] {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 0.25em;
    overflow: auto;
    color: CanvasText;
    background-color: Canvas;
}

:popover-open::backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none !important;
    background-color: transparent;
}

slot {
    display: contents;
}

/* 15.3.4 Phrasing content
 * https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
 */

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: LinkText;
}

:visited {
    color: VisitedText;
}

:link:active, :visited:active {
    color: ActiveText;
}

:link, :visited {
    text-decoration: underline;
    cursor: pointer;
}

:focus-visible {
    outline: auto;
}

mark {
    background: Mark;
    color: MarkText;
}

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;
}

/*
NOTE: This isn't a real property and value. See https://github.com/whatwg/html/issues/2291
br {
    display-outside: newline;
}
*/

/* this also has bidi implications */
nobr {
    white-space: nowrap;
}

/*
NOTE: This isn't a real property and value. See https://github.com/whatwg/html/issues/2291
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, search, 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-block-start: 1em;
    margin-block-end: 1em;
}

:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
    margin-block-start: 0;
    margin-block-end: 0;
}

dd {
    margin-inline-start: 40px;
}

dir, menu, ol, ul {
    padding-inline-start: 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;
    /*
    The text-align property for table headings is non-standard, but all
    existing user-agents seem to render them centered by default.

    See:
    - https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=295625#L272
    - https://searchfox.org/mozilla-central/rev/0b55b868c17835942d40ca3fedfca8057481207b/layout/style/res/html.css#473
    */
    text-align: center;
}

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-block-start: 0.5em;
    margin-inline-end: auto;
    margin-block-end: 0.5em;
    margin-inline-start: 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-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    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;
}

video {
    object-fit: contain;
}

/* 15.4.3 Attributes for embedded content and images
 * https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
 */

iframe[frameborder='0'], iframe[frameborder=no i] { border: none; }

embed[align=left i], iframe[align=left i], img[align=left i],
input[type=image i][align=left i], object[align=left i] {
    float: left;
}

embed[align=right i], iframe[align=right i], img[align=right i],
input[type=image i][align=right i], object[align=right i] {
    float: right;
}

embed[align=top i], iframe[align=top i], img[align=top i],
input[type=image i][align=top i], object[align=top i] {
    vertical-align: top;
}

embed[align=baseline i], iframe[align=baseline i], img[align=baseline i],
input[type=image i][align=baseline i], object[align=baseline i] {
    vertical-align: baseline;
}

embed[align=texttop i], iframe[align=texttop i], img[align=texttop i],
input[type=image i][align=texttop i], object[align=texttop i] {
    vertical-align: text-top;
}

embed[align=absmiddle i], iframe[align=absmiddle i], img[align=absmiddle i],
input[type=image i][align=absmiddle i], object[align=absmiddle i],
embed[align=abscenter i], iframe[align=abscenter i], img[align=abscenter i],
input[type=image i][align=abscenter i], object[align=abscenter i] {
    vertical-align: middle;
}

embed[align=bottom i], iframe[align=bottom i], img[align=bottom i],
input[type=image i][align=bottom i], object[align=bottom i] {
    vertical-align: bottom;
}

/* 15.5.5 The details and summary elements
 * https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
 */

details, summary {
    display: block;
}

details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: disclosure-closed inside;
}

details[open] > summary:first-of-type {
    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
 */
@media (inverted-colors) {
    img:not(picture>img),
    picture,
    video {
        filter: invert(100%);
    }
}

/* https://github.com/whatwg/html/pull/9546
 */
input[type=checkbox][switch] {
	appearance: none;
	height: 1em;
	width: 1.8em;
	vertical-align: middle;
	border-radius: 1em;
	position: relative;
	overflow: hidden;
	border-color: transparent;
	background-color: ButtonFace;
}

input[type=checkbox][switch]::before {
	content: '';
	position: absolute;
	height: 0;
	width: 0;
	border: .46em solid Field;
	border-radius: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

input[type=checkbox][switch]:checked::before {
	left: calc(100% - .87em);
}

input[type=checkbox][switch]:checked {
	background-color: AccentColor;
}