113 lines
2 KiB
CSS
113 lines
2 KiB
CSS
/* feature tests */
|
|
|
|
.feature-tests {
|
|
font-size: 85%;
|
|
--test-border: blue;
|
|
}
|
|
|
|
.feature-tests span.test-colorfn-rgb {
|
|
border: 1px solid rgb(50,50,100,1.0);
|
|
}
|
|
|
|
.feature-tests span.test-colorfn-hsl {
|
|
border: 1px solid hsl(36deg 50% 60%);
|
|
}
|
|
|
|
.feature-tests span.test-colorfn-oklab {
|
|
border: 1px solid oklab(59% 0.1 0.1);
|
|
}
|
|
|
|
.feature-tests span.test-colorfn-button {
|
|
color: ButtonFace;
|
|
background-color: ButtonText;
|
|
}
|
|
|
|
.feature-tests span.test-colorfn-accent {
|
|
color: AccentColor;
|
|
background-color: AccentColorText;
|
|
}
|
|
|
|
.feature-tests span.tests-length {
|
|
display: inline-block;
|
|
height: 0.5lh;
|
|
border-top: 1px solid gray;
|
|
}
|
|
|
|
.feature-tests span.tests-length.cm {
|
|
width: 5cm;
|
|
}
|
|
|
|
.feature-tests span.tests-length.ch {
|
|
width: 4ch;
|
|
}
|
|
|
|
.feature-tests span.tests-length.vw {
|
|
width: 25vw;
|
|
}
|
|
|
|
.feature-tests span.test-colorscheme {
|
|
border: 1px solid blue;
|
|
min-width: 2ch;
|
|
}
|
|
|
|
.feature-tests span.test-orientation {
|
|
border: 1px solid blue;
|
|
min-width: 2ch;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.feature-tests span.test-colorscheme:after {
|
|
content: "light";
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.feature-tests span.test-colorscheme:after {
|
|
content: "dark";
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
.feature-tests span.test-orientation::after {
|
|
content: "landscape";
|
|
}
|
|
}
|
|
|
|
@media (orientation: portrait) {
|
|
.feature-tests span.test-orientation::after {
|
|
content: "portrait";
|
|
}
|
|
}
|
|
|
|
.feature-tests span.test-variable {
|
|
border: 1px solid var(--test-border, red);
|
|
}
|
|
|
|
.feature-tests [lang="es"] {
|
|
border: 1px solid yellow;
|
|
}
|
|
|
|
.feature-tests :lang(fr) {
|
|
border: 1px solid blue;
|
|
}
|
|
|
|
.feature-tests span.test-content::after {
|
|
content: attr(data-checkmark);
|
|
}
|
|
|
|
.feature-tests span.test-property[data-border] {
|
|
border: 1px solid transparent;
|
|
border-color: attr(data-border);
|
|
}
|
|
|
|
.feature-tests span[data-opacity] {
|
|
--tone: 50;
|
|
border: none;
|
|
border: 1px solid rgb(0, 0, calc(200 + var(--tone)));
|
|
}
|
|
|
|
.feature-tests span[data-blink="yes"] {
|
|
animation: blinker 2s step-start infinite;
|
|
border: 1px solid blue;
|
|
}
|
|
|