ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(player): theme-3 玻璃卡片与认证页视觉优化

Browse Source 
- 认证页减轻背景遮罩，玻璃表单与渐变登录按钮

- 全局 glass 卡片：半透明底+中性描边，珊瑚色仅用于 auth-card

- 登录提示/确认弹窗、注单/钱包/首页等卡片统一风格

- 消息列表移除外边框与未读圆点，保留未读标签
This commit is contained in:
Mars
2026-06-23 16:21:40 +08:00
parent a379f9e522
commit 233e9c891a
18 changed files with 246 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/player/src/components/BetHistoryCard.vue
View File

@@ -149,19 +149,16 @@ function goDetail() {
align-items: center;
gap: 10px;
padding: 14px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: var(--radius-lg);
margin-bottom: 8px;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
transition: transform 0.15s, box-shadow 0.15s;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.bet-card:active {
background: var(--bg-hover);
transform: scale(0.99);
}
.card-body {

5
apps/player/src/components/BetStatsPanel.vue
View File

@@ -79,12 +79,9 @@ const stats = computed(() => {
<style scoped>
.stats-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: var(--radius-lg);
padding: 14px 12px 10px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.stats-row {

20
apps/player/src/components/ConfirmDialog.vue
View File

@@ -51,7 +51,7 @@ function onConfirm() {
@click.self="close"
>
<div
class="confirm-modal"
class="confirm-modal glass-card"
role="alertdialog"
aria-modal="true"
:aria-labelledby="title ? 'confirm-dialog-title' : undefined"
@@ -95,26 +95,22 @@ function onConfirm() {
justify-content: center;
padding: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
background: rgba(15, 32, 39, 0.42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.confirm-modal {
width: 100%;
max-width: 340px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 18px 16px;
box-shadow: var(--shadow-lg);
}
.confirm-title {
margin: 0 0 10px;
font-size: 17px;
font-weight: 800;
color: var(--primary);
color: var(--primary-light);
text-align: center;
line-height: 1.35;
}
@@ -149,19 +145,21 @@ function onConfirm() {
.confirm-btn.cancel {
border: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
background: rgba(15, 32, 39, 0.45);
color: var(--text-secondary);
}
.confirm-btn.confirm {
border: none;
background: var(--gradient-primary);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(231, 111, 81, 0.35);
}
.confirm-btn.confirm.danger {
background: var(--danger);
color: #fff;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.confirm-fade-enter-active,

5
apps/player/src/components/LeagueAccordionItem.vue
View File

@@ -89,11 +89,8 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
position: relative;
isolation: isolate;
margin-bottom: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.league-row {

96
apps/player/src/components/LoginPromptModal.vue
View File

@@ -26,7 +26,7 @@ function continueBrowsing() {
<Teleport to="body">
<Transition name="fade">
<div v-if="auth.loginPromptVisible" class="login-overlay" @click.self="continueBrowsing">
<div class="login-modal">
<div class="login-modal auth-card">
<button type="button" class="close-btn" :aria-label="t('auth.continue_browsing')" @click="continueBrowsing">
✕
</button>
@@ -34,7 +34,7 @@ function continueBrowsing() {
<p class="login-hint">{{ t('auth.login_hint') }}</p>
<div class="login-actions">
<button type="button" class="login-submit" @click="goLogin">
<button type="button" class="login-submit btn-primary" @click="goLogin">
{{ t('auth.go_login') }}
</button>
<button type="button" class="login-secondary" @click="continueBrowsing">
@@ -55,52 +55,54 @@ function continueBrowsing() {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 20px;
background: rgba(15, 32, 39, 0.42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.login-modal {
position: relative;
width: 90%;
max-width: 360px;
background: var(--bg-card-elevated);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 24px 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), var(--shadow-glow);
width: 100%;
max-width: 340px;
padding: 28px 22px 22px;
}
.close-btn {
position: absolute;
top: 12px;
right: 14px;
top: 10px;
right: 12px;
background: none;
border: none;
color: var(--text-muted);
font-size: 18px;
color: var(--text-dim);
font-size: 17px;
cursor: pointer;
padding: 4px;
padding: 6px;
line-height: 1;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
}
.close-btn:hover {
color: var(--text);
.close-btn:active {
color: var(--primary-light);
background: rgba(244, 162, 97, 0.1);
}
.login-title {
font-size: 18px;
font-size: 19px;
font-weight: 800;
color: var(--primary);
margin: 0 0 6px;
color: var(--primary-light);
margin: 0 0 8px;
text-align: center;
letter-spacing: 0.02em;
}
.login-hint {
font-size: 12px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.45;
color: var(--text-secondary);
text-align: center;
margin: 0 0 24px;
margin: 0 0 22px;
}
.login-actions {
@@ -110,46 +112,48 @@ function continueBrowsing() {
}
.login-submit {
padding: 12px;
border-radius: 8px;
border: none;
background: var(--gradient-primary);
color: #FFFFFF;
min-height: 46px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
min-height: 44px;
transition: opacity 0.2s;
}
.login-submit:active {
opacity: 0.85;
}
.login-secondary {
padding: 10px;
border-radius: 8px;
padding: 11px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
background: rgba(15, 32, 39, 0.45);
color: var(--text-secondary);
font-size: 14px;
font-weight: 600;
cursor: pointer;
min-height: 40px;
transition: color 0.2s, border-color 0.2s;
min-height: 42px;
backdrop-filter: blur(8px);
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.login-secondary:active {
color: var(--text);
border-color: var(--primary);
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.25s ease;
transition: opacity 0.22s ease;
}
.fade-enter-active .login-modal,
.fade-leave-active .login-modal {
transition: transform 0.22s ease, opacity 0.22s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-from .login-modal,
.fade-leave-to .login-modal {
opacity: 0;
transform: scale(0.96) translateY(8px);
}
</style>

5
apps/player/src/components/MatchBetCard.vue
View File

@@ -130,9 +130,7 @@ const liveScoreText = computed(() => {
<style scoped>
.match-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: var(--radius-lg);
padding: 8px 6px 8px;
display: flex;
flex-direction: column;
@@ -141,7 +139,6 @@ const liveScoreText = computed(() => {
min-width: 0;
overflow: hidden;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.15s, box-shadow 0.15s;
}

14
apps/player/src/components/MessageListPanel.vue
View File

@@ -124,7 +124,6 @@ onActivated(tryLoad);
:class="{ unread: !item.isRead }"
>
<button type="button" class="row-body" @click="openDetail(item.id)">
<span class="row-dot" aria-hidden="true" />
<span class="row-main">
<span class="title-row">
<span class="title">{{ messageTitle(item) }}</span>
@@ -233,19 +232,6 @@ onActivated(tryLoad);
font-weight: 700;
}
.row-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
flex-shrink: 0;
}
.list-row.unread .row-dot {
background: var(--primary);
box-shadow: var(--shadow-glow);
}
.row-main {
flex: 1;
min-width: 0;

5
apps/player/src/components/WalletStatsPanel.vue
View File

@@ -78,12 +78,9 @@ const stats = computed(() => {
<style scoped>
.wallet-stats-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: var(--radius-lg);
padding: 12px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.stats-row {

155
apps/player/src/styles.css
View File

@@ -19,10 +19,14 @@
--neutral: #8FA3AD;
--bg-body: #0F2027;
--bg-card: #203A43;
--bg-card-elevated: #2C5364;
--bg-hover: #345E70;
--bg-elevated: #2C5364;
--glass-bg: rgba(22, 45, 54, 0.82);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-border-accent: rgba(244, 162, 97, 0.32);
--glass-glow: 0 0 20px rgba(0, 0, 0, 0.18);
--bg-card: var(--glass-bg);
--bg-card-elevated: rgba(28, 55, 66, 0.88);
--bg-hover: rgba(44, 83, 100, 0.55);
--bg-elevated: rgba(28, 55, 66, 0.88);
--bg-input: #162D36;
--captcha-canvas-bg: #162D36;
--captcha-char: #F4A261;
@@ -47,9 +51,9 @@
--radius-sm: 8px;
--radius-lg: 16px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
--shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.38);
--shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
--shadow-glow: 0 0 20px rgba(244, 162, 97, 0.2);
--shadow-glow-accent: 0 0 20px rgba(231, 111, 81, 0.2);
}
@@ -159,18 +163,60 @@ input:-webkit-autofill:active {
color: var(--primary-light) !important;
}
/* ── Card frame ── */
/* ── Card frame (glass) ── */
.glass-card,
.card,
.ps-gold-frame {
position: relative;
border: 1px solid var(--border) !important;
border-radius: var(--radius);
background: var(--bg-card) !important;
box-shadow: var(--shadow);
backdrop-filter: blur(12px);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.ps-gold-frame::before,
.ps-gold-frame::after { display: none; }
/* Common list / panel surfaces */
.bet-card,
.order-card,
.list-card,
.match-card,
.option-card,
.my-bet-card,
.score-card,
.success-card,
.avatar-card,
.form-card,
.wallet-stats-panel,
.bet-stats-panel,
.stats-panel,
.confirm-modal,
.qa-item,
.qe-item,
.league-block,
.tx-list.glass-card,
.drawer,
.slip-item,
.hero,
.section,
.recharge-section,
.panel-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-md);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.tx-list.glass-card {
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.ps-gold-input {
background: var(--bg-input) !important;
border: 1px solid var(--border) !important;
@@ -219,12 +265,8 @@ input:-webkit-autofill:active {
/* ── Card ── */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 12px;
box-shadow: var(--shadow);
}
/* ── Section title ── */
@@ -251,3 +293,82 @@ input:-webkit-autofill:active {
font-weight: 600;
font-size: 14px;
}
/* ── Auth pages (login / register / forgot) ── */
.auth-page::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
180deg,
transparent 0%,
transparent 32%,
rgba(15, 32, 39, 0.25) 58%,
rgba(15, 32, 39, 0.72) 100%
);
}
.auth-page::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(165deg, rgba(244, 162, 97, 0.14) 0%, transparent 42%);
}
.auth-card {
background: var(--glass-bg) !important;
border: 1px solid var(--glass-border-accent) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-lg), 0 0 28px rgba(244, 162, 97, 0.1) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.auth-card label {
color: var(--text-secondary);
font-size: 11px;
}
.auth-card .field-input {
background: rgba(15, 32, 39, 0.55);
border-color: rgba(255, 255, 255, 0.12);
}
.auth-card .field-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.18);
}
.auth-card .btn-login {
background: var(--gradient-primary);
border: none;
color: #fff;
box-shadow: 0 4px 16px rgba(231, 111, 81, 0.38);
}
.auth-card .btn-login:active:not(:disabled) {
opacity: 0.92;
transform: scale(0.985);
}
.auth-card .btn-secondary {
background: rgba(15, 32, 39, 0.5);
border-color: var(--border);
color: var(--primary-light);
}
.auth-page .btn-skip-light {
border-color: var(--border);
background: rgba(22, 45, 54, 0.45);
backdrop-filter: blur(8px);
color: var(--text-secondary);
}
.auth-page .btn-skip-light:active {
border-color: var(--primary);
color: var(--primary-light);
}

5
apps/player/src/views/CashbackRecordsView.vue
View File

@@ -273,11 +273,8 @@ const pullIndicatorStyle = () => ({
}
.list-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
}
.record-row {

52
apps/player/src/views/ForgotPasswordView.vue
View File

@@ -98,11 +98,11 @@ function goLogin() {
</script>
<template>
<div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
<div class="login-page auth-page" :style="{ backgroundImage: `url(${loginBg})` }">
<div class="login-lang">
<LocaleSwitcher compact />
</div>
<form @submit.prevent="submit" class="login-form ps-gold-frame">
<form @submit.prevent="submit" class="login-form ps-gold-frame auth-card">
<h2 class="form-title">{{ t('auth.forgot_password_title') }}</h2>
<div class="field">
@@ -169,7 +169,7 @@ function goLogin() {
<p v-if="fieldError()" class="error">{{ fieldError() }}</p>
<button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
<button type="submit" class="btn-login btn-primary" :disabled="loading">
{{ t('auth.reset_password_btn') }}
</button>
<button type="button" class="btn-skip" @click="goLogin">
@@ -203,22 +203,6 @@ function goLogin() {
background-repeat: no-repeat;
}
.login-page::before {
content: '';
position: absolute;
inset: 0;
background: rgba(15, 32, 39, 0.7);
z-index: 0;
}
.login-page::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
z-index: 0;
}
.login-form {
position: relative;
z-index: 1;
@@ -226,20 +210,17 @@ function goLogin() {
max-width: 320px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
gap: 10px;
padding: 22px 20px;
}
.form-title {
margin: 0 0 2px;
font-size: 16px;
margin: 0 0 4px;
font-size: 17px;
font-weight: 800;
color: var(--text);
color: var(--primary-light);
text-align: center;
letter-spacing: 0.02em;
}
.field {
@@ -249,32 +230,25 @@ function goLogin() {
}
label {
font-size: 10px;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
}
.field-input {
width: 100%;
height: 36px;
padding: 0 10px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 6px;
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text);
font-size: 14px;
font-family: inherit;
}
.field-input::placeholder {
color: rgba(148, 163, 184, 0.6);
}
.field-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
}
.inline-row {

10
apps/player/src/views/HomeView.vue
View File

@@ -199,12 +199,9 @@ function formatKickoff(startTime: string) {
align-items: center;
gap: 6px;
padding: 12px 4px 10px;
border-radius: var(--radius-sm);
border-radius: var(--radius-lg);
min-width: 0;
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
@@ -300,10 +297,7 @@ function formatKickoff(startTime: string) {
margin-bottom: 8px;
padding: 10px 12px;
min-height: 60px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
background: var(--bg-card);
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
overflow: hidden;

39
apps/player/src/views/LoginView.vue
View File

@@ -85,11 +85,11 @@ function goRegister() {
</script>
<template>
<div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
<div class="login-page auth-page" :style="{ backgroundImage: `url(${loginBg})` }">
<div class="login-lang">
<LocaleSwitcher compact />
</div>
<form @submit.prevent="submit" class="login-form ps-gold-frame">
<form @submit.prevent="submit" class="login-form ps-gold-frame auth-card">
<div v-if="loginMode === 'account'" class="field">
<label>{{ t('auth.username') }}</label>
<input
@@ -133,7 +133,7 @@ function goRegister() {
<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">
<button type="submit" class="btn-login btn-primary" :disabled="loading">
{{ t('auth.login') }}
</button>
<button type="button" class="btn-skip" @click="goRegister">
@@ -170,22 +170,6 @@ function goRegister() {
background-repeat: no-repeat;
}
.login-page::before {
content: '';
position: absolute;
inset: 0;
background: rgba(15, 32, 39, 0.7);
z-index: 0;
}
.login-page::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
z-index: 0;
}
.login-form {
position: relative;
z-index: 1;
@@ -193,12 +177,8 @@ function goRegister() {
max-width: 320px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
gap: 10px;
padding: 22px 20px;
}
.field {
@@ -209,10 +189,10 @@ function goRegister() {
.field-input {
width: 100%;
height: 36px;
padding: 0 10px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 6px;
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text);
font-size: 14px;
@@ -221,8 +201,6 @@ function goRegister() {
.field-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
}
.inline-row {
@@ -238,7 +216,6 @@ function goRegister() {
label {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.04em;
}

4
apps/player/src/views/ProfileView.vue
View File

@@ -541,9 +541,7 @@ const balanceAmountClass = computed(() => {
align-items: center;
gap: 10px;
padding: 12px 10px;
border-radius: var(--radius-sm);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
text-decoration: none;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;

5
apps/player/src/views/RechargeHistoryView.vue
View File

@@ -420,15 +420,12 @@ function auditStepCount(order: DepositOrder) {
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
border-radius: var(--radius-lg);
padding: 16px;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: var(--shadow);
}
.order-card:active {
opacity: 0.92;

54
apps/player/src/views/RegisterView.vue
View File

@@ -101,11 +101,11 @@ const fieldError = () => {
</script>
<template>
<div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
<div class="login-page auth-page" :style="{ backgroundImage: `url(${loginBg})` }">
<div class="login-lang">
<LocaleSwitcher compact />
</div>
<form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
<form @submit.prevent="submit" class="login-form ps-gold-frame auth-card" :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>
@@ -188,7 +188,7 @@ const fieldError = () => {
<button
type="submit"
class="btn-login btn-gold-outline"
class="btn-login btn-primary"
:class="{ 'is-loading': loading }"
:disabled="loading"
:aria-busy="loading"
@@ -233,22 +233,6 @@ const fieldError = () => {
background-repeat: no-repeat;
}
.login-page::before {
content: '';
position: absolute;
inset: 0;
background: rgba(15, 32, 39, 0.7);
z-index: 0;
}
.login-page::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
z-index: 0;
}
.login-form {
position: relative;
z-index: 1;
@@ -256,12 +240,8 @@ const fieldError = () => {
max-width: 320px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
gap: 10px;
padding: 22px 20px;
}
.login-form.is-busy {
@@ -278,7 +258,7 @@ const fieldError = () => {
justify-content: center;
gap: 10px;
border-radius: inherit;
background: rgba(15, 32, 39, 0.85);
background: rgba(22, 45, 54, 0.88);
backdrop-filter: blur(4px);
pointer-events: all;
}
@@ -299,11 +279,12 @@ const fieldError = () => {
}
.form-title {
margin: 0 0 2px;
font-size: 16px;
margin: 0 0 4px;
font-size: 17px;
font-weight: 800;
color: var(--text);
color: var(--primary-light);
text-align: center;
letter-spacing: 0.02em;
}
.field {
@@ -317,8 +298,7 @@ const fieldError = () => {
}
label {
font-size: 10px;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
}
@@ -331,24 +311,18 @@ label {
.field-input {
width: 100%;
height: 36px;
padding: 0 10px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 6px;
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text);
font-size: 14px;
font-family: inherit;
}
.field-input::placeholder {
color: rgba(148, 163, 184, 0.6);
}
.field-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
}
.inline-row {

2
apps/player/src/views/WalletDetailView.vue
View File

@@ -187,7 +187,7 @@ const pullIndicatorStyle = () => ({
</button>
</div>
<div v-if="items.length" class="tx-list">
<div v-if="items.length" class="tx-list glass-card">
<button
v-for="tx in items"
:key="tx.transactionId"

2
apps/player/src/views/WalletView.vue
View File

@@ -110,7 +110,7 @@ const pullIndicatorStyle = () => ({
>{{ t('wallet.view_all') }} &#x203A;</button>
</div>
<div v-if="items.length" class="tx-list">
<div v-if="items.length" class="tx-list glass-card">
<button
v-for="tx in items"
:key="tx.transactionId"