/* * CRONUS-RUN — Tema escuro (cinza neutro), alternável em tempo real * Antes esse arquivo sobrescrevia as cores incondicionalmente sempre que * incluído. Agora toda regra é condicionada a `[data-theme="dark"]` no * (ligado/desligado pelo botão flutuante — ver /js/theme-toggle.js), * então o arquivo pode continuar incluído em toda página sem forçar o tema. */ /* Fonte (Inter/JetBrains Mono) importada globalmente em base.css agora. */ :root[data-theme="dark"] { --color-primary: #4E535C; --color-primary-dark: #262A30; --color-primary-light: rgba(255, 255, 255, .07); --color-accent: #F2A93B; --color-success: #3DDC84; --color-bg: #34383F; --color-surface: #3F434B; --color-surface-alt: #4A4F58; --color-text: #F2F3F5; --color-text-muted: #ADB4BE; --color-border: rgba(255, 255, 255, .11); /* fonte e raio já vêm modernos de tokens.css - sem overrides aqui */ } /* Cabeçalho: sem faixa colorida, só um fio dourado embaixo */ [data-theme="dark"] .app-header__bar { background: var(--color-bg); border-bottom: 1px solid rgba(242, 169, 59, .18); } [data-theme="dark"] .pill { display: inline-flex; align-items: center; gap: 6px; } /* Cartões: sem sombra, se distinguem pelo tom (surface x bg) + borda fina */ [data-theme="dark"] .card, [data-theme="dark"] .stat-tile { border: 1px solid rgba(255, 255, 255, .06); box-shadow: none; } [data-theme="dark"] .timer-panel { box-shadow: none; } [data-theme="dark"] .card__header { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .06); padding: var(--space-4) var(--space-5); } [data-theme="dark"] .card__header h2, [data-theme="dark"] .card__header h3 { color: var(--color-text); text-transform: none; font-size: 14px; font-weight: 800; } /* Cronômetro com glow (mesma técnica do telão) */ [data-theme="dark"] .timer-panel__value { font-family: var(--font-mono); color: var(--color-accent); text-shadow: 0 0 30px rgba(242, 169, 59, .35); } [data-theme="dark"] .stat-tile__value { color: var(--color-text); } /* Status em pill preenchido, translúcido */ [data-theme="dark"] .status-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: var(--radius-pill); font-size: 12.5px; } [data-theme="dark"] .status-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } [data-theme="dark"] .status-tag--active { background: rgba(61, 220, 132, .14); color: var(--color-success); } [data-theme="dark"] .status-tag--paused { background: rgba(242, 169, 59, .14); color: var(--color-accent); } /* Botão fantasma (Som/Vibração desligados) — no claro usava --color-primary como cor de texto; aqui isso ficaria escuro sobre fundo escuro */ [data-theme="dark"] .btn--ghost { color: var(--color-text-muted); border-color: rgba(255, 255, 255, .12); } [data-theme="dark"] .btn--xl.btn--accent { box-shadow: 0 14px 30px -10px rgba(242, 169, 59, .5); } /* Botão de sucesso (fundo verde-menta claro) — texto branco (padrão do componente) fica com contraste ruim sobre essa cor; usa texto escuro. */ [data-theme="dark"] .btn--success { color: var(--color-primary-dark); } /* Campos de formulário escuros */ [data-theme="dark"] .form-control { background: var(--color-surface-alt); border-color: rgba(255, 255, 255, .1); color: var(--color-text); } [data-theme="dark"] .form-control::placeholder { color: var(--color-text-muted); } [data-theme="dark"] .form-control:focus { border-color: var(--color-accent); } /* Select de evento no cabeçalho — mesmo limite do theme-energia.css pra não estourar a tela no mobile com nome de evento longo */ [data-theme="dark"] .app-header__status { flex-wrap: wrap; row-gap: 8px; } [data-theme="dark"] .app-header__status select.form-control { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 639px) { [data-theme="dark"] .app-header__status select.form-control { max-width: 100%; flex: 1 1 100%; } } /* Spotlight (atleta localizado na busca) */ [data-theme="dark"] .spotlight { background: var(--color-surface); border: 1px solid rgba(242, 169, 59, .3); border-left: none; } [data-theme="dark"] .spotlight__meta { color: var(--color-text-muted); } /* Tabela */ [data-theme="dark"] .table th { background: transparent; color: var(--color-text-muted); border-bottom: 1px solid rgba(255, 255, 255, .06); } [data-theme="dark"] .table td { border-bottom: 1px solid rgba(255, 255, 255, .04); } [data-theme="dark"] .table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); } [data-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, .04); } /* 1º lugar em destaque dourado translúcido */ [data-theme="dark"] .position-badge--1 { background: rgba(242, 169, 59, .16); border-color: transparent; color: var(--color-accent); } /* Textos/ícones que usavam --color-primary(-dark) como cor de LETRA — no tema claro isso era azul-escuro legível sobre branco; aqui esses tokens viraram cor de fundo escura, então o texto ficava preto sobre preto. */ [data-theme="dark"] .page-heading__back { color: var(--color-accent); } [data-theme="dark"] .quick-card h2 { color: var(--color-text); } [data-theme="dark"] .link-item__icon .icon-svg { color: var(--color-text-muted); } [data-theme="dark"] .link-item strong { color: var(--color-text); } [data-theme="dark"] .status-item__title { color: var(--color-text); } [data-theme="dark"] .arrival-item__name { color: var(--color-text); } /* "Secundário" (ex.: Fx/Cat/Mod em Gerenciar Eventos) — verde, não amarelo; amarelo fica reservado pro destaque de aba selecionada, abaixo. OBS: não existe botão .btn sem variante no sistema (conferido), então não sobrescrevemos a classe base — isso evitava atropelar as cores semânticas (Excluir/vermelho, Editar/azul etc., que dependiam da ordem do CSS). */ [data-theme="dark"] .btn--secondary { background: transparent; color: var(--color-success); border-color: var(--color-success); } /* Abas selecionadas (Gerenciar Eventos, Configurar Evento, login e qualquer outro grupo "*-tabs"): título verde + contorno amarelo pra destacar */ [data-theme="dark"] [class$="-tabs"] .btn--primary { color: var(--color-success); background: var(--color-surface-alt); border-color: var(--color-accent); } /* Mensagem de status neutra (ex.: feedback de salvar faixa/categoria/ modalidade em Gerenciar Eventos) usava cinza escuro fixo sobre fundo que agora também é escuro — texto praticamente ilegível */ [data-theme="dark"] .status-message { color: var(--color-text); } /* Superfícies com fundo branco fixo (não usavam token nenhum) + texto que virou claro: toast, modal e tooltip ficavam com letra invisível */ [data-theme="dark"] .info-tip__popover { background: var(--color-surface-alt); } [data-theme="dark"] .modal__panel { background: var(--color-surface); } [data-theme="dark"] .toast { background: var(--color-surface); border-color: rgba(255, 255, 255, .08); } /* Menu suspenso do desktop (submenu tinha fundo branco fixo) */ @media (min-width: 1024px) { [data-theme="dark"] .app-nav__submenu { background: var(--color-surface); border-color: rgba(255, 255, 255, .08); } [data-theme="dark"] .app-nav__link { color: var(--color-text); } [data-theme="dark"] .app-nav__link strong { color: var(--color-text); } [data-theme="dark"] .app-nav__link span { color: var(--color-text-muted); } [data-theme="dark"] .app-nav__link:hover { background: var(--color-surface-alt); } }