fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(login): Stripe-style split layout + multi-step polish

Browse Source 
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>
This commit is contained in:
Felix Schneider
2026-04-25 21:16:26 +02:00
parent 4890a280fb
commit e775ed2800
15 changed files with 242 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
core/Support/helpers/branding.php
View File

@@ -53,6 +53,35 @@ function currentTheme(): string
return $theme;
}
/**
* Resolve the theme value to set on the html data-theme attribute.
*
* Returns an empty string when no explicit preference has been set by either
* the user or the tenant — callers should then OMIT data-theme entirely so
* the browser's prefers-color-scheme media query can drive the theme. Use
* this only for the html element. Internal consumers (theme toggle,
* logo URL resolution) keep using currentTheme() / appDefaultTheme() which
* always return a concrete theme string.
*/
function appExplicitTheme(): string
{
$themes = appThemes();
if (allowUserTheme()) {
$userTheme = strtolower(trim((string) ($_SESSION['user']['theme'] ?? '')));
if ($userTheme !== '' && isset($themes[$userTheme])) {
return $userTheme;
}
}
$tenantTheme = strtolower(trim((string) ($_SESSION['current_tenant']['default_theme'] ?? '')));
if ($tenantTheme !== '' && isset($themes[$tenantTheme])) {
return $tenantTheme;
}
return '';
}
/**
* Resolve active primary color from the current tenant.
*

1
i18n/default_de.json
View File

@@ -587,6 +587,7 @@
"Login provider": "Login-Anbieter",
"Login required": "Login erforderlich",
"Login status": "Anmeldestatus",
"Login to %s": "Login bei %s",
"Login tokens": "Login-Tokens",
"Login tokens cleared": "Login-Tokens gelöscht",
"Logo": "Logo",

1
i18n/default_en.json
View File

@@ -587,6 +587,7 @@
"Login provider": "Login provider",
"Login required": "Login required",
"Login status": "Login status",
"Login to %s": "Login to %s",
"Login tokens": "Login tokens",
"Login tokens cleared": "Login tokens cleared",
"Logo": "Logo",

3
pages/auth/forgot(login).phtml
View File

@@ -12,13 +12,10 @@ Buffer::set('title', t('Forgot password'));
$errorNoticeId = !empty($errors) ? 'auth-forgot-error-notice' : '';
$authHelpContext = [
'show_back_to_login' => true,
'show_support' => true,
];
$authLogoHref = lurl('login');
?>
<article class="login-card">
<?php require templatePath('partials/auth-logo.phtml'); ?>
<header>
<hgroup>
<h1><?php e(t('Forgot password')); ?></h1>

96
pages/auth/login(login).phtml
View File

@@ -28,47 +28,29 @@ $selectedTenantLabel = trim((string) ($selectedTenant['description'] ?? ''));
if ($selectedTenantLabel === '') {
$selectedTenantLabel = t('Select tenant');
}
$selectedTenantAvatarUrl = (string) ($selectedTenant['avatar_url'] ?? '');
$selectedTenantInitial = strtoupper(substr($selectedTenantLabel, 0, 1));
if ($selectedTenantInitial === '') {
$selectedTenantInitial = '?';
}
$canSwitchTenant = count($tenantCandidates) > 1;
$errors = is_array($errors ?? null) ? $errors : [];
$errorNoticeId = $errors ? 'auth-login-error-notice' : '';
$loginHeading = t('Login');
$loginSubheading = t('Login credentials');
$authHelpContext = ['show_support' => true];
$authHelpContext = [];
if ($stage === 'resolve_email') {
$loginHeading = t('Login');
$authHelpContext = [
'show_register' => true,
'show_support' => true,
];
} elseif ($stage === 'choose_tenant') {
$authHelpContext = [
'show_support' => true,
];
$loginHeading = t('Select tenant');
} else {
$loginHeading = sprintf(t('Login to %s'), $selectedTenantLabel);
$authHelpContext = [
'show_forgot' => !empty($selectedTenantMethods['local']),
'show_support' => true,
];
}
$authLogoHref = lurl('login');
if ($tenantHint !== '') {
$authLogoHref .= '?tenant=' . rawurlencode($tenantHint);
}
$returnToSanitized = (string) ($returnToSanitized ?? '');
?>
<article class="login-card">
<?php require templatePath('partials/auth-logo.phtml'); ?>
<header>
<hgroup>
<h1><?php e($loginHeading); ?></h1>
<p><?php e($loginSubheading); ?></p>
</hgroup>
<h1><?php e($loginHeading); ?></h1>
</header>
@@ -115,22 +97,10 @@ $returnToSanitized = (string) ($returnToSanitized ?? '');
if ($tenantLabel === '') {
$tenantLabel = t('Select tenant');
}
$tenantAvatarUrl = (string) ($tenantCandidate['avatar_url'] ?? '');
$tenantInitial = strtoupper(substr($tenantLabel, 0, 1));
if ($tenantInitial === '') {
$tenantInitial = '?';
}
?>
<label class="app-field login-tenant-choice" data-tooltip="<?php e($tenantLabel); ?>" data-tooltip-pos="top">
<label class="app-field login-tenant-choice">
<input type="radio" name="tenant_id" value="<?php e((string) $tenantId); ?>" <?php e($tenantId === $selectedTenantId ? 'checked autofocus' : ''); ?>>
<span class="login-tenant-choice-body">
<?php if ($tenantAvatarUrl !== ''): ?>
<img class="login-tenant-choice-avatar" src="<?php e($tenantAvatarUrl); ?>" alt="" loading="lazy">
<?php else: ?>
<span class="login-tenant-choice-avatar-placeholder"><?php e($tenantInitial); ?></span>
<?php endif; ?>
<span class="login-tenant-choice-text"><?php e($tenantLabel); ?></span>
</span>
<span class="login-tenant-choice-text"><?php e($tenantLabel); ?></span>
</label>
<?php endforeach; ?>
</div>
@@ -149,31 +119,23 @@ $returnToSanitized = (string) ($returnToSanitized ?? '');
<?php Session::getCsrfInput(); ?>
</form>
<?php else: ?>
<?php $hasSelectedTenantAvatar = $selectedTenantAvatarUrl !== ''; ?>
<?php if ($canSwitchTenant): ?>
<section class="login-tenant-context" role="status" aria-live="polite">
<div class="login-tenant-context-main">
<?php if ($hasSelectedTenantAvatar): ?>
<img class="login-tenant-context-avatar" src="<?php e($selectedTenantAvatarUrl); ?>" alt="" loading="lazy">
<?php else: ?>
<span class="login-tenant-context-avatar-placeholder login-tenant-context-avatar-placeholder--name"><?php e($selectedTenantLabel); ?></span>
<?php endif; ?>
<?php if ($hasSelectedTenantAvatar): ?>
<div class="login-tenant-context-text">
<p class="login-tenant-context-name"><?php e($selectedTenantLabel); ?></p>
</div>
<?php endif; ?>
</div>
<form method="post" class="login-tenant-context-form">
<input type="hidden" name="stage" value="resolve_email">
<input type="hidden" name="email" value="<?php e($email); ?>">
<input type="hidden" name="tenant_hint" value="<?php e($tenantHint); ?>">
<?php if ($returnToSanitized !== ''): ?><input type="hidden" name="return_to" value="<?php e($returnToSanitized); ?>"><?php endif; ?>
<button type="submit" class="secondary outline small"><?php e(t('Switch tenant')); ?></button>
<?php Session::getCsrfInput(); ?>
</form>
</section>
<?php endif; ?>
<aside class="login-identity-pill" role="status" aria-live="polite">
<span class="login-identity-pill-icon" aria-hidden="true">
<i class="bi bi-person-circle"></i>
</span>
<span class="login-identity-pill-email"><?php e($email); ?></span>
<form method="post" class="login-identity-pill-reset-form">
<input type="hidden" name="stage" value="reset">
<?php if ($returnToSanitized !== ''): ?><input type="hidden" name="return_to" value="<?php e($returnToSanitized); ?>"><?php endif; ?>
<button type="submit" class="secondary outline small"
aria-label="<?php e(t('Use different email')); ?>"
data-tooltip="<?php e(t('Use different email')); ?>"
data-tooltip-pos="top">
<i class="bi bi-arrow-left-right" aria-hidden="true"></i>
</button>
<?php Session::getCsrfInput(); ?>
</form>
</aside>
<div class="login-methods-stack">
<?php if (!empty($selectedTenantMethods['microsoft']) && $selectedTenantSlug !== ''): ?>
@@ -200,7 +162,7 @@ $returnToSanitized = (string) ($returnToSanitized ?? '');
<?php if ($returnToSanitized !== ''): ?><input type="hidden" name="return_to" value="<?php e($returnToSanitized); ?>"><?php endif; ?>
<label for="ldap_username">
<span><?php e(t('LDAP Username')); ?></span>
<input required type="text" name="ldap_username" id="ldap_username" autocomplete="username" />
<input required type="text" name="ldap_username" id="ldap_username" autocomplete="username" autofocus />
</label>
<label for="ldap_password">
<span><?php e(t('Password')); ?></span>
@@ -237,7 +199,7 @@ $returnToSanitized = (string) ($returnToSanitized ?? '');
<?php if ($returnToSanitized !== ''): ?><input type="hidden" name="return_to" value="<?php e($returnToSanitized); ?>"><?php endif; ?>
<label for="password">
<span><?php e(t('Password')); ?></span>
<input required type="password" name="password" id="password" autocomplete="current-password" <?php if ($errors): ?>aria-invalid="true" aria-describedby="<?php e($errorNoticeId); ?>"<?php endif; ?> />
<input required type="password" name="password" id="password" autocomplete="current-password" autofocus <?php if ($errors): ?>aria-invalid="true" aria-describedby="<?php e($errorNoticeId); ?>"<?php endif; ?> />
</label>
<p>
<label class="app-field inline">
@@ -261,10 +223,4 @@ $returnToSanitized = (string) ($returnToSanitized ?? '');
<?php endif; ?>
<?php require templatePath('partials/auth-help-links.phtml'); ?>
<hr>
<p class="login-security-note">
<i class="bi bi-lock-fill" aria-hidden="true"></i>
<span><?php e(t('Encrypted connection')); ?></span>
</p>
<small class="login-security-note-detail muted"><?php e(t('HTTPS/TLS 1.2+ in transit')); ?></small>
</article>

3
pages/auth/register(login).phtml
View File

@@ -19,12 +19,9 @@ $errorNoticeId = !empty($error) ? 'auth-register-error-notice' : '';
$passwordHintId = 'auth-register-password-hints';
$authHelpContext = [
'show_back_to_login' => true,
'show_support' => true,
];
$authLogoHref = lurl('login');
?>
<article class="login-card">
<?php require templatePath('partials/auth-logo.phtml'); ?>
<header>
<hgroup>
<h1><?php e(t('Register')); ?></h1>

3
pages/auth/reset(login).phtml
View File

@@ -14,13 +14,10 @@ $errorNoticeId = !empty($errors) ? 'auth-reset-error-notice' : '';
$passwordHintId = 'auth-reset-password-hints';
$authHelpContext = [
'show_back_to_login' => true,
'show_support' => true,
];
$authLogoHref = lurl('login');
?>
<article class="login-card">
<?php require templatePath('partials/auth-logo.phtml'); ?>
<header>
<hgroup>
<h1><?php e(t('Reset password')); ?></h1>

3
pages/auth/verify(login).phtml
View File

@@ -13,13 +13,10 @@ Buffer::set('title', t('Verify code'));
$errorNoticeId = !empty($errors) ? 'auth-verify-error-notice' : '';
$authHelpContext = [
'show_back_to_login' => true,
'show_support' => true,
];
$authLogoHref = lurl('login');
?>
<article class="login-card">
<?php require templatePath('partials/auth-logo.phtml'); ?>
<header>
<hgroup>
<h1><?php e(t('Verify code')); ?></h1>

3
pages/auth/verify-email(login).phtml
View File

@@ -13,13 +13,10 @@ Buffer::set('title', t('Verify email'));
$errorNoticeId = !empty($errors) ? 'auth-verify-email-error-notice' : '';
$authHelpContext = [
'show_back_to_login' => true,
'show_support' => true,
];
$authLogoHref = lurl('login');
?>
<article class="login-card">
<?php require templatePath('partials/auth-logo.phtml'); ?>
<header>
<hgroup>
<h1><?php e(t('Verify email')); ?></h1>

4
templates/error.phtml
View File

@@ -4,12 +4,12 @@ use MintyPHP\Buffer;
$defaultTitle = appTitle();
$primaryVars = appPrimaryCssVars();
$theme = appDefaultTheme();
$theme = appExplicitTheme();
$statusCode = http_response_code() ?: 500;
?>
<!DOCTYPE html>
<html data-theme="<?php e($theme); ?>" <?php if ($primaryVars !== ''): ?>style="<?php e($primaryVars); ?>"<?php endif; ?>>
<html <?php if ($theme !== ''): ?>data-theme="<?php e($theme); ?>"<?php endif; ?> <?php if ($primaryVars !== ''): ?>style="<?php e($primaryVars); ?>"<?php endif; ?>>
<head>
<meta charset="utf-8">

15
templates/login.phtml
View File

@@ -4,7 +4,7 @@ use MintyPHP\Buffer;
$defaultTitle = appTitle();
$primaryVars = appPrimaryCssVars();
$theme = appDefaultTheme();
$theme = appExplicitTheme();
$pageTitle = $defaultTitle;
ob_start();
Buffer::get('title');
@@ -35,7 +35,7 @@ $loginComponentConfig = [
?>
<!DOCTYPE html>
<html
data-theme="<?php e($theme); ?>"
<?php if ($theme !== ''): ?>data-theme="<?php e($theme); ?>"<?php endif; ?>
data-asset-base="<?php e(asset('')); ?>"
data-password-toggle-show-label="<?php e(t('Show password')); ?>"
data-password-toggle-hide-label="<?php e(t('Hide password')); ?>"
@@ -58,9 +58,14 @@ $loginComponentConfig = [
<body>
<main class="login-main">
<div class="container-small login-content-container">
<?php Buffer::get('html'); ?>
</div>
<section class="login-form-pane">
<div class="login-content-container">
<?php Buffer::get('html'); ?>
</div>
</section>
<aside class="login-brand-pane" aria-hidden="true">
<?php require __DIR__ . '/partials/auth-logo.phtml'; ?>
</aside>
</main>
<?php require __DIR__ . '/partials/app-footer.phtml'; ?>

4
templates/partials/auth-help-links.phtml
View File

@@ -4,7 +4,6 @@ $authHelpContext = is_array($authHelpContext ?? null) ? $authHelpContext : [];
$showForgot = !empty($authHelpContext['show_forgot']);
$showRegister = !empty($authHelpContext['show_register']) && allowRegistration();
$showBackToLogin = !empty($authHelpContext['show_back_to_login']);
$showSupport = array_key_exists('show_support', $authHelpContext) ? !empty($authHelpContext['show_support']) : true;
$links = [];
if ($showForgot) {
@@ -16,9 +15,6 @@ if ($showRegister) {
if ($showBackToLogin) {
$links[] = ['href' => lurl('login'), 'label' => t('Back to login')];
}
if ($showSupport) {
$links[] = ['href' => lurl('imprint'), 'label' => t('Problems logging in')];
}
if (!$links) {
return;

4
tests/Architecture/AuthHelpLinksPageContractTest.php
View File

@@ -13,17 +13,15 @@ final class AuthHelpLinksPageContractTest extends TestCase
$content = $this->readProjectFile('pages/auth/login(login).phtml');
$this->assertStringContainsString("'show_register' => true", $content);
$this->assertStringContainsString("'show_support' => true", $content);
$this->assertStringContainsString('\'show_forgot\' => !empty($selectedTenantMethods[\'local\'])', $content);
$this->assertStringContainsString('$stage === \'choose_tenant\'', $content);
}
public function testSecondaryAuthPagesProvideBackToLoginAndSupportLinks(): void
public function testSecondaryAuthPagesProvideBackToLoginLink(): void
{
foreach (AuthHelpLinksContractFiles::secondaryAuthPages() as $file) {
$content = $this->readProjectFile($file);
$this->assertStringContainsString("'show_back_to_login' => true", $content, $file);
$this->assertStringContainsString("'show_support' => true", $content, $file);
$this->assertStringContainsString("templatePath('partials/auth-help-links.phtml')", $content, $file);
}
}

1
tests/Architecture/AuthHelpLinksPartialContractTest.php
View File

@@ -16,7 +16,6 @@ final class AuthHelpLinksPartialContractTest extends TestCase
$this->assertStringContainsString("'show_forgot'", $content);
$this->assertStringContainsString("'show_register'", $content);
$this->assertStringContainsString("'show_back_to_login'", $content);
$this->assertStringContainsString("'show_support'", $content);
}
public function testRegisterLinkRemainsGuardedByRegistrationFlag(): void

294
web/css/pages/app-login.css
View File

@@ -1,33 +1,52 @@
@layer pages {
.login-card header {
/* 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. */
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 > .grid > button[type="submit"],
.login-main form > p > button[type="submit"] {
width: 100%;
}
/* ── Logo ── */
/* ── Logo (brand pane) — sits directly on the patterned brand-pane bg
without card chrome. Halo + tinted background give visual anchor. ── */
.login-logo {
margin-bottom: 1.25rem;
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: 2.5rem;
max-width: 10rem;
max-height: 6rem;
max-width: 16rem;
object-fit: contain;
display: block;
}
/* ── Password toggle ── */
@@ -71,27 +90,89 @@
outline-offset: 1px;
}
main.login-main {
/* ── 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;
display: grid;
align-content: center;
gap: 0.75rem;
padding-block: 1rem 2rem;
}
.login-content-container.container-small {
width: min(300px, calc(100vw - 2rem));
max-width: none;
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) 75%, transparent);
box-shadow: none;
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 {
@@ -154,33 +235,12 @@
align-self: center;
}
.login-tenant-choice-body {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
}
.login-tenant-choice-avatar {
width: 5rem;
height: 2rem;
display: block;
object-fit: contain;
object-position: left center;
justify-self: start;
}
.login-tenant-choice-avatar-placeholder {
width: 8rem;
height: 3rem;
border-radius: var(--app-border-radius);
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding-left: 0.5rem;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--app-contrast);
.login-tenant-choice-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.login-alt-separator {
@@ -229,81 +289,64 @@
margin-bottom: 0;
}
.login-tenant-context {
margin-bottom: 1rem;
display: grid;
gap: 0.75rem;
border: 1px solid var(--app-border);
border-radius: var(--app-border-radius);
padding: calc(var(--app-spacing) * 0.5);
}
.login-tenant-context-main {
.login-identity-pill {
display: flex;
align-items: center;
flex-wrap: wrap;
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-tenant-context-avatar,
.login-tenant-context-avatar-placeholder {
width: 7.5rem;
height: 3.25rem;
object-fit: contain;
object-position: left center;
}
.login-tenant-context-avatar-placeholder {
.login-identity-pill-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: var(--font-bold);
color: var(--app-primary);
width: 32px;
height: 32px;
color: var(--app-muted-color);
font-size: var(--text-xl);
}
.login-tenant-context-avatar-placeholder--name {
width: auto;
max-width: 18rem;
height: auto;
justify-content: flex-start;
text-align: left;
font-weight: var(--font-bold);
.login-identity-pill-email {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--app-color);
}
.login-tenant-context-text {
min-width: 0;
overflow-wrap: anywhere;
}
.login-tenant-context-name {
.login-identity-pill-reset-form {
margin: 0;
font-size: var(--text-xs);
white-space: nowrap;
text-overflow: ellipsis;
max-width: 130px;
display: block;
overflow: hidden;
flex-shrink: 0;
}
.login-tenant-context-form {
margin: 0;
}
.login-tenant-context-form button {
width: 100%;
.login-identity-pill-reset-form button {
width: auto;
padding: 4px 10px;
line-height: var(--leading-none);
}
.login-help-links {
margin: 1.4rem 0 0.35rem;
padding-top: 0.2rem;
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;
gap: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: calc(var(--app-spacing) * 0.5);
font-size: var(--text-xs);
}
@@ -312,24 +355,26 @@
align-items: center;
margin: 0;
padding: 0;
color: var(--app-muted-color);
}
.login-security-note {
font-size: var(--text-xs);
margin-bottom: 1px;
color: color-mix(in srgb, var(--app-contrast) 78%, var(--app-muted-color));
.login-help-links-item a {
color: var(--app-muted-color);
text-decoration: none;
transition: color 120ms ease;
}
.login-security-note i {
color: var(--app-primary);
font-size: var(--text-sm);
.login-help-links-item a:hover,
.login-help-links-item a:focus-visible {
color: var(--app-color);
text-decoration: underline;
}
.login-security-note-detail {
width: 100%;
display: block;
font-size: var(--text-2xs);
color: color-mix(in srgb, var(--app-muted-color) 75%, transparent);
.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"],
@@ -338,19 +383,24 @@
cursor: wait;
}
@media (min-width: 600px) {
/* 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 {
min-height: 90vh;
place-content: center;
}
.login-tenant-context {
grid-template-columns: 1fr auto;
align-items: center;
}
.login-tenant-context-form button {
width: auto;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
}