/* IT-Schutzengel Vault — Custom Theme * Based on: ITS-Corporate-Identity-Guide.md * Colors: ITS-Rot #B30B0B, Dark #930404, Black #111111 * Font: Source Sans Pro (OFL) * * Vaultwarden Web Vault v1.35.4 DOM: * Login logo: bit-icon[aria-label="Bitwarden-Logo"] > svg (inline SVG) * Sidebar icon: bit-nav-logo (::before in vaultwarden.css) * Theme classes: .theme_dark / .theme_light on * * NOTE: ::before/::after do NOT work on Angular custom elements (bit-icon). * Use background-image directly on the element instead. */ /* ===== FONTS ===== */ @font-face { font-family: 'Source Sans Pro'; src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans Pro'; src: url('/fonts/SourceSansPro-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Sans Pro'; src: url('/fonts/SourceSansPro-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans Pro'; src: url('/fonts/SourceSansPro-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ===== GLOBAL FONT ===== */ body, html { font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ===== COLOR OVERRIDES ===== */ :root { --color-primary-300: #e88a8a !important; --color-primary-600: #B30B0B !important; --color-primary-700: #930404 !important; } /* ================================================================ LOGIN PAGE — Replace Vaultwarden logo with ITS logo Hide inline SVG, show logo as background-image on bit-icon ================================================================ */ /* Hide the inline SVG */ bit-icon[aria-label="Bitwarden-Logo"] svg { display: none !important; } /* Dark theme (default): white/invers logo for dark header */ bit-icon[aria-label="Bitwarden-Logo"] { display: block !important; background: url('/images/logo-invers.png') center left / contain no-repeat !important; min-width: 200px !important; min-height: 45px !important; } /* Light theme: colored logo for light header */ .theme_light bit-icon[aria-label="Bitwarden-Logo"] { background-image: url('/images/logo-login.png') !important; } /* ================================================================ SIDEBAR ICON — Replace shield with ITS icon vaultwarden.css sets ::before on bit-nav-logo with icon-white.svg ================================================================ */ bit-nav-logo bit-nav-item a:before { background-image: url('/images/logo-icon-only.png') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } /* ================================================================ BUTTONS ================================================================ */ .tw-bg-primary-600, button.tw-bg-primary-600, [class*="btn-primary"] { background-color: #B30B0B !important; border-color: #B30B0B !important; border-radius: 2px !important; color: #ffffff !important; } .tw-bg-primary-600:hover, button.tw-bg-primary-600:hover, [class*="btn-primary"]:hover { background-color: #930404 !important; border-color: #930404 !important; color: #ffffff !important; } .tw-border-primary-600 { border-color: #B30B0B !important; } /* ================================================================ LINKS ================================================================ */ .tw-text-primary-600, a.tw-text-primary-600 { color: #B30B0B !important; } .tw-text-primary-700, a:hover { color: #930404 !important; } /* ================================================================ CHECKBOX / TOGGLE Only border-color for checked state (no background-color override). ================================================================ */ input[type="checkbox"]:checked { border-color: #B30B0B !important; } input[type="checkbox"]:checked::before { background-color: #B30B0B !important; border-color: #B30B0B !important; } /* ================================================================ FOCUS STATES ================================================================ */ input:focus, textarea:focus, select:focus { border-color: #B30B0B !important; --tw-ring-color: rgba(179, 11, 11, 0.3) !important; } /* ================================================================ HIDE BITWARDEN DECORATIVE ILLUSTRATIONS Auth/landing pages show low-opacity SVG illustrations (people, gears) that don't match ITS branding and look like broken placeholders. Container class: tw-opacity-[.11] with [&_svg]:tw-absolute ================================================================ */ /* Hide the decorative illustration container (Tailwind class tw-opacity-[.11]) */ .tw-opacity-\[\.11\] { display: none !important; } /* Hide Cloud+Key / decorative icons on SSO and landing pages */ bit-landing-hero bit-icon[aria-hidden="true"] { display: none !important; } /* Fallback: target specific decorative SVGs by their viewBox */ svg[viewBox="0 0 501 226"], svg[viewBox="0 0 506 297"], svg[viewBox="0 12.12 96 76"] { display: none !important; } /* ================================================================ HEADER ACCENT LINE ================================================================ */ header { border-bottom: 2px solid #B30B0B !important; } /* ================================================================ FOOTER BRANDING ================================================================ */ app-footer::after, footer::after { content: 'IT-Schutzengel \00B7 Vertrauen in Managed Services'; display: block; text-align: center; font-size: 11px; color: #AAAAAA; padding: 8px 0; font-weight: 400; }