/* atom-tema.css — a paleta do AtomSign num lugar só, em claro e em escuro. O bloco CLARO reproduz exatamente o que o sistema já pintava. Se um valor daqui mudar, muda a identidade visual inteira de uma vez — que é justamente o ponto. O Bootstrap 5.3 já vira sozinho com data-bs-theme="dark": tabela, card, dropdown, modal e formulário não precisam de nada aqui. Este arquivo existe para o que é NOSSO — as cores que estavam cravadas dentro das views. Regra ao converter uma cor cravada: decida pelo PAPEL, não pelo valor. O mesmo #fff é fundo de cartão numa linha e texto sobre badge colorida na outra; trocar os dois pelo mesmo token inverteria um deles no escuro. Foi a lição cara do AtomWMS, onde #0d1b2a era texto em 354 lugares e fundo em 181. */ :root { /* Tinta e superfície — viram no escuro */ --atom-navy: #0d1b2a; /* tinta principal e fundo da marca */ --atom-azul: #1565c0; /* acento: "Atom" do logotipo, link, foco */ --atom-ciano: #1aa7c9; /* acento secundário: "Sign" do logotipo */ --atom-borda: #dee2e6; /* borda de bloco, separador */ --atom-borda-sutil: #ccc; /* borda de canvas e de área de assinatura */ --atom-superficie: #fff; /* fundo de cartão, de área branca dentro da tela */ --atom-fundo: #f0f2f5; /* chão da página */ /* Texto que vai SOBRE cor forte (badge de etiqueta, botão primário). Não é o mesmo branco de --atom-superficie: aquele é fundo e vira escuro no tema escuro; este continua branco nos dois temas, porque a cor por baixo dele continua forte. */ --atom-tinta-sobre-cor: #fff; /* Realce de interação: a moldura tracejada da assinatura que se arrasta sobre o PDF e a alça de redimensionar. Herdado do azul primário antigo do Bootstrap (#007bff), que não é o --atom-azul da marca — mantido separado para o tema claro sair pixel a pixel igual ao que já estava no ar. */ --atom-realce: #007bff; /* O visualizador de PDF. Cinza de leitor de documento, igual em todo lugar — e é assim de propósito: a folha do PDF é branca nos dois temas, e um fundo claro em volta de uma folha branca tira a moldura que separa uma da outra. NÃO vira no escuro. */ --atom-pdf-fundo: #525659; /* A FOLHA do PDF. Também não vira: é papel. O documento assinado é branco quando sai na impressora e quando chega por e-mail, e escurecê-lo na tela mostraria ao usuário um documento que não é o que ele está assinando. */ --atom-pdf-folha: #fff; /* Marca — NÃO vira no escuro. É o gradiente da tela de login, sempre com texto branco por cima: já é escuro, e clareá-lo apagaria a identidade. */ --atom-marca-1: #0d1b2a; --atom-marca-2: #1a3050; --atom-marca-3: #1a3a6b; --atom-marca-4: #1a3fa0; /* O azul da marca no gradiente. Separado do --atom-azul porque aquele INVERTE no escuro (#5aa9f0) e este não pode: ele tem texto branco por cima. */ --atom-marca-azul: #1565c0; } [data-bs-theme="dark"] { /* A tinta e o fundo trocam de lado. O navy deixa de ser tinta e passa a ser o chão. */ --atom-navy: #e8eef5; --atom-azul: #5aa9f0; /* o #1565c0 sobre fundo escuro fica ilegível */ --atom-ciano: #4fd0ec; --atom-borda: #303a45; --atom-borda-sutil: #3a4550; --atom-superficie: #1b222b; --atom-fundo: #131820; /* O realce clareia junto: o #007bff sobre o cinza do leitor já era limítrofe no claro, e sobre a página escura a moldura tracejada da assinatura sumiria. */ --atom-realce: #3d9bff; /* Continuam iguais: ver os comentários no bloco claro. */ --atom-tinta-sobre-cor: #fff; --atom-pdf-fundo: #525659; --atom-pdf-folha: #fff; --atom-marca-1: #0d1b2a; --atom-marca-2: #1a3050; --atom-marca-3: #1a3a6b; --atom-marca-4: #1a3fa0; } /* --------------------------------------------------------------------------- O chão da página. O Bootstrap pinta o body com --bs-body-bg, e no escuro isso já resolve. No claro o AtomSign usava #f0f2f5 (um cinza levemente azulado) em vez do branco do Bootstrap, e perder isso deixaria os cartões brancos sem contraste com o fundo. --------------------------------------------------------------------------- */ body { background-color: var(--atom-fundo); } /* --------------------------------------------------------------------------- Cabeçalho de tabela. Substitui o `table-light` do Bootstrap, que fixa um cinza claro e não vira com o tema — um cabeçalho branco em cima de uma tabela escura. Sai dos tokens do próprio Bootstrap (--bs-tertiary-bg), então acompanha o data-bs-theme sem precisar de bloco escuro aqui. --------------------------------------------------------------------------- */ .table > thead.atom-thead { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); } /* --------------------------------------------------------------------------- DataTables. A folha vem de CDN e é anterior ao suporte a tema do Bootstrap: ela crava #333 nos rótulos ("Exibir N resultados por página", "Pesquisa:") e #666 na paginação. Sobre a página escura isso fica quase invisível — foi o que apareceu na primeira conferência da tela de Documentos. Herdar do body resolve, e é melhor do que fixar uma cor: no tema claro o resultado é o mesmo #333 de antes, então nada muda para quem já usava. --------------------------------------------------------------------------- */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--bs-body-color) !important; } /* O botão da página atual e o hover vinham com gradiente claro cravado. */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bs-secondary-bg) !important; border-color: var(--atom-borda) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--bs-secondary-color) !important; } /* --------------------------------------------------------------------------- O botão de trocar o tema, na barra do topo. --------------------------------------------------------------------------- */ .atom-troca-tema { background: none; border: 0; padding: .25rem .5rem; color: inherit; line-height: 1; cursor: pointer; opacity: .75; } .atom-troca-tema:hover { opacity: 1; } /* Botão da marca — o gradiente navy→azul do login, com texto branco por cima. Ele NÃO vira no escuro, pela mesma razão dos tokens --atom-marca-*: já é escuro, e clareá-lo apagaria a identidade e deixaria letra branca sobre fundo claro. Existe aqui, e não num