change paths for web-v2025.1.1 (only change top left image, not bit-icon above login)

Stefan Melmuk
2025-01-26 09:30:01 +01:00
parent b41a2d30d2
commit dbcf3bc06b

@@ -1,8 +1,7 @@
# Customize Vaultwarden CSS # Customize Vaultwarden CSS
> [!IMPORTANT] > [!IMPORTANT]
> **This functionality is not yet merged or released!** > **This functionality is only available in v1.33.0 and later releases.
> It will probably land as stable in v1.33.0
Since version v1.33.0 you can modify the CSS which Vaultwarden previously embedded in the web-vault.<br> 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. This way it makes it more easier for users to tweak the style and layout or even hide items.
@@ -59,33 +58,35 @@ app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(5
} }
/* Use a custom login logo */ /* Use a custom login logo */
app-login img.logo { app-root img.new-logo-themed {
content: url(../images/my-custom-login.logo.png) !important; content: url(../images/my-custom-login.logo.png) !important;
} }
/* Use a custom top left logo global */ /* Use a custom top left logo global */
bit-icon > svg { auth-anon-layout > main > a > bit-icon > svg {
display: none !important; display: none !important;
} }
bit-icon::before { auth-anon-layout > main > a > bit-icon bit-icon::before {
display: block; display: block;
content: "" !important; content: "" !important;
width: 175px !important; width: 175px !important;
height: 30px !important; height: 36px !important;
background-image: url(../images/my-custom-global-logo.png) !important; background-image: url(../images/my-custom-global-logo.png) !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: contain; background-size: contain;
} }
/* Use a custom top left logo different per vault/admin */ /* Use a custom top left logo different per vault/admin */
bit-icon > svg { app-user-layout bit-icon > svg,
app-organization-layout bit-icon > svg {
display: none !important; display: none !important;
} }
bit-icon::before { app-user-layout bit-icon,
app-organization-layout bit-icon {
display: block; display: block;
content: "" !important; content: "" !important;
width: 175px !important; width: 200px !important;
height: 30px !important; height: 50px !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: contain; background-size: contain;
} }
@@ -95,4 +96,4 @@ app-user-layout bit-icon::before {
app-organization-layout bit-icon::before { app-organization-layout bit-icon::before {
background-image: url(../images/my-custom-admin-console-logo.png) !important; background-image: url(../images/my-custom-admin-console-logo.png) !important;
} }
``` ```