/* public/css/theme.css * Tema Sistema / Básica / Escura -- fonte única de cor pra todo o sistema * (concursos, admin, ENEM, aluno). Ver public/js/theme.js pra como o * atributo data-bs-theme é aplicado no . * * Tokens do tema básico (claro) ficam em :root com valores próximos aos * hardcoded que já existiam em cada página, pra não mudar o visual de * quem não trocar de tema. html[data-bs-theme="dark"] redefine os mesmos * tokens pro tema escuro. */ :root { --page-bg: #f8f9fa; --card-bg: #ffffff; --text: #212529; --text-muted: #6c757d; --border: #e9ecef; --correct-bg: #d4edda; --correct-border: #28a745; --correct-text: #14532d; --incorrect-bg: #f8d7da; --incorrect-border: #dc3545; --incorrect-text: #7f1d1d; --highlight-bg: #e3f2fd; --highlight-border: #0d6efd; --admin-page-bg: #f0f2f5; --admin-sidebar-bg: #1a252f; --admin-sidebar-text: #95a5a6; --admin-sidebar-hover-bg: #2c3e50; --admin-accent: #3498db; /* absorvido de public/css/style.css (lado concursos) */ --primary: #4e73df; --primary-hover: #224abe; } html[data-bs-theme="dark"] { --page-bg: #1a1d23; --card-bg: #22262f; --text: #e8eaed; --text-muted: #9aa0ac; --border: #343a44; --correct-bg: #17321f; --correct-border: #2f8a4a; --correct-text: #8fe3a6; --incorrect-bg: #3a1e22; --incorrect-border: #c94f4f; --incorrect-text: #f2a8ab; --highlight-bg: #1c2d3d; --highlight-border: #4c8fd4; --admin-page-bg: #14161c; /* --admin-sidebar-* ficam iguais -- a sidebar ja e escura nos dois temas */ } /* ---------- Conteúdo geral (concursos + ENEM + aluno) ---------- */ body { background: var(--page-bg); color: var(--text); } .card-quiz, .questao-card, .form-container { background: var(--card-bg); color: var(--text); } .alternativa { border-color: var(--border); color: var(--text); } .correta { background: var(--correct-bg) !important; border-color: var(--correct-border) !important; color: var(--correct-text) !important; } .correta strong, .correta b { color: inherit; } .incorreta { background: var(--incorrect-bg) !important; border-color: var(--incorrect-border) !important; color: var(--incorrect-text) !important; } .incorreta strong, .incorreta b { color: inherit; } .explicacao.correta, .explicacao.incorreta { color: inherit; } .grade-item { background: var(--card-bg); border-color: var(--border); color: var(--text); } .grade-item.respondida, .alternativa.selecionada { background: var(--highlight-bg) !important; border-color: var(--highlight-border) !important; color: var(--text) !important; } .feedback-area { color: var(--text); } /* ---------- Admin ---------- */ .admin-body { background: var(--admin-page-bg); } .sidebar { background: var(--admin-sidebar-bg); color: #fff; } .sidebar a { color: var(--admin-sidebar-text); } .sidebar a:hover, .sidebar a.active { background: var(--admin-sidebar-hover-bg); color: #fff; border-left-color: var(--admin-accent); } .sidebar-categoria { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--admin-sidebar-text); opacity: 0.65; padding: 18px 20px 4px; } .card-nao-lido, .user-card.active { background: var(--highlight-bg) !important; border-left-color: var(--highlight-border) !important; } .badge-detalhe { background: var(--border); color: var(--text-muted); } .cargo-box, .edital-card, .questao-teste { background: var(--card-bg); border-color: var(--border); color: var(--text); } /* ---------- Loading overlay (lado concursos) ---------- */ .loading-overlay { background: color-mix(in srgb, var(--page-bg) 85%, transparent); color: var(--text); } /* ---------- Seletor de tema (mesmo componente em toda página) ---------- * Grupo de 3 botões (não dropdown) de propósito -- é CSS puro do * Bootstrap (.btn-group), não depende de bootstrap.bundle.min.js estar * carregado, e algumas páginas do admin não carregam esse bundle. */ .tema-seletor .btn { color: var(--text-muted); border-color: var(--border); } .tema-seletor .btn.active { background: var(--admin-accent); border-color: var(--admin-accent); color: #fff; } /* variante clara pra usar sobre fundo escuro fixo (navbar-enem, .topo, .header-simulado) -- independe do tema escolhido, o fundo ali nunca muda */ .tema-seletor.tema-seletor-claro .btn { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.4); } .tema-seletor.tema-seletor-claro .btn.active { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); color: #1a252f; }