/* ========================================================================== Central LudoSoftware — tema da marca sobre o Tabler 1.4 Paleta extraída do logotipo: vermelho #D03C44 (face clara do hexágono), vermelho escuro #BC1C24 (face sombreada), grafite #303034 (wordmark) e cinza claro #ECECEC (letras "LS"). Fonte do wordmark: Enso. ========================================================================== */ @font-face { font-family: 'Enso'; src: url("../brand/fonts/enso.92b14b4ae158.ttf") format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root, [data-bs-theme=light], [data-bs-theme=dark] { --ls-red: #D03C44; --ls-red-dark: #BC1C24; --ls-red-rgb: 208, 60, 68; --ls-graphite: #303034; --ls-graphite-dark: #1F1F22; --ls-graphite-darker: #18181B; --ls-light: #ECECEC; /* A cor primária pode ser ajustada em Empresa → Aparência; o base.html sobrescreve estas variáveis inline com o valor salvo. */ --tblr-primary: var(--ls-red); --tblr-primary-rgb: var(--ls-red-rgb); --tblr-link-color: var(--ls-red); --tblr-link-hover-color: var(--ls-red-dark); --tblr-link-color-rgb: var(--ls-red-rgb); --tblr-link-hover-color-rgb: 188, 28, 36; --tblr-dark: var(--ls-graphite); --tblr-dark-rgb: 48, 48, 52; } /* -------------------------------------------------------------------------- Tema escuro: texto secundário legível (>= 4.5:1 sobre o fundo dos cards #1f2937). O Tabler deixa --tblr-secondary-rgb/--tblr-muted no cinza do tema claro (#6b7280 ≈ 3:1) — aqui clareamos o cinza sem chegar ao branco, para manter a hierarquia entre texto principal e legenda. -------------------------------------------------------------------------- */ [data-bs-theme=dark] { --tblr-secondary: #b4bcc8; --tblr-secondary-rgb: 180, 188, 200; --tblr-tertiary: #a3acb9; --tblr-muted: #b4bcc8; --tblr-secondary-color: rgba(229, 231, 235, .78); --tblr-tertiary-color: rgba(229, 231, 235, .66); --tblr-secondary-text-emphasis: #c3cad4; --tblr-card-subtitle-color: #b4bcc8; --tblr-text-secondary-dark: #c3cad4; } [data-bs-theme=dark] .form-text, [data-bs-theme=dark] .form-hint, [data-bs-theme=dark] .text-eyebrow, [data-bs-theme=dark] .page-pretitle, [data-bs-theme=dark] .card-subtitle, [data-bs-theme=dark] .kpi-card .kpi-label, [data-bs-theme=dark] .hint-icon { color: #b4bcc8; } [data-bs-theme=dark] .form-control::placeholder, [data-bs-theme=dark] .form-select:invalid { color: #8f99a6; } [data-bs-theme=dark] kbd, [data-bs-theme=dark] .topbar-search-kbd kbd { color: #c3cad4; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); } [data-bs-theme=dark] .text-secondary { color: #b4bcc8 !important; } [data-bs-theme=dark] .text-muted { color: rgba(229, 231, 235, .78) !important; } /* Reserva o espaço da barra de rolagem sempre — evita o "pulo" de largura entre páginas com e sem scroll. */ html { scrollbar-gutter: stable; } /* Status "whatsapp" (bolinha verde do Tabler) na cor do WhatsApp, não da marca. */ .status-whatsapp { --tblr-status-color: #25D366; --tblr-status-color-rgb: 37, 211, 102; } .text-whatsapp { color: #25D366 !important; } .bg-whatsapp { background-color: #25D366 !important; color: #fff; } .bg-whatsapp-lt { background-color: rgba(37, 211, 102, .12) !important; color: #128C7E !important; } /* -------------------------------------------------------------------------- Sidebar vertical (grafite) com indicador vermelho - grupos colapsáveis (acordeão) com animação de altura (Bootstrap .collapsing) - modo "mini" (html.sidebar-mini): só ícones; expande ao passar o mouse -------------------------------------------------------------------------- */ :root { --ls-sidebar-w: 15.5rem; --ls-sidebar-mini-w: 4.5rem; --ls-sidebar-ease: .28s cubic-bezier(.4, 0, .2, 1); } .navbar-vertical[data-bs-theme=dark] { --tblr-navbar-bg: var(--ls-graphite-dark); --tblr-navbar-border-color: rgba(255, 255, 255, .06); --tblr-navbar-color: rgba(255, 255, 255, .68); --tblr-navbar-hover-color: #fff; --tblr-navbar-active-color: #fff; --tblr-navbar-active-bg: rgba(var(--ls-red-rgb), .16); --tblr-navbar-active-border-color: var(--ls-red); } .navbar-vertical .navbar-brand { padding: 1rem 0 .75rem; } .navbar-vertical .brand-logo-full { height: 2.6rem; width: auto; display: block; } .brand-lockup { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: #fff; } .brand-lockup:hover { color: #fff; } .brand-lockup-icon { height: 2.35rem; width: auto; display: block; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .brand-lockup-text { font-size: 1.12rem; letter-spacing: .05em; line-height: 1; white-space: nowrap; font-weight: 700; } .brand-lockup-text .brand-accent { color: var(--ls-red); } .brand-lockup-text .brand-chevron { color: rgba(255,255,255,.55); font-weight: 400; margin: 0 .08em; } /* Itens */ .navbar-vertical .navbar-nav .nav-link { border-radius: .4rem; margin: 1px .5rem; padding: .5rem .75rem; gap: .55rem; white-space: nowrap; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .navbar-vertical .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .05); transform: translateX(2px); } .navbar-vertical .navbar-nav .nav-item.active > .nav-link, .navbar-vertical .navbar-nav .nav-link.active { background: var(--tblr-navbar-active-bg); color: #fff; box-shadow: inset 3px 0 0 0 var(--ls-red); } .navbar-vertical .navbar-nav .nav-link-icon { opacity: .85; flex: none; width: 1.5rem; display: inline-flex; justify-content: center; } .navbar-vertical .navbar-nav .nav-link-title { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--ls-sidebar-ease); } /* Grupos (acordeão) */ .navbar-vertical .nav-group > .nav-group-toggle { font-weight: 600; letter-spacing: .01em; } .navbar-vertical .navbar-nav .nav-group.active > .nav-group-toggle { color: #fff; box-shadow: none; background: transparent; } .navbar-vertical .navbar-nav .nav-group.active > .nav-group-toggle:hover { background: rgba(255, 255, 255, .05); } .navbar-vertical .nav-group.active > .nav-group-toggle .nav-link-icon { color: var(--ls-red); opacity: 1; } .navbar-vertical .nav-group-chevron { margin-left: auto; font-size: .8rem; opacity: .55; display: inline-flex; transition: transform var(--ls-sidebar-ease), opacity var(--ls-sidebar-ease); } .navbar-vertical .nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(90deg); opacity: .9; } .navbar-vertical .nav-group-body { will-change: height; } .navbar-vertical .nav-group-body.collapsing { transition: height var(--ls-sidebar-ease); } .navbar-vertical .nav-group-list { list-style: none; margin: 0 0 .25rem; padding: 0 0 0 .85rem; position: relative; } .navbar-vertical .nav-group-list::before { content: ""; position: absolute; left: 1.45rem; top: .25rem; bottom: .4rem; width: 1px; background: rgba(255, 255, 255, .09); } .navbar-vertical .nav-group-list .nav-link { font-size: .875rem; padding: .42rem .65rem .42rem .7rem; margin-left: 1.1rem; } .navbar-vertical .nav-group-list .nav-link-icon { font-size: 1rem; } .navbar-vertical .nav-group-list-sub { padding-left: 1.1rem; } .navbar-vertical .nav-group-list-sub::before { left: 1.45rem; } .navbar-vertical .nav-group-list-sub .nav-link { font-size: .83rem; } /* entrada suave dos itens quando o grupo abre */ @keyframes nav-item-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } .navbar-vertical .nav-group-body.show .nav-group-list > .nav-item { animation: nav-item-in .25s ease both; } .navbar-vertical .nav-group-body.show .nav-group-list > .nav-item:nth-child(2) { animation-delay: .03s; } .navbar-vertical .nav-group-body.show .nav-group-list > .nav-item:nth-child(3) { animation-delay: .06s; } .navbar-vertical .nav-group-body.show .nav-group-list > .nav-item:nth-child(4) { animation-delay: .09s; } .navbar-vertical .nav-group-body.show .nav-group-list > .nav-item:nth-child(5) { animation-delay: .12s; } .navbar-vertical .nav-group-body.show .nav-group-list > .nav-item:nth-child(n+6) { animation-delay: .15s; } @media (prefers-reduced-motion: reduce) { .navbar-vertical .nav-group-body.show .nav-group-list > .nav-item { animation: none; } } /* Rodapé da sidebar: info da empresa + botão recolher */ .navbar-vertical .sidebar-footer { margin-top: auto; padding: .6rem .6rem .6rem .9rem; font-size: .72rem; color: rgba(255, 255, 255, .4); border-top: 1px solid rgba(255, 255, 255, .06); align-items: center; gap: .5rem; } .navbar-vertical .sidebar-footer-info { display: flex; align-items: center; gap: .45rem; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; } .navbar-vertical .sidebar-footer-info img { flex: none; } .sidebar-collapse-btn { flex: none; width: 2rem; height: 2rem; border-radius: .4rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; } .sidebar-collapse-btn:hover { background: rgba(var(--ls-red-rgb), .25); color: #fff; } .sidebar-collapse-btn:active { transform: scale(.94); } .sidebar-icon-expand { display: none; } html.sidebar-mini .sidebar-icon-collapse { display: none; } html.sidebar-mini .sidebar-icon-expand { display: inline; } /* Seção "Acesso rápido" + alfinetes + contadores + status no rodapé */ .navbar-vertical .nav-section-title { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, .6); padding: .9rem 1.25rem .3rem; display: flex; align-items: center; gap: .35rem; white-space: nowrap; overflow: hidden; } .navbar-vertical .nav-pins-list { list-style: none; margin: 0 0 .35rem; padding: 0; } .navbar-vertical .nav-pins { border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: .25rem; } .navbar-vertical .navbar-nav .nav-link { position: relative; } .navbar-vertical .nav-link:hover .nav-link-title { padding-right: 1.6rem; } .navbar-vertical .nav-pin-btn { position: absolute; right: .4rem; top: 50%; margin-top: -.75rem; flex: none; width: 1.5rem; height: 1.5rem; border: 0; border-radius: .35rem; padding: 0; background: transparent; color: rgba(255,255,255,.55); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; opacity: 0; transition: opacity .15s, background-color .15s, color .15s, transform .15s; } .navbar-vertical .nav-link:hover .nav-pin-btn, .navbar-vertical .nav-pin-btn:focus-visible, .navbar-vertical .nav-pin-btn.is-pinned { opacity: 1; } .navbar-vertical .nav-pin-btn:hover { background: rgba(255,255,255,.12); color: #fff; } .navbar-vertical .nav-pin-btn.is-pinned { color: var(--ls-red); } .navbar-vertical .nav-pin-btn.is-pinned:hover { color: #fff; background: rgba(var(--ls-red-rgb), .5); } .navbar-vertical .nav-group-toggle .nav-badge { margin-left: auto; font-size: .62rem; padding: .2rem .4rem; min-width: 1.3rem; } .navbar-vertical .nav-group-toggle .nav-badge + .nav-group-chevron { margin-left: .35rem; } .navbar-vertical .nav-link-icon { position: relative; } .navbar-vertical .nav-badge-dot { position: absolute; top: -2px; right: -2px; width: .55rem; height: .55rem; border-radius: 50%; border: 2px solid var(--ls-graphite-dark); display: none; } .navbar-vertical .sidebar-footer-text { line-height: 1.25; } .navbar-vertical .sidebar-version { color: rgba(255,255,255,.55); font-size: .68rem; } .sidebar-wa-status { display: inline-flex; align-items: center; flex: none; } .sidebar-wa-status .status-indicator { --tblr-status-indicator-size: 1rem; } .wa-ok { --tblr-status-color: #25D366; --tblr-status-color-rgb: 37, 211, 102; } .wa-partial { --tblr-status-color: var(--tblr-warning); --tblr-status-color-rgb: 245, 159, 0; } .wa-down { --tblr-status-color: var(--tblr-danger); --tblr-status-color-rgb: 214, 57, 57; } .wa-none { --tblr-status-color: #6b7280; --tblr-status-color-rgb: 107, 114, 128; } .wa-none.status-indicator-animated .status-indicator-circle:nth-child(2), .wa-none.status-indicator-animated .status-indicator-circle:nth-child(3) { animation: none; opacity: 0; } @keyframes nav-pin-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } } .navbar-vertical .nav-pins-list .nav-item.pin-new { animation: nav-pin-pop .3s ease both; } @media (min-width: 992px) { html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-badge, html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-pin-btn, html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-section-title { opacity: 0; } html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-badge-dot { display: block; } } /* Aviso global (Configurações → Sistema → Aviso no topo) */ .announcement-bar { border-radius: 0; margin: 0; padding: .45rem 1rem; font-size: .85rem; display: flex; align-items: center; gap: .5rem; } /* Botão no cabeçalho superior */ #sidebar-toggle-top { color: var(--tblr-secondary); transition: color .15s, transform .2s; } #sidebar-toggle-top:hover { color: var(--tblr-primary); } #sidebar-toggle-top .ti { transition: transform var(--ls-sidebar-ease); display: inline-block; } html.sidebar-mini #sidebar-toggle-top .ti { transform: rotate(180deg); } /* Desktop: largura animada + modo mini */ @media (min-width: 992px) { .navbar-vertical.navbar-expand-lg { width: var(--ls-sidebar-w); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; transition: width var(--ls-sidebar-ease), box-shadow var(--ls-sidebar-ease); } .navbar-vertical.navbar-expand-lg .navbar-brand { justify-content: flex-start; padding-left: 1.05rem; } .navbar-expand-lg.navbar-vertical ~ .navbar, .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: var(--ls-sidebar-w); transition: margin-left var(--ls-sidebar-ease); } html.sidebar-mini .navbar-vertical.navbar-expand-lg { width: var(--ls-sidebar-mini-w); } html.sidebar-mini .navbar-expand-lg.navbar-vertical ~ .navbar, html.sidebar-mini .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: var(--ls-sidebar-mini-w); } /* mini + sem hover: só ícones (textos somem, grupos fechados) */ html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-link-title, html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-group-chevron, html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .brand-lockup-text, html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .sidebar-footer-info { opacity: 0; } html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-group-body { display: none; } html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .nav-group.active > .nav-group-toggle { background: var(--tblr-navbar-active-bg); box-shadow: inset 3px 0 0 0 var(--ls-red); } html.sidebar-mini .navbar-vertical.navbar-expand-lg:not(.is-hover) .navbar-nav .nav-link:hover { transform: none; } /* mini + hover: expande por cima do conteúdo, sem empurrar a página */ html.sidebar-mini .navbar-vertical.navbar-expand-lg.is-hover { width: var(--ls-sidebar-w); box-shadow: 10px 0 30px rgba(0, 0, 0, .28); } .navbar-vertical .nav-link-title, .navbar-vertical .nav-group-chevron, .navbar-vertical .brand-lockup-text, .navbar-vertical .sidebar-footer-info { transition: opacity .18s ease; } } @media (max-width: 991.98px) { .navbar-vertical .brand-logo-full { height: 1.8rem; } .navbar-vertical .sidebar-footer { display: none !important; } } /* -------------------------------------------------------------------------- Cabeçalho superior -------------------------------------------------------------------------- */ #app-topbar .avatar-ls { background: rgba(var(--ls-red-rgb), .12); color: var(--ls-red); font-weight: 600; } #app-topbar .nav-link { color: var(--tblr-body-color); } .topbar-search .form-control { min-width: 20rem; padding-right: 4.6rem; cursor: pointer; } .topbar-search-box { position: relative; } .topbar-search-kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); gap: .2rem; pointer-events: none; } .topbar-search-kbd kbd { font-size: .62rem; padding: .1rem .3rem; background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: .25rem; color: var(--tblr-secondary); font-family: inherit; } @media (max-width: 767.98px) { .topbar-search .form-control { min-width: 0; } } /* -------------------------------------------------------------------------- Componentes reaproveitados pelas telas (herdados da central de notificações) -------------------------------------------------------------------------- */ .card { transition: transform .15s ease, box-shadow .15s ease; } a.card:hover, .card.card-link:hover { transform: translateY(-2px); box-shadow: var(--tblr-shadow-lg); } .btn { transition: filter .15s ease, transform .1s ease; } .btn:hover { filter: brightness(0.96); } .btn:active { transform: translateY(1px); } .nav-link { transition: color .15s ease, background-color .15s ease; } .table-hover > tbody > tr { transition: background-color .1s ease; } /* Linha clicável de tabela (data-href) — cursor sozinho não deixa óbvio que tem algo pra clicar ali; o realce ao passar o mouse é usado em toda listagem do painel, não só automações. */ .clickable-row { cursor: pointer; transition: background-color .1s ease; } .clickable-row:hover { background-color: var(--tblr-bg-surface-secondary); } .fade-out-row { transition: opacity .2s ease; opacity: 0; } .ajax-loading { opacity: .5; transition: opacity .15s ease; pointer-events: none; } .pre-dark { background: #0d1117; color: #e6edf3; padding: 1rem 1.1rem; border-radius: .5rem; overflow-x: auto; margin: 0; font-size: .85rem; line-height: 1.5; } .pre-dark code { color: inherit; background: none; padding: 0; } .icon-circle { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tblr-primary-lt, rgba(var(--tblr-primary-rgb), .1)); color: var(--tblr-primary); font-size: 1.05rem; } .icon-circle-lg { width: 3rem; height: 3rem; font-size: 1.4rem; } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15); border-color: rgba(var(--tblr-primary-rgb), .6); } .summary-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--tblr-border-color); font-size: .8125rem; } .summary-row:last-child { border-bottom: 0; } .text-eyebrow { text-transform: uppercase; letter-spacing: .03em; font-size: .68rem; color: var(--tblr-secondary); } @keyframes reveal-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .reveal { animation: reveal-up .35s ease both; } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; } } .reveal-stagger > * { animation: reveal-up .35s ease both; } .reveal-stagger > *:nth-child(1) { animation-delay: .03s; } .reveal-stagger > *:nth-child(2) { animation-delay: .07s; } .reveal-stagger > *:nth-child(3) { animation-delay: .11s; } .reveal-stagger > *:nth-child(4) { animation-delay: .15s; } .reveal-stagger > *:nth-child(5) { animation-delay: .19s; } .reveal-stagger > *:nth-child(6) { animation-delay: .23s; } @media (prefers-reduced-motion: reduce) { .reveal-stagger > * { animation: none; } } .hero-tint { background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), .09), rgba(var(--tblr-primary-rgb), 0) 65%); border-color: rgba(var(--tblr-primary-rgb), .18); } .hero-tint .avatar { background: rgba(var(--tblr-primary-rgb), .14); color: var(--tblr-primary); } .sortable-th-icon { font-size: .9rem; transition: opacity .15s ease; } .sortable-th-icon-idle { opacity: .35; } .sortable-th a:hover .sortable-th-icon-idle { opacity: .8; } .popover-body { white-space: pre-line; } .popover { --tblr-popover-max-width: 320px; } .hint-icon { color: var(--tblr-secondary); cursor: help; font-size: .9rem; } .hint-icon:hover { color: var(--tblr-primary); } /* -------------------------------------------------------------------------- KPIs, kanban e gráficos -------------------------------------------------------------------------- */ .kpi-card .kpi-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } .kpi-card .kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary); } .kpi-card .kpi-delta { font-size: .75rem; } .kpi-accent { border-top: 3px solid var(--tblr-primary); } .kpi-accent-success { border-top-color: var(--tblr-success); } .kpi-accent-danger { border-top-color: var(--tblr-danger); } .kpi-accent-warning { border-top-color: var(--tblr-warning); } .kpi-accent-info { border-top-color: var(--tblr-info); } .kpi-accent-graphite { border-top-color: var(--ls-graphite); } .kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; align-items: flex-start; } .kanban-column { flex: 0 0 18rem; max-width: 18rem; background: var(--tblr-bg-surface-secondary); border-radius: .5rem; padding: .6rem; min-height: 12rem; } .kanban-column-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; justify-content: space-between; padding: .25rem .35rem .6rem; } .kanban-column-body { min-height: 6rem; display: flex; flex-direction: column; gap: .5rem; } .kanban-column.drag-over { outline: 2px dashed var(--tblr-primary); outline-offset: -4px; } .kanban-card { cursor: grab; margin: 0; } .kanban-card:active { cursor: grabbing; } .kanban-card.dragging { opacity: .5; } .kanban-card .card-body { padding: .7rem .85rem; } .chart-card .card-body { min-height: 16rem; } .empty-compact .empty-img { height: 6rem; } /* -------------------------------------------------------------------------- Ilustrações de estado vazio (static/illustrations/) — dois defeitos reais 1. TAMANHO. O reboot do Tabler traz `img { max-width: 100%; height: auto }`, e uma regra CSS vence o atributo `height` do HTML (atributo de apresentação tem a menor precedência que existe). Resultado medido: os PNGs de 1600×1200 renderizavam a 992×744 px, ocupando a tela inteira e passando por cima dos botões do estado vazio. Era a "imagem de fundo estranha com o layout bugado". `width: auto` devolve a proporção e o `max-height` recoloca o teto que o atributo pretendia. Fica em `max-height` (e não `height`) para respeitar os tamanhos diferentes que cada tela pede. 2. TEMA. Vinte telas usam `theme-light-only`/`theme-dark-only`, que **não existem** no Tabler (as classes dele são `hide-theme-dark` e `hide-theme-light`): sem definição, nenhuma das duas escondia nada e as duas versões da ilustração apareciam empilhadas. Definidas aqui como apelido, em vez de reescrever as 20 telas — o nome é razoável e continua funcionando se alguém usar de novo. -------------------------------------------------------------------------- */ img[src*="/illustrations/"] { width: auto; max-height: 10rem; } .empty-img img[src*="/illustrations/"] { max-height: 8rem; } .empty-compact .empty-img img[src*="/illustrations/"] { max-height: 6rem; } .theme-light-only { display: initial; } :root.theme-dark .theme-light-only, :root[data-bs-theme='dark'] .theme-light-only { display: none !important; } :root:not(.theme-dark):not([data-bs-theme='dark']) .theme-dark-only { display: none !important; } .brand-wordmark { font-family: 'Enso', var(--tblr-font-sans-serif); letter-spacing: .02em; } .brand-chevrons::before { content: '<'; color: var(--ls-graphite); opacity: .6; } .brand-chevrons::after { content: '>'; color: var(--ls-graphite); opacity: .6; } /* Badges de cor da marca */ .bg-ls-red { background: var(--ls-red) !important; color: #fff !important; } .bg-ls-red-lt { background: rgba(var(--ls-red-rgb), .12) !important; color: var(--ls-red-dark) !important; } .text-ls-red { color: var(--ls-red) !important; } .bg-graphite { background: var(--ls-graphite) !important; color: #fff !important; } /* -------------------------------------------------------------------------- Botões de ação em linhas/listas (ícone): chips arredondados com fundo suave em vez do contorno fino padrão (que parecia um checkbox). Vale para todo o sistema: qualquer .btn-icon.btn-sm com variante outline/ghost. -------------------------------------------------------------------------- */ .btn-icon.btn-sm { width: 2rem; height: 2rem; border-radius: .55rem; font-size: 1.02rem; border-width: 1px; transition: background-color .15s, color .15s, transform .12s, box-shadow .15s; } .btn-icon.btn-sm:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } .btn-icon.btn-sm:active { transform: translateY(0); box-shadow: none; } .btn-icon.btn-sm[class*="btn-outline-"] { border-color: transparent; } .btn-icon.btn-sm.btn-outline-success { background: rgba(var(--tblr-success-rgb), .12); color: var(--tblr-success); } .btn-icon.btn-sm.btn-outline-success:hover { background: var(--tblr-success); color: #fff; } .btn-icon.btn-sm.btn-outline-danger { background: rgba(var(--tblr-danger-rgb), .12); color: var(--tblr-danger); } .btn-icon.btn-sm.btn-outline-danger:hover { background: var(--tblr-danger); color: #fff; } .btn-icon.btn-sm.btn-outline-primary { background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-primary); } .btn-icon.btn-sm.btn-outline-primary:hover { background: var(--tblr-primary); color: #fff; } .btn-icon.btn-sm.btn-outline-secondary { background: rgba(var(--tblr-secondary-rgb), .12); color: var(--tblr-secondary); } .btn-icon.btn-sm.btn-outline-secondary:hover { background: var(--tblr-secondary); color: #fff; } .btn-icon.btn-sm.btn-outline-warning { background: rgba(var(--tblr-warning-rgb), .14); color: var(--tblr-warning); } .btn-icon.btn-sm.btn-outline-warning:hover { background: var(--tblr-warning); color: #fff; } .btn-icon.btn-sm.btn-outline-info { background: rgba(var(--tblr-info-rgb), .12); color: var(--tblr-info); } .btn-icon.btn-sm.btn-outline-info:hover { background: var(--tblr-info); color: #fff; } /* Cobrar via WhatsApp: verde do WhatsApp, marca branca no hover */ .btn-icon.btn-sm.text-whatsapp { background: rgba(37, 211, 102, .14) !important; color: #1da851 !important; border-color: transparent; } .btn-icon.btn-sm.text-whatsapp:hover { background: #25D366 !important; color: #fff !important; } /* Ghost (editar/excluir/mais): discreto até o hover */ .btn-icon.btn-sm.btn-ghost-secondary { color: var(--tblr-secondary); } .btn-icon.btn-sm.btn-ghost-secondary:hover { background: rgba(var(--tblr-secondary-rgb), .12); color: var(--tblr-body-color); box-shadow: none; transform: none; } .btn-icon.btn-sm.btn-ghost-danger:hover { background: rgba(var(--tblr-danger-rgb), .12); box-shadow: none; transform: none; } .btn-list.flex-nowrap .btn-icon.btn-sm + .btn-icon.btn-sm, .btn-list.flex-nowrap form + form .btn-icon.btn-sm { margin-left: 0; } /* Caixa de "concluir" de tarefas (estilo to-do): círculo vazio que vira verde com o check ao passar o mouse. */ .task-check { width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none; padding: 0; border: 2px solid rgba(var(--tblr-secondary-rgb), .45); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; cursor: pointer; transition: background-color .15s, border-color .15s, transform .12s; } .task-check .ti { opacity: 0; transition: opacity .15s; } .task-check:hover, .task-check:focus-visible { background: var(--tblr-success); border-color: var(--tblr-success); transform: scale(1.08); } .task-check:hover .ti, .task-check:focus-visible .ti { opacity: 1; } .task-check.is-done { background: var(--tblr-success); border-color: var(--tblr-success); } .task-check.is-done .ti { opacity: 1; } /* Botão "Novo" (+) do cabeçalho: botão de verdade, com rótulo em telas largas */ #btn-quick-add { display: inline-flex; align-items: center; gap: .35rem; border-radius: 2rem; padding: .35rem .9rem .35rem .7rem; font-weight: 600; box-shadow: 0 2px 8px rgba(var(--tblr-primary-rgb), .28); transition: box-shadow .15s, transform .12s, filter .15s; } #btn-quick-add .ti { font-size: 1.15rem; transition: transform .2s; } #btn-quick-add:hover { box-shadow: 0 4px 14px rgba(var(--tblr-primary-rgb), .35); transform: translateY(-1px); } #btn-quick-add[aria-expanded="true"] .ti { transform: rotate(45deg); } #btn-quick-add::after { display: none; } .quick-add-menu { min-width: 15rem; padding: .4rem; } .quick-add-menu .dropdown-item { border-radius: .4rem; padding: .5rem .6rem; display: flex; align-items: center; gap: .6rem; } .quick-add-menu .dropdown-item .icon-circle { width: 1.85rem; height: 1.85rem; font-size: .95rem; } .quick-add-menu .dropdown-header { padding: .35rem .6rem .25rem; } /* Modal de confirmação padronizado */ #modal-confirm .confirm-icon-danger { background: rgba(var(--tblr-danger-rgb), .12); color: var(--tblr-danger); } #modal-confirm .confirm-icon-warning { background: rgba(var(--tblr-warning-rgb), .14); color: var(--tblr-warning); } #modal-confirm .confirm-icon-primary { background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-primary); } #modal-confirm .confirm-icon-success { background: rgba(var(--tblr-success-rgb), .12); color: var(--tblr-success); } #modal-confirm .confirm-icon-info { background: rgba(var(--tblr-info-rgb), .12); color: var(--tblr-info); } #modal-confirm .confirm-message { white-space: pre-line; } #toast-container .toast { pointer-events: auto; } /* Tom Select: valor selecionado com a cor normal do texto (não cinza de placeholder) e fundo dos campos igual aos demais inputs, nos dois temas. */ .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { background-color: var(--tblr-bg-forms); color: var(--tblr-body-color); border-color: var(--tblr-border-color); min-height: calc(1.4285714286em + .875rem + 2px); } .ts-wrapper.single .ts-control .item { color: var(--tblr-body-color); } .ts-wrapper .ts-control input::placeholder, .ts-wrapper .ts-control .ts-placeholder { color: var(--tblr-secondary); } .ts-wrapper.focus .ts-control { border-color: rgba(var(--tblr-primary-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15); } .ts-dropdown { z-index: 1085; box-shadow: var(--tblr-shadow-dropdown, 0 .5rem 1rem rgba(0,0,0,.2)); } .ts-dropdown .option.active { background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-body-color); } .ts-dropdown .option.selected { color: var(--tblr-primary); font-weight: 500; } .modal .ts-dropdown { z-index: 1090; } /* Tabela densa para listagens financeiras */ .table-dense td, .table-dense th { padding-top: .45rem; padding-bottom: .45rem; } .amount-income { color: var(--tblr-success); font-weight: 600; } .amount-expense { color: var(--tblr-danger); font-weight: 600; } /* Avatar padronizado ({% avatar obj size %} -> partials/_avatar.html, ARQUITETURA.md 9.2): tamanho fixo, nunca encolhe no flex, alinhado ao meio do texto (o Tabler usa vertical-align: bottom, que "afunda" o avatar em linhas de tabela). */ .avatar.avatar-ls { flex: 0 0 auto; line-height: 1; font-weight: 600; vertical-align: middle; background-size: cover; background-position: center; letter-spacing: .01em; } .avatar.avatar-ls.avatar-xs { --tblr-avatar-font-size: .625rem; } .avatar.avatar-ls.avatar-sm { --tblr-avatar-font-size: .75rem; } .avatar.avatar-ls .ti { font-size: var(--tblr-avatar-icon-size); line-height: 1; } .avatar.avatar-ls.avatar-xs .ti { font-size: .85rem; } .avatar.avatar-ls.avatar-sm .ti { font-size: 1rem; } .avatar-empty { background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); } .avatar-list-stacked .avatar.avatar-ls { box-shadow: 0 0 0 2px var(--tblr-bg-surface); } td .avatar.avatar-ls, .list-group-item .avatar.avatar-ls { margin-top: -1px; } /* Avatares com cor por colaborador */ .avatar-member { color: #fff; font-weight: 600; } /* Alertas do Tabler 1.4 são flex: texto solto + // viram itens separados e quebram ("...campo Cl"). Sem .alert-icon/.alert-content a caixa volta a ser bloco; com a estrutura oficial continua flex. */ .alert:not(:has(> .alert-icon, > .alert-content, > .alert-action, > .btn-close, > .d-flex)) { display: block; } .alert > i.ti:first-child:not(.alert-icon) { margin-right: .35rem; } .alert .alert-icon.ti { width: auto !important; height: auto !important; flex: 0 0 auto; } /* Impressão (propostas / relatórios) */ @media print { .navbar, .page-header .btn-list, #app-topbar, .footer, .toast-container { display: none !important; } .page-wrapper { margin: 0 !important; } .card { box-shadow: none !important; border: 1px solid #ddd; } } /* Campos monetários (static/js/money-mask.js): prefixo "R$" compacto e texto à direita. */ .money-group .input-group-text { padding-left: .6rem; padding-right: .6rem; color: var(--tblr-secondary); font-weight: 500; } .money-group .money-input { text-align: right; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Barra de filtros das listagens (form[data-ajax-filter-form]) O defeito que isto conserta, e que já apareceu em três telas: os