/* ============================================================================ CdAdm - TEMA VISUAL ---------------------------------------------------------------------------- Repaginacao do sistema sem reescrever as views. COMO FUNCIONA scUtil::getClasseTema() devolve ' sc-novo' quando a tela pertence a um modulo ja migrado (hoje: estoque). As molduras emitidas pelo scUtil recebem essa classe, e TODA regra deste arquivo vive dentro dela. Resultado: as ~522 telas do resto do sistema saem exatamente como antes. Quando o visual for aprovado, esvaziar scUtil::$arModuloComTemaNovo faz o tema valer para o sistema inteiro - sem tocar em nenhuma view. POR QUE REDEFINIR CLASSES DO BOOTSTRAP Ha 1.178 usos de .btn-success e 236 de .btn-primary escritos dentro das views. Em vez de editar 1.414 lugares, redefinimos o que essas classes significam. As chamadas ficam intactas e passam a obedecer ao tema. O QUE ESTE ARQUIVO NAO ALCANCA Estilo inline (style="...") vence CSS externo. As 378 views que usam estilo inline precisam de limpeza manual, uma a uma. Nao e bloqueio: cada uma corrigida e uma a menos. Criado em 28/ago/2026. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. PALETA Um lugar so para as decisoes de cor. Trocar aqui muda o sistema inteiro. -------------------------------------------------------------------------- */ .sc-novo, body.sc-tema { /* superficies — tres degraus, para o painel nao sumir no fundo: fundo (mais escuro) < superficie (o painel) < superficie-2 (realces) */ --sc-fundo: #E9E6E1; --sc-superficie: #FFFFFF; --sc-superficie-2: #F6F4F1; --sc-linha: #D8D2CA; --sc-linha-2: #ADA294; /* texto */ --sc-texto: #1A1815; --sc-texto-2: #4A443D; --sc-texto-3: #6B645B; /* marca (o laranja do CdAdm) */ --sc-marca: #E8871E; --sc-marca-esc: #C56F12; --sc-marca-lav: #FDF1E2; --sc-marca-txt: #8F4E08; /* laranja p/ TEXTO sobre o lavado (contraste AA) */ /* estado */ --sc-ok: #1C7A54; --sc-ok-esc: #15613F; --sc-ok-lav: #E4F1EB; --sc-perigo: #B3392A; --sc-perigo-esc: #932C1F; --sc-perigo-lav: #FAE9E6; --sc-aviso: #8A6A12; --sc-aviso-lav: #FAF2DC; --sc-info: #2C6E8F; --sc-link: #2C6E8F; /* contraste 5,62 (o #3c8dbc do AdminLTE da 3,67) */ --sc-link-hover: #1F5169; --sc-info-lav: #E5EFF4; /* topo (barra superior) */ --sc-topo: #222D32; --sc-topo-hover: #2C3B41; --sc-topo-texto: #ECF2F5; /* forma */ --sc-raio: 10px; --sc-raio-p: 6px; --sc-sombra: 0 1px 2px rgba(34,32,29,.06), 0 4px 14px rgba(34,32,29,.07); --sc-sombra-alta: 0 2px 6px rgba(34,32,29,.09), 0 12px 30px rgba(34,32,29,.13); } /* ---------------------------------------------------------------------------- 2. BARRA DO TOPO O skin-yellow pinta a navbar de #f39c12 e a logo de #e08e0b — laranja saturado em toda a largura. Aqui o topo fica escuro (mesma familia da sidebar, #222d32) e o laranja passa a ser SOTAQUE: so a marca no logo e o item ativo. O laranja continua sendo a identidade, sem gritar. Esta regra vive no , nao em .sc-novo, porque o header fica acima do .content-wrapper. Ver main.php. -------------------------------------------------------------------------- */ body.sc-tema .main-header .navbar { background-color: var(--sc-topo); } body.sc-tema .main-header .logo { background-color: var(--sc-topo); color: var(--sc-topo-texto); font-weight: 600; letter-spacing: -.01em; border-right: 1px solid rgba(255,255,255,.06); } /* o "CdAdm" em laranja: a marca vira detalhe, nao fundo */ body.sc-tema .main-header .logo .logo-lg b, body.sc-tema .main-header .logo b { color: var(--sc-marca); } body.sc-tema .main-header .logo:hover { background-color: var(--sc-topo-hover); } body.sc-tema .main-header .navbar .nav > li > a { color: rgba(236,242,245,.86); } body.sc-tema .main-header .navbar .nav > li > a:hover, body.sc-tema .main-header .navbar .nav > li > a:focus, body.sc-tema .main-header .navbar .nav > .active > a, body.sc-tema .main-header .navbar .nav .open > a, body.sc-tema .main-header .navbar .nav .open > a:hover { background: var(--sc-topo-hover); color: #FFFFFF; } /* item aberto ganha um risco laranja embaixo */ body.sc-tema .main-header .navbar .nav > .active > a, body.sc-tema .main-header .navbar .nav .open > a { box-shadow: inset 0 -2px 0 var(--sc-marca); } body.sc-tema .main-header .navbar .sidebar-toggle { color: rgba(236,242,245,.86); } body.sc-tema .main-header .navbar .sidebar-toggle:hover { background-color: var(--sc-topo-hover); color: #FFFFFF; } /* separa o topo da area de conteudo */ body.sc-tema .main-header .navbar, body.sc-tema .main-header .logo { border-bottom: 1px solid rgba(0,0,0,.22); } /* ---------------------------------------------------------------------------- 3. FUNDO DA AREA DE CONTEUDO O AdminLTE.css (linha ~102) pinta .content-wrapper com um radial-gradient verde-musgo -> areia -> creme. E o que mais data o visual do sistema. Aqui ele e trocado por uma cor chapada; fora das telas migradas o gradiente antigo continua valendo. -------------------------------------------------------------------------- */ .content-wrapper.sc-novo, .right-side.sc-novo { background: var(--sc-fundo); } /* ---------------------------------------------------------------------------- 4. MOLDURA DA TELA Substitui o visual do .box .box-primary do AdminLTE, que hoje tem a borda superior azul grossa e cantos retos. -------------------------------------------------------------------------- */ /* Alcanca tanto o box do scUtil (.box.sc-novo) quanto os ~70 escritos a mao nas views (
), que nao passam pelo scUtil. */ .box.sc-novo, .content-wrapper.sc-novo .box { background: var(--sc-superficie); border: 1px solid var(--sc-linha); border-top: 1px solid var(--sc-linha); /* mata a faixa azul do AdminLTE */ border-radius: var(--sc-raio); box-shadow: var(--sc-sombra); } /* o AdminLTE pinta uma faixa de 3px no topo conforme o tipo do box (box-info azul, box-success verde...). Some com todas. */ .content-wrapper.sc-novo .box.box-info, .content-wrapper.sc-novo .box.box-primary, .content-wrapper.sc-novo .box.box-success, .content-wrapper.sc-novo .box.box-warning, .content-wrapper.sc-novo .box.box-danger, .content-wrapper.sc-novo .box.box-default { border-top-color: var(--sc-linha); border-top-width: 1px; } /* cabecalho da janela */ .box-header.sc-novo, .content-wrapper.sc-novo .box > .box-header { border-bottom: 1px solid var(--sc-linha); padding: 15px 18px 13px; display: flex; align-items: center; gap: 11px; } /* barrinha da marca antes do titulo */ .box-header.sc-novo::before, .content-wrapper.sc-novo .box > .box-header::before { content: ""; flex: none; width: 4px; height: 19px; border-radius: 2px; background: var(--sc-marca); } /* O AdminLTE.css tem `.box-header .box-title { color: white }` com o comentario "mauro adicionou para titulos de box ficarem brancos" — feito para o gradiente escuro que este tema removeu. Sem isto, o titulo fica branco sobre fundo branco. Mesmo motivo vale para os labels abaixo. */ .box-header.sc-novo > .box-title, .box-header.sc-novo .box-title, .content-wrapper.sc-novo .box > .box-header .box-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--sc-texto); } /* Texto do conteudo. O AdminLTE usa #444 (cinza medio) como base, o que num fundo claro le como "apagado". Aqui o texto vai para #22201D. */ .content-wrapper.sc-novo, .content-wrapper.sc-novo .box, .content-wrapper.sc-novo .form, .content-wrapper.sc-novo p, .content-wrapper.sc-novo label, .content-wrapper.sc-novo .control-label, .content-wrapper.sc-novo .nav-tabs > li > a, /* o AdminLTE tem `h1 { color:#fff }` global, tambem do tempo do gradiente */ .content-wrapper.sc-novo h1, .content-wrapper.sc-novo h2, .content-wrapper.sc-novo h3, .content-wrapper.sc-novo h4 { color: var(--sc-texto); } .content-wrapper.sc-novo .control-label, .content-wrapper.sc-novo label { color: var(--sc-texto); font-weight: 600; font-size: 13px; margin-bottom: 5px; } /* o asterisco de obrigatorio ganha a cor de alerta */ .content-wrapper.sc-novo .required, .content-wrapper.sc-novo label .required { color: var(--sc-perigo); } /* abas: a ativa precisa se distinguir das outras */ .content-wrapper.sc-novo .nav-tabs > li > a { color: var(--sc-texto-3); font-weight: 600; } .content-wrapper.sc-novo .nav-tabs > li.active > a { color: var(--sc-texto); } /* corpo e rodape da janela (getAbreCorpoDoForm / getAbreAreaDeBotoes) */ .content-wrapper.sc-novo .box-body { padding: 20px 22px; min-height: 0 !important; /* o scUtil forca 50vh, criando vazio enorme */ } /* Rodape de botoes como barra-cartao destacada, com a faixa da marca no topo. Vem da branch skin-cordon-fase0 (mcordon), adaptado aos tokens daqui. */ .content-wrapper.sc-novo .box-footer, .content-wrapper.sc-novo .row.buttons { background: var(--sc-superficie); border: 1px solid var(--sc-linha); border-top: 3px solid var(--sc-marca); border-radius: var(--sc-raio); padding: 15px 18px !important; /* vence o style inline de 3px do scUtil */ margin-top: 18px; box-shadow: var(--sc-sombra); } /* se a .row.buttons ja esta dentro de um .box-footer, nao vira outro cartao */ .content-wrapper.sc-novo .box-footer .row.buttons { background: transparent; border: none; padding: 0; margin-top: 0; box-shadow: none; border-radius: 0; } .content-wrapper.sc-novo .box-footer .btn, .content-wrapper.sc-novo .row.buttons .btn { min-width: 124px; } /* espaco entre os botoes do rodape, que hoje ficam colados */ .content-wrapper.sc-novo .box-footer .btn { margin-right: 6px; } .content-wrapper.sc-novo .box-footer .btn:last-child { margin-right: 0; } /* respiro entre os campos */ .content-wrapper.sc-novo .form-group { margin-bottom: 18px; } /* textos auxiliares: escuros o bastante para nao sumirem no fundo claro */ .content-wrapper.sc-novo small, .content-wrapper.sc-novo .help-block, .content-wrapper.sc-novo .text-muted { color: var(--sc-texto-3); } /* PAINEIS INTERNOS (Produtos, Valores da Nota, Integracao Financeira...) Sao .box dentro de .box. Antes ficavam brancos dentro de branco, sem nenhuma cor: agora o cabecalho ganha fundo da marca (bem lavado) e o titulo fica escuro e firme. E o que devolve cor a tela. */ .content-wrapper.sc-novo .box .box > .box-header { background: var(--sc-marca-lav); border-bottom: 1px solid var(--sc-linha); border-radius: var(--sc-raio) var(--sc-raio) 0 0; } .content-wrapper.sc-novo .box .box > .box-header .box-title, .content-wrapper.sc-novo .panel-heading { color: var(--sc-marca-txt); font-weight: 700; font-size: 15px; } /* o icone do titulo herda a cor da marca */ .content-wrapper.sc-novo .box .box > .box-header .box-title .fa, .content-wrapper.sc-novo .box .box > .box-header > .fa { color: var(--sc-marca); } /* painel interno: fundo levemente distinto do painel externo */ /* O painel interno tinha fundo branco igual ao do painel pai: com so a borda fina separando, ele "sumia". Ganha tom proprio e a borda mais firme. */ .content-wrapper.sc-novo .box .box { background: #EEEAE4; /* um degrau abaixo do --sc-superficie-2, p/ separar do painel pai */ border: 1px solid var(--sc-linha-2); border-radius: var(--sc-raio); box-shadow: none; margin-bottom: 16px; } /* dentro do painel interno os campos voltam ao branco, para se destacarem do fundo do painel e parecerem editaveis */ .content-wrapper.sc-novo .box .box .form-control { background-color: var(--sc-superficie); } .content-wrapper.sc-novo .box .box > .box-body { padding: 16px 18px; } /* CALLOUTS (blocos de ajuda) O AdminLTE pinta o fundo deles com !important (AdminLTE.css:4427+) e conta com texto branco por cima. Se so o texto for escurecido, fica escuro sobre azul saturado e some — foi o que aconteceu na aba WhatsApp da Filial. Aqui fundo E texto sao trocados juntos, para o par continuar legivel. */ .content-wrapper.sc-novo .callout, .content-wrapper.sc-novo .callout h4, .content-wrapper.sc-novo .callout p, .content-wrapper.sc-novo .callout b, .content-wrapper.sc-novo .callout strong { color: var(--sc-texto) !important; } .content-wrapper.sc-novo .callout a { color: var(--sc-marca-txt); } .content-wrapper.sc-novo .callout.callout-info { background-color: var(--sc-info-lav) !important; border-left: 3px solid var(--sc-info); } .content-wrapper.sc-novo .callout.callout-info .fa { color: var(--sc-info); } .content-wrapper.sc-novo .callout.callout-success { background-color: var(--sc-ok-lav) !important; border-left: 3px solid var(--sc-ok); } .content-wrapper.sc-novo .callout.callout-warning { background-color: var(--sc-aviso-lav) !important; border-left: 3px solid var(--sc-aviso); } .content-wrapper.sc-novo .callout.callout-danger { background-color: var(--sc-perigo-lav) !important; border-left: 3px solid var(--sc-perigo); } /* ---------------------------------------------------------------------------- 5. BOTOES Aqui esta o ganho de escala: 1.178 .btn-success e 236 .btn-primary passam a ler a paleta, sem nenhuma view ser editada. -------------------------------------------------------------------------- */ .sc-novo .btn { border-radius: var(--sc-raio-p); font-weight: 600; padding: 6px 15px; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* O padding acima e para botao de formulario. As variantes compactas do Bootstrap precisam voltar ao tamanho delas, senao os botoes de acao das grids (btn-xs, so com icone) incham e empilham um embaixo do outro. */ .sc-novo .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .sc-novo .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } /* na coluna de acoes os botoes ficam lado a lado, com respiro entre eles */ .content-wrapper.sc-novo td .btn-xs, .content-wrapper.sc-novo td .btn-sm { margin: 1px; vertical-align: middle; } /* Nao usar td:has(.btn-xs) aqui: o :has() e avaliado em CADA celula de CADA grid do sistema e pesa na renderizacao. O empilhamento dos botoes de acao ja foi resolvido pelo padding do .btn-xs restaurado acima — o nowrap era so cinto de seguranca. */ .sc-novo .btn:focus, .sc-novo .btn:focus-visible { outline: 2px solid var(--sc-marca); outline-offset: 2px; } /* acao principal (era o verde do Bootstrap 3) */ .sc-novo .btn-success { background-color: var(--sc-marca); border-color: var(--sc-marca-esc); color: #FFFFFF; } .sc-novo .btn-success:hover, .sc-novo .btn-success:focus, .sc-novo .btn-success:active, .sc-novo .btn-success.active, .sc-novo .open > .dropdown-toggle.btn-success { background-color: var(--sc-marca-esc); border-color: var(--sc-marca-esc); color: #FFFFFF; } /* acao secundaria */ .sc-novo .btn-primary { background-color: var(--sc-superficie); border-color: var(--sc-linha-2); color: var(--sc-texto-2); } .sc-novo .btn-primary:hover, .sc-novo .btn-primary:focus, .sc-novo .btn-primary:active, .sc-novo .btn-primary.active, .sc-novo .open > .dropdown-toggle.btn-primary { background-color: var(--sc-superficie-2); border-color: var(--sc-texto-3); color: var(--sc-texto); } /* destrutivo */ .sc-novo .btn-danger { background-color: var(--sc-perigo); border-color: var(--sc-perigo-esc); color: #FFFFFF; } .sc-novo .btn-danger:hover, .sc-novo .btn-danger:focus, .sc-novo .btn-danger:active { background-color: var(--sc-perigo-esc); border-color: var(--sc-perigo-esc); color: #FFFFFF; } .sc-novo .btn-default { background-color: var(--sc-superficie); border-color: var(--sc-linha-2); color: var(--sc-texto-2); } .sc-novo .btn-default:hover, .sc-novo .btn-default:focus { background-color: var(--sc-superficie-2); border-color: var(--sc-texto-3); color: var(--sc-texto); } /* ---------------------------------------------------------------------------- 6. FORMULARIO -------------------------------------------------------------------------- */ .sc-novo .form-control, .content-wrapper.sc-novo .form-control { border: 1px solid var(--sc-linha-2); border-radius: var(--sc-raio-p); box-shadow: none; color: var(--sc-texto); font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; } /* altura fixa SO em campo de uma linha. Aplicada a todo .form-control, ela esmagava os textarea (que pedem rows=N) e os select multiplos — foi o que aconteceu com as tres mensagens da aba WhatsApp da Filial. */ .content-wrapper.sc-novo input.form-control, .content-wrapper.sc-novo select.form-control:not([multiple]):not([size]) { height: 36px; } /* textarea respeita o rows da view e cresce se o usuario arrastar */ .content-wrapper.sc-novo textarea.form-control { height: auto; min-height: 36px; padding: 8px 12px; line-height: 1.5; } .content-wrapper.sc-novo .form-control::placeholder { color: var(--sc-texto-3); } /* valor digitado tem peso, para nao competir de igual com o placeholder */ .content-wrapper.sc-novo input.form-control, .content-wrapper.sc-novo select.form-control { font-weight: 500; } .sc-novo .form-control:focus { border-color: var(--sc-marca); box-shadow: 0 0 0 3px var(--sc-marca-lav); } .sc-novo .control-label, .sc-novo label { font-weight: 600; font-size: 13px; color: var(--sc-texto-2); } .sc-novo .has-error .form-control { border-color: var(--sc-perigo); } .sc-novo .has-error .help-block, .sc-novo .has-error .control-label { color: var(--sc-perigo); } .sc-novo .input-group-addon { background: var(--sc-superficie-2); border-color: var(--sc-linha-2); color: var(--sc-texto-3); border-radius: var(--sc-raio-p); } /* ---------------------------------------------------------------------------- 7. TABELA E GRID (kartik) -------------------------------------------------------------------------- */ /* o painel do grid (kartik) vinha branco sobre branco: ganha tom e borda */ .sc-novo .panel, .sc-novo .grid-view .panel { background: var(--sc-superficie); border: 1px solid var(--sc-linha); border-radius: var(--sc-raio); box-shadow: none; } .sc-novo .panel > .panel-heading, .sc-novo .grid-view .panel-heading { background: var(--sc-superficie-2); border-bottom: 1px solid var(--sc-linha); color: var(--sc-texto-2); font-weight: 600; border-radius: var(--sc-raio) var(--sc-raio) 0 0; } .sc-novo .panel > .panel-footer, .sc-novo .grid-view .panel-footer { background: var(--sc-superficie-2); border-top: 1px solid var(--sc-linha); border-radius: 0 0 var(--sc-raio) var(--sc-raio); } /* a linha de filtros fica destacada do corpo da tabela */ .sc-novo .table > thead > tr.filters > td { background: var(--sc-superficie-2); border-bottom: 1px solid var(--sc-linha); } .sc-novo .table > thead > tr > th { background: var(--sc-superficie-2); border-bottom: 1px solid var(--sc-linha); color: var(--sc-texto-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } .sc-novo .table > tbody > tr > td { border-top: 1px solid var(--sc-linha); color: var(--sc-texto); vertical-align: middle; } .sc-novo .table-hover > tbody > tr:hover { background-color: var(--sc-marca-lav); } .sc-novo .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--sc-superficie-2); } .sc-novo .pagination > li > a, .sc-novo .pagination > li > span { color: var(--sc-texto-2); border-color: var(--sc-linha); } .sc-novo .pagination > .active > a, .sc-novo .pagination > .active > a:hover, .sc-novo .pagination > .active > span { background-color: var(--sc-marca); border-color: var(--sc-marca-esc); color: #FFFFFF; } /* ---------------------------------------------------------------------------- 8. ABAS -------------------------------------------------------------------------- */ .sc-novo .nav-tabs { border-bottom: 1px solid var(--sc-linha); } .sc-novo .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--sc-texto-3); font-weight: 600; margin-right: 2px; } .sc-novo .nav-tabs > li > a:hover { background: transparent; border-bottom-color: var(--sc-linha-2); color: var(--sc-texto); } .sc-novo .nav-tabs > li.active > a, .sc-novo .nav-tabs > li.active > a:hover, .sc-novo .nav-tabs > li.active > a:focus { background: transparent; border: 0; border-bottom: 2px solid var(--sc-marca); color: var(--sc-texto); } /* ---------------------------------------------------------------------------- 9. AVISOS E ROTULOS -------------------------------------------------------------------------- */ .sc-novo .alert { border-radius: var(--sc-raio-p); border-width: 1px; border-left-width: 3px; } /* O AdminLTE pinta o fundo dos alerts com !important (AdminLTE.css:4486+), contando com texto branco por cima. Sem o !important aqui, o fundo dele vence, o texto fica colorido sobre cor saturada e some. Sao 180 alerts no sistema, entao vale o !important. */ .sc-novo .alert-success { background-color: var(--sc-ok-lav) !important; border-color: var(--sc-ok); color: var(--sc-ok) !important; } .sc-novo .alert-danger { background-color: var(--sc-perigo-lav) !important; border-color: var(--sc-perigo); color: var(--sc-perigo) !important; } .sc-novo .alert-warning { background-color: var(--sc-aviso-lav) !important; border-color: var(--sc-aviso); color: var(--sc-aviso) !important; } .sc-novo .alert-info { background-color: var(--sc-info-lav) !important; border-color: var(--sc-info); color: var(--sc-info) !important; } /* o texto interno do alerta acompanha a cor do tipo */ .sc-novo .alert-success b, .sc-novo .alert-success strong, .sc-novo .alert-danger b, .sc-novo .alert-danger strong, .sc-novo .alert-warning b, .sc-novo .alert-warning strong, .sc-novo .alert-info b, .sc-novo .alert-info strong { color: inherit; } .sc-novo .label, .sc-novo .badge { border-radius: 20px; font-weight: 600; padding: 3px 9px; } .sc-novo .label-success { background-color: var(--sc-ok); } .sc-novo .label-danger { background-color: var(--sc-perigo); } .sc-novo .label-warning { background-color: var(--sc-aviso); } .sc-novo .label-primary { background-color: var(--sc-marca); } /* ---------------------------------------------------------------------------- 10. ACESSIBILIDADE -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sc-novo * { transition: none !important; animation: none !important; } } /* ---------------------------------------------------------------------------- 11. STEPPER (abas numeradas) Vem da branch feat/teste/20260612-skin-cordon-fase0 (mcordon, 12/jun/2026), adaptado para os tokens deste tema. Renderizado por scUtil::getTabsStepper(), que emite markup de tabs Bootstrap padrao — logo continua compativel com o JS ja existente nas telas (MyNextTab/MyPrevTab). -------------------------------------------------------------------------- */ .content-wrapper.sc-novo .sc-stepper { display: flex; flex-wrap: wrap; gap: 0 6px; } .content-wrapper.sc-novo .sc-stepper > li { float: none; margin-bottom: -1px; } .content-wrapper.sc-novo .sc-stepper > li > a { display: inline-flex; align-items: center; gap: 8px; } /* o numero da etapa */ .content-wrapper.sc-novo .sc-stepper .sc-n { width: 20px; height: 20px; border-radius: 50%; background: var(--sc-superficie-2); border: 1px solid var(--sc-linha-2); color: var(--sc-texto-3); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; } .content-wrapper.sc-novo .sc-stepper > li.active .sc-n { background: var(--sc-marca); border-color: var(--sc-marca-esc); color: #FFFFFF; } /* o conteudo da aba fica dentro de um cartao, colado no stepper */ .content-wrapper.sc-novo .sc-stepper-wrap > .tab-content { border: 1px solid var(--sc-linha); border-top: none; border-radius: 0 0 var(--sc-raio) var(--sc-raio); background: var(--sc-superficie); padding: 18px; overflow: visible; } /* ---------------------------------------------------------------------------- 12. CABECALHO-RESUMO DO REGISTRO Mesma origem. Renderizado por scUtil::getCabecalhoResumo(). -------------------------------------------------------------------------- */ .content-wrapper.sc-novo .sc-resumo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--sc-superficie); border: 1px solid var(--sc-linha); border-radius: var(--sc-raio); box-shadow: var(--sc-sombra); padding: 14px 16px; margin-bottom: 14px; } .content-wrapper.sc-novo .sc-resumo .sc-ava { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #FFFFFF; background: linear-gradient(135deg, var(--sc-marca), var(--sc-marca-esc)); } .content-wrapper.sc-novo .sc-resumo .sc-who .nm { font-size: 15.5px; font-weight: 700; color: var(--sc-texto); } .content-wrapper.sc-novo .sc-resumo .sc-who .meta { font-size: 12.5px; color: var(--sc-texto-3); } .content-wrapper.sc-novo .sc-resumo .sc-fatos { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; } .content-wrapper.sc-novo .sc-resumo .sc-fato .k { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-texto-3); } .content-wrapper.sc-novo .sc-resumo .sc-fato .v { font-size: 14px; font-weight: 700; color: var(--sc-texto); } /* ---------------------------------------------------------------------------- 13. REDE DE SEGURANCA — texto branco herdado do gradiente ---------------------------------------------------------------------------- O fundo do .content-wrapper era um gradiente verde-escuro/areia. Para escrever sobre ele, 66 views receberam style="color:white" INLINE. Com o fundo claro do tema, esse texto some. Estilo inline so cede a um !important, e como sao
genericas nao ha classe para mirar — por isso o seletor de atributo. A guarda :not([style*="background"]) preserva quem tem fundo escuro proprio (ex.: style="background-color:black; color:white"), que continua legivel. Isto e uma REDE, nao a correcao: o certo e limpar o inline view a view. Enquanto isso, nenhuma tela fica ilegivel. -------------------------------------------------------------------------- */ /* .form-group { color:#fff; text-shadow:... } no AdminLTE.css:1296 — global, pega TODO formulario do sistema. A sombra tambem precisa sair, senao fica um halo escuro atras do texto no fundo claro. */ body.sc-tema .content-wrapper .form-group { color: var(--sc-texto); text-shadow: none; } body.sc-tema .content-wrapper .form-group i { text-shadow: none; } /* AdminLTE.css:1449 — ".note, .help-block { color:#ffffff }". Nem todo rotulo do sistema e um