112 lines
4.0 KiB
CSS
112 lines
4.0 KiB
CSS
/* Vaultnord-preg på hvelvet.
|
|
Legges oppå Bitwarden-klienten utenfra av brand-proxyen, så den overlever en
|
|
oppgradering av hvelvet. Prisen er at vi henger på klassenavn og CSS-variabler
|
|
fra web-klienten: ser noe rart ut etter en oppdatering, er det her du ser
|
|
først. Til gjengjeld er fiksen en CSS-linje, ikke en byggejobb.
|
|
|
|
Variabelnavnene under er hentet fra web-klientens egen styles.css, der de er
|
|
definert per tema som RGB-tripler uten rgb(). */
|
|
|
|
/* --- logo ------------------------------------------------------------ */
|
|
/* To steder: den statiske i index.html før appen starter, og den Angular
|
|
tegner etterpå som inline SVG i <bit-landing-header>. Begge må tas. */
|
|
.theme_light img.new-logo-themed { content: url(/_vaultnord/logo.png) !important; }
|
|
.theme_dark img.new-logo-themed { content: url(/_vaultnord/logo-white.png) !important; }
|
|
img.new-logo-themed { width: 190px !important; height: auto !important; }
|
|
|
|
bit-landing-header a bit-svg,
|
|
bit-landing-header a svg {
|
|
display: none !important;
|
|
}
|
|
bit-landing-header a {
|
|
display: block !important;
|
|
width: 190px;
|
|
height: 42px;
|
|
background: url(/_vaultnord/logo-white.png) left center / contain no-repeat;
|
|
}
|
|
.theme_light bit-landing-header a {
|
|
background-image: url(/_vaultnord/logo.png);
|
|
}
|
|
|
|
/* --- farger ---------------------------------------------------------- */
|
|
/* Klienten bygger alt på en fargetrapp (--color-brand-050 … 950) som de
|
|
semantiske variablene peker inn i: knapper bruker --color-bg-brand-strong,
|
|
som igjen er var(--color-brand-800). Bytter vi trappa, følger resten med -
|
|
knapper, lenker, fokusringer - uten at vi må jakte enkeltklasser. */
|
|
.theme_light, .theme_dark, :root {
|
|
--color-brand-050: #f0faf9;
|
|
--color-brand-100: #d7f2f0;
|
|
--color-brand-200: #b0e6e2;
|
|
--color-brand-300: #7ed6d1;
|
|
--color-brand-400: #47c2bc;
|
|
--color-brand-500: #2aa9a4;
|
|
--color-brand-600: #1f918d;
|
|
--color-brand-700: #17807d;
|
|
--color-brand-800: #12666a;
|
|
--color-brand-900: #0e4e52;
|
|
--color-brand-950: #082f33;
|
|
|
|
/* Den gamle primary-trappa lever fortsatt enkelte steder. */
|
|
--color-primary-100: 227 241 240;
|
|
--color-primary-300: 42 169 164;
|
|
--color-primary-600: 23 128 125;
|
|
--color-primary-700: 18 102 106;
|
|
}
|
|
.theme_dark {
|
|
/* På mørk bunn er trappa speilvendt i klienten: bg-brand-strong peker på
|
|
brand-200, ikke 800. Da må de lyse trinnene være de mettede. */
|
|
--color-brand-050: #082f33;
|
|
--color-brand-100: #0e4e52;
|
|
--color-brand-200: #3dd2cc;
|
|
--color-brand-300: #7ed6d1;
|
|
--color-brand-400: #3dd2cc;
|
|
--color-brand-500: #2aa9a4;
|
|
--color-brand-600: #1f918d;
|
|
--color-brand-700: #17807d;
|
|
--color-brand-800: #3dd2cc;
|
|
--color-brand-900: #0e4e52;
|
|
--color-brand-950: #082f33;
|
|
|
|
--color-primary-100: 20 60 62;
|
|
--color-primary-300: 42 169 164;
|
|
--color-primary-600: 61 210 204;
|
|
--color-primary-700: 143 188 187;
|
|
}
|
|
|
|
/* --- illustrasjoner -------------------------------------------------- */
|
|
/* Safen på innloggingssiden er en inline SVG med klientens blåtoner. Vi kan
|
|
ikke fargelegge enkeltbaner utenfra uten å kjenne dem, men et hue-skift på
|
|
hele figuren lander den i samme familie som resten. */
|
|
svg:has(.tw-fill-illustration-logo) {
|
|
filter: hue-rotate(142deg) saturate(.8);
|
|
}
|
|
|
|
/* --- bunntekst med kildekodelenke ------------------------------------ */
|
|
/* Plass til den, ellers legger den seg oppå klientens egen bunntekst. */
|
|
body {
|
|
padding-bottom: 42px !important;
|
|
}
|
|
|
|
#vaultnord-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 7px 12px;
|
|
font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
color: #55617a;
|
|
background: #f3f6fa;
|
|
border-top: 1px solid #dbe2ec;
|
|
text-align: center;
|
|
z-index: 2147483000;
|
|
}
|
|
#vaultnord-footer a { color: #17807d; }
|
|
|
|
.theme_dark #vaultnord-footer,
|
|
body.theme_dark #vaultnord-footer {
|
|
color: #9aa5b8;
|
|
background: #202733;
|
|
border-top-color: #434c5e;
|
|
}
|
|
.theme_dark #vaultnord-footer a { color: #8fbcbb; }
|