mirror of
https://github.com/dani-garcia/vaultwarden.git
synced 2026-03-22 01:39:21 -07:00
Modernize styles and use scss
7heMech
@@ -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; } */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user