From b434e6da6dfb5d9dceffb3da727bde2b7307bd24 Mon Sep 17 00:00:00 2001
From: 7heMech <83923848+7heMech@users.noreply.github.com>
Date: Sun, 15 Feb 2026 15:31:50 +0200
Subject: [PATCH] Modernize styles and use scss

---
 Customize-Vaultwarden-CSS.md | 139 +++++++++++++++++++++--------------
 1 file changed, 83 insertions(+), 56 deletions(-)

diff --git a/Customize-Vaultwarden-CSS.md b/Customize-Vaultwarden-CSS.md
index f5caca5..8a0efba 100644
--- a/Customize-Vaultwarden-CSS.md
+++ b/Customize-Vaultwarden-CSS.md
@@ -30,71 +30,98 @@ There are two files you can place here:
 
 **Some examples which you can place inside `user.vaultwarden.scss.hbs`:**
 ```css
-/* Hide `Authenticator app` 2FA */
-.providers-2fa-0 {
-  @extend %vw-hide;
+/* File location: /data/templates/scss/user.vaultwarden.scss.hbs */
+
+/* --- Variables --- */
+/* You can set different logos for the Vault (User) and the Admin Console (Org) */
+$logo-default: url('/vw_static/logo-gray.png');
+$logo-admin:   url('/vw_static/logo-gray.png'); 
+
+/* Sidebar Customization */
+$sidebar-width: 15rem; /* Set this to match your logo width if needed */
+
+/* --- Mixins --- */
+@mixin hide-element { display: none !important; }
+
+/* --- Hiding 2FA Providers --- */
+/* 0: Authenticator App, 1: Email, 2: Duo, 3: YubiKey OTP, 7: FIDO2 WebAuthn */
+.providers-2fa-0, .providers-2fa-1, .providers-2fa-2, .providers-2fa-3, .providers-2fa-7 {
+  @include hide-element;
 }
 
-/* Hide `YubiKey OTP security key` 2FA */
-/* Note: This will also be hidden automatically if the Yubikey config is net set */
-.providers-2fa-3 {
-  @extend %vw-hide;
+/* --- Loading Screen --- */
+app-root img.new-logo-themed { content: $logo-default !important; }
+
+/* --- Login Screen --- */
+auth-anon-layout bit-landing-header {
+  bit-icon {
+    /* Hide original SVG */
+    > svg { @include hide-element; }
+
+    /* Inject Custom Logo */
+    &::before {
+      display: block !important;
+      content: "" !important;
+      width: 100% !important;
+      height: 42px !important;
+      background: $logo-default no-repeat center left !important;
+      background-size: contain !important;
+    }
+  }
 }
 
-/* Hide `Duo` 2FA */
-.providers-2fa-2 {
-  @extend %vw-hide;
+/* --- Dashboard Sidebar --- */
+bit-nav-logo {
+  /* 
+    Apply if you want logo to be less cropped when minimized
+    if you have a logo like the one Vaultwarden and Bitwarden have
+  */
+  /* > div { padding-right: 2px !important; } */
+
+  bit-icon {
+    > svg { @include hide-element; }
+
+    &::before {
+      display: block !important;
+      content: "" !important;
+      width: 100% !important;
+      height: 42px !important;
+      background-repeat: no-repeat !important;
+      background-size: auto 42px !important;
+      background-position: center left !important;
+    }
+  }
 }
 
-/* Hide `FIDO2 WebAuthn` 2FA */
-.providers-2fa-7 {
-  @extend %vw-hide;
-}
+/* --- Dashboard Sidebar --- */
+app-user-layout bit-nav-logo bit-icon::before { background-image: $logo-default !important; }
 
-/* Hide `Email` 2FA */
-/* Note: This will also be hidden automatically if email is not enabled */
-.providers-2fa-1 {
-  @extend %vw-hide;
-}
-
-/* Use a custom login logo */
-app-root img.new-logo-themed {
-	content: url(../images/my-custom-login.logo.png) !important;
-}
-
-/* Use a custom top left logo on login and locked screen page */
-auth-anon-layout > main > div > a > bit-icon > svg {
-  display: none !important;
-}
-auth-anon-layout > main > div > a > bit-icon::before {
-  display: block;
-  content: "" !important;
-  width: 175px !important;
-  height: 36px !important;
-  background-image: url(../images/my-custom-global-logo.png) !important;
-  background-repeat: no-repeat !important;
-  background-size: contain;
-}
-
-/* Use a custom top left logo different per vault/admin */
-app-user-layout bit-nav-logo bit-icon > svg,
-app-organization-layout bit-nav-logo bit-icon > svg {
-  display: none !important;
-}
-app-user-layout bit-nav-logo bit-icon::before,
 app-organization-layout bit-nav-logo bit-icon::before {
-  display: block;
-  content: "" !important;
-  width: 200px !important;
-  height: 50px !important;
-  background-repeat: no-repeat !important;
-  background-size: contain;
+  background-image: $logo-admin !important;
 }
-app-user-layout bit-nav-logo bit-icon::before {
-  background-image: url(../images/my-custom-password-manager-logo.png) !important;
-}
-app-organization-layout bit-nav-logo bit-icon::before {
-  background-image: url(../images/my-custom-admin-console-logo.png) !important;
+
+/* --- Sidebar Layout & Logic --- */
+#bit-side-nav {
+  /*
+    Only override width if it matches the default '18rem' inline style.
+    This ensures we don't break the 'Collapsed' state (4.5rem) or manual resizes.
+  */
+  &[style*="18rem"] { width: $sidebar-width !important; }
+
+  /*
+    When sidebar is collapsed (width is usually 4.5rem), hide the custom logo
+    so it doesn't look broken or clipped.
+  */
+  &[style*="4.5rem"] {
+    bit-nav-logo bit-icon::before {
+      display: none !important;
+    }
+    /*
+      Optional: Show original icon again when minimized? 
+      Remove the comment below to enable:
+    */
+    /* bit-nav-logo bit-icon > svg { display: block !important; } */
+  }
 }
 ```