/* * --text, --accent, --accent-text e --radius NÃO estão mais aqui -- * moveram pra tokens.css (item 25), que agora é a única fonte desses 4 * nomes. A aparência de hoje é preservada pela classe .legacy-shell (no * de index/wall/tutorial), que redeclara os valores antigos * exatos abaixo. --accent-dim fica aqui mesmo -- não colide, e seu valor * rgba já é literal (não referencia var(--accent)). * * Rebrand Greyes (ver PROJECT.md): paleta abaixo trocada de âmbar/Élis * pra verde/Greyes -- --green/--red/--yellow continuam nomes semânticos * (sucesso/erro/atenção), só os valores hex mudaram. */ :root { --bg: #1A2225; --bg-alt: #20292D; --panel: #232C30; --panel2: #2B353B; --border: #333B40; --muted: #9BA1A7; --accent-dim: rgba(53, 208, 126, .14); --green: #35D07E; --red: #F26D6D; --yellow: #F5C453; --shadow: 0 6px 20px rgba(0, 0, 0, .28); } /* Item pedido pelo cliente: modo claro, escolha do usuário (persistido em users.preferences.theme via PUT /api/auth/me/preferences, aplicado no boot -- ver applyTheme() em app.js). Derivado da mesma paleta Greyes -- fundo/superfícies claros, verde de marca recalibrado mais escuro nos três semânticos (--green/--red/--yellow) pra manter contraste AA sobre branco (--accent/--accent-text vêm do .legacy-shell, ver nota abaixo). */ :root[data-theme="light"] { --bg: #F4F6F5; --bg-alt: #FFFFFF; --panel: #FFFFFF; --panel2: #EEF2F0; --border: #D8DEDB; --muted: #5C6560; --accent-dim: rgba(43, 184, 108, .12); --green: #1F9D5C; --red: #C0392B; --yellow: #8A6100; --shadow: 0 2px 12px rgba(20, 30, 25, .08); } /* --text/--accent-text são redeclarados pelo .legacy-shell (ver tokens.css) direto no , o que vence a herança de :root -- precisa de uma regra pelo menos tão específica quanto essa, mirando body, pra ganhar no claro. */ html[data-theme="light"] body.legacy-shell { --text: #182022; --accent-text: #12181B; } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--font-sans, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif); background: var(--bg); color: var(--text); font-size: 15.5px; } button { cursor: pointer; background: var(--accent); color: var(--accent-text); border: none; border-radius: 7px; padding: 8px 14px; font-size: 15px; font-weight: 500; transition: filter .15s ease, transform .05s ease; } button:hover { filter: brightness(1.1); } button:active { transform: translateY(1px); } button:disabled { opacity: .5; cursor: not-allowed; } button.ghost, a.ghost { background: var(--panel2); color: var(--text); } button.ghost:hover, a.ghost:hover { background: #232f3d; filter: none; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 8px 10px; font-size: 15px; } textarea { font-family: inherit; resize: vertical; width: 100%; } /* Multi-select nativo (config em lote, rota de notificação) fica muito cru por padrão -- só o hint "Ctrl/Cmd+clique" dava conta de indicar o comportamento. Opção marcada ganha destaque de cor + linha lateral, linhas ganham respiro/hover -- sem trocar o do cabeçalho "Alarmes por hora do dia" já quebram linha (flex-wrap no próprio index.html) -- aqui só dá um tamanho mínimo razoável pra cada um em vez de ficarem do tamanho mínimo do conteúdo, mesmo tratamento já dado aos selects da toolbar (linha acima). */ #dash-chart-site, #dash-chart-days { flex: 1 1 140px; } /* Botão "Ver alarmes" do popup do mapa tinha padding fixo menor que o `button` genérico do mobile (e vencia por especificidade) -- ficava pequeno demais pra tocar dentro de um popup do Leaflet já compacto. */ .leaflet-popup-content .usina-popup button { padding: 8px 12px; } /* Botões de zoom do Leaflet (só aparecem no modal em tela cheia, ver _openUsinaMapModal) -- o próprio Leaflet já sobe pra 30px em touch, mas ainda fica abaixo do alvo confortável de dedo; sem risco pro resto do app porque Leaflet só existe no Dashboard. */ .leaflet-touch .leaflet-bar a { width: 38px; height: 38px; line-height: 38px; } /* Cornetas: cada linha de #output-list tem um input de renomear (160px fixos) + um segundo grupo (duração + rótulo + Testar + Histórico + Excluir) sem quebra -- somado, precisa de bem mais que os ~330px úteis de um celular. `.lt-wrap` na própria `

` já separa os dois `` em linhas próprias; o segundo `` (já é `display:flex` via style inline) também recebe `flex-wrap` pra aguentar qualquer combinação de tamanho de botão sem estourar, mesmo que sobre pra 3 linhas em telas bem estreitas. Mesmo padrão de #rec-timeline-list li (Gravações): escopado só a essa lista. */ #output-list li { flex-wrap: wrap; } #output-list li > span { flex-wrap: wrap; } /* Central de Alarmes: .ap-card-actions/.ap-tab/.ap-vm/.ap-chip têm seletor de classe, então vencem por especificidade o `button { padding:10px 14px }` genérico do item 147 -- ficavam com alvo de toque de ~24-32px em qualquer largura de tela, sem herdar o reforço mobile. Escopado só ao mobile pra não engordar os botões compactos no desktop (onde o layout foi desenhado pra caber mais coisa por linha). */ .ap-card-actions button { padding: 9px 6px; min-height: 40px; } .ap-tab { padding: 10px 14px; } .ap-vm { padding: 9px 14px; } .ap-chip { padding: 7px 14px; } /* Regras de Alarme: mesmo padrão de #rec-timeline-list/#output-list -- nome + 2 pills + 2 linhas de metadados de um lado, 2 botões do outro, sem quebra nenhuma antes disso. */ #alarmrule-list li { flex-wrap: wrap; } /* Chips de dia da semana (Vigência, item 42) ficavam em ~24-26px de altura -- o usuário normalmente marca vários em sequência, então é a repetição de toques pequenos que mais incomoda. */ .evrule-day-label { padding: 9px 12px; } /* Relatórios: lista "Veículos" (placa + câmera à esquerda, data/hora por extenso à direita) tinha o mesmo padrão sem `flex-wrap` de #rec-timeline-list/#output-list -- nome de câmera longo + data completa podia quebrar de forma desalinhada dentro do item. */ #rep-vehicles li { flex-wrap: wrap; } /* Câmeras: botão "Carregar" da coluna Imagem tinha 23px de altura medidos (seletor de 2 classes vence o `button` genérico) -- é o botão que o texto de ajuda da própria tela pede pra tocar linha a linha, com ~250 câmeras no parque. */ .cam-mgmt-thumb button { padding: 8px 10px; min-height: 36px; } /* Abas "Todas/Online/Offline" (mesmo motivo de especificidade). */ .tab-inline { padding: 9px 14px; } /* Sites: lista sem flex-wrap -- nome de site longo empurrava os botões Editar/Excluir pra uma coluna estreita de 72px, um empilhado sobre o outro, encostados na borda direita. */ #site-list li { flex-wrap: wrap; } /* Papéis customizados: checkbox de 15px (padrão global) fica pequeno demais pra tocar numa lista longa e densa de sites/categorias. Só o alvo de toque sobe no mobile; o espaçamento entre linhas (.role-check- row acima) já vale em qualquer tela. Escopado só a essa lista, não ao checkbox global do app. */ .role-check-row input[type="checkbox"] { width: 20px; height: 20px; } .role-check-row { padding: 7px 0; } }