forked from rosa/hakurei
83 lines
2.1 KiB
SCSS
83 lines
2.1 KiB
SCSS
:root {
|
|
--bg: #d3d3d3;
|
|
--fg: black;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #2c2c2c;
|
|
--fg: ghostwhite;
|
|
}
|
|
}
|
|
|
|
html {
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
}
|
|
h1, p, summary {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.root {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
details.test-node {
|
|
margin-left: 1rem;
|
|
padding: 0.2rem 0.5rem;
|
|
border-left: 2px dashed var(--fg);
|
|
> summary {
|
|
cursor: pointer;
|
|
}
|
|
&.success > summary::marker {
|
|
/*
|
|
* WebKit only supports color and font-size properties in ::marker [1],
|
|
* and its ::-webkit-details-marker only supports hiding the marker
|
|
* entirely [2], contrary to mdn's example [3]; thus, set a color as
|
|
* a fallback: while it may not be accessible for colorblind
|
|
* individuals, it's better than no indication of a test's state for
|
|
* anyone, as that there's no other way to include an indication in the
|
|
* marker on WebKit.
|
|
*
|
|
* [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker#browser_compatibility
|
|
* [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#default_style
|
|
* [3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#changing_the_summarys_icon
|
|
*/
|
|
color: var(--fg);
|
|
content: url("/static/success-closed.svg") / "success";
|
|
}
|
|
&.success[open] > summary::marker {
|
|
content: url("/static/success-open.svg") / "success";
|
|
}
|
|
&.failure > summary::marker {
|
|
color: red;
|
|
content: url("/static/failure-closed.svg") / "failure";
|
|
}
|
|
&.failure[open] > summary::marker {
|
|
content: url("/static/failure-open.svg") / "failure";
|
|
}
|
|
&.skip > summary::marker {
|
|
color: blue;
|
|
content: url("/static/skip-closed.svg") / "skip";
|
|
}
|
|
&.skip[open] > summary::marker {
|
|
content: url("/static/skip-open.svg") / "skip";
|
|
}
|
|
}
|
|
|
|
p.test-desc {
|
|
margin: 0 0 0 1rem;
|
|
padding: 2px 0;
|
|
> pre {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.italic {
|
|
font-style: italic;
|
|
}
|