/* * Ajustes do projeto sobre o tema FinLab. * * Regra: nada aqui reimplementa o que o tema ja resolve. O layout, o menu * lateral, o cabecalho e os componentes vem do style.css do tema — este * arquivo so cobre o que e especifico da locadora. */ /* A marca: simbolo desenhado + nome em texto. * * O nome e provisorio e vem do ambiente, entao ele e TEXTO, e nao parte do * desenho — trocar o nome comercial nao pode significar refazer arte. O * simbolo (partials/_marca.html.twig) nao tem letra nenhuma pelo mesmo motivo. */ .lc-marca { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: var(--primary); } /* O volume e escuro por padrao, e nao ambar: as tres faces sao `currentColor`, e desenha-las na mesma tinta do anel apagaria o relevo — o simbolo inteiro viraria uma mancha. O contraste entre o volume e o anel E o desenho. */ .lc-simbolo { flex: 0 0 auto; color: #3b2a20; } .brand-logo { gap: .65rem; } /* O logo enviado pela locadora. * * Altura fixa e largura livre: logo e desenho de proporcao propria, e forcar * uma caixa quadrada em cima dele achata marca alta e corta marca larga. O * `object-fit: contain` garante que nada seja recortado quando o arquivo vier * fora do esperado. */ .lc-logo { max-height: 2.25rem; max-width: 11rem; width: auto; object-fit: contain; } .lc-logo-entrada { max-height: 4.5rem; max-width: 15rem; width: auto; object-fit: contain; } .brand-logo .lc-marca { margin-left: 0; } /* A tinta da moldura vale DENTRO da moldura, e nao no documento inteiro. `--lc-marca-fg` nasce no (clara por padrao), entao uma marca que a lesse de qualquer lugar sairia branca sobre o creme da tela de login. As faces do volume sao `currentColor` — o simbolo se pinta com a tinta de onde esta, e so a face de cima fica sempre no ambar, que e o que o mantem reconhecivel nos dois fundos. */ .nav-header .lc-marca, .nav-header .lc-simbolo { color: var(--lc-marca-fg); } /* A MARCA SOME NO LAYOUT HORIZONTAL SEM ISTO. * * Com o cabecalho fixo, o tema poe `.header` e `.nav-header` no mesmo * `z-index` (10, em `[data-header-position="fixed"]`), e no horizontal o * cabecalho ocupa a largura inteira. Empatados, ganha quem vem depois no DOM: * o `.header` pinta o proprio fundo — opaco, e da mesma cor da moldura — por * cima da marca. Nao havia nada de errado com o desenho; ele estava atras de * uma cortina da mesma cor. * * A marca sobe um degrau. O conteudo do cabecalho comeca depois da largura da * moldura, entao subir a marca nao encobre nada. */ [data-layout="horizontal"] .nav-header { z-index: 11; } /* Simbolo e nome lado a lado, fora do cabecalho: login, e o que mais vier. */ .lc-marca-linha { display: inline-flex; align-items: center; gap: .6rem; } .lc-marca-linha .lc-marca { font-size: 1.5rem; } /* ------------------------------------------------------------------ * Primeiro plano do cabecalho. * * O tema traz, para cada slot dele (color_2..color_15), um bloco inteiro * dizendo de que cor fica o texto sobre aquele fundo. Os slots daqui * (madeira, areia) definiam so o fundo — por isso o nome da empresa saia * escuro sobre o marrom escuro, ilegivel. * * Em vez de repetir o bloco do tema por slot, o par fundo/tinta anda junto * numa variavel. Slot novo declara as duas e as regras abaixo acompanham. * ------------------------------------------------------------------ */ :root { --lc-header-fg: #2a353a; --lc-header-fg-mute: rgba(42, 53, 58, .62); --lc-header-linha: rgba(0, 0, 0, .08); /* A tinta da moldura e clara por padrao: todos os slots de moldura do tema (color_2..color_15) sao cores cheias e escuras, e a excecao e a areia, que e nossa e se declara logo abaixo. Sem este padrao, marca e hamburger saiam escuros sobre fundo escuro em qualquer slot que nao a madeira. */ --lc-marca-fg: #fff; --lc-marca-linha: rgba(255, 255, 255, .12); } /* A marca e o cabecalho tem fundos configuraveis separados, entao cada um carrega a propria tinta: marca clara com cabecalho escuro nao pode virar texto branco sobre areia. */ [data-headerbg="madeira"] { --lc-header-fg: #fff; --lc-header-fg-mute: rgba(255, 255, 255, .64); --lc-header-linha: rgba(255, 255, 255, .12); } [data-nav-headerbg="areia"] { --lc-marca-fg: #3b2a20; --lc-marca-linha: rgba(0, 0, 0, .08); } /* A empresa e a ancora do multiempresa: quem opera precisa ver, sem procurar, de qual locadora sao os dados na tela. */ .lc-empresa { display: inline-flex; align-items: center; gap: .5rem; max-width: 22rem; padding: .35rem .85rem .35rem .7rem; border: 1px solid var(--lc-header-linha); border-radius: 999px; font-weight: 600; font-size: .9rem; line-height: 1.2; color: var(--lc-header-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lc-empresa i { font-size: .95rem; color: var(--primary); } /* Bloco do usuario: iniciais como ancora visual, nome e perfil ao lado. */ .header-profile > a.nav-link { display: flex; align-items: center; gap: .65rem; } .lc-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; } /* * O `> a.nav-link` nao e enfeite: o tema declara estas duas em * `.header-profile > a.nav-link .header-info span` (0,3,2), e a versao curta * daqui (0,2,1) perdia em silencio — o nome do usuario ficava #000 sobre o * marrom. Casar a forma do seletor e o que faz a cascata resolver pela ordem * do arquivo, que e o que se quer. */ .header-profile > a.nav-link .header-info span { color: var(--lc-header-fg); } .header-profile > a.nav-link .header-info small { color: var(--lc-header-fg-mute); } /* Seta: sem ela o bloco do usuario nao parece clicavel, e "Sair" fica escondido atras de um clique que ninguem tenta. */ .header-profile > a.nav-link::after { content: ""; width: .4rem; height: .4rem; margin-left: .15rem; border-right: 1.5px solid var(--lc-header-fg-mute); border-bottom: 1.5px solid var(--lc-header-fg-mute); transform: translateY(-2px) rotate(45deg); } .header-profile > a.nav-link:hover .lc-avatar { filter: brightness(1.1); } .nav-header .hamburger .line { background: var(--lc-marca-fg, #2a353a); } /* ------------------------------------------------------------------ * Barra do topo mais baixa. * * O tema reserva 5rem (70px) so para a linha de identidade, mais 70px de menu: * 140px de altura fixa em todas as telas, num sistema cujo conteudo e tabela * longa. A altura vem de --dz-header-height, entao mexer na variavel leva * junto .header, .nav-header e o topo do menu, que dependem dela. * * O recuo do conteudo, esse, o tema crava em px por combinacao de atributos — * nao acompanha a variavel. Por isso vem aqui tambem, casando a forma do * seletor original para ganhar pela ordem do arquivo. * ------------------------------------------------------------------ */ [data-layout="horizontal"] { --dz-header-height: 4rem; } [data-layout="horizontal"] .dlabnav .metismenu { padding: .35rem 1.25rem; } /* * Pela variavel do tema, e nao pela propriedade: `a.has-arrow` recebe dele * 2.4rem de padding a direita para caber a seta do submenu, e trocar `padding` * direto apagava essa reserva — a seta passava a cair em cima da ultima letra * ("Produto[s]"). */ [data-layout="horizontal"] .dlabnav .metismenu > li > a { --dz-side-nav-padding: .5rem .85rem; } [data-layout="horizontal"][data-sidebar-style="full"] .dlabnav .metismenu > li > a.has-arrow, [data-layout="horizontal"][data-sidebar-style="icon-hover"] .dlabnav .metismenu > li > a.has-arrow { --dz-side-nav-padding: .5rem 2.4rem .5rem .85rem; } /* 7.5rem = a barra (4rem) + o menu, mantendo a mesma folga que havia entre o menu e o primeiro card. Sem isto o conteudo continuaria no lugar antigo e a barra menor viraria so um vao maior. O [data-header-position] entra no seletor so para empatar em especificidade com a regra de 9rem do tema, que carrega os quatro atributos. */ [data-header-position="fixed"][data-layout="horizontal"][data-sidebar-position="fixed"][data-sidebar-style="full"] .content-body { padding-top: 7.5rem; } /* * O filete do tema nasce so em .header, que no horizontal comeca depois da * marca — dava um toco de linha no meio da barra. Some dali e vai para as duas * metades, separando a linha de identidade da linha de navegacao inteira. */ [data-layout="horizontal"] .header { border-bottom: 0; } [data-layout="horizontal"] .nav-header { box-shadow: inset 0 -1px 0 var(--lc-marca-linha); } [data-layout="horizontal"] .header .header-content { box-shadow: inset 0 -1px 0 var(--lc-header-linha); } /* Coluna de acao nas tabelas: nao deixa os botoes quebrarem linha. */ .lc-acoes { white-space: nowrap; } /* * Cabecalho de tabela sem capitalize. * * O tema aplica text-transform: capitalize em .table thead th, o que em ingles * e inofensivo e em portugues estraga toda coluna de mais de uma palavra: * "Situacao No Periodo", "Saldo Apos", "Nº De Locacoes". Os rotulos ja vem * escritos certo dos templates. */ .table thead th, table.dataTable thead th, table.dataTable tfoot th { text-transform: none; } /* Tabela de disponibilidade: numero alinhado e legivel de relance. */ .lc-numero { font-variant-numeric: tabular-nums; } .lc-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; } /* Segunda linha de uma celula quando o que vai nela e frase, e nao codigo: "vence em 3 dias" em monoespacada parece numero de patrimonio. */ .lc-nota { font-size: .8rem; } /* Nome de coluna nao e erro: o do Bootstrap vem em #d63384, e uma lista de campos esperados toda em rosa parece um relatorio de problema. */ code.lc-codigo { color: var(--text-dark, #2a353a); background: rgba(0, 0, 0, .05); padding: .1rem .4rem; border-radius: .25rem; } /* Telas sem sessao: o content-body do tema assume menu lateral a esquerda. */ .lc-auth { margin-left: 0; min-height: 100vh; display: flex; align-items: center; } /* ------------------------------------------------------------------ * Cor primaria: liga o Bootstrap a --primary do tema. * * O style.css do FinLab define --primary por [data-primary="color_N"], mas * CRAVA o azul da demo (#01A3FF) em 45 lugares — inclusive em --bs-primary e * nos componentes do Bootstrap. Resultado: trocar data-primary pintava parte * da tela e deixava botao, paginacao, checkbox e abas azuis. * * Aqui os mesmos seletores passam a apontar para var(--primary). Nao e * sobrescrita de cor: e fazer o tema honrar a propria variavel dele. Como este * arquivo carrega depois do style.css, ganha na cascata. * ------------------------------------------------------------------ */ :root, [data-bs-theme="light"] { --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb, 32, 201, 151); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); } .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .dropdown-menu { --bs-dropdown-link-active-bg: var(--primary); } .nav-pills { --bs-nav-pills-link-active-bg: var(--primary); } .list-group { --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary); } .progress, .progress-stacked { --bs-progress-bar-bg: var(--primary); } .pagination { --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); } .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--primary); border-color: var(--primary); } .form-range::-webkit-slider-thumb { background-color: var(--primary); } .form-range::-moz-range-thumb { background-color: var(--primary); } .header-profile .profile_title { background: var(--primary); } /* * Itens de menu suspenso. * * O tema pinta .dropdown-item com #888 sobre branco — 3.5:1, abaixo do minimo * legivel para texto. "Trocar senha" e "Sair" sao acoes que a pessoa procura * uma vez e precisa achar de primeira. */ .dropdown-menu .dropdown-item { color: var(--text-dark, #2a353a); } .dropdown-menu .dropdown-item i { color: var(--primary); } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background-color: var(--rgba-primary-1, rgba(0, 0, 0, .05)); color: var(--primary-hover, var(--primary)); } /* O DataTables tambem chega com o azul proprio dele. */ .dataTables_wrapper .paginate_button.current, .dataTables_wrapper .paginate_button.current:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } /* ------------------------------------------------------------------ * Paleta quente da locadora — madeira, âmbar e terracota. * * O FinLab e um tema de cripto: a paleta dele vai de azul a roxo, e o unico * tom quente e o #fd7e14. Estes slots seguem exatamente o mesmo contrato de * variaveis dos slots nativos (color_2..color_15), entao tudo que o tema pinta * com var(--primary) acompanha sem regra nova. * * Sao valores de atributo como quaisquer outros: quem os aplica e o * base.html.twig, escrevendo direto no . * ------------------------------------------------------------------ */ [data-primary="ambar"] { --primary: #d98324; --secondary: #7c5a3a; --primary-hover: #b56a17; --primary-dark: #6b3d08; --rgba-primary-1: rgba(217, 131, 36, 0.1); --rgba-primary-2: rgba(217, 131, 36, 0.2); --rgba-primary-3: rgba(217, 131, 36, 0.3); --rgba-primary-4: rgba(217, 131, 36, 0.4); --rgba-primary-5: rgba(217, 131, 36, 0.5); --rgba-primary-6: rgba(217, 131, 36, 0.6); --rgba-primary-7: rgba(217, 131, 36, 0.7); --rgba-primary-8: rgba(217, 131, 36, 0.8); --rgba-primary-9: rgba(217, 131, 36, 0.9); --bs-primary-rgb: 217, 131, 36; } [data-primary="terracota"] { --primary: #c1440e; --secondary: #7c5a3a; --primary-hover: #9e3709; --primary-dark: #5e2105; --rgba-primary-1: rgba(193, 68, 14, 0.1); --rgba-primary-2: rgba(193, 68, 14, 0.2); --rgba-primary-3: rgba(193, 68, 14, 0.3); --rgba-primary-4: rgba(193, 68, 14, 0.4); --rgba-primary-5: rgba(193, 68, 14, 0.5); --rgba-primary-6: rgba(193, 68, 14, 0.6); --rgba-primary-7: rgba(193, 68, 14, 0.7); --rgba-primary-8: rgba(193, 68, 14, 0.8); --rgba-primary-9: rgba(193, 68, 14, 0.9); --bs-primary-rgb: 193, 68, 14; } /* Madeira escura para a moldura: cabecalho, marca e menu. */ [data-nav-headerbg="madeira"] { --nav-headbg: #3b2a20; } [data-headerbg="madeira"] { --headerbg: #3b2a20; } [data-sidebarbg="madeira"] { --sidebar-bg: #3b2a20; } [data-nav-headerbg="areia"] { --nav-headbg: #f6f1ea; } [data-headerbg="areia"] { --headerbg: #f6f1ea; } [data-sidebarbg="areia"] { --sidebar-bg: #f6f1ea; } /* * A TINTA DO MENU, E POR QUE ELA VIROU VARIAVEL. * * O tema declara a cor do texto do menu **por slot**, com !important, num bloco * escrito a mao para cada uma das quatorze cores dele. Slot que ele nao conhece * herda o padrao de menu CLARO — e era por isso que a madeira dava cinza sobre * marrom antes deste arquivo existir. * * A primeira versao daqui resolveu escrevendo o mesmo bloco para a madeira, com * a cor cravada. Isso parou de servir quando a locadora passou a escolher a * cor: `areia` nunca teve bloco equivalente (menu cinza sobre creme), e uma cor * em hexadecimal nao casa com seletor nenhum. * * Entao a regra ficou uma so e a **cor** virou variavel. Cada moldura declara a * sua logo abaixo; a cor propria da locadora chega pelo