mirror of
https://github.com/dani-garcia/vaultwarden.wiki.git
synced 2026-03-27 07:28:31 +07:00
145 lines
4.4 KiB
Markdown
145 lines
4.4 KiB
Markdown
# Customize Vaultwarden CSS
|
|
|
|
> [!IMPORTANT]
|
|
> **This functionality is only available in v1.33.0 and later releases.**
|
|
|
|
Since version v1.33.0 you can modify the CSS which Vaultwarden previously embedded in the web-vault.<br>
|
|
This way it makes it more easier for users to tweak the style and layout or even hide items.
|
|
|
|
To modify the CSS you need to add a `templates` directory in your `data` directory, or provide the correct path via the `TEMPLATES_FOLDER` environment variable.<br>
|
|
Within this directory you need to create another directory called `scss` which will hold the file(s) for modifying the stylesheet Vaultwarden will serve.
|
|
|
|
|
|
There are two files you can place here:
|
|
- **`user.vaultwarden.scss.hbs`**<br>
|
|
This file is the file you want to edit and add your custom styles to.
|
|
|
|
- **`vaultwarden.scss.hbs`**<br>
|
|
This file should not exist, since it will overwrite the built-in defaults.<br>
|
|
_**Only override this if you really know what you are doing!**_
|
|
|
|
```tree
|
|
.
|
|
├── templates
|
|
│ └── scss
|
|
│ ├── user.vaultwarden.scss.hbs
|
|
│ └── vaultwarden.scss.hbs
|
|
```
|
|
|
|
|
|
|
|
**Some examples which you can place inside `user.vaultwarden.scss.hbs`:**
|
|
```css
|
|
/* 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;
|
|
}
|
|
|
|
/* --- 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --- 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --- Dashboard Sidebar --- */
|
|
app-user-layout bit-nav-logo bit-icon::before { background-image: $logo-default !important; }
|
|
app-organization-layout bit-nav-logo bit-icon::before { background-image: $logo-admin !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"] { max-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; } */
|
|
}
|
|
}
|
|
```
|
|
|
|
**Non scrolling search filter: (tested with 'Stylus' browser extension)**
|
|
```css
|
|
/*
|
|
Make the "Filter" box fixed, so only the list of entries is scrolling.
|
|
Allow to always see what you filtered for and quickly access the search filter without scrolling back to the top.
|
|
*/
|
|
#main-content {
|
|
/*Edit 2025.09.12*/
|
|
contain: none;
|
|
}
|
|
|
|
#main-content > app-vault > .tw-flex .tw-basis-1\/4
|
|
{
|
|
position: fixed;
|
|
width: calc(25% - 55px);
|
|
}
|
|
|
|
#main-content > app-vault > .tw-flex .tw-basis-3\/4
|
|
{
|
|
position: relative;
|
|
left: calc(25% + 10px);
|
|
}
|
|
``` |