39 lines
2.2 KiB
CSS
39 lines
2.2 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg:#0b1220;
|
|
--panel:#121a2b;
|
|
--panel-2:#182338;
|
|
--text:#ecf3ff;
|
|
--muted:#a8b6cf;
|
|
--line:#263247;
|
|
--accent:#16c7b7;
|
|
--danger:#dc5d68;
|
|
--warn:#e0a648;
|
|
--ok:#2bb673;
|
|
}
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; font-family:Inter,system-ui,sans-serif; background:linear-gradient(180deg,#09101d,#0e1728); color:var(--text); }
|
|
.wrap { max-width:1200px; margin:0 auto; padding:24px; }
|
|
.card { background:rgba(18,26,43,.92); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
|
|
.hero { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:20px; }
|
|
.grid { display:grid; gap:20px; }
|
|
.grid.two { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-bottom:20px; }
|
|
.stack { display:grid; gap:12px; }
|
|
.actions, .row-actions { display:flex; gap:10px; flex-wrap:wrap; }
|
|
input, select, button { width:100%; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); padding:12px 14px; }
|
|
button { width:auto; cursor:pointer; }
|
|
button.primary { background:var(--accent); color:#06231f; border-color:transparent; font-weight:700; }
|
|
button.danger { background:var(--danger); color:white; border-color:transparent; }
|
|
table { width:100%; border-collapse:collapse; }
|
|
th, td { text-align:left; padding:12px; border-top:1px solid var(--line); vertical-align:top; }
|
|
.table-wrap { overflow:auto; }
|
|
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#25324a; border:1px solid var(--line); }
|
|
.badge.active { background:rgba(43,182,115,.15); color:#92efbf; border-color:rgba(43,182,115,.35); }
|
|
.badge.inactive, .badge.failed { background:rgba(224,166,72,.12); color:#ffd28b; border-color:rgba(224,166,72,.35); }
|
|
.badge.muted { color:var(--muted); }
|
|
.flash { padding:12px 14px; border-radius:12px; margin-bottom:12px; }
|
|
.flash.success { background:rgba(43,182,115,.14); border:1px solid rgba(43,182,115,.3); }
|
|
.flash.error { background:rgba(220,93,104,.14); border:1px solid rgba(220,93,104,.3); }
|
|
p { color:var(--muted); }
|
|
@media (max-width: 760px) { .hero { flex-direction:column; } th:nth-child(6), td:nth-child(6) { display:none; } }
|