diff --git a/brand-proxy/nginx.conf b/brand-proxy/conf.d/default.conf similarity index 82% rename from brand-proxy/nginx.conf rename to brand-proxy/conf.d/default.conf index ae7d90c..5d695cb 100644 --- a/brand-proxy/nginx.conf +++ b/brand-proxy/conf.d/default.conf @@ -13,8 +13,8 @@ map $http_upgrade $connection_upgrade { # Første ledd i vertsnavnet er kundens slug: ethica.vaultnord.no -> ethica map $host $tenant { - default ""; - "~^(?[a-z0-9-]+)\." $slug; + default ""; + "~^(?[a-z0-9-]+)\.vaultnord\.no$" $slug; } server { @@ -28,6 +28,13 @@ server { # dynamisk, og nginx ville nektet å starte om en tenant var nede. resolver 127.0.0.11 valid=10s ipv6=off; + # Er hvelvet nede - stoppet, under oppdatering, eller kunden er satt på pause + # - skal brukeren møte noe som forklarer, ikke nginx sin 502-side. + error_page 502 503 504 =503 /_vaultnord/utilgjengelig.html; + # Gjelder bare våre egne 404-er (ukjent vertsnavn). 404 fra hvelvet selv + # slipper gjennom urørt - proxy_intercept_errors er av. + error_page 404 /_vaultnord/ukjent.html; + location = /_vaultnord/health { access_log off; return 200 "ok\n"; diff --git a/brand-proxy/static/brand.css b/brand-proxy/static/brand.css index 242c150..63da797 100644 --- a/brand-proxy/static/brand.css +++ b/brand-proxy/static/brand.css @@ -1,33 +1,90 @@ /* Vaultnord-preg på hvelvet. - Legges oppå Bitwarden-klienten utenfra, så den overlever en oppgradering av - hvelvet. Til gjengjeld kan klassenavnene endre seg oppstrøms - går noe i - stykker visuelt etter en oppdatering, er det her du ser først. */ + 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. -:root { - --vn-turkis: #3dd2cc; - --vn-turkis-mork: #17807d; + 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 . 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); } -/* Bitwardens egen aksentfarge, der klienten bruker variabler. */ -html, body.layout_frontend { +/* --- 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; -/* Innloggingssiden: rolig nordisk bunn i stedet for den blå gradienten. */ -body.layout_frontend { - background: linear-gradient(180deg, #f3f6fa 0%, #e8edf4 100%) !important; + --color-primary-100: 20 60 62; + --color-primary-300: 42 169 164; + --color-primary-600: 61 210 204; + --color-primary-700: 143 188 187; } -.bwi-shield::before, -.logo-image { - filter: hue-rotate(140deg) saturate(0.9); +/* --- 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); } -button.btn-primary, -.btn.btn-primary { - background-color: var(--vn-turkis-mork) !important; - border-color: var(--vn-turkis-mork) !important; +/* --- bunntekst med kildekodelenke ------------------------------------ */ +/* Plass til den, ellers legger den seg oppå klientens egen bunntekst. */ +body { + padding-bottom: 42px !important; } #vaultnord-footer { @@ -35,21 +92,20 @@ button.btn-primary, bottom: 0; left: 0; right: 0; - padding: 6px 12px; - font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; + padding: 7px 12px; + font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #55617a; - background: rgba(243, 246, 250, .94); + background: #f3f6fa; border-top: 1px solid #dbe2ec; text-align: center; z-index: 2147483000; } #vaultnord-footer a { color: #17807d; } -@media (prefers-color-scheme: dark) { - #vaultnord-footer { - color: #9aa5b8; - background: rgba(46, 52, 64, .94); - border-top-color: #434c5e; - } - #vaultnord-footer a { color: #8fbcbb; } +.theme_dark #vaultnord-footer, +body.theme_dark #vaultnord-footer { + color: #9aa5b8; + background: #202733; + border-top-color: #434c5e; } +.theme_dark #vaultnord-footer a { color: #8fbcbb; } diff --git a/brand-proxy/static/logo-white.png b/brand-proxy/static/logo-white.png new file mode 100644 index 0000000..43ee4fe Binary files /dev/null and b/brand-proxy/static/logo-white.png differ diff --git a/brand-proxy/static/logo.png b/brand-proxy/static/logo.png new file mode 100644 index 0000000..8c38395 Binary files /dev/null and b/brand-proxy/static/logo.png differ diff --git a/brand-proxy/static/ukjent.html b/brand-proxy/static/ukjent.html new file mode 100644 index 0000000..55ca4cc --- /dev/null +++ b/brand-proxy/static/ukjent.html @@ -0,0 +1,29 @@ + + + + + +Ukjent adresse — Vaultnord + + + +
+ +

Her er det ingenting

+

Adressen finnes ikke hos oss. Sjekk at du har skrevet den riktig — hvelvet + til bedriften din ligger på firmanavn.vaultnord.no.

+

Usikker? vaultnord.no eller + post@vaultnord.no.

+
+ + diff --git a/brand-proxy/static/utilgjengelig.html b/brand-proxy/static/utilgjengelig.html new file mode 100644 index 0000000..559b2bf --- /dev/null +++ b/brand-proxy/static/utilgjengelig.html @@ -0,0 +1,28 @@ + + + + + +Hvelvet er utilgjengelig — Vaultnord + + + +
+ +

Hvelvet er midlertidig utilgjengelig

+

Passordene deres er trygge og uendret — hvelvet svarer bare ikke akkurat nå.

+

Har dette vart en stund, ta kontakt på + post@vaultnord.no, så finner vi ut av det.

+
+ +