/* 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;
}
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;
/* FIXME: For some reason this filter is required for the :hover style to work */
filter: contrast(100%);
}
button:disabled, input[type=submit]:disabled, input[type=button]:disabled, input[type=reset]:disabled, select:disabled {
filter: contrast(70%);
}
input[type=image] {
cursor: pointer;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
filter: contrast(70%);
}
option {
display: none;
}
/* Custom styles */
input[type=range] {
display: inline-block;
width: 20ch;
height: 16px;
&::slider-track {
display: block;
position: relative;
height: 4px;
width: 100%;
margin-top: 6px;
background-color: AccentColorText;
border: 1px solid rgba(0, 0, 0, 0.5);
}
&::slider-fill {
display: block;
position: absolute;
height: 100%;
background-color: AccentColor;
}
&::slider-thumb {
display: block;
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;
background-color: AccentColor;
}
}
/* Custom styles */
meter {
display: inline-block;
width: 300px;
height: 12px;
&::slider-track {
display: block;
height: 100%;
background-color: hsl(0, 0%, 96%);
border: 1px solid rgba(0, 0, 0, 0.5);
}
&::slider-fill {
display: block;
height: 100%;
}
&:optimal-value::slider-fill {
background-color: hsl(141, 53%, 53%);
}
&:suboptimal-value::slider-fill {
background-color: hsl(48, 100%, 67%);
}
&:even-less-good-value::slider-fill {
background-color: hsl(348, 100%, 61%);
}
}
/* Custom