/*! * ifgone.io — My Vault alternative "enclosed" themes (dev-only). * * These themes re-scope the Heritage palette CSS custom properties defined in * input.css @theme (and compiled into style.css :root) onto via * `data-vault-theme`. Every Tailwind utility that reads a palette var * (bg-bg, text-text, bg-surface, border-border, text-accent, …) and every * component rule in input.css that references var(--color-*) picks up the new * values automatically — so a single attribute swap re-skins the whole page. * * Activation is gated to dev builds by vault-theme.ts (localhost / 127.0.0.1 / * *.local hostname check, matching the dev-notice pattern). In production the * attribute is never set, so this file is inert dead weight (~3KB) loaded only * on the vault page. * * Eight distinct darker palettes are provided so the "enclosed / secure" feel * can be A/B compared and the final theme iterated from the preferred pieces. */ /* ===== Shared dark component overrides ===== * Apply whenever ANY vault theme is active. Several component rules in * input.css bake in light Heritage tints (status boxes, badges); on a dark * ground those tints wash out, so re-derive them from the active theme's * accent / danger / warning vars with color-mix. */ body[data-vault-theme] .status-info, body[data-vault-theme] .status-success { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); } body[data-vault-theme] .status-error { background: color-mix(in srgb, var(--color-danger) 18%, transparent); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); } body[data-vault-theme] .status-warning { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); } body[data-vault-theme] .badge-green { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); } body[data-vault-theme] .badge-amber { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); } body[data-vault-theme] .badge-red { background: color-mix(in srgb, var(--color-danger) 18%, transparent); color: var(--color-danger); } /* Slot hover lift reads as a faint lift on dark, not a muddy shadow. */ body[data-vault-theme] .slot-list-item:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } body[data-vault-theme] .template-card:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); } /* The privacy notice uses a hard-coded accent tint via arbitrary Tailwind * classes (bg-[#2d6a4f1a]); leave it — it already keys off the accent hue and * reads fine on dark. */ /* ===== Theme palettes ===== * Each block re-points the full Heritage palette for one named theme. Accent * variants stay bright enough that the `text-black` used on accent buttons * (btnLoadKey, btnSaveLabel, …) keeps readable contrast. */ /* 1. Obsidian — neutral charcoal, vivid green accent. */ body[data-vault-theme="obsidian"] { --color-bg: #0f0f11; --color-surface: #18181b; --color-surface2: #232327; --color-border: #2e2e34; --color-text: #e8e6e3; --color-text-dim: #a8a4a0; --color-accent: #4ade80; --color-accent-dim: #22c55e; --color-danger: #f87171; --color-warning: #fbbf24; --color-info: #34d399; } /* 2. Midnight Forest — deep blue-green black, forest accent. */ body[data-vault-theme="midnight-forest"] { --color-bg: #0a1410; --color-surface: #0f1c16; --color-surface2: #16271e; --color-border: #1f3328; --color-text: #dce8e0; --color-text-dim: #8fa89a; --color-accent: #4fae84; --color-accent-dim: #3d8b69; --color-danger: #e8826b; --color-warning: #d4a85a; --color-info: #5aa088; } /* 3. Slate Vault — cool blue-grey, blue accent. */ body[data-vault-theme="slate-vault"] { --color-bg: #0d1117; --color-surface: #161b22; --color-surface2: #1f262f; --color-border: #2a323d; --color-text: #e2e8f0; --color-text-dim: #94a3b8; --color-accent: #60a5fa; --color-accent-dim: #3b82f6; --color-danger: #f87171; --color-warning: #fbbf24; --color-info: #38bdf8; } /* 4. Carbon — industrial near-black, green accent. */ body[data-vault-theme="carbon"] { --color-bg: #121214; --color-surface: #1a1a1d; --color-surface2: #242428; --color-border: #303035; --color-text: #e4e4e7; --color-text-dim: #a1a1aa; --color-accent: #4ade80; --color-accent-dim: #22c55e; --color-danger: #f87171; --color-warning: #eab308; --color-info: #2dd4bf; } /* 5. Deep Bronze — warm dark brown, bronze accent (Heritage gone dark). */ body[data-vault-theme="deep-bronze"] { --color-bg: #1a1410; --color-surface: #241c16; --color-surface2: #2e251d; --color-border: #3a2e24; --color-text: #ede0d0; --color-text-dim: #b09a82; --color-accent: #d4a87e; --color-accent-dim: #c8956a; --color-danger: #e08a6b; --color-warning: #d4a85a; --color-info: #9ab088; } /* 6. Pitch Pine — near-black with amber accent. */ body[data-vault-theme="pitch-pine"] { --color-bg: #0c0d0a; --color-surface: #151710; --color-surface2: #1e2118; --color-border: #2a2d22; --color-text: #e6e8d8; --color-text-dim: #9aa088; --color-accent: #e0bd76; --color-accent-dim: #d4a85a; --color-danger: #e07a5f; --color-warning: #e0bd76; --color-info: #9ac088; } /* 7. Gunmetal — blue-grey metallic, steel-blue accent. */ body[data-vault-theme="gunmetal"] { --color-bg: #101316; --color-surface: #181c20; --color-surface2: #21262b; --color-border: #2c333a; --color-text: #dde3e8; --color-text-dim: #8b97a0; --color-accent: #7ab2e0; --color-accent-dim: #5b9bd5; --color-danger: #e07a7a; --color-warning: #d4b05a; --color-info: #6ab0a0; } /* 8. Espresso — dark warm coffee, leather-brown accent. */ body[data-vault-theme="espresso"] { --color-bg: #15110d; --color-surface: #1e1812; --color-surface2: #281f17; --color-border: #34291f; --color-text: #ece0d4; --color-text-dim: #ad9888; --color-accent: #c69262; --color-accent-dim: #b07d4f; --color-danger: #d06850; --color-warning: #cfa050; --color-info: #88a07a; } /* ===== Dev theme switcher control ===== * Fixed bottom-right pill. Hidden by default; vault-theme.ts reveals it only * on dev hosts. Sits below modal dialogs (z-50 < z-100) so OTP/reminder * overlays cover it. */ #vaultThemeSwitcher { backdrop-filter: blur(6px); }