/* ============================================================================ Login screen ---------------------------------------------------------------------------- Login.cshtml sets Layout = "", so it never saw the new theme — it kept its own Bootstrap 3, its own fixed blue gradient and ~130 lines of inline CSS. This replaces that block. The markup in the view is untouched: same fields, same ids, same names, same captcha and OTP wiring. Everything here is driven by the palette variables, so the login screen follows whichever theme the browser last used. The account's saved palette cannot apply here — nobody has signed in yet — so localStorage is the only signal available, which is exactly what it is for. ========================================================================= */ html, body { height: 100%; } body { margin: 0; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scs-bg); color: var(--scs-ink); font-family: var(--scs-font); } /* The old markup wraps everything in a fixed-position display:table that carried the gradient. It stays as the backdrop, but it has to do the centring itself: being position:fixed takes it out of the body's flow, so centring the body has no effect on anything inside it. Flex here rather than the original table-cell trick, because the card changes height between the login step and the OTP step. */ .div-table { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto; /* a short window must still reach the button */ padding: 24px; background: radial-gradient(1100px 620px at 12% -8%, var(--scs-accent-ring), transparent 60%), radial-gradient(900px 560px at 105% 105%, var(--scs-accent-ring), transparent 55%), var(--scs-bg); z-index: 0; } .div-table-cell { display: block; width: 100%; margin: auto; } .box { position: relative; z-index: 1; width: 100%; max-width: 380px; margin: auto; text-align: center; padding: 0; } .login-logo { margin-bottom: 18px; } .login-logo img { max-width: 210px; width: auto; height: auto; } .login-logo a, .login-logo a:hover { text-decoration: none; } .login-box { width: 100%; } .login-box-body { background: var(--scs-panel); border: 1px solid var(--scs-line); border-radius: 14px; padding: 26px 24px 20px; text-align: left; box-shadow: 0 10px 30px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .04); } [data-mode="dark"] .login-box-body { box-shadow: 0 10px 34px rgba(0, 0, 0, .45); } .login-box-header { margin: 0 0 18px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--scs-ink); text-align: center; } .login-box-body .form-group { margin-bottom: 13px; } .login-box-body .form-control { height: 42px; font-size: 14.5px; border-radius: var(--scs-radius); } /* The captcha row is a bare in the view. Making its cells behave is cheaper and safer than rewriting the markup. */ .login-box-body table { width: 100%; } .login-box-body table td { vertical-align: middle; } .login-box-body table td:first-child { width: 45%; } .login-box-body table img { max-width: 100%; border: 1px solid var(--scs-line); border-radius: var(--scs-radius-sm); display: block; } .login-box-body .btn-primary { height: 42px; font-weight: 600; border-radius: var(--scs-radius); /* This page renders without .scs-modern on , so the button-ink rules in compat.css never reach it and Sign In was white on a pale accent — 2.3:1 in dark Teal. --scs-on-accent is set on :root in theme.css, so it applies here regardless, and it already knows which palettes need dark ink. */ background: var(--scs-sheen); border-color: transparent; color: var(--scs-on-accent); } .login-box-body .btn-primary:hover, .login-box-body .btn-primary:focus { background: var(--scs-accent-hover); border-color: transparent; color: var(--scs-on-accent); } /* btn-block was removed in Bootstrap 5; the Sign In button relies on it. */ .login-box-body .btn-block { display: block; width: 100%; } .login-box-body .validation-summary-errors, .login-box-body .field-validation-error { color: var(--scs-danger); font-size: 12.5px; } .login-box-body .validation-summary-errors ul { margin: 0; padding-left: 16px; } .login-footer { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--scs-line-soft); text-align: center; font-size: 12px; color: var(--scs-ink-faint); } .login-footer a { color: var(--scs-ink-soft); text-decoration: none; } .login-footer a:hover { color: var(--scs-accent); } @media (max-width: 420px) { .login-box-body { padding: 20px 16px 16px; } .login-logo img { max-width: 170px; } } /* The wrapper around the logo is a

, and .box is AdminLTE's panel class — compat.css gives every one of them a panel background, a hairline and a shadow. On this page it is only holding the crest, so it was drawing a card around the school's logo above the card holding the form. Loaded after compat.css, so plain rules are enough to undo it. */ .box { background: none; border: 0; border-radius: 0; box-shadow: none; } /* ── The captcha strip ───────────────────────────────────────────────────── */ /* Drawn as a transparent PNG so it takes whatever colour the card is, which means the generic `table img` border above — put there when the image was an opaque white JPEG and needed an edge — now reads as a box drawn around nothing. Written one step more specific so it wins, and given the same fill and radius as the input beside it so the two read as one control. Clicking it fetches a different number. Anyone who cannot make out the one they were handed needs a way through that is not "reload and retype the password", and the title says so. */ .login-box-body table img.scs-captcha { display: block; height: 48px; width: auto; max-width: 100%; padding: 0 6px; border: 1px solid var(--scs-line); border-radius: var(--scs-radius-sm); background: var(--scs-panel-2); cursor: pointer; user-select: none; transition: border-color var(--scs-speed, .16s) ease, opacity var(--scs-speed, .16s) ease; } .login-box-body table img.scs-captcha:hover { border-color: var(--scs-accent); opacity: .85; } /* The hand pointing from the field to the image was drawing attention to the gap between them rather than to either one. */ .login-box-body table .glyphicon-hand-left { color: var(--scs-ink-faint); }