/** * Exchange theme — exact admin S7 tokens (theme-light / theme-dark on ). * Mirrors public/backend/css/main.css + custom.css dark contrast overrides. */ /* ─── Shared palette (admin :root) ───────────────────────────────────────── */ .theme-light, .theme-dark { --color-primary: #2196f3; --color-primary-light: #5eb1f5; --color-primary-lighten: #c2e4ff; --color-secondary: #868e96; --color-success: #28c76f; --color-success-light: #33d67c; --color-danger: #ea5455; --color-danger-light: #ed6b6c; --color-warning: #ff9f43; --color-warning-light: #ffac5d; --color-info: #1e9ff2; --color-muted: #74788d; --ex-tab-active: var(--color-primary); /* Original Betfair exchange grid — pastel blue / pink, dark odds text */ --ex-back: #72bbef; --ex-back-hover: #5aacf0; --ex-back-text: #1a1a2e; --ex-lay: #faa9ba; --ex-lay-hover: #f896a8; --ex-lay-text: #1a1a2e; /* Legacy theme hooks used by style.css */ --main-color: var(--color-primary); --main-color2: var(--color-primary-light); } .theme-light { --body-bg: #f1f5f9; --card-bg: #ffffff; --h-color: #334155; --para-color: #64748b; --border-color: #d6d6d6; --ex-surface: #ffffff; --ex-surface-raised: #f8fafc; --ex-surface-head: #f1f5f9; --ex-text: #334155; --ex-text-strong: #334155; --ex-muted: #64748b; --ex-border: #d6d6d6; --ex-row-alt: #f8fafc; --ex-nav-bg: #ffffff; --ex-nav-border: #d6d6d6; --ex-nav-text: #64748b; --ex-nav-icon: #6a7c95; --ex-input-bg: #ffffff; --ex-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } .theme-dark { --body-bg: #18202f; --card-bg: #1e293b; --h-color: #e6edf6; --para-color: #cbd5e1; --border-color: rgba(255, 255, 255, 0.15); --color-muted: #94a3b8; --ex-surface: #1e293b; --ex-surface-raised: #243044; --ex-surface-head: #0f172a; --ex-text: #e6edf6; --ex-text-strong: #e6edf6; --ex-muted: #94a3b8; --ex-border: rgba(255, 255, 255, 0.15); --ex-row-alt: rgba(255, 255, 255, 0.03); --ex-nav-bg: #1e293b; --ex-nav-border: rgba(255, 255, 255, 0.15); --ex-nav-text: #cdd9ec; --ex-nav-icon: #a5b9d5; --ex-input-bg: #0f172a; --ex-shadow: none; } /* Map legacy exchange tokens → theme tokens */ .theme-light, .theme-dark { --ex-market-bg: var(--ex-surface); --ex-market-header: var(--ex-surface-head); --ex-runner-text: var(--ex-text); } html.theme-light, html.theme-dark { scroll-behavior: smooth; } body.exchange-app { background-color: var(--body-bg) !important; color: var(--para-color); overflow-x: hidden; max-width: 100vw; } .exchange-app img { max-width: 100%; height: auto; } /* ─── Nav theming ─────────────────────────────────────────────────────────── */ .exchange-app .navbar-top, .exchange-app .navbar-bottom { background-color: var(--ex-nav-bg) !important; border-bottom: 1px solid var(--ex-nav-border); } .exchange-app .navbar-top a, .exchange-app .navbar-bottom .right-area-inner, .exchange-app .topbar-right a { color: var(--ex-nav-text) !important; } .exchange-app .bg-black-3 { background-color: var(--ex-surface-raised) !important; border-bottom: 1px solid var(--ex-border); } .exchange-app .header-scroll-inner a { color: var(--ex-muted) !important; } .exchange-app .header-scroll-inner a:hover { color: var(--color-primary) !important; } .exchange-app .header-scroll-inner-wrap { max-width: 100%; overflow: hidden; } .exchange-app .header-scroll-inner { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 0.5rem; padding-bottom: 0.25rem; scrollbar-width: thin; } /* ─── Theme toggle — admin .switch (sun/moon icons) ─────────────────────── */ .exchange-app .switch { position: relative; display: inline-block; width: 30px; height: 30px; margin: 0 0.35rem 0 0; vertical-align: middle; } .exchange-app .switch input { opacity: 0; width: 0; height: 0; position: absolute; } .exchange-app .switch .switch-icons { position: absolute; top: -2px; left: 0; width: 30px; height: 30px; cursor: pointer; } .exchange-app .switch .switch-icons i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.125rem; line-height: 1; transition: opacity 0.2s ease, color 0.2s ease; } /* Icon colors → exchange-categories.css (S7 blue + white) */ /* ─── Header links (admin s7__nav text tones) ─────────────── */ .exchange-app .navbar-top a, .exchange-app .navbar-top .topbar-right a, .exchange-app .navbar-bottom .right-area-inner a, .exchange-app .topbar-right a { color: var(--ex-nav-text) !important; } .exchange-app .navbar-top a:hover, .exchange-app .topbar-right a:hover { color: var(--color-primary) !important; } .exchange-app .header-scroll-inner a { color: var(--ex-nav-text) !important; } .exchange-app .header-scroll-inner a:hover { color: var(--color-primary) !important; } .exchange-app .menubar-mobile:hover, .exchange-app .menubar:hover, .exchange-app .sidebar-menu-close:hover { color: var(--color-primary) !important; } .exchange-app .topbar-select-inner { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; border-radius: 5px; } .exchange-app .topbar-select-inner select { color: var(--h-color) !important; background: transparent !important; } .exchange-app .topbar-select-inner select option { background: var(--card-bg); color: var(--h-color); } /* ─── Buttons & links (admin primary / success) ──────────────────────────── */ .exchange-app .btn--success, .exchange-app .btn1.btn--success { background-color: var(--color-success) !important; border-color: var(--color-success) !important; color: #fff !important; } .exchange-app .btn--success:hover, .exchange-app .btn1.btn--success:hover { background-color: var(--color-success-light) !important; border-color: var(--color-success-light) !important; } .exchange-app .btn-outline-light { color: var(--ex-nav-text) !important; border-color: var(--border-color) !important; } .exchange-app .btn-outline-light:hover { background: var(--ex-row-alt) !important; color: var(--color-primary) !important; border-color: var(--color-primary-light) !important; } .exchange-app .text--base, .exchange-app a.text--base { color: var(--color-primary) !important; } .exchange-app .pagination .page-item.active .page-link { background: var(--color-primary) !important; border-color: var(--color-primary) !important; } .exchange-app .ex-tabs .nav-link.active { background: var(--color-primary) !important; } /* Bet slip / modal text — theme-aware (not hard-coded white) */ .theme-light .exchange-app .bet-slip-empty-state, .theme-light .exchange-app .bet-slip-selection .text--white, .theme-light .exchange-app .bet-predict-content .text--white { color: var(--h-color) !important; } .theme-dark .exchange-app .bet-slip-empty-state, .theme-dark .exchange-app .bet-slip-selection .text--white, .theme-dark .exchange-app .bet-predict-content .text--white, .theme-dark .exchange-app .bet-slip-dock .offcanvas-title, .theme-dark .exchange-app .modal-title-cust { color: var(--h-color) !important; } .theme-dark .exchange-app .bet--model .modal-title-cust, .theme-dark .exchange-app .bet--model .modal-footer-cust { background-color: var(--ex-surface-head) !important; } .theme-dark .exchange-app .bet--model .modal-content-cust { background-color: var(--card-bg) !important; } .exchange-app .bet-slip-type-badge--back { background-color: var(--ex-back) !important; color: var(--ex-back-text) !important; } .exchange-app .bet-slip-type-badge--lay { background-color: var(--ex-lay) !important; color: var(--ex-lay-text) !important; } .exchange-app .bet-type-badge--back { background-color: var(--ex-back) !important; color: var(--ex-back-text) !important; } .exchange-app .bet-type-badge--lay { background-color: var(--ex-lay) !important; color: var(--ex-lay-text) !important; } .exchange-app .ex-event__price-header-back { background: var(--ex-back) !important; color: var(--ex-back-text) !important; } .exchange-app .ex-event__price-header-lay { background: var(--ex-lay) !important; color: var(--ex-lay-text) !important; } .exchange-app .ex-market__head-row .ex-market__price-col--back { background: var(--ex-back) !important; color: var(--ex-back-text) !important; justify-content: center; border-radius: 3px; margin: 2px; } .exchange-app .ex-market__head-row .ex-market__price-col--lay { background: var(--ex-lay) !important; color: var(--ex-lay-text) !important; justify-content: center; border-radius: 3px; margin: 2px; } .exchange-app .ex-market__price-col--back { color: var(--ex-back-text); } .exchange-app .ex-market__head-row .ex-market__price-col--back, .exchange-app .ex-market__head-row .ex-market__price-col--lay { font-weight: 600; } .exchange-app .ex-market__price-col--lay { color: var(--ex-lay-text); } .exchange-app .ex-price--back.bet_button, .exchange-app .ex-price--back.odds-option, .exchange-app .ex-price--back { background-color: var(--ex-back) !important; border-color: var(--ex-back) !important; color: var(--ex-back-text) !important; } .exchange-app .ex-price--back.bet_button:hover, .exchange-app .ex-price--back.odds-option:hover, .exchange-app .ex-price--back:hover, .exchange-app .ex-price--back:focus { background-color: var(--ex-back-hover) !important; border-color: var(--ex-back-hover) !important; color: var(--ex-back-text) !important; } .exchange-app .ex-price--lay.bet_button, .exchange-app .ex-price--lay.odds-option, .exchange-app .ex-price--lay:not(.ex-price--unavailable) { background-color: var(--ex-lay) !important; border-color: var(--ex-lay) !important; color: var(--ex-lay-text) !important; } .exchange-app .ex-price--lay.bet_button:hover, .exchange-app .ex-price--lay.odds-option:hover, .exchange-app .ex-price--lay:not(.ex-price--unavailable):hover, .exchange-app .ex-price--lay:not(.ex-price--unavailable):focus { background-color: var(--ex-lay-hover) !important; border-color: var(--ex-lay-hover) !important; color: var(--ex-lay-text) !important; } .exchange-app .ex-price--unavailable { background-color: transparent !important; color: var(--color-muted) !important; } .exchange-app .ex-open-bets__return { color: var(--color-primary) !important; } .exchange-app .ex-event__teams a:hover { color: var(--color-primary) !important; } .exchange-app .ex-inplay-strip__more, .exchange-app .ex-event__more a { color: var(--color-primary) !important; } /* Override color.php dynamic accent inside exchange shell */ .exchange-app .navbar-top ul li a:hover, .exchange-app .navbar-top ul li span, .exchange-app .navbar-top ul li i, .exchange-app .navbar-top ul li svg { color: var(--color-primary) !important; } .ex-header-actions { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; } .exchange-app .ex-open-bets__header { background: var(--ex-surface-head) !important; color: var(--h-color) !important; border-bottom: 1px solid var(--border-color); } .exchange-app .ex-event__price-header-back, .exchange-app .ex-event__price-header-lay { display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 600; padding: 2px 4px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.03em; } .exchange-app .bet-slip-type-badge { font-size: 0.75rem; padding: 0.3em 0.8em; } .exchange-app .bet-type-badge { font-size: 0.7rem; } /* ─── Forms / inputs in exchange areas ───────────────────────────────────── */ .exchange-app .ex-user-filter-card .form-control, .exchange-app .ex-user-filter-card .form-select { background-color: var(--ex-input-bg); border-color: var(--ex-border); color: var(--ex-text); } .exchange-app .ex-tabs .nav-link.active { color: #fff !important; } .theme-light .exchange-app .ex-match-header__title, .theme-light .exchange-app .ex-event__teams a { color: var(--ex-text-strong); } .theme-light .exchange-user-layout .ex-user-page-title, .theme-light .exchange-user-layout .ex-stat-card .media-body h3 { color: var(--ex-text-strong); } .theme-dark .exchange-user-layout .ex-user-page-title, .theme-dark .exchange-user-layout .ex-stat-card .media-body h3 { color: var(--ex-text-strong); } .theme-light .exchange-app .bet-slip-empty-state, .theme-light .exchange-app .text--white { color: var(--ex-text) !important; } /* ─── Light mode: override legacy dark theme (style.css hard-coded #030912 etc.) ─ */ html.theme-light body.exchange-app { background: var(--body-bg) !important; background-color: var(--body-bg) !important; color: var(--para-color) !important; } html.theme-light .exchange-app .bg-black, html.theme-light .exchange-app .bg-black-2, html.theme-light .exchange-app .bg-black-3, html.theme-light .exchange-app .bg-black-4, html.theme-light .exchange-app .bg-black-5, html.theme-light .exchange-app .bg-navy-2 { background: var(--ex-surface) !important; background-color: var(--ex-surface) !important; } html.theme-light .exchange-app .navbar-top, html.theme-light .exchange-app .navbar-bottom { background-color: var(--ex-nav-bg) !important; } html.theme-light .exchange-app .dropdown-widget { background: var(--card-bg) !important; border: 1px solid var(--ex-border); } html.theme-light .exchange-app .dropdown-widget h5, html.theme-light .exchange-app .dropdown-widget ul .list-heading { background: var(--ex-surface-head) !important; color: var(--ex-text-strong) !important; } html.theme-light .exchange-app .dropdown-widget ul li a, html.theme-light .exchange-app .dropdown-widget ul li button { color: var(--ex-text) !important; } html.theme-light .exchange-app .dropdown-widget ul li a:hover { color: var(--color-primary) !important; } html.theme-light .exchange-app .inplay-slider-inner-area, html.theme-light .exchange-app .inplay-slider-inner, html.theme-light .exchange-app .inplay-area { background: var(--ex-surface) !important; border: 1px solid var(--ex-border); } html.theme-light .exchange-app .inplay-area h4, html.theme-light .exchange-app .inplay-area ul li a { color: var(--ex-text) !important; } html.theme-light .exchange-app .inplay-slider a { border-right-color: var(--ex-border) !important; color: var(--ex-text) !important; } html.theme-light .exchange-app .inplay-slider a:hover { background: var(--ex-row-alt) !important; } html.theme-light .exchange-app .inplay-slider .owl-prev, html.theme-light .exchange-app .inplay-slider .owl-next { background: var(--ex-surface-head) !important; color: var(--ex-text) !important; } html.theme-light .exchange-app .footer-area { background: var(--ex-surface-raised) !important; color: var(--para-color) !important; } html.theme-light .exchange-app .footer-area .widget-title, html.theme-light .exchange-app .footer-area a, html.theme-light .exchange-app .footer-area p { color: var(--ex-text) !important; } html.theme-light .exchange-app .bet-slip-dock, html.theme-light .exchange-app .bet--model .modal-content-cust, html.theme-light .exchange-app .offcanvas.bet-slip-dock { background-color: var(--card-bg) !important; color: var(--ex-text) !important; } html.theme-light .exchange-app .bet-slip-dock .offcanvas-header, html.theme-light .exchange-app .modal-title-cust { background: var(--ex-surface-head) !important; border-color: var(--ex-border) !important; color: var(--ex-text-strong) !important; } html.theme-light .exchange-app .main-body-area { background: transparent !important; } html.theme-light .exchange-app .topbar-select-inner select { background: var(--ex-input-bg) !important; color: var(--ex-text) !important; border-color: var(--ex-border) !important; } html.theme-light .exchange-app .ex-mobile-slip-bar { background: var(--card-bg) !important; border-top-color: var(--ex-border) !important; color: var(--ex-text) !important; } html.theme-light .exchange-user-layout .leaderboard-area, html.theme-light .exchange-user-layout .currency-area, html.theme-light .exchange-user-layout .contact-area, html.theme-light .exchange-user-layout .chart-area { background: transparent !important; } html.theme-light .exchange-user-layout .single-currency-inner, html.theme-light .exchange-user-layout .single-schedule-inner { background: var(--card-bg) !important; border: 1px solid var(--ex-border); color: var(--ex-text) !important; } html.theme-light .exchange-user-layout .table { color: var(--ex-text) !important; } html.theme-light .exchange-user-layout .table thead th { background: var(--ex-surface-head) !important; color: var(--ex-muted) !important; border-color: var(--ex-border) !important; } html.theme-light .exchange-user-layout .table tbody td { border-color: var(--ex-border) !important; } /* ─── Dark mode: override legacy purple/navy → admin S7 slate (#18202f / #1e293b) ─ */ html.theme-dark body.exchange-app { background: var(--body-bg) !important; background-color: var(--body-bg) !important; color: var(--para-color) !important; } html.theme-dark .exchange-app :is( .bg-black, .bg-black-2, .bg-black-3, .bg-black-4, .bg-black-5, .single-schedule-inner, .single-currency-inner, .single-payment-wrap, .card-body.leaderboard-table, .sidebar-menu, .inplay-slider-inner-area, .inplay-slider-inner, .inplay-area, .dropdown-widget, .chart-select-inner, .chart-select, .payment-gateway-check, .signup-area .contact-inner, .menubar-mobile, .dashboard-user-menu ul, .features-area-inner, .td-sidebar .widget, .blog-share-area, .blog-comment ) { background: var(--card-bg) !important; background-color: var(--card-bg) !important; } /* Full-page section wrappers — match admin body, not card */ html.theme-dark .exchange-app .bg-navy-2 { background: var(--body-bg) !important; background-color: var(--body-bg) !important; } html.theme-dark .exchange-app :is( .dropdown-widget h5, .dropdown-widget ul .list-heading, .dropdown-widget ul li .referral-inner, .dropdown-widget .nav-tabs li button.active, .inplay-slider .owl-prev, .inplay-slider .owl-next, .inplay-slider a:hover, .bet-slip-dock .offcanvas-header, .modal-title-cust, .modal-footer-cust, .modal-sport .modal-header, .ex-market__head-row, .ex-open-bets__header ) { background: var(--ex-surface-head) !important; background-color: var(--ex-surface-head) !important; } html.theme-dark .exchange-app .bet--model .modal-content-cust { background-color: var(--card-bg) !important; } html.theme-dark .exchange-app .widget_search .search-form input { background: var(--ex-input-bg) !important; color: var(--ex-text) !important; border: 1px solid var(--ex-border) !important; } html.theme-dark .exchange-app .dropdown-widget ul li .referral-inner, html.theme-dark .exchange-app .dropdown-widget .nav-tabs, html.theme-dark .exchange-app .dropdown-widget ul ul { border-color: var(--ex-border) !important; } html.theme-dark .exchange-app .dropdown-widget .nav-tabs li button { color: var(--ex-muted) !important; } html.theme-dark .exchange-app .dropdown-widget .nav-tabs li button.active { color: var(--ex-text-strong) !important; } html.theme-dark .exchange-app .td-sidebar .widget .widget-title, html.theme-dark .exchange-app .blog-share-area ul li { color: var(--ex-text) !important; } html.theme-dark .exchange-app .features-area-inner { border-color: var(--ex-border) !important; } html.theme-dark .exchange-app .navbar-top, html.theme-dark .exchange-app .navbar-bottom { background-color: var(--ex-nav-bg) !important; } html.theme-dark .exchange-app .bg-black-3, html.theme-dark .exchange-app .footer-area { background: var(--ex-surface-raised) !important; background-color: var(--ex-surface-raised) !important; } html.theme-dark .exchange-app .dropdown-widget { border: 1px solid var(--ex-border); } html.theme-dark .exchange-app .dropdown-widget ul li a, html.theme-dark .exchange-app .dropdown-widget ul li button, html.theme-dark .exchange-app .inplay-area h4, html.theme-dark .exchange-app .inplay-area ul li a, html.theme-dark .exchange-app .footer-area .widget-title, html.theme-dark .exchange-app .footer-area a, html.theme-dark .exchange-app .footer-area p, html.theme-dark .exchange-app .sidebar-menu .sidebar-inner a, html.theme-dark .exchange-app .single-sitebar a { color: var(--ex-text) !important; } html.theme-dark .exchange-app .dropdown-widget ul li a:hover, html.theme-dark .exchange-app .inplay-area ul li a:hover { color: var(--color-primary) !important; } html.theme-dark .exchange-app .inplay-slider a { border-right-color: var(--ex-border) !important; color: var(--ex-text) !important; } html.theme-dark .exchange-app .inplay-slider a:hover { background: var(--ex-row-alt) !important; } html.theme-dark .exchange-app .inplay-slider .owl-prev, html.theme-dark .exchange-app .inplay-slider .owl-next { color: var(--ex-text) !important; } html.theme-dark .exchange-app .bet-slip-dock, html.theme-dark .exchange-app .bet--model .modal-content-cust, html.theme-dark .exchange-app .offcanvas.bet-slip-dock { background-color: var(--card-bg) !important; color: var(--ex-text) !important; } html.theme-dark .exchange-app .bet-slip-dock .offcanvas-header, html.theme-dark .exchange-app .modal-title-cust { border-color: var(--ex-border) !important; color: var(--ex-text-strong) !important; } html.theme-dark .exchange-app .main-body-area, html.theme-dark .exchange-user-layout .leaderboard-area, html.theme-dark .exchange-user-layout .currency-area, html.theme-dark .exchange-user-layout .contact-area, html.theme-dark .exchange-user-layout .chart-area { background: transparent !important; } html.theme-dark .exchange-app .topbar-select-inner { background: var(--ex-input-bg) !important; border: 1px solid var(--ex-border); } html.theme-dark .exchange-app .topbar-select-inner select, html.theme-dark .exchange-user-layout .leaderboard-table form .form-control, html.theme-dark .exchange-user-layout .leaderboard-table form .form-select { background: var(--ex-input-bg) !important; color: var(--ex-text) !important; border: 1px solid var(--ex-border) !important; } html.theme-dark .exchange-app .ex-mobile-slip-bar { background: var(--card-bg) !important; border-top-color: var(--ex-border) !important; color: var(--ex-text) !important; } html.theme-dark .exchange-user-layout .single-currency-inner, html.theme-dark .exchange-user-layout .single-schedule-inner, html.theme-dark .exchange-user-layout .ex-stat-card { background: var(--card-bg) !important; border: 1px solid var(--ex-border); color: var(--ex-text) !important; } html.theme-dark .exchange-user-layout .table { color: var(--ex-text) !important; } html.theme-dark .exchange-user-layout .table thead th, html.theme-dark .exchange-app .ex-table thead th { background: var(--ex-surface-head) !important; color: var(--ex-muted) !important; border-color: var(--ex-border) !important; } html.theme-dark .exchange-user-layout .table tbody td, html.theme-dark .exchange-app .ex-table tbody td { border-color: var(--ex-border) !important; background: transparent !important; } html.theme-dark .exchange-user-layout .table tbody tr:nth-child(even), html.theme-dark .exchange-app .ex-table tbody tr:nth-child(even) { background: var(--ex-row-alt) !important; } html.theme-dark .exchange-app .ex-market, html.theme-dark .exchange-app .ex-event, html.theme-dark .exchange-app .ex-open-bets, html.theme-dark .exchange-app .ex-table-wrap, html.theme-dark .exchange-app .ex-user-filter-card { background: var(--card-bg) !important; border-color: var(--ex-border) !important; } html.theme-dark .exchange-app .ex-market__header, html.theme-dark .exchange-app .ex-event__header { background: var(--ex-surface-head) !important; } html.theme-dark .exchange-app .ex-inplay-strip { background: var(--ex-surface-head) !important; border-color: var(--ex-border) !important; } html.theme-dark .exchange-app .preloader { background: var(--body-bg) !important; } html.theme-dark .exchange-app .pagination .page-link { background: var(--card-bg) !important; border-color: var(--ex-border) !important; color: var(--ex-text) !important; } html.theme-dark .exchange-app .pagination .page-item.active .page-link { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; } /* ─── Live / In-Play — dark green badge, dot with solid ring + glow ─────── */ .exchange-app .ex-event__badge-live { display: inline-flex !important; align-items: center !important; background: #166534 !important; color: #fff !important; border: none !important; box-shadow: none !important; } .exchange-app .ex-event__badge-live, .exchange-app .ex-event__badge-live * { color: #fff !important; } .exchange-app .ex-inplay-strip__label { background: #166534 !important; color: #fff !important; text-shadow: none !important; } .exchange-app .ex-live-dot { width: 4px !important; height: 4px !important; background: #4ade80 !important; border: 1px solid #4ade80 !important; box-shadow: 0 0 0 1px #86efac, 0 0 5px #4ade80, 0 0 10px rgba(34, 197, 94, 0.85) !important; animation: ex-live-dot-glow 1.2s ease-in-out infinite !important; } /* Scope legacy style.css accent to admin primary inside exchange */ .exchange-app { --main-color: var(--color-primary); --main-color2: var(--color-primary-light); } .exchange-app h1, .exchange-app h2, .exchange-app h3, .exchange-app h4, .exchange-app h5, .exchange-app h6, .exchange-app .widget-title { color: var(--h-color); } .exchange-app .text-muted { color: var(--color-muted) !important; } .exchange-app .form-control, .exchange-app .form-select { background-color: var(--ex-input-bg); border-color: var(--border-color); color: var(--h-color); } .exchange-app .form-control:focus, .exchange-app .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.15); } .theme-dark .exchange-app .form-control:focus, .theme-dark .exchange-app .form-select:focus { border-color: var(--color-primary-light); box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.2); } .exchange-app .table { color: var(--para-color); } .exchange-app .card, .exchange-app .leaderboard-table { background-color: var(--card-bg); border-color: var(--border-color); } .exchange-app .ex-fancy-group__toggle { background: var(--ex-surface-head); color: var(--h-color); } .exchange-app .sidebar-menu .sidebar-inner a { color: var(--ex-nav-text); } .exchange-app .sidebar-menu .sidebar-inner a:hover { color: var(--color-primary); } /* User sidebar — admin sidebar link/icon tones */ .exchange-app .ex-sidebar .dropdown-widget ul li a { color: var(--ex-nav-text) !important; } .exchange-app .ex-sidebar .dropdown-widget ul li a:hover { color: var(--color-primary) !important; } .exchange-app .ex-sidebar .dropdown-widget .list-heading a { color: var(--h-color) !important; font-weight: 600; } .exchange-app .badge.bg-danger { background-color: var(--color-danger) !important; } .exchange-app .badge.bg-secondary { background-color: var(--color-secondary) !important; } .exchange-app .badge.bg-warning { background-color: var(--color-warning) !important; color: #fff !important; } @keyframes ex-live-dot-glow { 0%, 100% { background: #4ade80; border-color: #4ade80; transform: scale(1); box-shadow: 0 0 0 1px #86efac, 0 0 5px #4ade80, 0 0 10px rgba(34, 197, 94, 0.8); } 50% { background: #86efac; border-color: #86efac; transform: scale(1.1); box-shadow: 0 0 0 1px #bbf7d0, 0 0 8px #4ade80, 0 0 16px #22c55e, 0 0 24px rgba(74, 222, 128, 0.7); } }