/* JudgeMe theme variants — activated via data-theme on */ :root, [data-theme="classic"] { --jm-bg: #f4f7fb; --jm-surface: #ffffff; --jm-text: #212529; --jm-muted: #6c757d; --jm-primary: #0d6efd; --jm-primary-hover: #0b5ed7; --jm-primary-dark: #0a58ca; --jm-accent: #20c997; --jm-accent-text: #ffffff; --jm-hero-gradient: linear-gradient(135deg, #0d6efd 0%, #0a58ca 55%, #084298 100%); --jm-navbar-bg: #0d6efd; --jm-score-color: #0d6efd; --jm-link-hover: #0d6efd; --jm-border: #dee2e6; --jm-ranking-highlight: #f8f9fa; --jm-card-shadow: 0 0.125rem 0.4rem rgba(13, 110, 253, 0.08); --jm-switcher-bg: rgba(255, 255, 255, 0.95); } [data-theme="festive"] { --jm-bg: #fff9f2; --jm-surface: #ffffff; --jm-text: #3d2914; --jm-muted: #7a5c3a; --jm-primary: #b8860b; --jm-primary-hover: #9a7209; --jm-primary-dark: #8b4513; --jm-accent: #c41e3a; --jm-accent-text: #ffffff; --jm-hero-gradient: linear-gradient(135deg, #8b0000 0%, #b22222 48%, #6b1a1a 100%); --jm-navbar-bg: #7f1010; --jm-score-color: #b8860b; --jm-link-hover: #8b4513; --jm-border: #ecd9c6; --jm-ranking-highlight: #fff4e6; --jm-card-shadow: 0 0.15rem 0.45rem rgba(139, 69, 19, 0.12); --jm-switcher-bg: rgba(255, 252, 245, 0.96); } [data-theme="midnight"] { --jm-bg: #0c1118; --jm-surface: #161f2e; --jm-text: #e8edf4; --jm-muted: #94a3b8; --jm-primary: #38bdf8; --jm-primary-hover: #0ea5e9; --jm-primary-dark: #0284c7; --jm-accent: #fbbf24; --jm-accent-text: #1e293b; --jm-hero-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #020617 100%); --jm-navbar-bg: #0f172a; --jm-score-color: #fbbf24; --jm-link-hover: #38bdf8; --jm-border: #2a3548; --jm-ranking-highlight: #1c2738; --jm-card-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.35); --jm-switcher-bg: rgba(22, 31, 46, 0.96); } body { background-color: var(--jm-bg); color: var(--jm-text); } .navbar-theme { background-color: var(--jm-navbar-bg) !important; position: relative; z-index: 1030; } [data-theme="festive"] .btn-primary, [data-theme="midnight"] .btn-primary { background-color: var(--jm-primary); border-color: var(--jm-primary-dark); } [data-theme="festive"] .btn-primary:hover, [data-theme="midnight"] .btn-primary:hover { background-color: var(--jm-primary-hover); border-color: var(--jm-primary-dark); } [data-theme="midnight"] .card, [data-theme="midnight"] .list-group-item, [data-theme="midnight"] .form-control, [data-theme="midnight"] .form-select { background-color: var(--jm-surface); color: var(--jm-text); border-color: var(--jm-border); } [data-theme="midnight"] .list-group-item-action:hover { background-color: var(--jm-ranking-highlight); color: var(--jm-text); } [data-theme="midnight"] .text-muted { color: var(--jm-muted) !important; } [data-theme="midnight"] .breadcrumb-item a { color: var(--jm-primary); } [data-theme="festive"] .dashboard-badge-live, [data-theme="midnight"] .dashboard-badge-live { background: var(--jm-accent); color: var(--jm-accent-text); } [data-theme="varsseveld"] { --jm-bg: #bcd4ea; --jm-sky-top: #eaf4ff; --jm-sky-mid: #cde7ff; --jm-sky-bottom: #bcd4ea; --jm-surface: #ffffff; --jm-text: #1a3352; --jm-muted: #4d6b85; --jm-primary: #1a3352; --jm-primary-hover: #12243b; --jm-primary-dark: #0f1e30; --jm-accent: #f07820; --jm-accent-text: #ffffff; --jm-hero-gradient: linear-gradient(180deg, #eaf4ff 0%, #cde7ff 45%, #bcd4ea 100%); --jm-navbar-bg: #1a3352; --jm-footer-bg: #1a3352; --jm-score-color: #f07820; --jm-link-hover: #f07820; --jm-border: #a8c9de; --jm-ranking-highlight: #edf6fc; --jm-card-shadow: 0 0.2rem 0.55rem rgba(26, 51, 82, 0.1); --jm-switcher-bg: rgba(255, 255, 255, 0.97); --jm-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --jm-font-display: "Bebas Neue", "Arial Narrow", sans-serif; } body[data-theme="varsseveld"] { font-family: var(--jm-font-body); } [data-theme="varsseveld"] .btn-primary { background-color: var(--jm-primary); border-color: var(--jm-primary-dark); } [data-theme="varsseveld"] .btn-primary:hover { background-color: var(--jm-primary-hover); border-color: var(--jm-primary-dark); } [data-theme="varsseveld"] .btn-accent { background-color: var(--jm-accent); border-color: #c96200; color: var(--jm-accent-text); } [data-theme="varsseveld"] .btn-accent:hover { background-color: #c96200; border-color: #a85200; color: var(--jm-accent-text); } [data-theme="varsseveld"] .dashboard-badge-live, [data-theme="varsseveld"] .badge.bg-primary { background: var(--jm-accent) !important; color: var(--jm-accent-text); } [data-theme="varsseveld"] .text-muted { color: var(--jm-muted) !important; } [data-theme="varsseveld"] .breadcrumb-item a { color: var(--jm-primary); }