/* ========================================================================== Classic Theme — inspired by ctr4ever.joora.fr Activated by adding `theme-classic` to and/or . ========================================================================== */ html.theme-classic, body.theme-classic { background: #000 !important; color: #fff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: bold !important; } body.theme-classic * { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; } body.theme-classic h1 { font-size: 14px !important; color: #ffcc00 !important; font-family: Arial, Helvetica, sans-serif !important; } body.theme-classic h2 { font-size: 12px !important; color: #ffcc00 !important; font-family: Arial, Helvetica, sans-serif !important; } body.theme-classic h3, body.theme-classic h4, body.theme-classic h5, body.theme-classic h6 { font-size: 10px !important; color: #ffcc00 !important; font-family: Arial, Helvetica, sans-serif !important; } body.theme-classic a { color: #ffcc00 !important; text-decoration: none !important; } body.theme-classic a:hover, body.theme-classic a:focus { color: #fff !important; text-decoration: underline !important; } /* ---- Layout shell ---- */ body.theme-classic .content-wrapper, body.theme-classic main, body.theme-classic .container, body.theme-classic .container-fluid { background: #000 !important; color: #fff !important; } body.theme-classic .mobile-header { background: #000 !important; border-bottom: 1px solid #ffcc00 !important; } /* ---- Sidebar / navigation ---- */ body.theme-classic .sidebar, body.theme-classic .sidebar-footer, body.theme-classic .sidebar-header, body.theme-classic .sidebar-section, body.theme-classic nav { background: #000 !important; color: #fff !important; border-color: #ffcc00 !important; } body.theme-classic .sidebar a, body.theme-classic .nav-link, body.theme-classic .sidebar .nav-item { color: #fff !important; background: transparent !important; } body.theme-classic .sidebar a:hover, body.theme-classic .nav-link:hover, body.theme-classic .nav-link.active, body.theme-classic .sidebar a.active { color: #fff !important; background: #333 !important; } /* ---- Tables ---- */ body.theme-classic table, body.theme-classic .table { background: #9999cc !important; color: #fff !important; border-collapse: collapse !important; width: 100%; --bs-table-bg: #9999cc !important; --bs-table-color: #fff !important; --bs-table-striped-bg: #9999cc !important; --bs-table-striped-color: #fff !important; --bs-table-hover-bg: #6666cc !important; --bs-table-hover-color: #fff !important; --bs-table-border-color: #6666cc !important; } body.theme-classic thead, body.theme-classic thead th, body.theme-classic .table thead th, body.theme-classic .table > thead { background: #6666cc !important; color: #fff !important; border: 1px solid #6666cc !important; font-weight: bold !important; } body.theme-classic tbody tr, body.theme-classic .table tbody tr { background: #9999cc !important; color: #fff !important; } body.theme-classic tbody tr:nth-child(even), body.theme-classic .table-striped tbody tr:nth-child(odd), body.theme-classic .table-striped tbody tr:nth-child(even) { background: #9999cc !important; color: #fff !important; } body.theme-classic tbody tr:hover, body.theme-classic .table-hover tbody tr:hover { background: #6666cc !important; color: #fff !important; } body.theme-classic td, body.theme-classic .table td { border: 1px solid #6666cc !important; padding: 3px 6px !important; color: #fff !important; } body.theme-classic th, body.theme-classic .table th { border: 1px solid #6666cc !important; padding: 3px 6px !important; color: #fff !important; } /* ---- Cards / panels ---- */ body.theme-classic .card, body.theme-classic .card-body, body.theme-classic .card-header, body.theme-classic .card-footer, body.theme-classic .alert, body.theme-classic .modal-content, body.theme-classic .dropdown-menu, body.theme-classic .list-group-item { background: #000 !important; color: #fff !important; border: 1px solid #ffcc00 !important; } body.theme-classic .card-header, body.theme-classic .modal-header { background: #6666cc !important; color: #fff !important; border-bottom: 1px solid #ffcc00 !important; } /* ---- Forms / buttons ---- */ body.theme-classic .form-control, body.theme-classic .form-select, body.theme-classic input[type="text"], body.theme-classic input[type="number"], body.theme-classic input[type="password"], body.theme-classic input[type="email"], body.theme-classic select, body.theme-classic textarea { background: #fff !important; color: #000 !important; border: 1px solid #6666cc !important; } body.theme-classic .form-control:hover, body.theme-classic .form-control:focus, body.theme-classic .form-select:hover, body.theme-classic .form-select:focus, body.theme-classic input:hover, body.theme-classic input:focus, body.theme-classic select:hover, body.theme-classic select:focus, body.theme-classic textarea:hover, body.theme-classic textarea:focus { border-color: #ffcc00 !important; outline: none !important; } body.theme-classic .btn, body.theme-classic button { background: #ccc !important; color: #000 !important; border: 1px solid #6666cc !important; font-weight: bold !important; font-family: Arial, Helvetica, sans-serif !important; } body.theme-classic .btn:hover, body.theme-classic button:hover { background: #6666cc !important; color: #fff !important; border-color: #ffcc00 !important; } body.theme-classic .btn-primary, body.theme-classic .btn-success, body.theme-classic .btn-danger, body.theme-classic .btn-warning, body.theme-classic .btn-info, body.theme-classic .btn-secondary { background: #6666cc !important; color: #fff !important; border-color: #ffcc00 !important; } /* ---- Badges / pills ---- */ body.theme-classic .badge { background: #6666cc !important; color: #fff !important; border: 1px solid #ffcc00 !important; } /* ---- Pagination ---- */ body.theme-classic .page-link { background: #000 !important; color: #ffcc00 !important; border: 1px solid #ffcc00 !important; } body.theme-classic .page-item.active .page-link { background: #6666cc !important; color: #fff !important; } /* ---- Footer ---- */ body.theme-classic footer { background: #000 !important; color: #fff !important; border-top: 1px solid #ffcc00 !important; } body.theme-classic footer h6 { color: #ffcc00 !important; } body.theme-classic footer .text-muted, body.theme-classic footer .text-secondary, body.theme-classic .text-muted, body.theme-classic .text-secondary { color: #fff !important; } /* ---- Feature icons (home cards) ---- */ body.theme-classic .feature-icon { background: #ffcc00 !important; color: #000 !important; border: 1px solid #ffcc00 !important; } /* ---- Theme switch always readable ---- */ body.theme-classic .form-switch .form-check-input { background-color: #fff !important; border-color: #6666cc !important; } body.theme-classic .form-switch .form-check-input:checked { background-color: #6666cc !important; border-color: #ffcc00 !important; }