138 lines
5.7 KiB
CSS
138 lines
5.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ====== POLISH PACK (drop-in) ========================================== */
|
|
|
|
/* Subtle app background movement */
|
|
body::before,
|
|
body::after{
|
|
content:"";
|
|
position:fixed; inset:auto;
|
|
width:34rem; height:34rem; filter:blur(70px);
|
|
pointer-events:none; z-index:-1; opacity:.18;
|
|
border-radius:9999px;
|
|
}
|
|
body::before{ left:-12rem; top:-10rem; background:radial-gradient(ellipse at center,#10b98155 0%,#10b98100 60%);}
|
|
body::after{ right:-14rem; bottom:-12rem; background:radial-gradient(ellipse at center,#06b6d455 0%,#06b6d400 60%);}
|
|
|
|
/* ---------- Header chips & status row ---------- */
|
|
.header-chip{
|
|
--bg: rgba(255,255,255,.06);
|
|
--bd: rgba(255,255,255,.14);
|
|
--fg: #e5e7eb;
|
|
display:inline-flex; align-items:center; gap:.4rem;
|
|
padding:.35rem .6rem; border-radius:.65rem;
|
|
border:1px solid var(--bd); background:var(--bg); color:var(--fg);
|
|
font-weight:700; font-size:.72rem; letter-spacing:.02em;
|
|
box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
|
|
transition:filter .18s ease, transform .18s ease, border-color .18s ease;
|
|
}
|
|
.header-chip svg{ width:.9rem; height:.9rem; opacity:.9 }
|
|
.header-chip:hover{ filter:brightness(1.06); border-color:#34d39955 }
|
|
|
|
/* Variants */
|
|
.header-chip--online{ --bg:rgba(16,185,129,.15); --bd:rgba(16,185,129,.35); --fg:#a7f3d0 }
|
|
.header-chip--backup{ --bg:rgba(245,158,11,.12); --bd:rgba(245,158,11,.35); --fg:#fde68a }
|
|
.header-chip--warn{ --bg:rgba(244,63,94,.12); --bd:rgba(244,63,94,.4); --fg:#fecaca }
|
|
|
|
/* ---------- Chamber cards ---------- */
|
|
.chamber-card{
|
|
border:1px solid rgba(255,255,255,.10);
|
|
background:linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.35));
|
|
border-radius:14px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
|
|
display:flex; flex-direction:column; min-height: 225px;
|
|
}
|
|
.chamber-card:hover{
|
|
border-color:#34d39966;
|
|
box-shadow:0 6px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(16,185,129,.15) inset;
|
|
transform:translateY(-1px);
|
|
}
|
|
|
|
/* keep all 9 chambers equal height inside the grid */
|
|
#chambersGrid{ align-content:start }
|
|
#chambersGrid > * { min-height: 0 } /* fix Firefox grid stretching */
|
|
|
|
/* Chamber title bar */
|
|
.chamber-card .title-bar{
|
|
display:flex; align-items:center; justify-content:center;
|
|
gap:.5rem; padding:.35rem .5rem; margin:-.25rem -.25rem .4rem;
|
|
border-bottom:1px solid rgba(255,255,255,.08);
|
|
}
|
|
.chamber-card .title-chip{
|
|
font-weight:800; font-size:.78rem; letter-spacing:.02em;
|
|
background:rgba(20,83,45,.35); color:#bbf7d0;
|
|
padding:.25rem .55rem; border-radius:.5rem; border:1px solid rgba(16,185,129,.35);
|
|
box-shadow:0 0 0 1px rgba(16,185,129,.12) inset;
|
|
}
|
|
|
|
/* BAT ID emphasis row */
|
|
.bat-id-row{
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
gap:.75rem; padding:.4rem .55rem; border-radius:.55rem;
|
|
border:1px dashed rgba(255,255,255,.14);
|
|
background:rgba(2,6,23,.35);
|
|
}
|
|
.bat-id-row .label{ color:#93a3af; font-size:.7rem; font-weight:700; letter-spacing:.03em }
|
|
.bat-id-row .value{
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-weight:800; font-size:.9rem; letter-spacing:.06em;
|
|
color:#e5fff4; text-shadow:0 0 12px rgba(16,185,129,.25);
|
|
}
|
|
|
|
/* Two-column “key: value” rows inside a chamber */
|
|
.kv{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem }
|
|
.kv .k{ color:#9ca3af; font-size:.72rem; }
|
|
.kv .v{ color:#e5e7eb; font-weight:700; font-size:.85rem }
|
|
|
|
/* Pills (battery / charger status) */
|
|
.pill{ padding:.28rem .5rem; border-radius:.5rem; border:1px solid; font-weight:800; font-size:.7rem; letter-spacing:.02em }
|
|
.pill--ok{ background:rgba(16,185,129,.15); color:#a7f3d0; border-color:rgba(16,185,129,.35) }
|
|
.pill--idle{ background:rgba(148,163,184,.12); color:#cbd5e1; border-color:rgba(148,163,184,.35) }
|
|
.pill--bad{ background:rgba(244,63,94,.16); color:#fecaca; border-color:rgba(244,63,94,.38) }
|
|
.pill--sky{ background:rgba(56,189,248,.15); color:#bae6fd; border-color:rgba(56,189,248,.38) }
|
|
|
|
/* Door chip */
|
|
.door-chip{ color:#fff; font-weight:800; font-size:.72rem; padding:.22rem .55rem; border-radius:.45rem }
|
|
.door-chip--open{ background:#22c55e }
|
|
.door-chip--closed{ background:#ef4444 }
|
|
|
|
/* Action buttons inside card */
|
|
.card-actions .btn{
|
|
font-size:.72rem; font-weight:800; padding:.45rem .55rem; border-radius:.6rem;
|
|
border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
|
|
}
|
|
.card-actions .btn:hover{ border-color:#34d39966; box-shadow:0 0 0 1px rgba(52,211,153,.2) inset }
|
|
|
|
/* ---------- Right column (panels) ---------- */
|
|
.panel{
|
|
border:1px solid rgba(255,255,255,.10);
|
|
background:linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.35));
|
|
border-radius:14px;
|
|
}
|
|
.panel h3{ font-weight:800; letter-spacing:.02em }
|
|
|
|
/* Station reset emphasis */
|
|
#station-reset-btn{
|
|
border:1px solid rgba(244,63,94,.45)!important; color:#fecaca!important; background:rgba(244,63,94,.08)!important;
|
|
}
|
|
#station-reset-btn:hover{ background:rgba(244,63,94,.18)!important; box-shadow:0 0 0 2px rgba(244,63,94,.25) inset }
|
|
|
|
/* Instance log terminal feel */
|
|
.instance-log{
|
|
background:#020617; color:#d1fae5; border:1px solid rgba(16,185,129,.15);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size:.78rem; line-height:1.35; border-radius:.6rem; padding:.75rem;
|
|
box-shadow:inset 0 1px 0 rgba(16,185,129,.06);
|
|
}
|
|
|
|
/* Nice thin scrollbars (Chrome/Edge) */
|
|
*::-webkit-scrollbar{ height:10px; width:10px }
|
|
*::-webkit-scrollbar-thumb{ background:linear-gradient(#1f2937,#111827); border:2px solid #0b1220; border-radius:12px }
|
|
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#243041,#131a2a) }
|
|
|
|
/* Motion-reduction respect */
|
|
@media (prefers-reduced-motion: reduce){
|
|
.header-chip, .chamber-card{ transition:none }
|
|
}
|