/* ============================================================ cryptokey.css — surcharge Thalyos/Cryptokey du web vault À déposer dans /opt/vaultwarden/branding/ (injecté par rebrand.sh) Deux systèmes de variables cohabitent dans cette version : - les nouvelles (--color-bg-*, --color-nav-*, --color-fg-*) en HEXADÉCIMAL (#12181D) - les anciennes (--color-background*, --color-primary-*) en TRIPLETS RGB (32 39 51) — sans # ni rgb() Respecter le format de chacune, sinon la valeur est ignorée. Palette : gamme construite autour de #7794A9 (teinte ~206°), gris réalignés sur la même teinte. Niveaux utilisés ici : brand 200 #D3DEE6 300 #B9C9D5 400 #97AEBF 500 #7794A9 700 #466479 800 #344F63 900 #253D4D 950 #162734 gris 050 #F2F7FA 100 #E6EDF2 200 #D3E0EA 300 #B1C7D7 700 #2E485B 800 #1B2F3F 900 #0F1F2B Chaque couleur est commentée avec son rôle. ============================================================ */ /* ---------------- THÈME SOMBRE (défaut) ---------------- */ .theme_dark { /* Fonds — nouvelle interface (gris 900 / 800 / 700) */ --color-bg-primary: #0F1F2B; /* fond principal (zone de contenu) */ --color-bg-secondary: #1B2F3F; /* panneaux, cartes, encadrés */ --color-bg-quaternary:#2E485B; /* séparations, surfaces relevées */ /* Barre latérale */ --color-nav-bg-primary: #1B2F3F; --color-nav-bg-secondary: #1B2F3F; --color-nav-bg-primary-strong: #344F63; /* élément de menu actif (brand 800) */ --color-nav-bg-secondary-strong: #344F63; /* Bordures principales, accordées aux fonds */ --color-border-base: #2E485B; /* gris 700 */ --color-border-light: #243B4D; /* intermédiaire 800–700, liseré cartes */ /* Fonds — ancienne interface (TRIPLETS RGB) */ --color-background: 15 31 43; /* = #0F1F2B */ --color-background-alt: 27 47 63; /* = #1B2F3F */ --color-background-alt3: 46 72 91; /* = #2E485B */ /* Accent : boutons, liens, éléments actifs (TRIPLETS RGB) */ --color-primary-600: 151 174 191; /* = #97AEBF, brand 400, 7,3:1 sur le fond */ --color-primary-700: 119 148 169; /* = #7794A9, survol */ --color-primary-100: 52 79 99; /* = #344F63, fonds légers teintés accent */ /* Accent — nouvelle interface (badges, éléments "brand"). En sombre, le système pose du texte foncé (--color-fg-contrast) sur les fonds brand : ils doivent donc rester clairs. */ --color-bg-brand: #97AEBF; /* brand 400, texte foncé à 7,3:1 */ --color-bg-brand-strong: #B9C9D5; /* brand 300, survol */ --color-fg-brand: #97AEBF; /* liens et intitulés brand */ --color-border-brand: #7794A9; /* l'ancre, visible à 5,3:1 */ } /* ---------------- THÈME CLAIR ---------------- */ .theme_light { /* Fonds — nouvelle interface */ --color-bg-primary: #FFFFFF; /* fond principal */ --color-bg-secondary: #F2F7FA; /* panneaux, cartes (gris 050) */ --color-bg-tertiary: #F2F7FA; /* Barre latérale (sombre même en thème clair, comme l'origine) */ --color-nav-bg-primary: #162734; /* ardoise brand 950 */ --color-nav-bg-secondary: #E6EDF2; /* gris 100 */ --color-nav-bg-primary-strong: #101C25; /* élément actif, plus foncé */ --color-nav-bg-secondary-strong: #B1C7D7; /* gris 300 */ --color-nav-bg-primary-hover: rgba(119, 148, 169, 0.18); /* survol acier */ --color-nav-bg-primary-hover-strong: rgba(119, 148, 169, 0.4); --color-nav-border-primary: #466479; /* brand 700 */ --color-nav-border-secondary: #D3E0EA; /* gris 200 */ /* Fonds — ancienne interface (TRIPLETS RGB) */ --color-background: 255 255 255; --color-background-alt: 242 247 250; /* = #F2F7FA */ --color-background-alt3: 22 39 52; /* = #162734, ardoise nav */ --color-background-alt4: 16 28 37; /* = #101C25 */ /* Accent (TRIPLETS RGB) — foncé pour rester lisible avec texte blanc */ --color-primary-600: 70 100 121; /* = #466479, boutons et liens, 6,25:1 */ --color-primary-700: 52 79 99; /* = #344F63, survol */ --color-primary-100: 232 238 242; /* = #E8EEF2, brand 100, fonds légers */ /* Accent — nouvelle interface */ --color-bg-brand: #466479; /* brand 700 */ --color-bg-brand-strong: #344F63; /* brand 800 */ --color-bg-brand-stronger:#253D4D; /* brand 900 */ --color-fg-brand: #466479; --color-fg-brand-strong: #344F63; --color-border-brand: #466479; } /* ============================================================ Volontairement NON surchargés : - couleurs de texte (--color-text-*, --color-fg-heading/body) : lisibilité gérée par le thème d'origine - sémantiques (danger/success/warning/info) : leur sens prime - gammes utilitaires (--color-gray-*, secondary-*) : gris neutres Pour ajuster une zone précise, ajouter la règle ciblée ci-dessous. ============================================================ */ /* --- Logo de la barre latérale (SVG inline dans l'appli) --- */ bit-nav-logo svg { display: none !important; } bit-nav-logo a { display: block !important; height: 48px; margin: 8px 0; background: url('/images/logo-white.svg') no-repeat left 12px center; background-size: contain; } /* ============================================================================ /* Page de connexion : logo */ bit-landing-header bit-svg svg { display: none !important; } bit-landing-header bit-svg { display: block !important; width: 200px; height: 50px; background: url('/images/logo.svg') no-repeat left center; background-size: contain; } .theme_dark bit-landing-header bit-svg { background-image: url('/images/logo-white.svg'); } /* Pied de la connexion : coordonnees Thalyos */ bit-landing-footer footer { visibility: hidden; position: relative; min-height: 70px; } bit-landing-footer footer::before { content: "Cryptokey"; visibility: visible; position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; color: rgb(var(--color-text-main)); font-size: 20px; font-weight: 700; } bit-landing-footer footer::after { content: "Service fourni par Thalyos - Pour toutes questions : support@thalyos.fr"; visibility: visible; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgb(var(--color-text-main)); font-size: 13px; }