/* Brand kit You Soluções aplicado ao web vault do Vaultwarden. * * Paleta oficial: navy #001A61 (0 26 97) e #0A1240 (10 18 64), salmão #F09879 * (240 152 121), terracota #C95E5C (201 94 92). * * O web vault é o Bitwarden compilado, e o Vaultwarden não tem tema próprio: o * arquivo /css/vaultwarden.css que o index carrega é gerado pelo binário e não * dá para sobrepor. Por isso este arquivo é servido pelo nginx e injetado no * por sub_filter, o mesmo mecanismo usado no tema do NetBox. * * As cores do Bitwarden são custom properties no formato Tailwind, com os * canais RGB separados por espaço e sem função rgb(), porque são consumidas * como rgb(var(--color-x) / opacidade). Hexadecimal aqui não tem efeito. * * A lista abaixo não é enxuta de propósito. A primeira versão trocou só a cor * primária e a tela depois do login continuou azul, porque a barra lateral usa * --color-background-alt2 e as ilustrações usam variáveis próprias. O conjunto * de referência está no CSS compilado do web vault: procurar o bloco :root que * define --color-background-alt2 para ver todas. */ /* ---------- tema claro: navy como cor de ação e de navegação ---------- */ :root, .theme_light { /* barra lateral e superfícies de destaque */ --color-background-alt2: 0 26 97; /* ação */ --color-primary-100: 219 225 240; --color-primary-300: 90 105 160; --color-primary-600: 0 26 97; --color-primary-700: 10 18 64; /* realce e foco */ --color-hover-default: rgb(0 26 97 / 0.1); --color-info-600: 26 56 140; --color-info-700: 10 18 64; /* a marca do produto, que aparece em logo e ilustração */ --color-bw-blue: 0 26 97; --color-marketing-logo: 0 26 97; --color-illustration-logo: 0 26 97; --color-illustration-outline: 0 26 97; --color-illustration-bg-primary: 219 225 240; --color-illustration-bg-secondary: 170 182 215; --color-illustration-tertiary: 240 152 121; /* perigo em terracota, aviso em salmão */ --color-danger-600: 201 94 92; --color-danger-700: 150 60 58; --color-warning-600: 240 152 121; --color-warning-700: 160 84 60; --color-bg-avatar-brand: 0 26 97; --color-bg-avatar-brand-hover: 10 18 64; } /* ---------- tema escuro: o navy some no fundo escuro, a ação vira salmão ----- */ .theme_dark { --color-background-alt2: 10 18 64; --color-primary-100: 32 44 88; --color-primary-300: 150 165 205; --color-primary-600: 240 152 121; --color-primary-700: 246 190 168; --color-hover-default: rgb(240 152 121 / 0.12); --color-info-600: 150 165 205; --color-bw-blue: 240 152 121; --color-illustration-outline: 240 152 121; --color-illustration-bg-primary: 32 44 88; --color-illustration-bg-secondary: 58 74 130; --color-illustration-tertiary: 240 152 121; --color-danger-600: 229 143 141; --color-danger-700: 201 94 92; --color-warning-600: 240 152 121; --color-bg-avatar-brand: 240 152 121; --color-bg-avatar-brand-hover: 201 94 92; } /* O lockup da You é empilhado, com proporção quase quadrada, enquanto o logo * original do Bitwarden é uma faixa 290x60. Sem esta regra a marca apareceria * espremida na altura da faixa. */ img[src*="logo"] { height: auto !important; max-height: 72px; width: auto !important; max-width: 200px; } /* Dentro da aplicação o logo fica na barra lateral navy, num espaço mais baixo * que o da tela de login. */ bit-nav-logo img[src*="logo"] { max-height: 46px; }