/* * Estilos próprios do SIG — complementam o Tabler (https://tabler.io), * nunca o substituem. Nenhum outro framework de CSS entra aqui. * * Índice * 1. Tokens de aparência (cor, raio) por atributo no * 2. Marca * 3. Shell: sidebar, menu, topo * 4. Busca rápida (Ctrl+K) * 5. Alternância de tema * 6. Componentes (KPI, estado vazio, toasts) * 7. Telas de autenticação * 8. Impressão */ /* ------------------------------------------------------------------ * * 1. Tokens de aparência * * O painel de aparência só troca atributos no ; as variantes do * Tabler (-lt, -darken, botões, links, badges) derivam sozinhas de * --tblr-primary via color-mix(). Por isso trocar a cor do sistema * inteiro custa uma linha, e nenhuma visão precisa de style inline. * * O seletor usa html[...] (0,1,1) de propósito: precisa vencer o * :root e o [data-bs-theme=dark] do próprio Tabler, que valem (0,1,0). * ------------------------------------------------------------------ */ html[data-sig-cor="blue"] { --tblr-primary: #066fd1; --tblr-primary-rgb: 6, 111, 209; } html[data-sig-cor="azure"] { --tblr-primary: #4299e1; --tblr-primary-rgb: 66, 153, 225; } html[data-sig-cor="indigo"] { --tblr-primary: #4263eb; --tblr-primary-rgb: 66, 99, 235; } html[data-sig-cor="purple"] { --tblr-primary: #ae3ec9; --tblr-primary-rgb: 174, 62, 201; } html[data-sig-cor="pink"] { --tblr-primary: #d6336c; --tblr-primary-rgb: 214, 51, 108; } html[data-sig-cor="red"] { --tblr-primary: #d63939; --tblr-primary-rgb: 214, 57, 57; } html[data-sig-cor="orange"] { --tblr-primary: #f76707; --tblr-primary-rgb: 247, 103, 7; } html[data-sig-cor="yellow"] { --tblr-primary: #f59f00; --tblr-primary-rgb: 245, 159, 0; } html[data-sig-cor="lime"] { --tblr-primary: #74b816; --tblr-primary-rgb: 116, 184, 22; } html[data-sig-cor="green"] { --tblr-primary: #2fb344; --tblr-primary-rgb: 47, 179, 68; } html[data-sig-cor="teal"] { --tblr-primary: #0ca678; --tblr-primary-rgb: 12, 166, 120; } html[data-sig-cor="cyan"] { --tblr-primary: #17a2b8; --tblr-primary-rgb: 23, 162, 184; } html[data-sig-raio="0"] { --tblr-border-radius: 0; } html[data-sig-raio="2"] { --tblr-border-radius: 2px; } html[data-sig-raio="4"] { --tblr-border-radius: 4px; } html[data-sig-raio="6"] { --tblr-border-radius: 6px; } html[data-sig-raio="8"] { --tblr-border-radius: 8px; } html[data-sig-raio="12"] { --tblr-border-radius: 12px; } /* ------------------------------------------------------------------ * * 2. Marca * ------------------------------------------------------------------ */ .sig-marca-nome { letter-spacing: 0.08em; } .sig-marca-icone { border-radius: var(--tblr-border-radius); } /* ------------------------------------------------------------------ * * 3. Shell * ------------------------------------------------------------------ */ /* Título de seção na sidebar (o Tabler não traz um). */ .sig-menu-secao { padding: 1rem 0.75rem 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tblr-secondary); } /* No menu horizontal as seções viram um traço vertical discreto. */ .sig-menu-divisor { align-self: center; width: 1px; height: 1.25rem; margin: 0 0.5rem; background: var(--tblr-border-color); } /* Módulo previsto no PRD e ainda não entregue. */ .sig-menu-breve { opacity: 0.55; cursor: default; } .sig-menu-rodape { display: flex; align-items: center; gap: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--tblr-border-color); } .sig-topo-legenda { font-size: 0.875rem; } /* ------------------------------------------------------------------ * * 4. Busca rápida * ------------------------------------------------------------------ */ .sig-botao-busca { min-width: 15rem; display: flex; align-items: center; justify-content: flex-start; background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); color: var(--tblr-secondary); } .sig-botao-busca kbd { font-size: 0.625rem; } .sig-botao-busca:hover { border-color: var(--tblr-primary); } .sig-busca-resultados .list-group-item.active, .sig-busca-resultados .list-group-item:focus-visible { background: var(--tblr-bg-surface-secondary); color: inherit; border-color: var(--tblr-border-color); } .sig-busca-secao { font-size: 0.75rem; color: var(--tblr-secondary); } /* ------------------------------------------------------------------ * * 5. Alternância de tema * Mostra a lua no claro e o sol no escuro — só um ícone por vez. * ------------------------------------------------------------------ */ .sig-alternar-tema .sig-icone-claro { display: none; } [data-bs-theme="dark"] .sig-alternar-tema .sig-icone-escuro { display: none; } [data-bs-theme="dark"] .sig-alternar-tema .sig-icone-claro { display: inline-block; } /* ------------------------------------------------------------------ * * 6. Componentes * ------------------------------------------------------------------ */ .sig-kpi { transition: transform 0.12s ease, box-shadow 0.12s ease; } .sig-kpi:hover { transform: translateY(-2px); box-shadow: var(--tblr-box-shadow); } .sig-kpi-valor { font-variant-numeric: tabular-nums; line-height: 1.1; } .sig-empty-icone { font-size: 3rem; line-height: 1; color: var(--tblr-secondary); } /* Container dos toasts (notificação — nunca alert() nativo). */ #sig-toasts { max-width: 24rem; z-index: 1090; } /* Ícone de destaque do modal de confirmação. */ .sig-icone-alerta { font-size: 3rem; line-height: 1; } /* Área de gráfico: reserva a altura antes do ApexCharts desenhar, para a página não pular quando o gráfico monta. */ .sig-grafico { min-height: 15rem; } .sig-grafico-sm { min-height: 2.5rem; } /* Mapa vetorial (jsvectormap) — precisa de altura explícita para desenhar. */ .sig-mapa { height: 22rem; } /* ------------------------------------------------------------------ * * 7. Autenticação * ------------------------------------------------------------------ */ .sig-auth-tema { position: fixed; top: 1rem; right: 1rem; z-index: 10; } /* ------------------------------------------------------------------ * * 8. Impressão * ------------------------------------------------------------------ */ @media print { .sig-kpi:hover { transform: none; box-shadow: none; } }