Vaultwarden Wiki 中文版
⮐ Vaultwarden Wiki个人主页联系我
  • 关于
  • 首页
  • FAQ
    • 1.FAQ
    • 2.审计
    • 故障排除
      • 1.Bitwarden Android 故障排除
  • 容器镜像的使用
    • 1.容器镜像的选择
    • 2.启动容器
    • 3.更新 Vaultwarden 镜像
    • 4.使用 Docker Compose
    • 5.使用 Podman
  • 部署
    • 1.构建您自己的镜像
    • 2.构建二进制
    • 3.预构建二进制
    • 4.第三方包
    • 5.部署示例
    • 6.代理示例
    • 7.转储示例
    • HTTPS
      • 1.启用 HTTPS
      • 2.使用 Let's Encrypt 证书运行私有 Vaultwarden 实例
  • 配置
    • 1.配置概述
    • 2.禁用新用户注册
    • 3.禁用邀请
    • 4.启用管理页面
    • 5.禁用管理令牌
    • 6.启用 WebSocket 通知
    • 7.启用移动客户端推送通知
    • 8.启用 U2F 和 FIDO2 WebAuthn 身份验证
    • 9.启用 YubiKey OTP 身份验证
    • 10.更改持久性数据位置
    • 11.更改 API 请求大小限制
    • 12.更改 worker 数量
    • 13.SMTP 配置
    • 14.显示密码提示
    • 15.禁用或覆盖密码库接口托管
    • 16.日志记录
    • 17.设置为 systemd 服务
    • 18.从 LDAP 同步用户
    • 19.使用备用基本目录(子目录/子路径)
    • 20.其他配置
    • *使用 systemd docker 运行
    • 数据库
      • 1.使用 MariaDB (MySQL) 后端
      • 2.使用 PostgreSQL 后端
      • 3.在未启用 WAL 的情况下运行
      • 4.从 MariaDB (MySQL) 迁移到 SQLite
    • 安全
      • 1.强化指南
      • 2.Fail2ban 设置
      • 3.Docker Traefik ModSecurity 设置
    • 其他
      • 1.翻译电子邮件模板
      • 2.翻译管理页面
      • 3.自定义 Vaultwarden CSS
  • 备份
    • 1.通用(非 docker)
  • 其他
    • 1.从 Keepass 或 KeepassX 导入数据
    • 2.备份您的密码库
    • 3.与上游 API 实现的区别
    • 4.支持上游的发展
    • 5.使用 Cloudflare DNS 的 Caddy 2.x
    • 6.Git hooks
    • *使用非 root 用户运行 docker 容器
    • *使私有 CA 和自签名证书兼容 Chrome
    • *测试 SSO
由 GitBook 提供支持
在本页
  1. 配置
  2. 其他

3.自定义 Vaultwarden CSS

上一页2.翻译管理页面下一页备份

最后更新于1个月前

对应的

此功能仅适用于 v1.33.0 及更高版本。

从 v1.33.0 版本开始,您可以修改 Vaultwarden 之前嵌入到 web-Vault 中的 CSS。这样,用户可以方便地调整样式和布局,甚至隐藏项目。

要修改 CSS,您需要在 data 目录中添加 templates 目录,或通过 TEMPLATES_FOLDER 环境变量提供正确的路径。

在此目录中,您需要创建另一个名为 scss 的目录,该目录将保存用于修改 Vaultwarden CSS 的文件。

您可以在此处放置两个文件:

  • user.vaultwarden.scss.hbs:该文件是您要编辑并向其中添加自定义样式的文件。

  • vaultwarden.scss.hbs:该文件不应该存在,因为它将覆盖内置默认值。只有当您真正知道自己在做什么时才可以覆盖此设置!

.
├── templates
│   └── scss
│       ├── user.vaultwarden.scss.hbs
│       └── vaultwarden.scss.hbs

可以将其放置在 user.vaultwarden.scss.hbs 中的一些示例:

/* 隐藏 "验证器 App" 2FA (列表第一项) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(1) {
  @extend %vw-hide;
}

/* 隐藏 "YubiKey OTP 安全钥匙" 2FA (列表第二项) */
/* 注意:如果 Yubikey 配置为净设置,该选项也将自动隐藏 */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(2) {
  @extend %vw-hide;
}

/* 隐藏 "Duo" 2FA (列表第三项) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(3) {
  @extend %vw-hide;
}

/* 隐藏 "FIDO2 WebAuthn" 2FA (列表第四项) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(4) {
  @extend %vw-hide;
}

/* 隐藏 "Email" 2FA (列表第五项) */
/* 注意:如果未启用电子邮箱功能,该选项也将自动隐藏。 */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(5) {
  @extend %vw-hide;
}

/* 使用自定义登录 logo */
app-root img.new-logo-themed {
	content: url(../images/my-custom-login-logo.png) !important;
}

/* 在登录和锁定界面的左上角使用自定义 logo */
auth-anon-layout > main > a > bit-icon > svg {
  display: none !important;
}
auth-anon-layout > main > 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;
}

/* 使用自定义左上角徽标,密码库和管理页面不一样 */
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;
}
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;
}
官方页面地址