feat(player): theme-2 认证页 zt2 背景与表单样式优化
- 登录/注册/找回密码使用 zt2.webp，移除暗色渐变遮罩 - 表单标题、标签、链接改为深蓝/灰色，适配 Pinnacle 浅色主题 - 更新 zt2.webp 资源文件
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 256 KiB |
@@ -102,7 +102,8 @@ function goLogin() {
|
||||
<div class="login-lang">
|
||||
<LocaleSwitcher compact />
|
||||
</div>
|
||||
<form @submit.prevent="submit" class="login-form ps-gold-frame">
|
||||
<div class="login-stack">
|
||||
<form @submit.prevent="submit" class="login-form ps-gold-frame">
|
||||
<h2 class="form-title">{{ t('auth.forgot_password_title') }}</h2>
|
||||
|
||||
<div class="field">
|
||||
@@ -111,7 +112,7 @@ function goLogin() {
|
||||
<PhoneCountrySelect v-model="countryIso" />
|
||||
<input
|
||||
v-model="phone"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
type="tel"
|
||||
required
|
||||
autocomplete="tel-national"
|
||||
@@ -125,7 +126,7 @@ function goLogin() {
|
||||
<div class="inline-row">
|
||||
<input
|
||||
v-model="smsCode"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
inputmode="numeric"
|
||||
maxlength="6"
|
||||
autocomplete="one-time-code"
|
||||
@@ -146,7 +147,7 @@ function goLogin() {
|
||||
<label>{{ t('auth.password') }}</label>
|
||||
<input
|
||||
v-model="password"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
@@ -159,7 +160,7 @@ function goLogin() {
|
||||
<label>{{ t('auth.confirm_password') }}</label>
|
||||
<input
|
||||
v-model="confirmPassword"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
@@ -175,7 +176,8 @@ function goLogin() {
|
||||
<button type="button" class="btn-skip" @click="goLogin">
|
||||
{{ t('auth.back_to_login') }}
|
||||
</button>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -184,7 +186,7 @@ function goLogin() {
|
||||
position: absolute;
|
||||
top: max(12px, env(safe-area-inset-top));
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
@@ -197,30 +199,32 @@ function goLogin() {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
|
||||
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||
background-color: var(--bg-body);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.login-stack {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
margin: 0 0 2px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -232,7 +236,7 @@ function goLogin() {
|
||||
|
||||
label {
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
@@ -241,22 +245,21 @@ label {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: rgba(107, 114, 128, 0.6);
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066CC;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
|
||||
.inline-row {
|
||||
@@ -274,16 +277,22 @@ label {
|
||||
flex-shrink: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #F5F7FA;
|
||||
color: #003D6B;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled):active {
|
||||
border-color: var(--primary);
|
||||
background: var(--surface-accent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
@@ -307,19 +316,19 @@ label {
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-skip:active {
|
||||
color: #005B9F;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
|
||||
@@ -89,12 +89,32 @@ function goRegister() {
|
||||
<div class="login-lang">
|
||||
<LocaleSwitcher compact />
|
||||
</div>
|
||||
<form @submit.prevent="submit" class="login-form ps-gold-frame">
|
||||
<div class="login-stack">
|
||||
<form @submit.prevent="submit" class="login-form ps-gold-frame">
|
||||
<div class="auth-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="auth-tab"
|
||||
:class="{ active: loginMode === 'account' }"
|
||||
@click="switchLoginMode('account')"
|
||||
>
|
||||
{{ t('auth.login_by_account') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="auth-tab"
|
||||
:class="{ active: loginMode === 'phone' }"
|
||||
@click="switchLoginMode('phone')"
|
||||
>
|
||||
{{ t('auth.login_by_phone') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loginMode === 'account'" class="field">
|
||||
<label>{{ t('auth.username') }}</label>
|
||||
<input
|
||||
v-model="account"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
required
|
||||
autocomplete="username"
|
||||
maxlength="32"
|
||||
@@ -108,7 +128,7 @@ function goRegister() {
|
||||
<PhoneCountrySelect v-model="countryIso" />
|
||||
<input
|
||||
v-model="phone"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
type="tel"
|
||||
required
|
||||
autocomplete="tel-national"
|
||||
@@ -119,30 +139,29 @@ function goRegister() {
|
||||
|
||||
<div class="field">
|
||||
<label>{{ t('auth.password') }}</label>
|
||||
<input v-model="password" class="field-input" type="password" required autocomplete="current-password" />
|
||||
<input v-model="password" class="field-input ps-gold-input" type="password" required autocomplete="current-password" />
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-forgot" @click="goForgotPassword">
|
||||
{{ t('auth.forgot_password') }}
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn-mode-switch" @click="switchLoginMode(loginMode === 'account' ? 'phone' : 'account')">
|
||||
{{ loginMode === 'account' ? t('auth.login_by_phone') : t('auth.login_by_account') }}
|
||||
</button>
|
||||
|
||||
<RobotVerify ref="captchaRef" />
|
||||
<p v-if="resetSuccess" class="success">{{ t('auth.reset_success') }}</p>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
|
||||
{{ t('auth.login') }}
|
||||
</button>
|
||||
<button type="button" class="btn-skip" @click="goRegister">
|
||||
{{ t('auth.go_register') }}
|
||||
</button>
|
||||
</form>
|
||||
<button type="button" class="btn-skip-light" @click="continueBrowsing">
|
||||
{{ t('auth.continue_browsing') }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="login-actions">
|
||||
<button type="button" class="btn-skip" @click="goRegister">
|
||||
{{ t('auth.go_register') }}
|
||||
</button>
|
||||
<button type="button" class="btn-skip-light" @click="continueBrowsing">
|
||||
{{ t('auth.continue_browsing') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -151,7 +170,7 @@ function goRegister() {
|
||||
position: absolute;
|
||||
top: max(12px, env(safe-area-inset-top));
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
@@ -163,24 +182,67 @@ function goRegister() {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom)));
|
||||
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||
padding: 34vh 20px max(20px, env(safe-area-inset-bottom));
|
||||
background-color: var(--bg-body);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.login-stack {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.login-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 0 14px 4px;
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-body);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.auth-tab {
|
||||
flex: 1;
|
||||
min-height: 34px;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.auth-tab.active {
|
||||
border-color: var(--primary);
|
||||
color: var(--text);
|
||||
background: var(--surface-accent);
|
||||
}
|
||||
|
||||
.field {
|
||||
@@ -193,18 +255,17 @@ function goRegister() {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066CC;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
|
||||
.inline-row {
|
||||
@@ -220,41 +281,25 @@ function goRegister() {
|
||||
|
||||
label {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.btn-mode-switch {
|
||||
align-self: flex-start;
|
||||
margin: -2px 0 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #005B9F;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-forgot {
|
||||
align-self: flex-end;
|
||||
margin: -4px 0 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-forgot:active {
|
||||
color: #003D6B;
|
||||
}
|
||||
|
||||
.btn-mode-switch:active {
|
||||
color: #003D6B;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
@@ -272,48 +317,45 @@ label {
|
||||
}
|
||||
|
||||
.btn-skip {
|
||||
margin-top: 2px;
|
||||
padding: 8px 14px;
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-skip:active {
|
||||
color: #005B9F;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.btn-skip-light {
|
||||
position: absolute;
|
||||
bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 8px 16px;
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-skip-light:active {
|
||||
color: #003D6B;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.success {
|
||||
margin: 0;
|
||||
color: #059669;
|
||||
color: var(--success);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
|
||||
@@ -105,7 +105,8 @@ const fieldError = () => {
|
||||
<div class="login-lang">
|
||||
<LocaleSwitcher compact />
|
||||
</div>
|
||||
<form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
|
||||
<div class="login-stack">
|
||||
<form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
|
||||
<div v-if="loading" class="form-busy-overlay" aria-hidden="true">
|
||||
<GoldSpinner :size="40" :active="true" />
|
||||
<p class="form-busy-text">{{ t('auth.registering') }}</p>
|
||||
@@ -116,7 +117,7 @@ const fieldError = () => {
|
||||
<label>{{ t('auth.username') }}</label>
|
||||
<input
|
||||
v-model="account"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
required
|
||||
autocomplete="username"
|
||||
maxlength="32"
|
||||
@@ -132,7 +133,7 @@ const fieldError = () => {
|
||||
<PhoneCountrySelect v-model="countryIso" />
|
||||
<input
|
||||
v-model="phone"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
type="tel"
|
||||
required
|
||||
autocomplete="tel-national"
|
||||
@@ -147,7 +148,7 @@ const fieldError = () => {
|
||||
<div class="inline-row">
|
||||
<input
|
||||
v-model="smsCode"
|
||||
class="field-input"
|
||||
class="field-input ps-gold-input"
|
||||
inputmode="numeric"
|
||||
maxlength="6"
|
||||
autocomplete="one-time-code"
|
||||
@@ -171,17 +172,17 @@ const fieldError = () => {
|
||||
|
||||
<div class="field">
|
||||
<label>{{ t('auth.password') }}</label>
|
||||
<input v-model="password" class="field-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
|
||||
<input v-model="password" class="field-input ps-gold-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>{{ t('auth.confirm_password') }}</label>
|
||||
<input v-model="confirmPassword" class="field-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
|
||||
<input v-model="confirmPassword" class="field-input ps-gold-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
|
||||
</div>
|
||||
|
||||
<div class="field field-optional">
|
||||
<label>{{ t('auth.invite_code') }} <span class="optional-tag">{{ t('auth.optional') }}</span></label>
|
||||
<input v-model="inviteCode" class="field-input" autocomplete="off" :disabled="loading" />
|
||||
<input v-model="inviteCode" class="field-input ps-gold-input" autocomplete="off" :disabled="loading" />
|
||||
</div>
|
||||
|
||||
<p v-if="fieldError()" class="error">{{ fieldError() }}</p>
|
||||
@@ -199,13 +200,16 @@ const fieldError = () => {
|
||||
</span>
|
||||
<span v-else>{{ t('auth.register_btn') }}</span>
|
||||
</button>
|
||||
<button type="button" class="btn-skip" :disabled="loading" @click="goLogin">
|
||||
{{ t('auth.have_account') }}
|
||||
</button>
|
||||
</form>
|
||||
<button type="button" class="btn-skip-light" @click="continueBrowsing">
|
||||
{{ t('auth.continue_browsing') }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="login-actions">
|
||||
<button type="button" class="btn-skip" :disabled="loading" @click="goLogin">
|
||||
{{ t('auth.have_account') }}
|
||||
</button>
|
||||
<button type="button" class="btn-skip-light" :disabled="loading" @click="continueBrowsing">
|
||||
{{ t('auth.continue_browsing') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -214,7 +218,7 @@ const fieldError = () => {
|
||||
position: absolute;
|
||||
top: max(12px, env(safe-area-inset-top));
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
@@ -226,25 +230,38 @@ const fieldError = () => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
|
||||
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||
padding: 30vh 16px max(20px, env(safe-area-inset-bottom));
|
||||
background-color: var(--bg-body);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.login-stack {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.login-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 0 14px 4px;
|
||||
}
|
||||
|
||||
.login-form.is-busy {
|
||||
@@ -261,8 +278,8 @@ const fieldError = () => {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: inherit;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(2px);
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
backdrop-filter: blur(4px);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@@ -270,7 +287,7 @@ const fieldError = () => {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
@@ -285,7 +302,7 @@ const fieldError = () => {
|
||||
margin: 0 0 2px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -301,7 +318,7 @@ const fieldError = () => {
|
||||
|
||||
label {
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
@@ -309,29 +326,28 @@ label {
|
||||
.optional-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: rgba(107, 114, 128, 0.6);
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066CC;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
|
||||
.inline-row {
|
||||
@@ -349,16 +365,23 @@ label {
|
||||
flex-shrink: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #F5F7FA;
|
||||
color: #003D6B;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled).active,
|
||||
.btn-secondary:active:not(:disabled) {
|
||||
border-color: var(--primary);
|
||||
background: var(--surface-accent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
@@ -382,42 +405,39 @@ label {
|
||||
}
|
||||
|
||||
.btn-skip {
|
||||
margin-top: 2px;
|
||||
padding: 8px 14px;
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-skip:active {
|
||||
color: #005B9F;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.btn-skip-light {
|
||||
position: absolute;
|
||||
bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 8px 16px;
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-skip-light:active {
|
||||
color: #003D6B;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
|
||||
Reference in New Issue
Block a user