175 lines
4.2 KiB
CSS
175 lines
4.2 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background: #0b0f14;
|
|
color: #f4f7fb;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(70, 120, 255, .14), transparent 32rem),
|
|
#0b0f14;
|
|
}
|
|
|
|
button { font: inherit; }
|
|
|
|
.shell {
|
|
width: min(980px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 48px 0 64px;
|
|
}
|
|
|
|
.header, .section-title, .control-card, .footer-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
|
|
.header { margin-bottom: 24px; }
|
|
|
|
h1, h2, p { margin-top: 0; }
|
|
h1 { margin-bottom: 6px; font-size: clamp(2rem, 5vw, 3.8rem); }
|
|
h2 { margin-bottom: 8px; }
|
|
p { color: #a9b4c2; line-height: 1.55; }
|
|
|
|
.eyebrow {
|
|
margin-bottom: 8px;
|
|
color: #7ea2ff;
|
|
font-size: .76rem;
|
|
font-weight: 800;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.subtitle { margin-bottom: 0; }
|
|
code { color: #d7e2ff; }
|
|
|
|
.panel {
|
|
border: 1px solid #26313d;
|
|
border-radius: 24px;
|
|
background: rgba(20, 27, 35, .88);
|
|
box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
|
|
padding: 28px;
|
|
}
|
|
|
|
.badge {
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
padding: 9px 14px;
|
|
font-size: .86rem;
|
|
font-weight: 800;
|
|
}
|
|
.badge--checking { background: #40391e; color: #f8d56b; }
|
|
.badge--online { background: #163b2a; color: #72e2a8; }
|
|
.badge--offline { background: #4a2025; color: #ff9da7; }
|
|
|
|
.section-title strong {
|
|
border-radius: 999px;
|
|
background: #1a222d;
|
|
padding: 9px 14px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.traffic-light {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.lamp {
|
|
border: 1px solid #303b47;
|
|
border-radius: 20px;
|
|
background: #111820;
|
|
color: #dfe6ef;
|
|
cursor: pointer;
|
|
padding: 24px 12px 18px;
|
|
transition: transform .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.lamp:hover { transform: translateY(-2px); border-color: #627086; }
|
|
.lamp:focus-visible, .toggle:focus-visible, .danger-button:focus-visible {
|
|
outline: 3px solid #7ea2ff;
|
|
outline-offset: 3px;
|
|
}
|
|
.lamp span {
|
|
display: block;
|
|
width: clamp(76px, 13vw, 130px);
|
|
aspect-ratio: 1;
|
|
margin: 0 auto 18px;
|
|
border-radius: 50%;
|
|
background: #242c35;
|
|
box-shadow: inset 0 0 30px rgba(0,0,0,.8);
|
|
opacity: .24;
|
|
}
|
|
.lamp.is-active { background: #17202a; border-color: #738197; }
|
|
.lamp.is-active span { opacity: 1; }
|
|
.lamp--red.is-active span { background: #ff3b4f; box-shadow: 0 0 42px rgba(255,59,79,.75); }
|
|
.lamp--yellow.is-active span { background: #ffd23f; box-shadow: 0 0 42px rgba(255,210,63,.72); }
|
|
.lamp--green.is-active span { background: #31df78; box-shadow: 0 0 42px rgba(49,223,120,.72); }
|
|
.lamp:disabled, .toggle:disabled, .danger-button:disabled { cursor: wait; opacity: .62; }
|
|
|
|
.controls-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.control-card p { margin-bottom: 0; }
|
|
|
|
.toggle {
|
|
min-width: 94px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #dbe4ee;
|
|
cursor: pointer;
|
|
}
|
|
.toggle__track {
|
|
display: block;
|
|
width: 66px;
|
|
height: 36px;
|
|
margin: 0 auto 8px;
|
|
border-radius: 999px;
|
|
background: #3a4552;
|
|
padding: 4px;
|
|
transition: background .18s ease;
|
|
}
|
|
.toggle__thumb {
|
|
display: block;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
transition: transform .18s ease;
|
|
}
|
|
.toggle[aria-checked="true"] .toggle__track { background: #2dca70; }
|
|
.toggle[aria-checked="true"] .toggle__thumb { transform: translateX(30px); }
|
|
|
|
.footer-actions { margin-top: 20px; }
|
|
.danger-button {
|
|
border: 1px solid #a8404c;
|
|
border-radius: 14px;
|
|
background: #511e25;
|
|
color: #ffdfe2;
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
padding: 13px 18px;
|
|
}
|
|
.message { margin: 0; text-align: right; }
|
|
.message.is-error { color: #ff9da7; }
|
|
|
|
@media (max-width: 700px) {
|
|
.shell { padding-top: 24px; }
|
|
.header, .section-title, .control-card, .footer-actions { align-items: flex-start; }
|
|
.header, .control-card, .footer-actions { flex-direction: column; }
|
|
.controls-grid { grid-template-columns: 1fr; }
|
|
.traffic-light { gap: 10px; }
|
|
.panel { padding: 20px; border-radius: 18px; }
|
|
.lamp { padding-inline: 6px; }
|
|
.message { text-align: left; }
|
|
}
|