/* ========================================================================== WebSIS — camada de tema -------------------------------------------------------------------------- Carregado DEPOIS de todo o Metronic (ver menu_lateral.blade.php), por isso sobrescreve sem precisar de !important na maioria dos casos. Onde o Metronic usa cadeia de seletores longa, aqui repetimos a mesma cadeia em vez de empilhar !important — mantem a folha previsivel. O Metronic 7 nao tem fontes SCSS neste projeto (so o bundle de 2,2 MB ja compilado), entao toda a repaginacao vive aqui. ATENCAO — TAMANHOS EM PX, NAO EM REM. O Metronic redefine o html para font-size: 12px. Um .875rem, que numa base normal daria 14px, aqui sai 10,5px. Escrevi este arquivo assumindo 16px e os 35 valores sairam 25% menores — o titulo da listagem ficou em 13,5px e o label dos indicadores em 9px. Por isso todo font-size aqui e absoluto. Se acrescentar regra, use px. ========================================================================== */ :root { /* ---- Neutros (frios, para nao amarelar sob luz de escritorio) ---- */ --ws-n-0: #FFFFFF; --ws-n-50: #F6F8FA; --ws-n-100: #ECEFF3; --ws-n-200: #DFE3E9; --ws-n-300: #C7CDD6; --ws-n-400: #9AA3B0; --ws-n-500: #6E7887; --ws-n-600: #545D6B; --ws-n-700: #3D4550; --ws-n-800: #272D36; --ws-n-900: #161B22; /* ---- Primario: unico responsavel por "acao/navegacao" ---- Antes o sistema tinha DOIS acentos disputando esse papel: o verde-oliva #97b924 do logo e o azul #3699ff padrao do Metronic. Agora e so este. */ --ws-primary-50: #EEF3FE; --ws-primary-100: #D8E4FC; --ws-primary: #3B6FE0; --ws-primary-600: #2F5BC4; --ws-primary-700: #24499E; /* ---- Semanticos: verde volta a significar so "sucesso" ---- Calibrados em luminosidade parecida para nenhum gritar mais que o outro, e escuros o bastante para passar contraste como texto sobre fundo claro. */ --ws-success: #1E8E5A; --ws-success-50: #E8F5EE; --ws-warning: #B7791F; --ws-warning-50: #FBF3E3; --ws-danger: #C4362B; --ws-danger-50: #FBEAE8; --ws-info: #0E7C8A; --ws-info-50: #E4F3F5; /* ---- Sidebar e faixa da marca: mesma cor, sem costura ---- */ --ws-side-bg: #101724; --ws-side-hover: #1A2434; --ws-side-active: #1E2A3D; --ws-side-text: #9BA6B7; --ws-side-text-active: #FFFFFF; --ws-side-section: #5D6879; --ws-side-border: rgba(255, 255, 255, .06); /* ---- Forma ---- */ --ws-radius: 6px; --ws-radius-lg: 10px; --ws-shadow-sm: 0 1px 2px rgba(22, 27, 34, .06); --ws-shadow: 0 2px 8px rgba(22, 27, 34, .08); --ws-t: .15s ease; } /* ========================================================================== 1. SIDEBAR ========================================================================== */ .aside { background-color: var(--ws-side-bg); box-shadow: none; } /* --- Faixa da marca --------------------------------------------------- O dark-brand.css pintava .brand de branco com "border-bottom: 2px solid #dfe2e8", criando uma costura horizontal entre o logo e o menu. Unificamos com o fundo da sidebar. O @media espelha o do dark-brand.css para vencer na mesma especificidade. */ @media (min-width: 992px) { .brand { background-color: var(--ws-side-bg); border-bottom: 1px solid var(--ws-side-border); box-shadow: none; } .brand .btn i, .brand .btn .svg-icon svg g [fill] { color: var(--ws-side-text); fill: var(--ws-side-text); } .brand .btn:hover i, .brand .btn.active i, .brand .btn:hover .svg-icon svg g [fill], .brand .btn.active .svg-icon svg g [fill] { color: var(--ws-side-text-active); fill: var(--ws-side-text-active); } } /* Logo branco. So o logo padrao do WebSIS leva o filtro — o logo do cliente (LOGOCLIENTE=1) e colorido e seria destruido por ele. Ver menu_lateral.blade.php. */ .brand .brand-logo img.logo-padrao, #kt_header_mobile img.logo-padrao { filter: brightness(0) invert(1); } /* --- Itens de menu ---------------------------------------------------- IMPORTANTE: os seletores abaixo sao copiados LITERALMENTE do dark-aside.css. Aquele arquivo usa cadeias longas — o hover chega a 0,9,0 de especificidade por causa dos quatro :not() encadeados. Espelhar o seletor e vencer pela ordem da cascata e mais previsivel do que empilhar !important. Se um dia o skin mudar, estas regras param de casar e o verde volta: e o sinal de que precisam ser re-sincronizadas. */ .aside-menu { background-color: transparent; } /* Estado padrao */ .aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item > .menu-link .menu-text { color: var(--ws-side-text); font-weight: 500; transition: color var(--ws-t); } .aside-menu .menu-nav > .menu-item > .menu-link { transition: background-color var(--ws-t); } /* Os icones agora sao de traço com stroke="currentColor" (ver App\Helpers\Menu::getIcone), entao basta definir `color` no .menu-icon — nao e mais preciso caçar [fill] dentro do do SVG. */ .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon, .aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon { color: var(--ws-side-text); transition: color var(--ws-t); } .aside-menu .menu-nav .menu-icon svg { width: 21px; height: 21px; vertical-align: middle; } /* Hover — o seletor original tem quatro :not() e nao pode ser encurtado. */ .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link { background-color: var(--ws-side-hover); } /* Aberto (submenu expandido) */ .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link { background-color: var(--ws-side-hover); } .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text { color: var(--ws-side-text-active); } .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon { color: var(--ws-side-text-active); } .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-arrow, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-arrow { color: var(--ws-side-text-active); } /* "here" = ancestral da rota atual. O skin pintava igual ao ativo, o que fazia dois itens parecerem selecionados ao mesmo tempo. Agora e so um realce. */ .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link { background-color: var(--ws-side-hover); } .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text { color: var(--ws-side-text-active); } .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon { color: var(--ws-side-text); } .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-heading .menu-arrow, .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-arrow { color: var(--ws-side-text-active); } /* Ativo — era uma barra verde-oliva solida ocupando o item inteiro. Agora fundo sutil + indicador de 3px: marca a posicao sem competir com a tela. */ .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link { background-color: var(--ws-side-active); position: relative; } .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--ws-primary); } .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--ws-side-text-active); font-weight: 600; } .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon { color: var(--ws-primary); } /* Bullets: o skin usava #3699ff em todos os estados. */ .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-bullet.menu-bullet-line > span, .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-bullet.menu-bullet-line > span, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-bullet.menu-bullet-line > span { background-color: var(--ws-primary); } /* --- Submenu ---------------------------------------------------------- Aqui a cadeia do skin tem um nivel a mais (>.menu-item .menu-submenu .menu-item), entao os seletores precisam acompanhar. */ .aside-menu .menu-nav > .menu-item .menu-submenu { background-color: rgba(0, 0, 0, .16); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text { color: var(--ws-side-text); font-weight: 400; } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link { background-color: var(--ws-side-hover); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-heading, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-here > .menu-heading, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-here > .menu-link { background-color: var(--ws-side-hover); } /* O skin adicionava margin-left:10px so no ativo do submenu, deslocando o item em relacao aos irmaos. Trocamos por indicador na borda, sem deslocar. */ .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-heading, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link { background-color: var(--ws-side-active); margin-left: 0; position: relative; } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--ws-primary); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-text { color: var(--ws-side-text-active); font-weight: 600; } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link .menu-text, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-here > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-here > .menu-link .menu-text { color: var(--ws-side-text-active); } /* Bullets do submenu */ .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet.menu-bullet-line > span { background-color: var(--ws-n-500); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-bullet.menu-bullet-line > span, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-here > .menu-link .menu-bullet.menu-bullet-dot > span { background-color: var(--ws-primary); } /* Seta do submenu: o skin usava #000000, invisivel no fundo escuro. */ .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-arrow, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-arrow { color: var(--ws-side-text); } /* Cabecalho de secao dentro do submenu (menu-item-parent) */ .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-parent > .menu-link .menu-text { color: var(--ws-side-section); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; } /* --- Foco de teclado: nao existia. Sem isto, navegar por Tab e as cegas. -- */ .aside-menu .menu-nav .menu-link:focus-visible, .brand .btn:focus-visible, .header .menu-link:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: -2px; } /* --- Scrollbar do menu ------------------------------------------------- As duas regras .ps__rail-y abaixo so valem quando o PerfectScrollbar do Metronic esta inicializado em .aside-menu. Ele NAO esta: o wrapper usa rolagem nativa, entao quem aparecia era a barra padrao do sistema -- cinza clara, com setas, 15px de largura -- cravada dentro da sidebar escura e comendo espaco do menu (265px de aside viravam 250px uteis). Estilizamos a nativa para o tema escuro e mantemos as regras do PS caso ele volte a ser inicializado. */ /* --- Altura do wrapper, e por que ela e zero ---------------------------- O menu nao rolava: os ultimos grupos ficavam abaixo da dobra sem como alcanca-los. Medido numa janela de 1052px, o aside tinha 1006px e este wrapper, 1208px -- maior que o proprio aside. A causa e o .flex-column-fluid do Metronic, que e `flex: 1 0 auto`. Com flex-basis auto a altura vem do conteudo, e com flex-shrink 0 o item nao encolhe para caber: o wrapper acompanha o tamanho do menu, nunca fica menor que a tela, e o overflow-y nao tem o que rolar. `height: 0` zera a base. Ai o flex-grow: 1 distribui o espaco que sobra depois da marca, o wrapper para exatamente na altura disponivel e o overflow passa a valer -- em qualquer altura de janela. Isto ja foi removido uma vez por parecer inofensivo (estava inline na view, como height: 0px). Nao e. */ #kt_aside_menu_wrapper { height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; } #kt_aside_menu_wrapper::-webkit-scrollbar { width: 6px; } #kt_aside_menu_wrapper::-webkit-scrollbar-track { background: transparent; } #kt_aside_menu_wrapper::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .22); border-radius: 3px; } #kt_aside_menu_wrapper::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .35); } .aside .aside-menu.ps > .ps__rail-y > .ps__thumb-y { background-color: rgba(255, 255, 255, .18); } .aside .aside-menu.ps > .ps__rail-y:hover > .ps__thumb-y { background-color: rgba(255, 255, 255, .3); } /* ========================================================================== 2. HEADER ========================================================================== */ .header { background-color: var(--ws-n-0); box-shadow: var(--ws-shadow-sm); border-bottom: 1px solid var(--ws-n-200); /* Centralizacao vertical e gutter lateral vinham de .brand, que o #kt_header carregava indevidamente (ver comentario no menu_lateral.blade.php). Com a classe removida do header, as duas propriedades passam a ser declaradas aqui, que e o lugar delas. */ align-items: center; padding: 0 25px; } /* Abaixo de 992px quem atende e o #kt_header_mobile; o header desktop tem de sumir. Isso tambem so acontecia por tabela, via .brand{display:none} do Metronic. O style.bundle.css nao tem nenhuma regra de display para .header fora do @media (min-width: 992px), entao sem esta declaracao o header desktop reapareceria empilhado sobre o mobile. */ @media (max-width: 991.98px) { .header { display: none; } } /* O header do Metronic e um flex container com um bloco a esquerda e o .topbar a direita; sem conteudo no meio, tudo ficava colado nas pontas. */ .header .container-fluid.div-topo { align-items: center; } /* --- Empresa ativa (esquerda) ---------------------------------------- */ .header .menu-nav { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; } .ws-header-empresa > a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 10px; border-radius: var(--ws-radius); color: var(--ws-n-700); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; transition: background-color var(--ws-t), border-color var(--ws-t), color var(--ws-t); } .ws-header-empresa > a svg { color: var(--ws-n-400); flex-shrink: 0; transition: color var(--ws-t); } .ws-header-empresa > a:hover { background-color: var(--ws-n-50); border-color: var(--ws-n-200); color: var(--ws-n-900); } .ws-header-empresa > a:hover svg { color: var(--ws-primary); } /* Razao social costuma ser longa; corta em vez de empurrar o layout. */ .ws-header-empresa > a span { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Badges contextuais que dividem a barra (Upgrade, Assinar contrato) */ .header .menu-nav .label.label-inline { border-radius: var(--ws-radius); font-weight: 600; font-size: 13px; } /* --- Bloco do usuario (direita) --------------------------------------- */ .ws-user { display: flex; align-items: center; gap: 10px; padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--ws-n-200); } .ws-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: var(--ws-primary-50); color: var(--ws-primary-700); font-size: 12px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; user-select: none; } .ws-user-nome { color: var(--ws-n-700); font-size: 14px; font-weight: 600; line-height: 1.2; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sair: acao secundaria, nao destrutiva. Era btn-danger vermelho. Fica neutro e so assume o vermelho no hover, como confirmacao visual. */ .ws-sair { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ws-radius); color: var(--ws-n-500); background-color: transparent; transition: background-color var(--ws-t), color var(--ws-t); } .ws-sair:hover { background-color: var(--ws-danger-50); color: var(--ws-danger); } .ws-sair:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 2px; } /* Em telas estreitas o nome sai e sobra avatar + sair. */ @media (max-width: 1199.98px) { .ws-user-nome { display: none; } .ws-header-empresa > a span { max-width: 20ch; } } /* --- Icones do topbar (notificacoes) ---------------------------------- */ .header .btn.btn-icon i, .header .btn.btn-icon .svg-icon svg g [fill] { color: var(--ws-n-500); fill: var(--ws-n-500); transition: color var(--ws-t), fill var(--ws-t); } .header .btn.btn-icon:hover i, .header .btn.btn-icon:hover .svg-icon svg g [fill] { color: var(--ws-primary); fill: var(--ws-primary); } /* --- Header mobile ---------------------------------------------------- Estava em #1a1a27, cor que nao aparecia em nenhum outro lugar do sistema. */ @media (max-width: 991.98px) { .header-mobile { background-color: var(--ws-side-bg); box-shadow: var(--ws-shadow-sm); } .header-mobile .burger-icon span, .header-mobile .burger-icon span::after, .header-mobile .burger-icon span::before { background-color: var(--ws-side-text); } .header-mobile .burger-icon:hover span, .header-mobile .burger-icon:hover span::after, .header-mobile .burger-icon:hover span::before, .header-mobile .burger-icon-active span, .header-mobile .burger-icon-active span::after, .header-mobile .burger-icon-active span::before { background-color: var(--ws-primary); } .header-mobile .btn i, .header-mobile .btn .svg-icon svg g [fill] { color: var(--ws-side-text); fill: var(--ws-side-text); } .header-mobile .btn:hover i, .header-mobile .btn.active i, .header-mobile .btn:hover .svg-icon svg g [fill], .header-mobile .btn.active .svg-icon svg g [fill] { color: var(--ws-side-text-active); fill: var(--ws-side-text-active); } } /* ========================================================================== 3. ESTADO RECOLHIDO (aside-minimize) ========================================================================== */ .aside-minimize .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link::before { width: 3px; } .aside-minimize .brand .brand-logo img.logo-padrao { max-width: 42px; } /* ========================================================================== 4. LISTAGENS ========================================================================== */ /* --- Cabecalho da tabela --------------------------------------------- Era uppercase com letter-spacing largo e fonte minuscula: praticamente ilegivel. O .datatable-* do Metronic e markup estatico copiado a mao — nao ha lib de datatable por tras — entao estilizamos direto. */ .datatable .datatable-head .datatable-row, .datatable-table thead .datatable-row { background-color: var(--ws-n-50); border-bottom: 1px solid var(--ws-n-200); } .datatable-table thead .datatable-cell > span { color: var(--ws-n-600); font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none; } /* --- Linhas ------------------------------------------------------------ */ .datatable-table tbody .datatable-row { border-bottom: 1px solid var(--ws-n-100); transition: background-color var(--ws-t); } .datatable-table tbody .datatable-row:hover { background-color: var(--ws-primary-50); } .datatable-table tbody .datatable-cell > span { color: var(--ws-n-700); font-size: 13px; } /* --- Coluna de acoes --------------------------------------------------- */ .ws-actions { display: inline-flex; align-items: center; gap: 2px; } .ws-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ws-radius); background-color: transparent; color: var(--ws-n-500); font-size: 17px; line-height: 1; cursor: pointer; transition: background-color var(--ws-t), color var(--ws-t); } .ws-action:hover, .ws-action:focus { background-color: var(--ws-n-100); color: var(--ws-primary); text-decoration: none; } .ws-action:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 1px; } .ws-actions-more.show .ws-action { background-color: var(--ws-n-100); color: var(--ws-primary); } /* Menu de overflow */ .ws-actions-menu { min-width: 208px; padding: 6px; border: 1px solid var(--ws-n-200); border-radius: var(--ws-radius-lg); box-shadow: var(--ws-shadow); } .ws-actions-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ws-radius); color: var(--ws-n-700); font-size: 14px; font-weight: 500; } .ws-actions-menu .dropdown-item i { width: 18px; color: var(--ws-n-400); font-size: 17px; text-align: center; } .ws-actions-menu .dropdown-item:hover, .ws-actions-menu .dropdown-item:focus { background-color: var(--ws-n-50); color: var(--ws-n-900); } .ws-actions-menu .dropdown-item:hover i { color: var(--ws-primary); } .ws-actions-menu .dropdown-divider { margin: 6px 4px; border-top-color: var(--ws-n-200); } /* Unica acao colorida da linha: a destrutiva. */ .ws-actions-menu .dropdown-item.ws-action-destrutiva, .ws-actions-menu .dropdown-item.ws-action-destrutiva i { color: var(--ws-danger); } .ws-actions-menu .dropdown-item.ws-action-destrutiva:hover { background-color: var(--ws-danger-50); color: var(--ws-danger); } /* --- Estado vazio ------------------------------------------------------ */ /* A linha do estado vazio nao centralizava. Motivo: o .datatable-table do Metronic e "display: block", e as linhas de dados carregam .datatable-row, que o skin define como "display: table; width: 100%". A linha do estado vazio e um sem classe, entao caia no "display: table-row" padrao e o navegador embrulhava ela numa tabela anonima que encolhe ate o conteudo: o ficava com a largura do texto (454px numa tabela de 1299px) e ancorado a esquerda. O bloco ate estava centralizado -- dentro da propria caixa encolhida, que por sua vez estava torta. Aqui a linha sem classe passa a se comportar como .datatable-row. Vale para as 107 listagens que usam dentro de . */ .datatable-table > tbody > tr:not(.datatable-row) { display: table; width: 100%; } .datatable-table > tbody > tr:not(.datatable-row) > td { display: table-cell; width: 100%; } .ws-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 56px 24px; text-align: center; } .ws-empty-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background-color: var(--ws-n-100); color: var(--ws-n-400); font-size: 28px; } .ws-empty-titulo { margin: 0; color: var(--ws-n-800); font-size: 16px; font-weight: 600; } .ws-empty-desc { margin: 0; max-width: 46ch; color: var(--ws-n-500); font-size: 14px; } .ws-empty-acao { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 16px; border-radius: var(--ws-radius); background-color: var(--ws-primary); color: #fff; font-size: 14px; font-weight: 600; transition: background-color var(--ws-t); } .ws-empty-acao:hover { background-color: var(--ws-primary-600); color: #fff; text-decoration: none; } /* --- Barra de acoes em lote (ex.: /vendas) ----------------------------- Substitui as duas linhas de 12 botoes coloridos que ficavam abaixo da tabela. Os botoes desabilitados continuam recebendo .disabled via nf.js. */ .ws-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0 4px; border-top: 1px solid var(--ws-n-100); margin-top: 12px; } .ws-toolbar .btn { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--ws-radius); font-size: 14px; font-weight: 600; padding: 9px 15px; } .ws-toolbar .btn.btn-primary { background-color: var(--ws-primary); border-color: var(--ws-primary); } .ws-toolbar .btn.btn-primary:hover { background-color: var(--ws-primary-600); border-color: var(--ws-primary-600); } .ws-toolbar .btn.btn-light { background-color: var(--ws-n-0); border: 1px solid var(--ws-n-200); color: var(--ws-n-700); } .ws-toolbar .btn.btn-light:hover { background-color: var(--ws-n-50); border-color: var(--ws-n-300); color: var(--ws-n-900); } /* Desabilitado: o nf.js alterna a classe .disabled conforme o estado da nota. */ .ws-toolbar .btn.disabled, .ws-toolbar .btn[disabled], .ws-actions-menu .dropdown-item.disabled { opacity: .45; pointer-events: none; } .ws-toolbar-more .dropdown-menu { min-width: 248px; } /* --- Botao "Opções" e popup ------------------------------------------- Substitui o dropdown, que era cortado pelo overflow dos ancestrais. */ .ws-opcoes-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border: 1px solid var(--ws-n-200); border-radius: var(--ws-radius); background-color: var(--ws-n-0); color: var(--ws-n-600); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--ws-t), border-color var(--ws-t), color var(--ws-t); } .ws-opcoes-btn:hover { background-color: var(--ws-n-50); border-color: var(--ws-n-300); color: var(--ws-n-900); } .ws-opcoes-btn:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 1px; } .ws-opcoes-modal .modal-content { border: 0; border-radius: var(--ws-radius-lg); box-shadow: 0 12px 32px rgba(22, 27, 34, .18); } .ws-opcoes-modal .modal-header { align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--ws-n-100); } .ws-opcoes-modal .modal-title { color: var(--ws-n-800); font-size: 16px; font-weight: 600; } .ws-opcoes-modal .close { padding: 0; margin: 0; color: var(--ws-n-500); font-size: 18px; opacity: 1; text-shadow: none; } .ws-opcoes-modal .close:hover { color: var(--ws-n-900); } .ws-opcoes-modal .modal-body { padding: 12px; } /* Nome do registro sobre o qual as opcoes agem — sem isso o popup nao diz em qual linha voce clicou. */ .ws-opcoes-alvo { margin: 2px 6px 10px; color: var(--ws-n-500); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-opcoes-lista { display: flex; flex-direction: column; gap: 2px; } .ws-opcoes-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--ws-radius); color: var(--ws-n-700); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--ws-t), color var(--ws-t); } .ws-opcoes-item i { width: 20px; color: var(--ws-n-400); font-size: 18px; text-align: center; transition: color var(--ws-t); } .ws-opcoes-item:hover { background-color: var(--ws-n-50); color: var(--ws-n-900); text-decoration: none; } .ws-opcoes-item:hover i { color: var(--ws-primary); } /* Unica opcao colorida: a destrutiva. */ .ws-opcoes-item-perigo, .ws-opcoes-item-perigo i { color: var(--ws-danger); } .ws-opcoes-item-perigo:hover { background-color: var(--ws-danger-50); color: var(--ws-danger); } .ws-opcoes-item-perigo:hover i { color: var(--ws-danger); } /* --- Verde de criar/confirmar ------------------------------------------ O fork do style.bundle.css renderiza .btn-success como rgb(0,66,100), um navy escuro que nao conversa com nada. Criar e confirmar sao acoes de criacao: verde semantico, distinto do primario de navegacao. O seletor comecou escopado em .card-body e .ws-toolbar-topo, e so pegava . Nas telas de cadastro nao existe .card-body — a estrutura e .card-custom > .kt-section__body — e o Salvar e