/* Theming file for vaultwarden - depends on insert of stylesheet via vhosts file */ environment-selector ~ .small { /* remove bitwarden official rewrite text */ display:none !important; } /* -- Page background -------------------------------------------------------- Setting background-color on alone is NOT enough on the 2026.x web vault. It DOES apply to the server-sent HTML, which is why the right colour appears for a fraction of a second -- but the vault is a Tailwind/Angular SPA, and once it boots it renders a container carrying .tw-bg-background-alt OVER the body. That container wins because it is a descendant painting its own background, not on specificity, so no amount of !important on `body` can help. That is the #DEE1D6 -> stock flash. Tailwind surfaces are painted from CSS CUSTOM PROPERTIES holding SPACE-SEPARATED RGB TRIPLETS (no #, no commas), consumed as rgb(var(--color-background-alt) / ). Overriding the VARIABLE recolours every element that uses it, whenever Angular renders it. !important is load-bearing: css/vaultwarden.css is loaded from INSIDE (verified in the served HTML), i.e. AFTER this stylesheet, so on equal specificity it would win on source order. !important on a custom property beats any non-important declaration regardless of specificity or order. #DEE1D6 = 222 225 214. Stock light values in styles..css, for reference: --color-background 255 255 255 white surfaces (cards, dialogs). LEFT ALONE -- overriding it turns the login card green too. --color-background-alt 243 246 249 the page behind the cards. This is the one. */ html.theme_light { /* TWO TOKEN CONVENTIONS LIVE IN THE SAME STYLESHEET - do not assume one. (a) Tailwind surface tokens: SPACE-SEPARATED RGB TRIPLETS, no # and no commas, consumed as rgb(var(--color-background-alt) / ). (b) A newer palette layer: PLAIN HEX, consumed as var(--color-bg-secondary). The login page background comes from (b). Chain in styles..css: --color-gray-050: #f7f9fa -> --color-bg-secondary background <- override these two -> --color-bg-tertiary background <- -> --color-border-muted border -> --color-fg-heading TEXT So do NOT override --color-gray-050 itself, however tempting: it also feeds --color-fg-heading, and recolouring it turns heading TEXT the background colour. Override the two background tokens only. */ --color-bg-secondary: #DEE1D6 !important; --color-bg-tertiary: #DEE1D6 !important; /* Convention (a). Kept because the vault interior (post-login) uses these Tailwind surfaces rather than the palette layer above. 222 225 214 = #DEE1D6. --color-background (255 255 255) is deliberately NOT overridden - it paints the white cards and dialogs, including the login box. */ --color-background-alt: 222 225 214 !important; } /* Belt and braces: covers the pre-boot paint so there is no flash in the other direction either, and keeps the colour right if a future web-vault build stops using the alt class. */ html.theme_light body.layout_frontend{ background-color: #DEE1D6 !important; } html.theme_light img.logo-themed { content: url(/theme/logo-dark@2x.png) !important; } html.theme_light .navbar{ background-color: #2D392A; /* Green background */ } button[type='submit'],button[buttontype='primary'] { background-color: #348737 !important; /* Green background */ color: white !important; /* White text */ } button[type='submit']:hover,button[buttontype='primary']:hover { background-color: #489f4d !important; /* Darker green background on hover */ } /* applied via js where needed */ .hide-element { display: none !important; } /* ── Finish-signup intro (rewritten by passmatter.js) ──────────────────────────────────── */ bit-landing-hero .pm-finish-signup-intro { text-align: left; max-width: 34rem; margin: 1rem auto 0; } bit-landing-hero .pm-finish-signup-intro p { margin: 0 0 .6rem; } bit-landing-hero .pm-finish-signup-intro ul { margin: 0 0 .6rem 1.25rem; padding: 0; list-style: disc; } bit-landing-hero .pm-finish-signup-intro li { margin: 0 0 .25rem; } bit-landing-hero .pm-hero-icon { width: 100%; max-width: 6rem; height: auto; display: block; margin: 0 auto; } /* ── "New organization" (2026-09-08) ────────────────────────────────────────────────────── Only the service account may create organisations (ORG_CREATION_USERS) and the server refuses everyone else on submit, but Admins are exempt from the Single Organization policy so the web vault still offers them the link. Hide it. */ a[href="#/create-organization"], a[href$="/create-organization"] { display: none !important; } /* ── Sidebar logo: the client's mark + name instead of the stock Vaultwarden logo ───────── bit-nav-logo renders

. Hide the SVG, paint the logo as a background on the link and the organisation name via ::after. When the nav is collapsed the link gets !tw-h-[55px]; then only the mark shows. */ bit-nav-logo a svg { display: none !important; } bit-nav-logo a { background: url(/theme/passmatter-nav.svg) no-repeat 0.85rem center / 44px 44px !important; } bit-nav-logo a::after { content: "CompuMatter"; position: absolute; left: 4.3rem; top: 50%; transform: translateY(-50%); /* inherit: #bit-side-nav carries tw-text-fg-nav, which the vault re-points inline for the light Admin Console variant, so the name is white on the dark nav and dark on the light one */ color: inherit; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; } bit-nav-logo a.\!tw-h-\[55px\] { background-position: center !important; } bit-nav-logo a.\!tw-h-\[55px\]::after { display: none; } /* ── Login / accept pages: the same mark + organisation name in the page header ──────────── bit-landing-header renders

...

. Light background here, so the original artwork. */ bit-landing-header a svg { display: none !important; } bit-landing-header a { position: relative; min-height: 3.5rem; background: url(/theme/passmatter-hero.svg) no-repeat left center / 44px 44px !important; } bit-landing-header a::after { content: "CompuMatter"; position: absolute; left: 3.4rem; top: 50%; transform: translateY(-50%); color: #2D392A; font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } /* ── My account (2026-09-08) ──────────────────────────────────────────────────────────── Email comes from Active Directory; changing it here would strand the account outside the organisation on the next sync. The read-only email in the profile is drawn as an input that takes focus but rejects typing - show it as plain text instead. */ app-change-email { display: none !important; } app-profile input[readonly] { border: none !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; pointer-events: none; }