/* ============================================================================= Tema do CMS da Uheya — Padrão CMS BitKamba ============================================================================= Referência: o CMS da Médiko (public/css/mediko-cms.css), que é o padrão da casa. Aqui reproduz-se a MESMA anatomia sobre o painel Inertia/Vue que veio com o produto, em vez de a reescrever — as funcionalidades e a API que as aplicações móveis usam ficam intactas. Anatomia que estamos a reproduzir: · sidebar como CARTÃO FLUTUANTE arredondado, com margem à volta · rótulos de secção em caixa normal, não em maiúsculas · itens com ícone, ~44px, e o activo como PÍLULA sólida com seta à direita · cartão de utilizador no fundo da sidebar · barra de topo sem fundo nem contorno — as acções são pílulas · cartões, raio 20px, contorno subtil, SEM sombra · cabeçalho de tabela numa banda tingida com cantos arredondados Ficheiro estático, ligado no fim do de resources/views/app.blade.php. NÃO passa pelo Vite de propósito: um segundo pipeline a competir com o do Inertia é fonte garantida de conflitos, e assim mexer no tema não obriga a recompilar 190 mil linhas de Vue. As cores vêm todas de --cms-*, injectadas a partir da base de dados no mesmo bloco :root onde o produto já injectava --side_menu e --top_nav. Mudar a cor em Configurações repinta o painel. Nenhum hexadecimal aqui é decisão de design — são neutros de estrutura e recuos para quando as definições ainda não existem. Medido antes de escrever (1440x900, /dashboard, sessão real): sidebar 70x900 @(0,0) fundo #ffffff raio 0 com sombra activo 69x53 fundo #405189 raio 0 (azul de fábrica) topbar 1370x71 fundo #ffffff contorno em baixo cartão 313x145 raio 4px com sombra corpo #f3f3f9 ========================================================================== */ :root{ /* Raios generosos, como no padrão. */ --cms-raio-cartao: 20px; --cms-raio: 14px; --cms-raio-sm: 12px; --cms-raio-pilula: 999px; /* Estrutura. Recuos neutros — os valores reais vêm do :root do blade. */ --cms-bg: var(--cms-color-bg, #f6f7f8); --cms-sidebar-bg: var(--cms-color-sidebar, #ffffff); --cms-surface: var(--cms-color-surface, #ffffff); --cms-border: var(--cms-color-border, #e6e9ea); --cms-text: var(--cms-color-text, #16211f); --cms-muted: var(--cms-color-text-muted, #6b7a78); /* Marca. --side_menu é a definição que o produto já tinha. */ --cms-primary: var(--cms-color-primary, var(--side_menu, #004349)); --cms-primary-fg: var(--cms-color-primary-fg, #ffffff); --cms-primary-suave: var(--cms-color-primary-soft, rgba(0, 67, 73, 0.08)); /* Margem à volta do cartão da sidebar. É o que a faz "flutuar". */ --cms-sidebar-margem: 0.75rem; --cms-sidebar-largura: 260px; } /* ================================================================ estrutura */ body:has(#layout-wrapper){ background-color: var(--cms-bg); color: var(--cms-text); } /* O produto pinta o fundo em vários sítios; unificamos. */ #layout-wrapper .layout-wrapper, #layout-wrapper .main-content, #layout-wrapper .page-content{ background-color: transparent; } /* NÃO mexer no padding-top: a barra de topo é `position: fixed` e é esse padding (94px, medido) que impede o título de lhe passar por baixo. Numa primeira tentativa substituí-o por 1rem e o cabeçalho da página desapareceu atrás da topbar — a mesma armadilha de somar/substituir que o Médiko já tinha ensinado. Só o rodapé é nosso. */ #layout-wrapper .page-content{ padding-bottom: 2.5rem; } /* A sidebar deixou de estar colada à esquerda (está recuada de --cms-sidebar-margem), por isso o conteúdo tem de recuar o mesmo do lado de dentro, senão sobrepõem-se nos primeiros 12px. */ #layout-wrapper .main-content{ padding-left: calc(var(--cms-sidebar-margem) * 2); padding-right: var(--cms-sidebar-margem); } /* =================================================== sidebar: cartão flutuante O contorno de 1px é OBRIGATÓRIO: o fundo da página e o do cartão estão a poucos pontos de distância e, sem ele, lê-se como coluna sem forma em vez de cartão. (Lição do Médiko.) */ #layout-wrapper .app-menu.navbar-menu{ top: var(--cms-sidebar-margem); bottom: var(--cms-sidebar-margem); left: var(--cms-sidebar-margem); height: auto; width: var(--cms-sidebar-largura); background-color: var(--cms-sidebar-bg); border: 1px solid var(--cms-border); border-radius: var(--cms-raio-cartao); box-shadow: none; /* NÃO pôr `overflow: hidden` aqui. Com a sidebar recolhida, o tema desenha os submenus como painéis flutuantes AO LADO do cartão — medido: o painel nasce em x=93 quando o cartão acaba em x=82, ou seja 211px inteiramente fora dele. Com o overflow escondido ficavam cortados a 100% e clicar num ícone parecia não fazer nada. O raio desenha-se na mesma. */ overflow: visible; display: flex; flex-direction: column; } /* Como o cartão deixou de recortar, é a zona que rola que tem de respeitar os cantos — senão a lista passa por cima do arredondado ao rolar. */ #layout-wrapper .app-menu.navbar-menu > #scrollbar{ border-radius: 0 0 var(--cms-raio-cartao) var(--cms-raio-cartao); } /* O painel flutuante do submenu ganha a linguagem do cartão. */ [data-sidebar-size="sm"] #layout-wrapper #navbar-nav .menu-dropdown, [data-sidebar-size="md"] #layout-wrapper #navbar-nav .menu-dropdown{ background-color: var(--cms-sidebar-bg); border: 1px solid var(--cms-border); border-radius: var(--cms-raio); box-shadow: 0 8px 24px rgba(16, 33, 31, 0.10); padding: 0.4rem; z-index: 1005; } /* Caixa do logótipo: parte do mesmo cartão, sem linha a cortar. */ #layout-wrapper .app-menu .navbar-brand-box{ position: static; width: 100%; padding: 1.25rem 1.25rem 0.75rem; background: transparent; border: 0; } #layout-wrapper .app-menu .navbar-brand-box .logo img{ max-height: 34px; width: auto; } /* A navegação rola dentro do cartão; o cartão não cresce. */ #layout-wrapper #scrollbar, #layout-wrapper .app-menu .simplebar-content-wrapper{ flex: 1 1 auto; min-height: 0; } /* ------------------------------------------------- pesquisa, dentro do cartão Colada ao topo com `sticky`: a navegação rola sozinha até ao item activo e, sem isto, a caixa de procura saía de vista logo no primeiro rolamento. */ #layout-wrapper .cms-pesquisa{ position: sticky; top: 0; z-index: 3; flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; margin: 0 0.9rem 0.35rem; padding: 0 0.75rem; height: 40px; background-color: var(--cms-primary-suave); border-radius: var(--cms-raio-pilula); } /* O cinzento de apoio (--cms-muted, #6b7a78) mede 3,83:1 sobre o fundo desta caixa (#e8eeef) — abaixo dos 4,5:1 exigidos para texto normal. Medido nos pixéis já pintados, não no valor declarado. Este tom escurecido dá 5,43:1 e continua a ler-se como texto secundário. */ #layout-wrapper .cms-pesquisa__lupa{ display: inline-flex; font-size: 0.95rem; color: #55625f; } #layout-wrapper .cms-pesquisa__campo{ flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: 0.86rem; color: var(--cms-text); } #layout-wrapper .cms-pesquisa__campo::placeholder{ color: #55625f; opacity: 1; } /* O "x" nativo do type=search desenha-se de forma diferente em cada motor. */ #layout-wrapper .cms-pesquisa__campo::-webkit-search-cancel-button{ display: none; } #layout-wrapper .cms-pesquisa__limpar{ border: 0; background: transparent; padding: 0; line-height: 1; color: var(--cms-muted); cursor: pointer; } #layout-wrapper .cms-pesquisa__limpar:hover{ color: var(--cms-text); } /* --------------------------------------- cartão de utilizador, no fundo */ #layout-wrapper .cms-utilizador{ flex: 0 0 auto; margin-top: auto; padding: 0.6rem; border-top: 1px solid var(--cms-border); } #layout-wrapper .cms-utilizador__ligacao{ display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.55rem; border-radius: var(--cms-raio); color: var(--cms-text); text-decoration: none; transition: background-color 0.15s ease; } #layout-wrapper .cms-utilizador__ligacao:hover{ background-color: var(--cms-primary-suave); } #layout-wrapper .cms-utilizador__foto, #layout-wrapper .cms-utilizador__iniciais{ flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } #layout-wrapper .cms-utilizador__iniciais{ display: inline-flex; align-items: center; justify-content: center; background-color: var(--cms-primary); color: var(--cms-primary-fg); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } #layout-wrapper .cms-utilizador__texto{ min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } #layout-wrapper .cms-utilizador__nome{ font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #layout-wrapper .cms-utilizador__papel{ font-size: 0.74rem; color: var(--cms-muted); } /* Com a sidebar recolhida só cabe o avatar. */ [data-sidebar-size="sm"] #layout-wrapper .cms-pesquisa, [data-sidebar-size="sm"] #layout-wrapper .cms-utilizador__texto, [data-sidebar-size="sm-hover"] #layout-wrapper .cms-pesquisa, [data-sidebar-size="sm-hover"] #layout-wrapper .cms-utilizador__texto{ display: none; } [data-sidebar-size="sm-hover"] #layout-wrapper .app-menu:hover .cms-pesquisa, [data-sidebar-size="sm-hover"] #layout-wrapper .app-menu:hover .cms-utilizador__texto{ display: flex; } /* ------------------------------------------------------- itens de navegação */ #layout-wrapper #navbar-nav{ padding: 0.25rem 0.6rem 1rem; } #layout-wrapper #navbar-nav .nav-link{ display: flex; align-items: center; gap: 0.7rem; min-height: 44px; padding: 0.5rem 0.85rem; margin-bottom: 2px; border-radius: var(--cms-raio-pilula); color: var(--cms-text); font-size: 0.9rem; font-weight: 500; position: relative; transition: background-color 0.15s ease, color 0.15s ease; } #layout-wrapper #navbar-nav .nav-link .icon-dual, #layout-wrapper #navbar-nav .nav-link svg, #layout-wrapper #navbar-nav .nav-link i{ flex: 0 0 auto; width: 20px; height: 20px; color: currentColor; opacity: 0.85; } #layout-wrapper #navbar-nav .nav-link:hover{ background-color: var(--cms-primary-suave); color: var(--cms-primary); } /* --------------------------------------------- item activo: pílula com seta A seta é um quadrado com duas bordas, rodado 45°: desenha um ">" limpo em qualquer tamanho de texto, sem depender de tipos de ícones. */ #layout-wrapper #navbar-nav .nav-link.active, #layout-wrapper #navbar-nav .nav-link[aria-expanded="true"].active{ background-color: var(--cms-primary); color: var(--cms-primary-fg); font-weight: 600; } #layout-wrapper #navbar-nav .nav-link.active .icon-dual, #layout-wrapper #navbar-nav .nav-link.active svg, #layout-wrapper #navbar-nav .nav-link.active i{ color: var(--cms-primary-fg); opacity: 1; } /* O menu não é `ul > li`: o menu.vue mete um `div.menu` pelo meio, um por secção (Home / Users / Settings / Masters). Um `> li` a direito não bate em nada — foi o que aconteceu a esta seta na primeira escrita. */ #layout-wrapper #navbar-nav > li > .nav-link.active::after, #layout-wrapper #navbar-nav > div > li > .nav-link.active::after{ content: ""; position: absolute; right: 1rem; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.9; } /* Submenus: recuo suave, sem a guia de pontos do tema de origem. */ #layout-wrapper #navbar-nav .menu-dropdown .nav-link{ padding-left: 2.6rem; min-height: 38px; font-weight: 450; font-size: 0.86rem; } #layout-wrapper #navbar-nav .menu-dropdown .nav-link::before{ display: none; } /* O item activo de um SUBMENU não leva pílula sólida: fica texto na cor da marca sobre fundo suave. Mais discreto — e resolve um defeito real. O tema de origem traz `color: var(--side_menu) !important` para este caso (resources/scss/structure/_vertical.scss). Como `--side_menu` passou a ser a cor da marca, o texto ficou #004349 sobre um fundo #004349: contraste 1,00:1, texto invisível. Medido em "Lista de Clientes", não suposto. Daí o !important aqui — é o único modo de vencer o do tema. */ #layout-wrapper #navbar-nav .menu-dropdown .nav-link.active{ background-color: var(--cms-primary-suave); color: var(--cms-primary) !important; font-weight: 600; } #layout-wrapper #navbar-nav .menu-dropdown .nav-link.active::after{ display: none; } /* Rótulos de secção em caixa normal — menos ruído do que maiúsculas. */ #layout-wrapper .menu-title{ padding: 1.1rem 1.1rem 0.4rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cms-muted); } #layout-wrapper .menu-title span{ text-transform: none; } /* =========================================== barra de topo: sem fundo nem linha */ #layout-wrapper #page-topbar{ background: transparent; box-shadow: none; border: 0; } #layout-wrapper #page-topbar .navbar-header{ background: transparent; border: 0; padding-left: 1.25rem; padding-right: 1.25rem; } /* As acções da topbar viram pílulas discretas. */ #layout-wrapper #page-topbar .topbar-head-dropdown > .btn, #layout-wrapper #page-topbar .header-item{ border-radius: var(--cms-raio-pilula); } /* ------------------------------------------- selector de secção, na topbar Isto não é navegação duplicada: os itens do topo trocam o `activeMenu` e é a sidebar que mostra o conteúdo da secção escolhida (menu.vue desenha blocos distintos para Home / Users / Settings / Masters). Escondê-los — como cheguei a ponderar, por parecerem repetidos — deixaria Clientes, Motoristas, Administradores e Configurações sem porta nenhuma. Ficam, com a linguagem do padrão: pílula, cor da marca no activo. */ #layout-wrapper #page-topbar .nav-menu{ display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: var(--cms-raio-pilula); color: var(--cms-muted); font-size: 0.88rem; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; } #layout-wrapper #page-topbar .nav-menu:hover{ background-color: var(--cms-primary-suave); color: var(--cms-primary); } #layout-wrapper #page-topbar .nav-menu.active{ background-color: var(--cms-primary-suave); color: var(--cms-primary); font-weight: 600; } #layout-wrapper #page-topbar .nav-menu i{ font-size: 1rem; opacity: 0.9; } #layout-wrapper .page-title-box .breadcrumb{ margin: 0; font-size: 0.82rem; color: var(--cms-muted); } #layout-wrapper .page-title-box .breadcrumb a{ color: var(--cms-muted); } /* --------------------------------------------- a topbar tem de caber Ao passar a sidebar de 70px (só ícones) para 260px (com rótulos), a barra de topo perdeu 190px e o que lá está dentro deixou de caber: medido, `.header-icons-wrapper` pedia 1192px numa faixa de 1190 e transbordava 76px para fora da janela — era o que cortava o nome do utilizador à direita. A correcção é deixar as três zonas encolher (`min-width: 0`, que um contentor flex não faz por omissão) e dar um limite ao nome. */ #layout-wrapper #page-topbar .header-icons-wrapper{ min-width: 0; flex: 1 1 auto; gap: 0.25rem; } #layout-wrapper #page-topbar .header-icons-wrapper > *{ min-width: 0; } #layout-wrapper #page-topbar .navbar-header > .d-flex{ min-width: 0; } /* O nome de quem está autenticado passou a viver no cartão da sidebar, como manda o padrão. Repeti-lo na topbar só gastava os 93px que faltavam para o avatar caber — fica o avatar, e a gaveta continua a abrir no clique. */ #layout-wrapper #page-topbar .user-name-text{ display: none !important; } #layout-wrapper #page-topbar .topbar-user{ flex: 0 0 auto; min-width: 0; margin-left: 0.5rem !important; } /* Entre 1200 e 1500px o selector de secção fica só com os ícones: é o que liberta espaço sem esconder nenhum destino. */ @media (min-width: 1200px) and (max-width: 1500px) { #layout-wrapper #page-topbar .nav-menu{ padding-inline: 0.6rem; } #layout-wrapper #page-topbar .nav-menu > span:not(.dropdown-toggle){ display: none; } } /* ============================================================ cartões, 20px */ #layout-wrapper .card{ background-color: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: var(--cms-raio-cartao); box-shadow: none; } #layout-wrapper .card-header{ background-color: transparent; border-bottom: 1px solid var(--cms-border); border-radius: var(--cms-raio-cartao) var(--cms-raio-cartao) 0 0; padding: 1rem 1.25rem; } #layout-wrapper .card-header .card-title{ font-size: 0.98rem; font-weight: 600; margin: 0; } #layout-wrapper .card-body{ padding: 1.25rem; } /* =================================== tabelas: cabeçalho numa banda tingida */ #layout-wrapper .table > :not(caption) > * > *{ padding: 0.85rem 1rem; } #layout-wrapper .table > thead{ border: 0; } #layout-wrapper .table > thead th{ background-color: var(--cms-primary-suave); color: var(--cms-text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; border: 0; white-space: nowrap; } #layout-wrapper .table > thead th:first-child{ border-top-left-radius: var(--cms-raio); border-bottom-left-radius: var(--cms-raio); } #layout-wrapper .table > thead th:last-child{ border-top-right-radius: var(--cms-raio); border-bottom-right-radius: var(--cms-raio); } #layout-wrapper .table > tbody > tr > td{ border-bottom: 1px solid var(--cms-border); vertical-align: middle; } #layout-wrapper .table > tbody > tr:last-child > td{ border-bottom: 0; } /* ========================================================= botões em pílula */ #layout-wrapper .btn{ border-radius: var(--cms-raio-pilula); font-weight: 500; padding: 0.5rem 1.1rem; } #layout-wrapper .btn-sm{ padding: 0.35rem 0.85rem; } /* O produto usa .btn-success e .btn-primary como acção principal, com as cores de fábrica do tema comprado. Passam a usar a marca. */ #layout-wrapper .btn-primary, #layout-wrapper .btn-success{ background-color: var(--cms-primary); border-color: var(--cms-primary); color: var(--cms-primary-fg); } #layout-wrapper .btn-primary:hover, #layout-wrapper .btn-success:hover, #layout-wrapper .btn-primary:focus, #layout-wrapper .btn-success:focus, #layout-wrapper .btn-primary:active, #layout-wrapper .btn-success:active{ background-color: color-mix(in srgb, var(--cms-primary) 86%, #000); border-color: color-mix(in srgb, var(--cms-primary) 86%, #000); color: var(--cms-primary-fg); } #layout-wrapper .btn-outline-primary, #layout-wrapper .btn-outline-success{ color: var(--cms-primary); border-color: var(--cms-primary); } #layout-wrapper .btn-outline-primary:hover, #layout-wrapper .btn-outline-success:hover{ background-color: var(--cms-primary); border-color: var(--cms-primary); color: var(--cms-primary-fg); } /* =================================================== campos de formulário */ #layout-wrapper .form-control, #layout-wrapper .form-select{ border-radius: var(--cms-raio-sm); border-color: var(--cms-border); padding: 0.55rem 0.85rem; } #layout-wrapper .form-control:focus, #layout-wrapper .form-select:focus{ border-color: var(--cms-primary); box-shadow: 0 0 0 3px var(--cms-primary-suave); } #layout-wrapper .form-label{ font-weight: 500; font-size: 0.86rem; color: var(--cms-text); } /* ====================================================== títulos de página */ #layout-wrapper .page-title-box{ background: transparent; border: 0; padding: 0.5rem 0 1rem; } #layout-wrapper .page-title-box h4, #layout-wrapper .page-title-box .page-title{ font-size: 1.15rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cms-text); } /* ============================================================== distintivos */ #layout-wrapper .badge{ border-radius: var(--cms-raio-pilula); font-weight: 500; padding: 0.35em 0.7em; } /* ================================================================ paginação */ #layout-wrapper .pagination .page-link{ border-radius: var(--cms-raio-pilula); margin: 0 2px; border: 0; color: var(--cms-text); } #layout-wrapper .pagination .page-item.active .page-link{ background-color: var(--cms-primary); color: var(--cms-primary-fg); } /* ============================== esconder o customizador de tema do produto O painel vinha com a barra lateral direita de personalização do template comprado (escolher cores, layouts, imagens de fundo). Num CMS entregue a um cliente isso é uma porta para desalinhar tudo o que aqui se definiu — a aparência passa a mudar-se em Configurações, não numa gaveta escondida. */ #layout-wrapper .customizer-setting, #layout-wrapper .right-bar-toggle, #layout-wrapper .right-bar, #layout-wrapper body > .rightbar-overlay, #layout-wrapper #app .icon:has(> .btn-icon){ display: none !important; } /* ================================================================= modo escuro O produto alterna por data-bs-theme. Só redeclaramos tokens: nenhuma regra de anatomia é repetida. */ [data-bs-theme="dark"]{ --cms-bg: var(--cms-color-bg-dark, #14191b); --cms-sidebar-bg: var(--cms-color-sidebar-dark, #1a2124); --cms-surface: var(--cms-color-surface-dark, #1a2124); --cms-border: var(--cms-color-border-dark, #2b3538); --cms-text: var(--cms-color-text-dark, #e8eded); --cms-muted: var(--cms-color-text-muted-dark, #93a1a0); --cms-primary-suave: rgba(255, 255, 255, 0.08); } /* ================================================================ telemóvel */ @media (max-width: 767.98px) { :root{ --cms-sidebar-margem: 0.5rem; } #layout-wrapper .card{ border-radius: var(--cms-raio); } /* Aqui NÃO se toca no padding-top, pela mesma razão do desktop: a topbar é fixa e mede 70px. Cheguei a pôr 0.5rem e o título da página foi parar para trás dos ícones da barra — e como a topbar agora é transparente, via-se o texto sobreposto, em vez de simplesmente tapado. */ /* Sem sidebar à vista, o recuo que a compensava deixa de fazer sentido. */ #layout-wrapper .main-content{ padding-left: 0; padding-right: 0; } /* Num ecrã de 390px o conteúdo da topbar mede ~520px: o avatar — que é por onde se termina a sessão — ficava fora de vista e sem forma de lá chegar, porque o documento não rola na horizontal. Passa a rolar só esta faixa, e assim nada deixa de estar acessível. */ #layout-wrapper #page-topbar .header-icons-wrapper{ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #layout-wrapper #page-topbar .header-icons-wrapper::-webkit-scrollbar{ display: none; } #layout-wrapper #page-topbar .topbar-user{ margin-left: 0.25rem !important; } }