ui: redesign login lobby, fix auth view transition timing

This commit is contained in:
user
2026-04-27 14:28:09 +09:00
parent c8e7b7f537
commit e8b2c64564
4 changed files with 111 additions and 14 deletions

View File

@@ -44,7 +44,7 @@ select {
}
.workspace {
display: grid;
display: none;
grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr) minmax(280px, 360px);
gap: 1px;
min-height: 100vh;
@@ -464,27 +464,94 @@ button.is-loading .btn-spinner {
justify-content: center;
min-height: 100vh;
padding: 28px;
background: var(--bg);
background: linear-gradient(160deg, #f5f7f4 0%, #e8efe5 100%);
}
.login-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 44px 36px;
max-width: 420px;
border-radius: 18px;
padding: 52px 40px 44px;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 12px 40px rgba(24, 32, 27, 0.07);
}
.login-card .eyebrow {
display: inline-block;
letter-spacing: 0.14em;
font-size: 11px;
text-transform: uppercase;
color: var(--accent);
font-weight: 750;
margin-bottom: 10px;
}
html[lang="ko"] .login-card .eyebrow {
text-transform: none;
letter-spacing: 0.04em;
}
.login-card h1 {
font-size: clamp(32px, 5vw, 52px);
margin: 14px 0 18px;
font-size: clamp(34px, 5.5vw, 56px);
margin: 8px 0 18px;
line-height: 1.05;
}
.login-card .lede {
margin: 0 auto 28px;
max-width: 34ch;
margin: 0 auto 32px;
max-width: 32ch;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
.login-divider {
height: 1px;
background: var(--line);
margin: 28px 0 24px;
position: relative;
}
.login-divider::before {
content: attr(data-label);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--surface);
padding: 0 12px;
color: var(--muted);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.login-legal {
margin-top: 18px;
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}
.login-legal a {
color: var(--muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.login-error {
margin-top: 14px;
padding: 10px 14px;
border-radius: 8px;
background: var(--weak-bg);
color: var(--weak);
font-size: 13px;
display: none;
}
.login-error.visible {
display: block;
}
.user-bar {