/* * stalker-admin.css — Redesign da CASCA do admin (direção "Painel": Stripe/Linear). * S1: camada GLOBAL de tokens + tipografia. * * Estratégia: em vez de duplicar/brigar com as ~2000 regras do template (Deznav), * REDEFINIMOS as CSS variables que o próprio template já consome. Isso propaga o novo * visual para todo o admin sem !important. Reaproveita o tema vivo `[data-theme-version]` * (toggle .dz-theme-mode no header, persistido em localStorage['mode']). * * Carregado no DEPOIS de style.css (vence por cascata) e ANTES de @yield('custom-css'). * Não altera markup nem JS; nenhum hook do tema é tocado. */ /* ===================== Tema claro (padrão) ===================== */ :root { /* ---- nossos tokens (reutilizáveis nos próximos incrementos) ---- */ --sa-paper: #FFFFFF; --sa-canvas: #FAFAFA; --sa-ink: #0B0B0C; --sa-sub: #5B5B63; --sa-faint: #9A9AA3; --sa-line: #ECECEF; --sa-line-2: #E0E0E4; --sa-brand: #4338CA; --sa-up: #15803D; --sa-down: #B91C1C; --sa-r: 12px; --sa-r-sm: 9px; /* ---- override das variáveis do template (propaga p/ o admin todo) ---- */ --primary: #4338CA; --secondary: #0F172A; --primary-hover: #3730A3; --primary-dark: #312E81; --rgba-primary-1: rgba(67, 56, 202, 0.06); --rgba-primary-2: rgba(67, 56, 202, 0.10); --rgba-primary-3: rgba(67, 56, 202, 0.16); --rgba-primary-4: rgba(67, 56, 202, 0.22); --rgba-primary-5: rgba(67, 56, 202, 0.30); --rgba-primary-6: rgba(67, 56, 202, 0.40); --rgba-primary-7: rgba(67, 56, 202, 0.55); --rgba-primary-8: rgba(67, 56, 202, 0.70); --rgba-primary-9: rgba(67, 56, 202, 0.85); --bs-primary: #4338CA; --bs-primary-rgb: 67, 56, 202; --bs-body-bg: #FAFAFA; --bs-body-color: #0B0B0C; --title: #0B0B0C; /* tipografia (direção Painel): Inter no corpo, Space Grotesk nos títulos */ --font-family-base: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --font-family-title: 'Space Grotesk', 'Inter', system-ui, sans-serif; } /* ===================== Override tema escuro ===================== */ [data-theme-version="dark"] { --sa-paper: #15171C; --sa-canvas: #0F1115; --sa-ink: #F2F3F5; --sa-sub: #A0A6B0; --sa-faint: #6B7280; --sa-line: #262A31; --sa-line-2: #333842; --bs-body-bg: #0F1115; --bs-body-color: #C7D0DD; --title: #F2F3F5; /* superfícies da casca que o template lê dessas vars */ --nav-headbg: #15171C; --sidebar-bg: #15171C; --headerbg: #15171C; --bs-dark: #15171C; background: #0F1115; } /* ===================== Tipografia aplicada ===================== */ body { font-family: var(--font-family-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .card-title, .text-head { font-family: var(--font-family-title); letter-spacing: -0.01em; } /* numerais tabulares em contadores grandes (dashboard, stats) */ .fs-40, .fs-36, .fs-32, .card-data h2, .widget-stat .media .media-body h3 { font-variant-numeric: tabular-nums; } /* ========================================================================= S3 (premium) — Sidebar + Navbar. Escopados sob #main-wrapper (ID) para vencer as regras [data-sidebar-style]/[data-theme-version] do template Deznav SEM !important. Só cor/borda/raio/espacamento; nenhum hook de JS (metismenu/perfectscrollbar/hamburger/dz-theme-mode) é tocado. Dark via tokens. ========================================================================= */ /* ---------- Sidebar: superfícies ---------- */ #main-wrapper .nav-header { background: var(--sa-paper); border-right: 1px solid var(--sa-line); border-bottom: 1px solid var(--sa-line); } #main-wrapper .deznav { background: var(--sa-paper); border-right: 1px solid var(--sa-line); } /* ---------- Sidebar: itens do menu ---------- */ #main-wrapper .deznav .metismenu { padding: 16px 12px; } #main-wrapper .deznav .metismenu > li { margin-bottom: 2px; } #main-wrapper .deznav .metismenu > li > a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--sa-sub); font-size: 14px; font-weight: 500; transition: background .15s ease, color .15s ease; } #main-wrapper .deznav .metismenu > li > a i { font-size: 18px; min-width: 22px; text-align: center; color: var(--sa-faint); transition: color .15s ease; } #main-wrapper .deznav .metismenu > li > a .nav-text { font-weight: 500; } #main-wrapper .deznav .metismenu > li > a:hover { background: var(--sa-canvas); color: var(--sa-ink); } #main-wrapper .deznav .metismenu > li > a:hover i { color: var(--sa-ink); } /* item ativo: pílula índigo suave + texto/ícone índigo */ #main-wrapper .deznav .metismenu > li.mm-active > a { background: var(--rgba-primary-1); color: var(--sa-brand); font-weight: 600; } #main-wrapper .deznav .metismenu > li.mm-active > a i { color: var(--sa-brand); } /* caret do submenu */ #main-wrapper .deznav .metismenu .has-arrow::after { border-color: var(--sa-faint); } /* submenu (Pricing) — só cor/espacamento; NÃO tocar display/height (colapso do metismenu) */ #main-wrapper .deznav .metismenu ul { padding-left: 30px; } #main-wrapper .deznav .metismenu ul a { padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--sa-sub); } #main-wrapper .deznav .metismenu ul a:hover, #main-wrapper .deznav .metismenu ul a.mm-active { color: var(--sa-brand); background: var(--sa-canvas); } /* ---------- Navbar (header) ---------- */ #main-wrapper .header { background: var(--sa-paper); box-shadow: none; border-bottom: 1px solid var(--sa-line); } #main-wrapper .header .header-info span { color: var(--sa-ink); font-weight: 600; } #main-wrapper .header .header-info small { color: var(--sa-sub); } /* botão de tema como icon-button limpo */ #main-wrapper .header .nav-link.dz-theme-mode { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sa-line); background: var(--sa-paper); color: var(--sa-sub); transition: background .15s ease, color .15s ease; } #main-wrapper .header .nav-link.dz-theme-mode:hover { background: var(--sa-canvas); color: var(--sa-ink); } #main-wrapper .header .nav-link.dz-theme-mode i { color: inherit; } /* avatar do perfil + linhas do hamburger */ #main-wrapper .header .header-profile img { border-radius: 50%; border: 1px solid var(--sa-line); } #main-wrapper .nav-control .hamburger .line { background: var(--sa-sub); } /* ========================================================================= S4 — Cards (global) + Dashboard. Hairline + sem sombra pesada (painel). ========================================================================= */ .card { background: var(--sa-paper); border: 1px solid var(--sa-line); border-radius: var(--sa-r); box-shadow: none; } [data-theme-version="dark"] .card { background: var(--sa-paper); border-color: var(--sa-line); } .card > .card-header { border-bottom: 1px solid var(--sa-line); background: transparent; } .card > .card-footer { border-top: 1px solid var(--sa-line); background: transparent; } /* dashboard: título, breadcrumb e stat cards */ .text-head h2 { color: var(--sa-ink); font-weight: 600; } .breadcrumb-item a { color: var(--sa-sub); } .breadcrumb-item.active a { color: var(--sa-brand); } .card-data h5 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-faint); font-weight: 500; margin-bottom: .35rem; } .card-data .fs-40 { color: var(--sa-ink); letter-spacing: -.02em; } /* ========================================================================= S5 — Componentes compartilhados (botões, inputs, modais, dropdowns, tabelas). Só cor/borda/raio via tokens; preserva paddings/layout p/ não quebrar DataTables/Select2/forms. .btn-primary fica índigo (herdado do S1). ========================================================================= */ /* botões */ .btn { border-radius: var(--sa-r-sm); } .btn-light { background: var(--sa-canvas); border-color: var(--sa-line-2); color: var(--sa-ink); } .btn-outline-primary { color: var(--sa-brand); border-color: var(--sa-line-2); } .btn-outline-primary:hover { background: var(--sa-brand); border-color: var(--sa-brand); color: #fff; } .btn-secondary { background: var(--sa-canvas); border-color: var(--sa-line-2); color: var(--sa-ink); } [data-theme-version="dark"] .btn-light, [data-theme-version="dark"] .btn-secondary { background: var(--sa-canvas); border-color: var(--sa-line-2); color: var(--sa-ink); } /* inputs / selects / labels */ .form-control, .form-select { background: var(--sa-canvas); border: 1px solid var(--sa-line-2); color: var(--sa-ink); border-radius: var(--sa-r-sm); } .form-control::placeholder { color: var(--sa-faint); } .form-control:focus, .form-select:focus { background: var(--sa-paper); border-color: var(--sa-brand); color: var(--sa-ink); } .form-label, .col-form-label { color: var(--sa-sub); } [data-theme-version="dark"] .form-control, [data-theme-version="dark"] .form-select { background: var(--sa-canvas); border-color: var(--sa-line-2); color: var(--sa-ink); } /* dropdowns (perfil no header, ações) */ .dropdown-menu { background: var(--sa-paper); border: 1px solid var(--sa-line); border-radius: var(--sa-r-sm); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .18); } .dropdown-item { color: var(--sa-ink); } .dropdown-item:hover, .dropdown-item:focus { background: var(--sa-canvas); color: var(--sa-ink); } [data-theme-version="dark"] .dropdown-menu { background: var(--sa-paper); border-color: var(--sa-line); } [data-theme-version="dark"] .dropdown-item { color: var(--sa-ink); } /* modais */ .modal-content { background: var(--sa-paper); border: 1px solid var(--sa-line); border-radius: var(--sa-r); color: var(--sa-ink); } .modal-header, .modal-footer { border-color: var(--sa-line); } .modal-title { color: var(--sa-ink); } [data-theme-version="dark"] .modal-content { background: var(--sa-paper); border-color: var(--sa-line); } [data-theme-version="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.4); } /* tabelas / DataTables */ .table { color: var(--sa-ink); } .table > :not(caption) > * > * { border-bottom-color: var(--sa-line); } .table thead th { color: var(--sa-sub); border-bottom: 1px solid var(--sa-line-2); font-weight: 600; } .table tbody tr:hover > * { background: var(--sa-canvas); } [data-theme-version="dark"] .table { color: var(--sa-ink); } [data-theme-version="dark"] .table thead th { color: var(--sa-sub); } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--sa-brand) !important; border-color: var(--sa-brand) !important; color: #fff !important; }