/* Сэхэгэ brand theme. * * The web vault is fully tokenised: every colour resolves through CSS custom * properties defined in one `:root` block in styles..css, so retheming * means redefining tokens rather than chasing component selectors. * * Specificity note: theme_head.js stamps `theme_light` OR `theme_dark` on * , and the app's dark tokens live on `.theme_dark` (0,1,0). A bare * `:root` here is also (0,1,0) but loads later, so it would beat `.theme_dark` * and leak the light palette into dark mode. Both blocks below are therefore * (0,2,0) and mutually exclusive. * * Palette: purple #4510B4, deep purple #291342, gold #D9A848 (sampled from the * Сэхэгэ mark). */ /* ── brand ramp (shared by both themes) ───────────────────────────────────── * Deliberately NOT inverted per theme. `.theme_dark` does not redefine this * ramp; it points its semantic tokens at *different stops* of it * (--color-bg-brand is brand-700 in light and brand-400 in dark). Flipping the * ramp for dark therefore hands the dark button the darkest purple and drops * its label to ~3:1. One ordinary light-to-dark ramp keeps both themes right. * 700 is the Сэхэгэ purple, so the light primary button is exactly #4510B4. */ :root { --color-brand-050: #f3eeff; --color-brand-100: #e6dcff; --color-brand-200: #cebcff; --color-brand-300: #b092ff; --color-brand-400: #9a6bfa; /* dark-theme buttons/links */ --color-brand-500: #7c46ee; --color-brand-600: #5b21d6; --color-brand-700: #4510b4; /* brand — light-theme buttons */ --color-brand-800: #380d92; --color-brand-900: #2b0a70; --color-brand-950: #1f0752; } /* ── light ──────────────────────────────────────────────────────────────── */ :root:not(.theme_dark) { /* Legacy tokens are space-separated RGB, consumed as rgb(var(--x) / ). These drive buttons, links, focus rings and the filter rail. */ --color-primary-100: 233 223 255; --color-primary-300: 108 91 138; --color-primary-600: 69 16 180; /* #4510B4 — buttons, links */ --color-primary-700: 56 13 146; /* #380D92 — hover/active */ --color-background-alt2: 69 16 180; --color-bw-blue: 69 16 180; --color-hover-default: rgb(69 16 180 / 0.1); --color-marketing-logo: 32 8 82; /* Line-art illustrations across empty states and dialogs. */ --color-illustration-outline: 43 10 112; --color-illustration-bg-primary: 233 223 255; --color-illustration-bg-secondary: 183 149 255; --color-illustration-bg-tertiary: 255 255 255; --color-illustration-tertiary: 217 168 72; /* gold */ --color-illustration-logo: 69 16 180; /* Sidebar: brand purple instead of Bitwarden's near-black navy. */ --color-nav-bg-primary: #241344; --color-nav-bg-primary-strong: #150a2a; } /* ── dark ───────────────────────────────────────────────────────────────── */ :root.theme_dark { /* On dark grounds the primary must be a light tint, not the brand purple, or button labels and links drop below contrast. */ --color-primary-100: 43 10 112; --color-primary-300: 69 16 180; --color-primary-600: 183 149 255; /* #B795FF */ --color-primary-700: 211 191 255; /* #D3BFFF */ --color-hover-default: rgb(183 149 255 / 0.12); --color-illustration-outline: 154 107 250; --color-illustration-bg-primary: 183 149 255; --color-illustration-bg-secondary: 122 63 232; --color-illustration-tertiary: 217 168 72; --color-illustration-logo: 255 255 255; --color-nav-bg-primary: #1a0f2e; --color-nav-bg-primary-strong: #0e0719; } /* ── stock artwork ──────────────────────────────────────────────────────── */ /* Bitwarden's marketing line-art (laptop/gears/magnifier/network) anchored to the corners of the frontend layout. Off-brand clutter behind the login card; matched on viewBox because the wrapper's Tailwind classes are unstable. */ svg[viewBox="0 0 501 226"], svg[viewBox="0 0 506 297"] { display: none !important; } /* The hero above the login form is Bitwarden's safe illustration. Keep the layout box, drop the vector paths, and paint the Сэхэгэ mark in their place. */ svg[viewBox="0 8.33 80 66.67"] > * { display: none; } svg[viewBox="0 8.33 80 66.67"] { background: url("images/mark.svg") center / contain no-repeat; } :root.theme_dark svg[viewBox="0 8.33 80 66.67"] { background-image: url("images/mark-light.svg"); } /* Removing the corner art leaves the sign-in page flat, so give it a soft brand wash instead of bare white. */ /* The sign-in layout paints an opaque .tw-bg-background-alt panel across the * viewport, which would hide the wash below. Let it through on the frontend * layout only -- the vault keeps its solid surfaces. The login card itself * uses .tw-bg-background, so it stays opaque. */ body.layout_frontend .tw-bg-background-alt { background-color: transparent; } body.layout_frontend { background-image: radial-gradient(900px 560px at 8% 92%, rgb(69 16 180 / 0.11), transparent 60%), radial-gradient(760px 480px at 94% 6%, rgb(217 168 72 / 0.13), transparent 58%); background-attachment: fixed; background-repeat: no-repeat; } /* Keyboard skip-link bar. * The legacy utility .tw-bg-background-alt3 is aliased to * var(--color-bg-brand-strong), which is a *light* tint in dark mode, while * .tw-text-alt2 keeps the label white — 1.42:1 on stock Bitwarden, 1.71:1 * with this palette. A "strong" fill is meant to carry dark text, so pair it * that way in dark mode only (in light it is already a deep purple + white). */ :root.theme_dark .tw-bg-background-alt3, :root.theme_dark .tw-bg-background-alt3 * { color: var(--color-brand-950); } /* Landing footer ("Vaultwarden Web " + the Bitwarden® trademark * disclaimer). Removed at the owner's request for a single-user private * instance. Restore this block before letting anyone else use the server or * before redistributing the image: the disclaimer is Vaultwarden's, and * AGPL obligations attach once other people are served over the network. */ bit-landing-footer { display: none; }