/* * NXCom-Meet specific Velzon corrections. Load AFTER assets/css/app.min.css. * * Velzon ships its dark palette through the `--vz-*` custom properties that are * scoped to html[data-bs-theme="dark"]. A handful of components (and any plain * HTML we author ourselves) fall back to a light foreground, which is invisible * on the dark surfaces. The rules below re-point those to the palette instead of * hard-coding a colour, so the light/dark switch keeps working. */ html[data-bs-theme="dark"] { color-scheme: dark; } html[data-bs-theme="dark"] body, html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .card-body, html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .card-footer, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .list-group-item { color: var(--vz-body-color); } html[data-bs-theme="dark"] .card-title, html[data-bs-theme="dark"] .modal-title, html[data-bs-theme="dark"] .form-label, html[data-bs-theme="dark"] .form-check-label, html[data-bs-theme="dark"] .dropdown-item, html[data-bs-theme="dark"] .dropdown-header, html[data-bs-theme="dark"] .accordion-button, html[data-bs-theme="dark"] .page-title-box h4, html[data-bs-theme="dark"] .breadcrumb-item, html[data-bs-theme="dark"] .breadcrumb-item a, html[data-bs-theme="dark"] .footer, html[data-bs-theme="dark"] .navbar-header h5 { color: var(--vz-body-color) !important; } html[data-bs-theme="dark"] .text-body, html[data-bs-theme="dark"] .text-dark, html[data-bs-theme="dark"] .text-black { color: var(--vz-body-color) !important; } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus, html[data-bs-theme="dark"] textarea { background-color: var(--vz-secondary-bg); border-color: var(--vz-border-color); color: var(--vz-body-color); } html[data-bs-theme="dark"] .form-control::placeholder { color: var(--vz-secondary-color); opacity: 1; } html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-footer, html[data-bs-theme="dark"] .offcanvas-header, html[data-bs-theme="dark"] .offcanvas-footer, html[data-bs-theme="dark"] .dropdown-divider, html[data-bs-theme="dark"] hr { border-color: var(--vz-border-color) !important; } /* --- Horizontal layout on laptop-sized windows ------------------------------- Velzon's own stylesheet hides the horizontal menu below 1025px: @media (max-width: 1024px) { [data-layout=horizontal] .navbar-menu { display: none } } and only reveals it when the topbar hamburger adds .menu to . On a window narrower than that, picking "Horizontal" in the customizer looks like nothing happened: the sidebar simply disappears. Our menu is short, so keep the real horizontal bar down to the tablet breakpoint. Phone widths keep Velzon's hamburger behaviour untouched. */ @media (min-width: 768px) and (max-width: 1024px) { html[data-layout="horizontal"] .navbar-menu, html[data-layout="horizontal"] body.menu .navbar-menu { display: block !important; max-height: none !important; overflow-y: visible !important; padding-left: calc(var(--vz-grid-gutter-width) * .5) !important; } html[data-layout="horizontal"] .navbar-menu .navbar-nav, html[data-layout="horizontal"] body.menu .navbar-menu .navbar-nav { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; } /* The bar is on screen, so the hamburger would only hide it again. */ html[data-layout="horizontal"] .topnav-hamburger { visibility: hidden; } }