146 lines
5.5 KiB
CSS
146 lines
5.5 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 og bakgrunnsfigurene er inline SVG-er som henter fargene sine fra
|
|
variabler. Å legge et hue-filter på dem gjetter feil figur og gir rare
|
|
resultater - variablene treffer presist. */
|
|
.theme_light {
|
|
--color-illustration-bg-primary: 176 230 226;
|
|
--color-illustration-bg-secondary: 126 214 209;
|
|
--color-illustration-bg-tertiary: 240 250 249;
|
|
--color-illustration-outline: 18 102 106;
|
|
--color-illustration-logo: 23 128 125;
|
|
--color-illustration-tertiary: 235 203 139;
|
|
}
|
|
.theme_dark {
|
|
--color-illustration-bg-primary: 26 110 108;
|
|
--color-illustration-bg-secondary: 61 210 204;
|
|
--color-illustration-bg-tertiary: 243 246 249;
|
|
--color-illustration-outline: 8 47 51;
|
|
--color-illustration-logo: 255 255 255;
|
|
--color-illustration-tertiary: 235 203 139;
|
|
}
|
|
|
|
/* --- klientens egen bunntekst ---------------------------------------- */
|
|
/* Rekkefølgen i <bit-landing-footer>: miljøvelger, produktnavn, versjon, br,
|
|
ansvarsfraskrivelse. Vi skjuler produktnavnet og setter vårt eget foran
|
|
versjonstallet - tallet blir stående som det er, så det følger hvelvet ved
|
|
oppgradering i stedet for å ruste fast i en CSS-fil.
|
|
Ansvarsfraskrivelsen (#vw-disclaimer) røres ikke: den skal stå, både av
|
|
hensyn til AGPL og til Bitwardens varemerke. */
|
|
bit-landing-footer footer > div:nth-of-type(2) {
|
|
display: none !important;
|
|
}
|
|
bit-landing-footer footer > div:nth-of-type(3)::before {
|
|
content: "Vaultnord \2014 bygger på Vaultwarden ";
|
|
}
|
|
|
|
/* --- bunntekst med kildekodelenke ------------------------------------ */
|
|
/* Bunnteksten skal alltid være synlig - det er der kildekodelenken bor - men
|
|
klientens layout er min-h-screen, så deres egen bunntekst havner nøyaktig der
|
|
en fast stripe ligger. Padding hjelper ikke, for stripen følger vinduet.
|
|
Løsningen er å krympe "en skjermhøyde" med akkurat stripens høyde. */
|
|
.tw-min-h-screen {
|
|
min-height: calc(100vh - 46px) !important;
|
|
}
|
|
|
|
#vaultnord-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 46px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 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; }
|