Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2c3d78c99b84435ac061e45235553a876fef9cc5
Void-Homelab/public/style.css
root f780043f2d feat(ui): 2.0.0-alpha.13 — finer per-card width scaling (12-col grid + -/+ stepper) 
clock/weather etc. default to 1/6 width; sizes store an integer span 1-12
(legacy s/m/l still accepted by /api/dashboard/layout).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-04 18:23:37 +10:00

371 lines
22 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* Void 2.0 — Cradle / blackflame palette. Three-column grid shell. */
:root {
--bg: #0a0a0e;
--panel: #14141c;
--panel-2: #1c1c26;
--border: #2a2a36;
--text: #e8e6ed;
--muted: #888094;
--accent: #ff4f2e; /* blackflame */
--accent-dim:#7a2716;
--accent-soft:#3a1610;
--ok: #6fa86a;
--warn: #d4a04a;
--bad: #c45a4a;
--topbar-h: 48px;
--sidebar-w: 280px;
--rail-w: 360px;
--rail-w-min: 40px;
--font-display: 'Cinzel', 'Cormorant Garamond', serif;
--font-body: 'Cormorant Garamond', Georgia, serif;
--font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; }
#shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr var(--rail-w);
grid-template-rows: var(--topbar-h) 1fr;
grid-template-areas:
"topbar topbar topbar"
"sidebar main rail";
height: 100vh;
width: 100vw;
}
#shell.rail-collapsed { grid-template-columns: var(--sidebar-w) 1fr var(--rail-w-min); }
#topbar { grid-area: topbar; border-bottom: 1px solid var(--border); background: var(--panel); display: flex; align-items: center; padding: 0 16px; gap: 12px; }
#sidebar { grid-area: sidebar; border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; padding: 12px 0; }
#main { grid-area: main; overflow-y: auto; padding: 24px 32px; }
#rightrail{ grid-area: rail; border-left: 1px solid var(--border); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
/* topbar */
.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 13px; color: var(--accent); text-transform: uppercase; padding: 0 6px; }
.topbar-search { flex: 1; max-width: 520px; }
.topbar-search input {
width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
padding: 7px 10px; border-radius: 4px; font-family: var(--font-ui); font-size: 13px; outline: none;
}
.topbar-search input:focus { border-color: var(--accent-dim); }
.topbar-spacer { flex: 1; }
.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.icon-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.badge {
display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 8px;
background: var(--accent); color: var(--bg); font-size: 10px; font-weight: 700; text-align: center; margin-left: 4px;
}
/* sidebar */
.sb-section { padding: 8px 12px; }
.sb-title { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; padding: 6px 4px; }
.sb-item {
display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 3px; cursor: pointer;
color: var(--text); text-decoration: none; font-size: 13px;
}
.sb-item:hover { background: var(--panel-2); }
.sb-item.active { background: var(--accent-soft); color: var(--accent); }
.sb-item .caret { color: var(--muted); width: 10px; text-align: center; font-size: 10px; }
.sb-children { padding-left: 18px; }
/* rightrail */
.rail-toggle {
height: var(--topbar-h); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--muted); font-size: 11px;
}
.rail-body { flex: 1; padding: 14px 14px; overflow-y: auto; font-size: 13px; color: var(--muted); }
#shell.rail-collapsed .rail-body { display: none; }
/* main / views */
.view-h1 { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: 0.04em; margin: 0 0 4px; color: var(--text); }
.view-sub { color: var(--muted); margin-bottom: 24px; font-family: var(--font-body); font-size: 15px; }
.card {
background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; margin-bottom: 12px;
}
.card h3 { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; color: var(--accent); font-weight: 500; }
.row { display: flex; gap: 16px; }
.row > * { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.kbd { font-family: var(--font-mono); background: var(--panel-2); padding: 1px 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 11px; }
pre, code { font-family: var(--font-mono); font-size: 12px; }
pre { background: var(--panel-2); border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px; overflow-x: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
/* form */
input[type=text], input[type=password], textarea, select {
background: var(--bg); border: 1px solid var(--border); color: var(--text);
padding: 6px 8px; border-radius: 3px; font-family: var(--font-ui); font-size: 13px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent-dim); }
button.primary {
background: var(--accent-dim); color: var(--text); border: 1px solid var(--accent); padding: 6px 14px;
border-radius: 3px; cursor: pointer; font-family: var(--font-ui); font-size: 13px;
}
button.primary:hover { background: var(--accent); color: var(--bg); }
button.ghost {
background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 6px 12px;
border-radius: 3px; cursor: pointer; font-size: 13px;
}
button.ghost:hover { color: var(--text); border-color: var(--accent-dim); }
/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal {
background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 22px 24px; min-width: 380px; max-width: 520px;
}
.modal h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 12px; color: var(--accent); letter-spacing: 0.06em; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
/* lists */
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: none; }
/* badges (status) */
.status { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--border); color: var(--muted); }
.status.ok { color: var(--ok); border-color: var(--ok); }
.status.warn { color: var(--warn); border-color: var(--warn); }
.status.bad { color: var(--bad); border-color: var(--bad); }
.status.idle { color: var(--muted); }
/* search results */
.search-group { margin-bottom: 22px; }
.search-group .group-h { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; }
.search-hit { padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; margin-bottom: 6px; background: var(--panel); }
.search-hit .hit-meta { color: var(--muted); font-size: 11px; }
/* ── Plan 5: right-rail companion chat ──────────────────────────────────── */
.rail-chat { display:flex; flex-direction:column; height:100%; }
.rail-hd { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-bottom:1px solid var(--border,#262b38); }
.rail-hd .who { font-weight:600; color:var(--accent,#b69cff); }
.rail-hd .chev { cursor:pointer; color:#5b6478; }
.rail-log { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.turn { display:flex; flex-direction:column; max-width:84%; }
.turn .lbl { font-size:9.5px; letter-spacing:.12em; margin-bottom:3px; }
.turn .msg { line-height:1.4; padding:6px 10px; border-radius:8px; background:#141826; }
.turn.you { align-self:flex-end; align-items:flex-end; }
.turn.you .lbl { color:#6f7ce0; } .turn.you .msg { border-right:2px solid #6f7ce0; }
.turn.ai { align-self:flex-start; } .turn.ai .lbl { color:var(--accent,#b69cff); }
.turn.ai .msg { border-left:2px solid var(--accent,#b69cff); }
.tools { align-self:flex-start; }
.tools .chip { font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:#7d869b; }
.tools .chip.err { color:#e08a8a; }
.draftx { align-self:flex-start; max-width:90%; border:1px solid #3a2f5e; background:#1a1530; border-radius:9px; padding:9px 11px; }
.draftx .dh { font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:#9b7dff; }
.draftx .dt { color:#e3e0f5; margin:4px 0 9px; }
.draftx .row { display:flex; gap:6px; }
.draftx .ok { background:#2a6f4f; color:#d9ffe9; border:none; border-radius:6px; padding:4px 12px; }
.draftx .no { background:#2a2f3d; color:#aeb6c7; border:none; border-radius:6px; padding:4px 12px; }
.draftx.resolved { opacity:.55; } .resolved-tag { font-size:10px; text-transform:uppercase; color:#7d869b; margin-top:6px; }
.rail-inputwrap { border-top:1px solid var(--border,#262b38); padding:9px 12px; }
.rail-input { width:100%; resize:none; background:#0c0e14; color:#c9d1e0; border:1px solid #262b38; border-radius:8px; padding:7px 9px; }
.err { color:#e08a8a; font-size:12px; }
#shell.rail-collapsed .rail-chat { display:none; }
/* ===== Sacred Valley (Plan 6) ===== */
:root {
--lb: #7dd3d8; /* Little Blue cyan */
/* reserved for a future agent-output phase — unused now:
--hue-dross: #ff4f2e; --hue-yerin: #c45a4a; --hue-orthos: #6fa86a; */
}
#sv-cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
.sv-card { grid-column: span 6; } /* fallback; svCard sets an inline span (1–12) */
@media (max-width: 700px) { #sv-cards { grid-template-columns: 1fr; } .sv-card { grid-column: 1 / -1 !important; } }
.sv-ed-span { display: inline-flex; align-items: center; gap: 3px; }
.sv-ed-step { width: 18px; height: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted);
border-radius: 3px; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.sv-ed-step:hover { color: var(--accent); border-color: var(--accent-dim); }
.sv-span-val { font-family: var(--font-mono); font-size: 11px; color: var(--text); min-width: 14px; text-align: center; }
.sv-card {
position: relative; border: 1px solid #2c242a; border-radius: 10px; padding: 16px 18px;
background: radial-gradient(120% 90% at 100% 0%, rgba(255,79,46,.05), transparent 55%),
linear-gradient(160deg, #16131a, #0f0d12);
box-shadow: inset 0 0 30px rgba(255,79,46,.015);
transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.sv-card::after {
content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 1px, transparent 1px 9px);
mix-blend-mode: overlay;
}
.sv-card:hover {
border-color: #4a2c28; transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 46px rgba(255,79,46,.06), 0 0 0 1px rgba(255,79,46,.10);
}
.sv-card.dragging { opacity: .5; }
.sv-card.drag-over { border-color: var(--accent); }
.sv-card-title {
font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text); padding-bottom: 7px; margin-bottom: 12px;
border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--accent), transparent 60%) 1;
cursor: grab;
}
.sv-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; margin: 7px 0; }
.sv-row .k { color: var(--muted); letter-spacing: .04em; }
.sv-bar { height: 5px; border-radius: 3px; background: #221820; overflow: hidden; margin-top: 3px; }
.sv-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: box-shadow .35s; }
.sv-card:hover .sv-bar > i { box-shadow: 0 0 9px rgba(255,79,46,.55); }
.sv-search-input{width:100%;background:#0d0d13;border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--font-mono);font-size:12px}
.sv-run{background:var(--accent-soft);border:1px solid var(--accent-dim);color:var(--accent);border-radius:5px;padding:3px 10px;font-family:var(--font-ui);font-size:11px;cursor:pointer}
/* ===== Little Blue health band (Task 22) ===== */
#sv-health { margin-top: 28px; }
.lbwrap { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lb-av { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(125,211,216,.4)); animation: lb-bob 4s ease-in-out infinite; }
@keyframes lb-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.lb-name { font-family: var(--font-display); letter-spacing: .08em; font-size: 15px; color: var(--text); }
.lb-sub { font-family: var(--font-body); font-style: italic; color: var(--lb); font-size: 14px; }
.lb-group { margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; }
.lb-group .gname { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); }
.lb-group .gcount { font-family: var(--font-mono); font-size: 10px; color: var(--lb); }
.lb-group .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(125,211,216,.25), transparent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
background: linear-gradient(160deg, #14141c, #101017); text-decoration: none; color: var(--text); transition: border-color .25s, transform .25s; }
.tile:hover { transform: translateY(-2px); border-color: #37404a; }
.tile-icon, .tile-icon-fb { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.tile-icon-fb { display: grid; place-items: center; background: #20202a; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.tile-main { flex: 1; min-width: 0; }
.tile-nm { font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.tile-host { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; }
.tile .dot { width: 8px; height: 8px; border-radius: 50%; }
.tile.status-ok .dot { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.tile.status-warn .dot { background: var(--warn); box-shadow: 0 0 7px var(--warn); }
.tile.status-down .dot { background: var(--bad); box-shadow: 0 0 7px var(--bad); }
.tile.status-unknown .dot { background: var(--muted); }
.tile-go { color: var(--lb); font-size: 11px; opacity: 0; transition: opacity .25s; }
.tile:hover .tile-go { opacity: 1; }
/* ===== Collapsible chrome + responsive layout (Plan 6 polish) ===== */
:root { --sidebar-w-min: 0px; }
#shell { transition: grid-template-columns .22s ease; }
#sidebar, #rightrail { transition: transform .22s ease; }
/* Desktop collapse — shrink the grid columns */
#shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr var(--rail-w); }
#shell.sidebar-collapsed.rail-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr var(--rail-w-min); }
#shell.rail-collapsed { grid-template-columns: var(--sidebar-w) 1fr var(--rail-w-min); }
#shell.sidebar-collapsed #sidebar { overflow: hidden; border-right: none; }
/* Hide chat body when the rail is collapsed so the thin strip stays clean */
#shell.rail-collapsed .rail-chat { display: none; }
/* Topbar toggle buttons */
.chrome-toggle {
background: transparent; border: 1px solid var(--border); color: var(--text);
width: 34px; height: 30px; border-radius: 4px; cursor: pointer; font-size: 15px; line-height: 1; flex: none;
}
.chrome-toggle:hover { border-color: var(--accent-dim); color: var(--accent); }
/* Scrim behind mobile drawers */
#scrim {
position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(0,0,0,.5);
z-index: 40; opacity: 0; pointer-events: none; transition: opacity .22s;
}
body.drawer-open #scrim { opacity: 1; pointer-events: auto; }
/* Hide the chat-only toggle button on wide screens (rail has its own strip);
show it on narrow screens where the rail is an off-canvas drawer. */
.rail-toggle-btn { display: none; }
/* ---- Narrow / mobile / vertical: off-canvas drawers, single-column main ---- */
@media (max-width: 860px) {
#shell,
#shell.sidebar-collapsed,
#shell.rail-collapsed,
#shell.sidebar-collapsed.rail-collapsed {
grid-template-columns: 1fr;
grid-template-areas: "topbar" "main";
}
#sidebar, #rightrail {
position: fixed; top: var(--topbar-h); bottom: 0; z-index: 50;
}
#sidebar { left: 0; width: min(82vw, 300px); transform: translateX(-100%); border-right: 1px solid var(--border); }
#rightrail{ right: 0; width: min(90vw, 360px); transform: translateX(100%); }
/* A drawer is OPEN when its collapse class is absent */
#shell:not(.sidebar-collapsed) #sidebar { transform: translateX(0); box-shadow: 6px 0 28px rgba(0,0,0,.6); }
#shell:not(.rail-collapsed) #rightrail{ transform: translateX(0); box-shadow: -6px 0 28px rgba(0,0,0,.6); }
#shell:not(.rail-collapsed) .rail-chat { display: flex; flex-direction: column; height: 100%; }
#main { padding: 16px 18px; }
.topbar-search { max-width: none; }
.rail-toggle-btn { display: inline-block; }
}
/* Very narrow phones — tighten the topbar so toggles + search fit */
@media (max-width: 520px) {
#topbar { padding: 0 8px; gap: 8px; }
.brand { display: none; }
#main { padding: 14px 12px; }
/* Sacred Valley cards already collapse to 1 column at <=900px (see grid rules) */
}
/* ===== Network · Devices band (separate from Little Blue's health band) ===== */
#sv-devices { margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--border); }
.dv-hd { display: flex; align-items: baseline; gap: 12px; }
.dv-title { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--muted); }
.dv-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.dv-note { font-family: var(--font-body); font-style: italic; color: var(--muted); font-size: 13px; margin: 4px 0 6px; opacity: .8; }
.dv-section { margin-top: 12px; }
.dv-group { display: flex; align-items: center; gap: 10px; margin: 10px 0 7px; }
.dv-group .gname { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--muted); }
.dv-group .gcount { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.dv-group .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.dv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dv-tile {
border: 1px solid var(--border); border-radius: 7px; padding: 8px 11px; background: #101017;
display: flex; flex-direction: column; gap: 2px;
}
.dv-tile .dv-nm { font-family: var(--font-ui); font-size: 12px; color: var(--text); }
.dv-tile .dv-ip { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dv-tile .dv-vendor { font-family: var(--font-ui); font-size: 10px; color: var(--muted); opacity: .7; }
.dv-tile.flag { border-color: var(--bad); background: #1a1012; }
.dv-tile.flag .dv-nm { color: var(--bad); }
/* ===== Discovered services + scan (Plan: DB-backed registry) ===== */
.lb-scan { background: var(--accent-soft); border: 1px solid var(--accent-dim); color: var(--accent);
border-radius: 5px; padding: 4px 12px; font-family: var(--font-ui); font-size: 11px; cursor: pointer; flex: none; }
.lb-scan:hover { background: var(--accent-dim); color: var(--text); }
.tile.disc { border-style: dashed; }
.disc-add { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; flex: none;
border: 1px solid var(--accent-dim); background: transparent; color: var(--accent); font-size: 14px; line-height: 1; cursor: pointer; }
.disc-add:hover { background: var(--accent); color: var(--bg); }
/* ===== Sacred Valley — edit layout mode ===== */
.sv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sv-toolbar { display: flex; gap: 8px; flex: none; }
.sv-edit-btn, .sv-reset-btn { background: transparent; border: 1px solid var(--border); color: var(--text);
padding: 5px 12px; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 12px; }
.sv-edit-btn:hover, .sv-reset-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.sv-card-title { cursor: default; } /* drag is via the grip now, not the title */
.sv-card-edit { position: absolute; top: 6px; right: 8px; z-index: 3; display: none; align-items: center; gap: 6px;
background: rgba(10,10,14,.88); border: 1px solid var(--border); border-radius: 6px; padding: 3px 5px; }
#sv-cards.editing .sv-card-edit { display: flex; }
#sv-cards.editing .sv-card { outline: 1px dashed var(--accent-dim); }
.sv-grip { cursor: grab; color: var(--muted); font-size: 13px; padding: 0 2px; user-select: none; }
.sv-grip:active { cursor: grabbing; }
.sv-ed-sizes { display: flex; gap: 2px; }
.sv-ed-size, .sv-ed-hide { width: 20px; height: 20px; border: 1px solid var(--border); background: transparent;
border-radius: 3px; font-size: 10px; cursor: pointer; padding: 0; line-height: 1; }
.sv-ed-size { color: var(--muted); }
.sv-ed-size:hover { color: var(--accent); border-color: var(--accent-dim); }
.sv-card[data-size="s"] .sv-ed-size[data-s="s"],
.sv-card[data-size="m"] .sv-ed-size[data-s="m"],
.sv-card[data-size="l"] .sv-ed-size[data-s="l"] { background: var(--accent-dim); color: var(--text); border-color: var(--accent); }
.sv-ed-hide { color: var(--bad); font-size: 11px; }
.sv-ed-hide:hover { background: var(--bad); color: var(--bg); }
#sv-tray { flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 18px; padding: 10px 12px;
border: 1px dashed var(--border); border-radius: 8px; }
.sv-tray-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--muted); }
.sv-tray-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 14px;
padding: 4px 10px; font-family: var(--font-ui); font-size: 11px; cursor: pointer; }
.sv-tray-chip:hover { border-color: var(--accent); color: var(--accent); }
Reference in New Issue View Git Blame Copy Permalink