@import 'tailwindcss'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; /* Sem isto o menu mobile pisca aberto antes do Alpine iniciar. */ [x-cloak] { display: none !important; } /* * Tokens do Ledir BI, a partir da identidade da Ledir Automóveis * (loja.ledirautomoveis.com.br): azul real no cabeçalho, marinho no rodapé, * amarelo como faixa e destaque, laranja nas chamadas; Montserrat nos títulos * e Open Sans no texto. * * Verde e vermelho continuam significando só bom e ruim. Cada loja tem uma * cor fixa, igual em todas as telas e gráficos (`App\Visual\Cores` e * `resources/js/app.js`). */ @theme { --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-display: 'Montserrat', 'Open Sans', ui-sans-serif, system-ui, sans-serif; --color-chao: #f4f5f8; --color-superficie: #ffffff; --color-tinta: #0d1224; --color-suave: #5b6275; --color-fio: #e2e4ec; /* Azul da marca: 700 é o cabeçalho do site, 900 o rodapé. */ --color-marca-50: #efeffb; --color-marca-100: #dedcf5; /* Bordas de destaque (atalho, caixa escolhida, "sua filial"). Faltava na paleta, e as classes que o usavam caíam na cor do texto sem erro nenhum. */ --color-marca-200: #c4c1ee; --color-marca-600: #2d288f; --color-marca-700: #150f85; --color-marca-800: #0e0a5c; --color-marca-900: #050926; --color-amarelo: #f5c518; --color-laranja: #f77f00; /* Débito: todo valor que é despesa sai nesta cor, em qualquer tela. Mesmo vermelho do resultado negativo — dois vermelhos diferentes só confundem. */ --color-debito: #be123c; } @layer components { /* Barra de rolagem do menu lateral: fina, no azul, e some quando não rola. A nativa é branca e larga, e corta o painel escuro. */ .rolagem-menu { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, white 22%, transparent) transparent; /* A última linha esmaece na borda: em tela baixa, mostra que a lista continua. Sem rolagem, o esmaecimento cai no espaço vazio e não aparece. */ mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent); } .rolagem-menu::-webkit-scrollbar { width: 6px; } .rolagem-menu::-webkit-scrollbar-track { background: transparent; } .rolagem-menu::-webkit-scrollbar-thumb { border-radius: 9999px; background: color-mix(in srgb, white 28%, transparent); } .rolagem-menu:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, white 30%, transparent); } } @layer base { body { font-feature-settings: 'tnum' 1; } h1, h2, h3 { font-family: var(--font-display); } } /* * Menu recolhido, para as tabelas largas ganharem a faixa do menu. * * O estado mora no Alpine ($persist) e é escrito na tag por um script * no , antes da primeira pintura: sem isso o menu aparece e desliza para * fora a cada troca de página. Fica FORA de @layer de propósito — precisa * vencer as utilitárias do Tailwind, que estão na camada utilities. */ @media (min-width: 1024px) { html.menu-recolhido #menu-lateral { transform: translateX(-100%); } /* Sobra uma faixa à esquerda para a aba que traz o menu de volta. */ html.menu-recolhido #conteudo { padding-left: 3rem; } html.menu-recolhido #area-util { max-width: 120rem; } }