ladybird/Userland/Libraries/LibWeb/CSS/Default.css

844 lines
18 KiB
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;
}
textarea {
padding: 2px;
display: inline-block;
overflow: auto;
font-family: monospace;
}
input::placeholder, textarea::placeholder {
color: GrayText;
}
button, input[type=submit], input[type=button], input[type=reset], select {
padding: 1px 4px;
background-color: ButtonFace;
border: 1px solid ButtonBorder;
color: ButtonText;
cursor: default;
}
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 {
height: 4px;
margin-top: 6px;
background-color: hsl(217, 71%, 53%);
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%;
background-color: hsl(0, 0%, 96%);
outline: 1px solid rgba(0, 0, 0, 0.5);
}
/* 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: hsl(0, 0%, 96%);
border: 1px solid rgba(0, 0, 0, 0.5);
}
progress::-webkit-progress-value {
background-color: hsl(204, 86%, 53%);
}
/* 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, 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.4 The details and summary elements
* https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
*/
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%);
}
}