/* ============================================================================= * dark-modern.css — Dark Mode Redesign (customer portal / legacy UI) * * Hand written polish layer on top of dark-modern.generated.css. * Same design language as the admin dashboard's dark mode * (maindashboad/assets/css/dark-modern.css): black / anthracite / several * shades of dark grey, ChatGPT style — depth is created by layering surfaces, * not by strong contrast. Keep the two files in sync. * * Load order (header.php): * style.css -> page css -> pv-*.css -> dark-modern.generated.css -> this file * * Scope: everything is inside [data-theme-version="dark"], which the Deznav * theme switch (js/custom.js -> setThemeMode) puts on . * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. Tokens * -------------------------------------------------------------------------- */ [data-theme-version="dark"] { /* surfaces: shell -> page -> card -> raised -> hover -> chip */ --pv-d-shell: #0a0a0a; --pv-d-bg: #121212; --pv-d-surface: #1a1a1a; --pv-d-raised: #212121; --pv-d-hover: #272727; --pv-d-chip: #2e2e2e; --pv-d-sunken: #161616; /* borders */ --pv-d-line: #242424; --pv-d-border: #2e2e2e; --pv-d-border-strong: #3a3a3a; /* text */ --pv-d-text: #ececec; --pv-d-text-2: #b4b4b4; --pv-d-text-3: #8f8f8f; --pv-d-text-4: #6e6e6e; /* accent stays the brand blue so status colours keep their meaning */ --pv-d-accent: #4d8dfa; --pv-d-accent-soft: rgba(77, 141, 250, 0.14); /* elevation */ --pv-d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --pv-d-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --pv-d-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6); --pv-d-radius: 12px; --pv-d-radius-sm: 8px; color-scheme: dark; } /* ----------------------------------------------------------------------------- * 2. Shell * -------------------------------------------------------------------------- */ body[data-theme-version="dark"] { background-color: var(--pv-d-bg) !important; color: var(--pv-d-text-2); } [data-theme-version="dark"] .content-body, [data-theme-version="dark"] .container-fluid, [data-theme-version="dark"] .footer { background-color: transparent; } [data-theme-version="dark"] .footer { border-top: 1px solid var(--pv-d-line); color: var(--pv-d-text-3); } [data-theme-version="dark"] ::selection { background: rgba(77, 141, 250, 0.35); color: #fff; } /* scrollbars — thin, neutral, only visible on hover */ [data-theme-version="dark"] * { scrollbar-color: #3a3a3a transparent; } [data-theme-version="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; background-color: transparent; } [data-theme-version="dark"] ::-webkit-scrollbar-track { background: transparent; } [data-theme-version="dark"] ::-webkit-scrollbar-thumb { background-color: #303030; border: 2px solid transparent; background-clip: content-box; border-radius: 8px; } [data-theme-version="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #454545; } [data-theme-version="dark"] ::-webkit-scrollbar-corner { background: transparent; } /* Perfect-scrollbar (used by the sidebar) */ [data-theme-version="dark"] .ps__thumb-y, [data-theme-version="dark"] .ps__thumb-x { background-color: #3a3a3a !important; } /* ----------------------------------------------------------------------------- * 3. Chrome: nav header, sidebar, top bar * * The Deznav shell is driven by --nav-headbg / --sidebar-bg / --headerbg, which * the generated layer already collapses onto the near black shell colour. Here * only the seams and the interactive states are polished. * -------------------------------------------------------------------------- */ [data-theme-version="dark"] .nav-header, [data-theme-version="dark"] .deznav { border-right: 1px solid var(--pv-d-line); } [data-theme-version="dark"] .nav-header { border-right: 0; border-bottom: 1px solid var(--pv-d-line); } [data-theme-version="dark"] .header { border-bottom: 1px solid var(--pv-d-line); box-shadow: none; } [data-theme-version="dark"] .nav-control .hamburger .line { background: var(--pv-d-text-2) !important; } [data-theme-version="dark"] .deznav .metismenu > li > a { color: var(--pv-d-text-2); border-radius: var(--pv-d-radius-sm); } [data-theme-version="dark"] .deznav .metismenu > li > a:hover, [data-theme-version="dark"] .deznav .metismenu > li > a:focus, [data-theme-version="dark"] .deznav .metismenu ul a:hover { background: rgba(255, 255, 255, 0.055) !important; color: var(--pv-d-text) !important; border-radius: var(--pv-d-radius-sm); } [data-theme-version="dark"] .deznav .metismenu > li.mm-active > a, [data-theme-version="dark"] .deznav .metismenu > li.active > a, [data-theme-version="dark"] .deznav .metismenu ul a.mm-active { background: rgba(255, 255, 255, 0.085) !important; color: var(--pv-d-text) !important; border-radius: var(--pv-d-radius-sm); } [data-theme-version="dark"] .deznav .metismenu .nav-label, [data-theme-version="dark"] .deznav .metismenu > li > a > i { color: var(--pv-d-text-3); } [data-theme-version="dark"] .header-right .nav-link, [data-theme-version="dark"] .header .nav-link.bell i, [data-theme-version="dark"] .header-info span, [data-theme-version="dark"] .header-profile > a.nav-link { color: var(--pv-d-text-2); } [data-theme-version="dark"] .header-right .nav-link:hover { color: var(--pv-d-text); } /* ----------------------------------------------------------------------------- * 4. Surfaces: cards, panels, modals * -------------------------------------------------------------------------- */ [data-theme-version="dark"] .card, [data-theme-version="dark"] .modal-content, [data-theme-version="dark"] .accordion-item, [data-theme-version="dark"] .widget-stat { background-color: var(--pv-d-surface) !important; border: 1px solid var(--pv-d-line) !important; border-radius: var(--pv-d-radius) !important; box-shadow: var(--pv-d-shadow-sm) !important; } [data-theme-version="dark"] .card-header, [data-theme-version="dark"] .modal-header { background-color: transparent !important; border-bottom: 1px solid var(--pv-d-line) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .card-footer, [data-theme-version="dark"] .modal-footer { background-color: transparent !important; border-top: 1px solid var(--pv-d-line) !important; } [data-theme-version="dark"] .modal-content { box-shadow: var(--pv-d-shadow-lg) !important; } [data-theme-version="dark"] .modal-body { background-color: var(--pv-d-surface) !important; } [data-theme-version="dark"] .modal-backdrop.show { background-color: #000; opacity: 0.7; } [data-theme-version="dark"] .close, [data-theme-version="dark"] .btn-close, [data-theme-version="dark"] .modal-header .close { color: var(--pv-d-text-2) !important; opacity: 0.7; text-shadow: none; } [data-theme-version="dark"] .close:hover, [data-theme-version="dark"] .btn-close:hover { color: var(--pv-d-text) !important; opacity: 1; } [data-theme-version="dark"] hr, [data-theme-version="dark"] .dropdown-divider { border-color: var(--pv-d-line) !important; opacity: 1; } /* ----------------------------------------------------------------------------- * 5. Typography * -------------------------------------------------------------------------- */ [data-theme-version="dark"] h1, [data-theme-version="dark"] h2, [data-theme-version="dark"] h3, [data-theme-version="dark"] h4, [data-theme-version="dark"] h5, [data-theme-version="dark"] h6, [data-theme-version="dark"] .card-title { color: var(--pv-d-text) !important; letter-spacing: -0.01em; } [data-theme-version="dark"] .text-muted, [data-theme-version="dark"] small.text-muted, [data-theme-version="dark"] .form-text { color: var(--pv-d-text-3) !important; } /* Scoped to the content area: the sidebar and the top bar have their own link colours (section 3) and must not turn accent blue. */ [data-theme-version="dark"] .content-body a:not(.btn):not(.nav-link):not(.page-link):not(.paginate_button):not(.dropdown-item) { color: var(--pv-d-accent); } [data-theme-version="dark"] .content-body a:not(.btn):not(.nav-link):not(.page-link):not(.paginate_button):not(.dropdown-item):hover { color: #7aabff; } /* ----------------------------------------------------------------------------- * 6. Forms * -------------------------------------------------------------------------- */ [data-theme-version="dark"] .form-control, [data-theme-version="dark"] .form-select, [data-theme-version="dark"] select, [data-theme-version="dark"] textarea, [data-theme-version="dark"] input[type="text"], [data-theme-version="dark"] input[type="email"], [data-theme-version="dark"] input[type="password"], [data-theme-version="dark"] input[type="number"], [data-theme-version="dark"] input[type="search"], [data-theme-version="dark"] input[type="tel"], [data-theme-version="dark"] input[type="url"], [data-theme-version="dark"] input[type="date"], [data-theme-version="dark"] input[type="time"], [data-theme-version="dark"] input[type="datetime-local"] { background-color: var(--pv-d-sunken) !important; border: 1px solid var(--pv-d-border) !important; border-radius: var(--pv-d-radius-sm) !important; color: var(--pv-d-text) !important; box-shadow: none !important; transition: border-color 0.15s ease, background-color 0.15s ease; } [data-theme-version="dark"] .form-control:hover, [data-theme-version="dark"] select:hover, [data-theme-version="dark"] textarea:hover { border-color: var(--pv-d-border-strong) !important; } [data-theme-version="dark"] .form-control:focus, [data-theme-version="dark"] select:focus, [data-theme-version="dark"] textarea:focus, [data-theme-version="dark"] input:focus { background-color: #1b1b1b !important; border-color: var(--pv-d-accent) !important; box-shadow: 0 0 0 3px var(--pv-d-accent-soft) !important; outline: none !important; } [data-theme-version="dark"] .form-control::placeholder, [data-theme-version="dark"] input::placeholder, [data-theme-version="dark"] textarea::placeholder { color: var(--pv-d-text-4) !important; opacity: 1; } [data-theme-version="dark"] .form-control:disabled, [data-theme-version="dark"] .form-control[readonly], [data-theme-version="dark"] input:disabled, [data-theme-version="dark"] select:disabled { background-color: #141414 !important; color: var(--pv-d-text-3) !important; border-color: var(--pv-d-line) !important; } [data-theme-version="dark"] label, [data-theme-version="dark"] .form-label, [data-theme-version="dark"] .col-form-label { color: var(--pv-d-text-2); } [data-theme-version="dark"] .input-group-text { background-color: var(--pv-d-raised) !important; border-color: var(--pv-d-border) !important; color: var(--pv-d-text-2) !important; } [data-theme-version="dark"] .custom-control-input:checked ~ .custom-control-label::before, [data-theme-version="dark"] .form-check-input:checked { background-color: var(--pv-d-accent); border-color: var(--pv-d-accent); } [data-theme-version="dark"] input[type="checkbox"], [data-theme-version="dark"] input[type="radio"], [data-theme-version="dark"] input[type="range"] { accent-color: var(--pv-d-accent); } /* bootstrap-select renders its own button + dropdown */ [data-theme-version="dark"] .bootstrap-select .dropdown-toggle, [data-theme-version="dark"] .bootstrap-select > .btn { background-color: var(--pv-d-sunken) !important; border: 1px solid var(--pv-d-border) !important; border-radius: var(--pv-d-radius-sm) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .bootstrap-select .dropdown-menu { background-color: var(--pv-d-raised) !important; border: 1px solid var(--pv-d-border) !important; } /* ----------------------------------------------------------------------------- * 7. Buttons — neutral buttons follow the grey scale, brand buttons stay * -------------------------------------------------------------------------- */ [data-theme-version="dark"] .btn-light, [data-theme-version="dark"] .btn-secondary, [data-theme-version="dark"] .btn-default, [data-theme-version="dark"] .btn-outline-light, [data-theme-version="dark"] .btn-outline-secondary, [data-theme-version="dark"] .btn-outline-dark { background-color: var(--pv-d-raised) !important; border-color: var(--pv-d-border) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .btn-light:hover, [data-theme-version="dark"] .btn-secondary:hover, [data-theme-version="dark"] .btn-default:hover, [data-theme-version="dark"] .btn-outline-light:hover, [data-theme-version="dark"] .btn-outline-secondary:hover, [data-theme-version="dark"] .btn-outline-dark:hover { background-color: var(--pv-d-hover) !important; border-color: var(--pv-d-border-strong) !important; color: #fff !important; } [data-theme-version="dark"] .btn:focus-visible { box-shadow: 0 0 0 3px var(--pv-d-accent-soft) !important; } [data-theme-version="dark"] .btn-link { color: var(--pv-d-accent) !important; } /* ----------------------------------------------------------------------------- * 8. Tables * -------------------------------------------------------------------------- */ [data-theme-version="dark"] table, [data-theme-version="dark"] .table { color: var(--pv-d-text-2) !important; border-color: var(--pv-d-line) !important; } [data-theme-version="dark"] table thead th, [data-theme-version="dark"] .table > thead > tr > th { background-color: var(--pv-d-raised) !important; color: var(--pv-d-text-2) !important; border-bottom: 1px solid var(--pv-d-border) !important; border-top: 0 !important; font-weight: 600; letter-spacing: 0.02em; } [data-theme-version="dark"] table tbody td, [data-theme-version="dark"] .table > tbody > tr > td { border-color: var(--pv-d-line) !important; color: var(--pv-d-text-2) !important; } [data-theme-version="dark"] table tbody tr:hover > td, [data-theme-version="dark"] .table > tbody > tr:hover > td { background-color: rgba(255, 255, 255, 0.04) !important; } [data-theme-version="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.028) !important; } /* DataTables chrome */ [data-theme-version="dark"] .dataTables_wrapper .dataTables_length, [data-theme-version="dark"] .dataTables_wrapper .dataTables_filter, [data-theme-version="dark"] .dataTables_wrapper .dataTables_info, [data-theme-version="dark"] .dataTables_wrapper .dataTables_processing { color: var(--pv-d-text-3) !important; } [data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { background: var(--pv-d-raised) !important; border: 1px solid var(--pv-d-border) !important; border-radius: var(--pv-d-radius-sm) !important; color: var(--pv-d-text-2) !important; } [data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--pv-d-hover) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--pv-d-accent) !important; border-color: var(--pv-d-accent) !important; color: #fff !important; } [data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { background: #151515 !important; color: var(--pv-d-text-4) !important; } /* ----------------------------------------------------------------------------- * 9. Dropdowns, tooltips, popovers, tabs, pagination, badges * -------------------------------------------------------------------------- */ [data-theme-version="dark"] .dropdown-menu { background-color: var(--pv-d-raised) !important; border: 1px solid var(--pv-d-border) !important; border-radius: var(--pv-d-radius-sm) !important; box-shadow: var(--pv-d-shadow) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .dropdown-item { color: var(--pv-d-text-2) !important; } [data-theme-version="dark"] .dropdown-item:hover, [data-theme-version="dark"] .dropdown-item:focus { background-color: var(--pv-d-hover) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .tooltip-inner { background-color: #262626 !important; color: var(--pv-d-text) !important; border-radius: var(--pv-d-radius-sm); box-shadow: var(--pv-d-shadow); } [data-theme-version="dark"] .tooltip .arrow::before, [data-theme-version="dark"] .bs-tooltip-top .arrow::before { border-top-color: #262626 !important; } [data-theme-version="dark"] .popover { background-color: var(--pv-d-raised) !important; border-color: var(--pv-d-border) !important; } [data-theme-version="dark"] .nav-tabs { border-bottom: 1px solid var(--pv-d-line) !important; } [data-theme-version="dark"] .nav-tabs .nav-link { color: var(--pv-d-text-3) !important; border-color: transparent !important; } [data-theme-version="dark"] .nav-tabs .nav-link:hover { color: var(--pv-d-text) !important; background-color: rgba(255, 255, 255, 0.04) !important; } [data-theme-version="dark"] .nav-tabs .nav-link.active { background-color: var(--pv-d-surface) !important; color: var(--pv-d-text) !important; border-color: var(--pv-d-line) var(--pv-d-line) var(--pv-d-surface) !important; } [data-theme-version="dark"] .page-link { background-color: var(--pv-d-raised) !important; border-color: var(--pv-d-border) !important; color: var(--pv-d-text-2) !important; } [data-theme-version="dark"] .page-link:hover { background-color: var(--pv-d-hover) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .page-item.active .page-link { background-color: var(--pv-d-accent) !important; border-color: var(--pv-d-accent) !important; color: #fff !important; } [data-theme-version="dark"] .page-item.disabled .page-link { background-color: #151515 !important; color: var(--pv-d-text-4) !important; } [data-theme-version="dark"] .list-group-item { background-color: var(--pv-d-surface) !important; border-color: var(--pv-d-line) !important; color: var(--pv-d-text-2) !important; } /* Neutral badges only — the coloured status badges (.light.badge-success etc.) already have translucent dark variants in style.css and keep their meaning. */ [data-theme-version="dark"] .badge-light, [data-theme-version="dark"] .light.badge-dark { background-color: var(--pv-d-chip) !important; color: var(--pv-d-text-2) !important; } /* ----------------------------------------------------------------------------- * 10. Third party widgets * -------------------------------------------------------------------------- */ /* SweetAlert2 (also used by pv-popup.js) */ [data-theme-version="dark"] .swal2-popup, body[data-theme-version="dark"] .swal2-popup { background: var(--pv-d-surface) !important; border: 1px solid var(--pv-d-line) !important; border-radius: var(--pv-d-radius) !important; box-shadow: var(--pv-d-shadow-lg) !important; color: var(--pv-d-text) !important; } body[data-theme-version="dark"] .swal2-title, body[data-theme-version="dark"] .swal2-html-container { color: var(--pv-d-text) !important; } body[data-theme-version="dark"] .swal2-input, body[data-theme-version="dark"] .swal2-textarea, body[data-theme-version="dark"] .swal2-select { background: var(--pv-d-sunken) !important; border: 1px solid var(--pv-d-border) !important; color: var(--pv-d-text) !important; box-shadow: none !important; } /* daterangepicker */ body[data-theme-version="dark"] .daterangepicker { background-color: var(--pv-d-raised) !important; border: 1px solid var(--pv-d-border) !important; border-radius: var(--pv-d-radius-sm) !important; box-shadow: var(--pv-d-shadow) !important; color: var(--pv-d-text) !important; } body[data-theme-version="dark"] .daterangepicker::before, body[data-theme-version="dark"] .daterangepicker::after { border-bottom-color: var(--pv-d-border) !important; } body[data-theme-version="dark"] .daterangepicker td.available:hover, body[data-theme-version="dark"] .daterangepicker th.available:hover { background-color: var(--pv-d-hover) !important; color: var(--pv-d-text) !important; } body[data-theme-version="dark"] .daterangepicker td.off, body[data-theme-version="dark"] .daterangepicker td.off.in-range { background-color: transparent !important; color: var(--pv-d-text-4) !important; } body[data-theme-version="dark"] .daterangepicker td.in-range { background-color: rgba(77, 141, 250, 0.16) !important; color: var(--pv-d-text) !important; } body[data-theme-version="dark"] .daterangepicker td.active, body[data-theme-version="dark"] .daterangepicker td.active:hover { background-color: var(--pv-d-accent) !important; color: #fff !important; } body[data-theme-version="dark"] .daterangepicker .calendar-table { background-color: transparent !important; border: 0 !important; } body[data-theme-version="dark"] .daterangepicker .drp-buttons { border-top-color: var(--pv-d-line) !important; } /* pickadate / clockpicker (Formular-Seiten) */ body[data-theme-version="dark"] .picker__frame, body[data-theme-version="dark"] .picker__box, body[data-theme-version="dark"] .clockpicker-popover .popover-content { background: var(--pv-d-raised) !important; color: var(--pv-d-text) !important; border-color: var(--pv-d-border) !important; } /* ApexCharts */ [data-theme-version="dark"] .apexcharts-tooltip { background: var(--pv-d-raised) !important; border: 1px solid var(--pv-d-border) !important; box-shadow: var(--pv-d-shadow) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .apexcharts-tooltip-title { background: var(--pv-d-hover) !important; border-bottom: 1px solid var(--pv-d-border) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .apexcharts-gridline, [data-theme-version="dark"] .apexcharts-grid line { stroke: rgba(255, 255, 255, 0.06) !important; } [data-theme-version="dark"] .apexcharts-xaxis line, [data-theme-version="dark"] .apexcharts-yaxis line { stroke: rgba(255, 255, 255, 0.1) !important; } [data-theme-version="dark"] .apexcharts-menu { background: var(--pv-d-raised) !important; border-color: var(--pv-d-border) !important; } [data-theme-version="dark"] .apexcharts-menu-item:hover { background: var(--pv-d-hover) !important; } /* toastr */ [data-theme-version="dark"] #toast-container > div { box-shadow: var(--pv-d-shadow) !important; } /* ----------------------------------------------------------------------------- * 11. Portal specific components (pv-features.css / pv-popup.css) * -------------------------------------------------------------------------- */ /* "Willkommen " bubble — a white pill in light mode */ [data-theme-version="dark"] .pv-welcome-bubble { background: linear-gradient(135deg, #262626 0%, #1c1c1c 100%); color: var(--pv-d-text); box-shadow: var(--pv-d-shadow-lg), 0 0 0 1px var(--pv-d-border); } [data-theme-version="dark"] .pv-welcome-bubble strong { color: var(--pv-d-accent); } [data-theme-version="dark"] .pv-welcome-bubble.pv-welcome-below:after { border-bottom-color: #262626; } /* ----------------------------------------------------------------------------- * 12. Safety net — light utility surfaces that leak into dark mode * -------------------------------------------------------------------------- */ [data-theme-version="dark"] .bg-white, [data-theme-version="dark"] .bg-light { background-color: var(--pv-d-surface) !important; color: var(--pv-d-text) !important; } [data-theme-version="dark"] .border, [data-theme-version="dark"] .border-top, [data-theme-version="dark"] .border-bottom, [data-theme-version="dark"] .border-left, [data-theme-version="dark"] .border-right, [data-theme-version="dark"] .border-light { border-color: var(--pv-d-line) !important; } [data-theme-version="dark"] .text-dark, [data-theme-version="dark"] .text-black { color: var(--pv-d-text) !important; } [data-theme-version="dark"] .shadow, [data-theme-version="dark"] .shadow-sm, [data-theme-version="dark"] .shadow-lg { box-shadow: var(--pv-d-shadow) !important; }