/*! * GeoxHoster — Dark/Cyan Theme für CtrlPanel.gg * Basis: AdminLTE 3 (dark-mode) + Bootstrap 4 * * Reine Override-Schicht: wird als letztes Stylesheet im geladen und * fasst den CtrlPanel-Core nicht an. Zum Anpassen reichen in der Regel die * Variablen im :root-Block weiter unten. */ :root { /* Flächen — von tief nach hoch */ --gx-bg-sidebar: #1a1d24; --gx-bg-body: #22262f; --gx-bg-surface: #2a2f3a; --gx-bg-raised: #313745; --gx-bg-hover: rgba(34, 211, 238, 0.08); /* Linien */ --gx-border: #363c49; --gx-border-soft: #2e3440; /* Text */ --gx-text: #e6e8eb; --gx-text-muted: #9aa3b2; --gx-text-dim: #6b7484; /* Akzent */ --gx-accent: #22d3ee; --gx-accent-hover: #06b6d4; --gx-accent-deep: #0e7490; --gx-accent-glow: rgba(34, 211, 238, 0.25); /* Status */ --gx-success: #22c55e; --gx-warning: #f59e0b; --gx-danger: #ef4444; --gx-info: #38bdf8; --gx-radius: 8px; --gx-radius-sm: 6px; --gx-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } /* ---------------------------------------------------------------- Grundlage */ body.dark-mode, body.dark-mode .wrapper, .dark-mode .content-wrapper { background-color: var(--gx-bg-body); color: var(--gx-text); } .dark-mode a { color: var(--gx-accent); } .dark-mode a:hover, .dark-mode a:focus { color: var(--gx-accent-hover); text-decoration: none; } .dark-mode .text-muted { color: var(--gx-text-muted) !important; } /* Auswahl-Markierung */ ::selection { background: var(--gx-accent-glow); color: #fff; } /* ------------------------------------------------------------------ Sidebar */ .dark-mode .main-sidebar, .dark-mode .sidebar-dark-primary { background-color: var(--gx-bg-sidebar); border-right: 1px solid var(--gx-border-soft); } .dark-mode .brand-link { background-color: var(--gx-bg-sidebar); border-bottom: 1px solid var(--gx-border-soft); color: var(--gx-text); font-weight: 600; letter-spacing: 0.3px; } .dark-mode .brand-link:hover { color: var(--gx-accent); } .dark-mode .nav-sidebar .nav-link { color: var(--gx-text-muted); border-radius: var(--gx-radius-sm); margin: 2px 8px; transition: background-color 0.15s ease, color 0.15s ease; } .dark-mode .nav-sidebar .nav-link:hover { background-color: var(--gx-bg-hover); color: var(--gx-text); } .dark-mode .nav-sidebar .nav-link .nav-icon { color: var(--gx-text-dim); transition: color 0.15s ease; } .dark-mode .nav-sidebar .nav-link:hover .nav-icon { color: var(--gx-accent); } /* Aktiver Menüpunkt — Akzentfläche statt AdminLTE-Blau */ .dark-mode .nav-sidebar .nav-link.active, .dark-mode .nav-sidebar > .nav-item > .nav-link.active, .dark-mode .nav-pills .nav-link.active { background: linear-gradient(90deg, var(--gx-accent-deep) 0%, rgba(14, 116, 144, 0.55) 100%); color: #fff; box-shadow: inset 3px 0 0 var(--gx-accent); } .dark-mode .nav-sidebar .nav-link.active .nav-icon { color: var(--gx-accent); } /* Aufgeklappte Untermenüs */ .dark-mode .nav-treeview > .nav-item > .nav-link { color: var(--gx-text-dim); padding-left: 1.75rem; } .dark-mode .nav-treeview > .nav-item > .nav-link:hover { background-color: var(--gx-bg-hover); color: var(--gx-text); } .dark-mode .nav-sidebar .menu-open > .nav-link { background-color: rgba(255, 255, 255, 0.03); } .dark-mode .sidebar .user-panel { border-bottom: 1px solid var(--gx-border-soft); } /* -------------------------------------------------------------------- Navbar */ .dark-mode .main-header.navbar { background-color: var(--gx-bg-sidebar); border-bottom: 1px solid var(--gx-border-soft); } .dark-mode .navbar-dark .nav-link, .dark-mode .navbar-light .nav-link { color: var(--gx-text-muted); } .dark-mode .navbar-dark .nav-link:hover, .dark-mode .navbar-light .nav-link:hover { color: var(--gx-accent); } .dark-mode .navbar-badge { background-color: var(--gx-accent); color: #0b1015; font-weight: 700; } /* --------------------------------------------------------------------- Karten */ .dark-mode .card { background-color: var(--gx-bg-surface); border: 1px solid var(--gx-border); border-radius: var(--gx-radius); box-shadow: var(--gx-shadow); } .dark-mode .card-header { background-color: transparent; border-bottom: 1px solid var(--gx-border); color: var(--gx-text); font-weight: 600; } .dark-mode .card-footer { background-color: rgba(0, 0, 0, 0.15); border-top: 1px solid var(--gx-border); } .dark-mode .card-title { font-weight: 600; } /* Farbige Card-Varianten auf Akzent umbiegen */ .dark-mode .card-primary:not(.card-outline) > .card-header, .dark-mode .card-primary.card-outline { background-color: var(--gx-accent-deep); border-color: var(--gx-accent-deep); } .dark-mode .card-primary.card-outline { background-color: var(--gx-bg-surface); border-top: 3px solid var(--gx-accent); } /* ------------------------------------------------------------------- Buttons */ .dark-mode .btn-primary { background-color: var(--gx-accent); border-color: var(--gx-accent); color: #0b1015; font-weight: 600; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .dark-mode .btn-primary:hover, .dark-mode .btn-primary:focus { background-color: var(--gx-accent-hover); border-color: var(--gx-accent-hover); color: #0b1015; box-shadow: 0 0 0 3px var(--gx-accent-glow); } .dark-mode .btn-primary:disabled, .dark-mode .btn-primary.disabled { background-color: var(--gx-accent-deep); border-color: var(--gx-accent-deep); color: rgba(255, 255, 255, 0.6); } .dark-mode .btn-outline-primary { color: var(--gx-accent); border-color: var(--gx-accent); } .dark-mode .btn-outline-primary:hover { background-color: var(--gx-accent); border-color: var(--gx-accent); color: #0b1015; } .dark-mode .btn-secondary, .dark-mode .btn-default { background-color: var(--gx-bg-raised); border-color: var(--gx-border); color: var(--gx-text); } .dark-mode .btn-secondary:hover, .dark-mode .btn-default:hover { background-color: #3a4152; border-color: var(--gx-text-dim); color: var(--gx-text); } .dark-mode .btn-success { background-color: var(--gx-success); border-color: var(--gx-success); color: #06210f; } .dark-mode .btn-warning { background-color: var(--gx-warning); border-color: var(--gx-warning); color: #2b1a00; } .dark-mode .btn-danger { background-color: var(--gx-danger); border-color: var(--gx-danger); color: #fff; } .dark-mode .btn-info { background-color: var(--gx-info); border-color: var(--gx-info); color: #05202e; } .dark-mode .btn:focus { box-shadow: 0 0 0 3px var(--gx-accent-glow); } /* ------------------------------------------------------------------ Formulare */ .dark-mode .form-control, .dark-mode .custom-select, .dark-mode textarea.form-control, .dark-mode .input-group-text { background-color: var(--gx-bg-body); border-color: var(--gx-border); color: var(--gx-text); border-radius: var(--gx-radius-sm); } .dark-mode .form-control:focus, .dark-mode .custom-select:focus { background-color: var(--gx-bg-body); border-color: var(--gx-accent); color: var(--gx-text); box-shadow: 0 0 0 3px var(--gx-accent-glow); } .dark-mode .form-control::placeholder { color: var(--gx-text-dim); } .dark-mode .input-group-text { background-color: var(--gx-bg-raised); color: var(--gx-text-muted); } .dark-mode label { color: var(--gx-text); font-weight: 500; } .dark-mode .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--gx-accent); border-color: var(--gx-accent); } /* --------------------------------------------------------------- Tabellen */ .dark-mode .table { color: var(--gx-text); } .dark-mode .table thead th { background-color: rgba(0, 0, 0, 0.2); border-bottom: 2px solid var(--gx-border); color: var(--gx-text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; } .dark-mode .table td, .dark-mode .table th { border-top: 1px solid var(--gx-border-soft); vertical-align: middle; } .dark-mode .table-hover tbody tr:hover { background-color: var(--gx-bg-hover); color: var(--gx-text); } .dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } /* --------------------------------------------------------------- Badges */ .dark-mode .badge-primary { background-color: var(--gx-accent); color: #0b1015; } .dark-mode .badge-success { background-color: var(--gx-success); color: #06210f; } .dark-mode .badge-warning { background-color: var(--gx-warning); color: #2b1a00; } .dark-mode .badge-danger { background-color: var(--gx-danger); color: #fff; } .dark-mode .badge-info { background-color: var(--gx-info); color: #05202e; } .dark-mode .badge { font-weight: 600; padding: 0.35em 0.6em; border-radius: 4px; } /* ------------------------------------------------- Info-/Small-Boxen (Dashboard) */ .dark-mode .small-box { background-color: var(--gx-bg-surface) !important; border: 1px solid var(--gx-border); border-radius: var(--gx-radius); color: var(--gx-text) !important; box-shadow: var(--gx-shadow); overflow: hidden; } .dark-mode .small-box > .inner h3 { color: var(--gx-accent); font-weight: 700; } .dark-mode .small-box .icon > i { color: rgba(34, 211, 238, 0.18); } .dark-mode .small-box-footer { background-color: rgba(0, 0, 0, 0.2); color: var(--gx-text-muted); } .dark-mode .small-box-footer:hover { background-color: var(--gx-accent-deep); color: #fff; } .dark-mode .info-box { background-color: var(--gx-bg-surface); border: 1px solid var(--gx-border); border-radius: var(--gx-radius); box-shadow: var(--gx-shadow); } .dark-mode .info-box .info-box-icon { background-color: var(--gx-accent-deep); color: #fff; border-radius: var(--gx-radius) 0 0 var(--gx-radius); } /* --------------------------------------------------------------- Alerts */ .dark-mode .alert { border: 1px solid var(--gx-border); border-radius: var(--gx-radius-sm); border-left-width: 4px; } .dark-mode .alert-success { background-color: rgba(34, 197, 94, 0.12); border-left-color: var(--gx-success); color: #86efac; } .dark-mode .alert-warning { background-color: rgba(245, 158, 11, 0.12); border-left-color: var(--gx-warning); color: #fcd34d; } .dark-mode .alert-danger { background-color: rgba(239, 68, 68, 0.12); border-left-color: var(--gx-danger); color: #fca5a5; } .dark-mode .alert-info { background-color: rgba(34, 211, 238, 0.12); border-left-color: var(--gx-accent); color: #a5f3fc; } /* --------------------------------------------------- Dropdowns & Modals */ .dark-mode .dropdown-menu { background-color: var(--gx-bg-raised); border: 1px solid var(--gx-border); border-radius: var(--gx-radius-sm); box-shadow: var(--gx-shadow); } .dark-mode .dropdown-item { color: var(--gx-text); } .dark-mode .dropdown-item:hover, .dark-mode .dropdown-item:focus { background-color: var(--gx-bg-hover); color: var(--gx-accent); } .dark-mode .dropdown-divider { border-color: var(--gx-border); } .dark-mode .modal-content { background-color: var(--gx-bg-surface); border: 1px solid var(--gx-border); border-radius: var(--gx-radius); } .dark-mode .modal-header, .dark-mode .modal-footer { border-color: var(--gx-border); } /* ---------------------------------------------------------- Pagination */ .dark-mode .page-link { background-color: var(--gx-bg-surface); border-color: var(--gx-border); color: var(--gx-text-muted); } .dark-mode .page-link:hover { background-color: var(--gx-bg-hover); border-color: var(--gx-accent); color: var(--gx-accent); } .dark-mode .page-item.active .page-link { background-color: var(--gx-accent); border-color: var(--gx-accent); color: #0b1015; font-weight: 600; } /* --------------------------------------------- Plugins: DataTables, Select2 */ .dark-mode .dataTables_wrapper .dataTables_length select, .dark-mode .dataTables_wrapper .dataTables_filter input { background-color: var(--gx-bg-body); border: 1px solid var(--gx-border); color: var(--gx-text); border-radius: var(--gx-radius-sm); } .dark-mode .dataTables_wrapper .dataTables_info, .dark-mode .dataTables_wrapper .dataTables_length, .dark-mode .dataTables_wrapper .dataTables_filter { color: var(--gx-text-muted); } .dark-mode .select2-container--default .select2-selection--single, .dark-mode .select2-container--default .select2-selection--multiple { background-color: var(--gx-bg-body); border-color: var(--gx-border); color: var(--gx-text); } .dark-mode .select2-dropdown { background-color: var(--gx-bg-raised); border-color: var(--gx-border); } .dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--gx-accent-deep); color: #fff; } /* SweetAlert2 */ .dark-mode .swal2-popup { background-color: var(--gx-bg-surface); color: var(--gx-text); border: 1px solid var(--gx-border); border-radius: var(--gx-radius); } .dark-mode .swal2-title, .dark-mode .swal2-html-container { color: var(--gx-text); } /* ----------------------------------------------------------- Fortschritt */ .dark-mode .progress { background-color: var(--gx-bg-body); border-radius: 999px; } .dark-mode .progress-bar { background-color: var(--gx-accent); } /* --------------------------------------------------------------- Footer */ .dark-mode .main-footer { background-color: var(--gx-bg-sidebar); border-top: 1px solid var(--gx-border-soft); color: var(--gx-text-muted); } /* ------------------------------------------------------------ Scrollbar */ .dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } .dark-mode ::-webkit-scrollbar-track { background: var(--gx-bg-body); } .dark-mode ::-webkit-scrollbar-thumb { background: var(--gx-border); border-radius: 999px; border: 2px solid var(--gx-bg-body); } .dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--gx-accent-deep); } .dark-mode * { scrollbar-color: var(--gx-border) var(--gx-bg-body); } /* ------------------------------------------- Login / Register (app.blade) */ .dark-mode .login-page, .dark-mode .register-page { background-color: var(--gx-bg-body); } .dark-mode .login-box .card, .dark-mode .register-box .card { border-top: 3px solid var(--gx-accent); } .dark-mode .login-logo a, .dark-mode .register-logo a { color: var(--gx-text); font-weight: 600; } /* ------------------------------------------------------------ Feinschliff */ .dark-mode .content-header h1 { font-weight: 600; letter-spacing: -0.3px; } .dark-mode .breadcrumb-item.active { color: var(--gx-text-muted); } .dark-mode hr { border-color: var(--gx-border); } .dark-mode .close { color: var(--gx-text-muted); text-shadow: none; } .dark-mode .close:hover { color: var(--gx-text); } /* Fokus-Sichtbarkeit für Tastaturnavigation nicht verschlucken */ .dark-mode :focus-visible { outline: 2px solid var(--gx-accent); outline-offset: 2px; }