/* ============================================================================= ADMIN LOGIN — skin overlay for the 'basic' layout ----------------------------------------------------------------------------- The login page is the first screen anyone sees and, until now, the one screen the reskin never reached. App/View/Layouts/basic.ctp emits no ext-neptune.css, no skin link and no data-theme, so Users/webroot/css/login.css (202 lines, 2012 vintage) was the whole design: a grey gradient, a hard #6E7B83 glow, and #6E7B83 text that measures 4.0:1 on white — under AA for its 20px inputs. WHY A SEPARATE FILE, not a section of admin-skin.css. admin-skin.css is ~500KB of Ext 4.1 overrides. This page has no Ext on it at all: it is plain HTML plus jQuery. Loading half a megabyte to restyle nine selectors would make the FIRST PAINT of the product measurably worse to fix a page that needs 4KB. The cost of that choice is a duplicated token block. It is deliberately the MINIMUM subset this page uses, and admin-skin.css remains the source of truth: if a value below disagrees with it, admin-skin.css is right and this is stale. Everything is gated on html.ss-skin-on, so the file is inert until basic.ctp's activation script opts in — same contract as the admin skin and the shell. ============================================================================= */ html.ss-skin-on{ --bg:#f1f1f1; --surface:#ffffff; --ink:#13181d; --ink-2:#2a333f; --muted:#55606e; --line:#dedede; --line-strong:#c4c4c4; --accent:#8c428e; --accent-2:#763676; --neg:#dc2626; --r-md:7px; --r-lg:11px; --sh-4:0 20px 48px rgba(15,23,42,.16), 0 4px 12px rgba(15,23,42,.08); /* --muted (#64748b) is 4.76:1 on WHITE but only 4.34:1 on --bg, and the copyright sits on --bg, not on the card. Its own token rather than a one-off literal, so the reason survives. */ --foot:#5b6672; --logo-filter:none; --field-icon-filter:none; } html.ss-skin-on[data-theme="dark"]{ --bg:#13181d; --surface:#1a2028; --ink:#f1f1f1; --ink-2:#c7cdd4; --muted:#98a2ae; --line:#2a333f; --line-strong:#3a4552; --accent:#9be7d6; --accent-2:#b4eee1; --neg:#f87171; --sh-4:0 24px 56px rgba(0,0,0,.65); --foot:#98a2ae; /* 6.50:1 on --bg; --muted is fine here */ /* ss-logo-gray.png is a flat #6E7B83 mark: 3.0:1 on the dark card, which is only just a graphic pass. Lifting it is a filter, not a second asset. */ --logo-filter:brightness(1.55); /* icon-user-dark.png / icon-pass-dark.png are DARK glyphs drawn for a white card — they vanish outright without this. */ --field-icon-filter:invert(1) brightness(.92); } /* the page ------------------------------------------------------------------ */ html.ss-skin-on{ background: var(--bg) !important; /* replaces the 2012 grey gradient */ color: var(--ink); } html.ss-skin-on body{ color: var(--ink); } /* login.css sets font-weight:200 on `body *`. That is thin enough to shimmer on a dark ground, so the skin carries it back to a readable weight. Safe here in a way it would not be in admin: this page has no Ext, so nothing measures text. */ html.ss-skin-on body *{ font-weight: 300; } /* the card ------------------------------------------------------------------ */ html.ss-skin-on #loginFormWrapper{ box-shadow: var(--sh-4) !important; /* was a flat 10px #6E7B83 glow */ border-radius: var(--r-lg) !important; border: 1px solid var(--line) !important; overflow: hidden; } html.ss-skin-on #loginFormWrapper .users.form{ background: var(--surface) !important; } html.ss-skin-on #loginFormWrapper .users.form .title{ filter: var(--logo-filter); } /* fields -------------------------------------------------------------------- */ html.ss-skin-on #loginFormWrapper .users.form .fields .loginUsername, html.ss-skin-on #loginFormWrapper .users.form .fields .loginPassword{ border-bottom-color: var(--line) !important; } html.ss-skin-on #loginFormWrapper .users.form .fields .loginUsername .icon, html.ss-skin-on #loginFormWrapper .users.form .fields .loginPassword .icon{ filter: var(--field-icon-filter); } html.ss-skin-on #loginFormWrapper .users.form .fields input{ color: var(--ink) !important; background: transparent !important; } html.ss-skin-on #loginFormWrapper ::-webkit-input-placeholder{ color: var(--muted) !important; } html.ss-skin-on #loginFormWrapper ::placeholder{ color: var(--muted) !important; } html.ss-skin-on #loginFormWrapper .users.form .fields .loginUsername:focus-within, html.ss-skin-on #loginFormWrapper .users.form .fields .loginPassword:focus-within{ border-bottom-color: var(--accent) !important; } /* Chrome paints its own autofill background and ignores background-color; the inset shadow is the only way to repaint it, and -webkit-text-fill-color the only way to recolour the text it forces. */ html.ss-skin-on #loginFormWrapper .users.form .fields input:-webkit-autofill, html.ss-skin-on #loginFormWrapper .users.form .fields input:-webkit-autofill:focus{ -webkit-text-fill-color: var(--ink) !important; -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important; caret-color: var(--ink); } /* actions ------------------------------------------------------------------- */ html.ss-skin-on #loginFormWrapper .users.form .submit input{ background: var(--accent) !important; border: 1px solid var(--accent) !important; /* NOT #fff: white on the dark theme's accent is 3.22:1. --bg inverts with the theme and clears AA on both (5.93 light / 4.77 dark). */ color: var(--bg) !important; border-radius: var(--r-md) !important; font-weight: 600; transition: background-color .12s ease, border-color .12s ease; } html.ss-skin-on #loginFormWrapper .users.form .submit input:hover{ background: var(--accent-2) !important; border-color: var(--accent-2) !important; } html.ss-skin-on #loginFormWrapper .saml-button{ color: var(--accent) !important; } html.ss-skin-on #loginFormWrapper .saml-button:hover{ text-decoration: underline; } html.ss-skin-on #loginFormWrapper .users.form .fields .errorMsg{ color: var(--neg) !important; } html.ss-skin-on #loginCopyright{ color: var(--foot) !important; } /* v45 - brand type. login.ctp already loaded one Google Fonts stylesheet (Source Sans Pro), so pointing it at the brand families adds no NEW request. Safe to do here and nowhere else yet: this page carries no Ext, so nothing measures text width in JS. login.css sets the family on `body, body *`, which beats a bare `body` rule - match that shape rather than fight it. */ html.ss-skin-on body, html.ss-skin-on body *{ font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; } /* Material Icons is a LIGATURE font: MUI's renders the icon NAME as text ("save", "filter_list", "add_circle_outline") and the font substitutes a glyph. This file is NOT login-only - basic.ctp also serves the Reports render route (/p/Reports/AdminReports/report/), the admin's report preview, which is all Material UI. The `body *` arm above is (0,1,2) and beats Google's own `.material-icons` (0,1,0), so Instrument Sans won and every degraded to its literal name, clipped inside MUI's 1em overflow:hidden IconRoot: the missing Save / Saved Views / Filters / Export icons, and the invisible "+" that the filter builder's own empty state tells you to click. (0,2,2) here, so it wins on specificity without !important. Do not narrow the `body *` arm instead - it is load-bearing on the login page against login.css:13-14 `body, body *`. */ html.ss-skin-on body .material-icons{ font-family: "Material Icons"; } /* Inria Serif is display-only per the guide (never below 20px); the login has no headline, so it is loaded for the wordmark's sake and used nowhere yet. */