/* ============================================================================ XMED Cloud — Ubuntu/Yaru theme: PRE-AUTH PAGES (GDM greeter look) Loaded AFTER the Colorlib bundle (assets/login_page/util.css + main.css) on pages/login_page.php and pages/select_branch.php, behind the server flag, with . The GNOME greeter is ALWAYS dark, so this file needs no light variant — every color resolves from yaru-tokens.css with the dark block active. Nothing matches without body.yaru: flag off = both pages render byte-identical to the stock template. THE MODEL IS GDM (Ubuntu 24.04), NOT A LOGIN CARD. Real GDM has no card, no border, no shadow, no panel: a scrimmed wallpaper, a 32px translucent top bar with a centered clock, one centered column (avatar · name · entries · button) sitting straight on the wallpaper, and a small session/power cluster bottom right. Everything below builds that; the template's card, illustration and in-field icons are switched off rather than restyled. COLOR RULE: yaru-tokens.css is the only file allowed to hold a literal hex. The single exception here is the SCRIM (section 1) — GDM's own darkening is a plain black wash, and it has to be an rgba() because no surface token carries the alpha ramp. Every other color is a var(--yaru-*). CONTRAST FLOOR. The wallpaper is a photo, so contrast is measured against the WORST PIXEL it can present. The shipped default (northern-lights.jpg) averages RGB 33,41,34 but its aurora highlights reach L=0.98 — effectively white — so every pair below is measured against a pure-white wallpaper pixel under the scrim. That is the true worst case, not a hypothetical one. ========================================================================== */ /* ------------------------- 1. ground + GDM scrim -------------------------- */ /* Layer 1 is the scrim, layer 2 the wallpaper. Both are `fixed` so the gradient stops are measured against the VIEWPORT, which is what puts the darkest band behind the top bar exactly as GDM does. The scrim never goes below 0.55: over a pure-white wallpaper pixel that composites to #737373 (L=0.171), where white body text measures 4.76:1 — the floor the whole greeter is built on. background-color is restated AFTER the shorthand (which would otherwise reset it) so a failed wallpaper request lands on the dark view token, never white. */ body.yaru { min-height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.78) 0, rgba(0,0,0,0.58) 140px, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.62) 100%) center center / cover no-repeat fixed, var(--yaru-wallpaper) center center / cover no-repeat fixed; background-color: var(--yaru-bg-view); color: var(--yaru-fg); font-family: var(--yaru-font); color-scheme: dark; /* native widgets + scrollbars go dark */ } /* ---------------------------- 2. layout shell ---------------------------- */ /* The template paints its own blue/violet gradient on the flex wrapper. Blank it wholesale (shorthand reset) so the scrimmed wallpaper on shows through. The symmetric panel-height padding keeps the column optically centered while guaranteeing it can never slide under the top bar. */ body.yaru .limiter, body.yaru .container-login100 { background: transparent; } body.yaru .container-login100 { padding: var(--yaru-panel-height) 15px; } /* ------------------- 3. the card, removed (GDM has none) ------------------ */ /* Every one of these declarations cancels a template declaration: 960px width, white ground, 10px radius, clipping, the 177px/130px/95px padding block and the two-column space-between flex. What is left is a 320px column of content on the wallpaper — no ground, no border, no shadow. overflow must go back to visible or the template's `overflow:hidden` would clip the entries' focus ring. REVERT = restore the previous card block; nothing else depends on it. */ body.yaru .wrap-login100 { width: 100%; max-width: 320px; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; } /* GDM is one centered column, so the decorative illustration goes (owner approved). REVERT = delete this single rule; the template's two-column flex layout comes straight back. */ body.yaru .login100-pic { display: none; } /* template pins the form at 290px (and 50% at <=992px); the column owns width */ body.yaru .login100-form { width: 100%; } /* ------------------------------ 4. top bar ------------------------------- */ /* GDM's panel: full width, --yaru-panel-height tall, translucent near-black, LEFT DELIBERATELY EMPTY (so does GDM's), clock centered, status glyphs right. --yaru-osd-bg is the token meant for exactly this job — an on-screen surface that has to stay readable over arbitrary content. Over a pure-white wallpaper pixel it composites to #333333, where --yaru-panel-fg measures 11.3:1; over the scrim's own 0.78 top band it is darker still. pointer-events:none is structural, not cosmetic: the bar is decorative and must never intercept a click meant for the form beneath it. z-index matches the desk shell's topbar band so the two products agree. */ body.yaru .yaru-greeter-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100100; display: flex; align-items: center; justify-content: flex-end; height: var(--yaru-panel-height); padding: 0 10px; background: var(--yaru-osd-bg); color: var(--yaru-panel-fg); font-family: var(--yaru-font); font-size: 13px; line-height: 1; pointer-events: none; user-select: none; -webkit-font-smoothing: antialiased; } /* absolutely centered, exactly like the shell clock: it stays on the viewport axis whatever the status area weighs. Same 13px/500 as the desk top bar. */ body.yaru .yaru-greeter-clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 500; white-space: nowrap; } body.yaru .yaru-greeter-status { display: flex; align-items: center; gap: 8px; } /* the glyphs are inline SVG drawn with currentColor, so they inherit the panel ink and can never render as a broken image the way an can */ body.yaru .yaru-greeter-status svg { display: block; width: 16px; height: 16px; flex: 0 0 auto; color: var(--yaru-panel-fg); } /* ------------------------------- 5. avatar ------------------------------- */ /* Pre-auth: there is no user to look up, so this is GDM's generic avatar, not somebody's photo. The disc is a translucent wash + hairline and is drawn by the DIV, so if the SVG ever 404s the circle survives instead of collapsing to a broken image (the carries alt=""). grayscale(1) is load-bearing: misc-avatar.svg is an app icon and carries its own teal, which this file may not restate as a hex. Desaturating renders GDM's neutral default-avatar disc — #747474 — and holds the white figure on it at 4.67:1. */ body.yaru .yaru-greeter-avatar { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; margin: 0 0 16px; border-radius: var(--yaru-radius-pill); background: var(--yaru-scrim); border: 1px solid var(--yaru-border); overflow: hidden; } body.yaru .yaru-greeter-avatar img { display: block; width: 104px; height: 104px; filter: grayscale(1); } /* ------------------------------- 6. title -------------------------------- */ /* GDM's greeting: Ubuntu Light, straight on the wallpaper. At 26px/300 this is WCAG large text (floor 3:1) and still measures 4.76:1 white-on-scrim. */ body.yaru .login100-form-title { padding-bottom: 26px; font-family: var(--yaru-font); font-size: 26px; font-weight: 300; /* GDM greeting = Ubuntu Light */ line-height: 1.2; color: var(--yaru-fg); } /* ------------------------------- 7. fields ------------------------------- */ body.yaru .wrap-input100 { width: 100%; margin-bottom: 12px; } /* GDM entry: ~320px, centered text, 8px corners, dark translucent fill. The fill has to be DARK, not light: this field floats on a photo, and only a dark wash keeps its text deterministic. --yaru-osd-bg over the scrim lands between #000000 and #171717 whatever the wallpaper does, which holds the white value at 18.4:1 and the placeholder at 6.28:1 in the WORST case. The placeholder is the only label these fields have, hence the high floor. The template's `0 30px 0 68px` padding existed to clear the in-field icon (killed below); centered text needs a symmetric inset instead. 8px is GDM's entry radius — one step softer than --yaru-radius-widget, which is the app's in-window widget value and reads too tight at this scale. */ body.yaru .input100 { height: 46px; padding: 0 16px; font-family: var(--yaru-font); font-size: 15px; text-align: center; color: var(--yaru-fg); background: var(--yaru-osd-bg); border: 1px solid var(--yaru-border-strong); border-radius: 8px; transition: border-color var(--yaru-dur-med) var(--yaru-ease), box-shadow var(--yaru-dur-fast) var(--yaru-ease); } /* The template's blue focus glow lives on .focus-input100 itself (keyframes anim-shadow); the pseudo-elements are listed too so the kill holds if the vendor file moves the effect into ::before/::after. */ body.yaru .focus-input100, body.yaru .focus-input100::before, body.yaru .focus-input100::after { display: none; } /* GDM has no icons inside its entries, and a left-inset glyph would collide with centered text anyway. The span is `pointer-events:none` and covers the whole field, so hiding it removes nothing but the FontAwesome glyph. */ body.yaru .symbol-input100 { display: none; } /* main.css ships `textarea:focus,input:focus{border-color:transparent!important}`. An !important declaration beats any specificity, so the accent focus border can only be restored by matching it. >>> THIS IS THE ONLY !important IN THIS FILE. <<< */ body.yaru .input100:focus { border-color: var(--yaru-accent) !important; box-shadow: 0 0 0 calc(var(--yaru-focus-ring) + 1px) var(--yaru-focus-soft); } /* the placeholder IS the field label here, so it gets the 4.5:1 treatment: fg-dim over the entry measures 6.28:1 against a pure-white wallpaper */ body.yaru .input100::placeholder { color: var(--yaru-fg-dim); opacity: 1; } /* preserve the template behaviour of clearing the placeholder on focus */ body.yaru .input100:focus::placeholder { color: transparent; } /* Chrome paints autofilled fields with its own pale ground and ignores background-color; the near-infinite transition holds the dark field. */ body.yaru .input100:-webkit-autofill, body.yaru .input100:-webkit-autofill:hover, body.yaru .input100:-webkit-autofill:focus { -webkit-text-fill-color: var(--yaru-fg); caret-color: var(--yaru-fg); transition: background-color 100000s ease-in-out 0s; } /* ------------------- 8. native branch select (select_branch) ------------- */ /* select2.min.css is linked but select2's JS never runs, so this stays a NATIVE