/* ========================================================================== SOCCERR — THEME V2 DARK (append at end) Auto: prefers-color-scheme: dark Manual: add (or body) ========================================================================== */ /* --- Dark tokens (AUTO) --- */ @media (prefers-color-scheme: dark) { :root{ --bg: #070b12; --bg2: #0a1220; --card: rgba(13, 19, 32, .72); --cardSolid: #0b1220; --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.62); --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.14); --shadow-sm: 0 10px 22px rgba(0,0,0,.30); --shadow-md: 0 18px 36px rgba(0,0,0,.42); --shadow-lg: 0 26px 60px rgba(0,0,0,.52); --ring: rgba(85, 198, 1, .24); --glass-blur: 16px; --glass-sat: 160%; } /* Background */ html, body{ background: radial-gradient(1200px 800px at 15% -10%, rgba(85,198,1,.16), transparent 55%), radial-gradient(900px 650px at 95% 10%, rgba(71,147,255,.12), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); color: var(--text); } /* Text + muted helpers */ p, .text, .label, .hint { color: var(--text); } .text-muted, .muted, small { color: var(--muted) !important; } /* Cards */ .card{ background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); } [data-route]:hover{ background: color-mix(in oklab, rgba(85,198,1,.10) 100%, transparent); box-shadow: var(--shadow-md); } /* Header (glass) */ .header{ background: rgba(11, 18, 32, .62); border-color: var(--line); box-shadow: var(--shadow-sm); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); } /* Brand header variant (keep premium, not neon) */ .header--bck{ background: radial-gradient(650px 180px at 50% 0%, rgba(255,255,255,.10), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--brand) 70%, #081018), color-mix(in oklab, var(--brand) 55%, #070b12) ); border-color: color-mix(in oklab, var(--brand) 30%, transparent); box-shadow: 0 18px 42px rgba(0,0,0,.45); } /* Footer (glass) */ .app-footer{ background: rgba(11, 18, 32, .62); border-color: var(--line); box-shadow: 0 -12px 30px rgba(0,0,0,.35); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); } .app-footer__item{ color: rgba(255,255,255,.70); } .app-footer__item.active{ color: rgba(255,255,255,.92); } /* Buttons */ .button--primary{ background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 78%, #0b1220), color-mix(in oklab, var(--brand) 55%, #070b12) ); border-color: color-mix(in oklab, var(--brand) 35%, transparent); box-shadow: 0 14px 34px rgba(85,198,1,.20); color: rgba(255,255,255,.95); } .button--secondary{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.88); } .button:focus-visible, input:focus, select:focus, textarea:focus{ outline: none; box-shadow: 0 0 0 3px var(--ring); } /* Inputs */ input, select, textarea{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.92); } input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.42); } /* Tabs */ .filter-tabs__tab{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.78); } .filter-tabs__tab.is-active{ background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 78%, #0b1220), color-mix(in oklab, var(--brand) 52%, #070b12) ); border-color: color-mix(in oklab, var(--brand) 35%, transparent); color: rgba(255,255,255,.95); box-shadow: 0 14px 30px rgba(85,198,1,.18); } /* Tables / leaderboard */ .table-wrap{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } thead th{ background: rgba(255,255,255,.05); border-bottom-color: rgba(255,255,255,.10); color: rgba(255,255,255,.88); } tbody td{ border-bottom-color: rgba(255,255,255,.08); } tr.me{ background: rgba(85,198,1,.10); } /* Modals / overlays */ .modal__overlay, .popup-overlay{ background: rgba(0,0,0,.56); } .modal__content, .popup-overlay .popup, .af-modal__content{ background: rgba(11,18,32,.92); border-color: rgba(255,255,255,.10); box-shadow: var(--shadow-lg); } /* Icons / svg (avoid “too gray”) */ svg, .icon{ color: rgba(255,255,255,.86); } /* Scrollbars (optional, nicer in dark) */ ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; border: 2px solid rgba(0,0,0,0); background-clip: content-box; } ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); } } /* --- Dark tokens (MANUAL OVERRIDE) --- Use when you want a toggle: or */ :root[data-theme="dark"], body[data-theme="dark"]{ --bg: #070b12; --bg2: #0a1220; --card: rgba(13, 19, 32, .72); --cardSolid: #0b1220; --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.62); --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.14); --shadow-sm: 0 10px 22px rgba(0,0,0,.30); --shadow-md: 0 18px 36px rgba(0,0,0,.42); --shadow-lg: 0 26px 60px rgba(0,0,0,.52); --ring: rgba(85, 198, 1, .24); --glass-blur: 16px; --glass-sat: 160%; } :root[data-theme="dark"] html, :root[data-theme="dark"] body, body[data-theme="dark"]{ background: radial-gradient(1200px 800px at 15% -10%, rgba(85,198,1,.16), transparent 55%), radial-gradient(900px 650px at 95% 10%, rgba(71,147,255,.12), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); color: var(--text); } /* ========================================================================== SOCCERR — DARK FIX (more contrast / readable) Paste AFTER your dark theme block ========================================================================== */ /* Auto dark */ @media (prefers-color-scheme: dark) { :root{ /* Lighter background than "almost black" */ --bg: #0b1220; --bg2: #0f1b2d; /* Cards: more visible */ --card: rgba(255,255,255,.08); --cardSolid: #111c30; /* Text: higher contrast */ --text: rgba(255,255,255,.94); --muted: rgba(255,255,255,.72); /* Lines: clearer separators */ --line: rgba(255,255,255,.14); --line2: rgba(255,255,255,.18); /* Shadows: softer but present */ --shadow-sm: 0 10px 24px rgba(0,0,0,.28); --shadow-md: 0 18px 42px rgba(0,0,0,.36); --shadow-lg: 0 26px 64px rgba(0,0,0,.44); /* Ring: more visible */ --ring: rgba(85, 198, 1, .34); } html, body{ background: radial-gradient(1100px 700px at 15% -10%, rgba(85,198,1,.18), transparent 55%), radial-gradient(900px 650px at 95% 10%, rgba(71,147,255,.16), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); color: var(--text); } /* Force readable text on common elements */ body, p, span, li, label, small, .label, .text{ color: var(--text); } .text-muted, .muted, .hint, .sub, .desc{ color: var(--muted) !important; } /* Cards stronger */ .card, .table-wrap, .modal__content, .popup-overlay .popup, .af-modal__content{ background: color-mix(in oklab, var(--cardSolid) 80%, transparent) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm); } /* Card headers / titles */ h1,h2,h3,h4,h5,h6, .title, .card__title, .header__title{ color: rgba(255,255,255,.96) !important; } /* Links */ a{ color: rgba(255,255,255,.92); } a:hover{ color: color-mix(in oklab, var(--brand) 55%, white); } /* Buttons readability */ .button--secondary{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; color: rgba(255,255,255,.90) !important; } /* Inputs readability */ input, select, textarea{ background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.18) !important; color: rgba(255,255,255,.92) !important; } input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55) !important; } /* Table header a bit brighter */ thead th{ background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.90) !important; border-bottom-color: rgba(255,255,255,.14) !important; } tbody td{ border-bottom-color: rgba(255,255,255,.10) !important; } /* Footer/header glass: slightly brighter */ .header, .app-footer{ background: rgba(17, 28, 48, .72) !important; border-color: rgba(255,255,255,.14) !important; } } /* Manual forced dark */ :root[data-theme="dark"], body[data-theme="dark"]{ --bg: #0b1220; --bg2: #0f1b2d; --card: rgba(255,255,255,.08); --cardSolid: #111c30; --text: rgba(255,255,255,.94); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.14); --line2: rgba(255,255,255,.18); --shadow-sm: 0 10px 24px rgba(0,0,0,.28); --shadow-md: 0 18px 42px rgba(0,0,0,.36); --shadow-lg: 0 26px 64px rgba(0,0,0,.44); --ring: rgba(85, 198, 1, .34); }