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

style(theme-2): rewrite desktop CSS for light mode blue-white

Browse Source
This commit is contained in:
Mars
2026-06-30 10:55:08 +08:00
parent c37b1a8548
commit b327f65c63
4 changed files with 73 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/player/src/styles/desktop/interaction.css
View File

@@ -17,11 +17,11 @@
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
.desktop-shell ::-webkit-scrollbar-thumb { .desktop-shell ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15); background: rgba(0, 61, 107, 0.2);
border-radius: 3px; border-radius: 3px;
} }
.desktop-shell ::-webkit-scrollbar-thumb:hover { .desktop-shell ::-webkit-scrollbar-thumb:hover {
background: var(--primary-light); background: rgba(0, 61, 107, 0.4);
} }
/* Hover highlights */ /* Hover highlights */
@@ -47,7 +47,7 @@
.desktop-shell input:focus { .desktop-shell input:focus {
border-color: var(--border-gold) !important; border-color: var(--border-gold) !important;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12) !important;
} }
/* Button hover overrides */ /* Button hover overrides */
@@ -55,8 +55,8 @@
transition: background-color 0.2s, border-color 0.2s; transition: background-color 0.2s, border-color 0.2s;
} }
.desktop-shell .btn-gold-outline:hover:not(:disabled) { .desktop-shell .btn-gold-outline:hover:not(:disabled) {
background: rgba(212, 175, 55, 0.08); background: rgba(0, 102, 204, 0.06);
border-color: var(--border-gold); border-color: var(--border-active);
} }
.desktop-shell .btn-gold-outline:active { .desktop-shell .btn-gold-outline:active {
transform: none; /* No mobile shrink on PC */ transform: none; /* No mobile shrink on PC */
@@ -79,7 +79,7 @@
} }
.desktop-skeleton { .desktop-skeleton {
background: linear-gradient(90deg, #161616 25%, #222222 37%, #161616 63%); background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 37%, #E5E7EB 63%);
background-size: 400% 100%; background-size: 400% 100%;
animation: desktop-skeleton-glow 1.4s ease infinite; animation: desktop-skeleton-glow 1.4s ease infinite;
} }
@@ -87,10 +87,10 @@
@keyframes bet-locate-pulse { @keyframes bet-locate-pulse {
0%, 0%,
100% { 100% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
} }
50% { 50% {
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.45); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.45);
} }
} }

22
apps/player/src/styles/desktop/layout.css
View File

@@ -4,8 +4,8 @@
inset: 0; inset: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #000; background-color: var(--desktop-bg);
background-image: url('../../assets/images/pcbg.webp'); background-image: url('../../assets/images/pcbg-light.webp');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
@@ -15,7 +15,7 @@
.desktop-header-wrap { .desktop-header-wrap {
flex-shrink: 0; flex-shrink: 0;
height: var(--desktop-header-h); height: var(--desktop-header-h);
background: #111111; background: var(--bg-card);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
z-index: 120; z-index: 120;
display: flex; display: flex;
@@ -28,7 +28,7 @@
flex-shrink: 0; flex-shrink: 0;
z-index: 110; z-index: 110;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: #111; background: var(--bg-card);
} }
.desktop-main-container { .desktop-main-container {
@@ -53,7 +53,7 @@
width: 100%; width: 100%;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: rgba(14, 14, 14, 0.85); background: var(--bg-card);
} }
.desktop-layout-betting { .desktop-layout-betting {
@@ -66,7 +66,7 @@
.desktop-betting-left { .desktop-betting-left {
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
background: rgba(14, 14, 14, 0.6); background: var(--desktop-sidebar-bg);
overflow-y: auto; overflow-y: auto;
} }
@@ -82,7 +82,7 @@
.desktop-betting-right { .desktop-betting-right {
border-left: 1px solid var(--border); border-left: 1px solid var(--border);
background: rgba(14, 14, 14, 0.85); background: var(--bg-card);
overflow-y: auto; overflow-y: auto;
} }
@@ -150,7 +150,7 @@
.desktop-hub-left { .desktop-hub-left {
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
background: rgba(14, 14, 14, 0.6); background: var(--desktop-sidebar-bg);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -159,7 +159,7 @@
.desktop-hub-right { .desktop-hub-right {
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px;
background: rgba(10, 10, 10, 0.3); background: var(--desktop-bg);
} }
/* Auth Layout: Centered container */ /* Auth Layout: Centered container */
@@ -177,8 +177,8 @@
width: 100%; width: 100%;
max-width: 440px; max-width: 440px;
padding: 30px; padding: 30px;
background: rgba(20, 20, 20, 0.95); background: var(--bg-card);
border: 1px solid var(--border-gold-soft); border: 1px solid var(--border-active);
border-radius: 8px; border-radius: 8px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }

44
apps/player/src/styles/desktop/records.css
View File

@@ -44,8 +44,8 @@
justify-content: center; justify-content: center;
padding: 8px 18px; padding: 8px 18px;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--border-gold-soft); border: 1px solid var(--border-active);
background: rgba(212, 175, 55, 0.08); background: rgba(0, 102, 204, 0.08);
color: var(--primary-light); color: var(--primary-light);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
@@ -55,8 +55,8 @@
} }
.desktop-records-action-btn:hover { .desktop-records-action-btn:hover {
background: rgba(212, 175, 55, 0.14); background: rgba(0, 102, 204, 0.14);
border-color: var(--border-gold); border-color: var(--border-active);
} }
.desktop-records-filter-bar { .desktop-records-filter-bar {
@@ -92,7 +92,7 @@
.desktop-records-filter-divider { .desktop-records-filter-divider {
width: 1px; width: 1px;
height: 22px; height: 22px;
background: rgba(255, 255, 255, 0.12); background: var(--border);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -102,7 +102,7 @@
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: var(--text-muted); color: var(--text-muted);
background: rgba(255, 255, 255, 0.03); background: var(--bg-hover);
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s; transition: color 0.2s, border-color 0.2s, background 0.2s;
@@ -110,14 +110,14 @@
} }
.desktop-records-filter-chip:hover { .desktop-records-filter-chip:hover {
color: #fff; color: var(--text);
border-color: rgba(212, 175, 55, 0.25); border-color: rgba(0, 102, 204, 0.25);
} }
.desktop-records-filter-chip.active { .desktop-records-filter-chip.active {
color: var(--primary-light); color: var(--primary-light);
background: rgba(212, 175, 55, 0.1); background: rgba(0, 102, 204, 0.1);
border-color: rgba(212, 175, 55, 0.35); border-color: rgba(0, 102, 204, 0.35);
} }
.desktop-wallet-subnav { .desktop-wallet-subnav {
@@ -140,14 +140,14 @@
} }
.desktop-wallet-subnav-link:hover { .desktop-wallet-subnav-link:hover {
color: #fff; color: var(--text);
background: rgba(255, 255, 255, 0.04); background: var(--bg-hover);
} }
.desktop-wallet-subnav-link.active { .desktop-wallet-subnav-link.active {
color: var(--primary-light); color: var(--primary-light);
background: rgba(212, 175, 55, 0.1); background: rgba(0, 102, 204, 0.1);
border-color: rgba(212, 175, 55, 0.28); border-color: rgba(0, 102, 204, 0.28);
} }
.desktop-records-panel { .desktop-records-panel {
@@ -155,7 +155,7 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
background: rgba(18, 18, 18, 0.94); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@@ -182,7 +182,7 @@
font-size: 11px; font-size: 11px;
font-weight: 800; font-weight: 800;
color: var(--primary-light); color: var(--primary-light);
background: #121212; background: var(--desktop-bg);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
@@ -195,13 +195,13 @@
.desktop-records-table td { .desktop-records-table td {
padding: 12px 16px; padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--border);
color: var(--text); color: var(--text);
vertical-align: middle; vertical-align: middle;
} }
.desktop-records-table tbody tr:nth-child(even) { .desktop-records-table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.015); background: var(--bg-hover);
} }
.desktop-records-table tbody tr.hover-row { .desktop-records-table tbody tr.hover-row {
@@ -209,7 +209,7 @@
} }
.desktop-records-table tbody tr.hover-row:hover { .desktop-records-table tbody tr.hover-row:hover {
background: rgba(212, 175, 55, 0.06); background: rgba(0, 102, 204, 0.06);
} }
.desktop-records-table .num-cell { .desktop-records-table .num-cell {
@@ -237,8 +237,8 @@
.desktop-records-pagination { .desktop-records-pagination {
flex-shrink: 0; flex-shrink: 0;
padding: 12px 16px; padding: 12px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06); border-top: 1px solid var(--border);
background: rgba(10, 10, 10, 0.35); background: var(--desktop-bg);
} }
.desktop-records-loading, .desktop-records-loading,
@@ -299,7 +299,7 @@
.desktop-records-status.status-won { background: rgba(52, 199, 89, 0.12); color: #4cd964; } .desktop-records-status.status-won { background: rgba(52, 199, 89, 0.12); color: #4cd964; }
.desktop-records-status.status-lost { background: rgba(255, 69, 58, 0.12); color: #ff453a; } .desktop-records-status.status-lost { background: rgba(255, 69, 58, 0.12); color: #ff453a; }
.desktop-records-status.status-pending { background: rgba(212, 175, 55, 0.12); color: var(--primary-light); } .desktop-records-status.status-pending { background: rgba(0, 102, 204, 0.12); color: var(--primary-light); }
.desktop-records-status.status-push { background: rgba(100, 100, 100, 0.12); color: #aaa; } .desktop-records-status.status-push { background: rgba(100, 100, 100, 0.12); color: #aaa; }
.desktop-records-status.status-cancelled { background: rgba(100, 100, 100, 0.1); color: #777; } .desktop-records-status.status-cancelled { background: rgba(100, 100, 100, 0.1); color: #777; }
.desktop-records-status.status-default { background: rgba(100, 100, 100, 0.1); color: #888; } .desktop-records-status.status-default { background: rgba(100, 100, 100, 0.1); color: #888; }

54
apps/player/src/styles/desktop/tokens.css
View File

@@ -1,28 +1,38 @@
.desktop-shell { .desktop-shell {
/* Color Palette overrides */ /* Color Palette overrides (theme-2 Pinnacle style) */
--primary: #D4AF37; --primary: #003D6B;
--primary-dark: #A8841F; --primary-dark: #002847;
--primary-light: #F0D875; --primary-light: #005B9F;
--secondary: #141414; --secondary: #E8EDF2;
--tertiary: #0A0A0A; --tertiary: #F5F7FA;
--neutral: #8E8E93; --neutral: #6B7280;
--bg-body: #050505; --bg-body: #F5F7FA;
--bg-card: rgba(20, 20, 20, 0.95); --bg-card: #FFFFFF;
--bg-hover: rgba(38, 38, 38, 0.95); --bg-hover: #F0F4F8;
--bg-elevated: rgba(45, 45, 45, 0.95); --bg-elevated: #FFFFFF;
--text: #FFFFFF; --text: #1A1A2E;
--text-muted: #8E8E93; --text-muted: #6B7280;
--border: #262626; --border: #E5E7EB;
--border-gold: #D4AF37; --border-active: #0066CC;
--border-gold-soft: rgba(212, 175, 55, 0.25);
/* Map gold tokens to theme blue/orange */
--border-gold: #0066CC;
--border-gold-soft: rgba(0, 102, 204, 0.2);
--shadow-gold: 0 2px 12px rgba(0, 61, 107, 0.1);
--glow-gold: 0 0 6px rgba(0, 102, 204, 0.12);
--odds-accent: #F8971F;
/* Desktop specific added vars */
--desktop-bg: #F5F7FA;
--desktop-border: #E5E7EB;
--desktop-sidebar-bg: #FFFFFF;
--border-w: 1px; --border-w: 1px;
--border-w-thick: 1px; --border-w-thick: 1px;
--danger: #FF453A; --danger: #DC2626;
--radius: 4px; --radius: 8px;
--radius-sm: 2px; --radius-sm: 6px;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.65); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.15);
--glow-gold: 0 0 6px rgba(212, 175, 55, 0.15);
/* PC Dimensioning */ /* PC Dimensioning */
--desktop-header-h: 56px; --desktop-header-h: 56px;