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);
}
.desktop-shell ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
background: rgba(0, 61, 107, 0.2);
border-radius: 3px;
}
.desktop-shell ::-webkit-scrollbar-thumb:hover {
background: var(--primary-light);
background: rgba(0, 61, 107, 0.4);
}
/* Hover highlights */
@@ -47,7 +47,7 @@
.desktop-shell input:focus {
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 */
@@ -55,8 +55,8 @@
transition: background-color 0.2s, border-color 0.2s;
}
.desktop-shell .btn-gold-outline:hover:not(:disabled) {
background: rgba(212, 175, 55, 0.08);
border-color: var(--border-gold);
background: rgba(0, 102, 204, 0.06);
border-color: var(--border-active);
}
.desktop-shell .btn-gold-outline:active {
transform: none; /* No mobile shrink on PC */
@@ -79,7 +79,7 @@
}
.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%;
animation: desktop-skeleton-glow 1.4s ease infinite;
}
@@ -87,10 +87,10 @@
@keyframes bet-locate-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
}
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;
display: flex;
flex-direction: column;
background-color: #000;
background-image: url('../../assets/images/pcbg.webp');
background-color: var(--desktop-bg);
background-image: url('../../assets/images/pcbg-light.webp');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -15,7 +15,7 @@
.desktop-header-wrap {
flex-shrink: 0;
height: var(--desktop-header-h);
background: #111111;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
z-index: 120;
display: flex;
@@ -28,7 +28,7 @@
flex-shrink: 0;
z-index: 110;
border-bottom: 1px solid var(--border);
background: #111;
background: var(--bg-card);
}
.desktop-main-container {
@@ -53,7 +53,7 @@
width: 100%;
padding: 0 16px;
border-bottom: 1px solid var(--border);
background: rgba(14, 14, 14, 0.85);
background: var(--bg-card);
}
.desktop-layout-betting {
@@ -66,7 +66,7 @@
.desktop-betting-left {
border-right: 1px solid var(--border);
background: rgba(14, 14, 14, 0.6);
background: var(--desktop-sidebar-bg);
overflow-y: auto;
}
@@ -82,7 +82,7 @@
.desktop-betting-right {
border-left: 1px solid var(--border);
background: rgba(14, 14, 14, 0.85);
background: var(--bg-card);
overflow-y: auto;
}
@@ -150,7 +150,7 @@
.desktop-hub-left {
border-right: 1px solid var(--border);
background: rgba(14, 14, 14, 0.6);
background: var(--desktop-sidebar-bg);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -159,7 +159,7 @@
.desktop-hub-right {
overflow-y: auto;
padding: 20px;
background: rgba(10, 10, 10, 0.3);
background: var(--desktop-bg);
}
/* Auth Layout: Centered container */
@@ -177,8 +177,8 @@
width: 100%;
max-width: 440px;
padding: 30px;
background: rgba(20, 20, 20, 0.95);
border: 1px solid var(--border-gold-soft);
background: var(--bg-card);
border: 1px solid var(--border-active);
border-radius: 8px;
box-shadow: var(--shadow);
}

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

@@ -44,8 +44,8 @@
justify-content: center;
padding: 8px 18px;
border-radius: 6px;
border: 1px solid var(--border-gold-soft);
background: rgba(212, 175, 55, 0.08);
border: 1px solid var(--border-active);
background: rgba(0, 102, 204, 0.08);
color: var(--primary-light);
font-size: 13px;
font-weight: 700;
@@ -55,8 +55,8 @@
}
.desktop-records-action-btn:hover {
background: rgba(212, 175, 55, 0.14);
border-color: var(--border-gold);
background: rgba(0, 102, 204, 0.14);
border-color: var(--border-active);
}
.desktop-records-filter-bar {
@@ -92,7 +92,7 @@
.desktop-records-filter-divider {
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.12);
background: var(--border);
flex-shrink: 0;
}
@@ -102,7 +102,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
background: rgba(255, 255, 255, 0.03);
background: var(--bg-hover);
border: 1px solid transparent;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
@@ -110,14 +110,14 @@
}
.desktop-records-filter-chip:hover {
color: #fff;
border-color: rgba(212, 175, 55, 0.25);
color: var(--text);
border-color: rgba(0, 102, 204, 0.25);
}
.desktop-records-filter-chip.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: rgba(212, 175, 55, 0.35);
background: rgba(0, 102, 204, 0.1);
border-color: rgba(0, 102, 204, 0.35);
}
.desktop-wallet-subnav {
@@ -140,14 +140,14 @@
}
.desktop-wallet-subnav-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.04);
color: var(--text);
background: var(--bg-hover);
}
.desktop-wallet-subnav-link.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: rgba(212, 175, 55, 0.28);
background: rgba(0, 102, 204, 0.1);
border-color: rgba(0, 102, 204, 0.28);
}
.desktop-records-panel {
@@ -155,7 +155,7 @@
flex-direction: column;
flex: 1;
min-height: 0;
background: rgba(18, 18, 18, 0.94);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
@@ -182,7 +182,7 @@
font-size: 11px;
font-weight: 800;
color: var(--primary-light);
background: #121212;
background: var(--desktop-bg);
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border);
@@ -195,13 +195,13 @@
.desktop-records-table td {
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--border);
color: var(--text);
vertical-align: middle;
}
.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 {
@@ -209,7 +209,7 @@
}
.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 {
@@ -237,8 +237,8 @@
.desktop-records-pagination {
flex-shrink: 0;
padding: 12px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(10, 10, 10, 0.35);
border-top: 1px solid var(--border);
background: var(--desktop-bg);
}
.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-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-cancelled { background: rgba(100, 100, 100, 0.1); color: #777; }
.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 {
/* Color Palette overrides */
--primary: #D4AF37;
--primary-dark: #A8841F;
--primary-light: #F0D875;
--secondary: #141414;
--tertiary: #0A0A0A;
--neutral: #8E8E93;
--bg-body: #050505;
--bg-card: rgba(20, 20, 20, 0.95);
--bg-hover: rgba(38, 38, 38, 0.95);
--bg-elevated: rgba(45, 45, 45, 0.95);
--text: #FFFFFF;
--text-muted: #8E8E93;
--border: #262626;
--border-gold: #D4AF37;
--border-gold-soft: rgba(212, 175, 55, 0.25);
/* Color Palette overrides (theme-2 Pinnacle style) */
--primary: #003D6B;
--primary-dark: #002847;
--primary-light: #005B9F;
--secondary: #E8EDF2;
--tertiary: #F5F7FA;
--neutral: #6B7280;
--bg-body: #F5F7FA;
--bg-card: #FFFFFF;
--bg-hover: #F0F4F8;
--bg-elevated: #FFFFFF;
--text: #1A1A2E;
--text-muted: #6B7280;
--border: #E5E7EB;
--border-active: #0066CC;
/* 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-thick: 1px;
--danger: #FF453A;
--radius: 4px;
--radius-sm: 2px;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
--shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.15);
--glow-gold: 0 0 6px rgba(212, 175, 55, 0.15);
--danger: #DC2626;
--radius: 8px;
--radius-sm: 6px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
/* PC Dimensioning */
--desktop-header-h: 56px;