diff --git a/apps/player/index.html b/apps/player/index.html index c799e95..fd3a2c4 100644 --- a/apps/player/index.html +++ b/apps/player/index.html @@ -3,13 +3,13 @@ - - + + TheBet365 diff --git a/apps/player/src/components/BetGuideHelp.vue b/apps/player/src/components/BetGuideHelp.vue index cde07d2..4e631bf 100644 --- a/apps/player/src/components/BetGuideHelp.vue +++ b/apps/player/src/components/BetGuideHelp.vue @@ -65,9 +65,9 @@ function close() { width: 30px; height: 30px; border-radius: 50%; - border: 1px solid var(--border-gold-soft); - background: rgba(0, 0, 0, 0.2); - color: var(--primary-light); + border: 1px solid #E5E7EB; + background: #FFFFFF; + color: #003D6B; font-size: 14px; font-weight: 800; line-height: 1; @@ -79,7 +79,7 @@ function close() { position: fixed; inset: 0; z-index: 205; - background: rgba(0, 0, 0, 0.72); + background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; @@ -93,11 +93,11 @@ function close() { max-width: 340px; max-height: 85vh; overflow-y: auto; - background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%); - border: 1px solid var(--border-gold-soft); - border-radius: var(--radius); + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 8px; padding: 16px 14px 14px; - box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .close-x { @@ -107,15 +107,15 @@ function close() { width: 28px; height: 28px; border-radius: 50%; - background: rgba(255, 255, 255, 0.06); - color: var(--text-muted); + background: #F5F7FA; + color: #6B7280; font-size: 14px; } .title { font-size: 16px; font-weight: 800; - color: var(--primary-light); + color: #003D6B; text-align: center; margin-bottom: 12px; padding-right: 24px; @@ -126,14 +126,14 @@ function close() { gap: 10px; margin-bottom: 14px; font-size: 13px; - color: var(--text-muted); + color: #6B7280; line-height: 1.55; } .guide-body :deep(.flow-name) { font-size: 13px; font-weight: 800; - color: var(--primary-light); + color: #003D6B; margin: 0 0 8px; } @@ -152,21 +152,24 @@ function close() { .guide-body :deep(.flow-block) { padding-top: 10px; - border-top: 1px solid var(--border); + border-top: 1px solid #E5E7EB; } .guide-body :deep(.rules-link) { margin: 4px 0 0; font-size: 12px; padding-top: 8px; - border-top: 1px dashed var(--border); + border-top: 1px dashed #E5E7EB; } .btn-ok { width: 100%; padding: 10px; - border-radius: 6px; + border-radius: 8px; font-size: 14px; font-weight: 800; + background: #003D6B; + color: #FFFFFF; + border: none; } diff --git a/apps/player/src/components/BetHistoryCard.vue b/apps/player/src/components/BetHistoryCard.vue index 10ffbea..f56d9bd 100644 --- a/apps/player/src/components/BetHistoryCard.vue +++ b/apps/player/src/components/BetHistoryCard.vue @@ -149,15 +149,19 @@ function goDetail() { align-items: center; gap: 10px; padding: 14px 16px; - border-bottom: 1px solid var(--border); + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 8px; + margin-bottom: 8px; cursor: pointer; - transition: background 0.15s; + transition: background 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .bet-card:active { - background: rgba(255, 255, 255, 0.02); + background: #F5F7FA; } .card-body { @@ -178,9 +182,9 @@ function goDetail() { .cashback-tag { font-size: 10px; font-weight: 700; - color: #f0b90b; - background: rgba(240, 185, 11, 0.1); - border: 1px solid rgba(240, 185, 11, 0.25); + color: #F8971F; + background: rgba(248, 151, 31, 0.08); + border: 1px solid rgba(248, 151, 31, 0.2); border-radius: 4px; padding: 1px 6px; } @@ -188,9 +192,9 @@ function goDetail() { .bet-type-tag { font-size: 10px; font-weight: 700; - color: var(--primary-light, #c8a84e); - background: rgba(200, 168, 78, 0.12); - border: 1px solid rgba(200, 168, 78, 0.25); + color: #003D6B; + background: rgba(0, 61, 107, 0.06); + border: 1px solid rgba(0, 61, 107, 0.15); border-radius: 4px; padding: 1px 6px; letter-spacing: 0.02em; @@ -198,7 +202,7 @@ function goDetail() { .card-date { font-size: 10px; - color: #555; + color: #6B7280; font-weight: 600; flex-shrink: 0; margin-left: auto; @@ -207,7 +211,7 @@ function goDetail() { .title { font-size: 14px; font-weight: 800; - color: #e8e8e8; + color: #1A1A2E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -221,7 +225,7 @@ function goDetail() { .pick-label { font-size: 11px; - color: #888; + color: #6B7280; font-weight: 600; white-space: nowrap; overflow: hidden; @@ -233,8 +237,8 @@ function goDetail() { .odds-badge { font-size: 11px; font-weight: 800; - color: #c8a84e; - background: rgba(200, 168, 78, 0.1); + color: #F8971F; + background: rgba(248, 151, 31, 0.08); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; @@ -250,24 +254,24 @@ function goDetail() { .stake-amt { font-size: 11px; - color: #666; + color: #6B7280; font-weight: 600; } .return-amt { font-size: 15px; font-weight: 900; - color: #888; + color: #6B7280; } -.return-amt.highlight { color: #3db865; } -.return-amt.pending { color: #e8c84a; } -.return-amt.lost { color: #e05050; } +.return-amt.highlight { color: #059669; } +.return-amt.pending { color: #F8971F; } +.return-amt.lost { color: #DC2626; } .chevron { flex-shrink: 0; font-size: 18px; - color: #333; + color: #E5E7EB; margin-left: 2px; line-height: 1; } diff --git a/apps/player/src/components/BetSlipDrawer.vue b/apps/player/src/components/BetSlipDrawer.vue index 13c58c9..1c3b731 100644 --- a/apps/player/src/components/BetSlipDrawer.vue +++ b/apps/player/src/components/BetSlipDrawer.vue @@ -457,7 +457,7 @@ watch( .overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.75); + background: rgba(0, 0, 0, 0.35); z-index: 200; display: flex; align-items: flex-end; @@ -466,13 +466,13 @@ watch( .drawer { width: 100%; max-height: 88vh; - background: #101010; + background: #FFFFFF; border-radius: 16px 16px 0 0; - border-top: 1px solid var(--border-gold-soft); + border-top: 1px solid #E5E7EB; display: flex; flex-direction: column; overflow: hidden; - box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.48); + box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12); } .drawer-head { @@ -484,14 +484,14 @@ watch( align-items: flex-start; gap: 12px; padding: 14px 14px 10px; - background: linear-gradient(180deg, #1d1d1d 0%, #111 100%); - border-bottom: 1px solid rgba(255, 255, 255, 0.06); + background: #FFFFFF; + border-bottom: 1px solid #E5E7EB; } .drawer-kicker { margin: 0 0 3px; font-size: 11px; - color: var(--primary-light); + color: #003D6B; font-weight: 800; } @@ -499,7 +499,7 @@ watch( margin: 0; font-size: 17px; font-weight: 900; - color: var(--text); + color: #1A1A2E; } .close-btn { @@ -509,8 +509,8 @@ watch( width: 32px; height: 32px; border-radius: 50%; - background: rgba(255, 255, 255, 0.05); - color: var(--text-muted); + background: #F5F7FA; + color: #6B7280; font-size: 18px; padding: 0; pointer-events: auto; @@ -523,15 +523,15 @@ watch( align-items: center; gap: 8px; padding: 10px 14px; - background: rgba(212, 175, 55, 0.08); - border-bottom: 1px solid rgba(212, 175, 55, 0.18); - color: var(--text-muted); + background: rgba(0, 61, 107, 0.04); + border-bottom: 1px solid #E5E7EB; + color: #6B7280; font-size: 12px; } .balance-bar strong { justify-self: end; - color: var(--primary-light); + color: #003D6B; font-size: 16px; font-weight: 900; } @@ -540,8 +540,8 @@ watch( width: 28px; height: 28px; border-radius: 50%; - background: rgba(255, 255, 255, 0.04); - color: var(--text-muted); + background: #F5F7FA; + color: #6B7280; padding: 0; } @@ -550,23 +550,23 @@ watch( grid-template-columns: repeat(2, 1fr); padding: 8px 12px 0; gap: 6px; - background: #101010; + background: #FFFFFF; } .slip-tab { min-height: 38px; border-radius: 6px 6px 0 0; - border: 1px solid var(--border); - background: #171717; - color: var(--text-muted); + border: 1px solid #E5E7EB; + background: #F5F7FA; + color: #6B7280; font-size: 13px; font-weight: 800; } .slip-tab.active { - border-color: var(--border-gold-soft); - background: rgba(212, 175, 55, 0.13); - color: var(--primary-light); + border-color: #003D6B; + background: rgba(0, 61, 107, 0.06); + color: #003D6B; } .tab-count { @@ -577,8 +577,8 @@ watch( height: 18px; margin-left: 6px; border-radius: 9px; - background: var(--primary); - color: #111; + background: #003D6B; + color: #FFFFFF; font-size: 11px; font-weight: 900; } @@ -592,7 +592,7 @@ watch( .empty { text-align: center; - color: var(--text-muted); + color: #6B7280; padding: 26px 12px; font-size: 13px; } @@ -603,15 +603,15 @@ watch( gap: 10px; align-items: center; padding: 11px 12px; - background: #151515; - border: 1px solid #292929; - border-radius: 7px; + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 8px; margin-bottom: 8px; } .slip-item--single { - border-color: var(--border-gold-soft); - background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(18, 18, 18, 0.94)); + border-color: #003D6B; + background: rgba(0, 61, 107, 0.03); } .item-main { @@ -621,7 +621,7 @@ watch( .item-title { font-size: 13px; font-weight: 900; - color: var(--text); + color: #1A1A2E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -631,19 +631,19 @@ watch( margin-top: 4px; font-size: 12px; font-weight: 800; - color: var(--primary-light); + color: #003D6B; } .item-pick { margin-top: 3px; font-size: 12px; - color: var(--text-muted); + color: #6B7280; line-height: 1.35; } .item-odds, .item-side strong { - color: var(--primary-light); + color: #003D6B; font-size: 22px; font-weight: 900; } @@ -657,7 +657,7 @@ watch( .remove { background: none; - color: var(--danger); + color: #DC2626; font-size: 12px; font-weight: 800; padding: 0; @@ -672,14 +672,12 @@ watch( min-height: 48px; padding: 0 14px; border-radius: 8px; - background: linear-gradient(180deg, #4b370d 0%, #241905 100%); - border: 1px solid var(--primary-light); - color: #ffe892; + background: #FFFFFF; + border: 1px solid #003D6B; + color: #003D6B; font-size: 14px; font-weight: 900; - box-shadow: - 0 0 0 1px rgba(255, 232, 146, 0.18) inset, - 0 6px 18px rgba(212, 175, 55, 0.18); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .btn-add-parlay span { @@ -689,8 +687,8 @@ watch( width: 18px; height: 18px; border-radius: 50%; - background: var(--primary-light); - color: #191100; + background: #003D6B; + color: #FFFFFF; font-size: 14px; line-height: 1; } @@ -700,16 +698,16 @@ watch( margin: 0 0 10px; padding: 10px 11px; border-radius: 6px; - background: rgba(255, 77, 79, 0.12); - border: 1px solid rgba(255, 77, 79, 0.25); - color: #ff8b8b; + background: rgba(220, 38, 38, 0.06); + border: 1px solid rgba(220, 38, 38, 0.18); + color: #DC2626; font-size: 12px; line-height: 1.45; } .parlay-meta { margin: 8px 2px 10px; - color: var(--primary-light); + color: #003D6B; font-size: 12px; font-weight: 800; } @@ -717,8 +715,8 @@ watch( .stake-area { margin: 12px 0 12px; padding: 12px; - background: #151515; - border: 1px solid #292929; + background: #FFFFFF; + border: 1px solid #E5E7EB; border-radius: 8px; } @@ -729,12 +727,12 @@ watch( justify-content: space-between; gap: 8px; font-size: 12px; - color: var(--text-muted); + color: #6B7280; } .stake-head strong, .return strong { - color: var(--primary-light); + color: #003D6B; font-size: 16px; font-weight: 900; } @@ -744,17 +742,17 @@ watch( grid-template-columns: auto 1fr auto; align-items: center; margin-top: 10px; - border: 1px solid var(--border-gold-soft); + border: 1px solid #E5E7EB; border-radius: 6px; overflow: hidden; - background: #0c0c0c; + background: #F5F7FA; } .currency { padding: 0 10px; - color: var(--text-muted); + color: #6B7280; font-size: 13px; - border-right: 1px solid #2d2d2d; + border-right: 1px solid #E5E7EB; } .stake-input-row input { @@ -762,7 +760,7 @@ watch( height: 42px; border: none; background: transparent; - color: var(--text); + color: #1A1A2E; font-size: 17px; font-weight: 800; padding: 0 10px; @@ -781,7 +779,7 @@ watch( width: 38px; height: 42px; background: transparent; - color: var(--text-muted); + color: #6B7280; padding: 0; font-size: 15px; } @@ -804,10 +802,10 @@ watch( .number-key, .quick-stakes button { min-height: 52px; - border-radius: 5px; - background: #f4f1f6; - color: #221f26; - border: 1px solid rgba(255, 255, 255, 0.16); + border-radius: 6px; + background: #F5F7FA; + color: #1A1A2E; + border: 1px solid #E5E7EB; font-size: 26px; font-weight: 500; } @@ -819,10 +817,11 @@ watch( .quick-stakes button { min-height: 50px; - background: #7b787d; - color: var(--text); + background: #FFFFFF; + color: #1A1A2E; font-size: 20px; font-weight: 800; + border: 1px solid #E5E7EB; } .return { @@ -830,7 +829,7 @@ watch( } .success { - color: var(--primary-light); + color: #059669; font-size: 13px; margin: 0 0 8px; } @@ -841,9 +840,9 @@ watch( grid-template-columns: 1fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); - background: rgba(14, 14, 14, 0.98); - border-top: 1px solid var(--border-gold-soft); - box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45); + background: #FFFFFF; + border-top: 1px solid #E5E7EB; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); } .drawer-foot--split { @@ -853,9 +852,9 @@ watch( .btn-primary { width: 100%; min-height: 48px; - border-radius: 7px; - background: linear-gradient(180deg, var(--primary-light), var(--primary)); - color: #111; + border-radius: 8px; + background: #003D6B; + color: #FFFFFF; font-size: 16px; font-weight: 900; } diff --git a/apps/player/src/components/BetStatsPanel.vue b/apps/player/src/components/BetStatsPanel.vue index 1c8d733..9ec47e1 100644 --- a/apps/player/src/components/BetStatsPanel.vue +++ b/apps/player/src/components/BetStatsPanel.vue @@ -79,12 +79,12 @@ const stats = computed(() => { diff --git a/apps/player/src/components/BetSuccessOverlay.vue b/apps/player/src/components/BetSuccessOverlay.vue index 8c82f30..bee9922 100644 --- a/apps/player/src/components/BetSuccessOverlay.vue +++ b/apps/player/src/components/BetSuccessOverlay.vue @@ -16,7 +16,7 @@ interface Particle { color: string; shape: number; } -const COLORS = ['#D4AF37', '#FFD700', '#F0C040', '#C8A02E', '#E6C84C', '#B8960C']; +const COLORS = ['#003D6B', '#005B9F', '#0066CC', '#3388DD', '#1A5FA0', '#4499E0']; let w = 0; let h = 0; @@ -111,8 +111,8 @@ onUnmounted(stop);
- - + +

{{ t('bet.place_success') }}

@@ -125,7 +125,7 @@ onUnmounted(stop); position: fixed; inset: 0; z-index: 300; - background: rgba(0, 0, 0, 0.82); + background: rgba(245, 247, 250, 0.88); display: flex; align-items: center; justify-content: center; @@ -166,7 +166,7 @@ onUnmounted(stop); } .success-text { - color: var(--primary-light); + color: #003D6B; font-size: 18px; font-weight: 800; letter-spacing: 0.04em; diff --git a/apps/player/src/components/CashBalanceChip.vue b/apps/player/src/components/CashBalanceChip.vue index d104b25..916d31e 100644 --- a/apps/player/src/components/CashBalanceChip.vue +++ b/apps/player/src/components/CashBalanceChip.vue @@ -115,10 +115,11 @@ onUnmounted(() => { padding: 0 8px 0 8px; min-width: 0; cursor: pointer; - border: 1px solid var(--border); + border: 1px solid #E5E7EB; border-radius: 6px; - background: #141414; + background: #FFFFFF; box-sizing: border-box; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .chip-body { @@ -130,7 +131,7 @@ onUnmounted(() => { .chip-label { font-size: 8px; - color: var(--text-muted); + color: #6B7280; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; @@ -143,14 +144,14 @@ onUnmounted(() => { .chip-amount { font-size: 11px; font-weight: 800; - color: var(--primary-light); + color: #003D6B; white-space: nowrap; line-height: 1.15; } .chevron { font-size: 10px; - color: var(--primary-light); + color: #003D6B; transition: transform 0.2s; margin-left: 0; } @@ -166,10 +167,10 @@ onUnmounted(() => { width: min(260px, 78vw); padding: 12px 14px; z-index: 130; - border: 1px solid var(--border); - border-radius: var(--radius-sm); - background: #141414; - box-shadow: var(--shadow); + border: 1px solid #E5E7EB; + border-radius: 8px; + background: #FFFFFF; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .cash-panel::before { @@ -183,21 +184,22 @@ onUnmounted(() => { font-size: 13px; font-weight: 600; padding: 6px 0; + color: #1A1A2E; } .panel-row.muted { - color: var(--text-muted); + color: #6B7280; } .panel-row.highlight { - color: var(--primary-light); + color: #003D6B; font-weight: 800; font-size: 14px; } .panel-divider { height: 1px; - background: linear-gradient(90deg, transparent, var(--border-gold-soft), transparent); + background: #E5E7EB; margin: 4px 0; } @@ -206,9 +208,9 @@ onUnmounted(() => { padding: 8px 0; margin-top: 4px; border-radius: 6px; - border: 1px solid var(--primary, #c8a84e); - background: rgba(200, 168, 78, 0.12); - color: var(--primary-light, #c8a84e); + border: 1px solid #003D6B; + background: transparent; + color: #003D6B; font-size: 13px; font-weight: 700; cursor: pointer; @@ -216,7 +218,7 @@ onUnmounted(() => { } .panel-recharge-btn:active { - background: rgba(200, 168, 78, 0.24); + background: rgba(0, 61, 107, 0.06); } .backdrop { diff --git a/apps/player/src/components/CustomerServiceModal.vue b/apps/player/src/components/CustomerServiceModal.vue index fb1886d..30114d6 100644 --- a/apps/player/src/components/CustomerServiceModal.vue +++ b/apps/player/src/components/CustomerServiceModal.vue @@ -77,7 +77,7 @@ function close() { align-items: center; justify-content: center; padding: 16px; - background: rgba(0, 0, 0, 0.72); + background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @@ -87,11 +87,11 @@ function close() { flex-direction: column; width: min(100%, 420px); height: min(82vh, 680px); - background: #141414; - border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.25)); + background: #FFFFFF; + border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .cs-header { @@ -101,21 +101,21 @@ function close() { justify-content: space-between; gap: 12px; padding: 14px 16px; - border-bottom: 1px solid var(--border, #2a2a2a); - background: rgba(26, 26, 26, 0.98); + border-bottom: 1px solid #E5E7EB; + background: #FFFFFF; } .cs-title { margin: 0; font-size: 16px; font-weight: 800; - color: var(--primary-light, #c8a84e); + color: #003D6B; } .close-btn { background: none; border: none; - color: #666; + color: #6B7280; font-size: 18px; cursor: pointer; padding: 4px; @@ -123,13 +123,13 @@ function close() { } .close-btn:hover { - color: #aaa; + color: #1A1A2E; } .cs-body { flex: 1; min-height: 0; - background: #0d0d0d; + background: #F5F7FA; } .cs-frame { @@ -150,7 +150,7 @@ function close() { text-align: center; font-size: 14px; line-height: 1.6; - color: #888; + color: #6B7280; } .fade-enter-active, diff --git a/apps/player/src/components/GoldSpinner.vue b/apps/player/src/components/GoldSpinner.vue index cf6186e..87799ed 100644 --- a/apps/player/src/components/GoldSpinner.vue +++ b/apps/player/src/components/GoldSpinner.vue @@ -19,7 +19,7 @@ const wrapperStyle = computed(() => { + \ No newline at end of file diff --git a/apps/player/src/components/LeagueAccordionItem.vue b/apps/player/src/components/LeagueAccordionItem.vue index 4089f8e..3d77080 100644 --- a/apps/player/src/components/LeagueAccordionItem.vue +++ b/apps/player/src/components/LeagueAccordionItem.vue @@ -86,11 +86,12 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope .league-block { position: relative; isolation: isolate; - margin-bottom: 12px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: var(--bg-card); + margin-bottom: 10px; + border: 1px solid #CBD5E1; + border-radius: 8px; + background: #FFFFFF; overflow: hidden; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .league-row { @@ -112,8 +113,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope content: ''; position: absolute; inset: 0; - background: v-bind(matchCardBg) center / 100% 100% no-repeat; - opacity: 0.25; + background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%); z-index: -1; pointer-events: none; } @@ -127,17 +127,17 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope width: 26px; height: 26px; border-radius: 50%; - background: #141414; - border: 1px solid var(--border-gold-soft); + background: #003D6B; + border: none; display: flex; align-items: center; justify-content: center; } .toggle-mark { - color: var(--primary-light); + color: #FFFFFF; font-size: 17px; - font-weight: 900; + font-weight: 700; line-height: 1; margin-top: -1px; } @@ -152,8 +152,8 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope .league-title { font-size: 13px; - font-weight: 800; - color: #fff; + font-weight: 700; + color: #1A1A2E; line-height: 1.35; min-width: 0; } @@ -163,16 +163,16 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope align-items: center; gap: 6px; font-size: 11px; - color: #ccc; + color: #6B7280; line-height: 1.2; } .stat-live { - color: #3db865; + color: #059669; } .stat-open { - color: #c8a84e; + color: #D97706; } .league-saishi { @@ -183,11 +183,13 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope object-fit: contain; margin-left: 4px; padding-left: 10px; - border-left: 1px solid #2a2a2a; + border-left: 1px solid #CBD5E1; } .match-panel { - padding: 10px 0 4px; + padding: 8px 0 4px; + background: #F0F2F6; + border-top: 1px solid #D1D5DB; } .match-grid { diff --git a/apps/player/src/components/LocaleFlag.vue b/apps/player/src/components/LocaleFlag.vue index fd3ee81..cbe8cac 100644 --- a/apps/player/src/components/LocaleFlag.vue +++ b/apps/player/src/components/LocaleFlag.vue @@ -27,6 +27,6 @@ const src = computed(() => `/flags/${countryCode.value}.svg`); flex-shrink: 0; border-radius: 2px; object-fit: cover; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } diff --git a/apps/player/src/components/LocaleSwitcher.vue b/apps/player/src/components/LocaleSwitcher.vue index 341338d..ca97273 100644 --- a/apps/player/src/components/LocaleSwitcher.vue +++ b/apps/player/src/components/LocaleSwitcher.vue @@ -79,16 +79,17 @@ onUnmounted(() => { width: 36px; height: 36px; padding: 0; - border: 1px solid var(--border); + border: 1px solid #E5E7EB; border-radius: 6px; - background: #0d0d0d; - color: var(--primary-light); + background: #FFFFFF; + color: #003D6B; font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer; box-sizing: border-box; flex-shrink: 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .locale-switch.compact .locale-trigger { @@ -105,10 +106,10 @@ onUnmounted(() => { margin: 0; padding: 4px; list-style: none; - background: #141414; - border: 1px solid var(--border-gold-soft); + background: #FFFFFF; + border: 1px solid #E5E7EB; border-radius: 8px; - box-shadow: var(--shadow); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .locale-option { @@ -117,7 +118,7 @@ onUnmounted(() => { gap: 8px; padding: 8px 10px; border-radius: 6px; - color: var(--text-muted); + color: #6B7280; font-size: 12px; font-weight: 600; cursor: pointer; @@ -126,7 +127,7 @@ onUnmounted(() => { .locale-option:hover, .locale-option.active { - background: rgba(212, 175, 55, 0.1); - color: var(--primary-light); + background: rgba(0, 61, 107, 0.06); + color: #003D6B; } diff --git a/apps/player/src/components/LoginPromptModal.vue b/apps/player/src/components/LoginPromptModal.vue index e669142..96940cf 100644 --- a/apps/player/src/components/LoginPromptModal.vue +++ b/apps/player/src/components/LoginPromptModal.vue @@ -55,7 +55,7 @@ function continueBrowsing() { display: flex; align-items: center; justify-content: center; - background: rgba(0, 0, 0, 0.7); + background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @@ -64,10 +64,11 @@ function continueBrowsing() { position: relative; width: 90%; max-width: 360px; - background: #1a1a1a; - border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.25)); + background: #FFFFFF; + border: 1px solid #E5E7EB; border-radius: 12px; padding: 28px 24px 24px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } .close-btn { @@ -76,7 +77,7 @@ function continueBrowsing() { right: 14px; background: none; border: none; - color: #666; + color: #6B7280; font-size: 18px; cursor: pointer; padding: 4px; @@ -84,20 +85,20 @@ function continueBrowsing() { } .close-btn:hover { - color: #aaa; + color: #1A1A2E; } .login-title { font-size: 18px; font-weight: 800; - color: var(--primary-light, #c8a84e); + color: #003D6B; margin: 0 0 6px; text-align: center; } .login-hint { font-size: 12px; - color: #888; + color: #6B7280; text-align: center; margin: 0 0 24px; } @@ -112,8 +113,8 @@ function continueBrowsing() { padding: 12px; border-radius: 8px; border: none; - background: linear-gradient(135deg, #d4a017, #e8c84a); - color: #1a1a1a; + background: #003D6B; + color: #FFFFFF; font-size: 15px; font-weight: 800; cursor: pointer; @@ -128,9 +129,9 @@ function continueBrowsing() { .login-secondary { padding: 10px; border-radius: 8px; - border: 1px solid #333; + border: 1px solid #E5E7EB; background: transparent; - color: #888; + color: #6B7280; font-size: 14px; font-weight: 600; cursor: pointer; @@ -139,8 +140,8 @@ function continueBrowsing() { } .login-secondary:active { - color: #aaa; - border-color: #444; + color: #1A1A2E; + border-color: #003D6B; } .fade-enter-active, diff --git a/apps/player/src/components/MatchBetCard.vue b/apps/player/src/components/MatchBetCard.vue index b8628b5..fa0e648 100644 --- a/apps/player/src/components/MatchBetCard.vue +++ b/apps/player/src/components/MatchBetCard.vue @@ -130,30 +130,32 @@ const liveScoreText = computed(() => { diff --git a/apps/player/src/components/PhoneCountrySelect.vue b/apps/player/src/components/PhoneCountrySelect.vue index 4a7412e..54b60b9 100644 --- a/apps/player/src/components/PhoneCountrySelect.vue +++ b/apps/player/src/components/PhoneCountrySelect.vue @@ -129,19 +129,20 @@ onUnmounted(() => { gap: 3px; height: 36px; padding: 0 8px; - border: 1px solid var(--border); + border: 1px solid #E5E7EB; border-radius: 6px; - background: #0d0d0d; - color: var(--text); + background: #FFFFFF; + color: #1A1A2E; font-family: inherit; font-size: 12px; line-height: 1; cursor: pointer; white-space: nowrap; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .country-trigger:active { - background: var(--bg-hover); + background: #F5F7FA; } .country-iso { @@ -150,12 +151,12 @@ onUnmounted(() => { } .country-sep { - color: var(--text-muted); + color: #6B7280; font-size: 10px; } .country-dial { - color: var(--text-muted); + color: #6B7280; font-weight: 600; } @@ -166,31 +167,31 @@ onUnmounted(() => { z-index: 60; width: min(260px, calc(100vw - 48px)); padding: 4px; - background: #141414; - border: 1px solid var(--border); - border-radius: 6px; - box-shadow: var(--shadow); + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .country-search { width: 100%; margin-bottom: 4px; padding: 6px 8px; - border: 1px solid var(--border); + border: 1px solid #E5E7EB; border-radius: 4px; - background: #0d0d0d; - color: var(--text); + background: #F5F7FA; + color: #1A1A2E; font-size: 12px; font-family: inherit; } .country-search::placeholder { - color: rgba(255, 255, 255, 0.35); + color: #6B7280; } .country-search:focus { outline: none; - border-color: #555; + border-color: #003D6B; } .country-menu { @@ -213,20 +214,20 @@ onUnmounted(() => { .country-option:hover, .country-option.active { - background: var(--bg-hover); + background: #F5F7FA; } .country-option .country-iso { flex-shrink: 0; width: 26px; font-weight: 700; - color: var(--text); + color: #1A1A2E; } .country-option .country-dial { flex-shrink: 0; width: 38px; - color: var(--text-muted); + color: #6B7280; } .country-name { @@ -234,17 +235,17 @@ onUnmounted(() => { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: var(--text-muted); + color: #6B7280; } .country-option:hover .country-name, .country-option.active .country-name { - color: var(--text); + color: #1A1A2E; } .country-empty { padding: 10px 8px; - color: var(--text-muted); + color: #6B7280; font-size: 11px; text-align: center; } diff --git a/apps/player/src/components/PlayerAvatarModal.vue b/apps/player/src/components/PlayerAvatarModal.vue index 6dd6887..5b56e44 100644 --- a/apps/player/src/components/PlayerAvatarModal.vue +++ b/apps/player/src/components/PlayerAvatarModal.vue @@ -55,7 +55,7 @@ function confirm() { position: fixed; inset: 0; z-index: 210; - background: rgba(0, 0, 0, 0.72); + background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; @@ -69,11 +69,11 @@ function confirm() { max-width: 360px; max-height: 85vh; overflow-y: auto; - background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%); - border: 1px solid var(--border-gold-soft); - border-radius: var(--radius); + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 12px; padding: 16px 14px 14px; - box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } .close-x { @@ -83,9 +83,9 @@ function confirm() { width: 28px; height: 28px; border-radius: 50%; - border: 1px solid var(--border); - background: rgba(0, 0, 0, 0.35); - color: var(--text-muted); + border: 1px solid #E5E7EB; + background: #F5F7FA; + color: #6B7280; font-size: 12px; line-height: 1; padding: 0; @@ -95,7 +95,7 @@ function confirm() { margin: 0 28px 12px 0; font-size: 15px; font-weight: 800; - color: var(--primary-light); + color: #003D6B; } .actions { @@ -114,12 +114,14 @@ function confirm() { } .btn-cancel { - border: 1px solid var(--border); - background: #0a0a0a; - color: var(--text-muted); + border: 1px solid #E5E7EB; + background: #FFFFFF; + color: #6B7280; } .btn-confirm { border: none; + background: #003D6B; + color: #FFFFFF; } diff --git a/apps/player/src/components/PlayerAvatarPicker.vue b/apps/player/src/components/PlayerAvatarPicker.vue index 80e2f5e..67bf893 100644 --- a/apps/player/src/components/PlayerAvatarPicker.vue +++ b/apps/player/src/components/PlayerAvatarPicker.vue @@ -78,7 +78,7 @@ function select(key: string) { .picker-label { display: block; font-size: 11px; - color: var(--text-muted); + color: #6B7280; font-weight: 600; margin-bottom: 6px; } @@ -87,15 +87,15 @@ function select(key: string) { width: 100%; padding: 8px 10px; border-radius: 6px; - border: 1px solid var(--border); - background: #0a0a0a; - color: var(--text); + border: 1px solid #E5E7EB; + background: #F5F7FA; + color: #1A1A2E; font-size: 13px; } .picker-search:focus { outline: none; - border-color: var(--border-gold-soft); + border-color: #003D6B; } .picker-grid { @@ -114,16 +114,16 @@ function select(key: string) { gap: 4px; padding: 8px 4px 6px; border-radius: 8px; - border: 1px solid var(--border); - background: #0a0a0a; + border: 1px solid #E5E7EB; + background: #FFFFFF; cursor: pointer; min-width: 0; } .picker-item.active { - border-color: var(--border-gold-soft); - box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18); - background: rgba(212, 175, 55, 0.08); + border-color: #003D6B; + box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.18); + background: rgba(0, 61, 107, 0.04); } .picker-photo { @@ -132,14 +132,14 @@ function select(key: string) { border-radius: 50%; object-fit: cover; object-position: top; - border: 1px solid rgba(255, 255, 255, 0.08); + border: 1px solid #E5E7EB; } .picker-name { width: 100%; font-size: 10px; font-weight: 700; - color: var(--text); + color: #1A1A2E; text-align: center; line-height: 1.2; overflow: hidden; @@ -150,7 +150,7 @@ function select(key: string) { .picker-meta { width: 100%; font-size: 9px; - color: var(--text-muted); + color: #6B7280; text-align: center; line-height: 1.2; overflow: hidden; @@ -161,7 +161,7 @@ function select(key: string) { .picker-empty { margin: 8px 0 0; font-size: 12px; - color: var(--text-muted); + color: #6B7280; text-align: center; } diff --git a/apps/player/src/components/RobotVerify.vue b/apps/player/src/components/RobotVerify.vue index a1df64a..c30e3ea 100644 --- a/apps/player/src/components/RobotVerify.vue +++ b/apps/player/src/components/RobotVerify.vue @@ -139,14 +139,14 @@ defineExpose({ validate, refresh }); display: flex; align-items: stretch; height: 36px; - border: 1px solid var(--border); - border-radius: 6px; - background: #0d0d0d; + border: 1px solid #E5E7EB; + border-radius: 8px; + background: #FFFFFF; overflow: hidden; } .captcha-row:focus-within { - border-color: #555; + border-color: #003D6B; } .hp-field { @@ -164,7 +164,7 @@ defineExpose({ validate, refresh }); padding: 0 10px; border: none; background: transparent; - color: var(--text); + color: #1A1A2E; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; @@ -174,7 +174,7 @@ defineExpose({ validate, refresh }); } .captcha-input::placeholder { - color: rgba(255, 255, 255, 0.32); + color: #6B7280; font-weight: 600; letter-spacing: 0.02em; text-transform: none; @@ -187,11 +187,11 @@ defineExpose({ validate, refresh }); cursor: pointer; display: block; border: none; - border-left: 1px solid var(--border); + border-left: 1px solid #E5E7EB; } .captcha-error { - color: var(--danger); + color: #DC2626; font-size: 12px; font-weight: 600; margin: 4px 0 0; diff --git a/apps/player/src/components/StatusWatermark.vue b/apps/player/src/components/StatusWatermark.vue index 4d3a771..b0dcd98 100644 --- a/apps/player/src/components/StatusWatermark.vue +++ b/apps/player/src/components/StatusWatermark.vue @@ -23,7 +23,7 @@ withDefaults( letter-spacing: 0.06em; white-space: nowrap; pointer-events: none; - opacity: 0.2; + opacity: 0.15; max-width: 92%; overflow: hidden; text-overflow: ellipsis; @@ -43,26 +43,26 @@ withDefaults( } .status-watermark.won { - color: #3db865; + color: #059669; } .status-watermark.lost { - color: #e05050; + color: #DC2626; } .status-watermark.push { - color: #888; + color: #6B7280; } .status-watermark.pending { - color: #e8c84a; + color: #F8971F; } .status-watermark.closed { - color: #c9a84a; + color: #005B9F; } .status-watermark.settled { - color: #7a9ab8; + color: #0066CC; } diff --git a/apps/player/src/components/TeamEmblem.vue b/apps/player/src/components/TeamEmblem.vue index 06d5b70..937a7b3 100644 --- a/apps/player/src/components/TeamEmblem.vue +++ b/apps/player/src/components/TeamEmblem.vue @@ -62,7 +62,7 @@ watch( /* 队徽（非国旗）：圆角 + 投影 */ .team-emblem--logo { border-radius: 4px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .team-emblem--sm { diff --git a/apps/player/src/components/UserAvatarMenu.vue b/apps/player/src/components/UserAvatarMenu.vue index 8a2aee4..c4db867 100644 --- a/apps/player/src/components/UserAvatarMenu.vue +++ b/apps/player/src/components/UserAvatarMenu.vue @@ -85,8 +85,8 @@ function logout() { height: 36px; box-sizing: border-box; border-radius: 50%; - border: 1px solid var(--border-gold-soft); - background: linear-gradient(145deg, #2a2210, #141008); + border: 2px solid #003D6B; + background: linear-gradient(145deg, #003D6B, #005B9F); display: flex; align-items: center; justify-content: center; @@ -106,7 +106,7 @@ function logout() { .avatar-letter { font-size: 13px; font-weight: 800; - color: var(--primary-light); + color: #FFFFFF; } .avatar-menu { @@ -115,10 +115,10 @@ function logout() { right: 0; min-width: 168px; padding: 8px 0; - border: 1px solid var(--border); - border-radius: var(--radius-sm); - background: #141414; - box-shadow: var(--shadow); + border: 1px solid #E5E7EB; + border-radius: 8px; + background: #FFFFFF; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 140; } @@ -126,8 +126,8 @@ function logout() { padding: 8px 14px 10px; font-size: 13px; font-weight: 800; - color: var(--primary-light); - border-bottom: 1px solid var(--border); + color: #003D6B; + border-bottom: 1px solid #E5E7EB; margin-bottom: 4px; } @@ -136,22 +136,22 @@ function logout() { text-align: left; padding: 10px 14px; background: none; - color: var(--text); + color: #1A1A2E; font-size: 14px; font-weight: 600; } .menu-item:hover { - background: rgba(255, 255, 255, 0.04); + background: #F5F7FA; } .menu-item.recharge { - color: var(--primary-light); + color: #003D6B; font-weight: 700; } .menu-item.danger { - color: var(--danger); + color: #DC2626; } .backdrop { diff --git a/apps/player/src/components/WalletStatsPanel.vue b/apps/player/src/components/WalletStatsPanel.vue index 6a0fd39..8554bfe 100644 --- a/apps/player/src/components/WalletStatsPanel.vue +++ b/apps/player/src/components/WalletStatsPanel.vue @@ -76,11 +76,12 @@ const stats = computed(() => { diff --git a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue index 5c72d38..a9ae071 100644 --- a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue +++ b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue @@ -96,18 +96,18 @@ function formatOdds(odds: string) { .overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.75); + background: rgba(0, 0, 0, 0.4); z-index: 210; display: flex; align-items: flex-end; } .drawer { - background: linear-gradient(180deg, #222 0%, #141414 100%); + background: #FFFFFF; width: 100%; max-height: 80vh; border-radius: 16px 16px 0 0; - border-top: 1px solid var(--border); + border-top: 1px solid #E5E7EB; display: flex; flex-direction: column; overflow: hidden; @@ -123,9 +123,9 @@ function formatOdds(odds: string) { .drawer-foot { flex-shrink: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); - background: rgba(14, 14, 14, 0.98); - border-top: 1px solid var(--border-gold-soft); - box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45); + background: #F5F7FA; + border-top: 1px solid #E5E7EB; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); } .drawer-header { @@ -134,48 +134,50 @@ function formatOdds(odds: string) { align-items: center; padding: 14px 14px 12px; flex-shrink: 0; - background: rgba(14, 14, 14, 0.98); - border-bottom: 1px solid #2a2a2a; + background: #FFFFFF; + border-bottom: 1px solid #E5E7EB; z-index: 2; } .drawer-header h3 { font-size: 16px; font-weight: 800; + color: #1A1A2E; } .count { - color: var(--primary-light); + color: #003D6B; } .close-btn { background: none; - color: var(--text-muted); + color: #6B7280; font-size: 20px; padding: 4px; } .slip-item { padding: 10px 12px; - background: #111; - border: 1px solid var(--border); - border-radius: 6px; + background: #F5F7FA; + border: 1px solid #E5E7EB; + border-radius: 8px; margin-bottom: 8px; } .item-name { font-size: 13px; font-weight: 800; + color: #1A1A2E; } .item-sel { font-size: 12px; - color: var(--text-muted); + color: #6B7280; margin-top: 4px; } .odds { - color: var(--primary-light); + color: #F8971F; font-weight: 800; } @@ -188,24 +190,24 @@ function formatOdds(odds: string) { justify-content: space-between; align-items: center; font-size: 13px; - color: var(--text-muted); + color: #6B7280; font-weight: 600; margin-bottom: 8px; } .summary-row strong { - color: var(--primary-light); + color: #003D6B; font-size: 15px; font-weight: 800; } .return { font-size: 13px; - color: var(--text-muted); + color: #6B7280; } .return strong { - color: var(--primary-light); + color: #003D6B; font-size: 18px; font-weight: 800; } diff --git a/apps/player/src/components/match-detail/CorrectScorePanel.vue b/apps/player/src/components/match-detail/CorrectScorePanel.vue index 5e38d01..9b47bb5 100644 --- a/apps/player/src/components/match-detail/CorrectScorePanel.vue +++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue @@ -75,6 +75,8 @@ function formatOdds(odds: string) { diff --git a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue index 0572e0a..be697bf 100644 --- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue +++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue @@ -57,7 +57,8 @@ function onPick(id: string) { diff --git a/apps/player/src/components/match-detail/MarketTypeTile.vue b/apps/player/src/components/match-detail/MarketTypeTile.vue index 1eb38ba..e93ce0e 100644 --- a/apps/player/src/components/match-detail/MarketTypeTile.vue +++ b/apps/player/src/components/match-detail/MarketTypeTile.vue @@ -44,11 +44,11 @@ const { t } = useI18n(); } .row:not(.disabled):active { - background: rgba(255, 255, 255, 0.025); + background: rgba(0, 61, 107, 0.07); } .row.expanded { - background: rgba(255, 255, 255, 0.03); + background: rgba(0, 61, 107, 0.07); } .row.expanded::before { @@ -57,9 +57,9 @@ const { t } = useI18n(); top: 0; left: 12px; right: 12px; - height: 2px; - background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary-light) 50%, var(--primary) 70%, transparent 100%); - opacity: 0.6; + height: 2.5px; + background: #003D6B; + opacity: 1; } .row.disabled { @@ -71,7 +71,7 @@ const { t } = useI18n(); min-width: 0; font-size: 13px; font-weight: 700; - color: var(--text); + color: #1A1A2E; letter-spacing: 0.02em; } @@ -79,32 +79,32 @@ const { t } = useI18n(); flex-shrink: 0; font-size: 9px; font-weight: 700; - color: #ffb800; + color: #F8971F; padding: 2px 6px; border-radius: 3px; - background: rgba(255, 184, 0, 0.12); - border: 1px solid rgba(255, 184, 0, 0.35); + background: rgba(248, 151, 31, 0.1); + border: 1px solid rgba(248, 151, 31, 0.3); } .row.expanded .row-label { - color: var(--primary-light); + color: #003D6B; } .row-muted { font-size: 10px; - color: var(--text-muted); + color: #6B7280; font-weight: 600; } .row-chevron { font-size: 11px; - color: var(--text-muted); + color: #6B7280; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s; flex-shrink: 0; } .row-chevron.open { transform: rotate(90deg); - color: var(--primary-light); + color: #003D6B; } diff --git a/apps/player/src/components/outright/OutrightBetModal.vue b/apps/player/src/components/outright/OutrightBetModal.vue index 8015e8e..d90955e 100644 --- a/apps/player/src/components/outright/OutrightBetModal.vue +++ b/apps/player/src/components/outright/OutrightBetModal.vue @@ -221,7 +221,7 @@ function formatOdds(odds: string) { position: fixed; inset: 0; z-index: 200; - background: rgba(0, 0, 0, 0.72); + background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; @@ -233,12 +233,12 @@ function formatOdds(odds: string) { position: relative; width: 100%; max-width: 300px; - background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%); - border: 1px solid var(--border-gold-soft); - border-radius: var(--radius); + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 8px; padding: 18px 16px 16px; text-align: center; - box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .close-x { @@ -248,8 +248,8 @@ function formatOdds(odds: string) { width: 28px; height: 28px; border-radius: 50%; - background: rgba(255, 255, 255, 0.06); - color: var(--text-muted); + background: #F5F7FA; + color: #6B7280; font-size: 14px; line-height: 1; } @@ -257,7 +257,7 @@ function formatOdds(odds: string) { .hint { font-size: 12px; font-weight: 600; - color: var(--text-muted); + color: #6B7280; margin-bottom: 12px; letter-spacing: 0.04em; } @@ -280,22 +280,22 @@ function formatOdds(odds: string) { height: 32px; object-fit: cover; border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .team { font-size: 20px; font-weight: 900; - color: var(--primary-light); + color: #1A1A2E; letter-spacing: 0.02em; } .odds-badge { display: inline-block; padding: 3px 10px; - background: rgba(198, 40, 40, 0.85); - border: 1px solid rgba(255, 120, 120, 0.35); - color: #fff; + background: #F8971F; + border: 1px solid rgba(248, 151, 31, 0.3); + color: #FFFFFF; font-size: 13px; font-weight: 800; border-radius: 4px; @@ -303,7 +303,7 @@ function formatOdds(odds: string) { .event-title { font-size: 11px; - color: var(--text-muted); + color: #6B7280; margin-bottom: 12px; line-height: 1.4; padding: 0 4px; @@ -315,28 +315,28 @@ function formatOdds(odds: string) { align-items: center; padding: 8px 10px; margin-bottom: 12px; - background: rgba(0, 0, 0, 0.35); - border: 1px solid var(--border); - border-radius: 6px; + background: #F5F7FA; + border: 1px solid #E5E7EB; + border-radius: 8px; } .balance-label { font-size: 12px; - color: var(--text-muted); + color: #6B7280; font-weight: 600; } .balance-value { font-size: 14px; font-weight: 800; - color: var(--primary-light); + color: #003D6B; } .stake-label { display: block; text-align: left; font-size: 11px; - color: var(--text-muted); + color: #6B7280; font-weight: 600; margin-bottom: 6px; } @@ -345,10 +345,10 @@ function formatOdds(odds: string) { width: 100%; padding: 11px 12px; margin-bottom: 8px; - border-radius: 6px; - border: 1px solid var(--border); - background: #0a0a0a; - color: var(--text); + border-radius: 8px; + border: 1px solid #E5E7EB; + background: #F5F7FA; + color: #1A1A2E; font-size: 18px; font-weight: 800; text-align: center; @@ -356,12 +356,12 @@ function formatOdds(odds: string) { } .stake-input:focus { - border-color: var(--border-gold-soft); - box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15); + border-color: #003D6B; + box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.15); } .stake-input::placeholder { - color: #555; + color: #6B7280; font-weight: 500; font-size: 14px; } @@ -375,33 +375,34 @@ function formatOdds(odds: string) { .chip { flex: 1; padding: 6px 4px; - border-radius: 6px; - border: 1px solid var(--border); - background: #141414; - color: var(--text-muted); + border-radius: 8px; + border: 1px solid #E5E7EB; + background: #FFFFFF; + color: #6B7280; font-size: 11px; font-weight: 700; + transition: border-color 0.15s ease, background 0.15s ease; } .chip:active { - border-color: var(--border-gold-soft); - color: var(--primary-light); - background: rgba(212, 175, 55, 0.08); + border-color: #003D6B; + color: #003D6B; + background: rgba(0, 61, 107, 0.06); } .est-return { font-size: 12px; - color: var(--text-muted); + color: #6B7280; margin-bottom: 12px; } .est-value { - color: var(--primary-light); + color: #003D6B; font-weight: 800; } .error { - color: var(--danger); + color: #DC2626; font-size: 12px; font-weight: 600; margin-bottom: 10px; @@ -415,19 +416,22 @@ function formatOdds(odds: string) { .btn-cancel { padding: 10px; - border-radius: 6px; - background: #1a1a1a; - border: 1px solid var(--border); - color: var(--text-muted); + border-radius: 8px; + background: #FFFFFF; + border: 1px solid #E5E7EB; + color: #6B7280; font-size: 14px; font-weight: 700; } .btn-confirm { padding: 10px; - border-radius: 6px; + border-radius: 8px; font-size: 14px; font-weight: 800; + background: #003D6B; + color: #FFFFFF; + border: none; } .btn-confirm:disabled { @@ -439,9 +443,9 @@ function formatOdds(odds: string) { height: 44px; margin: 0 auto 8px; border-radius: 50%; - border: 2px solid rgba(46, 158, 94, 0.8); - background: rgba(46, 158, 94, 0.12); - color: #4ade80; + border: 2px solid #059669; + background: rgba(5, 150, 105, 0.1); + color: #059669; font-size: 24px; font-weight: 900; line-height: 40px; @@ -450,37 +454,40 @@ function formatOdds(odds: string) { .success-title { font-size: 16px; font-weight: 800; - color: var(--primary-light); + color: #1A1A2E; margin-bottom: 10px; } .summary { margin: 12px 0 14px; padding: 10px; - background: rgba(0, 0, 0, 0.35); - border: 1px solid var(--border); - border-radius: 6px; + background: #F5F7FA; + border: 1px solid #E5E7EB; + border-radius: 8px; } .summary-row { display: flex; justify-content: space-between; font-size: 13px; - color: var(--text-muted); + color: #6B7280; padding: 4px 0; } .summary-row + .summary-row { margin-top: 4px; padding-top: 8px; - border-top: 1px solid var(--border); + border-top: 1px solid #E5E7EB; } .btn-done { width: 100%; padding: 11px; - border-radius: 6px; + border-radius: 8px; font-size: 14px; font-weight: 800; + background: #003D6B; + color: #FFFFFF; + border: none; } diff --git a/apps/player/src/components/outright/OutrightEventSection.vue b/apps/player/src/components/outright/OutrightEventSection.vue index 4cefdcc..42e42cc 100644 --- a/apps/player/src/components/outright/OutrightEventSection.vue +++ b/apps/player/src/components/outright/OutrightEventSection.vue @@ -86,10 +86,11 @@ const headMeta = computed(() => { position: relative; isolation: isolate; margin-bottom: 12px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: var(--bg-card); + border: 1px solid #E5E7EB; + border-radius: 8px; + background: #FFFFFF; overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .event-head { @@ -112,7 +113,7 @@ const headMeta = computed(() => { position: absolute; inset: 0; background: v-bind(matchCardBg) center / 100% 100% no-repeat; - opacity: 0.25; + opacity: 0.08; z-index: -1; pointer-events: none; } @@ -122,8 +123,8 @@ const headMeta = computed(() => { width: 26px; height: 26px; border-radius: 50%; - background: #141414; - border: 1px solid var(--border-gold-soft); + background: #F5F7FA; + border: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: center; @@ -131,11 +132,11 @@ const headMeta = computed(() => { } .toggle-icon.open { - border-color: var(--primary-light); + border-color: #003D6B; } .toggle-mark { - color: var(--primary-light); + color: #003D6B; font-size: 17px; font-weight: 900; line-height: 1; @@ -152,21 +153,21 @@ const headMeta = computed(() => { .event-title { font-size: 13px; font-weight: 800; - color: var(--primary-light); + color: #003D6B; line-height: 1.35; } .event-league { font-size: 11px; font-weight: 600; - color: #888; + color: #6B7280; line-height: 1.3; } .event-meta { font-size: 11px; font-weight: 600; - color: #666; + color: #6B7280; } .event-saishi { @@ -176,7 +177,7 @@ const headMeta = computed(() => { max-width: 40px; object-fit: contain; padding-left: 8px; - border-left: 1px solid #2a2a2a; + border-left: 1px solid #E5E7EB; } .options-scroll { @@ -185,7 +186,7 @@ const headMeta = computed(() => { -webkit-overflow-scrolling: touch; padding: 8px 2px 2px; scrollbar-width: thin; - scrollbar-color: #333 transparent; + scrollbar-color: #E5E7EB transparent; } .options-grid { diff --git a/apps/player/src/components/outright/OutrightOptionCard.vue b/apps/player/src/components/outright/OutrightOptionCard.vue index 587b3d8..1b12c62 100644 --- a/apps/player/src/components/outright/OutrightOptionCard.vue +++ b/apps/player/src/components/outright/OutrightOptionCard.vue @@ -76,27 +76,21 @@ onUnmounted(() => { width: 100%; min-width: 0; padding: 8px 4px 6px; - border-radius: 6px; - background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); - border: 1px solid rgba(140, 140, 140, 0.35); + border-radius: 8px; + background: #FFFFFF; + border: 1px solid #E5E7EB; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; overflow: hidden; -} - -.option-card::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%); - pointer-events: none; + transition: border-color 0.15s ease, box-shadow 0.15s ease; } .option-card:active { - border-color: var(--border-gold-soft); + border-color: #003D6B; + box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.12); } .flag { @@ -119,7 +113,7 @@ onUnmounted(() => { .name { font-size: 11px; font-weight: 800; - color: var(--primary-light); + color: #1A1A2E; line-height: 1.2; width: 100%; overflow: hidden; @@ -130,6 +124,6 @@ onUnmounted(() => { .odds { font-size: 11px; font-weight: 800; - color: var(--primary-light); + color: #F8971F; } diff --git a/apps/player/src/components/outright/OutrightPanel.vue b/apps/player/src/components/outright/OutrightPanel.vue index de4ccd7..4c779b8 100644 --- a/apps/player/src/components/outright/OutrightPanel.vue +++ b/apps/player/src/components/outright/OutrightPanel.vue @@ -178,7 +178,7 @@ function closeModal() { padding: 0 4px; font-size: 12px; font-weight: 600; - color: var(--text-muted); + color: #6B7280; line-height: 1.4; } @@ -189,7 +189,7 @@ function closeModal() { .state, .empty { text-align: center; - color: var(--text-muted); + color: #6B7280; padding: 48px 20px; font-weight: 600; } diff --git a/apps/player/src/layouts/MainLayout.vue b/apps/player/src/layouts/MainLayout.vue index ce93df2..e2e80c7 100644 --- a/apps/player/src/layouts/MainLayout.vue +++ b/apps/player/src/layouts/MainLayout.vue @@ -106,7 +106,11 @@ watch(