/* digenda accents for the lldap web UI. * * lldap has no theming support (compiled Yew/WASM frontend), so nginx injects * this file. Two constraints shape what it may do: * * 1. lldap ships bootstrap-nightshade and has its own dark-mode switch, so * this file must NOT set background or text colours -- doing so breaks one * of the two modes. Only accents are branded: buttons, links, focus rings, * the header rule and the logo. * 2. The served markup is with no class attribute, so the * selector prefix is html[lang] (not html[class][lang]). */ :root { --dg-teal: #0E6E73; --dg-teal-light: #34C2C6; --dg-teal-dark: #0A5559; } /* --- accents: links -------------------------------------------------------- */ html[lang] a, html[lang] a.link-secondary:hover, html[lang] .btn-link { color: var(--dg-teal-light); } html[lang] a:hover, html[lang] .btn-link:hover { color: var(--dg-teal); } /* --- accents: primary button ---------------------------------------------- */ html[lang] .btn.btn-primary { background-color: var(--dg-teal) !important; border-color: var(--dg-teal) !important; color: #ffffff !important; border-radius: 2px; font-weight: 600; } html[lang] .btn.btn-primary:hover, html[lang] .btn.btn-primary:focus { background-color: var(--dg-teal-dark) !important; border-color: var(--dg-teal-dark) !important; } /* --- accents: focus and checkboxes ---------------------------------------- */ html[lang] .form-control:focus, html[lang] select:focus { border-color: var(--dg-teal-light) !important; box-shadow: 0 0 0 .2rem rgba(14, 110, 115, .35) !important; } html[lang] .form-check-input:checked { background-color: var(--dg-teal) !important; border-color: var(--dg-teal) !important; } /* --- login form centring -------------------------------------------------- */ /* Upstream bug, not a deployment issue: app/src/components/login.rs renders
. Both center-block and col-offset-4 are Bootstrap 3 idioms and do nothing under the Bootstrap 5 that lldap ships (there they are mx-auto and offset-4), so only col-sm-4 survives and the form sits flush left. Centring it here also lines up the submit row, which is already row justify-content-center inside the form. */ html[lang] form.form.center-block { float: none !important; margin-left: auto !important; margin-right: auto !important; max-width: 420px; width: 100%; } /* Vertical centring, scoped to the login page via :has() so the user and group lists keep their normal top-aligned layout. The shell is .container.bg-kug > .row > main (app.rs), the row is a flex container, and the footer is fixed-bottom -- hence the viewport offset. */ html[lang] .container.bg-kug > .row:has(form.form.center-block) { min-height: calc(100vh - 220px); align-items: center; } /* --- chrome: brand rule under the header ---------------------------------- */ html[lang] header.border-bottom { border-bottom: 3px solid var(--dg-teal) !important; } html[lang] footer { border-top: 3px solid var(--dg-teal); } /* --- the digenda logo replaces the "LLDAP" heading ------------------------ */ html[lang] header a.d-flex h2, html[lang] header h2 { color: transparent !important; background-image: url("/digenda-logo.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain; /* The heading is a flex item inside header a.d-flex. With font-size:0 its content width is 0, so height alone paints nothing -- the box needs an explicit width. Width is derived from the artwork's aspect ratio (764x266 = 2.872) so background-size:contain fills the box exactly and leaves no dead space. flex-shrink is disabled so a narrow header cannot collapse it again. Tune via lldap_brand_logo_height_px. */ display: block !important; height: 72px !important; width: 207px !important; min-width: 207px !important; flex: 0 0 auto; margin-bottom: 0; font-size: 0 !important; } /* The default mark carries dark ink, which disappears on a dark background. Swap in the real white asset rather than filtering: brightness(0) invert(1) would also destroy the teal. The hook is html.dark: lldap ships bootstrap-dark-5, whose darkmode.js sets that class on -- verified in app/static/style.css (html.dark .bg-light, html.dark a) and driven by #darkModeToggle in app/src/components/banner.rs. Keying on the class rather than prefers-color-scheme means the manual toggle is followed too, not just the device setting. */ html.dark[lang] header a.d-flex h2, html.dark[lang] header h2 { background-image: url("/digenda-logo-white.svg"); }