/* * demo.css — WINSLOTS ADMIN — Premium Dark Theme *****************************************************************************/ /* ===================== GOOGLE FONTS ===================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ===================== TEMA / CSS VARIABLES ===================== * O tema é trocado pelo atributo data-ui-theme no (o script inline em * template/head.php lê o localStorage antes de renderizar, evitando o flash). * A classe .dark-style continua SEMPRE no — ela é o gancho das regras * deste arquivo; quem define a aparência são as variáveis abaixo. Por isso * NENHUMA cor pode ficar fixa em hex fora daqui, senão não troca de tema. * ================================================================ */ /* ---- ESCURO (padrão) ---- */ :root, :root[data-ui-theme="dark"] { --bg-deep: #0b0b12; --bg-card: #12121c; --bg-surface: #171723; --bg-elevated: #1f1f2e; --border-color: #262637; --border-soft: #1c1c2a; --accent: #7c6fff; --accent-strong: #6355e6; --accent-glow: rgba(124, 111, 255, 0.22); --accent-soft: rgba(124, 111, 255, 0.12); --accent-2: #ff6b9d; --text-primary: #edeefb; --text-secondary: #9a9abc; --text-muted: #63647f; --success: #22d3a3; --danger: #ff4d7d; --warning: #ffb347; --info: #38bdf8; --shadow: 0 2px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65); --shadow-accent: 0 4px 14px rgba(124, 111, 255, 0.28); --table-stripe: rgba(255, 255, 255, 0.022); --table-hover: rgba(124, 111, 255, 0.07); --sidebar-from: #12121c; --sidebar-to: #0b0b12; --navbar-bg: rgba(18, 18, 28, 0.88); /* Tinta dos overlays das páginas do painel user (cards de pacotes/agentes). No escuro é BRANCO: clareia o card sobre o fundo escuro. Ver --overlay-ink no tema claro — é a mesma regra com a tinta invertida. */ --overlay-ink: #ffffff; } /* ---- CLARO ---- */ :root[data-ui-theme="light"] { --bg-deep: #f4f5fa; --bg-card: #ffffff; --bg-surface: #fafbfe; --bg-elevated: #f1f2f8; --border-color: #e3e5ee; --border-soft: #eceef5; --accent: #6355e6; --accent-strong: #5346d4; --accent-glow: rgba(99, 85, 230, 0.18); --accent-soft: rgba(99, 85, 230, 0.08); --accent-2: #e8467f; --text-primary: #1b1c2c; --text-secondary: #5a5c78; --text-muted: #8b8da6; --success: #12a97f; --danger: #e03360; --warning: #d98411; --info: #0d95cf; --shadow: 0 1px 3px rgba(24, 26, 46, 0.06), 0 6px 18px rgba(24, 26, 46, 0.05); --shadow-lg: 0 12px 40px rgba(24, 26, 46, 0.13); --shadow-accent: 0 4px 14px rgba(99, 85, 230, 0.22); --table-stripe: rgba(24, 26, 46, 0.02); --table-hover: rgba(99, 85, 230, 0.05); --sidebar-from: #ffffff; --sidebar-to: #fafbfe; --navbar-bg: rgba(255, 255, 255, 0.88); /* Tinta ESCURA no tema claro: os mesmos overlays que clareiam o card no escuro passam a acinzentá-lo, destacando-o do fundo quase branco (--bg-deep). Sem isto, "branco 3% sobre branco" = card invisível. */ --overlay-ink: #10111d; } /* ---- Tokens que não mudam com o tema ---- */ :root { --radius: 12px; --radius-sm: 10px; /* raio ÚNICO de botão/input — ver seção BUTTONS */ --radius-pill: 999px; --transition: all 0.2s ease; /* Bootstrap 5 lê estas variáveis internamente; apontamos pras nossas para o framework acompanhar a troca de tema sozinho. */ --bs-body-bg: var(--bg-deep); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); --bs-border-radius: var(--radius-sm); --bs-table-bg: transparent; --bs-table-striped-bg: var(--table-stripe); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: var(--table-hover); --bs-table-hover-color: var(--text-primary); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); --bs-table-accent-bg: transparent; --bs-card-bg: var(--bg-card); --bs-card-border-color: var(--border-color); } /* ===================== GLOBAL RESET ===================== */ *, *::before, *::after { box-sizing: border-box; } html, body, .dark-style, .dark-style body, .dark-style .layout-wrapper, .dark-style .layout-container { background-color: var(--bg-deep) !important; color: var(--text-primary) !important; font-family: 'Inter', 'Public Sans', sans-serif !important; } /* ===================== LAYOUT ===================== */ .dark-style .content-wrapper, .dark-style .layout-page { background-color: var(--bg-deep) !important; } /* ===================== SIDEBAR ===================== */ .dark-style .bg-menu-theme, .dark-style #layout-menu { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%) !important; border-right: 1px solid var(--border-color) !important; box-shadow: var(--shadow) !important; } /* Brand Logo */ .menu .app-brand.demo { height: 68px; margin-top: 8px; padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 8px; } .app-brand-link { text-decoration: none !important; } /* Nome do site (vem de Configurações). Texto SÓLIDO: o degradê clipado em texto que havia antes lavava as letras e ficava com cara de template genérico. Sem uppercase forçado — o admin digita o nome como quer que apareça. */ .app-brand-logo.demo { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text-primary) !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: -0.2px !important; text-transform: none !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Logo enviada pelo admin. Altura fixa + largura automática (com teto): uma logo quadrada fica ~40px; uma logo LARGA (wordmark) aparece inteira em vez de encolher pra caber num quadrado. object-fit:contain não distorce. */ .app-brand-img { height: 40px; width: auto; max-width: 150px; object-fit: contain; border-radius: var(--radius-sm); flex-shrink: 0; } /* Ícone padrão, usado enquanto nenhuma logo foi enviada. */ .app-brand-fallback { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } /* Sidebar menu items */ .dark-style .menu-inner .menu-item .menu-link { color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; margin: 2px 12px !important; padding: 10px 14px !important; transition: var(--transition) !important; font-size: 0.875rem; font-weight: 500; } .dark-style .menu-inner .menu-item .menu-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; color: var(--text-primary) !important; } .dark-style .menu-inner .menu-item.active .menu-link, .dark-style .menu-inner .menu-item .menu-link.active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)) !important; color: var(--accent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) !important; } .dark-style .menu-icon { color: inherit !important; } .dark-style .menu-header-text { color: var(--text-muted) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } /* Sidebar toggle — o theme-default.css desenha um círculo: `border-radius:50%` + `border:7px solid #f5f5f9` (anel branco grosso) + background colorido. A nossa regra antiga só zerava o background, e com especificidade MENOR que ".app-brand .layout-menu-toggle" — por isso o anel continuava aparecendo. Aqui casamos o mesmo seletor pra vencer. */ /* ATENÇÃO ao escopo: a classe .layout-menu-toggle existe em DOIS lugares — no aside é o do botão (é este que queremos estilizar), mas na navbar é um
WRAPPER com o hambúrguer num aninhado. Um seletor pelado ".layout-menu-toggle" transforma o wrapper numa caixa de 28px e o ícone, que está no filho, escapa pra fora. Por isso só ".app-brand ..." aqui. */ .dark-style .app-brand .layout-menu-toggle, .app-brand .layout-menu-toggle { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: var(--transition) !important; } .dark-style .app-brand .layout-menu-toggle:hover, .app-brand .layout-menu-toggle:hover { background-color: var(--accent-soft) !important; border-color: var(--accent) !important; } .dark-style .app-brand .layout-menu-toggle i, .app-brand .layout-menu-toggle i { color: var(--text-secondary) !important; font-size: 1.05rem !important; width: auto !important; height: auto !important; } .dark-style .app-brand .layout-menu-toggle:hover i, .app-brand .layout-menu-toggle:hover i { color: var(--accent) !important; } /* Hambúrguer da navbar (só aparece abaixo de xl): o wrapper fica neutro e quem recebe a aparência é o de dentro, senão o ícone vaza da caixa. */ .dark-style .layout-navbar .layout-menu-toggle, .layout-navbar .layout-menu-toggle { background: none !important; border: 0 !important; width: auto !important; height: auto !important; } .dark-style .layout-navbar .layout-menu-toggle .nav-link, .layout-navbar .layout-menu-toggle .nav-link { color: var(--text-secondary) !important; padding: 0 !important; transition: var(--transition) !important; } .dark-style .layout-navbar .layout-menu-toggle .nav-link:hover, .layout-navbar .layout-menu-toggle .nav-link:hover { color: var(--accent) !important; } /* ===================== NAVBAR / TOP BAR ===================== */ .dark-style .bg-navbar-theme, .dark-style .layout-navbar { background: var(--navbar-bg) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: var(--shadow) !important; } /* Navbar search */ .dark-style .layout-navbar .form-control, .dark-style .navbar .form-control { background-color: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; padding: 6px 14px !important; font-size: 0.85rem !important; max-width: 220px !important; transition: var(--transition) !important; } .dark-style .layout-navbar .form-control:focus, .dark-style .navbar .form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; outline: none !important; } .dark-style .layout-navbar .form-control::placeholder { color: var(--text-muted) !important; } /* Search icon */ .dark-style .bx-search { color: var(--text-muted) !important; } /* Dropdown menus */ .dark-style .dropdown-menu { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; } .dark-style .dropdown-item { color: var(--text-secondary) !important; transition: var(--transition) !important; } .dark-style .dropdown-item:hover { background-color: color-mix(in srgb, var(--accent) 12%, transparent) !important; color: var(--text-primary) !important; } .dark-style .dropdown-divider { border-color: var(--border-color) !important; } /* ===================== FOOTER ===================== */ .dark-style .bg-footer-theme { background-color: var(--bg-card) !important; border-top: 1px solid var(--border-color) !important; color: var(--text-muted) !important; font-size: 0.8rem; } /* ===================== CARDS ===================== */ .dark-style .card { background-color: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; color: var(--text-primary) !important; } .dark-style .card-header { background-color: transparent !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; font-weight: 600 !important; padding: 1rem 1.5rem !important; } .dark-style .card-body { color: var(--text-primary) !important; } .dark-style .card-title { color: var(--text-primary) !important; font-weight: 600 !important; } /* ===================== FORMS — ZERO WHITE BACKGROUNDS ===================== */ .dark-style .form-control, .dark-style .form-select, .dark-style textarea.form-control, .dark-style input.form-control, .dark-style select.form-select, .form-control, .form-select { background-color: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; transition: var(--transition) !important; } .dark-style .form-control:focus, .dark-style .form-select:focus, .form-control:focus, .form-select:focus { background-color: var(--bg-elevated) !important; border-color: var(--accent) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; outline: none !important; } .dark-style .form-control::placeholder { color: var(--text-muted) !important; } .dark-style .form-label, .dark-style .col-form-label, .form-label, .col-form-label { color: var(--text-secondary) !important; font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important; } /* Input group */ .dark-style .input-group-text { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; } /* Select2 dark */ .dark-style .select2-container--default .select2-selection--single { background-color: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; height: 38px !important; } .dark-style .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary) !important; line-height: 38px !important; } .dark-style .select2-dropdown { background-color: var(--bg-elevated) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .dark-style .select2-container--default .select2-results__option { color: var(--text-secondary) !important; } .dark-style .select2-container--default .select2-results__option--highlighted { background-color: color-mix(in srgb, var(--accent) 20%, transparent) !important; color: var(--text-primary) !important; } /* ===================== TABLES — OVERRIDE TOTAL DO BOOTSTRAP ===================== */ /* Sobrescreve variáveis CSS internas do Bootstrap 5 para tabelas */ .dark-style { --bs-table-bg: transparent; --bs-table-striped-bg: var(--table-stripe); --bs-table-striped-color: var(--text-primary); --bs-table-active-bg: color-mix(in srgb, var(--accent) 10%, transparent); --bs-table-hover-bg: color-mix(in srgb, var(--accent) 8%, transparent); --bs-table-hover-color: var(--text-primary); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); --bs-body-bg: var(--bg-deep); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); } .dark-style .table, .dark-style table { --bs-table-bg: transparent !important; --bs-table-striped-bg: var(--table-stripe) !important; --bs-table-striped-color: var(--text-primary) !important; --bs-table-hover-bg: color-mix(in srgb, var(--accent) 8%, transparent) !important; --bs-table-hover-color: var(--text-primary) !important; --bs-table-color: var(--text-primary) !important; --bs-table-border-color: var(--border-color) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Garante que TODAS as células fiquem escuras */ .dark-style .table td, .dark-style .table th, .dark-style table td, .dark-style table th { background-color: transparent !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; padding: 12px 16px !important; vertical-align: middle !important; font-size: 0.875rem !important; } .dark-style .table thead th, .dark-style table thead th { background-color: var(--bg-surface) !important; color: var(--text-muted) !important; border-bottom: 2px solid var(--border-color) !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; white-space: nowrap; } /* Striped override — linhas ímpares levemente diferentes */ .dark-style .table-striped>tbody>tr:nth-of-type(odd), .dark-style .table-striped>tbody>tr:nth-of-type(odd)>*, .dark-style .table-striped>tbody>tr:nth-of-type(odd)>td, .dark-style .table-striped>tbody>tr:nth-of-type(odd)>th, .dark-style table.dataTable>tbody>tr.odd, .dark-style table.dataTable>tbody>tr.odd>* { --bs-table-accent-bg: var(--table-stripe) !important; background-color: var(--table-stripe) !important; color: var(--text-primary) !important; box-shadow: none !important; } /* Linhas pares — escuras também */ .dark-style .table-striped>tbody>tr:nth-of-type(even), .dark-style .table-striped>tbody>tr:nth-of-type(even)>*, .dark-style .table-striped>tbody>tr:nth-of-type(even)>td, .dark-style table.dataTable>tbody>tr.even, .dark-style table.dataTable>tbody>tr.even>* { --bs-table-accent-bg: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; box-shadow: none !important; } /* Hover nas linhas */ .dark-style .table tbody tr:hover, .dark-style .table tbody tr:hover>td, .dark-style .table tbody tr:hover>th { background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important; color: var(--text-primary) !important; } /* Table bordered */ .dark-style .table-bordered, .dark-style .table-bordered> :not(caption)>* { border-color: var(--border-color) !important; } .dark-style .table-bordered> :not(caption)>*>* { border-color: var(--border-color) !important; } /* DataTables */ .dark-style .dataTables_wrapper .dataTables_length, .dark-style .dataTables_wrapper .dataTables_filter, .dark-style .dataTables_wrapper .dataTables_info, .dark-style .dataTables_wrapper .dataTables_paginate { color: var(--text-secondary) !important; } .dark-style .dataTables_wrapper .dataTables_filter input { background-color: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; } .dark-style .dataTables_wrapper .dataTables_length select { background-color: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; } .dark-style .page-link { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } .dark-style .page-item.active .page-link { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } /* ===================== BUTTONS ===================== * SISTEMA ÚNICO. Antes só .btn-primary, .btn-outline-* e .btn-label-* tinham * regra; .btn-info/.btn-danger/.btn-success/.btn-secondary caíam no padrão do * Bootstrap e vinham com OUTRO border-radius — era por isso que "Adicionar * Provedor" (btn-info) parecia mais quadrado que "Adicionar Jogo" (btn-primary). * Agora a base pega TODO .btn e a forma vem de um único --radius-sm. * (Os chips de provedor são pílula de propósito — componente diferente.) * ================================================================ */ /* ---- Base: forma/tipografia iguais pra qualquer variante ---- */ .dark-style .btn, .btn { border-radius: var(--radius-sm) !important; border: 1px solid transparent !important; font-weight: 600 !important; font-size: 0.8125rem !important; line-height: 1.5 !important; padding: 7px 15px !important; transition: var(--transition) !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .dark-style .btn-sm, .btn-sm { padding: 5px 12px !important; font-size: 0.75rem !important; } .dark-style .btn-lg, .btn-lg { padding: 10px 20px !important; font-size: 0.875rem !important; } .dark-style .btn:focus-visible, .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; } .dark-style .btn:disabled, .btn:disabled, .btn.disabled { opacity: 0.5 !important; pointer-events: none !important; } /* Ícone dentro do botão: alinhado e sem a margem do template */ .dark-style .btn .bx, .btn .bx { font-size: 1rem !important; margin: 0 !important; line-height: 1 !important; } /* ---- Variantes sólidas: mesma forma, só muda a cor ---- */ .dark-style .btn-primary, .btn-primary { background: var(--accent) !important; color: #fff !important; } .dark-style .btn-primary:hover, .btn-primary:hover { background: var(--accent-strong) !important; box-shadow: var(--shadow-accent) !important; } .dark-style .btn-info, .btn-info, .dark-style .btn-secondary, .btn-secondary, .dark-style .btn-success, .btn-success, .dark-style .btn-danger, .btn-danger, .dark-style .btn-warning, .btn-warning { color: #fff !important; } .dark-style .btn-info, .btn-info { background: var(--info) !important; } .dark-style .btn-success, .btn-success { background: var(--success) !important; } .dark-style .btn-danger, .btn-danger { background: var(--danger) !important; } .dark-style .btn-warning, .btn-warning { background: var(--warning) !important; } .dark-style .btn-secondary, .btn-secondary { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Escurece a própria cor no hover — serve pra qualquer variante sólida e dispensa uma regra de hover por cor. */ .dark-style .btn-info:hover, .btn-info:hover, .dark-style .btn-success:hover, .btn-success:hover, .dark-style .btn-danger:hover, .btn-danger:hover, .dark-style .btn-warning:hover, .btn-warning:hover { filter: brightness(0.92) !important; box-shadow: var(--shadow) !important; } .dark-style .btn-secondary:hover, .btn-secondary:hover { background: var(--bg-surface) !important; border-color: var(--accent) !important; } /* ---- Outline ---- */ .dark-style .btn-outline-primary, .btn-outline-primary { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; color: var(--accent) !important; background: transparent !important; } .dark-style .btn-outline-primary:hover, .dark-style .btn-outline-primary.active, .btn-outline-primary:hover, .btn-outline-primary.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; } .dark-style .btn-outline-secondary, .btn-outline-secondary { border-color: var(--border-color) !important; color: var(--text-secondary) !important; background: transparent !important; } .dark-style .btn-outline-secondary:hover, .btn-outline-secondary:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; } /* ---- Label (suave): fundo tingido + texto na cor ---- As opacidades antigas (3.4% a 6.7%) deixavam a borda invisível e o texto usava um verde fixo (#047060) que sumia no escuro. Padronizado em 12/26%. */ .dark-style .btn-label-primary, .btn-label-primary, .dark-style .btn-label-info, .btn-label-info, .dark-style .btn-label-success, .btn-label-success, .dark-style .btn-label-danger, .btn-label-danger, .dark-style .btn-label-warning, .btn-label-warning { background: transparent; border-width: 1px !important; border-style: solid !important; } .dark-style .btn-label-primary, .btn-label-primary { background-color: color-mix(in srgb, var(--accent) 12%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 26%, transparent) !important; color: var(--accent) !important; } .dark-style .btn-label-info, .btn-label-info { background-color: color-mix(in srgb, var(--info) 12%, transparent) !important; border-color: color-mix(in srgb, var(--info) 26%, transparent) !important; color: var(--info) !important; } .dark-style .btn-label-success, .btn-label-success { background-color: color-mix(in srgb, var(--success) 12%, transparent) !important; border-color: color-mix(in srgb, var(--success) 26%, transparent) !important; color: var(--success) !important; } .dark-style .btn-label-danger, .btn-label-danger { background-color: color-mix(in srgb, var(--danger) 12%, transparent) !important; border-color: color-mix(in srgb, var(--danger) 26%, transparent) !important; color: var(--danger) !important; } .dark-style .btn-label-warning, .btn-label-warning { background-color: color-mix(in srgb, var(--warning) 12%, transparent) !important; border-color: color-mix(in srgb, var(--warning) 26%, transparent) !important; color: var(--warning) !important; } .dark-style .btn-label-primary:hover, .btn-label-primary:hover { background-color: color-mix(in srgb, var(--accent) 22%, transparent) !important; } .dark-style .btn-label-info:hover, .btn-label-info:hover { background-color: color-mix(in srgb, var(--info) 22%, transparent) !important; } .dark-style .btn-label-success:hover, .btn-label-success:hover { background-color: color-mix(in srgb, var(--success) 22%, transparent) !important; } .dark-style .btn-label-danger:hover, .btn-label-danger:hover { background-color: color-mix(in srgb, var(--danger) 22%, transparent) !important; } .dark-style .btn-label-warning:hover, .btn-label-warning:hover { background-color: color-mix(in srgb, var(--warning) 22%, transparent) !important; } /* ---- Botão só com ícone (ex.: editar/excluir nos cards de jogo) ---- */ .dark-style .btn-icon, .btn-icon { padding: 0 !important; width: 32px !important; height: 32px !important; flex: 0 0 auto !important; } /* ===================== TEXT ===================== */ .dark-style .text-muted, .text-muted { color: var(--text-muted) !important; } h1, h2, h3, h4, h5, h6, .dark-style h1, .dark-style h2, .dark-style h3, .dark-style h4, .dark-style h5, .dark-style h6 { color: var(--text-primary) !important; font-weight: 700 !important; } p { color: var(--text-secondary) !important; } /* ===================== SCROLLBAR ===================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ===================== PROVIDER BUTTONS (JOGOS) ===================== */ .provider-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 20px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); border-radius: var(--radius) var(--radius) 0 0; } /* Chips e ações em containers separados: no desktop ficam lado a lado (chips à esquerda, ações empurradas à direita, como era); no mobile viram duas linhas. */ .provider-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .provider-actions { display: flex; gap: 8px; margin-left: auto; } /* Chip é PÍLULA de propósito (componente diferente do botão de ação). Precisa de .dark-style no seletor pra vencer a base ".dark-style .btn", que tem especificidade maior e senão deixaria o chip com o raio de botão. */ .dark-style .provider-btn, .provider-btn { padding: 6px 14px !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.4px !important; border-radius: var(--radius-pill) !important; text-transform: uppercase !important; transition: var(--transition) !important; } .dark-style .provider-btn.btn-primary, .provider-btn.btn-primary { background: var(--accent) !important; color: #fff !important; box-shadow: var(--shadow-accent) !important; } /* ===================== SEARCH BAR (JOGOS) ===================== */ .games-search-bar { padding: 12px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); } .games-search-bar .form-control { max-width: 280px !important; font-size: 0.85rem !important; padding: 7px 14px !important; background-color: var(--bg-surface) !important; } /* ===================== GAMES GRID — 7 por linha ===================== */ #games-container { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; padding: 20px; background: var(--bg-card); border-radius: 0 0 var(--radius) var(--radius); } /* Responsivo: menos colunas em telas menores */ @media (max-width: 1400px) { #games-container { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1100px) { #games-container { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 900px) { #games-container { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 650px) { #games-container { grid-template-columns: repeat(3, 1fr); } /* Barra de provedores no mobile: chips em cima (todos visíveis, sem rolagem lateral — é filtro de admin, esconder provedor atrapalha) e as ações numa linha inteira embaixo, 50/50. Antes as ações herdavam margin-left:auto e ficavam soltas à direita, deixando um buraco à esquerda. */ .provider-bar { flex-direction: column; /* nowrap é OBRIGATÓRIO aqui (a regra base é wrap): num container flex MULTI-LINHA o align-items:stretch dimensiona o item pela LINHA, que é medida pelo CONTEÚDO — a faixa em nowrap tem ~900px intrínsecos, então a linha virava 900px, a faixa esticava junto e quem rolava era a PÁGINA inteira. Em linha única (nowrap) a linha usa a largura do container. */ flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 12px 14px; min-width: 0; } /* Faixa rolável: UMA linha só, deslizando com o dedo. Acaba de vez com os dois problemas do wrap (borda irregular e o último chip sozinho esticando), que no celular real ficam piores que no DevTools — tela mais estreita e fonte de sistema maior. nowrap + overflow-x = rolagem; justify-content fica em flex-start de propósito (com 'center' e conteúdo maior que a faixa, o começo fica inacessível em alguns navegadores). */ .provider-chips { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* inércia no iOS */ scrollbar-width: none; /* Firefox */ /* Trava a largura no container: sem isto o conteúdo em nowrap dita a largura e quem rola é a página, não a faixa. */ width: 100%; min-width: 0; max-width: 100%; padding-bottom: 2px; } .provider-chips::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* flex:0 0 auto => o chip NÃO encolhe pra caber; mantém o tamanho e a faixa rola. */ .provider-chips .provider-btn { flex: 0 0 auto; padding: 6px 14px !important; font-size: 0.7rem !important; letter-spacing: 0.3px !important; white-space: nowrap; } .provider-actions { margin-left: 0; width: 100%; } .provider-actions > .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } } @media (max-width: 420px) { #games-container { grid-template-columns: repeat(2, 1fr); } /* Os chips NÃO encolhem aqui: a faixa é rolável, então não há motivo pra espremer fonte/padding — alvo de toque maior é melhor no dedo. */ } .game-item .card { transition: var(--transition) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; overflow: hidden; background: var(--bg-card) !important; height: 100%; } .game-item .card:hover { transform: translateY(-6px) scale(1.02) !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 10.4%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important; } /* Imagens — sem corte */ .game-item img { width: 100% !important; height: 150px !important; object-fit: contain !important; object-position: center !important; background: var(--bg-surface); padding: 6px; display: block; } .game-item .card-body { padding: 8px 10px !important; background: var(--bg-surface) !important; border-top: 1px solid var(--border-color) !important; } .game-item .card-title { font-size: 0.72rem !important; font-weight: 700 !important; margin: 0 0 2px 0 !important; color: var(--text-primary) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===================== HR ===================== */ .dark-style hr, hr { border-color: var(--border-color) !important; opacity: 1 !important; } /* ===================== BADGES ===================== */ .dark-style .badge { font-weight: 600 !important; } /* ===================== ALERTS ===================== */ .dark-style .alert { border-radius: var(--radius) !important; } /* ===================== AVATAR ===================== */ /* O indicador "online" (bolinha verde) foi removido do markup — a classe .avatar-online saiu dos dois top.php. Regras do ::after removidas junto. */ .avatar img, .avatar .avatar-initial { border-radius: var(--radius-sm) !important; } /* ===================== MISC ===================== */ .dark-style .border, .dark-style [class*="border-"] { border-color: var(--border-color) !important; } .dark-style .shadow, .dark-style .shadow-sm { box-shadow: var(--shadow) !important; } /* Remove qualquer fundo branco residual */ .dark-style *:not(.btn):not(.badge):not(img):not(.avatar) { --bs-body-bg: var(--bg-deep) !important; } .dark-style .modal-content { background-color: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; } .dark-style .modal-header { border-bottom-color: var(--border-color) !important; } .dark-style .modal-footer { border-top-color: var(--border-color) !important; } /* ===================== SWEETALERT2 ===================== * O template estiliza o swal via ".dark-style .swal2-*" com cores CRAVADAS * (popup #2b2c40, título #a3a4cc, borda #444564). Como a .dark-style fica no * nos dois temas, o modal continuava escuro no tema claro. Aqui os * mesmos seletores são refeitos com as variáveis. * ================================================================ */ .dark-style .swal2-modal.swal2-popup, .swal2-modal.swal2-popup { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-primary) !important; } .dark-style .swal2-popup .swal2-title, .swal2-popup .swal2-title { color: var(--text-primary) !important; font-size: 1.35rem !important; font-weight: 700 !important; } .dark-style .swal2-popup .swal2-content, .dark-style .swal2-popup .swal2-html-container, .dark-style .swal2-popup .swal2-content pre, .swal2-popup .swal2-content, .swal2-popup .swal2-html-container { color: var(--text-secondary) !important; font-size: 0.95rem !important; } .dark-style .swal2-popup .swal2-footer, .swal2-popup .swal2-footer { border-top: 1px solid var(--border-color) !important; color: var(--text-muted) !important; } .dark-style .swal2-popup .swal2-input, .dark-style .swal2-popup .swal2-file, .dark-style .swal2-popup .swal2-textarea, .swal2-popup .swal2-input, .swal2-popup .swal2-textarea { background: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; } /* O fundo do overlay clareia junto no tema claro (era preto fixo a 50%). */ .dark-style .swal2-container.swal2-shown, .swal2-container.swal2-shown { background: color-mix(in srgb, var(--bg-deep) 70%, transparent) !important; backdrop-filter: blur(2px); } /* Os botões do swal seguem o sistema de botões do painel. */ .dark-style .swal2-popup .swal2-styled, .swal2-popup .swal2-styled { border-radius: var(--radius-sm) !important; font-weight: 600 !important; font-size: 0.8125rem !important; padding: 7px 18px !important; box-shadow: none !important; } .dark-style .swal2-popup .swal2-styled.swal2-confirm, .swal2-popup .swal2-styled.swal2-confirm { background: var(--accent) !important; color: #fff !important; } .dark-style .swal2-popup .swal2-styled.swal2-cancel, .swal2-popup .swal2-styled.swal2-cancel { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } /* ===================== REDE DE SEGURANÇA — TEMA CLARO ===================== * O CSS do template estiliza vários componentes via ".dark-style .x" com cores * CRAVADAS (#2b2c40, #444564, #a3a4cc…). Como a .dark-style fica no nos * dois temas, esses componentes continuavam escuros no claro — foi o caso do * SweetAlert. Estes são os outros que a varredura no vendor apontou: pickers de * data, selects e dropzone. Escopado em [data-ui-theme="light"], então não há * risco nenhum pro tema escuro. * ================================================================ */ :root[data-ui-theme="light"] .daterangepicker, :root[data-ui-theme="light"] .datepicker, :root[data-ui-theme="light"] .flatpickr-calendar, :root[data-ui-theme="light"] .flatpickr-months, :root[data-ui-theme="light"] .flatpickr-weekdays, :root[data-ui-theme="light"] .flatpickr-time, :root[data-ui-theme="light"] .bootstrap-select .dropdown-menu, :root[data-ui-theme="light"] .bootstrap-select .dropdown-toggle, :root[data-ui-theme="light"] .dropzone, :root[data-ui-theme="light"] .twitter-typeahead .tt-menu { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } :root[data-ui-theme="light"] .daterangepicker td, :root[data-ui-theme="light"] .daterangepicker th, :root[data-ui-theme="light"] .datepicker td, :root[data-ui-theme="light"] .datepicker th, :root[data-ui-theme="light"] .flatpickr-day, :root[data-ui-theme="light"] .flatpickr-weekday, :root[data-ui-theme="light"] .flatpickr-current-month, :root[data-ui-theme="light"] .dropzone .dz-message { color: var(--text-primary) !important; } :root[data-ui-theme="light"] .daterangepicker td.available:hover, :root[data-ui-theme="light"] .datepicker td.day:hover, :root[data-ui-theme="light"] .flatpickr-day:hover { background: var(--accent-soft) !important; } /* ===================== CONTAINER PADDING ===================== */ .container-p-y { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } /* ===================== OVERRIDE EXTRA — ELIMINAR BRANCOS RESIDUAIS ===================== */ /* Força tema escuro em qualquer elemento que o framework tente clarear */ .dark-style input, .dark-style select, .dark-style textarea { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } .dark-style input:focus, .dark-style select:focus, .dark-style textarea:focus { background-color: var(--bg-elevated) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; color: var(--text-primary) !important; } /* DataTables search input e length select */ .dark-style .dataTables_wrapper input[type="search"], .dark-style .dataTables_wrapper select { background-color: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; padding: 5px 10px !important; } /* Navbar search — sem fundo branco */ .dark-style #layout-navbar input, .dark-style .layout-navbar input { background: transparent !important; border: none !important; color: var(--text-primary) !important; box-shadow: none !important; } /* Input group text */ .dark-style .input-group>.form-control, .dark-style .input-group>.form-select { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Select option items */ .dark-style option { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; } /* Checkbox e radio */ .dark-style .form-check-input { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; } .dark-style .form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; } /* Tbody background reset */ .dark-style table tbody { background-color: transparent !important; } /* Remove white from any nested background */ .dark-style .table-responsive { background-color: transparent !important; }