/* ============================================================================ * LOGIN THEME -- FROSTED GLASS (26 Aug 2026) * ============================================================================ * * The sign-in page as the owner signed it off: the workspace's photograph * across the whole viewport, a scrim over it, and the form on a pane of glass * against the right-hand edge. * * >>> THIS FILE IS ONE THEME, NOT "THE LOGIN STYLES". <<< * `Config\LoginThemes` lists the themes; `tenant_branding.login_theme` says * which one a workspace uses; `auth/login.php` links exactly ONE of these * files per request. So a second theme is a sibling file and a row in that * config -- it never edits this one, and it cannot break this one. * * ---------------------------------------------------------------------------- * WHAT IS *NOT* IN HERE, AND WHY * ---------------------------------------------------------------------------- * The picture itself. `body.lets-signin { background-image: url(...) }` is * built from `tenant_branding.login_image`, which is DATA -- per workspace, and * sanitised in the view before it ever reaches a CSS url(). A static file * cannot carry it, so that one rule stays inline in the view and every theme * inherits it. * * ---------------------------------------------------------------------------- * WHY THE SELECTORS ARE NOT PREFIXED WITH `.login-theme-glass` * ---------------------------------------------------------------------------- * Because two theme files are never loaded at once -- the view links the one * the workspace chose and nothing else -- so prefixing 350 lines would buy * nothing and risked changing the rendering during the extraction, which was * the one thing this move was not allowed to do. The class IS on (see * the view) so the active theme is visible in the DOM and can be targeted from * outside; the rules here simply do not need it. * * Every rule below is exactly as it was when it was signed off. Read the notes * in place -- each decision has its reasoning beside it. * ========================================================================== */ /* >>> The scrim. Without it, light photographs make white type on the panel edge unreadable, and which photograph is in use is the owner's choice rather than something this page can rely on. <<< >>> IT IS DARK AT BOTH ENDS, NOT JUST THE LEFT. <<< It used to fade to .18 on the right, which was correct while the panel was SOLID WHITE and supplied its own ground. The panel is now glass -- the photograph shows THROUGH it -- so whatever is behind the form is what its white type has to be read against, and on this picture that is a bright sky. The middle stays lightest: that is where the subject of the photograph is, and the whole point of choosing one. */ body.lets-signin::before { content: ''; position: fixed; inset: 0; background: linear-gradient(100deg, rgba(14, 24, 32, .82) 0%, rgba(14, 24, 32, .50) 30%, rgba(12, 20, 28, .62) 58%, rgba(6, 12, 20, .95) 100%); pointer-events: none; } /* * ONE COLUMN, HARD RIGHT -- the LE_2025 shape, and now the only thing on * the stage. While the brand block was still here this had to be * `space-between`, or the two of them packed together against the right * edge and the brand drifted into the middle of a wide monitor. With the * form on its own, `flex-end` says what is meant directly. */ .signin-stage { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: flex-end; /* >>> the form sits RIGHT <<< */ padding: 24px clamp(16px, 6vw, 90px); box-sizing: border-box; } /* ---- the panel ------------------------------------------------------ */ .signin-stage .login-box { flex: 0 0 auto; width: 400px; max-width: 100%; margin: 0; } /* -------------------------------------------------------------------- * >>> THE PANEL IS GLASS, NOT WHITE. <<< * -------------------------------------------------------------------- * The owner: *"make this login window transparent like glass then white * color."* So: a white TINT over a blur of whatever the photograph is * doing behind it, rather than a sheet of #fff laid on top of it. * * >>> A GLASS PANEL IS NOT A COLOUR CHANGE -- IT IS THE WHOLE INSIDE. <<< * Everything in the card loses its ground at the same moment. AdminLTE's * #444 labels, the grey help text and the white inputs were all drawn * against a white card: on glass the type goes muddy and the inputs read * as solid white bricks sitting on the blur. That is why the entire * interior is restated below in light-on-dark. Changing the background * alone would have looked like glass and been unusable. * ------------------------------------------------------------------ */ .signin-stage .login-box-body { border-radius: 14px; padding: 26px 26px 22px; /* * >>> THE PANE IS LIT BY THE SCRIM, NOT BY ITS OWN TINT. <<< * * Three samples were built and measured against this photograph before * this one was chosen. The tempting version -- a pale white pane -- was * measured at 2.3:1 on the help text under the checkbox, well under the * 4.5:1 ordinary text needs, because the brighter the picture the * brighter the glass and the less of it is left for white type. * * The fix is one line above, not here: the scrim goes to .95 at the * right-hand edge, so the panel sits over a dark part of the picture * and a light sheen is enough. Measured 4.7:1 at its worst point. * * >>> SO THE TWO ARE A PAIR. <<< Lighten that gradient and this pane * goes grey and unreadable; there is no fixing it from this rule. */ background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .19)); border: 1px solid rgba(255, 255, 255, .52); box-shadow: 0 22px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); color: #fff; } /* * NO backdrop-filter (an older browser, or one with it switched off). * The BLUR is what makes white type readable over an arbitrary * photograph -- a 14% tint on its own is not enough, and this page must * not become unreadable because of a browser setting. Without the blur * the tint has to carry it alone, so it goes opaque and dark. Still not * a white card, and still legible, which is the part that matters. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .signin-stage .login-box-body { background: rgba(20, 32, 42, .86); border-color: rgba(255, 255, 255, .22); } } /* ---- the glass interior: type ------------------------------------- */ .signin-stage .login-box-msg { color: rgba(255, 255, 255, .95); } .signin-stage .login-box-body label { color: #fff; } .signin-stage .checkbox label { color: rgba(255, 255, 255, .95); font-weight: 400; } /* .72 measured 2.3:1 against the glass -- under the 4.5:1 floor for ordinary text, and this line tells people what happens on a shared computer, so it is not decoration nobody has to read. */ .signin-stage .help-block { color: rgba(255, 255, 255, .86); } /* The theme's link colour is a deep red for white cards; on glass it is nearly invisible. White with an underline on hover instead. */ .signin-stage .login-box-body a { color: rgba(255, 255, 255, .95); } .signin-stage .login-box-body a:hover, .signin-stage .login-box-body a:focus { color: #fff; text-decoration: underline; } /* ---- the glass interior: the two doors ----------------------------- */ .signin-stage .btn-group .btn-default { background: rgba(255, 255, 255, .19); border-color: rgba(255, 255, 255, .46); color: #fff; text-shadow: none; } /* * The two doors are one control, so only its OUTER corners are rounded -- * the seam down the middle stays square, or the two halves stop reading as * a single switch. Same radius as the fields and the button; Bootstrap's * justified group squares off every corner, which is what left it looking * like a box in a panel of soft-edged controls. */ .signin-stage .btn-group .btn-default:first-child { border-radius: var(--lets-radius-s, 8px) 0 0 var(--lets-radius-s, 8px); } .signin-stage .btn-group .btn-default:last-child { border-radius: 0 var(--lets-radius-s, 8px) var(--lets-radius-s, 8px) 0; } .signin-stage .btn-group .btn-default:hover, .signin-stage .btn-group .btn-default:focus { background: rgba(255, 255, 255, .20); color: #fff; } /* * >>> THE CHOSEN DOOR IS LAGOON, NOT THE EMBER THE APP DEFAULTS TO. <<< * At the owner's request. #3fa6b8 is `.theme-lagoon`'s accent in * lets-theme.css -- one of the five colour schemes, copied here rather * than read from --th-accent because that variable answers "what skin is * the SIGNED-IN person using", and nobody is signed in yet on this page. * * On glass it also has to be a real colour: Bootstrap's own active state * is "slightly lighter grey", which over a photograph does not read as * chosen at all. */ .signin-stage { --signin-pick: #3fa6b8; /* theme-lagoon accent */ --signin-pick-deep: #2b7f8f; /* theme-lagoon accent-deep */ } /* * >>> THE FILL IS LAGOON'S *DEEP* TONE, AND THAT IS A CONTRAST DECISION. * <<< White type on the bright #3fa6b8 measures 2.85:1 -- the label on the * door you have chosen would have been the least readable thing on the * panel. The deep tone of the same colour takes it to 4.63:1 and still * plainly reads as lagoon. (The ember pill this replaced was 3.08:1, so * this is better than what it inherited, not a new tax.) */ .signin-stage .btn-group .btn-default.active, .signin-stage .btn-group .btn-default.active:hover, .signin-stage .btn-group .btn-default.active:focus { background: var(--signin-pick-deep); border-color: var(--signin-pick); color: #fff; box-shadow: none; } /* * >>> THE BUTTON FOLLOWS THE SELECTION. <<< * `.btn-primary` in lets-theme.css is a gradient of the SIGNED-IN person's * colour scheme, which defaults to ember. Nobody is signed in on this page, * and with the doors now lagoon an ember button was the only thing on the * panel wearing a different accent. * * Same gradient treatment as the theme's button, in lagoon -- and pitched * at the deep end of it: white on the bright #3fa6b8 is 2.85:1, so a * gradient starting there would have put the label under the readable * floor for the top half of the button. #2b7f8f -> #236a76 runs 4.6:1 to * 6.1:1 across the whole pill. * * >>> SCOPED TO .signin-stage. <<< It must not leak into the app, where * .btn-primary belongs to whichever skin the user picked. */ .signin-stage .btn-primary { background: linear-gradient(135deg, var(--signin-pick-deep), #236a76); border-color: transparent; color: #fff; box-shadow: 0 3px 12px -3px rgba(6, 40, 48, .6); /* * THE SAME CORNER AS THE FIELDS ABOVE IT, and taken from the same * token rather than typed as 8px -- change --lets-radius-s in * lets-theme.css and the button follows the inputs instead of * drifting away from them. (A pill was tried here first and the owner * asked for this: on a panel of five stacked controls, one rounder * than the rest is the odd one out, not the emphasis.) */ border-radius: var(--lets-radius-s, 8px); } .signin-stage .btn-primary:hover, .signin-stage .btn-primary:focus, .signin-stage .btn-primary:active { background: linear-gradient(135deg, #26737f, #1e6270); border-color: transparent; color: #fff; } /* ---- the glass interior: the fields -------------------------------- */ .signin-stage .form-control { background: rgba(255, 255, 255, .19); border: 1px solid rgba(255, 255, 255, .46); color: #fff; box-shadow: none; } .signin-stage .form-control:focus { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .70); box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); } /* Separate rules, NOT one selector list: a browser that does not know one of these pseudo-elements throws away the WHOLE rule it appears in. */ .signin-stage .form-control::placeholder { color: rgba(255, 255, 255, .74); } .signin-stage .form-control::-webkit-input-placeholder { color: rgba(255, 255, 255, .74); } .signin-stage .form-control-feedback { color: rgba(255, 255, 255, .78); } .signin-stage .checkbox input[type="checkbox"] { accent-color: var(--signin-pick); } /* * >>> AUTOFILL. <<< Chrome repaints a remembered field solid white with * near-black type -- one opaque brick in the middle of the glass, and the * one state you cannot see while designing the page. There is no property * that turns it off; an inset shadow 1000px deep is the standard way to * paint over it, and the absurd transition delay stops the white flashing * through on the way in. */ .signin-stage .form-control:-webkit-autofill, .signin-stage .form-control:-webkit-autofill:hover, .signin-stage .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px rgba(72, 92, 108, .92) inset; caret-color: #fff; transition: background-color 9999s ease-out 0s; } /* ---- the glass interior: errors and flash messages ----------------- */ .signin-stage .has-error .form-control { border-color: #ffab9b; } .signin-stage .has-error .help-block, .signin-stage .has-error .control-label, .signin-stage .has-error .form-control-feedback { color: #ffc0b4; } /* * >>> THE FLASH MESSAGES STAY SOLID, AND NOT BECAUSE NOBODY TRIED. <<< * A translucent alert was written here first and never took effect: * AdminLTE sets `.alert-danger` with `!important`, so the rule lost * silently and the block rendered stock red anyway. Rather than fight it * with `!important` of our own, it stays as it is -- an error on a sign-in * page is the one thing on the panel that SHOULD be loud, and it matches * every other alert in the application. Only the trim is ours. */ .signin-stage .alert { border: 1px solid rgba(255, 255, 255, .30); color: #fff; text-shadow: none; } /* ---- the wordmark above the panel --------------------------------- * It was the brand name in AdminLTE's stock 35px bold, sitting on a * photograph -- which is why it read as a leftover heading rather than a * mark. Three things fix it, and none of them is a bigger font: * * LETTER-SPACING does most of the work. Wide tracking is what separates * a wordmark from a word; `text-indent` puts back the half-space that * tracking adds after the LAST letter, which otherwise pushes a centred * line visibly off-centre. * * A LAGOON RULE UNDER IT ties it to the panel below -- the same accent * as the chosen door and the button, so the three read as one design. * * IT ARRIVES. The letters settle in from wider tracking and the rule * draws itself once, on load. Under a second, and it never repeats: * this is a sign-in page, and something that keeps moving while you are * typing a password is an irritation, not a flourish. * * `clamp` on the size because the name is per workspace -- "LETS" here, * "Editflow" elsewhere -- and a long one must not wrap on a phone. */ .signin-stage .login-logo { margin-bottom: 20px; } .signin-stage .login-logo a { display: inline-block; color: #fff; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: .2em; text-indent: .2em; /* re-centre: tracking pads the last letter */ text-shadow: 0 2px 18px rgba(0, 0, 0, .6), 0 0 34px rgba(63, 166, 184, .30); animation: letsMarkIn .75s cubic-bezier(.22, .9, .3, 1) both; } /* The is AdminLTE's markup, not a weight decision -- a wordmark this widely tracked wants light strokes, not bold ones. */ .signin-stage .login-logo a b { font-weight: 300; } .signin-stage .login-logo a::after { content: ''; display: block; height: 2px; width: 0; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--signin-pick), transparent); animation: letsMarkRule .6s .5s cubic-bezier(.22, .9, .3, 1) forwards; } @keyframes letsMarkIn { from { opacity: 0; transform: translateY(-10px); letter-spacing: .42em; } to { opacity: 1; transform: none; letter-spacing: .2em; } } @keyframes letsMarkRule { to { width: 82%; } } /* * >>> SOMEBODY WHO HAS ASKED FOR LESS MOTION GETS THE END STATE, NOT A * >>> BLANK SPACE. <<< Switching the animation off without this leaves the * rule at width:0 forever -- the setting would delete part of the design * rather than calm it. */ @media (prefers-reduced-motion: reduce) { .signin-stage .login-logo a { animation: none; } .signin-stage .login-logo a::after { animation: none; width: 82%; } } .signin-stage .login-logo p { color: rgba(255,255,255,.85) !important; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .signin-stage .signin-foot { color: rgba(255,255,255,.75) !important; text-shadow: 0 1px 8px rgba(0,0,0,.5); } /* * >>> THE PHONE BREAKPOINT, WHICH THE LE_2025 PAGE DID NOT HAVE. <<< * A 400px panel pinned to the right edge of a 360px screen is the bug the * original had; here it centres and takes the width it is given. */ @media (max-width: 991px) { .signin-stage { justify-content: center; padding: 20px 16px; } .signin-stage .login-box { width: 100%; max-width: 400px; } }