/* ============================================================ KERN APP — Sistema de Temas 20 temas: 10 claros + 10 escuros Aplicados via classe no ex: Variáveis usadas em todo o sistema (site + admin) ============================================================ */ /* ── Variáveis base (fallback) ── */ :root { --kern-primary: #0d6efd; --kern-primary-dark: #0a58ca; --kern-primary-light: #cfe2ff; --kern-secondary: #6c757d; --kern-bg: #f5f6fa; --kern-surface: #ffffff; --kern-text: #212529; --kern-text-muted: #6c757d; --kern-border: #dee2e6; --kern-navbar-bg: #212529; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #1e2235; --kern-sidebar-text: #c8cde4; --kern-sidebar-active: #4f8ef7; --kern-footer-bg: #1e2235; --kern-footer-text: #c8cde4; --kern-shadow: 0 .125rem .25rem rgba(0,0,0,.075); } /* ============================================================ TEMAS CLAROS ============================================================ */ /* 1. Azul (padrão Bootstrap) */ body.tema-azul, body:not([class*="tema-"]) { --kern-primary: #0d6efd; --kern-primary-dark: #0a58ca; --kern-primary-light: #cfe2ff; --kern-secondary: #6c757d; --kern-bg: #f5f6fa; --kern-surface: #ffffff; --kern-text: #212529; --kern-text-muted: #6c757d; --kern-border: #dee2e6; --kern-navbar-bg: #0d1b2a; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #1e2235; --kern-sidebar-text: #c8cde4; --kern-sidebar-active: #0d6efd; --kern-footer-bg: #1e2235; --kern-footer-text: #c8cde4; } /* 2. Verde esmeralda */ body.tema-verde { --kern-primary: #198754; --kern-primary-dark: #146c43; --kern-primary-light: #d1e7dd; --kern-secondary: #5a6268; --kern-bg: #f0f7f4; --kern-surface: #ffffff; --kern-text: #1a2e25; --kern-text-muted: #5a7a6a; --kern-border: #c3e6cb; --kern-navbar-bg: #0f3d26; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #0f3d26; --kern-sidebar-text: #a8d5bc; --kern-sidebar-active: #28a745; --kern-footer-bg: #0f3d26; --kern-footer-text: #a8d5bc; } /* 3. Roxo/Índigo */ body.tema-roxo { --kern-primary: #6610f2; --kern-primary-dark: #520dc2; --kern-primary-light: #e0cffc; --kern-secondary: #6c757d; --kern-bg: #f5f0ff; --kern-surface: #ffffff; --kern-text: #1a0533; --kern-text-muted: #6f42c1; --kern-border: #d8b4fe; --kern-navbar-bg: #2d0b6e; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #2d0b6e; --kern-sidebar-text: #c4b5fd; --kern-sidebar-active: #a855f7; --kern-footer-bg: #2d0b6e; --kern-footer-text: #c4b5fd; } /* 4. Laranja vibrante */ body.tema-laranja { --kern-primary: #fd7e14; --kern-primary-dark: #dc6502; --kern-primary-light: #ffe5d0; --kern-secondary: #6c757d; --kern-bg: #fff8f0; --kern-surface: #ffffff; --kern-text: #2d1700; --kern-text-muted: #a0522d; --kern-border: #ffc89a; --kern-navbar-bg: #7b3500; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #7b3500; --kern-sidebar-text: #ffd0a0; --kern-sidebar-active: #fd7e14; --kern-footer-bg: #7b3500; --kern-footer-text: #ffd0a0; } /* 5. Vermelho corporativo */ body.tema-vermelho { --kern-primary: #dc3545; --kern-primary-dark: #b02a37; --kern-primary-light: #f8d7da; --kern-secondary: #6c757d; --kern-bg: #fff5f5; --kern-surface: #ffffff; --kern-text: #2d0000; --kern-text-muted: #842029; --kern-border: #f5c2c7; --kern-navbar-bg: #6e0000; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #6e0000; --kern-sidebar-text: #ffb3b3; --kern-sidebar-active: #ff4d4d; --kern-footer-bg: #6e0000; --kern-footer-text: #ffb3b3; } /* 6. Teal (verde-azulado) */ body.tema-teal { --kern-primary: #20c997; --kern-primary-dark: #199d76; --kern-primary-light: #d2f4ea; --kern-secondary: #6c757d; --kern-bg: #f0faf7; --kern-surface: #ffffff; --kern-text: #0a2e25; --kern-text-muted: #0d6e56; --kern-border: #a7f3d0; --kern-navbar-bg: #06402e; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #06402e; --kern-sidebar-text: #6ee7b7; --kern-sidebar-active: #10b981; --kern-footer-bg: #06402e; --kern-footer-text: #6ee7b7; } /* 7. Rosa moderno */ body.tema-rosa { --kern-primary: #d63384; --kern-primary-dark: #ab296a; --kern-primary-light: #f7d6e6; --kern-secondary: #6c757d; --kern-bg: #fff0f6; --kern-surface: #ffffff; --kern-text: #2d0020; --kern-text-muted: #9c1f5a; --kern-border: #f4a8c9; --kern-navbar-bg: #5c0033; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #5c0033; --kern-sidebar-text: #f9a8d4; --kern-sidebar-active: #ec4899; --kern-footer-bg: #5c0033; --kern-footer-text: #f9a8d4; } /* 8. Cinza neutro profissional */ body.tema-cinza { --kern-primary: #495057; --kern-primary-dark: #343a40; --kern-primary-light: #e2e3e5; --kern-secondary: #868e96; --kern-bg: #f8f9fa; --kern-surface: #ffffff; --kern-text: #212529; --kern-text-muted: #6c757d; --kern-border: #ced4da; --kern-navbar-bg: #212529; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #2c3034; --kern-sidebar-text: #adb5bd; --kern-sidebar-active: #6c757d; --kern-footer-bg: #212529; --kern-footer-text: #adb5bd; } /* 9. Marrom terroso */ body.tema-marrom { --kern-primary: #795548; --kern-primary-dark: #5d4037; --kern-primary-light: #efebe9; --kern-secondary: #8d6e63; --kern-bg: #fdf8f5; --kern-surface: #ffffff; --kern-text: #1a0e0a; --kern-text-muted: #6d4c41; --kern-border: #d7ccc8; --kern-navbar-bg: #3e2723; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #3e2723; --kern-sidebar-text: #d7ccc8; --kern-sidebar-active: #a1887f; --kern-footer-bg: #3e2723; --kern-footer-text: #d7ccc8; } /* 10. Dourado/Âmbar */ body.tema-dourado { --kern-primary: #f59e0b; --kern-primary-dark: #d97706; --kern-primary-light: #fef3c7; --kern-secondary: #92400e; --kern-bg: #fffbeb; --kern-surface: #ffffff; --kern-text: #1c1300; --kern-text-muted: #92400e; --kern-border: #fde68a; --kern-navbar-bg: #451a03; --kern-navbar-text: #ffffff; --kern-sidebar-bg: #451a03; --kern-sidebar-text: #fde68a; --kern-sidebar-active: #f59e0b; --kern-footer-bg: #451a03; --kern-footer-text: #fde68a; } /* ============================================================ TEMAS ESCUROS ============================================================ */ /* 11. Dark Azul */ body.tema-dark-azul { --kern-primary: #4f8ef7; --kern-primary-dark: #2563eb; --kern-primary-light: #1e3a5f; --kern-secondary: #94a3b8; --kern-bg: #0f172a; --kern-surface: #1e293b; --kern-text: #e2e8f0; --kern-text-muted: #94a3b8; --kern-border: #334155; --kern-navbar-bg: #0a0f1e; --kern-navbar-text: #e2e8f0; --kern-sidebar-bg: #0a0f1e; --kern-sidebar-text: #94a3b8; --kern-sidebar-active: #4f8ef7; --kern-footer-bg: #0a0f1e; --kern-footer-text: #94a3b8; } /* 12. Dark Verde */ body.tema-dark-verde { --kern-primary: #22c55e; --kern-primary-dark: #16a34a; --kern-primary-light: #14532d; --kern-secondary: #86efac; --kern-bg: #052e16; --kern-surface: #0a3d23; --kern-text: #dcfce7; --kern-text-muted: #86efac; --kern-border: #166534; --kern-navbar-bg: #021b0d; --kern-navbar-text: #dcfce7; --kern-sidebar-bg: #021b0d; --kern-sidebar-text: #86efac; --kern-sidebar-active: #22c55e; --kern-footer-bg: #021b0d; --kern-footer-text: #86efac; } /* 13. Dark Roxo */ body.tema-dark-roxo { --kern-primary: #a855f7; --kern-primary-dark: #9333ea; --kern-primary-light: #3b0764; --kern-secondary: #d8b4fe; --kern-bg: #1a0533; --kern-surface: #2d0b6e30; --kern-text: #f3e8ff; --kern-text-muted: #c4b5fd; --kern-border: #4c1d95; --kern-navbar-bg: #0d0019; --kern-navbar-text: #f3e8ff; --kern-sidebar-bg: #0d0019; --kern-sidebar-text: #c4b5fd; --kern-sidebar-active: #a855f7; --kern-footer-bg: #0d0019; --kern-footer-text: #c4b5fd; } /* 14. Dark Laranja */ body.tema-dark-laranja { --kern-primary: #fb923c; --kern-primary-dark: #ea6c1a; --kern-primary-light: #431407; --kern-secondary: #fed7aa; --kern-bg: #1c0700; --kern-surface: #2c1000; --kern-text: #ffedd5; --kern-text-muted: #fed7aa; --kern-border: #7c2d12; --kern-navbar-bg: #0d0300; --kern-navbar-text: #ffedd5; --kern-sidebar-bg: #0d0300; --kern-sidebar-text: #fed7aa; --kern-sidebar-active: #fb923c; --kern-footer-bg: #0d0300; --kern-footer-text: #fed7aa; } /* 15. Dark Vermelho */ body.tema-dark-vermelho { --kern-primary: #f87171; --kern-primary-dark: #ef4444; --kern-primary-light: #450a0a; --kern-secondary: #fca5a5; --kern-bg: #1c0000; --kern-surface: #2d0000; --kern-text: #fee2e2; --kern-text-muted: #fca5a5; --kern-border: #7f1d1d; --kern-navbar-bg: #0d0000; --kern-navbar-text: #fee2e2; --kern-sidebar-bg: #0d0000; --kern-sidebar-text: #fca5a5; --kern-sidebar-active: #f87171; --kern-footer-bg: #0d0000; --kern-footer-text: #fca5a5; } /* 16. Dark Teal */ body.tema-dark-teal { --kern-primary: #2dd4bf; --kern-primary-dark: #14b8a6; --kern-primary-light: #042f2e; --kern-secondary: #99f6e4; --kern-bg: #021a19; --kern-surface: #042f2e; --kern-text: #ccfbf1; --kern-text-muted: #5eead4; --kern-border: #115e59; --kern-navbar-bg: #010d0c; --kern-navbar-text: #ccfbf1; --kern-sidebar-bg: #010d0c; --kern-sidebar-text: #5eead4; --kern-sidebar-active: #2dd4bf; --kern-footer-bg: #010d0c; --kern-footer-text: #5eead4; } /* 17. Dark Rosa */ body.tema-dark-rosa { --kern-primary: #f472b6; --kern-primary-dark: #ec4899; --kern-primary-light: #500724; --kern-secondary: #fbcfe8; --kern-bg: #1c0010; --kern-surface: #2d001a; --kern-text: #fce7f3; --kern-text-muted: #f9a8d4; --kern-border: #831843; --kern-navbar-bg: #0d0008; --kern-navbar-text: #fce7f3; --kern-sidebar-bg: #0d0008; --kern-sidebar-text: #f9a8d4; --kern-sidebar-active: #f472b6; --kern-footer-bg: #0d0008; --kern-footer-text: #f9a8d4; } /* 18. Dark Cinza (quase preto) */ body.tema-dark-cinza { --kern-primary: #9ca3af; --kern-primary-dark: #6b7280; --kern-primary-light: #1f2937; --kern-secondary: #d1d5db; --kern-bg: #030712; --kern-surface: #111827; --kern-text: #f9fafb; --kern-text-muted: #9ca3af; --kern-border: #374151; --kern-navbar-bg: #000000; --kern-navbar-text: #f9fafb; --kern-sidebar-bg: #000000; --kern-sidebar-text: #9ca3af; --kern-sidebar-active: #d1d5db; --kern-footer-bg: #000000; --kern-footer-text: #9ca3af; } /* 19. Dark Marrom */ body.tema-dark-marrom { --kern-primary: #a1887f; --kern-primary-dark: #795548; --kern-primary-light: #3e2723; --kern-secondary: #d7ccc8; --kern-bg: #1a0e0a; --kern-surface: #2c1810; --kern-text: #efebe9; --kern-text-muted: #bcaaa4; --kern-border: #5d4037; --kern-navbar-bg: #0a0604; --kern-navbar-text: #efebe9; --kern-sidebar-bg: #0a0604; --kern-sidebar-text: #bcaaa4; --kern-sidebar-active: #a1887f; --kern-footer-bg: #0a0604; --kern-footer-text: #bcaaa4; } /* 20. Dark Dourado */ body.tema-dark-dourado { --kern-primary: #fbbf24; --kern-primary-dark: #f59e0b; --kern-primary-light: #451a03; --kern-secondary: #fde68a; --kern-bg: #1c0f00; --kern-surface: #2d1a00; --kern-text: #fef3c7; --kern-text-muted: #fde68a; --kern-border: #78350f; --kern-navbar-bg: #0d0700; --kern-navbar-text: #fef3c7; --kern-sidebar-bg: #0d0700; --kern-sidebar-text: #fde68a; --kern-sidebar-active: #fbbf24; --kern-footer-bg: #0d0700; --kern-footer-text: #fde68a; } /* ============================================================ APLICAÇÃO DAS VARIÁVEIS NOS COMPONENTES ============================================================ */ body { background-color: var(--kern-bg) !important; color: var(--kern-text) !important; } /* Cards e superfícies */ .card { background-color: var(--kern-surface) !important; border-color: var(--kern-border) !important; color: var(--kern-text) !important; } .card-header, .card-footer { background-color: var(--kern-surface) !important; border-color: var(--kern-border) !important; } /* Navbar do site */ .navbar.kern-navbar { background-color: var(--kern-navbar-bg) !important; color: var(--kern-navbar-text) !important; } .navbar.kern-navbar .nav-link, .navbar.kern-navbar .navbar-brand { color: var(--kern-navbar-text) !important; } .navbar.kern-navbar .btn-outline-light { border-color: var(--kern-navbar-text); color: var(--kern-navbar-text); } /* Sidebar do admin */ #sidebar { background-color: var(--kern-sidebar-bg) !important; color: var(--kern-sidebar-text) !important; } #sidebar .nav-link { color: var(--kern-sidebar-text) !important; } #sidebar .nav-link:hover, #sidebar .nav-link.active { border-left-color: var(--kern-sidebar-active) !important; color: #fff !important; } /* Footer */ footer { background-color: var(--kern-footer-bg) !important; color: var(--kern-footer-text) !important; } footer a { color: var(--kern-footer-text) !important; } footer a:hover { color: #fff !important; } /* Botões primários */ .btn-primary { background-color: var(--kern-primary) !important; border-color: var(--kern-primary-dark) !important; } .btn-primary:hover { background-color: var(--kern-primary-dark) !important; } .btn-outline-primary { color: var(--kern-primary) !important; border-color: var(--kern-primary) !important; } .btn-outline-primary:hover { background-color: var(--kern-primary) !important; color: #fff !important; } /* Texto primário */ .text-primary { color: var(--kern-primary) !important; } /* Inputs */ .form-control, .form-select { background-color: var(--kern-surface) !important; color: var(--kern-text) !important; border-color: var(--kern-border) !important; } /* Tables */ .table { color: var(--kern-text) !important; border-color: var(--kern-border) !important; } .table-light { background-color: var(--kern-bg) !important; color: var(--kern-text-muted) !important; } .table-hover tbody tr:hover { background-color: var(--kern-primary-light) !important; } /* Topbar do admin */ #topbar { background-color: var(--kern-surface) !important; border-color: var(--kern-border) !important; } /* List group */ .list-group-item { background-color: var(--kern-surface) !important; border-color: var(--kern-border) !important; color: var(--kern-text) !important; } /* Dropdown */ .dropdown-menu { background-color: var(--kern-surface) !important; border-color: var(--kern-border) !important; } .dropdown-item { color: var(--kern-text) !important; } .dropdown-item:hover { background-color: var(--kern-primary-light) !important; } /* Tabs */ .nav-tabs .nav-link.active { background-color: var(--kern-surface) !important; border-color: var(--kern-border) var(--kern-border) var(--kern-surface) !important; color: var(--kern-primary) !important; } .nav-tabs .nav-link { color: var(--kern-text-muted) !important; }