103 lines
8.5 KiB
CSS
103 lines
8.5 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background: #07151d;
|
|
color: #d8e3e3;
|
|
--ink: #07151d;
|
|
--panel: #0b202a;
|
|
--panel-deep: #081a23;
|
|
--rule: #27434b;
|
|
--rule-strong: #3c6269;
|
|
--muted: #7f999d;
|
|
--signal: #52c8bc;
|
|
--blue: #5aa9d6;
|
|
--warn: #d6a85a;
|
|
--bad: #db7770;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
|
|
body {
|
|
min-width: 1280px;
|
|
background-color: var(--ink);
|
|
background-image:
|
|
linear-gradient(rgba(85, 126, 134, .045) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(85, 126, 134, .045) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
}
|
|
|
|
.ocean-background { display: none; }
|
|
.dashboard { height: 100vh; padding: 0 26px 24px; display: grid; grid-template-rows: 74px 102px minmax(0, 1fr); gap: 12px; }
|
|
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule-strong); }
|
|
.dev-link { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 9px; padding: 9px 13px 8px 15px; transform: translate(-50%, -50%); border: 1px solid var(--rule-strong); color: #9cb3b6; background: #0a1c25; box-shadow: inset 2px 0 0 var(--signal); font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
|
|
.dev-link b { color: var(--signal); font-size: 13px; font-weight: 400; line-height: .7; }
|
|
.dev-link:hover, .dev-link:focus-visible { border-color: var(--signal); color: #e0f5f2; background: #102b34; outline: none; }
|
|
.brand { display: flex; align-items: center; gap: 12px; }
|
|
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule-strong); }
|
|
.brand-mark svg { width: 24px; fill: none; stroke: var(--signal); stroke-width: 1.7; stroke-linecap: square; }
|
|
.eyebrow, .card-label { margin: 0 0 4px; color: var(--muted); font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .15em; text-transform: uppercase; }
|
|
h1 { margin: 0; font-size: 22px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
|
|
.clock-block { text-align: right; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
.clock-block span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
|
|
.clock-block strong { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
|
|
|
|
.glass { border: 1px solid var(--rule); background: var(--panel); box-shadow: none; backdrop-filter: none; }
|
|
.status-grid { display: grid; grid-template-columns: .72fr 1.48fr 1.1fr; gap: 12px; }
|
|
.status-card { position: relative; min-width: 0; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-radius: 0; }
|
|
.status-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 54px; height: 2px; background: var(--signal); }
|
|
.status-card strong { display: block; font: 600 16px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
.status-card > div > span:not(.indicator) { color: var(--muted); font-size: 10px; }
|
|
.status-icon { display: none; }
|
|
.version-card { justify-content: flex-start; border-left-color: var(--rule-strong); }
|
|
.version-card strong { color: var(--bad); text-transform: uppercase; }
|
|
.probes { display: flex; align-items: center; gap: 34px; }
|
|
.probe { display: flex; align-items: center; gap: 10px; }
|
|
.probe b { display: block; font: 600 11px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
|
|
.probe time { display: block; width: 132px; margin-top: 4px; color: var(--muted); font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
.indicator { width: 8px; height: 8px; border-radius: 50%; background: #64747a; transition: background-color .2s ease; }
|
|
.indicator.ok { background: var(--signal); box-shadow: none; }
|
|
.indicator.bad { background: var(--bad); box-shadow: none; }
|
|
.error-card strong { font-size: 27px; font-weight: 500; font-variant-numeric: tabular-nums; }
|
|
.error-rate { min-width: 144px; padding-left: 18px; border-left: 1px solid var(--rule); text-align: left; }
|
|
.error-rate > span { display: block; color: var(--signal); font: 500 20px ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
|
|
.error-rate small { color: var(--muted); font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
|
|
.error-rate em { display: block; margin-top: 7px; color: #9cb0b2; font-size: 9px; font-style: normal; }
|
|
|
|
.workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(400px, .85fr); gap: 12px; }
|
|
.map-card, .telemetry-card { position: relative; min-height: 0; overflow: hidden; border-radius: 0; }
|
|
.panel-heading { height: 66px; padding: 14px 16px 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); background: var(--panel-deep); }
|
|
.panel-heading h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
|
|
.panel-meta { display: flex; gap: 18px; }
|
|
.panel-meta span, .connection-pill { padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
|
|
.panel-meta span + span { padding-left: 18px; border-left: 1px solid var(--rule); }
|
|
#map { height: calc(100% - 66px); background: #091b24; transition: opacity .2s ease; }
|
|
#map::before { content: ""; position: absolute; inset: 0; z-index: 200; pointer-events: none; background-image: linear-gradient(rgba(96,137,143,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(96,137,143,.1) 1px, transparent 1px); background-size: 64px 64px; }
|
|
.map-card.stale #map { filter: saturate(.3) brightness(.72); }
|
|
.quiet-state { position: absolute; left: 16px; bottom: 14px; z-index: 500; padding: 6px 9px; border: 1px solid var(--rule-strong); color: #9db0b2; background: rgba(7, 21, 29, .92); font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
|
|
.quiet-state.hidden { opacity: 0; }
|
|
.leaflet-container { font-family: Arial, Helvetica, sans-serif; }
|
|
.leaflet-control-attribution { color: #6b8589 !important; background: rgba(7,21,29,.84) !important; font-size: 8px !important; }
|
|
.leaflet-control-attribution a { color: #83a5a8 !important; }
|
|
.landmass { fill: #183640; fill-opacity: .72; stroke: #41636a; stroke-width: .7; }
|
|
.buoy-marker { width: 9px; height: 9px; border: 1px solid #d9fffa; border-radius: 50%; background: var(--signal); animation: pulse 2s steps(2, end) infinite; }
|
|
@keyframes pulse { 50% { outline: 4px solid rgba(82, 200, 188, .22); } }
|
|
|
|
.telemetry-card { display: grid; grid-template-rows: 66px 28px minmax(0, 1fr) 72px; }
|
|
.connection-pill::before { content: "●"; margin-right: 6px; }
|
|
.connection-pill.online { color: var(--signal); }
|
|
.connection-pill.degraded { color: var(--warn); }
|
|
.connection-pill.offline { color: var(--bad); }
|
|
.legend { display: flex; align-items: center; gap: 24px; padding: 0 16px; border-bottom: 1px solid rgba(39,67,75,.65); color: var(--muted); font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
|
|
.legend span::before { content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 7px 2px 0; background: var(--signal); }
|
|
.legend .waves::before { background: var(--blue); }
|
|
.chart-wrap { min-height: 0; padding: 8px 10px 0; transition: opacity .2s ease; }
|
|
.telemetry-card.stale .chart-wrap { opacity: .35; }
|
|
#readings-chart { width: 100%; height: 100%; }
|
|
.telemetry-summary { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border-top: 1px solid var(--rule); background: var(--panel-deep); }
|
|
.telemetry-summary div { padding: 11px 13px; border-right: 1px solid var(--rule); }
|
|
.telemetry-summary div:last-child { border: 0; }
|
|
.telemetry-summary span { display: block; color: var(--muted); font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
|
|
.telemetry-summary strong { display: inline-block; margin-top: 5px; font: 500 17px ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
|
|
.telemetry-summary small { margin-left: 3px; color: var(--muted); font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
|
|
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
|