/* --- Koru Root brand overrides ---------------------------------------------- * Loaded via from * /web-vault/index.html (injected by brand/inject-rebrand.sh). * * CSP 'self' covers same-origin stylesheets so this loads cleanly. * Cache-busted by sha256 query string per build, so updates land on next * page load even though Vaultwarden serves us with `Cache-Control: immutable`. * * Selector targets are derived from the live accessibility tree of Bitwarden's * web vault running against Vaultwarden 1.36.0. Verify after every Vaultwarden * upgrade — Bitwarden may rename `auth-anon-layout` or restructure children. * -------------------------------------------------------------------------- */ /* ─── Login banner logo replacement ─────────────────────────────────────── * * The visible logo on the login page is rendered as an inline by * Bitwarden's Angular component, sibling to a hidden the * defender script can rewrite. Trying to replace the SVG imperatively races * with Angular's change-detection cycle, so we go CSS-only here. * * Specificity escalation: Bitwarden's bundle injects locale-scoped style * rules after Angular boots and the .locale_en class is added to . * Plain `[role="banner"] a` rules lost the cascade once those activated. * Chain `html.locale_en` and `body.layout_frontend` ancestors so our rules * outrank Bitwarden's at the same `!important` level. The variants without * those classes cover the brief pre-boot window before Angular adds them. * * Targets multiple equivalent selectors (header / [role="banner"] / app-root * variants) so a future Bitwarden release renaming the structural element * still gets covered. */ /* CSS attribute selectors only match EXPLICIT attributes — they don't match * implicit ARIA roles. The login-page header almost certainly is `
` * without `role="banner"` attribute, gaining the role implicitly via HTML5 * semantics. So target the tag name AND [role=banner] both. * * SCOPED to `:has(auth-anon-layout)` — that Angular component is only present * on the anonymous pages (login / signup / 2FA). Without this scope the * big absolutely-positioned logo also painted over the logged-in vault * page's top
bar. The logged-in sidebar logo is handled separately * by the bit-nav-logo rules below. */ html:has(auth-anon-layout) header a, html:has(auth-anon-layout) [role="banner"] a, html.locale_en:has(auth-anon-layout) header a, html.locale_en:has(auth-anon-layout) [role="banner"] a, html:has(auth-anon-layout) app-root header a, html:has(auth-anon-layout) app-root [role="banner"] a { background-image: url("/images/logo.svg") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: left center !important; display: block !important; width: 180px !important; height: 180px !important; margin: 0 !important; position: absolute !important; top: 24px !important; left: 24px !important; font-size: 0 !important; text-decoration: none !important; text-indent: -99999px !important; z-index: 10 !important; } /* Nuke every descendant of the login banner link — same :has() scope. */ html:has(auth-anon-layout) header a *, html:has(auth-anon-layout) header a svg, html:has(auth-anon-layout) header a img, html:has(auth-anon-layout) header a bit-icon, html:has(auth-anon-layout) header a app-bit-icon, html:has(auth-anon-layout) header a span, html:has(auth-anon-layout) [role="banner"] a *, html:has(auth-anon-layout) [role="banner"] a svg, html:has(auth-anon-layout) [role="banner"] a img, html:has(auth-anon-layout) [role="banner"] a bit-icon, html:has(auth-anon-layout) [role="banner"] a app-bit-icon, html.locale_en:has(auth-anon-layout) header a *, html.locale_en:has(auth-anon-layout) [role="banner"] a *, html:has(auth-anon-layout) app-root header a *, html:has(auth-anon-layout) app-root [role="banner"] a * { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; pointer-events: none !important; clip-path: inset(50%) !important; } /* ─── Logged-in vault sidebar logo ──────────────────────────────────────── * * After login the sidebar shows a "Vaultwarden Password Manager" wordmark. * The exact Bitwarden component name varies across versions (bit-nav-logo, * app-organization-switcher, etc.) so cast a wide net. Any ancestor selector * that scopes us into "the sidebar" is safe because we also require the * link to point at "/" or "#/" — that's only true for the home/logo link. */ /* Disable Vaultwarden's :before pseudo-element overlay (avoids stacking) */ html bit-nav-logo a:before, html [class*="nav-logo" i] a:before, html nav a:before, html aside a:before { content: none !important; display: none !important; background-image: none !important; } /* Paint koru as background on any sidebar logo-link variant */ html bit-nav-logo a, html bit-nav-logo bit-nav-item a, html app-bit-nav-logo a, html [class*="nav-logo" i] a, html nav header a, html nav [role="banner"] a, html aside header a, html nav a[aria-label*="logo" i], html nav a[aria-label*="bitwarden" i], html aside a[aria-label*="logo" i], html aside a[aria-label*="bitwarden" i] { background-image: url("/images/logo.svg") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; display: block !important; width: 100% !important; height: 56px !important; padding: 8px !important; margin: 0 auto !important; text-decoration: none !important; font-size: 0 !important; text-indent: -99999px !important; box-sizing: border-box !important; } /* Hide every Bitwarden-rendered child of the sidebar logo */ html bit-nav-logo a *, html bit-nav-logo bit-nav-item a *, html app-bit-nav-logo a *, html [class*="nav-logo" i] a *, html nav header a *, html nav [role="banner"] a *, html nav a[aria-label*="logo" i] *, html nav a[aria-label*="bitwarden" i] *, html aside a[aria-label*="logo" i] *, html aside a[aria-label*="bitwarden" i] * { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; pointer-events: none !important; clip-path: inset(50%) !important; } /* ─── Footer attribution hide ───────────────────────────────────────────── * * Bitwarden + Vaultwarden licensing both want the attribution text to * remain in the source (we keep it — it's still in the DOM, just visually * hidden). This is a presentation-only change. */ auth-anon-layout footer, auth-anon-layout [role="contentinfo"] { display: none !important; } /* ─── Catch-all for Bitwarden-templated tags ──────────────────────── * * Defender JS handles these too via MutationObserver, but the CSS rule * provides a no-flash fallback for the brief moment between img insertion * and the JS observer firing. */ img[src*="logo-horizontal" i], img[src*="bitwarden-logo" i], img[src*="bw_logo" i], img[alt*="bitwarden" i], img[alt*="vaultwarden" i] { content: url("/images/logo.svg") !important; } /* ─── Background-image fallback for div-based logo placements ───────────── */ app-root .login-logo, app-login .logo, app-frontend-layout .logo, auth-anon-layout .logo { background-image: url("/images/logo.svg") !important; background-size: contain !important; background-repeat: no-repeat !important; }