/* ============================================================= DARK THEME — page-level overrides Loaded in the (after template.css). Page stylesheets load later but every rule here is prefixed with html[data-theme="dark"], so it wins on specificity, not order. Palette variables are defined in template.css. ============================================================= */ /* ---------- Shared aliases (index.css defines these for light) ---------- */ html[data-theme="dark"] { --card-bg: var(--surface-bg); --text-main: var(--content-text); --text-muted: var(--content-text-muted); --page-bg: var(--body-bg); --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* Soft dark replacement for the light "145deg #fff -> #f4f7fb" header gradients */ html[data-theme="dark"] .dashboard-header, html[data-theme="dark"] .mp-page-header, html[data-theme="dark"] .cw-header, html[data-theme="dark"] .cw-profile-header, html[data-theme="dark"] .hf-page-header, html[data-theme="dark"] .con-page-header { background: linear-gradient(145deg, #1e2530 0%, #181e26 100%); border-color: var(--content-border); } html[data-theme="dark"] body h1, html[data-theme="dark"] body h2, html[data-theme="dark"] body h3, html[data-theme="dark"] body h4 { color: var(--content-text); } /* ---------- Dashboard (index.css) ---------- */ html[data-theme="dark"] .status-indicator { background: rgba(27, 33, 42, 0.9); border-color: var(--content-border); } html[data-theme="dark"] .panel-header { border-bottom-color: var(--content-border); } html[data-theme="dark"] .list-item { background: var(--surface-alt-bg); } html[data-theme="dark"] .list-item:hover { background-color: #2c3542; } html[data-theme="dark"] .item-title { color: var(--content-text); } html[data-theme="dark"] .cw-dash-avatar { background: var(--surface-alt-bg); } html[data-theme="dark"] .pagination { border-top-color: var(--content-border); } html[data-theme="dark"] .pagination button { border-color: var(--content-border); color: var(--content-text-muted); } /* ---------- Evidence feed + modal (evidence.css) ---------- */ html[data-theme="dark"] .evidence-feed-item { background: var(--surface-bg); border-color: var(--content-border); border-left-color: var(--accent-color); } html[data-theme="dark"] .evidence-feed-item--verification { border-left-color: #27ae60; } html[data-theme="dark"] .evidence-feed-item--news { border-left-color: #e67e22; } html[data-theme="dark"] .evidence-feed-headline { color: var(--content-text); } html[data-theme="dark"] .evidence-feed-summary { color: #c4cbd4; } html[data-theme="dark"] .evidence-chip { background: var(--surface-alt-bg); border-color: var(--content-border); color: #c4cbd4; } html[data-theme="dark"] .evidence-chip:hover { background: #2c3542; color: var(--content-text); } html[data-theme="dark"] .evidence-chip.has-proof { background: #1d3328; } html[data-theme="dark"] .evidence-chip--doubt-low { background: #38301a; } html[data-theme="dark"] .evidence-chip--doubt-contradicted { background: #3b2220; } html[data-theme="dark"] .evidence-chip--doubt-queued { background: #2e2336; } html[data-theme="dark"] .evidence-modal { background: var(--surface-bg); } html[data-theme="dark"] .evidence-modal-header, html[data-theme="dark"] .evidence-modal-footer { border-color: var(--content-border); } html[data-theme="dark"] .evidence-modal-header h3 { color: var(--content-text); } html[data-theme="dark"] .evidence-modal-close { background: var(--surface-alt-bg); color: var(--content-text-muted); } html[data-theme="dark"] .evidence-proof-card { background: var(--surface-alt-bg); border-color: var(--content-border); } html[data-theme="dark"] .btn-evidence-proof--none { background: var(--surface-alt-bg); } /* ---------- MPs (mp.css) ---------- */ html[data-theme="dark"] .mp-page-header h1 { color: var(--content-text); } html[data-theme="dark"] .mp-dash-link, html[data-theme="dark"] .mp-toolbar, html[data-theme="dark"] .mp-card, html[data-theme="dark"] .menu { background: var(--surface-bg); border-color: var(--content-border); } html[data-theme="dark"] .mp-dash-link:hover { background: #232f3d; } html[data-theme="dark"] .mp-toolbar-field select, html[data-theme="dark"] .mp-btn-secondary, html[data-theme="dark"] .action-button button { background: var(--surface-alt-bg); border-color: var(--content-border); color: var(--content-text); } html[data-theme="dark"] .mp-toolbar-field select:focus { background: var(--surface-alt-bg); } html[data-theme="dark"] .mp-btn-secondary:hover, html[data-theme="dark"] .action-button button:hover { background: #2c3542; } html[data-theme="dark"] .mp-card-title-block h2 a { color: var(--content-text); } html[data-theme="dark"] .mp-meta { color: var(--content-text-muted); } html[data-theme="dark"] .mp-chamber-tag { background: var(--surface-alt-bg); color: var(--content-text-muted); } html[data-theme="dark"] .menu button { color: var(--content-text); } html[data-theme="dark"] .menu button:hover { background: var(--surface-alt-bg); } html[data-theme="dark"] .mp-answers-table th { background: var(--surface-alt-bg); } /* ---------- Culture Warriors (cw.css) ---------- */ html[data-theme="dark"] .cw-header h1, html[data-theme="dark"] .cw-profile-header h2 { color: var(--content-text); } html[data-theme="dark"] .cw-back, html[data-theme="dark"] .cw-add-card, html[data-theme="dark"] .cw-list-card, html[data-theme="dark"] .cw-types-card, html[data-theme="dark"] .cw-picker, html[data-theme="dark"] .cw-stat-card, html[data-theme="dark"] .cw-chart-card, html[data-theme="dark"] .cw-breakdown-card { background: var(--surface-bg); border-color: var(--content-border); } html[data-theme="dark"] .cw-back:hover { background: #232f3d; } html[data-theme="dark"] .cw-add-card h2, html[data-theme="dark"] .cw-list-card h2, html[data-theme="dark"] .cw-types-card h2, html[data-theme="dark"] .cw-chart-card h3, html[data-theme="dark"] .cw-breakdown-card h3, html[data-theme="dark"] .cw-stat-val, html[data-theme="dark"] .cw-picker-meta strong { color: var(--content-text); } html[data-theme="dark"] .cw-table th { background: var(--surface-alt-bg); } html[data-theme="dark"] .cw-picker-item { background: var(--surface-alt-bg); } html[data-theme="dark"] .cw-picker-item:hover { background: #2c3542; } html[data-theme="dark"] .cw-picker-item.is-active { background: #20354a; } html[data-theme="dark"] .cw-btn-ghost { background: var(--surface-alt-bg); color: var(--content-text); } html[data-theme="dark"] .cw-btn-ghost:hover:not(:disabled) { background: #2c3542; } html[data-theme="dark"] .cw-picker-badge--muted, html[data-theme="dark"] .cw-avatar, html[data-theme="dark"] .cw-bar-track { background: var(--surface-alt-bg); } /* ---------- Historic Figures (hist_fig.css) ---------- */ html[data-theme="dark"] .hf-page-header h1, html[data-theme="dark"] .hf-profile-header h1, html[data-theme="dark"] .hf-stat-val, html[data-theme="dark"] .hf-card-head h2 a { color: var(--content-text); } html[data-theme="dark"] .hf-dash-link, html[data-theme="dark"] .hf-stat, html[data-theme="dark"] .hf-toolbar, html[data-theme="dark"] .hf-card-item, html[data-theme="dark"] .hf-profile-header, html[data-theme="dark"] .hf-card { background: var(--surface-bg); border-color: var(--content-border); } html[data-theme="dark"] .hf-dash-link:hover { background: #232f3d; } html[data-theme="dark"] .hf-toolbar--admin { background: var(--surface-alt-bg); } html[data-theme="dark"] .hf-btn-secondary { background: var(--surface-alt-bg); color: var(--content-text); border-color: var(--content-border); } html[data-theme="dark"] .hf-bio-snippet, html[data-theme="dark"] .hf-bio { color: #c4cbd4; } html[data-theme="dark"] .hf-card h3 { color: var(--content-text); } html[data-theme="dark"] .hf-type-badge, html[data-theme="dark"] .hf-coverage-pill { background: var(--surface-alt-bg); color: var(--content-text-muted); } html[data-theme="dark"] .hf-answers-table th { background: var(--surface-alt-bg); } /* ---------- Constituencies (constituency.css) ---------- */ html[data-theme="dark"] .con-page-header h1, html[data-theme="dark"] .con-card h2, html[data-theme="dark"] .con-section h2, html[data-theme="dark"] .con-demo-col h3, html[data-theme="dark"] .con-stat .con-stat-value, html[data-theme="dark"] .con-bar-name, html[data-theme="dark"] .con-bar-value, html[data-theme="dark"] .con-mini-value { color: var(--content-text); } html[data-theme="dark"] .con-link, html[data-theme="dark"] .con-toolbar, html[data-theme="dark"] .con-card, html[data-theme="dark"] .con-stat, html[data-theme="dark"] .con-section { background: var(--surface-bg); border-color: var(--content-border); } html[data-theme="dark"] .con-link:hover { background: #232f3d; } html[data-theme="dark"] .con-toolbar-field select { background: var(--surface-alt-bg); color: var(--content-text); border-color: var(--content-border); } html[data-theme="dark"] .con-bar-track { background: var(--surface-alt-bg); } html[data-theme="dark"] .con-projection-headline { background: var(--surface-alt-bg); color: var(--content-text); } html[data-theme="dark"] .con-projection-headline.changes { background: #392a24; } html[data-theme="dark"] .con-disclaimer { background: #332d1c; color: #d9c98a; border-color: #4a4226; } html[data-theme="dark"] .con-error { background: #3b2220; color: #f1b0b7; } /* ---------- Politicing workspace (politicing.css) ---------- */ html[data-theme="dark"] .politic-shell { color: var(--content-text); } html[data-theme="dark"] .politic-panel-hd { background: linear-gradient(#1e2530, #181e26); border-color: var(--content-border); } html[data-theme="dark"] .politic-qitem:hover { background: var(--surface-alt-bg); } html[data-theme="dark"] .politic-qitem.is-active { background: #20354a; } html[data-theme="dark"] .politic-chip { background: var(--surface-alt-bg); color: var(--content-text-muted); } html[data-theme="dark"] .btn-secondary { background: var(--surface-alt-bg); color: var(--content-text); border-color: var(--content-border); } html[data-theme="dark"] .btn-secondary:hover:not(:disabled) { background: #2c3542; } html[data-theme="dark"] .btn-danger-outline { background: transparent; } html[data-theme="dark"] .btn-danger-outline:hover:not(:disabled) { background: #3b2220; } html[data-theme="dark"] .politic-log, html[data-theme="dark"] .politic-draft-mc-wrap { background: var(--surface-alt-bg); } html[data-theme="dark"] .politic-modal { background: var(--surface-bg); } /* ---------- Admin (admin.css) ---------- */ html[data-theme="dark"] .admin-command-bar { background: var(--surface-alt-bg); border-color: var(--content-border); } html[data-theme="dark"] .admin-model-field label, html[data-theme="dark"] .admin-table th, html[data-theme="dark"] .admin-metadata-kv th { color: var(--content-text-muted); } html[data-theme="dark"] .admin-select, html[data-theme="dark"] .admin-actions-panel { background: var(--surface-bg); color: var(--content-text); border-color: var(--content-border); } html[data-theme="dark"] .admin-actions-tag { background: #20354a; } html[data-theme="dark"] .admin-action-item { color: var(--content-text); } html[data-theme="dark"] .admin-action-item:hover:not(:disabled) { background: var(--surface-alt-bg); } html[data-theme="dark"] .admin-table th { background: var(--surface-alt-bg); } html[data-theme="dark"] .admin-table tr.is-selected td { background: #20354a; } html[data-theme="dark"] .admin-table tr:hover td { background: var(--surface-alt-bg); } html[data-theme="dark"] .admin-metadata-answer-card { background: var(--surface-alt-bg); } html[data-theme="dark"] .admin-metadata-snippet { color: var(--content-text); } /* ---------- Questions / Answers (questions.css, answers.css, question.css) ---------- */ html[data-theme="dark"] #questionContainer, html[data-theme="dark"] .answer-card, html[data-theme="dark"] .question-container, html[data-theme="dark"] .answers-container { background: var(--surface-bg); border-color: var(--content-border); } html[data-theme="dark"] .question-header { background: var(--surface-alt-bg); border-color: var(--content-border); } html[data-theme="dark"] .question-section { border-color: var(--content-border); } html[data-theme="dark"] body .answer { background: var(--surface-alt-bg); border-color: var(--content-border); } html[data-theme="dark"] .alignment-table th { background-color: var(--surface-alt-bg); } html[data-theme="dark"] .alignment-table th, html[data-theme="dark"] .alignment-table td { border-color: var(--content-border); } /* ---------- Politician profile (politician.css) ---------- */ html[data-theme="dark"] .answers-table th { background-color: var(--surface-alt-bg); } html[data-theme="dark"] .answers-table th, html[data-theme="dark"] .answers-table td { border-color: var(--content-border); } html[data-theme="dark"] body .modal { background: var(--surface-bg); } /* ---------- Chat (chat.css) ---------- */ html[data-theme="dark"] body { background-color: var(--body-bg); } html[data-theme="dark"] .chat-container { background-color: var(--surface-bg); } html[data-theme="dark"] .chat-box .bot { color: var(--content-text); } /* ---------- Generic modal (modal.css) ---------- */ html[data-theme="dark"] .modal-content { background-color: var(--surface-bg); color: var(--content-text); } /* ---------- Questions hub (questions.html / questions_hub.js) ---------- These widgets are styled with inline style="" attributes, so !important is required to win. Scoped tightly to the hub/panel widgets. */ html[data-theme="dark"] .panel { background: var(--surface-bg) !important; } html[data-theme="dark"] .panel h2, html[data-theme="dark"] .panel h3, html[data-theme="dark"] .main-content h2 { color: var(--content-text) !important; } html[data-theme="dark"] .hub-summary-column p { color: var(--content-text-muted) !important; } html[data-theme="dark"] #hub-answered-count, html[data-theme="dark"] #hub-dominant-label { color: var(--content-text) !important; } html[data-theme="dark"] #hub-summary-verify { color: #ffe28a !important; } html[data-theme="dark"] .hub-q-card h3 { color: var(--content-text) !important; } html[data-theme="dark"] .hub-q-detail { border-top-color: var(--content-border) !important; } html[data-theme="dark"] .hub-q-detail > p { color: var(--content-text-muted) !important; } html[data-theme="dark"] .hub-q-options label { border-color: var(--content-border) !important; } html[data-theme="dark"] .hub-q-options label div { color: var(--content-text-muted) !important; } html[data-theme="dark"] .hub-q-options label div[style*="font-weight:600"] { color: var(--content-text) !important; } /* ---------- Generic form controls ---------- */ html[data-theme="dark"] body input[type="text"], html[data-theme="dark"] body input[type="number"], html[data-theme="dark"] body input[type="email"], html[data-theme="dark"] body input[type="password"], html[data-theme="dark"] body input[type="search"], html[data-theme="dark"] body textarea, html[data-theme="dark"] body select { background-color: var(--surface-alt-bg); color: var(--content-text); border-color: var(--content-border); }