/* ============================================================================ VigsVault — shared theme layer ---------------------------------------------------------------------------- One set of design tokens (--vv-*) that every page maps its own local variables onto, so a single [data-theme] switch on re-skins the whole product consistently. Themes: dark (default) · grey · darkblue · light The switch is written to before first paint and remembered in localStorage('vv-theme'). ============================================================================ */ /* ------------------------------------------------------------------ * * BASE = DARK (also the no-JS / no-attribute fallback) * * ------------------------------------------------------------------ */ :root{ --vv-bg:#06060A; --vv-bg-soft:#0A0A10; --vv-surface:#15151F; --vv-surface-2:#1C1C28; --vv-surface-3:#23232F; --vv-line:rgba(255,255,255,0.09); --vv-line-soft:rgba(255,255,255,0.055); --vv-line-strong:rgba(255,255,255,0.18); --vv-ink:#F5F5F9; --vv-ink-soft:#9C9CB0; --vv-ink-faint:#55556A; --vv-accent:#B266FF; --vv-accent-deep:#8B2FE0; --vv-accent-soft:rgba(178,102,255,0.14); --vv-accent-soft-2:rgba(178,102,255,0.28); --vv-accent-glow:rgba(178,102,255,0.5); --vv-accent-2:#D6FF3D; /* bright lime — decorative fills only */ --vv-accent-2-ink:#D6FF3D; /* lime used as text / hover / focus outline */ --vv-accent-2-deep:#A8CC1F; --vv-accent-2-soft:rgba(214,255,61,0.14); --vv-ok:#10E0A0; --vv-ok-soft:rgba(16,224,160,0.14); --vv-ok-glow:rgba(16,224,160,0.35); --vv-warn:#F5B542; --vv-warn-soft:rgba(245,181,66,0.14); --vv-warn-glow:rgba(245,181,66,0.30); --vv-danger:#FF5C72; --vv-danger-soft:rgba(255,92,114,0.14); --vv-danger-glow:rgba(255,92,114,0.35); --vv-danger-ink:#FCA5A5; --vv-shadow-card:0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 60px -28px rgba(0,0,0,0.9); --vv-shadow-pop:0 40px 100px -24px rgba(0,0,0,0.95); --vv-glass:rgba(255,255,255,0.035); --vv-glass-hover:rgba(255,255,255,0.06); --vv-grid-line:rgba(178,102,255,0.05); --vv-dot-overlay:rgba(255,255,255,0.5); --vv-nav-bg:rgba(21,21,31,0.72); --vv-topbar-bg:rgba(10,10,16,0.78); --vv-toast-bg:rgba(21,21,31,0.94); --vv-backdrop:rgba(5,5,9,0.72); --vv-row-hover:rgba(255,255,255,0.02); --vv-track:rgba(255,255,255,0.10); --vv-brand-grad:linear-gradient(150deg,#B266FF,#D6FF3D); --vv-accent-grad:linear-gradient(120deg,#B266FF,#8B2FE0); color-scheme:dark; } :root[data-theme="dark"]{ color-scheme:dark; } /* ------------------------------------------------------------------ * * GREY DARK — neutral charcoal, no colour cast in the greys * * ------------------------------------------------------------------ */ :root[data-theme="grey"]{ --vv-bg:#131315; --vv-bg-soft:#171719; --vv-surface:#1D1D20; --vv-surface-2:#242427; --vv-surface-3:#2B2B2F; --vv-line:rgba(255,255,255,0.08); --vv-line-soft:rgba(255,255,255,0.05); --vv-line-strong:rgba(255,255,255,0.16); --vv-ink:#ECECEE; --vv-ink-soft:#A2A2A8; --vv-ink-faint:#66666E; --vv-ok:#10E0A0; --vv-ok-soft:rgba(16,224,160,0.13); --vv-ok-glow:rgba(16,224,160,0.30); --vv-shadow-card:0 1px 0 rgba(255,255,255,0.03) inset, 0 22px 55px -26px rgba(0,0,0,0.8); --vv-shadow-pop:0 40px 90px -24px rgba(0,0,0,0.85); --vv-glass:rgba(255,255,255,0.04); --vv-glass-hover:rgba(255,255,255,0.07); --vv-grid-line:rgba(255,255,255,0.035); --vv-dot-overlay:rgba(255,255,255,0.4); --vv-nav-bg:rgba(29,29,32,0.78); --vv-topbar-bg:rgba(19,19,21,0.80); --vv-toast-bg:rgba(29,29,32,0.95); --vv-backdrop:rgba(9,9,10,0.72); --vv-track:rgba(255,255,255,0.09); color-scheme:dark; } /* ------------------------------------------------------------------ * * DARK BLUE — the original console navy, kept selectable * * ------------------------------------------------------------------ */ :root[data-theme="darkblue"]{ --vv-bg:#0B1220; --vv-bg-soft:#0E1729; --vv-surface:#111827; --vv-surface-2:#16202F; --vv-surface-3:#1B2635; --vv-line:#1F2937; --vv-line-soft:#182131; --vv-line-strong:#2A374C; --vv-ink:#F9FAFB; --vv-ink-soft:#94A3B8; --vv-ink-faint:#5B6B85; --vv-ok:#10B981; --vv-ok-soft:rgba(16,185,129,0.14); --vv-ok-glow:rgba(16,185,129,0.35); --vv-warn:#F59E0B; --vv-warn-soft:rgba(245,158,11,0.14); --vv-warn-glow:rgba(245,158,11,0.30); --vv-danger:#EF4444; --vv-danger-soft:rgba(239,68,68,0.14); --vv-danger-glow:rgba(239,68,68,0.35); --vv-danger-ink:#FCA5A5; --vv-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 70px -28px rgba(0,0,0,0.72); --vv-shadow-pop:0 40px 100px -24px rgba(0,0,0,0.75); --vv-glass:rgba(255,255,255,0.04); --vv-glass-hover:rgba(255,255,255,0.07); --vv-grid-line:rgba(178,102,255,0.05); --vv-dot-overlay:rgba(255,255,255,0.5); --vv-nav-bg:rgba(17,24,39,0.74); --vv-topbar-bg:rgba(11,18,32,0.78); --vv-toast-bg:rgba(17,24,39,0.92); --vv-backdrop:rgba(5,9,16,0.72); --vv-row-hover:rgba(255,255,255,0.015); --vv-track:#1F2937; color-scheme:dark; } /* ------------------------------------------------------------------ * * LIGHT — bright, calm, hand-set. Soft off-white ground, real * * hairlines, neutral shadows, accents deepened for contrast. * * ------------------------------------------------------------------ */ :root[data-theme="light"]{ /* deeper grey ground so white cards actually separate + read clearly */ --vv-bg:#E7E7EE; --vv-bg-soft:#DCDCE5; --vv-surface:#FFFFFF; --vv-surface-2:#F0F0F4; --vv-surface-3:#E4E4EC; --vv-line:#D3D3DE; --vv-line-soft:#DFDFE8; --vv-line-strong:#BFBFCE; --vv-ink:#14141B; --vv-ink-soft:#45454F; --vv-ink-faint:#6E6E7C; --vv-accent:#6D28D9; --vv-accent-deep:#5B21B6; --vv-accent-soft:rgba(109,40,217,0.11); --vv-accent-soft-2:rgba(109,40,217,0.20); --vv-accent-glow:rgba(109,40,217,0.30); --vv-accent-2:#7C9C00; --vv-accent-2-ink:#4F6800; --vv-accent-2-deep:#405400; --vv-accent-2-soft:rgba(110,142,0,0.16); --vv-ok:#0B8A5F; --vv-ok-soft:rgba(11,138,95,0.13); --vv-ok-glow:rgba(11,138,95,0.25); --vv-warn:#9A6410; --vv-warn-soft:rgba(154,100,16,0.13); --vv-warn-glow:rgba(154,100,16,0.22); --vv-danger:#D01F1F; --vv-danger-soft:rgba(208,31,31,0.11); --vv-danger-glow:rgba(208,31,31,0.20); --vv-danger-ink:#A81717; --vv-shadow-card:0 1px 2px rgba(18,18,40,0.06), 0 12px 28px -14px rgba(18,18,40,0.20); --vv-shadow-pop:0 28px 64px -20px rgba(18,18,40,0.28); --vv-glass:rgba(255,255,255,0.78); --vv-glass-hover:rgba(255,255,255,0.94); --vv-grid-line:rgba(90,55,160,0.07); --vv-dot-overlay:rgba(70,55,110,0.20); --vv-nav-bg:rgba(255,255,255,0.82); --vv-topbar-bg:rgba(231,231,238,0.86); --vv-toast-bg:rgba(255,255,255,0.97); --vv-backdrop:rgba(22,22,38,0.38); --vv-row-hover:rgba(18,18,40,0.04); --vv-track:#D8D8E1; --vv-brand-grad:linear-gradient(150deg,#6D28D9,#8FB400); --vv-accent-grad:linear-gradient(120deg,#6D28D9,#5B21B6); color-scheme:light; } /* ------------------------------------------------------------------ * * Ground the document so short pages don't borrow a stray colour * * ------------------------------------------------------------------ */ body{ background:var(--vv-bg); color:var(--vv-ink); } /* ============================================================================ THEME SWITCHER — one component, two dresses .vv-theme--fab fixed control, bottom-right (public pages) .vv-theme--inline sits in a toolbar (dashboard topbar) ============================================================================ */ .vv-theme{ font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif; } .vv-theme *{ box-sizing:border-box; } .vv-theme--fab{ position:fixed; right:20px; bottom:20px; z-index:300; } .vv-theme--inline{ position:relative; display:inline-flex; } .vv-theme-trigger{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:var(--vv-surface); color:var(--vv-ink-soft); border:1px solid var(--vv-line); box-shadow:var(--vv-shadow-card); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .15s ease, border-color .15s ease, transform .15s ease; } .vv-theme--inline .vv-theme-trigger{ width:38px; height:38px; border-radius:10px; box-shadow:none; } .vv-theme-trigger:hover{ color:var(--vv-accent); border-color:var(--vv-accent); transform:translateY(-1px); } .vv-theme-trigger:active{ transform:translateY(0); } .vv-theme-trigger svg{ width:18px; height:18px; } .vv-theme-pop{ position:absolute; right:0; z-index:90; width:216px; max-width:calc(100vw - 24px); background:var(--vv-surface); border:1px solid var(--vv-line); border-radius:14px; box-shadow:var(--vv-shadow-pop); padding:7px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .13s ease, transform .13s ease, visibility .13s; } .vv-theme--fab .vv-theme-pop{ bottom:calc(100% + 10px); } .vv-theme--inline .vv-theme-pop{ top:calc(100% + 10px); } .vv-theme.open .vv-theme-pop{ opacity:1; visibility:visible; transform:translateY(0); } .vv-theme-pop-title{ font-size:10.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--vv-ink-faint); padding:7px 9px 9px; } .vv-theme-opt{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 9px; border:none; border-radius:10px; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--vv-ink-soft); text-align:left; cursor:pointer; transition:background .12s ease, color .12s ease; } .vv-theme-opt:hover{ background:var(--vv-surface-2); color:var(--vv-ink); } .vv-theme-opt.is-active{ color:var(--vv-ink); } .vv-sw{ position:relative; flex-shrink:0; width:26px; height:26px; border-radius:8px; border:1px solid var(--vv-line-strong); overflow:hidden; } .vv-sw i{ position:absolute; display:block; } .vv-sw i:nth-child(1){ left:0; top:0; width:58%; height:100%; } /* surface swatch */ .vv-sw i:nth-child(2){ right:3px; bottom:3px; width:9px; height:9px; border-radius:50%; } /* accent dot */ .vv-theme-opt-label{ flex:1; } .vv-theme-check{ width:15px; height:15px; flex-shrink:0; color:var(--vv-accent); opacity:0; } .vv-theme-opt.is-active .vv-theme-check{ opacity:1; } @media (max-width:600px){ .vv-theme--fab{ right:12px; bottom:12px; } } /* On a phone the dashboard topbar is tight — float the inline control into the corner instead of squeezing another button into the bar. */ @media (max-width:560px){ .vv-theme--inline.vv-theme--dock-mobile{ position:fixed; right:12px; bottom:12px; z-index:120; } .vv-theme--inline.vv-theme--dock-mobile .vv-theme-trigger{ width:42px; height:42px; border-radius:12px; box-shadow:var(--vv-shadow-card); } .vv-theme--inline.vv-theme--dock-mobile .vv-theme-pop{ top:auto; bottom:calc(100% + 10px); } } @media (prefers-reduced-motion: reduce){ .vv-theme-pop{ transition:opacity .01ms; } .vv-theme-trigger:hover{ transform:none; } }