Synk fra arbeidsrepoet
This commit is contained in:
Vaultnord
+175
@@ -0,0 +1,175 @@
|
||||
/* 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; }
|
||||
|
||||
/* Klienten merker logoene sine med aria-label. Det er mer stabilt å henge på
|
||||
enn komponentnavn, og treffer både innloggingssidene og skallet innenfor. */
|
||||
bit-svg[aria-label*="logo" i] {
|
||||
display: none !important;
|
||||
}
|
||||
a:has(> bit-svg[aria-label*="logo" i]),
|
||||
bit-landing-header a:has(bit-svg) {
|
||||
display: block !important;
|
||||
min-width: 150px;
|
||||
height: 40px;
|
||||
background: url(/_vaultnord/logo-white.png) left center / contain no-repeat;
|
||||
}
|
||||
.theme_light a:has(> bit-svg[aria-label*="logo" i]),
|
||||
.theme_light bit-landing-header a:has(bit-svg) {
|
||||
background-image: url(/_vaultnord/logo.png);
|
||||
}
|
||||
|
||||
/* Logoen i sidemenyen når man er logget inn. Den ligger i <bit-nav-logo> og
|
||||
har ingen aria-label å henge på, så komponentnavnet må brukes. Menyen er
|
||||
mørk i begge temaer, derfor alltid den lyse logoen. */
|
||||
bit-nav-logo bit-svg,
|
||||
bit-nav-logo svg {
|
||||
display: none !important;
|
||||
}
|
||||
bit-nav-logo a {
|
||||
background: url(/_vaultnord/logo-white.png) center / 170px auto no-repeat;
|
||||
}
|
||||
|
||||
/* --- 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. */
|
||||
body.layout_frontend .tw-min-h-screen {
|
||||
min-height: calc(100vh - 46px) !important;
|
||||
}
|
||||
body.layout_frontend .tw-h-screen {
|
||||
height: calc(100vh - 46px) !important;
|
||||
}
|
||||
/* Og når innholdet er høyere enn vinduet: uten denne ligger stripen oppå det
|
||||
siste avsnittet når man har rullet helt ned. Begge deler trengs - den ene
|
||||
for korte sider, den andre for lange. */
|
||||
body.layout_frontend {
|
||||
padding-bottom: 46px !important;
|
||||
}
|
||||
|
||||
/* Inne i det innloggede skallet er det ingen plass å ta - der har klienten sin
|
||||
egen rullebeholder med fast høyde. Kildekodelenken står uansett på
|
||||
innloggingssiden, som er der alle begynner. */
|
||||
body:not(.layout_frontend) #vaultnord-footer {
|
||||
display: none !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; }
|
||||
Reference in New Issue
Block a user