/* HOLO-3: glass panes, orange = active, cyan = open in background, white = hover */ :root, :root[data-theme="holo3"] { /* ── Knob defaults (Settings overrides these per skin) ── */ --s-opacity: 30; --s-blur: 40; --s-border: 90; --s-glow: 50; --s-spread: 10; /* ── Glass, from the knobs ── */ --window-bg: rgba(20, 35, 60, calc(var(--s-opacity) / 100)); --window-border: rgba(200, 235, 255, calc(var(--s-border) / 100)); --window-border-w: 1px; --window-glow: rgba(200, 235, 255, calc(var(--s-glow) / 100 * 0.6)); --window-text: #d8ecff; --window-text-muted: rgba(216, 236, 255, 0.55); --window-blur: calc(var(--s-blur) * 1px); --glass-filter: blur(var(--window-blur)) saturate(130%); --window-shadow: 0 0 calc(var(--s-spread) * 1px) rgba(120, 200, 255, calc(var(--s-glow) / 100)), 0 0 calc(var(--s-spread) * 2.5px) rgba(80, 170, 240, calc(var(--s-glow) / 100 * 0.65)), 0 12px 24px rgba(0, 0, 0, 0.45), 0 20px 60px rgba(0, 0, 0, 0.5); --text-shadow: none; --dock-bg: var(--window-bg); --dock-border: var(--window-border); --dock-glow: 0 0 8px rgba(120, 200, 255, calc(var(--s-glow) / 100 * 1.2)); /* ── Meaning ── */ --accent: #7fd8ff; --active: #ff6a1a; --active-text: #ffcfa8; --hover-text: #ffffff; --edge: rgba(180, 230, 255, 0.9); --text-faint: rgba(216, 236, 255, 0.32); --separator: rgba(200, 235, 255, 0.35); /* ── Controls ── */ --ctl-bg: rgba(10, 20, 40, 0.25); --ctl-edge: inset 0 0 0 1px rgba(200, 230, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1); --ctl-edge-hover: inset 0 0 0 1px rgba(200, 230, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); --selected-bg: rgba(25, 15, 10, 0.22); --selected-edge: inset 0 0 0 1px rgba(255, 90, 26, 0.95), inset 0 0 0 2px rgba(255, 231, 194, 0.95), inset 0 0 0 3px rgba(255, 106, 26, 0.9), inset 2px 0 0 rgba(255, 220, 180, 0.9), inset 4px 0 6px -2px rgba(255, 180, 110, 0.7), 0 0 2px rgba(255, 160, 80, 0.95), 0 0 6px rgba(255, 106, 26, 0.75), 0 0 14px rgba(255, 90, 20, 0.55), inset 0 0 10px rgba(255, 160, 80, 0.75), inset 0 0 28px rgba(255, 106, 26, 0.55), inset 0 0 60px rgba(180, 50, 20, 0.3); --row-bg: rgba(10, 25, 45, 0.18); --row-edge: inset 0 0 0 1px rgba(200, 230, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12); --row-hover-bg: rgba(20, 40, 70, 0.25); --row-edge-hover: inset 0 0 0 1px rgba(200, 230, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); --msg-bg: rgba(10, 25, 45, 0.22); --msg-edge: inset 0 0 0 1px rgba(200, 235, 255, 0.14); --msg-edge-hover: inset 0 0 0 1px rgba(200, 235, 255, 0.3); --msg-open-bg: rgba(5, 10, 22, 0.6); --msg-open-edge: inset 0 0 0 1px rgba(200, 235, 255, 0.22); --chip-bg: rgba(5, 15, 30, 0.45); --chip-edge: inset 0 0 0 1px rgba(127, 216, 255, 0.85), 0 0 6px rgba(127, 216, 255, 0.25); --dash-color: rgba(127, 216, 255, 0.7); --dash-edge: inset 0 0 0 1px rgba(200, 235, 255, 0.14); --add-edge: inset 0 0 0 1px rgba(127, 216, 255, 0.75), inset 0 0 10px rgba(127, 216, 255, 0.18), 0 0 8px rgba(127, 216, 255, 0.25); --add-edge-hover: inset 0 0 0 1px rgba(180, 235, 255, 1), inset 0 0 14px rgba(127, 216, 255, 0.3), 0 0 12px rgba(127, 216, 255, 0.4); --active-glow: 0 0 4px rgba(255, 150, 70, 0.8); --title-shadow: 0 0 12px rgba(127, 216, 255, 0.6), 0 0 2px rgba(255, 255, 255, 0.6); --select-arrow: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237fd8ff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); --hit-bg: rgba(163, 113, 247, 0.4); --sig-done: #3dff9a; --sig-attention: #ffc94a; --sig-answer: #ffffff; --sig-working: #7fd8ff; --sig-dispatch: #ffb37a; --sig-watchdog: #c878ff; /* ── Dock button states ── */ --nav-icon: var(--edge); --nav-sleep-icon: #c8ecff; --nav-sleep-glow-1: rgba(180, 230, 255, 0.9); --nav-sleep-glow-2: rgba(120, 200, 255, 0.6); --nav-sleep-strip-core: rgba(230, 245, 255, 1); --nav-sleep-strip-edge: rgba(140, 210, 255, 0.95); --nav-sleep-strip-glow-1: rgba(140, 215, 255, 1); --nav-sleep-strip-glow-2: rgba(110, 195, 255, 0.75); --nav-sleep-strip-opacity: 0.75; --nav-active-icon: #ffcfa8; --nav-active-glow-1: rgba(255, 245, 225, 0.65); --nav-active-glow-2: rgba(255, 130, 50, 0.5); --nav-wash: rgba(255, 150, 70, 0.32); --nav-shade-a: rgba(0, 0, 0, 0.27); --nav-shade-b: rgba(0, 0, 0, 0.22); --nav-shade-c: rgba(0, 0, 0, 0.18); --nav-hover-glow-1: rgba(220, 240, 255, 0.7); --nav-hover-glow-2: rgba(180, 220, 255, 0.4); --lane-bg: linear-gradient(180deg, rgba(255, 200, 140, 0.95) 0%, rgba(255, 245, 220, 1) 50%, rgba(255, 200, 140, 0.95) 100%); --lane-shadow: 1px 0 4px rgba(255, 220, 180, 1), 5px 0 15px rgba(255, 150, 70, 1), 9px 0 27px rgba(255, 130, 50, 0.75); --lane-shadow-travel: 1px 0 5px rgba(255, 230, 190, 1), 7px 0 19px rgba(255, 150, 70, 1), 12px 0 34px rgba(255, 130, 50, 0.9); /* ── Neon sign: tooltips (violet) and badges (orange) ── */ --neon-bg: rgba(20, 8, 30, 0.78); --neon-core: rgba(200, 120, 255, 0.95); --neon-light: rgba(255, 255, 255, 0.85); --neon-glow: rgba(180, 80, 255, 0.55); --badge-core: rgba(255, 170, 80, 0.95); --badge-glow: rgba(255, 130, 50, 0.55); /* ── Static tokens ── */ --bar-bg: rgba(10, 20, 40, 0.45); --bar-border: rgba(200, 235, 255, 0.18); --notif-info-bg: rgba(127, 216, 255, 0.12); --notif-info-border: rgba(127, 216, 255, 0.25); --notif-info-text: #7fd8ff; --notif-ok-bg: rgba(61, 255, 154, 0.12); --notif-ok-border: rgba(61, 255, 154, 0.25); --notif-ok-text: #3dff9a; --notif-err-bg: rgba(248, 81, 73, 0.12); --notif-err-border: rgba(248, 81, 73, 0.25); --notif-err-text: #f85149; --btn-hover: rgba(200, 230, 255, 0.08); --btn-active: rgba(200, 230, 255, 0.12); --neon-edge: var(--neon-core); --neon-shadow: 0 0 3px var(--neon-core), 0 0 6px var(--neon-core), 0 0 12px var(--neon-glow), 0 0 22px var(--neon-glow), inset 0 0 6px var(--neon-glow); --badge-shadow: 0 0 3px var(--badge-core), 0 0 12px var(--badge-glow); --tip-bg: var(--neon-bg); --tip-text: var(--neon-core); --item-hover: rgba(20, 40, 70, 0.25); --item-active: rgba(25, 15, 10, 0.22); --item-border: rgba(200, 235, 255, 0.14); --badge-bg: var(--neon-bg); --badge-text: var(--badge-core); --bg: #08060a; --text: #d8ecff; --text-muted: rgba(216, 236, 255, 0.55); }