/* ============================================================ ShotPropz v2 – Dark Mode Activated via: Built from actual shotpropz.com HTML inspection ============================================================ */ /* ── Palette ── bg-deep: #0b1120 (header, footer) bg-base: #0f172a (page background) bg-surface: #1e293b (panels, inputs, dropdowns) border: #334155 text: #e2e8f0 text-muted: #94a3b8 accent: #818cf8 / #6366f1 ───────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────── 1. BODY & WRAPPERS ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] body, [data-spz-theme="dark"] .fusion-body { background-color: #0f172a !important; color: #e2e8f0 !important; } [data-spz-theme="dark"] #wrapper, [data-spz-theme="dark"] .fusion-wrapper, [data-spz-theme="dark"] #boxed-wrapper { background-color: #0f172a !important; } /* ──────────────────────────────────────────────────────────── 2. SECONDARY HEADER (.fusion-secondary-header) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .fusion-secondary-header { background-color: #070d1a !important; border-color: #1e293b !important; } [data-spz-theme="dark"] .fusion-secondary-header a, [data-spz-theme="dark"] .fusion-social-links-header a { color: #94a3b8 !important; } [data-spz-theme="dark"] .fusion-social-links-header a:hover { color: #818cf8 !important; } /* Social icon fonts (Avada uses ::before pseudo-elements) */ [data-spz-theme="dark"] .fusion-social-networks a { color: #94a3b8 !important; } [data-spz-theme="dark"] .fusion-social-networks a:hover { color: #818cf8 !important; } /* ──────────────────────────────────────────────────────────── 3. MAIN HEADER (.fusion-header-v3) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .fusion-header-wrapper { background-color: #0b1120 !important; } [data-spz-theme="dark"] .fusion-header, [data-spz-theme="dark"] .fusion-header .fusion-row { background-color: #0b1120 !important; } [data-spz-theme="dark"] .fusion-header-sticky-height { background-color: #0b1120 !important; } /* Sticky state */ [data-spz-theme="dark"] .fusion-is-sticky .fusion-header, [data-spz-theme="dark"] .fusion-header-wrapper.fusion-is-sticky { background-color: #0b1120 !important; } /* Logo — your logo (sticky-menu.png) is already light-on-transparent, so no filter needed. If you ever switch to a dark logo, uncomment: [data-spz-theme="dark"] .fusion-logo img { filter: brightness(0) invert(1); } */ /* ──────────────────────────────────────────────────────────── 4. MAIN NAV — TOP-LEVEL (.fusion-main-menu) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .fusion-main-menu > ul > li > a, [data-spz-theme="dark"] .fusion-main-menu > ul > li > a .menu-text { color: #e2e8f0 !important; } [data-spz-theme="dark"] .fusion-main-menu > ul > li > a:hover, [data-spz-theme="dark"] .fusion-main-menu > ul > li.current-menu-item > a, [data-spz-theme="dark"] .fusion-main-menu > ul > li.current-menu-ancestor > a, [data-spz-theme="dark"] .fusion-main-menu > ul > li.current-page-ancestor > a { color: #818cf8 !important; } /* Highlight bar */ [data-spz-theme="dark"] .fusion-main-menu > ul > li > a.fusion-bar-highlight::after { background-color: #818cf8 !important; } /* Search icon */ [data-spz-theme="dark"] .fusion-main-menu-search .fusion-main-menu-icon { color: #e2e8f0 !important; } /* ──────────────────────────────────────────────────────────── 5. MAIN NAV — DROPDOWN SUB-MENUS ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .fusion-main-menu .sub-menu, [data-spz-theme="dark"] .fusion-main-menu ul ul { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; } /* Sub-menu items */ [data-spz-theme="dark"] .fusion-main-menu .sub-menu li a, [data-spz-theme="dark"] .fusion-main-menu .sub-menu li a span, [data-spz-theme="dark"] .fusion-main-menu .fusion-dropdown-submenu a { color: #cbd5e1 !important; background-color: transparent !important; } [data-spz-theme="dark"] .fusion-main-menu .sub-menu li a:hover, [data-spz-theme="dark"] .fusion-main-menu .sub-menu li.current-menu-item > a, [data-spz-theme="dark"] .fusion-main-menu .sub-menu li.current_page_item > a { color: #818cf8 !important; background-color: #0f172a !important; } /* Separator lines between items */ [data-spz-theme="dark"] .fusion-main-menu .sub-menu li { border-color: #334155 !important; } /* Nested sub-menus */ [data-spz-theme="dark"] .fusion-main-menu .sub-menu .sub-menu { background-color: #162032 !important; } /* ──────────────────────────────────────────────────────────── 6. SEARCH OVERLAY (.fusion-overlay-search) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .fusion-overlay-search { background-color: rgba(11, 17, 32, .95) !important; } [data-spz-theme="dark"] .fusion-overlay-search .fusion-search-form-content input.s { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-spz-theme="dark"] .fusion-overlay-search .fusion-search-form-content input.s::placeholder { color: #64748b !important; } [data-spz-theme="dark"] .fusion-search-submit { color: #e2e8f0 !important; } [data-spz-theme="dark"] .fusion-close-search::before, [data-spz-theme="dark"] .fusion-close-search::after { background-color: #e2e8f0 !important; } /* Mobile search */ [data-spz-theme="dark"] .fusion-mobile-menu-search input.s { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } /* ──────────────────────────────────────────────────────────── 7. MOBILE NAV (.fusion-mobile-nav-holder) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .fusion-mobile-nav-holder, [data-spz-theme="dark"] .fusion-mobile-nav-holder ul, [data-spz-theme="dark"] .fusion-mobile-nav-holder .fusion-menu { background-color: #1e293b !important; } /* "Go to..." selector button */ [data-spz-theme="dark"] .fusion-mobile-selector { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-spz-theme="dark"] .fusion-mobile-selector span { color: #e2e8f0 !important; } [data-spz-theme="dark"] .fusion-selector-down { border-color: #94a3b8 transparent transparent transparent !important; } /* Menu items */ [data-spz-theme="dark"] .fusion-mobile-nav-holder a, [data-spz-theme="dark"] .fusion-mobile-nav-holder .fusion-bar-highlight { color: #cbd5e1 !important; border-color: #334155 !important; } [data-spz-theme="dark"] .fusion-mobile-nav-holder a:hover, [data-spz-theme="dark"] .fusion-mobile-nav-holder li.current-menu-item > a { color: #818cf8 !important; background-color: #0f172a !important; } /* Submenu expand/collapse button */ [data-spz-theme="dark"] .fusion-open-submenu { background-color: transparent !important; border-color: #334155 !important; color: #94a3b8 !important; } [data-spz-theme="dark"] .fusion-open-submenu::after { border-color: #94a3b8 !important; } /* Sub-menu items */ [data-spz-theme="dark"] .fusion-mobile-nav-holder .sub-menu { background-color: #162032 !important; } [data-spz-theme="dark"] .fusion-mobile-nav-holder .sub-menu li { border-color: #334155 !important; } [data-spz-theme="dark"] .fusion-mobile-nav-holder .sub-menu a { color: #94a3b8 !important; } [data-spz-theme="dark"] .fusion-mobile-nav-holder .sub-menu a:hover { color: #818cf8 !important; background-color: #0f172a !important; } /* Mobile menu item separators */ [data-spz-theme="dark"] .fusion-mobile-nav-item { border-color: #334155 !important; } /* ──────────────────────────────────────────────────────────── 8. AWB MENU ELEMENT (cheatsheet-menu in content area) Uses CSS custom properties via inline style. ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .awb-menu.cheatsheet-menu, [data-spz-theme="dark"] nav.awb-menu { --awb-bg: #0b1120 !important; --awb-color: #e2e8f0 !important; --awb-active-color: #818cf8 !important; --awb-active-bg: #1e293b !important; --awb-submenu-color: #cbd5e1 !important; --awb-submenu-bg: #1e293b !important; --awb-submenu-active-bg: #0f172a !important; } /* Fallback for browsers that don't cascade !important on custom props */ [data-spz-theme="dark"] .awb-menu__main-a, [data-spz-theme="dark"] .awb-menu__main-a .menu-text { color: #e2e8f0 !important; } [data-spz-theme="dark"] .awb-menu__main-li:hover > .awb-menu__main-a { color: #818cf8 !important; } [data-spz-theme="dark"] .awb-menu__sub-ul { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; } [data-spz-theme="dark"] .awb-menu__sub-a { color: #cbd5e1 !important; } [data-spz-theme="dark"] .awb-menu__sub-a:hover, [data-spz-theme="dark"] .awb-menu__sub-li:hover > .awb-menu__sub-a { color: #818cf8 !important; background-color: #0f172a !important; } [data-spz-theme="dark"] .awb-menu__sub-li { border-color: #334155 !important; } /* Mobile expand button */ [data-spz-theme="dark"] .awb-menu__open-nav-submenu_mobile { color: #94a3b8 !important; border-color: #334155 !important; } /* AWB menu background overlays (active/default state spans) */ [data-spz-theme="dark"] .awb-menu__main-background-default, [data-spz-theme="dark"] .awb-menu__main-background-active { background-color: transparent !important; } [data-spz-theme="dark"] .awb-menu__main-li:hover > .awb-menu__main-background-default, [data-spz-theme="dark"] .awb-menu__main-li:hover > .awb-menu__main-background-active { background-color: #1e293b !important; } [data-spz-theme="dark"] .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-background-active, [data-spz-theme="dark"] .awb-menu__main-li.current-menu-item > .awb-menu__main-background-active, [data-spz-theme="dark"] .awb-menu__main-li.current-page-ancestor > .awb-menu__main-background-active { background-color: #1e293b !important; } /* Current menu ancestor top-level link */ [data-spz-theme="dark"] .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a, [data-spz-theme="dark"] .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a .menu-text { color: #818cf8 !important; } /* Current page in sub-menu */ [data-spz-theme="dark"] .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a, [data-spz-theme="dark"] .awb-menu__sub-li.current_page_item > .awb-menu__sub-a { color: #818cf8 !important; background-color: #0f172a !important; } /* ──────────────────────────────────────────────────────────── 9. FUSION BUILDER CONTAINERS & CONTENT ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] #main, [data-spz-theme="dark"] #content, [data-spz-theme="dark"] .post-content { background-color: transparent !important; } [data-spz-theme="dark"] .fusion-fullwidth, [data-spz-theme="dark"] .fullwidth-box { background-color: transparent !important; } [data-spz-theme="dark"] .fusion-column-wrapper { color: #e2e8f0 !important; } /* Alert banner */ [data-spz-theme="dark"] .sp-alert { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-spz-theme="dark"] .sp-alert a { color: #818cf8 !important; } /* Cheat sheet table header (Avada text element) */ [data-spz-theme="dark"] .cheatsheet-table-header { --awb-text-color: #f1f5f9 !important; } /* Generic Fusion text */ [data-spz-theme="dark"] .fusion-text { color: #e2e8f0 !important; } /* Headings */ [data-spz-theme="dark"] #main h1, [data-spz-theme="dark"] #main h2, [data-spz-theme="dark"] #main h3, [data-spz-theme="dark"] #main h4, [data-spz-theme="dark"] #main h5 { color: #f1f5f9 !important; } /* Paragraphs */ [data-spz-theme="dark"] #main p, [data-spz-theme="dark"] #main li { color: #cbd5e1 !important; } /* Links */ [data-spz-theme="dark"] #main a:not(.awb-menu__main-a):not(.awb-menu__sub-a) { color: #818cf8 !important; } [data-spz-theme="dark"] #main a:not(.awb-menu__main-a):not(.awb-menu__sub-a):hover { color: #a5b4fc !important; } /* ──────────────────────────────────────────────────────────── 10. FOOTER (#footer, .fusion-footer-copyright-area) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .fusion-footer, [data-spz-theme="dark"] .fusion-footer-copyright-area, [data-spz-theme="dark"] #footer { background-color: #0b1120 !important; color: #94a3b8 !important; } [data-spz-theme="dark"] .fusion-footer a, [data-spz-theme="dark"] .fusion-copyright-notice { color: #94a3b8 !important; } [data-spz-theme="dark"] .fusion-footer .fusion-social-networks a { color: #94a3b8 !important; } [data-spz-theme="dark"] .fusion-footer .fusion-social-networks a:hover { color: #818cf8 !important; } /* Back to top */ [data-spz-theme="dark"] .to-top-container #toTop { background-color: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } [data-spz-theme="dark"] .to-top-container #toTop:hover { color: #e2e8f0 !important; } /* Separator lines */ [data-spz-theme="dark"] hr, [data-spz-theme="dark"] .fusion-separator { border-color: #1e293b !important; } /* ──────────────────────────────────────────────────────────── 11. GENERIC INPUTS & SELECTS ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] input[type="text"], [data-spz-theme="dark"] input[type="email"], [data-spz-theme="dark"] input[type="password"], [data-spz-theme="dark"] input[type="search"], [data-spz-theme="dark"] textarea, [data-spz-theme="dark"] select { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } /* ──────────────────────────────────────────────────────────── 12. SPZ-V2 BASE TABLE OVERRIDES (.cheat-sheet-table) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .cheat-sheet-table thead th { background: #1e293b !important; color: #94a3b8 !important; } [data-spz-theme="dark"] .cheat-sheet-table tbody td { border-bottom-color: #1e293b !important; color: #e2e8f0 !important; } [data-spz-theme="dark"] .cheat-sheet-table span { color: inherit; } /* ──────────────────────────────────────────────────────────── 13. SPZ-V2 FILTERS ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .spz-v2 { color: #e2e8f0; } [data-spz-theme="dark"] .spz-filters.neutral select { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-spz-theme="dark"] .spz-filters.neutral select:hover { border-color: #475569 !important; } [data-spz-theme="dark"] .spz-filters.neutral label { color: #94a3b8 !important; } /* ──────────────────────────────────────────────────────────── 13. GAMELOG DARK TOKENS (--gl-* design variables) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .spz-gamelog { --gl-bg: #0f172a; --gl-bg-alt: #1e293b; --gl-border: #334155; --gl-text: #e2e8f0; --gl-text-muted: #94a3b8; --gl-header-bg: #0b1120; --gl-header-text: #f1f5f9; --gl-th-bg: #1e293b; --gl-th-text: #94a3b8; --gl-hover: #2a3a52; --gl-selected-bg: #1e1b4b; --gl-selected-border: #6366f1; --gl-avg-bg: #1e293b; --gl-total-bg: #0f172a; } /* Table cell borders */ [data-spz-theme="dark"] .spz-gamelog table { border-color: #334155; } [data-spz-theme="dark"] .spz-gamelog th, [data-spz-theme="dark"] .spz-gamelog td { border-color: #1e293b; color: #e2e8f0; } /* Selected stat header — override hardcoded #e0e7ff */ [data-spz-theme="dark"] .spz-gamelog .spz-gamelog-table thead th.stat-col.is-selected-stat { background: #312e81 !important; color: #c7d2fe !important; } /* Selected stat in avg/total rows — override hardcoded #e0e7ff */ [data-spz-theme="dark"] .spz-gamelog .spz-gamelog-table tr.spz-l10-avg-row td.stat-col.is-selected-stat, [data-spz-theme="dark"] .spz-gamelog .spz-gamelog-table tr.spz-l10-total-row td.stat-col.is-selected-stat { background: #312e81 !important; color: #c7d2fe !important; } /* Line slider and line display */ [data-spz-theme="dark"] .spz-gamelog .spz-line-display { color: #e2e8f0; } [data-spz-theme="dark"] .spz-line-label { color: #94a3b8 !important; } /* Opponent table — force dark rows (must target td to override spz-matchup.css) */ [data-spz-theme="dark"] .spz-gamelog .spz-opponent-table tbody tr:nth-child(odd) td, [data-spz-theme="dark"] .spz-gamelog .spz-matchup-table.spz-opponent-table tbody tr:nth-child(odd) td:not(.metric) { background: #0f172a !important; border-bottom-color: #334155 !important; } [data-spz-theme="dark"] .spz-gamelog .spz-opponent-table tbody tr:nth-child(even) td, [data-spz-theme="dark"] .spz-gamelog .spz-matchup-table.spz-opponent-table tbody tr:nth-child(even) td:not(.metric) { background: #1e293b !important; border-bottom-color: #334155 !important; } [data-spz-theme="dark"] .spz-gamelog .spz-opponent-table tbody td { color: #e2e8f0 !important; } [data-spz-theme="dark"] .spz-gamelog .spz-matchup-table.spz-opponent-table tbody tr:hover td:not(.metric) { background: #2a3a52 !important; } /* Hit table — force dark rows on td (not tr) to avoid gaps */ [data-spz-theme="dark"] .spz-gamelog .spz-hit-table tbody tr:nth-child(odd) td { background: #0f172a !important; } [data-spz-theme="dark"] .spz-gamelog .spz-hit-table tbody tr:nth-child(even) td { background: #1e293b !important; } [data-spz-theme="dark"] .spz-gamelog .spz-hit-table tbody td { border-bottom-color: #334155 !important; } /* Pill border in dark mode */ [data-spz-theme="dark"] .spz-gamelog .rk.pill { border-color: rgba(255,255,255,.15) !important; } /* Avg row — accent border top to separate from game rows */ [data-spz-theme="dark"] .spz-gamelog .spz-gamelog-table tr.spz-l10-avg-row td { background: #1a1e3a !important; border-top-color: #6366f1 !important; } [data-spz-theme="dark"] .spz-gamelog .spz-gamelog-table tr.spz-l10-total-row td { background: #111827 !important; } /* Slider track — dark */ [data-spz-theme="dark"] .spz-gamelog .spz-line-label input[type="range"] { background: transparent; } [data-spz-theme="dark"] .spz-gamelog .spz-line-label input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: #334155; border-radius: 3px; border: none; } [data-spz-theme="dark"] .spz-gamelog .spz-line-label input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #818cf8; cursor: pointer; border: none; margin-top: -5px; } [data-spz-theme="dark"] .spz-gamelog .spz-line-label input[type="range"]::-moz-range-track { height: 6px; background: #334155; border-radius: 3px; border: none; } [data-spz-theme="dark"] .spz-gamelog .spz-line-label input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #818cf8; cursor: pointer; border: none; } [data-spz-theme="dark"] .spz-gamelog .spz-line-ticks span { background: #475569; } /* Opponent badge heat — soften slightly */ [data-spz-theme="dark"] .spz-gamelog .opp-badge { opacity: .9; } /* Capture buttons */ [data-spz-theme="dark"] .spz-capture-page, [data-spz-theme="dark"] .spz-capture-section { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } [data-spz-theme="dark"] .spz-capture-page:hover, [data-spz-theme="dark"] .spz-capture-section:hover { color: #e2e8f0 !important; border-color: #475569 !important; } /* Share footer & toast */ [data-spz-theme="dark"] .spz-share-footer, [data-spz-theme="dark"] .spz-share-footer--temp { background: #0b1120; color: #94a3b8; } [data-spz-theme="dark"] .spz-share-toast { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; } /* Empty state */ [data-spz-theme="dark"] .spz-gamelog-empty { color: #94a3b8 !important; } /* Loading spinner dark variant */ [data-spz-theme="dark"] .spz-gamelog.spz-loading::after { border-color: rgba(129, 140, 248, 0.2); border-top-color: #818cf8; } /* ──────────────────────────────────────────────────────────── 14. MATCHUP TABLE ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .spz-matchup-table { color: #e2e8f0; } [data-spz-theme="dark"] .spz-matchup-table td, [data-spz-theme="dark"] .spz-matchup-table th { border-color: #334155 !important; } /* Override hardcoded white backgrounds on matchup table td (spz-matchup.css lines 60-63) */ [data-spz-theme="dark"] .spz-matchup-table tbody tr:nth-child(odd) td:not(.metric) { background: #0f172a !important; border-bottom-color: #334155 !important; } [data-spz-theme="dark"] .spz-matchup-table tbody tr:nth-child(even) td:not(.metric) { background: #1e293b !important; border-bottom-color: #334155 !important; } [data-spz-theme="dark"] .spz-matchup-table tbody tr:hover td:not(.metric) { background: #2a3a52 !important; } [data-spz-theme="dark"] .spz-matchup-mobile-head .m-center { background: #0b1120 !important; } /* ──────────────────────────────────────────────────────────── 15. HIGHLIGHTED / CLICKED ROWS (from page CSS) ──────────────────────────────────────────────────────────── */ [data-spz-theme="dark"] .highlighted-row, [data-spz-theme="dark"] .clicked-row { background-color: #2a3a52 !important; } /* ──────────────────────────────────────────────────────────── 16. TEAM TABLES — DARK MODE Match gamelog visual language: headers, rows, borders, fonts ──────────────────────────────────────────────────────────── */ /* --- Section header: match gamelog header style --- */ [data-spz-theme="dark"] .spz-table .spz-table-header, [data-spz-theme="dark"] .cheatsheet-table-header, [data-spz-theme="dark"] .cheat-sheet-title, [data-spz-theme="dark"] .cheat-sheat-title { background: #0b1120 !important; color: #f1f5f9 !important; } [data-spz-theme="dark"] .spz-table .spz-table-header h3 { color: #f1f5f9 !important; } /* --- Column headers (thead): match gamelog th style --- */ [data-spz-theme="dark"] .cheat-sheet-table thead th { background: #1e293b !important; color: #94a3b8 !important; border-bottom: 1px solid #334155 !important; } /* --- Alternating row backgrounds (zebra stripe like gamelog) --- */ [data-spz-theme="dark"] .cheat-sheet-table tbody tr:nth-child(odd) { background: #0f172a !important; } [data-spz-theme="dark"] .cheat-sheet-table tbody tr:nth-child(even) { background: #1e293b !important; } /* --- Soften row border separators --- */ [data-spz-theme="dark"] .cheat-sheet-table tbody td { border-bottom-color: #1e293b !important; } /* --- Value cells: keep dark text for readability on heat-map backgrounds --- Heat.js paints light (white-based) background colors inline, so white text is unreadable. Force dark text on .value cells. */ [data-spz-theme="dark"] .cheat-sheet-table td.value { color: #1f2937 !important; } /* --- Non-value cells: light text for dark backgrounds --- */ [data-spz-theme="dark"] .cheat-sheet-table td.col-rk, [data-spz-theme="dark"] .cheat-sheet-table td.col-gp { color: #e2e8f0 !important; } [data-spz-theme="dark"] .cheat-sheet-table td.team-cell { color: #e2e8f0 !important; } /* --- Updated bar --- */ [data-spz-theme="dark"] .spz-updated { background-color: #0b1120 !important; color: #64748b !important; } /* --- Filters on team pages: match gamelog font --- */ [data-spz-theme="dark"] .spz-v2 .spz-filters.neutral, [data-spz-theme="dark"] .spz-v2 .spz-filters.neutral label, [data-spz-theme="dark"] .spz-v2 .spz-filters.neutral select { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } [data-spz-theme="dark"] .spz-v2 .spz-filters.neutral label { font-weight: 500 !important; font-size: 13px !important; color: #94a3b8 !important; } [data-spz-theme="dark"] .spz-v2 .spz-filters.neutral select { font-size: 13px !important; height: 32px !important; background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; border-radius: 6px !important; } [data-spz-theme="dark"] .spz-v2 .spz-filters.neutral select:hover { border-color: #475569 !important; } [data-spz-theme="dark"] .spz-v2 .spz-filters.neutral select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(129,140,248,.25) !important; } /* ──────────────────────────────────────────────────────────── 17. DARK MODE TOGGLE BUTTON ──────────────────────────────────────────────────────────── */ .spz-dark-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 99999; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e2e8f0; background: #1e293b; color: #f1f5f9; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.25); transition: background .2s, border-color .2s, transform .15s; padding: 0; } .spz-dark-toggle:hover { transform: scale(1.08); } .spz-dark-toggle svg { width: 20px; height: 20px; fill: currentColor; transition: opacity .2s; } /* Sun hidden in light, moon hidden in dark */ .spz-dark-toggle .spz-icon-sun { display: none; } .spz-dark-toggle .spz-icon-moon { display: block; } [data-spz-theme="dark"] .spz-dark-toggle { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; } [data-spz-theme="dark"] .spz-dark-toggle .spz-icon-sun { display: block; } [data-spz-theme="dark"] .spz-dark-toggle .spz-icon-moon { display: none; }