/*! * lojapro.css: a marca sobre o Gradient Able. * * Carregado por último, e deliberadamente CURTO. A versão anterior deste * arquivo tinha três regras que brigavam com o tema, escritas quando a lateral * ainda era escura: * * `.pc-sidebar .pc-item.active .pc-link { color: #fff }` deixava o item * ativo em branco. Com a lateral clara do template, virou texto branco em * fundo claro: o "Painel" sumia da tela; * * `.pc-sidebar .m-header { display: flex }` reativava a marca dentro da * lateral. O tema esconde ela acima de 1025px de propósito, porque nesse * tamanho a marca vive na barra superior. O resultado eram duas logos. * * A lição é a que vale para o arquivo inteiro: se o tema já resolve, não * escrever regra. O que fica aqui é só o que é da marca. */ :root { --lp-marca: #67AAF3; --lp-acento: #5987DE; --lp-acao: #2559BB; --lp-grafite: #262624; } /* * A barra superior vinha no azul do template (#4099ff -> #73b4ff), que não é o * da marca. Sobre ele a logo grafite ficava pesada e o símbolo azul quase * sumia, porque era azul sobre azul. * * O tema expõe isso em variável, então a troca é limpa: nada de sobrescrever * regra dele. O degradê agora vai do azul de ação da marca (#2559BB) para o * azul da marca (#67AAF3), com a logo em branco por cima. */ /* Precisa mirar no MESMO seletor do tema, não em :root. O preset define `[data-pc-header=header-1] { --pc-header-background: ... }`, que tem especificidade de atributo e ganha de :root por mais tarde que este arquivo carregue. Foi por isso que a primeira tentativa não pintou nada. */ [data-pc-header='header-1'], [data-pc-preset='preset-1'] { --pc-header-background: linear-gradient(100deg, #1E4FA8 0%, var(--lp-acao) 42%, #4A86E0 100%); --pc-sidebar-active-color: var(--lp-acao); } /* O item ativo da lateral também segue a marca, não o azul do template. */ .pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before, .pc-sidebar .pc-navbar > .pc-item.pc-trigger > .pc-link::before { background: var(--lp-acao); } /* O rodapé do tema é generoso demais em altura para um painel operacional. */ .pc-footer .footer-wrapper { padding-top: .75rem; padding-bottom: .75rem; } /* * Tela de entrada. * * O tema alinha o conteúdo lateral pelo rodapé (auth-wrapper com * align-items: flex-end), o que funciona no monitor dele e não num de 1.900px: * a marca ficava sozinha no canto de baixo com um vazio enorme acima. */ .auth-main.v2 .auth-wrapper { align-items: stretch; } .auth-main.v2 .auth-sidecontent { align-items: center; } .auth-main.v2 .auth-sidecontent .auth-sidefooter.lp-apresentacao { width: min(34rem, 78%); align-self: center; } /* * Barras de rolagem. * * O style.css do tema antigo tinha `::-webkit-scrollbar { width: 2px }`. Saiu * junto com ele na Fase 8 e ninguém repôs, então voltou a nativa do sistema, * larga e cinza. E 2px também não servia: fina demais para agarrar com o mouse. * * Aqui: 10px de trilho, polegar de 6px translúcido com respiro dos dois lados, * que escurece ao passar o mouse. Translúcido de propósito, para funcionar * tanto sobre a lateral branca quanto sobre o fundo do conteúdo, e para não * brigar com o tema escuro. */ * { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(100, 116, 139, .35) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: rgba(100, 116, 139, .32); border-radius: 99px; /* a borda transparente encolhe o polegar sem encolher a área de clique */ border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, .55); } *::-webkit-scrollbar-corner { background: transparent; } [data-pc-theme='dark'] * { scrollbar-color: rgba(148, 163, 184, .35) transparent; } [data-pc-theme='dark'] *::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, .30); } [data-pc-theme='dark'] *::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 184, .55); } /* O SimpleBar da lateral segue a mesma linguagem. */ .simplebar-scrollbar::before { background-color: rgba(100, 116, 139, .38); } .simplebar-track.simplebar-vertical { width: 10px; } /* * Menu recolhido: trilha de ícones, em vez de sumir. * * O layout vertical do tema zera a largura da lateral ao recolher * (`.pc-sidebar-hide { width: 0 }`) e o menu desaparece inteiro. Quem recolhe * quer mais espaço para a tabela, não perder a navegação: a cada ida a outra * tela precisa abrir de novo. * * O template já tem o que serve, no layout compact: trilha de 72px com o ícone * centrado. Só que compact é escolha permanente de layout, com JS próprio que * reconstrói o menu. As medidas dele são reaproveitadas aqui, aplicadas ao * ESTADO recolhido do vertical. * * A largura precisa descer por TODA a cadeia de elementos, e não só na