/* ===================================================================== * EMNG.Tema — overrides do tema escuro. * * Estrategia: o sistema usa CSS custom properties pra todas as cores. * Pra dark mode, sobrescrevemos os mesmos nomes quando o tem * data-theme="dark" (aplicado via EMNG.Tema.js, com persistencia em * localStorage e fallback pra prefers-color-scheme). * * Cobre os tokens definidos em EMNG.css e EMNG.Shell.css. Alguns * componentes especificos (Modal, Toast, Skeleton, etc.) tem suas * proprias regras de cor — quando precisam de ajuste no dark, vao * pro arquivo respectivo via `[data-theme="dark"]` scope. * * Filosofia das cores: paleta slate (Tailwind) pra superficies, com * status (success/danger/etc) mantendo o hue mas em variantes mais * desaturadas/escuras pra harmonizar com o fundo escuro. * ===================================================================== */ [data-theme="dark"] { /* ===== Superficies / fundos ===== * body -> fundo da app (atras do shell) * content -> cards, modais (uma tonalidade acima do body) * shell-bg -> background do shell layout (igual body) * surface-soft -> headers de sessao, areas levemente destacadas * surface-border -> bordas */ --body: #0f172a; --content: #1e293b; --shell-bg: #0f172a; --surface-soft: #1a2536; --surface-border: #334155; /* ===== Texto ===== * dark -> era navy no light (cor de texto principal); aqui vira slate-200 * text -> idem * text-light -> secundario * text-muted -> placeholders, metadata */ --dark: #e2e8f0; --text: #e2e8f0; --text-light: #cbd5e1; --text-muted: #94a3b8; /* ===== Escala "dark" ===== * No light, --dark-N e' tinta do navy base: -10/-20 sao cinzas * claros (divisorias/bgs sutis), -50/-70 sao textos cada vez mais * carregados. * * No dark, INVERTEMOS o eixo: -10/-20 sao tons proximos do fundo * (divisorias, bgs sutis); -50/-70 sao tons CADA VEZ MAIS CLAROS * pra textos muted (-50 menos contraste, -70 mais contraste). * * Errar isso faz subtitles ficarem invisiveis (slate-500 em fundo * slate-800 e' quase imperceptivel). */ --dark-10: #1e293b; --dark-20: #334155; --dark-50: #94a3b8; --dark-70: #cbd5e1; /* ===== Secundaria (tints cinzas levissimos no light) ===== * No dark, secondary-50 e' usado pra zebra de tabela — entao * mantemos algo SUTIL acima do content (~#222e42). */ --secondary: #334155; --secondary-50: #222e42; --secondary-70: #1c2638; --secondary-dark: #475569; /* ===== Primary ===== * Mantemos o azul base; tints precisam ser mais escuros pra serem * legiveis sobre fundo dark (eram tints claros no light). */ --primary: rgb(0, 123, 255); --primary-10: rgba(0, 123, 255, 0.10); --primary-20: rgba(0, 123, 255, 0.18); --primary-30: rgba(0, 123, 255, 0.26); --primary-50: rgba(0, 123, 255, 0.40); --primary-75: rgba(0, 123, 255, 0.62); --primary-dark: rgb(96, 165, 250); /* ===== Success / Danger / Info / Warning ===== * Hue mantido, tints "10" e "20" viram backgrounds escuros com a cor * por baixo (rgba), enquanto "dark" vira a versao MAIS clara/saturada * pra texto sobre o fundo escuro. */ --success: #22c55e; --success-10: rgba(34, 197, 94, 0.10); --success-20: rgba(34, 197, 94, 0.18); --success-50: rgba(34, 197, 94, 0.45); --success-70: rgba(34, 197, 94, 0.65); --success-dark: #86efac; --info: #38bdf8; --info-10: rgba(56, 189, 248, 0.10); --info-20: rgba(56, 189, 248, 0.18); --info-50: rgba(56, 189, 248, 0.45); --info-dark: #7dd3fc; --warning: #facc15; --warning-10: rgba(250, 204, 21, 0.10); --warning-20: rgba(250, 204, 21, 0.18); --warning-50: rgba(250, 204, 21, 0.45); --warning-dark: #fde047; --danger: #ef4444; --danger-10: rgba(239, 68, 68, 0.10); --danger-20: rgba(239, 68, 68, 0.18); --danger-50: rgba(239, 68, 68, 0.45); --danger-70: rgba(239, 68, 68, 0.65); --danger-dark: #fca5a5; /* ===== Sombras ===== * No light, sombras sao pretas com baixa opacidade. No dark, sombras * pretas somem; usamos sombras mais escuras + opacidade maior. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.60); /* ===== Cores de marca ===== * No light, marca-navy (#02405B) e' usada pra titulos de pagina * (.titulo-funcao). Em dark fica invisivel — invertemos pra um * tom claro com a mesma vibracao "marca". marca-verde mantem * o hue mas mais claro pra ler em superficies escuras. */ --marca-navy: #7dd3fc; --marca-verde: #86efac; /* ===== Bootstrap CSS vars ===== * Bootstrap 5 expoe varias custom props (--bs-*). Por default elas * tem valores de tema claro hardcoded. Sobrescrevemos as mais usadas * em componentes (cards, listas vazias, dropdowns, tabelas) pra que * as classes nativas do BS respeitem o dark sem precisar de scope. */ --bs-body-bg: var(--body); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-tertiary-bg: var(--surface-soft); --bs-secondary-bg: var(--surface-soft); --bs-secondary-color: var(--text-light); --bs-tertiary-color: var(--text-muted); --bs-heading-color: var(--text); --bs-link-color: var(--primary-dark); --bs-link-hover-color: var(--primary); --bs-border-color: var(--surface-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.08); /* ===== Tokens dos modais auxiliares (SelectModal/MultiSelectModal/ * DateModal) — eles tem CSS vars proprios (em-XXX-modal-*) que * vazam pra o componente. Sobrescrevemos pra dark aqui. ===== */ --em-multi-modal-bg: var(--content); --em-multi-modal-bg-soft: var(--surface-soft); --em-multi-modal-border: var(--surface-border); --em-multi-modal-text: var(--text); --em-multi-modal-text-muted: var(--text-muted); --em-multi-modal-text-disabled: var(--dark-50); --em-date-modal-bg: var(--content); --em-date-modal-bg-soft: var(--surface-soft); --em-date-modal-border: var(--surface-border); --em-date-modal-text: var(--text); --em-date-modal-text-muted: var(--text-muted); --em-date-modal-text-disabled: var(--dark-50); } /* ============================================================ * Ajustes pontuais — onde o token sozinho nao resolve. * ============================================================ */ /* Bootstrap usa cor de fundo body via .table — explicita aqui pra dark. */ [data-theme="dark"] body { color: var(--text); } /* Imagem dos avatars de iniciais (background azul) — sem ajuste, fica OK */ /* Inputs no dark: borda mais clara + bg do content */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--surface-soft); color: var(--text); border-color: var(--surface-border); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus, [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--surface-soft); color: var(--text); border-color: var(--primary); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted); opacity: 0.7; } [data-theme="dark"] input:disabled, [data-theme="dark"] textarea:disabled, [data-theme="dark"] select:disabled, [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background-color: var(--body); color: var(--text-muted); } /* Botoes Bootstrap btn-outline-* no dark — o outline padrao perde * contraste com o fundo escuro. */ /* btn-primary: o codigo usa `color: var(--content)` pra texto branco * em cima do azul. No dark, --content vira slate-800 → texto fica * navy sobre azul (ilegivel). Fixa em branco explicitamente. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary i, [data-theme="dark"] .btn-primary:not([disabled]):hover, [data-theme="dark"] .btn-primary:not([disabled]):hover i, [data-theme="dark"] .btn-primary:not([disabled]):focus, [data-theme="dark"] .btn-primary:not([disabled]):focus i, [data-theme="dark"] .btn-primary:not([disabled]):active, [data-theme="dark"] .btn-primary:not([disabled]):active i { color: #fff !important; } /* Mesma logica pros outros .btn-* solidos (success/danger/info/warning) * que tem texto branco no light. */ [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-info, [data-theme="dark"] .btn-warning { color: #fff !important; } [data-theme="dark"] .btn-outline-primary { color: var(--primary-dark); border-color: var(--primary-50); } [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--primary); color: #fff; border-color: var(--primary); } [data-theme="dark"] .btn-outline-secondary { color: var(--text-light); border-color: var(--surface-border); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--surface-soft); color: var(--text); border-color: var(--surface-border); } [data-theme="dark"] .btn-outline-success { color: var(--success-dark); border-color: var(--success-50); } [data-theme="dark"] .btn-outline-success:hover { background-color: var(--success); color: var(--body); } [data-theme="dark"] .btn-outline-danger { color: var(--danger-dark); border-color: var(--danger-50); } [data-theme="dark"] .btn-outline-danger:hover { background-color: var(--danger); color: var(--body); } /* Dropdown / Menu de contexto */ [data-theme="dark"] .dropdown-menu { background-color: var(--content); border-color: var(--surface-border); color: var(--text); } [data-theme="dark"] .dropdown-menu .dropdown-item { color: var(--text); } [data-theme="dark"] .dropdown-menu .dropdown-item:hover, [data-theme="dark"] .dropdown-menu .dropdown-item:focus { background-color: var(--surface-soft); color: var(--text); } [data-theme="dark"] .dropdown-menu.menu-contexto { background-color: var(--content); border-color: var(--surface-border); } /* Modal Bootstrap base */ [data-theme="dark"] .modal-content { background-color: var(--content); color: var(--text); border: 1px solid var(--surface-border); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--surface-border); } [data-theme="dark"] .modal-header .btn-close, [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } [data-theme="dark"] .modal-backdrop.show { opacity: 0.75; } /* Tabelas Bootstrap base */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--surface-border); color: var(--text); } /* Cards Bootstrap */ [data-theme="dark"] .card { background-color: var(--content); color: var(--text); border-color: var(--surface-border); } /* Code/pre (em mensagens de erro com pilha) */ [data-theme="dark"] code, [data-theme="dark"] pre { background-color: var(--body); color: var(--text-light); } /* Bootstrap alerts (.alert-info, .alert-warning, etc) — por default * tem bg claro tintado e texto escuro. Em dark, mantemos a vibracao * mas com tints translucentes + texto claro pra contrastar. */ [data-theme="dark"] .alert { border-color: var(--surface-border); } [data-theme="dark"] .alert-info { background-color: rgba(56, 189, 248, 0.12); color: #bae6fd; border-color: rgba(56, 189, 248, 0.30); } [data-theme="dark"] .alert-warning { background-color: rgba(250, 204, 21, 0.12); color: #fde68a; border-color: rgba(250, 204, 21, 0.30); } [data-theme="dark"] .alert-success { background-color: rgba(34, 197, 94, 0.12); color: #bbf7d0; border-color: rgba(34, 197, 94, 0.30); } [data-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.12); color: #fecaca; border-color: rgba(239, 68, 68, 0.30); } [data-theme="dark"] .alert-primary { background-color: rgba(0, 123, 255, 0.12); color: #bfdbfe; border-color: rgba(0, 123, 255, 0.30); } [data-theme="dark"] .alert strong, [data-theme="dark"] .alert b { color: inherit; filter: brightness(1.15); } /* Input numero/texto dentro das tabelas — herda do user-agent stylesheet * que aplica color: -internal-light-dark(black, white) em alguns browsers * mas nao em todos. Forca cor clara em dark. */ [data-theme="dark"] td input, [data-theme="dark"] td button { color: var(--text); } /* Modal header titulo/subtitulo (em-modal__) — textos escuros viraram * invisiveis. Garante leitura. */ [data-theme="dark"] .em-modal__titulo, [data-theme="dark"] .em-modal__subtitulo, [data-theme="dark"] .em-modal__desc { color: var(--text); } /* (situacao-chip=3 amber/warning agora usa var(--warning-dark) que ja' * tem variante clara no dark via override desta paleta acima) */ /* Links default */ [data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.em-erro__btn) { color: var(--primary-dark); } [data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.em-erro__btn):hover { color: var(--primary); } /* Scrollbar (WebKit) */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-soft); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--surface-border); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }