/* assets/css/dark-mode.css * Dark mode overrides — activated when carries the np-dark-mode class. * * The class is applied by an inline script in header.php that reads * localStorage('npx-theme') synchronously so there is no flash of the wrong * theme on first paint (or on any subsequent page load). * * Strategy: * 1. Override CSS custom properties at :root so any rule that uses a var() * automatically picks up the dark value without a specific override. * 2. Add explicit overrides for rules that use hardcoded colours. * * Selector prefix: html.np-dark-mode * Using the html element (not body) means the class is available the * instant the head script runs — before exists in the DOM. * Existing settings.css rules use .np-dark-mode as an ancestor selector * which continues to work because settings-page is a descendant of . */ /* ── Token overrides ───────────────────────────────────────────────────────── Redefine the root variables so every rule that uses var(--color-*) switches automatically, with no additional override needed. ──────────────────────────────────────────────────────────────────────────── */ html.np-dark-mode { --color-background: #0f1621; --color-text: #e6edf6; --color-text-light: #b9c7d8; --color-border: #2b3a4f; --color-surface: #161f2d; --color-white: #161f2d; /* Extended tokens used by components that rely on these vars */ --color-surface-alt: #1a2537; --color-surface-hover: #1e2d42; --color-background-alt: #1a2a3f; --color-blue-light: #1c3a6e; /* status-notice component tokens */ --sn-color-body: #b9c7d8; --sn-color-hint: #6b8aa8; } /* ── Body ──────────────────────────────────────────────────────────────────── body uses var(--color-background) from base.css but we add an explicit rule as a safety net for any browsers that don't re-evaluate the var at html level. ──────────────────────────────────────────────────────────────────────────── */ html.np-dark-mode body { background-color: #0f1621; color: #e6edf6; } /* ── Headings ────────────────────────────────────────────────────────────── */ html.np-dark-mode h1, html.np-dark-mode h2, html.np-dark-mode h3, html.np-dark-mode h4, html.np-dark-mode h5, html.np-dark-mode h6 { color: #e6edf6; } /* ── Navbar ────────────────────────────────────────────────────────────────── nav.css sets background: white and border-bottom: 1px solid var(--color-border). The border inherits from the var override above; background needs an explicit rule. ──────────────────────────────────────────────────────────────────────────── */ html.np-dark-mode .navbar { background: #161f2d; border-bottom-color: #2b3a4f; } html.np-dark-mode .navbar__logo .brand { content: url('/images/basketball-icon-white.png'); } html.np-dark-mode .navlink a { color: #e6edf6; } html.np-dark-mode .navlink a:hover { color: var(--color-primary); } /* ── Main banner ───────────────────────────────────────────────────────────── The default banner uses a pink gradient; swap to a dark equivalent. Cover-image variant is unaffected — the photo provides its own background. ──────────────────────────────────────────────────────────────────────────── */ html.np-dark-mode .main-banner:not(.main-banner--cover) { background: linear-gradient(135deg, rgba(26, 40, 66, 0.9) 0%, rgba(38, 24, 52, 0.9) 100%); } html.np-dark-mode .main-banner h1, html.np-dark-mode .main-banner p { color: #e6edf6; } /* ── Gallery cards ─────────────────────────────────────────────────────────── grid-item uses hardcoded background: white. ──────────────────────────────────────────────────────────────────────────── */ html.np-dark-mode .grid-item { background: #161f2d; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } /* ── Filter bar chips ────────────────────────────────────────────────────── */ html.np-dark-mode .gallery-filter-chip { border-color: #2b3a4f; color: #b9c7d8; background: #161f2d; } html.np-dark-mode .gallery-filter-bar--sticky { background: #0f1923; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } html.np-dark-mode .gallery-filter-chip--active { background: #27ae60; border-color: #27ae60; color: #fff; } @media (hover: hover) and (pointer: fine) { html.np-dark-mode .gallery-filter-chip:hover { background: #27ae60; border-color: #27ae60; color: #fff; } } html.np-dark-mode .gallery-filter-search { background: #161f2d; border-color: #2b3a4f; color: #e6edf6; } /* ── Search tag input component (used in gallery filter bar) ─────────────── */ html.np-dark-mode .search-tag-input { background: #161f2d; border-color: #2b3a4f; } html.np-dark-mode .search-tag-input__field { color: #e6edf6; } html.np-dark-mode .search-tag-input__field::placeholder { color: #6b8aa8; } /* ── Search wrapper (old global search bar) ──────────────────────────────── */ html.np-dark-mode .search-wrapper { background: #161f2d; } html.np-dark-mode .search-wrapper input[type="text"] { background: #161f2d; color: #e6edf6; } /* ── Custom select (npx-select component) ────────────────────────────────── */ html.np-dark-mode .npx-select__trigger { background: #161f2d; border-color: #2b3a4f; color: #e6edf6; } html.np-dark-mode .npx-select__panel { background: #161f2d; border-color: #2b3a4f; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } html.np-dark-mode .npx-select__option { color: #e6edf6; } html.np-dark-mode .npx-select__option:hover, html.np-dark-mode .npx-select__option--focused { background: #1a2842; } html.np-dark-mode .npx-select__option--selected { color: #27ae60; } html.np-dark-mode .npx-select__search-input { background: #1a2537; border-bottom-color: #2b3a4f; color: #e6edf6; } html.np-dark-mode .npx-select__group-label { color: #5b8dd4; } /* Chip variant: inactive */ html.np-dark-mode .npx-select--chip .npx-select__trigger { border-color: #2b3a4f; color: #b9c7d8; background: #161f2d; } /* Chip variant: value selected → stays green */ html.np-dark-mode .npx-select--chip[data-has-value="true"] .npx-select__trigger { background: #27ae60; border-color: #27ae60; color: #fff; } /* ── Scroll spinner ──────────────────────────────────────────────────────── */ html.np-dark-mode .scroll-spinner__ring { border-color: rgba(255, 255, 255, 0.1); border-top-color: #27ae60; } /* ══════════════════════════════════════════════════════════════════════════════ COMPONENT DARK MODE OVERRIDES Added: 2026-04-14 — covers all components that were missing dark styles. All rules are prefixed html.np-dark-mode so they are scoped and specific. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Nav auth buttons ──────────────────────────────────────────────────────── .primary-btn has hardcoded background: white; needs a dark surface. */ html.np-dark-mode .primary-btn { background: #161f2d; border-color: var(--color-blue, #4A90E2); color: var(--color-blue, #4A90E2); } html.np-dark-mode .primary-btn:hover { background: #1c3a6e; } /* ── Footer ────────────────────────────────────────────────────────────────── Darken the purple gradient so it reads as deliberately dark rather than a carry-over from light theme. */ html.np-dark-mode .site-footer { background: linear-gradient(135deg, #131b2e 0%, #1a1028 100%); } /* ── User dropdown ───────────────────────────────────────────────────────── */ html.np-dark-mode .user-dropdown-trigger { background: #1f2d3d; border-color: #2b3a4f; } html.np-dark-mode .user-dropdown-menu { background: #161f2d; border: 1px solid #2b3a4f; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); } html.np-dark-mode .dropdown-header { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border-bottom-color: #2b3a4f; } html.np-dark-mode .username { color: #e6edf6; } html.np-dark-mode .user-balance { color: #b9c7d8; } html.np-dark-mode .dropdown-items li.divider { background: #2b3a4f; } html.np-dark-mode .dropdown-items a { color: #e6edf6; } html.np-dark-mode .dropdown-items a:hover { background: #1a2842; color: var(--color-blue, #4A90E2); } html.np-dark-mode .dropdown-icon-bubble { background: #1c3a6e; color: #5ba0f0; } html.np-dark-mode .dropdown-icon-bubble--danger { background: #3d1c1c; color: #f87171; } html.np-dark-mode .dropdown-items a:hover .dropdown-icon-bubble { background: #234880; } html.np-dark-mode .dropdown-items a:hover .dropdown-icon-bubble--danger { background: #4d2020; } html.np-dark-mode .dropdown-chevron { color: #6b8aa8; } /* ── Slide-up vote menu ──────────────────────────────────────────────────── */ html.np-dark-mode .vote-menu-content { background: #161f2d; } html.np-dark-mode .vote-cancel-btn { background: #161f2d; border-color: #2b3a4f; color: #e6edf6; } html.np-dark-mode .vote-cancel-btn:hover { background: #1a2842; border-color: #4a6a8a; } html.np-dark-mode .vote-success-content { background: #161f2d; } html.np-dark-mode .vote-success-content .success-text p { color: #b9c7d8; } /* ── Upload modal ────────────────────────────────────────────────────────── */ html.np-dark-mode .upload-modal-content { background: #161f2d; } html.np-dark-mode .upload-modal-header { border-bottom-color: #2b3a4f; } html.np-dark-mode .upload-modal-close:hover { background: #1a2842; } html.np-dark-mode .upload-drop-zone { border-color: #4A90E2; background: transparent; } html.np-dark-mode .upload-drop-zone:hover { background: rgba(74, 144, 226, 0.1); } /* ── Top-up modal ────────────────────────────────────────────────────────── */ html.np-dark-mode .topup-modal__card { background: #161f2d; } html.np-dark-mode .topup-modal__back:hover { background: #1a2842; } html.np-dark-mode .topup-modal__balance-row { background: #1a2842; } html.np-dark-mode .topup-modal__shortfall-row { background: #2d1c1c; } html.np-dark-mode .topup-modal__quick-btn { background: #1a2537; border-color: #2b3a4f; color: #e6edf6; } html.np-dark-mode .topup-modal__currency { background: #1a2537; color: #b9c7d8; border-right-color: #2b3a4f; } html.np-dark-mode .topup-modal__custom-row { border-color: #2b3a4f; background: #161f2d; } /* Card picker items */ html.np-dark-mode .topup-modal__card-option { background: #1a2537; border-color: #2b3a4f; color: #e6edf6; } html.np-dark-mode .topup-modal__card-option:hover { background: #1e2d42; border-color: #4A90E2; } html.np-dark-mode .topup-modal__card-option--selected { background: #1c3a6e; border-color: #4A90E2; } /* ── Moderation page ─────────────────────────────────────────────────────── */ html.np-dark-mode .moderation-header h1 { color: #e6edf6; } html.np-dark-mode .moderation-header p { color: #b9c7d8; } html.np-dark-mode .moderation-toolbar { background: rgba(22, 31, 45, 0.97); border-bottom-color: rgba(74, 144, 226, 0.2); } html.np-dark-mode .moderation-toolbar__summary { color: #b9c7d8; } html.np-dark-mode .moderation-meta { color: #b9c7d8; background: #1a2537; border-top-color: rgba(74, 144, 226, 0.15); } html.np-dark-mode .moderation-feedback { color: #b9c7d8; } /* ── Analytics page ──────────────────────────────────────────────────────── */ html.np-dark-mode .analytics-header h1 { color: #e6edf6; } html.np-dark-mode .analytics-range__btn { background: #161f2d; border-color: #2b3a4f; color: #b9c7d8; } html.np-dark-mode .analytics-range__btn:hover, html.np-dark-mode .analytics-range__btn.is-active { background: var(--color-secondary, #667eea); border-color: var(--color-secondary, #667eea); color: #fff; } /* Stat cards and tables that use white or light backgrounds */ html.np-dark-mode .stat-card, html.np-dark-mode .analytics-card, html.np-dark-mode .analytics-table-wrap { background: #161f2d; border-color: #2b3a4f; } html.np-dark-mode .analytics-table th { background: #1a2537; color: #b9c7d8; border-color: #2b3a4f; } html.np-dark-mode .analytics-table td { color: #e6edf6; border-color: #2b3a4f; } html.np-dark-mode .analytics-table tr:nth-child(even) td { background: #1a2537; } /* Chart panel */ html.np-dark-mode .analytics-chart-section { background: #161f2d; border-color: #2b3a4f; } html.np-dark-mode .analytics-chart-header h2 { color: #e6edf6; } html.np-dark-mode .analytics-chart-loader { background: #161f2d; color: #b9c7d8; } html.np-dark-mode .analytics-metric-tab { background: #161f2d; border-color: #2b3a4f; color: #b9c7d8; } /* Top photos + moderation panels */ /* ── Auth pages (login, signup, reset, etc.) ───────────────────────────────── auth-global.css and login.css use hardcoded white backgrounds that need explicit dark overrides. Token overrides above handle var(--color-*) rules. ──────────────────────────────────────────────────────────────────────────── */ html.np-dark-mode .auth-container { background: #0f1621; } html.np-dark-mode .auth-card { background: #161f2d; } html.np-dark-mode .social-btn { background: #161f2d; color: #e6edf6; } html.np-dark-mode .social-btn:hover, html.np-dark-mode a.social-btn:hover { background: #1a2537; } html.np-dark-mode .auth-divider span { background: #161f2d; } html.np-dark-mode .auth-input { background: #161f2d; color: #e6edf6; border-color: #2b3a4f; } html.np-dark-mode .auth-input:focus { background: #161f2d; } /* Back arrow buttons in login steps (login.css) */ html.np-dark-mode #back-to-prev-btn, html.np-dark-mode #back-to-options-btn { background: #161f2d; } /* Provider / OAuth buttons on login step 1 (login.css) */ html.np-dark-mode .auth-provider-btn { background: #161f2d; color: #e6edf6; } html.np-dark-mode .auth-provider-btn:hover { background: #1a2537; border-color: #4a6fa5; } html.np-dark-mode .analytics-top-photos, html.np-dark-mode .analytics-moderation { background: #161f2d; border-color: #2b3a4f; } html.np-dark-mode .analytics-top-photos h2, html.np-dark-mode .analytics-moderation h2 { color: #e6edf6; } /* Club leaderboard table */ html.np-dark-mode .analytics-clubs__th { background: #1a2537; color: #b9c7d8; border-color: #2b3a4f; } html.np-dark-mode .analytics-clubs__td { color: #e6edf6; border-color: #2b3a4f; } html.np-dark-mode .analytics-clubs__row:nth-child(even) td { background: #1a2537; } html.np-dark-mode .analytics-clubs__table-wrap { border-color: #2b3a4f; } html.np-dark-mode .analytics-clubs h2 { color: #e6edf6; } /* ── Gallery extras (main-layout.css hardcoded colours) ─────────────────── */ /* Action pose pill — currently light green tint with dark text */ html.np-dark-mode .action-pose-pill { background: rgba(46, 204, 113, 0.1); color: #6ee0a8; } html.np-dark-mode .action-pose-pill__info { color: #6ee0a8; } /* Gallery error row */ html.np-dark-mode .error { background: #2d1c1c; color: #f87171; } /* Gallery filter