115 lines
4.2 KiB
CSS
115 lines
4.2 KiB
CSS
:root {
|
|
--bg: #f4f5f7;
|
|
--card: #ffffff;
|
|
--text: #1c2430;
|
|
--muted: #6b7686;
|
|
--line: #d3d9e1;
|
|
--track: #e6eaf0;
|
|
--alive: #2f9e62;
|
|
--down: #98a2b3;
|
|
--ok: #3b6fd4;
|
|
--warn: #e0961e;
|
|
--crit: #d64545;
|
|
--held: #3b6fd4;
|
|
--unmet: #d64545;
|
|
--duplicate: #e0961e;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #12161c;
|
|
--card: #1b2129;
|
|
--text: #e6eaf0;
|
|
--muted: #93a0b3;
|
|
--line: #313a47;
|
|
--track: #2a3340;
|
|
--alive: #4cc38a;
|
|
--down: #6b7686;
|
|
--ok: #6c9cff;
|
|
--warn: #ffb04a;
|
|
--crit: #ff6b6b;
|
|
--held: #6c9cff;
|
|
--unmet: #ff6b6b;
|
|
--duplicate: #ffb04a;
|
|
}
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0 16px 28px;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font: 15px/1.45 system-ui, sans-serif;
|
|
}
|
|
|
|
header, main, footer { max-width: 900px; margin: 0 auto; }
|
|
|
|
h1 { margin: 22px 0 2px; font-size: 24px; }
|
|
p { margin: 4px 0; }
|
|
.summary { color: var(--muted); }
|
|
.muted { color: var(--muted); font-size: 13px; }
|
|
.error { color: var(--crit); font-weight: 600; }
|
|
|
|
.alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
.alerts:empty { display: none; }
|
|
.alert { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1.5px solid; }
|
|
.alert.bad { color: var(--crit); border-color: var(--crit); }
|
|
.alert.warn { color: var(--warn); border-color: var(--warn); }
|
|
.alert.info { color: var(--muted); border-color: var(--line); }
|
|
|
|
main { margin-top: 14px; }
|
|
#graph { width: 100%; height: auto; display: block; margin: 0 auto; }
|
|
|
|
.link { stroke: var(--line); stroke-width: 2.5; }
|
|
.link.down { stroke-dasharray: 6 6; opacity: 0.7; }
|
|
|
|
.card { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
|
|
.node.self .card { stroke: var(--alive); stroke-width: 2; }
|
|
.node.down > :not(.card) { opacity: 0.6; }
|
|
.node.down .card { stroke-dasharray: 6 4; }
|
|
.dot.alive { fill: var(--alive); }
|
|
.dot.down { fill: var(--down); }
|
|
|
|
.t-title { fill: var(--text); font-size: 14px; font-weight: 600; }
|
|
.t-tag { fill: var(--muted); font-size: 11px; text-anchor: end; }
|
|
.t-sub { fill: var(--muted); font-size: 11px; }
|
|
.t-label { fill: var(--muted); font-size: 10.5px; letter-spacing: 0.04em; }
|
|
.t-value { fill: var(--text); font-size: 11px; text-anchor: end; }
|
|
.t-value.na { fill: var(--muted); }
|
|
.t-foot { fill: var(--muted); font-size: 10.5px; }
|
|
|
|
.track { fill: var(--track); }
|
|
.fill.ok { fill: var(--ok); }
|
|
.fill.warn { fill: var(--warn); }
|
|
.fill.crit { fill: var(--crit); }
|
|
|
|
.chip rect { fill: transparent; stroke: var(--line); stroke-width: 1.5; }
|
|
.chip text { fill: var(--muted); font-size: 10.5px; text-anchor: middle; }
|
|
.chip.held rect { stroke: var(--held); fill: color-mix(in srgb, var(--held) 14%, transparent); }
|
|
.chip.held text { fill: var(--text); font-weight: 600; }
|
|
.chip.duplicate rect { stroke: var(--duplicate); fill: color-mix(in srgb, var(--duplicate) 16%, transparent); }
|
|
.chip.duplicate text { fill: var(--text); font-weight: 600; }
|
|
.chip.unmet rect { stroke: var(--unmet); stroke-dasharray: 5 3; fill: color-mix(in srgb, var(--unmet) 12%, transparent); }
|
|
.chip.unmet text { fill: var(--unmet); font-weight: 600; }
|
|
.chip.unknown rect { stroke-dasharray: 2 3; }
|
|
.chip.more text { fill: var(--muted); }
|
|
|
|
.center-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
|
|
.center-box.bad { stroke: var(--unmet); }
|
|
.center-title { text-anchor: middle; }
|
|
|
|
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
|
|
.swatch { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
|
|
.swatch.alive { background: var(--alive); }
|
|
.swatch.down { background: var(--down); }
|
|
.swatch.held, .swatch.unmet, .swatch.duplicate, .swatch.general { border-radius: 6px; background: transparent; border: 2px solid; }
|
|
.swatch.general { border-color: var(--line); }
|
|
.swatch.link { width: 18px; height: 0; border-radius: 0; border: 0; border-top: 2.5px solid var(--line); vertical-align: 3px; }
|
|
.swatch.held { border-color: var(--held); }
|
|
.swatch.unmet { border-color: var(--unmet); border-style: dashed; }
|
|
.swatch.duplicate { border-color: var(--duplicate); }
|
|
|
|
footer { margin-top: 10px; }
|