34 lines
2.1 KiB
CSS
34 lines
2.1 KiB
CSS
:root { color-scheme: light dark; font: 14px/1.6 -apple-system, BlinkMacSystemFont, sans-serif; color: #203129; background: #f3f5f1; }
|
|
* { box-sizing: border-box; }
|
|
body { max-width: 1080px; margin: auto; padding: 28px; }
|
|
header { margin-bottom: 24px; }
|
|
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 2px; color: #53745e; }
|
|
h1 { font-size: 27px; line-height: 1.3; margin: 8px 0; }
|
|
h2 { font-size: 16px; margin: 0 0 8px; }
|
|
p { margin: 8px 0; }
|
|
#context, .hint { color: #626f66; overflow-wrap: anywhere; }
|
|
section, details { padding: 20px; background: #fff; border: 1px solid #dce3db; border-radius: 12px; margin-bottom: 16px; }
|
|
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
|
|
button { font: inherit; color: inherit; background: #f1f5f0; border: 1px solid #cbd7ca; border-radius: 7px; padding: 8px 12px; cursor: pointer; }
|
|
#run { background: #286047; border-color: #286047; color: #fff; }
|
|
button:hover { filter: brightness(.94); }
|
|
button:disabled { opacity: .5; cursor: default; }
|
|
button:focus-visible, summary:focus-visible { outline: 3px solid #629d78; outline-offset: 3px; }
|
|
ol { list-style: none; margin: 0; padding: 0; }
|
|
li { padding: 12px 0; border-bottom: 1px solid #e7ece5; }
|
|
li:last-child { border: 0; }
|
|
.pass { color: #236b3b; } .fail { color: #ba352d; } .observed, .skip { color: #8c5e15; }
|
|
.result-heading { display: flex; gap: 12px; justify-content: space-between; }
|
|
small { color: #68746b; }
|
|
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, monospace; max-height: 360px; overflow: auto; }
|
|
summary { cursor: pointer; }
|
|
@media (max-width: 640px) { body { padding: 14px; } section { padding: 14px; } .result-heading { display: block; } }
|
|
@media (prefers-color-scheme: dark) {
|
|
:root { color: #e1e9df; background: #172019; }
|
|
section, details { background: #202b23; border-color: #37473a; }
|
|
button { background: #2d3c30; border-color: #506153; }
|
|
#context, .hint, small { color: #a4b4a6; }
|
|
li { border-color: #37473a; }
|
|
.pass { color: #8adb9e; } .fail { color: #ff9c92; } .observed, .skip { color: #edc579; }
|
|
}
|