/* --------------------------------------------------------------------------- Venuoro skin for the Authelia portal. Authelia themes natively only as far as a logo, a favicon and light/dark, so the rest is done here: served from this origin (CSP allows style-src 'self', so no nonce is needed) and injected into by nginx. Everything is targeted through MUI's STABLE global class names - .MuiOutlinedInput-root, .MuiButton-root - never the emotion hashes beside them, which are regenerated on every build. That is what makes this survive an Authelia upgrade. Colours are the app's own dark tokens, copied verbatim from eh-ledger/resources/css/app.css rather than eyeballed. --------------------------------------------------------------------------- */ @font-face { font-family: 'Manrope'; src: url('/brand/fonts/Manrope-var-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2190-2193, U+2212; } @font-face { font-family: 'Manrope'; src: url('/brand/fonts/Manrope-var-greek.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; } :root { --v-background: oklch(0.155 0.004 286); --v-foreground: oklch(0.955 0.001 286); --v-muted-fg: oklch(0.66 0.006 286); --v-border: oklch(0.26 0.005 286); --v-border-str: oklch(0.31 0.005 286); --v-secondary: oklch(0.215 0.005 286); --v-tenant: oklch(0.51 0.23 275); --v-tenant-fg: oklch(0.985 0 0); --v-radius: 14px; /* --radius-md, what the app's rounded-md resolves to */ --v-destructive: oklch(0.66 0.16 25); } /* --- the page ----------------------------------------------------------- */ body, #root { background: var(--v-background) !important; color: var(--v-foreground) !important; font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important; } /* The app's sign-in is an optically centred 22rem column, everything flush left. Authelia centres its text; left-align to match. */ #root .MuiContainer-root, #root form { max-width: 22rem; } #root .MuiGrid-root { text-align: left; } /* --- the mark ----------------------------------------------------------- */ #root img[src*="logo"] { max-height: 28px; width: auto; margin-bottom: 24px; } /* --- headings ----------------------------------------------------------- */ /* :227 of the design spec — auth h1 is 24/30, 600, -0.01em. */ #root h1, #root h2, #root .MuiTypography-h5, #root .MuiTypography-h6 { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important; font-size: 24px !important; line-height: 30px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--v-foreground) !important; text-align: left !important; } /* --- fields ------------------------------------------------------------- */ /* Flat bordered input, 36px, radius 14 — not Material's floating-label box. */ #root .MuiOutlinedInput-root { background: var(--v-background) !important; border-radius: var(--v-radius) !important; font-size: 14px !important; color: var(--v-foreground) !important; } #root .MuiOutlinedInput-input { padding: 10px 12px !important; color: var(--v-foreground) !important; } #root .MuiOutlinedInput-notchedOutline { border-color: var(--v-border-str) !important; border-width: 1px !important; } #root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--v-border-str) !important; } /* The focus RING carries the tenant colour; the border deliberately does not, because a tenant-coloured border collides with the error state. */ #root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--v-border-str) !important; box-shadow: 0 0 0 2px oklch(from var(--v-tenant) l c h / 0.55); } #root .MuiInputLabel-root { font-size: 12px !important; font-weight: 500 !important; color: var(--v-muted-fg) !important; } #root .MuiInputLabel-root.Mui-focused { color: var(--v-muted-fg) !important; } /* --- buttons ------------------------------------------------------------ */ /* :291 — auth buttons are 40px, radius 14, 13/500, and NOT shouty caps. */ #root .MuiButton-root { border-radius: var(--v-radius) !important; text-transform: none !important; font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; min-height: 40px !important; box-shadow: none !important; } #root .MuiButton-contained, #root .MuiButton-containedPrimary { background: var(--v-tenant) !important; color: var(--v-tenant-fg) !important; } #root .MuiButton-contained:hover { background: var(--v-tenant) !important; opacity: 0.9; box-shadow: none !important; } /* --- links, checkbox, notices ------------------------------------------- */ #root a, #root .MuiLink-root { color: var(--v-muted-fg) !important; text-decoration: underline; text-underline-offset: 4px; font-size: 12px !important; } #root a:hover { color: var(--v-foreground) !important; } #root .MuiCheckbox-root { color: var(--v-border-str) !important; } #root .MuiCheckbox-root.Mui-checked { color: var(--v-tenant) !important; } #root .MuiFormControlLabel-label { font-size: 14px !important; color: var(--v-foreground) !important; } #root .MuiAlert-root { border-radius: var(--v-radius) !important; font-size: 14px !important; } /* Authelia's own footer credit. The workspace paid for white-label; this is a sign-in screen with their name on it. */ #root .MuiTypography-root a[href*="authelia.com"], #root .MuiTypography-body2:has(a[href*="authelia.com"]) { display: none !important; } /* Motion budget from §4 — the app settles inside a fifth of a second. */ @media (prefers-reduced-motion: reduce) { #root *, #root *::before, #root *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --------------------------------------------------------------------------- Second pass, from the rendered DOM rather than from assumption. --------------------------------------------------------------------------- */ /* The credit anchor sits in a plain MuiGrid cell, not a Typography, which is why the earlier selector missed it. */ #root a[href*="authelia.com"] { display: none !important; } /* The heading carried margin-bottom: 0, leaving 16px to the first field where the app leaves 32. */ #root .MuiTypography-h5, #root h1, #root h2 { margin-bottom: 32px !important; } /* §5: fields are 36, not Material's 40. */ #root .MuiOutlinedInput-root { min-height: 36px !important; } #root .MuiOutlinedInput-input { padding: 7px 12px !important; } /* Venuoro puts the label ABOVE the field; Material floats it through the border. Un-float it and remove the notch it cuts into the outline. */ #root .MuiFormControl-root { display: flex; flex-direction: column; } #root .MuiInputLabel-root { position: static !important; transform: none !important; max-width: none !important; margin-bottom: 4px !important; pointer-events: auto !important; } #root .MuiOutlinedInput-notchedOutline legend { display: none !important; } #root .MuiOutlinedInput-notchedOutline { top: 0 !important; } /* Group rhythm 24, per §3. */ #root .MuiFormControl-root + .MuiFormControl-root, #root .MuiTextField-root + .MuiTextField-root { margin-top: 24px !important; } /* The mark sat 8px inside the column its own form defines (logo left 584, everything else 576). Measured, not guessed. */ #root img[src*="logo"] { display: block; margin-left: -8px; }