54 lines
3.0 KiB
CSS
54 lines
3.0 KiB
CSS
<style>
|
|
:root { color-scheme: dark; }
|
|
html, body { height: 100%; margin: 0; }
|
|
body { background:#0a0a0a; }
|
|
|
|
.page { max-width:1400px; }
|
|
|
|
/* Glass */
|
|
.glass {
|
|
background: rgba(255,255,255,.05);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
border-radius: .9rem;
|
|
backdrop-filter: saturate(140%) blur(12px);
|
|
}
|
|
|
|
/* Chips */
|
|
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:.6rem;
|
|
font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;border:1px solid}
|
|
.chip-emerald{background:rgba(16,185,129,.15);color:#a7f3d0;border-color:rgba(16,185,129,.35)}
|
|
.chip-rose{background:rgba(244,63,94,.16);color:#fecaca;border-color:rgba(244,63,94,.35)}
|
|
.chip-amber{background:rgba(245,158,11,.18);color:#fde68a;border-color:rgba(245,158,11,.40)}
|
|
.chip-sky{background:rgba(56,189,248,.15);color:#bae6fd;border-color:rgba(56,189,248,.35)}
|
|
.chip-slate{background:rgba(148,163,184,.12);color:#cbd5e1;border-color:rgba(148,163,184,.30)}
|
|
|
|
/* Buttons */
|
|
.btn{font-size:11.5px;font-weight:700;border-radius:.7rem;padding:.46rem .65rem;
|
|
border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);transition:.18s}
|
|
.btn:hover{border-color:rgba(16,185,129,.45);box-shadow:0 0 0 1px rgba(16,185,129,.25) inset}
|
|
.btn-primary{background-image:linear-gradient(to right,#10b981,#14b8a6,#06b6d4);color:#fff;border-color:transparent}
|
|
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
|
|
.btn-danger{background:rgba(244,63,94,.15);color:#fecaca;border-color:rgba(244,63,94,.4)}
|
|
.btn-danger:hover{background:rgba(244,63,94,.25)}
|
|
.btn-icon{display:inline-flex;align-items:center;gap:.45rem}
|
|
|
|
.field{font-size:11px;color:#9ca3af}
|
|
.value{font-size:13px;font-weight:700;color:#e5e7eb}
|
|
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
|
|
|
|
/* Chamber selection highlight */
|
|
.chamber-card.paired{border-color:#34d399!important;box-shadow:0 0 0 2px rgba(52,211,153,.45)}
|
|
.chamber-card.pending{border-color:#60a5fa!important;box-shadow:0 0 0 2px rgba(96,165,250,.45)}
|
|
|
|
.door-pill{color:#fff;font-size:11px;font-weight:800;padding:2px 10px;border-radius:6px}
|
|
.door-open{background:#22c55e}.door-close{background:#ef4444}
|
|
|
|
/* Chamber header rail look */
|
|
.chamber-rail{position:relative;padding-top:.25rem;margin-top:-.5rem}
|
|
.chamber-rail:before,.chamber-rail:after{content:"";position:absolute;top:.7rem;height:2px;width:30%;background:rgba(16,185,129,.35)}
|
|
.chamber-rail:before{left:0}.chamber-rail:after{right:0}
|
|
.chamber-title{display:inline-block;padding:.15rem .6rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.15);
|
|
background:rgba(255,255,255,.05);font-weight:800;font-size:.8rem;letter-spacing:.03em}
|
|
.bat-id-big{font-size:15px;font-weight:800;border-radius:.5rem;padding:.35rem .55rem;
|
|
background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10)}
|
|
</style> |