fs
e775ed2800
Reworks the auth flow from a single centered card into a two-pane
layout — form on the left, tenant brand on the right — and tightens the
multi-step login UX along the way. Major changes:
LAYOUT
- templates/login.phtml splits into a flex-column body so the footer
spans both panes at the bottom instead of getting clipped under main.
- New .login-form-pane and .login-brand-pane on a 1fr/1fr grid above
768px; mobile stacks brand on top as a slim band, form below.
- Brand pane carries a soft halo + dot grid + tinted base, all derived
from --app-primary so it tracks the tenant accent automatically.
- Login card gets a Stripe-style hairline border + soft shadow, no
Pico article > header sectioning band, h1 in semibold + tracking-tight.
- The "body > main" global padding is overridden for login so the brand
panel reaches the very top + bottom edges of its column.
OS THEME FALLBACK
- New appExplicitTheme() returns the user/tenant theme or empty string,
used by login.phtml + error.phtml to OMIT data-theme entirely when no
preference exists. CSS prefers-color-scheme media query then drives
the theme — DB stays the source of truth, no browser-side persistence.
MULTI-STEP UX
- Heading is stage-aware: "Login" / "Select tenant" / "Login to {tenant}".
Drops the redundant "Login credentials" subtitle.
- Stage 3 gets an identity pill (icon + email + compact "use different
email" button) replacing the old tenant-context block, so the user
always sees which account they're signing in with regardless of
multi-tenant status.
- Stage 2 tenant selection drops avatars + initials — just radio + name
with text-overflow ellipsis for long tenant names.
- Tightens primary CTA: full-width on every stage incl. <p>-wrapped
buttons. autofocus moves to the right input per stage (ldap_username
/ password).
NOTICE / HELP LINKS
- The placeholder "Problems logging in" link is gone (it used to point
at the imprint route — misleading). show_support wired through 6
auth pages and the partial removed; architecture tests adjusted.
- Help-links centered with bullet separators between items, hairline
border-top so they read as secondary navigation under the main CTA.
- The "Encrypted / HTTPS/TLS 1.2+" trust badge at the card bottom is
removed — modern users assume HTTPS, and the badge added noise.
DEAD CODE
- $authLogoHref, $selectedTenantAvatarUrl, $selectedTenantInitial,
$hasSelectedTenantAvatar, $canSwitchTenant — unused after the
identity-pill / brand-pane move, removed from all 6 auth pages.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
407 lines
9.6 KiB
CSS
407 lines
9.6 KiB
CSS
@layer pages {
|
|
/* Reset Pico's article > header sectioning pattern: we don't want the
|
|
negative-margin "header band" with its own bg + bottom border on the
|
|
auth card — Stripe-style auth cards have a plain h1 sitting in the
|
|
normal content flow above the form, separated by whitespace only. */
|
|
.login-card > header {
|
|
margin: 0 0 calc(var(--app-spacing) * 2) 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.login-card > header h1 {
|
|
margin: 0;
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--font-semibold);
|
|
letter-spacing: var(--tracking-tight);
|
|
}
|
|
|
|
/* Login forms rely on a full-width primary submit button as the main CTA.
|
|
Global button[type="submit"] no longer defaults to width:100%, so we
|
|
restore that specifically for the auth flow — including the Pico-style
|
|
<p> button wrappers used across all stages. */
|
|
.login-main form > button[type="submit"],
|
|
.login-main form > .grid > button[type="submit"],
|
|
.login-main form > p > button[type="submit"] {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ── Logo (brand pane) — sits directly on the patterned brand-pane bg
|
|
without card chrome. Halo + tinted background give visual anchor. ── */
|
|
|
|
.login-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.login-logo-link:focus-visible {
|
|
outline: 2px solid var(--app-primary-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.login-logo-img {
|
|
max-height: 6rem;
|
|
max-width: 16rem;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
|
|
/* ── Password toggle ── */
|
|
|
|
.login-password-wrapper {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.login-password-wrapper > input {
|
|
padding-right: 2.75rem;
|
|
}
|
|
|
|
.login-password-toggle {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: calc(50% - 8px);
|
|
transform: translateY(-50%);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--app-muted-color);
|
|
cursor: pointer;
|
|
font-size: var(--text-base);
|
|
border-radius: var(--app-border-radius);
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.login-password-toggle:hover {
|
|
color: var(--app-contrast);
|
|
}
|
|
|
|
.login-password-toggle:focus-visible {
|
|
outline: 2px solid var(--app-primary-focus);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* ── Split layout: form pane (left) + brand pane (right) ──
|
|
The body is a flex-column so the footer sits full-width at the bottom
|
|
across both panes; main grows to fill the remaining viewport height. */
|
|
|
|
body:has(main.login-main) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
body:has(main.login-main) > .site-footer {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
main.login-main {
|
|
flex: 1 1 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
margin: 0;
|
|
min-height: 0;
|
|
/* Override global "body > main" padding-block so the split panes
|
|
reach the very top + bottom edges of their column. */
|
|
padding-block: 0;
|
|
}
|
|
|
|
.login-form-pane {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: calc(var(--app-spacing) * 2) var(--app-spacing);
|
|
}
|
|
|
|
.login-brand-pane {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: calc(var(--app-spacing) * 2) var(--app-spacing);
|
|
min-height: 6rem;
|
|
position: relative;
|
|
isolation: isolate;
|
|
/* Three layers, top → bottom:
|
|
1. Soft radial halo behind the logo (Tenant-Accent glow).
|
|
2. Dot grid (subtle, 24px spacing).
|
|
3. Tinted base bg. */
|
|
background:
|
|
radial-gradient(
|
|
circle at 50% 50%,
|
|
color-mix(in srgb, var(--app-primary) 18%, transparent),
|
|
transparent 55%
|
|
),
|
|
radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--app-primary) 22%, transparent) 1px,
|
|
transparent 1.5px
|
|
)
|
|
0 0 / 24px 24px,
|
|
color-mix(in srgb, var(--app-primary) 6%, var(--app-background-color));
|
|
}
|
|
|
|
.login-brand-pane > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.login-content-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(330px, calc(100vw - 2rem));
|
|
}
|
|
|
|
.login-card {
|
|
border: 1px solid color-mix(in srgb, var(--app-border) 40%, transparent);
|
|
border-radius: calc(var(--app-border-radius) * 1.5);
|
|
box-shadow:
|
|
0 8px 24px rgba(0, 0, 0, 0.06),
|
|
0 1px 3px rgba(0, 0, 0, 0.04);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
[data-theme="dark"] .login-card {
|
|
box-shadow:
|
|
0 8px 24px rgba(0, 0, 0, 0.35),
|
|
0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.login-tenant-select-form {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.login-tenant-fieldset {
|
|
border: 0;
|
|
margin: 0 0 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.login-tenant-select-label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.login-tenant-choice-grid {
|
|
display: grid;
|
|
gap: 0.625rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.login-tenant-choice {
|
|
align-items: stretch;
|
|
margin: 0;
|
|
width: 100%;
|
|
padding: 0.625rem 0.75rem;
|
|
border: 1px solid var(--app-border);
|
|
border-radius: var(--app-border-radius);
|
|
background: var(--app-card-background-color);
|
|
justify-content: space-between;
|
|
transition:
|
|
border-color 0.15s ease,
|
|
box-shadow 0.15s ease,
|
|
background-color 0.15s ease;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.login-tenant-choice:hover {
|
|
border-color: var(--app-primary);
|
|
}
|
|
|
|
.login-tenant-choice:has(input[type="radio"]:checked) {
|
|
border-color: var(--app-primary);
|
|
box-shadow: 0 0 0 1px var(--app-primary);
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--app-primary) 8%,
|
|
var(--app-card-background-color)
|
|
);
|
|
}
|
|
|
|
.login-tenant-choice:has(input[type="radio"]:focus-visible) {
|
|
outline: 2px solid var(--app-primary-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.login-tenant-choice input[type="radio"] {
|
|
align-self: center;
|
|
}
|
|
|
|
.login-tenant-choice-text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.login-alt-separator {
|
|
position: relative;
|
|
margin: 1rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-alt-separator::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
border-top: 1px solid var(--app-border);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.login-alt-separator span {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: inline-block;
|
|
padding: 0 0.75rem;
|
|
font-size: var(--text-sm);
|
|
color: var(--app-muted-color);
|
|
background: var(--app-card-background-color);
|
|
}
|
|
|
|
.login-microsoft-link {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-methods-stack {
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
margin-block: 0.2rem 0.45rem;
|
|
}
|
|
|
|
.login-password-form {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.login-password-form > p:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.login-identity-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(var(--app-spacing) * 0.625);
|
|
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.625);
|
|
margin-bottom: var(--app-spacing);
|
|
background: color-mix(in srgb, var(--app-color) 4%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--app-border) 40%, transparent);
|
|
border-radius: calc(var(--app-border-radius) * 1.1);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.login-identity-pill-icon {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--app-muted-color);
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
.login-identity-pill-email {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--app-color);
|
|
}
|
|
|
|
.login-identity-pill-reset-form {
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-identity-pill-reset-form button {
|
|
width: auto;
|
|
padding: 4px 10px;
|
|
line-height: var(--leading-none);
|
|
}
|
|
|
|
.login-help-links {
|
|
margin: calc(var(--app-spacing) * 1.25) 0 0;
|
|
padding-top: var(--app-spacing);
|
|
border-top: 1px solid color-mix(in srgb, var(--app-border) 40%, transparent);
|
|
}
|
|
|
|
.login-help-links-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: calc(var(--app-spacing) * 0.5);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.login-help-links-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--app-muted-color);
|
|
}
|
|
|
|
.login-help-links-item a {
|
|
color: var(--app-muted-color);
|
|
text-decoration: none;
|
|
transition: color 120ms ease;
|
|
}
|
|
|
|
.login-help-links-item a:hover,
|
|
.login-help-links-item a:focus-visible {
|
|
color: var(--app-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.login-help-links-item + .login-help-links-item::before {
|
|
content: "·";
|
|
margin-right: calc(var(--app-spacing) * 0.5);
|
|
color: var(--app-muted-color);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
form[aria-busy="true"] button[type="submit"],
|
|
button[data-submit-state="loading"] {
|
|
opacity: 0.75;
|
|
cursor: wait;
|
|
}
|
|
|
|
/* Mobile: brand pane stacks on top as a slim band, then form pane below. */
|
|
@media (max-width: 767px) {
|
|
.login-brand-pane {
|
|
min-height: 7rem;
|
|
padding: calc(var(--app-spacing) * 1.25) var(--app-spacing);
|
|
order: -1;
|
|
}
|
|
|
|
.login-logo-img {
|
|
max-height: 3rem;
|
|
max-width: 12rem;
|
|
}
|
|
}
|
|
|
|
/* Desktop: side-by-side, form on left, brand on right, both full-height. */
|
|
@media (min-width: 768px) {
|
|
main.login-main {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
}
|
|
}
|
|
}
|