ui: redesign login lobby, fix auth view transition timing
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user