/* ========================================================================== PollsCafe Dark Mode Activated via data-theme="dark" on ========================================================================== */ /* ========================================================================== Transitions (smooth theme switching) ========================================================================== */ body, .navbar, .card:not(.article-card):not(.featured-article), .poll-card, .settings-section, .settings-nav, .auth-form-card, .auth-form-container, .auth-centered, .modal-content, .dropdown-menu, .form-control, .form-select { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ========================================================================== Toggle Button ========================================================================== */ #themeToggle { border: none; background: none; cursor: pointer; display: flex; align-items: center; padding: 0.3rem; } #themeToggle svg { width: 20px; height: 20px; } #themeIconSun { display: none; } #themeIconMoon { display: inline; } [data-theme="dark"] #themeIconSun { display: inline; } [data-theme="dark"] #themeIconMoon { display: none; } /* ========================================================================== Core Variable Overrides (main.css) ========================================================================== */ html[data-theme="dark"] { /* Bootstrap core overrides */ --bs-body-bg: #0f172a; --bs-body-color: #e2e8f0; --bs-border-color: #334155; --bs-secondary-bg: #1e293b; --bs-tertiary-bg: #0f172a; --bs-emphasis-color: #e2e8f0; color-scheme: dark; --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --secondary-color: #34d399; --secondary-dark: #10b981; --text-dark: #e2e8f0; --text-muted: #94a3b8; --text-light: #64748b; --bg-light: #0f172a; --bg-white: #1e293b; --border-color: #334155; --accent-political: #3b82f6; --accent-cultural: #34d399; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4); --shadow-lg: 0 10px 15px rgba(0,0,0,0.4); --shadow-hover: 0 8px 25px rgba(59,130,246,0.2); /* Admin variables */ --admin-bg: #0f172a; --admin-card-bg: #1e293b; --admin-border: #334155; --admin-header-bg: #1e293b; /* Chart variables */ --chart-bg: #1e293b; --chart-border: #334155; --chart-text: #e2e8f0; --chart-text-muted: #94a3b8; --mini-chart-bg: #1e293b; --mini-chart-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* ========================================================================== Navbar ========================================================================== */ [data-theme="dark"] .navbar { background-color: #1e293b !important; border-bottom-color: #334155; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .navbar .nav-link { color: #e2e8f0 !important; } [data-theme="dark"] .navbar .nav-link:hover { color: #60a5fa !important; background-color: rgba(59,130,246,0.1); } [data-theme="dark"] .navbar .nav-link.active { color: #60a5fa !important; } [data-theme="dark"] .navbar .nav-link.active::after { background-color: #60a5fa; } [data-theme="dark"] .navbar-logo { filter: brightness(0) invert(1); opacity: 0.9; } [data-theme="dark"] .navbar .dropdown-menu { background-color: #1e293b; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } [data-theme="dark"] .navbar .dropdown-item { color: #e2e8f0; } [data-theme="dark"] .navbar .dropdown-item:hover { background-color: rgba(59,130,246,0.1); color: #60a5fa; } [data-theme="dark"] .navbar .dropdown-divider { border-color: #334155; } [data-theme="dark"] .navbar-toggler { border-color: rgba(255,255,255,0.2); } [data-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } @media (max-width: 991.98px) { [data-theme="dark"] .navbar-collapse { background-color: #1e293b; } } /* ========================================================================== Bootstrap Components ========================================================================== */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .form-control::placeholder { color: #64748b; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #0f172a; border-color: #3b82f6; color: #e2e8f0; box-shadow: 0 0 0 0.2rem rgba(59,130,246,0.25); } [data-theme="dark"] .form-check-input { background-color: #0f172a; border-color: #475569; } [data-theme="dark"] .form-check-input:checked { background-color: #3b82f6; border-color: #3b82f6; } [data-theme="dark"] .form-label { color: #e2e8f0; } [data-theme="dark"] .form-text { color: #64748b; } [data-theme="dark"] .dropdown-menu { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .dropdown-item { color: #e2e8f0; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: rgba(59,130,246,0.1); color: #60a5fa; } [data-theme="dark"] .dropdown-divider { border-color: #334155; } [data-theme="dark"] .modal-content { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .modal-title { color: #e2e8f0; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .table { --bs-table-bg: #1e293b; --bs-table-color: #e2e8f0; --bs-table-border-color: #334155; --bs-table-striped-bg: #162032; --bs-table-striped-color: #e2e8f0; --bs-table-hover-bg: rgba(59,130,246,0.06); --bs-table-hover-color: #e2e8f0; color: #e2e8f0; } [data-theme="dark"] .table thead th { background-color: #0f172a; color: #94a3b8; border-bottom-color: #334155; } [data-theme="dark"] .table tbody td { color: #e2e8f0; border-bottom-color: #334155; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(59,130,246,0.06); } [data-theme="dark"] .card { background-color: var(--bg-white); border-color: var(--border-color); } [data-theme="dark"] .card-header { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .breadcrumb-item.active { color: #94a3b8; } [data-theme="dark"] .page-link { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .page-link:hover { background-color: #334155; color: #60a5fa; } /* ========================================================================== Footer (already dark — minor tweaks) ========================================================================== */ [data-theme="dark"] footer:not(.site-footer) { background-color: #1e293b; border-color: #334155; } /* ========================================================================== Alerts (dark mode) ========================================================================== */ [data-theme="dark"] .alert-success { background-color: rgba(52,211,153,0.1); color: #34d399; border-left-color: #10b981; } [data-theme="dark"] .alert-danger { background-color: rgba(248,113,113,0.1); color: #f87171; border-left-color: #ef4444; } [data-theme="dark"] .alert-info { background-color: rgba(56,189,248,0.1); color: #38bdf8; border-left-color: #0ea5e9; } [data-theme="dark"] .alert-warning { background-color: rgba(251,191,36,0.1); color: #fbbf24; border-left-color: #f59e0b; } /* ========================================================================== Polls.css Overrides (hardcoded colors) ========================================================================== */ [data-theme="dark"] .poll-card { background: #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } [data-theme="dark"] .poll-card-header { border-bottom-color: #334155; } [data-theme="dark"] .poll-card-header h4, [data-theme="dark"] .poll-card-header h5, [data-theme="dark"] .poll-question-title, [data-theme="dark"] .poll-list-title { color: #e2e8f0; } [data-theme="dark"] .poll-card-footer { border-top-color: #334155; background: #0f172a; } [data-theme="dark"] .poll-option { border-color: #334155; background: #1e293b; } [data-theme="dark"] .poll-option:hover { border-color: #0d9488; background: rgba(13,148,136,0.08); } [data-theme="dark"] .poll-option-text { color: #cbd5e1; } [data-theme="dark"] .poll-option input:checked ~ .poll-option-text { color: #2dd4bf; } [data-theme="dark"] .poll-option:has(input:checked) { background: rgba(13,148,136,0.12); } [data-theme="dark"] .poll-option-indicator { border-color: #475569; } [data-theme="dark"] .poll-progress { background: #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } [data-theme="dark"] .poll-progress-bar { background: #334155; } [data-theme="dark"] .poll-progress-meta { color: #94a3b8; } [data-theme="dark"] .poll-question-hint, [data-theme="dark"] .poll-list-meta { color: #94a3b8; } [data-theme="dark"] .poll-rating-btn { border-color: #334155; color: #94a3b8; } [data-theme="dark"] .poll-rating-btn:hover { border-color: #0d9488; color: #2dd4bf; } [data-theme="dark"] .poll-rating-label { color: #64748b; } [data-theme="dark"] .poll-list-item { border-bottom-color: #334155; } [data-theme="dark"] a.poll-list-item:hover { background: rgba(59,130,246,0.06); } [data-theme="dark"] .poll-answer-q { color: #cbd5e1; } [data-theme="dark"] .poll-answer-row { border-bottom-color: #334155; } [data-theme="dark"] .poll-alert--info { background: rgba(56,189,248,0.08); color: #38bdf8; border-color: rgba(56,189,248,0.2); } [data-theme="dark"] .poll-alert--success { background: rgba(52,211,153,0.08); color: #34d399; border-color: rgba(52,211,153,0.2); } [data-theme="dark"] .poll-alert--warning { background: rgba(251,191,36,0.08); color: #fbbf24; border-color: rgba(251,191,36,0.2); } [data-theme="dark"] .poll-empty-icon { background: #334155; } [data-theme="dark"] .poll-empty-icon svg { color: #64748b; } [data-theme="dark"] .btn-poll-secondary { background: #1e293b; border-color: #334155; color: #94a3b8; } [data-theme="dark"] .btn-poll-secondary:hover { border-color: #475569; color: #e2e8f0; background: #0f172a; } [data-theme="dark"] .poll-points-badge { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(234,179,8,0.15)); border-color: rgba(245,158,11,0.3); color: #fbbf24; } /* ========================================================================== Auth.css Overrides (hardcoded colors) ========================================================================== */ [data-theme="dark"] .auth-form-container { background: #0f172a; } [data-theme="dark"] .auth-centered { background: #0f172a; } [data-theme="dark"] .auth-form-card { background: #1e293b; box-shadow: 0 10px 40px rgba(0,0,0,0.3); } [data-theme="dark"] .auth-form-card h2 { color: #e2e8f0; } [data-theme="dark"] .auth-form-card .subtitle { color: #94a3b8; } [data-theme="dark"] .auth-form-card .form-control, [data-theme="dark"] .auth-form-card .form-select { background-color: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .auth-form-card .form-control:focus, [data-theme="dark"] .auth-form-card .form-select:focus { background-color: #0f172a; border-color: var(--auth-accent); } [data-theme="dark"] .auth-form-card .form-label { color: #cbd5e1; } [data-theme="dark"] .auth-divider { color: #64748b; } [data-theme="dark"] .auth-divider::before, [data-theme="dark"] .auth-divider::after { background: #334155; } [data-theme="dark"] .auth-section-title { color: var(--auth-accent); } /* Settings / Profile */ [data-theme="dark"] .settings-nav { background: #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } [data-theme="dark"] .settings-nav-header { border-bottom-color: #334155; } [data-theme="dark"] .settings-nav-header .user-name { color: #e2e8f0; } [data-theme="dark"] .settings-nav-header .user-email { color: #94a3b8; } [data-theme="dark"] .settings-nav-links li a { color: #94a3b8; } [data-theme="dark"] .settings-nav-links li a:hover { background: rgba(59,130,246,0.06); color: #2dd4bf; } [data-theme="dark"] .settings-nav-links li a.active { background: rgba(13,148,136,0.1); color: #2dd4bf; border-left-color: #0d9488; } [data-theme="dark"] .settings-nav-links .nav-divider { background: #334155; } [data-theme="dark"] .settings-section { background: #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } [data-theme="dark"] .settings-section h3 { color: #e2e8f0; } [data-theme="dark"] .settings-section .section-desc { color: #94a3b8; } [data-theme="dark"] .settings-section .form-control, [data-theme="dark"] .settings-section .form-select { background-color: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .settings-section .form-label { color: #cbd5e1; } [data-theme="dark"] .settings-info-row { border-bottom-color: #334155; } [data-theme="dark"] .settings-info-label { color: #94a3b8; } [data-theme="dark"] .settings-info-value { color: #e2e8f0; } [data-theme="dark"] .settings-mobile-nav { background: #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } [data-theme="dark"] .settings-mobile-nav a { color: #94a3b8; } [data-theme="dark"] .settings-mobile-nav a.active { background: rgba(13,148,136,0.1); color: #2dd4bf; } /* ========================================================================== Business Portal Overrides ========================================================================== */ [data-theme="dark"] .business-sidebar { background-color: #1e293b; } [data-theme="dark"] .business-sidebar .nav-link { color: #94a3b8; } [data-theme="dark"] .business-sidebar .nav-link:hover { background-color: rgba(59,130,246,0.06); color: #60a5fa; } [data-theme="dark"] .business-sidebar .nav-link.active { background-color: #667eea; color: white; } [data-theme="dark"] .low-balance-banner { background-color: rgba(251,191,36,0.1); border-bottom-color: rgba(251,191,36,0.2); } [data-theme="dark"] .low-balance-banner span { color: #fbbf24; } [data-theme="dark"] .low-balance-banner a { color: #fbbf24; } /* ========================================================================== Badge Legibility (both themes) ========================================================================== */ /* Fix yellow badges — dark text in both themes */ .badge.bg-warning, .badge[class*="warning"] { color: #1a1a2e !important; } /* Dark mode badge adjustments */ [data-theme="dark"] .badge.bg-secondary { background-color: #475569 !important; color: #e2e8f0; } [data-theme="dark"] .poll-badge--tracker { background: rgba(45,212,191,0.15); color: #2dd4bf; } [data-theme="dark"] .poll-badge--standard { background: rgba(148,163,184,0.15); color: #94a3b8; } [data-theme="dark"] .poll-badge--points { background: rgba(52,211,153,0.15); color: #34d399; } /* ========================================================================== Headings, Card Titles, Featured Charts ========================================================================== */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #e2e8f0; } [data-theme="dark"] .card-title { color: #e2e8f0; } [data-theme="dark"] .card-title a { color: #e2e8f0; } [data-theme="dark"] .card-title a:hover { color: #60a5fa; } [data-theme="dark"] .card-header h5 { color: #e2e8f0; } [data-theme="dark"] .card-text { color: #94a3b8; } [data-theme="dark"] .featured-chart { background-color: #1e293b; } [data-theme="dark"] .chart-title { color: #e2e8f0; } [data-theme="dark"] .chart-container { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .chart-controls { background-color: #0f172a; border-bottom-color: #334155; } [data-theme="dark"] .chart-error, [data-theme="dark"] .chart-loading, [data-theme="dark"] .chart-empty { color: #94a3b8; } [data-theme="dark"] .btn-outline-secondary { color: #e2e8f0; border-color: #475569; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-secondary:focus { background-color: #334155; border-color: #475569; color: #e2e8f0; } [data-theme="dark"] .btn-outline-secondary:disabled { color: #64748b; border-color: #334155; } /* ========================================================================== Misc ========================================================================== */ [data-theme="dark"] .search-results-header { background-color: #1e293b; } [data-theme="dark"] .poll-results { background-color: #0f172a; } [data-theme="dark"] .article-iframe { background-color: #1e293b; } [data-theme="dark"] .skip-link { background: #3b82f6; } [data-theme="dark"] .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .text-dark { color: #e2e8f0 !important; } [data-theme="dark"] .bg-light { background-color: #0f172a !important; } [data-theme="dark"] .bg-white { background-color: #1e293b !important; } /* ========================================================================== Inline-style overrides (hardcoded backgrounds in templates) ========================================================================== */ [data-theme="dark"] .poll-card-header[style*="background: #f0fdf4"] { background: rgba(52,211,153,0.1) !important; border-bottom-color: rgba(52,211,153,0.2) !important; } /* ========================================================================== Admin/Editor Template Style-Block Overrides (classes defined in per-page