/* ================================================================== Nexum — Client Area Theme All values come from CSS variables injected by ClientAreaHeadOutput. Nothing here is hardcoded: change it from the admin panel. Targets the WHMCS "twenty-one" template structure. ================================================================== */ /* ---------- Base ---------- */ body.nx-theme { font-family: var(--nx-font-family); font-size: var(--nx-font-size); font-weight: var(--nx-weight-body); line-height: var(--nx-line-height); letter-spacing: var(--nx-letter-spacing); background-color: var(--nx-bg); color: var(--nx-text); transition: background-color .25s ease, color .25s ease; } body.nx-theme h1, body.nx-theme .h1 { font-size: var(--nx-font-size-h1); } body.nx-theme h2, body.nx-theme .h2 { font-size: var(--nx-font-size-h2); } body.nx-theme h3, body.nx-theme .h3 { font-size: var(--nx-font-size-h3); } body.nx-theme h1, body.nx-theme h2, body.nx-theme h3, body.nx-theme h4, body.nx-theme h5, body.nx-theme h6, body.nx-theme .card-title, body.nx-theme .panel-title { font-weight: var(--nx-weight-heading); text-transform: var(--nx-heading-transform); color: var(--nx-text); font-family: var(--nx-font-family); } body.nx-theme small, body.nx-theme .small { font-size: var(--nx-font-size-sm); } /* Links. These were commented out, which left every unstyled anchor on Bootstrap's own #007bff / #204060 hover — the blue that showed up on the knowledgebase list and the "Powered by" credit. --nx-link comes from the admin's Link Colour setting and falls back to the brand colour. Anchors that are really buttons or nav items set their own colour further down, so this only catches body copy links. */ body.nx-theme a { color: var(--nx-link, var(--nx-primary)); text-decoration: var(--nx-link-decoration, none); } body.nx-theme a:hover, body.nx-theme a:focus { color: var(--nx-primary-hover); } /* Content links that carry their own resting colour (list rows, ticket subjects, domain names). Most had no hover state at all, so they fell through to the browser default blue with an underline. They lift to the brand colour instead and never underline. */ body.nx-theme .nx-hp-child-link:hover, body.nx-theme .nx-hp-panel-link:hover, body.nx-theme .nx-inv-link:hover, body.nx-theme .nx-tl-subj-link:hover, body.nx-theme .nx-tl-filter-link:hover, body.nx-theme .nx-tsc-ticket-link:hover, body.nx-theme .nx-prods-domain-link:hover, body.nx-theme .nx-dd-link:hover, body.nx-theme .nx-epp-mail-link:hover, body.nx-theme .nx-pd-backlink:hover, body.nx-theme .nx-vt-attach-link:hover, body.nx-theme .nx-vi-cart-link:hover { color: var(--nx-primary); text-decoration: none; } body.nx-theme .text-muted, body.nx-theme .small.text-muted { color: var(--nx-muted); } body.nx-theme .main-content, body.nx-theme #main-body { max-width: var(--nx-container-width); margin-left: auto; margin-right: auto; padding: var(--nx-content-padding); } /* ---------- Header ---------- */ body.nx-theme #header, body.nx-theme .navbar-main, body.nx-theme nav.navbar { background: var(--nx-header-bg); border-bottom: var(--nx-border-width) solid var(--nx-border); box-shadow: var(--nx-shadow); min-height: var(--nx-header-height); } /* #header and nav.navbar-main are stock WHMCS markup that this theme does not render, so the setting reached nothing. header.nx-topbar is the real element. */ body.nx-theme.nx-header-sticky header.nx-topbar, body.nx-theme.nx-header-sticky #header, body.nx-theme.nx-header-sticky nav.navbar-main { position: sticky; top: 0; z-index: 1030; } /* --nx-header-offset seed. nexum.js measures the header and republishes this on , but that only happens after DOM-ready — anything sticky below the header (the cart's order summary) would otherwise sit at the wrong top for the first frame and visibly jump. These seeds derive the same value from the admin height settings, so the pre-JS position is already correct and the measured value merely refines it. */ body.nx-theme { --nx-header-offset: 0px; } body.nx-theme.nx-header-sticky { --nx-header-offset: var(--nx-header-height, 64px); } body.nx-theme.nx-header-sticky:has(.nx-topbar-expanded) { --nx-header-offset: calc(var(--nx-header-height, 64px) + var(--nx-topbar-utility-height, 48px)); } body.nx-theme #logo img, body.nx-theme .navbar-brand img { height: var(--nx-logo-height); width: auto; } body.nx-theme #main-menu .navbar-nav > li > a, body.nx-theme nav .navbar-nav .nav-link { color: var(--nx-text); font-weight: var(--nx-weight-button); border-radius: var(--nx-radius-button); transition: background .15s ease, color .15s ease; } body.nx-theme #main-menu .navbar-nav > li > a:hover, body.nx-theme nav .navbar-nav .nav-link:hover { color: var(--nx-primary); background: rgba(var(--nx-primary-rgb), 0.08); } body.nx-theme #main-menu .navbar-nav > li.active > a, body.nx-theme nav .navbar-nav .nav-link.active { color: var(--nx-primary); background: rgba(var(--nx-primary-rgb), 0.10); } body.nx-theme .dropdown-menu { background: var(--nx-card-bg); border: var(--nx-border-width) solid var(--nx-border); border-radius: calc(var(--nx-radius-card) * 0.75); box-shadow: var(--nx-shadow); overflow: hidden; } body.nx-theme .dropdown-menu .dropdown-item, body.nx-theme .dropdown-menu > li > a { color: var(--nx-text); font-size: var(--nx-font-size); } body.nx-theme .dropdown-menu .dropdown-item:hover, body.nx-theme .dropdown-menu > li > a:hover { background: rgba(var(--nx-primary-rgb), 0.08); color: var(--nx-primary); } /* ---------- Cards / Panels ---------- */ body.nx-theme .card, body.nx-theme .panel, body.nx-theme .tile, body.nx-theme .list-group { background: var(--nx-card-bg); border: var(--nx-border-width) solid var(--nx-border); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow); margin-bottom: var(--nx-card-gap); overflow: hidden; } body.nx-theme .card-body, body.nx-theme .panel-body { padding: var(--nx-card-padding); } body.nx-theme.nx-hover-lift .card:hover, body.nx-theme.nx-hover-lift .tile:hover { transform: translateY(-2px); transition: transform .18s ease, box-shadow .18s ease; } body.nx-theme .card-header, body.nx-theme .panel-heading { background: transparent; border-bottom: max(var(--nx-border-width), 1px) solid var(--nx-border); padding: calc(var(--nx-card-padding) * 0.75) var(--nx-card-padding); font-weight: var(--nx-weight-heading); color: var(--nx-text); } body.nx-theme .card-footer, body.nx-theme .panel-footer { background: transparent; border-top: max(var(--nx-border-width), 1px) solid var(--nx-border); } body.nx-theme .list-group-item { background: transparent; border-color: var(--nx-border); color: var(--nx-text); } body.nx-theme .list-group-item:hover { background: rgba(var(--nx-primary-rgb), 0.05); } /* ---------- Sidebar (twenty-one .sidebar panels) ---------- */ body.nx-theme .sidebar .card, body.nx-theme .sidebar .panel-sidebar { background: var(--nx-sidebar-bg); } body.nx-theme .sidebar .card .card-header { color: var(--nx-sidebar-text); text-transform: uppercase; font-size: var(--nx-font-size-sm); letter-spacing: 0.5px; } body.nx-theme .sidebar .list-group-item { color: var(--nx-sidebar-text); } body.nx-theme .sidebar .list-group-item.active { background: rgba(var(--nx-primary-rgb), 0.10); color: var(--nx-primary); border-left: 3px solid var(--nx-primary); font-weight: var(--nx-weight-button); } /* Sidebar menu layout mode: fixed left/right column */ @media (min-width: 992px) { body.nx-theme.nx-menu-sidebar #main-body .sidebar, body.nx-theme.nx-menu-sidebar .main-sidebar { width: var(--nx-sidebar-width); transition: width .2s ease; } .nx-sidebar-mode-compact body.nx-theme.nx-menu-sidebar #main-body .sidebar, .nx-sidebar-mode-compact body.nx-theme.nx-menu-sidebar .main-sidebar { width: var(--nx-sidebar-width-compact); font-size: calc(var(--nx-font-size) - 1px); } .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar #main-body .sidebar, .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .main-sidebar { width: var(--nx-sidebar-width-icons); } .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .sidebar .list-group-item span, .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .sidebar .card-header span { display: none; } .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .sidebar .list-group-item { text-align: center; } body.nx-theme.nx-sidebar-right #main-body { flex-direction: row-reverse; } } /* Nexum client-area flex layout: flip sidebar to the right on desktop. The .nx-app-layout is d-flex flex-md-row (768px+); the sidebar is a flex child (not fixed) and .nx-main-area is flex-grow-1, so reversing the row moves the sidebar to the right and the content offset follows automatically. */ @media (min-width: 768px) { body.nx-theme.nx-sidebar-right .nx-app-layout { flex-direction: row-reverse; } body.nx-theme.nx-sidebar-right .nx-sidebar { border-right: 0; border-left: 1px solid var(--nx-border); } } html.nx-dark body.nx-sidebar-right .nx-sidebar { border-right: 0; border-left: 1px solid var(--nx-border); } /* Hide the client-area sidebar entirely when menu layout = top */ body.nx-theme.nx-menu-top .sidebar .card-header { border-radius: var(--nx-radius-card) var(--nx-radius-card) 0 0; } /* ---------- Buttons ---------- */ body.nx-theme .btn { border-radius: var(--nx-radius-button); font-weight: var(--nx-weight-button); text-transform: var(--nx-btn-transform); font-family: var(--nx-font-family); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; border-width: 1px; } body.nx-theme .btn-primary, body.nx-theme .btn-styled-blue { background: var(--nx-primary); border-color: var(--nx-primary); color: var(--nx-on-primary); } /* Bootstrap's own build (theme.min.css) hardcodes the pressed/focused states — .btn-primary:active becomes #264d73, .btn-success #1e7e34 and so on — with a selector chain (`:not(:disabled):not(.disabled).active`) specific enough to beat a plain `.btn-primary` rule. That is why a themed button snapped back to stock Bootstrap blue the moment it was clicked. Matching that chain here keeps every state on the admin palette. theme.min.css itself is a vendor bundle regenerated on upgrade, so it is never edited. */ body.nx-theme .btn-primary:hover, body.nx-theme .btn-primary:focus, body.nx-theme .btn-primary:not(:disabled):not(.disabled):active, body.nx-theme .btn-primary:not(:disabled):not(.disabled).active, body.nx-theme .show > .btn-primary.dropdown-toggle { background-color: var(--nx-primary-hover); border-color: var(--nx-primary-hover); color: var(--nx-on-primary); } body.nx-theme .btn-primary:focus, body.nx-theme .btn-primary:not(:disabled):not(.disabled):active:focus, body.nx-theme .btn-primary:not(:disabled):not(.disabled).active:focus, body.nx-theme .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(var(--nx-primary-rgb), .35); } /* The semantic variants get the same treatment. Their base fills are defined further down with the rest of the button styles; only the pressed states need this selector chain. */ body.nx-theme .btn-success:not(:disabled):not(.disabled):active, body.nx-theme .btn-success:not(:disabled):not(.disabled).active, body.nx-theme .show > .btn-success.dropdown-toggle { background-color: color-mix(in srgb, var(--nx-success) 85%, #000); border-color: color-mix(in srgb, var(--nx-success) 85%, #000); color: var(--nx-on-primary); } body.nx-theme .btn-danger:not(:disabled):not(.disabled):active, body.nx-theme .btn-danger:not(:disabled):not(.disabled).active, body.nx-theme .show > .btn-danger.dropdown-toggle { background-color: color-mix(in srgb, var(--nx-danger) 85%, #000); border-color: color-mix(in srgb, var(--nx-danger) 85%, #000); color: var(--nx-on-primary); } body.nx-theme .btn-warning:not(:disabled):not(.disabled):active, body.nx-theme .btn-warning:not(:disabled):not(.disabled).active, body.nx-theme .btn-info:not(:disabled):not(.disabled):active, body.nx-theme .btn-info:not(:disabled):not(.disabled).active { filter: brightness(0.85); color: var(--nx-on-primary); } /* Focus rings, so a keyboard user sees the theme colour rather than Bootstrap blue. */ body.nx-theme .btn-success:focus, body.nx-theme .btn-success:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nx-success) 35%, transparent); } body.nx-theme .btn-danger:focus, body.nx-theme .btn-danger:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nx-danger) 35%, transparent); } /* Outline variant — Bootstrap pins this one to #369 in every state. */ body.nx-theme .btn-outline-primary { color: var(--nx-primary); border-color: var(--nx-primary); background-color: transparent; } body.nx-theme .btn-outline-primary:hover, body.nx-theme .btn-outline-primary:not(:disabled):not(.disabled):active, body.nx-theme .btn-outline-primary:not(:disabled):not(.disabled).active, body.nx-theme .show > .btn-outline-primary.dropdown-toggle { color: var(--nx-on-primary); background-color: var(--nx-primary); border-color: var(--nx-primary); } body.nx-theme .btn-outline-primary:focus, body.nx-theme .btn-outline-primary.focus, body.nx-theme .btn-outline-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(var(--nx-primary-rgb), .35); } body.nx-theme .btn-outline-primary:disabled, body.nx-theme .btn-outline-primary.disabled { color: var(--nx-primary); background-color: transparent; } body.nx-theme.nx-btn-shadow .btn-primary { box-shadow: 0 4px 14px rgba(var(--nx-primary-rgb), 0.30); } body.nx-theme.nx-buttons-soft .btn-primary { background: rgba(var(--nx-primary-rgb), 0.12); border-color: transparent; color: var(--nx-primary); box-shadow: none; } body.nx-theme.nx-buttons-soft .btn-primary:hover { background: rgba(var(--nx-primary-rgb), 0.20); color: var(--nx-primary-hover); } body.nx-theme.nx-buttons-outline .btn-primary { background: transparent; border-color: var(--nx-primary); color: var(--nx-primary); box-shadow: none; } body.nx-theme.nx-buttons-outline .btn-primary:hover { background: var(--nx-primary); color: var(--nx-on-primary); } body.nx-theme .btn-default, body.nx-theme .btn-secondary { background: var(--nx-card-bg); border-color: var(--nx-border); color: var(--nx-text); } body.nx-theme .btn-default:hover, body.nx-theme .btn-secondary:hover { background: rgba(var(--nx-primary-rgb), 0.06); border-color: var(--nx-primary); color: var(--nx-primary); } /* Semantic buttons. The colour token drives the fill; --nx-on-primary drives the label so it stays legible whatever the admin picks. Bootstrap left the text colour to its own defaults here, which did not follow the theme. */ body.nx-theme .btn-success { background: var(--nx-success); border-color: var(--nx-success); color: var(--nx-on-primary); } body.nx-theme .btn-danger { background: var(--nx-danger); border-color: var(--nx-danger); color: var(--nx-on-primary); } body.nx-theme .btn-warning { background: var(--nx-warning); border-color: var(--nx-warning); color: var(--nx-on-primary); } body.nx-theme .btn-info { background: var(--nx-info); border-color: var(--nx-info); color: var(--nx-on-primary); } body.nx-theme .btn-success:hover, body.nx-theme .btn-danger:hover, body.nx-theme .btn-warning:hover, body.nx-theme .btn-info:hover { filter: brightness(0.93); color: var(--nx-on-primary); } /* The nx-buttons-* style setting applied to .btn-primary only, so a soft or outline theme left the semantic buttons solid. Keep them in step. */ body.nx-theme.nx-buttons-soft .btn-success, body.nx-theme.nx-buttons-soft .btn-danger, body.nx-theme.nx-buttons-soft .btn-warning, body.nx-theme.nx-buttons-soft .btn-info { border-color: transparent; box-shadow: none; } body.nx-theme.nx-buttons-soft .btn-success { background: rgba(var(--nx-success-rgb), 0.12); color: var(--nx-success); } body.nx-theme.nx-buttons-soft .btn-danger { background: rgba(var(--nx-danger-rgb), 0.12); color: var(--nx-danger); } body.nx-theme.nx-buttons-soft .btn-warning { background: rgba(var(--nx-warning-rgb), 0.12); color: var(--nx-warning); } body.nx-theme.nx-buttons-soft .btn-info { background: rgba(var(--nx-info-rgb), 0.12); color: var(--nx-info); } body.nx-theme.nx-buttons-outline .btn-success, body.nx-theme.nx-buttons-outline .btn-danger, body.nx-theme.nx-buttons-outline .btn-warning, body.nx-theme.nx-buttons-outline .btn-info { background: transparent; box-shadow: none; } body.nx-theme.nx-buttons-outline .btn-success { border-color: var(--nx-success); color: var(--nx-success); } body.nx-theme.nx-buttons-outline .btn-danger { border-color: var(--nx-danger); color: var(--nx-danger); } body.nx-theme.nx-buttons-outline .btn-warning { border-color: var(--nx-warning); color: var(--nx-warning); } body.nx-theme.nx-buttons-outline .btn-info { border-color: var(--nx-info); color: var(--nx-info); } body.nx-theme.nx-buttons-outline .btn-success:hover { background: var(--nx-success); color: var(--nx-on-primary); } body.nx-theme.nx-buttons-outline .btn-danger:hover { background: var(--nx-danger); color: var(--nx-on-primary); } body.nx-theme.nx-buttons-outline .btn-warning:hover { background: var(--nx-warning); color: var(--nx-on-primary); } body.nx-theme.nx-buttons-outline .btn-info:hover { background: var(--nx-info); color: var(--nx-on-primary); } body.nx-theme .btn-info { background: var(--nx-info); border-color: var(--nx-info); } body.nx-theme .btn-link { color: var(--nx-link); box-shadow: none; } /* ---------- Forms ---------- */ body.nx-theme .form-control, body.nx-theme select.form-control, body.nx-theme .custom-select { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input); color: var(--nx-text); font-family: var(--nx-font-family); font-size: var(--nx-font-size); transition: border-color .15s ease, box-shadow .15s ease; } body.nx-theme .form-control:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.15); outline: none; } body.nx-theme label, body.nx-theme .control-label { color: var(--nx-text); font-weight: var(--nx-weight-button); } body.nx-theme .input-group-text { background: var(--nx-bg); border-color: var(--nx-border); color: var(--nx-muted); border-radius: var(--nx-radius-input); } /* ---------- Tables ---------- */ body.nx-theme .table { color: var(--nx-text); border-color: var(--nx-border); } body.nx-theme .table thead th, body.nx-theme .table > thead > tr > th { background: transparent; border-bottom: max(var(--nx-border-width), 1px) solid var(--nx-border); color: var(--nx-muted); font-size: var(--nx-font-size-sm); font-weight: var(--nx-weight-heading); text-transform: uppercase; letter-spacing: 0.5px; } body.nx-theme .table td, body.nx-theme .table th { border-color: var(--nx-border); } body.nx-theme .table-striped > tbody > tr:nth-of-type(odd), body.nx-theme .table-striped tbody tr:nth-of-type(odd) { background: rgba(var(--nx-primary-rgb), 0.025); } body.nx-theme .table-hover tbody tr:hover { background: rgba(var(--nx-primary-rgb), 0.05); } body.nx-theme div.dataTables_wrapper, body.nx-theme .table-container { background: var(--nx-card-bg); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow); border: var(--nx-border-width) solid var(--nx-border); padding: calc(var(--nx-card-padding) * 0.5); } /* ---------- Status pills / labels / badges ---------- */ body.nx-theme .label, body.nx-theme .badge, body.nx-theme .status { border-radius: var(--nx-radius-badge); padding: 4px 12px; font-size: var(--nx-font-size-sm); font-weight: var(--nx-weight-button); text-transform: capitalize; } body.nx-theme .status-active, body.nx-theme .label-success, body.nx-theme .badge-success, body.nx-theme .domain-status-active { background: var(--nx-pill-active-bg); color: var(--nx-pill-active-text); } body.nx-theme .status-pending, body.nx-theme .label-warning, body.nx-theme .badge-warning { background: var(--nx-pill-pending-bg); color: var(--nx-pill-pending-text); } body.nx-theme .status-suspended { background: var(--nx-pill-suspended-bg); color: var(--nx-pill-suspended-text); } body.nx-theme .status-cancelled, body.nx-theme .status-terminated, body.nx-theme .label-danger, body.nx-theme .badge-danger { background: var(--nx-pill-cancelled-bg); color: var(--nx-pill-cancelled-text); } body.nx-theme .status-open, body.nx-theme .label-info, body.nx-theme .badge-info { background: var(--nx-pill-open-bg); color: var(--nx-pill-open-text); } body.nx-theme .status-answered, body.nx-theme .status-customer-reply { background: var(--nx-pill-answered-bg); color: var(--nx-pill-answered-text); } body.nx-theme .status-closed, body.nx-theme .label-default, body.nx-theme .badge-secondary { background: var(--nx-pill-closed-bg); color: var(--nx-pill-closed-text); } /* ---------- Alerts ---------- */ body.nx-theme .alert { border-radius: var(--nx-radius-card); border: none; } body.nx-theme .alert-success { background: var(--nx-pill-active-bg); color: var(--nx-pill-active-text); } body.nx-theme .alert-danger { background: var(--nx-pill-cancelled-bg); color: var(--nx-pill-cancelled-text); } body.nx-theme .alert-warning { background: var(--nx-pill-pending-bg); color: var(--nx-pill-pending-text); } body.nx-theme .alert-info { background: var(--nx-pill-open-bg); color: var(--nx-pill-open-text); } /* ---------- Pagination / tabs / breadcrumb ---------- */ body.nx-theme .pagination .page-link { border-color: var(--nx-border); color: var(--nx-text); background: var(--nx-card-bg); } body.nx-theme .pagination .page-item.active .page-link { background: var(--nx-primary); border-color: var(--nx-primary); color: var(--nx-on-primary); } body.nx-theme .nav-tabs { border-color: var(--nx-border); } body.nx-theme .nav-tabs .nav-link { color: var(--nx-muted); border: none; } body.nx-theme .nav-tabs .nav-link.active { color: var(--nx-primary); background: transparent; border-bottom: 2px solid var(--nx-primary); } body.nx-theme .breadcrumb { background: transparent; padding-left: 0; font-size: var(--nx-font-size-sm); } body.nx-theme .breadcrumb a { color: var(--nx-muted); } body.nx-theme .breadcrumb .active { color: var(--nx-text); } /* ---------- Modals / popovers ---------- */ body.nx-theme .modal-content { background: var(--nx-card-bg); color: var(--nx-text); border: none; border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow); } body.nx-theme .modal-header, body.nx-theme .modal-footer { border-color: var(--nx-border); } /* ---------- Footer ---------- */ body.nx-theme #footer, body.nx-theme footer.footer { background: var(--nx-footer-bg); color: var(--nx-muted); border-top: var(--nx-border-width) solid var(--nx-border); flex-shrink: 0; } /* Mobile navigation drawer (header.tpl, viewinvoice.tpl). Replaces Bootstrap's .bg-white, which stayed white in dark mode. */ body.nx-theme .nx-mobile-navbar { background: var(--nx-card-bg); } body.nx-theme.nx-footer-hidden #footer, body.nx-theme.nx-footer-hidden footer.footer { display: none; } body.nx-theme.nx-footer-minimal #footer .row > div:not(:first-child) { display: none; } /* ---------- Floating controls injected by the module ---------- */ body.nx-theme .nx-mode-toggle, body.nx-theme .nx-sidebar-collapse { position: fixed; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--nx-card-bg); color: var(--nx-text); box-shadow: var(--nx-shadow), 0 2px 8px rgba(0,0,0,0.12); cursor: pointer; z-index: 1050; display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-xl); transition: transform .15s ease; } body.nx-theme .nx-mode-toggle { bottom: 20px; } body.nx-theme .nx-sidebar-collapse { bottom: 74px; } body.nx-theme .nx-mode-toggle:hover, body.nx-theme .nx-sidebar-collapse:hover { transform: scale(1.08); color: var(--nx-primary); } body.nx-theme .nx-sidebar-collapse i { transition: transform .15s ease; } body.nx-theme .nx-sidebar-collapse.is-collapsed i { transform: rotate(180deg); } @media (max-width: 991px) { body.nx-theme .nx-sidebar-collapse { display: none; } } /* ---------- Nexum Sidebar Layout Elements ---------- */ .nx-app-layout { font-family: var(--nx-font-family); background-color: var(--nx-bg); color: var(--nx-text); width: 100%; } .nx-app-layout > .nx-main-area { flex: 1 1 auto; min-width: 0; } .nx-sidebar { background: var(--nx-sidebar-bg); border-right: 1px solid var(--nx-border); display: flex; flex-direction: column; z-index: 100; overflow-x: hidden; transition: background 0.2s ease, border-color 0.2s ease, width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease, align-items 0.2s ease; } /* Expanded Sidebar Mode */ .nx-sidebar-mode-expanded .nx-sidebar { width: var(--nx-sidebar-width, 260px); flex: 0 0 var(--nx-sidebar-width, 260px); align-items: flex-start; padding: 22px 20px; } .nx-sidebar-mode-expanded .nx-sidebar-logo { justify-content: flex-start; width: 100%; padding-left: 8px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .nx-sidebar-mode-expanded .nx-sidebar-nav { align-items: stretch; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .nx-sidebar-mode-expanded .nx-nav-item { flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; padding: 10px 14px; gap: 12px; border-radius: var(--nx-radius-md); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .nx-sidebar-mode-expanded .nx-nav-label { display: block; text-align: left; font-size: var(--nx-font-size-md); padding: 0; word-break: normal; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } /* Compact Sidebar Mode (Icon top, label bottom) */ .nx-sidebar-mode-compact .nx-sidebar { width: var(--nx-sidebar-width-compact, 96px) !important; flex: 0 0 var(--nx-sidebar-width-compact, 96px) !important; align-items: center !important; padding: 22px 0 !important; } .nx-sidebar-mode-compact .nx-sidebar-logo { justify-content: center; width: auto; padding-left: 0; } .nx-sidebar-mode-compact .nx-sidebar-nav { align-items: center; } .nx-sidebar-mode-compact .nx-nav-item { flex-direction: column; align-items: center; justify-content: center; width: 80px; padding: 11px 0; gap: 6px; border-radius: var(--nx-radius-card); } .nx-sidebar-mode-compact .nx-nav-label { display: block; text-align: center; font-size: 11.5px; } /* Icons Only Sidebar Mode */ .nx-sidebar-mode-icons .nx-sidebar { width: var(--nx-sidebar-width-icons, 72px); flex: 0 0 var(--nx-sidebar-width-icons, 72px); align-items: center; padding: 22px 0; } .nx-sidebar-mode-icons .nx-sidebar-logo { justify-content: center; width: auto; padding-left: 0; } .nx-sidebar-mode-icons .nx-sidebar-nav { align-items: center; } .nx-sidebar-mode-icons .nx-nav-item { flex-direction: column; align-items: center; justify-content: center; width: 52px; padding: 10px 0; gap: 0; border-radius: var(--nx-radius-md); } .nx-sidebar-mode-icons .nx-nav-label { display: none; } /* Collapse Sidebar Fixes */ .nx-sidebar-mode-compact .nx-sidebar, .nx-sidebar-mode-compact .nx-sidebar-top, .nx-sidebar-mode-icons .nx-sidebar, .nx-sidebar-mode-icons .nx-sidebar-top { overflow: visible; } .nx-sidebar-mode-compact .nx-sidebar-submenu-list, .nx-sidebar-mode-icons .nx-sidebar-submenu-list, .nx-sidebar-mode-compact .nx-sidebar-submenu-collapse, .nx-sidebar-mode-icons .nx-sidebar-submenu-collapse { display: none; } .nx-sidebar-mode-compact .nx-nav-arrow, .nx-sidebar-mode-icons .nx-nav-arrow { display: none; } html.nx-dark body .nx-sidebar { background: var(--nx-sidebar-bg); border-right: 1px solid var(--nx-border); } .nx-sidebar-logo { height: 44px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; } /* Logo image sizing lives in CSS (NOT JS) so it's correct on first paint and never flashes oversized. JS only swaps the src (light/dark, full/compact). */ .nx-sidebar-logo .nx-logo-img, .nx-sidebar-logo img { max-height: var(--nx-logo-height, 36px); width: auto; max-width: 100%; object-fit: contain; } .nx-sidebar-mode-compact .nx-sidebar-logo .nx-logo-compact, .nx-sidebar-mode-icons .nx-sidebar-logo .nx-logo-compact { max-height: 44px; max-width: 44px; width: 44px; height: auto; } .nx-sidebar-mode-icons .nx-sidebar-logo .nx-logo-compact { max-height: 34px; max-width: 34px; width: 34px; } /* Topbar logo (top layout) */ .nx-topbar-left img, .nx-logo-top { max-height: var(--nx-logo-height, 36px); width: auto; object-fit: contain; } body.nx-theme .nx-sidebar-nav { margin-top: 0; } .nx-logo-mark { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(140deg, var(--nx-secondary), var(--nx-primary)); box-shadow: 0 6px 16px rgba(var(--nx-primary-rgb), 0.35); color: #ffffff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .nx-sidebar-nav { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; } .nx-nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; padding: 11px 0; border-radius: var(--nx-radius-card); cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .nx-nav-icon-wrapper { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--nx-bg); color: var(--nx-muted); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } html.nx-dark body .nx-nav-icon-wrapper { background: var(--nx-card-bg); color: var(--nx-muted); } .nx-nav-label { font-size: 11.5px; letter-spacing: 0.1px; font-weight: 600; color: var(--nx-sidebar-text); text-align: center; line-height: 1.25; word-break: break-word; padding: 0 4px; transition: color 0.15s ease; } html.nx-dark body .nx-nav-label { color: var(--nx-muted); } /* Inactive Hover state */ .nx-nav-item:hover .nx-nav-icon-wrapper { background: rgba(var(--nx-primary-rgb), 0.08); color: var(--nx-primary); } html.nx-dark body .nx-nav-item:hover .nx-nav-icon-wrapper { background: rgba(var(--nx-primary-rgb), 0.12); color: var(--nx-primary); } .nx-nav-item:hover .nx-nav-label { color: var(--nx-primary); } html.nx-dark body .nx-nav-item:hover .nx-nav-label { color: var(--nx-primary); } /* Active State */ .nx-nav-item.active .nx-nav-icon-wrapper { background: var(--nx-primary); color: var(--nx-on-primary); box-shadow: 0 6px 14px rgba(var(--nx-primary-rgb), 0.35); } html.nx-dark body .nx-nav-item.active .nx-nav-icon-wrapper { background: var(--nx-primary); color: var(--nx-on-primary); box-shadow: 0 6px 14px rgba(var(--nx-primary-rgb), 0.45); } .nx-nav-item.active .nx-nav-label { color: var(--nx-primary); font-weight: 700; } html.nx-dark body .nx-nav-item.active .nx-nav-label { color: var(--nx-primary); font-weight: 700; } .nx-sidebar-footer { border-top: none; padding-top: 0; display: flex; justify-content: center; width: 100%; } .nx-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(140deg, #f59e0b, #ea580c); color: #ffffff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; flex-shrink: 0; } .nx-user-info { display: none; } /* ---------- Dark Mode Toggle Switch ---------- */ .nx-topbar-mode-toggle { width: 44px; height: 24px; border-radius: var(--nx-radius-badge); background: rgba(var(--nx-muted-rgb, 100, 116, 139), 0.85); position: relative; cursor: pointer; transition: background-color .25s ease; flex-shrink: 0; border: none; padding: 0; } .nx-topbar-mode-toggle.active { background: var(--nx-primary); } .nx-topbar-mode-toggle:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; } .nx-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--nx-card-bg); display: flex; align-items: center; justify-content: center; color: var(--nx-muted); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform .25s ease, color .25s ease; } .nx-toggle-thumb .material-symbols-rounded { font-size: 12px; line-height: 1; } .nx-toggle-thumb .nx-toggle-ico-light { display: inline-flex; } .nx-toggle-thumb .nx-toggle-ico-dark { display: none; font-variation-settings: 'FILL' 1; } html.nx-dark body .nx-toggle-thumb .nx-toggle-ico-light { display: none; } html.nx-dark body .nx-toggle-thumb .nx-toggle-ico-dark { display: inline-flex; } .nx-topbar-mode-toggle.active .nx-toggle-thumb { transform: translateX(20px); background: var(--nx-on-primary); color: var(--nx-primary); } /* ---------- Main Column and Topbar ---------- */ .nx-main-area { min-width: 0; background: var(--nx-bg); } .nx-topbar { height: var(--nx-header-height); background: var(--nx-header-bg); border-bottom: 1px solid var(--nx-border); padding: 0 var(--nx-topbar-gutter); flex-shrink: 0; } .nx-page-category-label { font-size: var(--nx-font-size-md); color: var(--nx-muted); } .nx-topbar-right { display: flex; align-items: center; gap: 8px; } .nx-topbar-divider { width: 1px; height: 24px; background: var(--nx-border); flex-shrink: 0; } html.nx-dark body .nx-topbar-divider { background: var(--nx-border); } .nx-logo-light-mode { display: inline-block; } .nx-logo-dark-mode { display: none; } html.nx-dark body .nx-logo-light-mode { display: none; } html.nx-dark body .nx-logo-dark-mode { display: inline-block; } .nx-topbar-link { display: flex; align-items: center; gap: 7px; color: var(--nx-text); font-weight: 700; font-size: var(--nx-font-size-md); text-decoration: none; background: transparent; border: none; padding: 6px 6px; border-radius: var(--nx-radius-md); box-shadow: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; overflow: visible; } html.nx-dark body .nx-topbar-link { color: var(--nx-text); } .nx-topbar-link:hover { color: var(--nx-primary); } /* Fix input group focus border spread */ .input-group .form-control:focus { box-shadow: none !important; border-color: var(--nx-border) !important; } .input-group:focus-within .form-control { border-color: var(--nx-primary) !important; } .input-group:focus-within .btn { border-color: var(--nx-primary) !important; } /* Horizontal Top Navigation Links */ .nx-topbar-nav-middle .nx-navbar-link::after { display: none; content: none; } .nx-navbar-link { display: flex; align-items: center; gap: 8px; font-size: var(--nx-font-size-md); font-weight: 700; color: var(--nx-text); text-decoration: none; padding: 8px 12px; border-radius: var(--nx-radius-md); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .nx-navbar-link.active { color: var(--nx-primary); background: rgba(var(--nx-primary-rgb), 0.08); } html.nx-dark body .nx-navbar-link.active { background: rgba(var(--nx-primary-rgb), 0.15); } .nx-navbar-link:hover { color: var(--nx-primary); background: rgba(var(--nx-primary-rgb), 0.05); } .nx-navbar-link:hover span, .nx-navbar-link.active span { color: var(--nx-primary) !important; } /* Auto open dropdowns on hover */ @media (min-width: 768px) { .nx-top-nav-dropdown:hover .dropdown-menu { display: block; margin-top: 0; } } .nx-top-nav-dropdown .dropdown-menu::before { content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; background: transparent; z-index: -1; } /* Extra top padding so the page heading is not crowded against the nav row. The horizontal and bottom padding stay on the admin setting. */ .nx-content-wrapper { padding: calc(var(--nx-content-padding) * 1.25) var(--nx-content-padding) var(--nx-content-padding); min-width: 0; } /* WHMCS appends its "Powered by" line via ClientAreaFooterOutput, so it lands as the last child of the content area with no spacing of its own and sat flush against whatever section ended the page. Matching the last child rather than a class keeps it working whatever element WHMCS emits. */ body.nx-theme .nx-content-container > :last-child:not(.row):not(div[id]):not(form) { margin-bottom: 0; } body.nx-theme .nx-content-container > .text-center:last-child, body.nx-theme .nx-content-container > p:last-child { margin-top: var(--nx-space-8, 32px); padding-top: var(--nx-space-5, 20px); color: var(--nx-muted); font-size: var(--nx-font-size-sm); } /* The WHMCS link inside it kept Bootstrap's default blue, which had nothing to do with the palette. It is a credit line, so it sits at the same weight as the text around it and only picks up the brand colour on hover. */ body.nx-theme .nx-content-container > .text-center:last-child a, body.nx-theme .nx-content-container > p:last-child a { color: var(--nx-muted); text-decoration: none; } body.nx-theme .nx-content-container > .text-center:last-child a:hover, body.nx-theme .nx-content-container > p:last-child a:hover { color: var(--nx-primary); } .nx-sidebar-mode-compact .nx-content-wrapper, .nx-sidebar-mode-icons .nx-content-wrapper { padding: calc(var(--nx-content-padding) * 0.6); } /* Sidebar Logo Toggles for Compact States */ .nx-sidebar-mode-compact .nx-logo-full, .nx-sidebar-mode-icons .nx-logo-full { display: none; } .nx-sidebar-mode-compact .nx-logo-compact, .nx-sidebar-mode-icons .nx-logo-compact { display: block; } /* Pages that place a Bootstrap .row directly in this container (services, domains, invoices) rely on a gutter to absorb the row's -15px side margins. The topbar rows opt out below -- they pad themselves. */ .nx-content-container { max-width: var(--nx-container-width); margin: 0 auto; width: 100%; padding-left: 15px; padding-right: 15px; } .nx-topbar .nx-content-container, .nx-topbar-expanded-top .nx-content-container, .nx-topbar-expanded-bottom .nx-content-container { padding-left: 0; padding-right: 0; } /* WHMCS injects the development-licence notice through $headeroutput, so it cannot be removed from the template. It is matched on the inline background it ships with. Remove this rule once a production licence is in place. */ body.nx-theme div[style*="#ffffd2"] { display: none; } .nx-page-title { font-size: var(--nx-font-size-h1); font-weight: 700; color: var(--nx-text); letter-spacing: -0.01em; } .nx-page-subtitle { font-size: var(--nx-font-size-sm); color: var(--nx-muted); } /* ---------- Redesigned Count Cards ---------- */ .nx-stat-card { background: var(--nx-card-bg); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow); padding: 20px; display: flex; align-items: center; gap: 16px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .nx-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .nx-stat-icon-badge { width: 32px; height: 32px; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-xl); flex-shrink: 0; } .nx-icon-services { background: rgba(var(--nx-primary-rgb), 0.12); color: var(--nx-primary); } html.nx-dark body .nx-icon-services { background: rgba(var(--nx-primary-rgb), 0.20); } .nx-icon-domains { background: rgba(14, 165, 233, 0.12); color: #0ea5e9; } html.nx-dark body .nx-icon-domains { background: rgba(14, 165, 233, 0.20); } .nx-icon-billing { background: rgba(225, 29, 72, 0.12); color: #e11d48; } html.nx-dark body .nx-icon-billing { background: rgba(225, 29, 72, 0.20); } .nx-icon-tickets { background: rgba(217, 119, 6, 0.12); color: #d97706; } html.nx-dark body .nx-icon-tickets { background: rgba(217, 119, 6, 0.20); } .nx-stat-label { font-size: var(--nx-font-size-sm); font-weight: 600; color: var(--nx-muted); text-transform: uppercase; letter-spacing: 0.03em; } .nx-stat-value { font-size: 24px; font-weight: 700; color: var(--nx-text); line-height: 1.2; } /* ---------- Status Filter Chips ---------- */ .nx-filter-chips { gap: 8px; } .nx-filter-chip { border-radius: var(--nx-radius-badge); padding: 6px 16px; font-size: 12.5px; font-weight: 600; border: none; box-shadow: none; background-color: var(--nx-border); color: var(--nx-muted); transition: background 0.15s ease, color 0.15s ease; } .nx-filter-chip.active { background-color: var(--nx-primary) !important; color: #fff !important; } /* ---------- Profile Dropdown Styling ---------- */ .btn-profile { background: transparent; border: none; padding: 0; color: var(--nx-text); font-weight: 600; } .btn-profile:focus, .btn-profile:active { box-shadow: none !important; } .gap-2 { gap: 8px; } /* ---------- Responsive Sidebar & Mobile Buttons ---------- */ .nx-mobile-toggle-btn, .nx-sidebar-close-btn { background: transparent; border: none; color: var(--nx-text); font-size: var(--nx-font-size-h3); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Suppress the resting focus ring on mouse click, but keep a visible one for keyboard users -- these two buttons previously removed it outright. */ .nx-mobile-toggle-btn:focus, .nx-sidebar-close-btn:focus { box-shadow: none; outline: none; } .nx-mobile-toggle-btn:focus-visible, .nx-sidebar-close-btn:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; } @media (max-width: 991px) { .nx-sidebar { position: fixed; top: 0; left: -280px; /* Initially off-screen */ width: 260px; height: 100vh; z-index: 1050; transition: left 0.25s ease; box-shadow: 4px 0 24px rgba(15,15,20,0.12); padding: 20px 14px; } .nx-sidebar.open { left: 0; } .nx-topbar { padding: 0 var(--nx-topbar-gutter); } .nx-content-wrapper { padding: calc(var(--nx-content-padding) * 0.75) 16px; } } /* ---------- Home panels grid rhythm ---------- */ body.nx-theme .client-home-panels .card { height: calc(100% - var(--nx-card-gap)); } /* ---------- Scrollbar (webkit) ---------- */ body.nx-theme ::-webkit-scrollbar { width: 10px; height: 10px; } body.nx-theme ::-webkit-scrollbar-track { background: var(--nx-bg); } body.nx-theme ::-webkit-scrollbar-thumb { background: var(--nx-border); border-radius: var(--nx-radius-md); } body.nx-theme ::-webkit-scrollbar-thumb:hover { background: var(--nx-muted); } /* ---------- Comprehensive Dark Mode Overrides ---------- */ html.nx-dark body { background-color: var(--nx-bg); color: var(--nx-text); } html.nx-dark body .nx-main-area { background-color: var(--nx-bg); } html.nx-dark body .nx-content-wrapper { background-color: var(--nx-bg); } html.nx-dark body .nx-topbar { background-color: var(--nx-card-bg); border-bottom-color: var(--nx-border); } html.nx-dark body .nx-topbar-link { color: var(--nx-muted); } html.nx-dark body .nx-topbar-link:hover { color: var(--nx-primary); } html.nx-dark body .nx-page-category-label { color: var(--nx-muted); } html.nx-dark body .nx-topbar-divider { background: var(--nx-border); } html.nx-dark body .card, html.nx-dark body .list-group-item, html.nx-dark body .dropdown-menu { background-color: var(--nx-card-bg); border-color: var(--nx-border); color: var(--nx-text); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } html.nx-dark body .dropdown-item { color: var(--nx-text); transition: background 0.15s ease, color 0.15s ease; } html.nx-dark body .dropdown-item:hover, html.nx-dark body .dropdown-item:focus { background-color: rgba(var(--nx-primary-rgb), 0.14); color: var(--nx-text); } html.nx-dark body .dropdown-divider { border-top-color: var(--nx-border); } html.nx-dark body .card-header, html.nx-dark body .card-footer { background-color: rgba(255, 255, 255, 0.03); border-color: var(--nx-border); color: var(--nx-text); } html.nx-dark body input, html.nx-dark body select, html.nx-dark body textarea { background-color: var(--nx-bg); border-color: var(--nx-border); color: var(--nx-text); } html.nx-dark body input:focus, html.nx-dark body select:focus, html.nx-dark body textarea:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 2px rgba(var(--nx-primary-rgb), 0.25); } html.nx-dark body table, html.nx-dark body th, html.nx-dark body td { border-color: var(--nx-border); color: var(--nx-text); } html.nx-dark body .table th { background-color: var(--nx-card-bg); } /* html.nx-dark body a { color: var(--nx-primary); } */ /* html.nx-dark body a:hover { color: var(--nx-primary-hover); } */ html.nx-dark body .text-muted, html.nx-dark body p.text-muted, html.nx-dark body span.text-muted, html.nx-dark body small.text-muted { color: var(--nx-muted); } /* ---------- Sidebar Submenu Flyouts ---------- */ body.nx-theme .nx-nav-dropdown-wrapper .dropdown-menu { border: 1px solid var(--nx-border); background: var(--nx-card-bg); } body.nx-theme .nx-nav-dropdown-wrapper .dropdown-item { background: transparent; color: var(--nx-text); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body.nx-theme .nx-nav-dropdown-wrapper .dropdown-item:hover { background: rgba(var(--nx-primary-rgb), 0.06); color: var(--nx-primary); } /* Dark-mode dropdown flyout inherits the var(--nx-*) rules above, which auto-swap under html.nx-dark body — no hardcoded overrides needed. */ /* Hide bootstrap dropdown toggle carets in sidebar */ body.nx-theme .nx-sidebar .dropdown-toggle::after { display: none !important; } /* Sidebar word-wrap wrapping */ body.nx-theme .sidebar .list-group-item, body.nx-theme .cart-sidebar .list-group-item, body.nx-theme .list-group-item-action, body.nx-theme .nx-sidebar-nav .nx-nav-label { white-space: normal; word-break: break-word; text-overflow: clip; overflow: visible; } /* ---------- Expanded Accordion Sidebar Styles ---------- */ .nx-sidebar-mode-expanded .d-none-compact { display: block !important; } .nx-sidebar-mode-expanded .d-block-compact { display: none !important; } .nx-sidebar-mode-compact .d-none-compact, .nx-sidebar-mode-icons .d-none-compact { display: none !important; } .nx-sidebar-mode-compact .d-block-compact, .nx-sidebar-mode-icons .d-block-compact { display: block !important; } /* Expanded Sidebar: Nav Items & Icons */ .nx-sidebar-mode-expanded .nx-nav-item { background: transparent; color: var(--nx-sidebar-text); } .nx-sidebar-mode-expanded .nx-nav-icon-wrapper { background: transparent; color: var(--nx-sidebar-text); width: 24px; height: 24px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .nx-sidebar-mode-expanded .nx-nav-label { color: var(--nx-sidebar-text); font-weight: 600; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* Inactive Hover state */ .nx-sidebar-mode-expanded .nx-nav-item:hover { background: rgba(var(--nx-primary-rgb), 0.04); color: var(--nx-primary); } .nx-sidebar-mode-expanded .nx-nav-item:hover .nx-nav-icon-wrapper { color: var(--nx-primary); } .nx-sidebar-mode-expanded .nx-nav-item:hover .nx-nav-label { color: var(--nx-primary); } /* Active & Expanded Accordion State */ .nx-sidebar-mode-expanded .nx-nav-item.active, .nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] { background: rgba(var(--nx-primary-rgb), 0.08) !important; color: var(--nx-primary) !important; } .nx-sidebar-mode-expanded .nx-nav-item.active .nx-nav-icon-wrapper, .nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] .nx-nav-icon-wrapper { color: var(--nx-primary) !important; } .nx-sidebar-mode-expanded .nx-nav-item.active .nx-nav-label, .nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] .nx-nav-label { color: var(--nx-primary) !important; font-weight: 700 !important; } /* Arrow indicator rotate */ .nx-sidebar-mode-expanded .nx-nav-item .nx-nav-arrow { color: var(--nx-muted); transition: transform 0.2s ease, color 0.15s ease; } .nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] .nx-nav-arrow { transform: rotate(180deg); color: var(--nx-primary); } /* Submenu layout */ .nx-sidebar-mode-expanded .nx-sidebar-submenu-list { border-left: 1.5px solid var(--nx-border); } .nx-sidebar-mode-expanded .nx-sidebar-submenu-item { color: var(--nx-sidebar-text); text-decoration: none; } /* Child icons, matching the top navbar's dropdown items — the label can wrap to two lines ("Register a New Domain"), so the icon stays put at the top rather than centring against the whole block. */ .nx-sidebar-submenu-item .nx-sidebar-submenu-ico { font-size: 19px; line-height: 1; flex-shrink: 0; margin-right: 10px; color: var(--nx-primary); align-self: flex-start; margin-top: 1px; } .nx-sidebar-submenu-item.active .nx-sidebar-submenu-ico, .nx-sidebar-submenu-item:hover .nx-sidebar-submenu-ico { color: var(--nx-primary); } .nx-sidebar-mode-expanded .nx-sidebar-submenu-item:hover { background: rgba(var(--nx-primary-rgb), 0.08); color: var(--nx-primary); } .nx-sidebar-mode-expanded .nx-sidebar-submenu-item.active { background: rgba(var(--nx-primary-rgb), 0.08) !important; color: var(--nx-primary) !important; font-weight: 700 !important; } /* Profile Card Customizations */ .nx-sidebar-profile-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; border: 1px solid var(--nx-border); background: var(--nx-card-bg); border-radius: var(--nx-radius-md); padding: 10px 12px; } .nx-sidebar-profile-card a { color: var(--nx-muted); transition: color 0.15s ease; } .nx-sidebar-profile-card a:hover { color: #ef4444; } html.nx-dark body .nx-sidebar-profile-card { background: var(--nx-card-bg); border-color: var(--nx-border); } html.nx-dark body .nx-sidebar-profile-card span { color: var(--nx-text); } html.nx-dark body .nx-sidebar-profile-card span + span { color: var(--nx-muted); } html.nx-dark body .nx-sidebar-profile-card a { color: var(--nx-muted); } html.nx-dark body .nx-sidebar-profile-card a:hover { color: #f04438; } html.nx-dark body .nx-logo-text-span { color: #ffffff; } /* Dark Mode Expanded Sidebar Elements */ html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-label { color: var(--nx-text); } html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-icon-wrapper { color: var(--nx-muted); } html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-item:hover { background: rgba(255, 255, 255, 0.03); } html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-item.active, html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] { background: rgba(var(--nx-primary-rgb), 0.15); } html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-list { border-left-color: var(--nx-border); } html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-item { color: var(--nx-muted); } html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-item:hover { background: rgba(var(--nx-primary-rgb), 0.12); color: var(--nx-primary); } html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-item.active { background: rgba(var(--nx-primary-rgb), 0.15); color: var(--nx-primary); } /* Request Cancellation Button. Was four rules — two light literals plus a html.nx-dark body pair repeating the same design in darker hex. Mixing the danger token against the current surface covers both modes with one rule, and follows the admin palette. */ body.nx-theme .nx-btn-cancel { border: 1px solid color-mix(in srgb, var(--nx-danger) 30%, var(--nx-border)); background: color-mix(in srgb, var(--nx-danger) 6%, var(--nx-card-bg)); color: var(--nx-danger); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body.nx-theme .nx-btn-cancel:hover { background: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-card-bg)); border-color: color-mix(in srgb, var(--nx-danger) 50%, var(--nx-border)); color: var(--nx-danger); } /* Overdue Invoice Alert. The whole block was fixed amber (#fed7aa / #ea580c / #fffcf6 / #7c2d12), so it stayed a bright card on dark and ignored the admin palette. Mixed from --nx-warning against the current surface instead. */ .nx-invoice-alert { border-radius: var(--nx-radius-card); border: 1px solid color-mix(in srgb, var(--nx-warning) 28%, var(--nx-border)); border-left: 6px solid var(--nx-warning); background: color-mix(in srgb, var(--nx-warning) 8%, var(--nx-card-bg)); padding: 16px 24px; gap: 16px; flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; } .nx-invoice-alert-icon { width: 40px; height: 40px; border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-warning) 18%, var(--nx-card-bg)); color: var(--nx-warning); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .nx-invoice-alert-title { font-size: 14.5px; font-weight: 800; color: var(--nx-text); } .nx-invoice-alert-subtitle { font-size: 12.5px; font-weight: 600; color: var(--nx-muted); margin-top: 2px; } .nx-invoice-alert-btn { border-radius: var(--nx-radius-md); background: var(--nx-warning); color: #fff; font-size: var(--nx-font-size-md); height: 40px; padding: 0 20px; gap: 8px; border: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--nx-warning) 22%, transparent); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; display: inline-flex; align-items: center; justify-content: center; } .nx-invoice-alert-btn:hover { background: color-mix(in srgb, var(--nx-warning) 85%, #000); color: #fff; } /* The html.nx-dark body block that used to sit here repeated the same design in darker hex. The color-mix values above already resolve per mode. */ /* Markdown Editor Dark Mode */ /* ---------- Markdown editor (ticket / reply forms) ---------- These were scoped to html.nx-dark body, so light mode kept the vendor's own #f5f5f5 toolbar, #eee textarea and #ddd dashed borders — none of which follow the palette. They are token-driven for both modes now. all.min.css addresses the parts with a child combinator (`.md-editor > textarea`, `.md-editor > .md-header`), so the selectors here match that shape rather than relying on load order alone. */ body.nx-theme .md-editor { background-color: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); overflow: hidden; } body.nx-theme .md-editor.active { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .15); } body.nx-theme .md-editor > textarea, body.nx-theme .md-editor textarea { background-color: var(--nx-card-bg); color: var(--nx-text); border-top: 1px solid var(--nx-border); border-bottom: 1px solid var(--nx-border); font-family: var(--nx-font-family); font-size: var(--nx-font-size); font-weight: 500; padding: 14px; } body.nx-theme .md-editor > textarea:focus, body.nx-theme .md-editor textarea:focus { background-color: var(--nx-card-bg); color: var(--nx-text); } body.nx-theme .md-editor > textarea::placeholder { color: var(--nx-muted); } body.nx-theme .md-editor > .md-header, body.nx-theme .md-editor .md-header { background-color: var(--nx-bg); border-bottom: 1px solid var(--nx-border); padding: 8px 12px; } body.nx-theme .md-editor .md-footer { background-color: var(--nx-bg); border-top: 1px solid var(--nx-border); color: var(--nx-muted); padding: 6px 12px; font-size: var(--nx-font-size-sm); } body.nx-theme .md-editor .btn-default { background-color: var(--nx-card-bg); border: 1px solid var(--nx-border); color: var(--nx-text); font-weight: 700; font-size: 13px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body.nx-theme .md-editor .btn-default:hover { background-color: var(--nx-bg); border-color: var(--nx-primary); color: var(--nx-primary); } body.nx-theme .md-editor .btn-default.active, body.nx-theme .md-editor .btn-group .btn-default.active { background-color: var(--nx-primary); color: #fff; border-color: var(--nx-primary); } body.nx-theme .md-editor > .md-preview, body.nx-theme .md-editor .md-preview { background-color: var(--nx-card-bg); color: var(--nx-text); border-top: 1px solid var(--nx-border); border-bottom: 1px solid var(--nx-border); padding: 14px; } /* Fullscreen mode pins itself to #fff !important in the vendor bundle. */ body.nx-theme .md-editor.md-fullscreen-mode { background: var(--nx-bg) !important; } body.nx-theme .md-editor.md-fullscreen-mode .md-input, body.nx-theme .md-editor.md-fullscreen-mode .md-preview { background: var(--nx-card-bg) !important; color: var(--nx-text) !important; } body.nx-theme .md-editor .md-controls .md-control { color: var(--nx-muted); } body.nx-theme .md-editor .md-controls .md-control:hover { color: var(--nx-primary); } html.nx-dark body .nx-plus-badge { border-color: var(--nx-card-bg); } /* ---------- Top Layout Navigation Row ---------- */ .nx-navbar-row { height: 62px; background: var(--nx-header-bg); border-bottom: 1px solid var(--nx-border); padding: 0 40px; display: flex; align-items: center; transition: background 0.2s ease, border-color 0.2s ease; } html.nx-dark body .nx-navbar-row { background: var(--nx-card-bg); border-bottom: 1px solid var(--nx-border); } .nx-navbar-nav-left { display: flex; align-items: center; gap: 28px; } .nx-navbar-link { font-size: 14.5px; font-weight: 600; color: var(--nx-text); text-decoration: none; padding: 18px 0; position: relative; transition: color 0.15s ease; } .nx-navbar-link:hover, .nx-navbar-link.active { color: var(--nx-primary) !important; } /* Bottom line indicator on hover/active */ .nx-navbar-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--nx-primary); transform: scaleX(0); transform-origin: right; transition: transform 0.2s ease; } .nx-navbar-link.active::after, .nx-navbar-link:hover::after { transform: scaleX(1); transform-origin: left; } /* Call to Action Button */ .nx-navbar-btn-cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: var(--nx-radius-md); font-size: 13px; font-weight: 700; color: #ffffff; background: var(--nx-primary); box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.25); text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .nx-navbar-btn-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--nx-primary-rgb), 0.35); filter: brightness(1.05); } /* ---------- Promotional Banner Slider ---------- */ .nx-banner-slider { position: relative; border-radius: var(--nx-radius-card); overflow: hidden; box-shadow: var(--nx-shadow); } .nx-banner-track { position: relative; } .nx-banner-slide { display: none; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 40px; } .nx-banner-slide.active { display: flex; animation: nxBannerFade 0.5s ease; } @keyframes nxBannerFade { from { opacity: 0; } to { opacity: 1; } } .nx-banner-content { position: relative; z-index: 2; max-width: 60%; } .nx-banner-badge { display: inline-block; font-size: var(--nx-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: var(--nx-radius-badge); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); margin-bottom: 14px; } .nx-banner-title { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 0 0 10px; color: inherit; } .nx-banner-subtitle { font-size: var(--nx-font-size-lg); opacity: 0.85; margin: 0 0 20px; color: inherit; } .nx-banner-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.95); color: #0b1f3a; font-weight: 700; font-size: var(--nx-font-size); padding: 11px 22px; border-radius: var(--nx-radius-button); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .nx-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } .nx-banner-media { flex-shrink: 0; max-width: 40%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; } .nx-banner-media img { max-height: 85%; width: auto; max-width: 100%; object-fit: contain; } .nx-banner-deco { position: absolute; top: 0; right: 0; width: 45%; height: 100%; background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px); z-index: 1; pointer-events: none; } .nx-banner-dots { position: absolute; bottom: 14px; left: 40px; display: flex; gap: 8px; z-index: 3; } .nx-banner-dot { width: 8px; height: 8px; border-radius: var(--nx-radius-badge); border: none; padding: 0; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: width 0.2s ease, background 0.2s ease; } .nx-banner-dot.active { width: 22px; background: #fff; } .nx-banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .nx-banner-arrow:hover { background: rgba(255, 255, 255, 0.3); } .nx-banner-prev { left: 12px; } .nx-banner-next { right: 12px; } /* Dismiss button */ .nx-banner-close { position: absolute; top: 14px; right: 18px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 20px; font-weight: 400; line-height: 24px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; } .nx-banner-close:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); } @media (max-width: 767px) { .nx-banner-slide { padding: 24px; flex-direction: column; text-align: center; min-height: 0; } .nx-banner-content { max-width: 100%; } .nx-banner-title { font-size: var(--nx-font-size-h2); } .nx-banner-media { max-width: 70%; margin-top: 16px; } .nx-banner-dots { left: 50%; transform: translateX(-50%); } .nx-banner-arrow { display: none; } } /* Breadcrumb separator override */ .breadcrumb-item + .breadcrumb-item::before { content: none !important; display: none !important; } /* Sticky Sidebar Support */ body.nx-sidebar-sticky .nx-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; } /* The collapsed modes open their submenus as flyouts beside the rail. A scroll container clips them, so they ended up stacked under the parent instead of escaping to the right — the sticky rule above set that clip after the earlier overflow:visible, so it has to be restored here. */ body.nx-sidebar-sticky.nx-sidebar-mode-compact .nx-sidebar, body.nx-sidebar-sticky.nx-sidebar-mode-icons .nx-sidebar { overflow: visible; } body.nx-sidebar-sticky .nx-sidebar::-webkit-scrollbar { width: 4px; } body.nx-sidebar-sticky .nx-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.05); border-radius: 2px; } html.nx-dark body.nx-sidebar-sticky .nx-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.05); } /* Dark Mode General Border Color Overrides */ html.nx-dark body .border, html.nx-dark body .border-top, html.nx-dark body .border-bottom, html.nx-dark body .border-left, html.nx-dark body .border-right, html.nx-dark body hr { border-color: var(--nx-border) !important; } html.nx-dark body footer.footer { border-top: 1px solid var(--nx-border); } html.nx-dark body .nx-sidebar-footer-wrapper { border-top: 1px solid var(--nx-border); } /* WHMCS Order Form Custom Styling - Nexum Theme */ #order-standard_cart, #order-nexum { padding: 0; } #order-standard_cart > .row, #order-nexum > .row { margin: 0; } @media (min-width: 992px) { #order-standard_cart > .row, #order-nexum > .row { display: flex; flex-direction: row; width: 100%; margin: 0; gap: 24px; } #order-standard_cart .cart-sidebar, #order-nexum .cart-sidebar { width: 250px !important; flex: 0 0 250px !important; padding: 0 !important; } #order-standard_cart .cart-body, #order-nexum .cart-body { flex: 1 1 0% !important; min-width: 0 !important; padding: 0 !important; } /* Targets the cart's body/sidebar split only. Content rows inside the body are ordinary Bootstrap grids and must keep their own gutters and wrapping, so anything that opts out with .nx-content-row is left alone. */ #order-standard_cart .cart-body > .row:not(.nx-content-row), #order-nexum .cart-body > .row:not(.nx-content-row) { display: flex !important; flex-direction: row !important; gap: 24px !important; margin: 0 !important; width: 100% !important; } #order-standard_cart .secondary-cart-body, #order-nexum .secondary-cart-body { flex: 1 1 0% !important; min-width: 0 !important; padding: 0 !important; } #order-standard_cart .secondary-cart-sidebar, #order-nexum .secondary-cart-sidebar { width: 300px !important; flex: 0 0 300px !important; padding: 0 !important; } } @media (max-width: 991px) { #order-standard_cart > .row, #order-nexum > .row { flex-direction: column !important; } #order-standard_cart .cart-sidebar, #order-nexum .cart-sidebar { width: 100% !important; flex: none !important; } #order-standard_cart .cart-body > .row:not(.nx-content-row), #order-nexum .cart-body > .row:not(.nx-content-row) { flex-direction: column !important; } #order-standard_cart .secondary-cart-sidebar, #order-nexum .secondary-cart-sidebar { width: 100% !important; flex: none !important; margin-top: 24px; } } /* .header-lined is the cart's own page title. It used to be hidden here because header.tpl printed a second title above it; the addon now suppresses that one for cart pages (whmp_nx_page_renders_own_head), so hiding this left the page with no heading at all. Styling for it lives in the order form stylesheet. */ #order-standard_cart .sidebar-categories-collapsed, #order-nexum .sidebar-categories-collapsed, #order-standard_cart .hidden-sm.hidden-xs, #order-nexum .hidden-sm.hidden-xs { display: none; } /* Cart inputs for the stock standard_cart markup. #order-nexum is deliberately not included: the order form stylesheet already styles those, and forcing --nx-bg here overrode its --nx-card-bg, so cart fields took the page background instead of the card background. */ #order-standard_cart .form-control { background: var(--nx-bg); border: 1px solid var(--nx-border); color: var(--nx-text); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } #order-standard_cart .form-control:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.1); } /* Style list bullet specifications inside product-info cards */ #order-standard_cart .product-info ul, #order-nexum .product-info ul { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 10px !important; padding: 0 !important; margin: 16px 0 0 !important; list-style: none !important; } #order-standard_cart .product-info li, #order-nexum .product-info li { font-size: 12.5px !important; font-weight: 600 !important; color: var(--nx-text) !important; display: flex !important; align-items: center !important; gap: 8px !important; background: var(--nx-bg) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius-md) !important; padding: 8px 12px !important; } #order-standard_cart .product-info li::before, #order-nexum .product-info li::before { font-family: 'Material Symbols Rounded'; content: "done" !important; font-size: var(--nx-font-size-xl) !important; color: var(--nx-primary) !important; } /* Payment gateway active highlights */ #order-standard_cart .gateway-card.active, #order-nexum .gateway-card.active { border: 2px solid var(--nx-primary) !important; box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.05) !important; } /* Sidebar Collapsed Mobile Selectors */ #order-standard_cart .sidebar-collapsed, #order-nexum .sidebar-collapsed { display: none !important; } @media (max-width: 991px) { #order-standard_cart .sidebar-collapsed, #order-nexum .sidebar-collapsed { display: block !important; margin-bottom: 24px !important; } } /* scripts.js fakes a sticky sidebar by animating margin-top on #orderSummary and .secondary-cart-body. It bails out only when #scrollingPanelContainer is float:none, and configureproduct.tpl renders no such element, so the guard never fires and the inline margin pushed the content column down. Sticky positioning is CSS-driven, so the margin must never apply. */ #order-standard_cart #orderSummary, #order-nexum #orderSummary, #order-standard_cart .secondary-cart-body, #order-nexum .secondary-cart-body { margin-top: 0 !important; } /* Order Summary. The cart's own stylesheet (order form custom.css) styles this panel in far more detail and loads after this file. These rules used to carry !important on every declaration, which beat that sheet outright — the heading stayed a hardcoded #171b26 bar however the cart styled it. They are kept only as the baseline for pages that render the panel without the cart stylesheet, so the !important flags are gone and the colours resolve through the tokens. */ #orderSummary { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow); overflow: hidden; margin-bottom: 24px; } #orderSummary h2 { background: var(--nx-primary); color: var(--nx-on-primary, #fff); } #orderSummary .summary-container { background: var(--nx-card-bg); color: var(--nx-text); padding: 20px; } #orderSummary .summary-container span, #orderSummary .summary-container div { color: var(--nx-text); } #orderSummary .total-due-today { background: var(--nx-bg); border-top: 1px solid var(--nx-border); padding: 15px 20px; text-align: center; } #orderSummary .total-due-today span { color: var(--nx-text); } #orderSummary .total-due-today .amt { font-size: 24px; font-weight: 800; color: var(--nx-primary); display: block; } /* Inner wrapper + the "View Cart" button area both inherit the card surface */ #orderSummary .order-summary, #orderSummary > .text-center { background: var(--nx-card-bg); color: var(--nx-text); } #orderSummary > .text-center { padding: 16px 20px; border-top: 1px solid var(--nx-border); } /* Footer Payment Method Icons */ .nx-payment-icon-pill { background: #ffffff; border: 1px solid #e4e7eb; padding: 4px 8px; border-radius: var(--nx-radius-sm); display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 36px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .nx-payment-icon-pill img { max-height: 24px; max-width: 44px; width: auto; height: auto; display: block; } .nx-payment-icon-pill svg { max-height: 24px; max-width: 44px; width: auto; height: auto; display: block; } .nx-payment-icon-pill span { font-size: 9.5px; font-weight: 700; color: #475569; text-transform: uppercase; } /* Dark Mode Payment Icons */ html.nx-dark body .nx-payment-icon-pill { background: var(--nx-card-bg); border-color: var(--nx-border); } html.nx-dark body .nx-payment-icon-pill img, html.nx-dark body .nx-payment-icon-pill svg { opacity: 0.85; } html.nx-dark body .nx-payment-icon-pill span { color: var(--nx-muted); } #orderSummary .order-summary-footer { background: var(--nx-card-bg) !important; } /* Product Grid Redesign */ .nx-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .nx-product-card { background: #ffffff; border: 1px solid #eaeff4; border-radius: 24px; padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .nx-product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(16, 24, 40, 0.06); border-color: rgba(var(--nx-primary-rgb), 0.2); } /* Featured card highlights */ .nx-product-card.featured { border-color: var(--nx-primary); box-shadow: 0 12px 30px rgba(var(--nx-primary-rgb), 0.08); } /* Diagonal Ribbon */ .nx-popular-ribbon { position: absolute; top: 15px; right: -35px; background: var(--nx-primary); color: #ffffff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 6px 40px; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 2; } /* Card Header */ .nx-card-icon-wrapper { width: 48px; height: 48px; border-radius: var(--nx-radius-md); background: rgba(var(--nx-primary-rgb), 0.06); color: var(--nx-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .nx-card-icon-wrapper span { font-size: 24px; font-variation-settings: 'FILL' 1; } .nx-product-title { font-size: 20px; font-weight: 800; color: #1e293b; margin-bottom: 8px; } .nx-product-description { font-size: var(--nx-font-size-md); color: #64748b; line-height: 1.5; margin-bottom: 20px; } /* Badges list */ .nx-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .nx-card-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--nx-primary-rgb), 0.06); color: var(--nx-primary); padding: 6px 12px; border-radius: var(--nx-radius-card); font-size: var(--nx-font-size-sm); font-weight: 700; } /* Specs List */ .nx-card-specs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; flex-grow: 1; } .nx-spec-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; line-height: 1.4; } .nx-spec-left { display: flex; align-items: center; gap: 8px; color: #64748b; font-weight: 600; } .nx-spec-left span.chk { font-family: 'Material Symbols Rounded'; font-size: var(--nx-font-size-xl); color: var(--nx-primary); background: rgba(var(--nx-primary-rgb), 0.06); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; } .nx-spec-right { color: #1e293b; font-weight: 700; } /* Pricing & Button */ .nx-card-footer { border-top: 1px solid #eaeff4; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; } .nx-price-lbl { font-size: var(--nx-font-size-sm); font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .nx-price-amt { font-size: 28px; font-weight: 800; color: #0f172a; line-height: 1.1; } .nx-price-cycle { font-size: var(--nx-font-size-sm); font-weight: 600; color: #64748b; margin-top: 4px; } /* Buttons */ .nx-btn-order { width: 100%; padding: 14px; border-radius: var(--nx-radius-md); font-size: var(--nx-font-size); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; text-decoration: none; } .nx-btn-order.filled { background: var(--nx-primary); color: #ffffff !important; border: none; box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.15); } .nx-btn-order.filled:hover { background: var(--nx-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--nx-primary-rgb), 0.25); } .nx-btn-order.outline { background: transparent; color: var(--nx-primary) !important; border: 1.5px solid rgba(var(--nx-primary-rgb), 0.15); } .nx-btn-order.outline:hover { background: rgba(var(--nx-primary-rgb), 0.04); border-color: var(--nx-primary); transform: translateY(-1px); } /* Dark Mode Overrides */ html.nx-dark body .nx-product-card { background: var(--nx-card-bg); border-color: var(--nx-border); } html.nx-dark body .nx-product-card:hover { border-color: rgba(var(--nx-primary-rgb), 0.3); } html.nx-dark body .nx-product-card.featured { border-color: var(--nx-primary); } html.nx-dark body .nx-product-title { color: var(--nx-text); } html.nx-dark body .nx-product-description { color: var(--nx-muted); } html.nx-dark body .nx-spec-left { color: var(--nx-muted); } html.nx-dark body .nx-spec-right { color: var(--nx-text); } html.nx-dark body .nx-card-footer { border-top-color: var(--nx-border); } html.nx-dark body .nx-price-amt { color: var(--nx-text); } html.nx-dark body .nx-price-cycle { color: var(--nx-muted); } html.nx-dark body .nx-btn-order.outline { color: var(--nx-primary); border-color: rgba(var(--nx-primary-rgb), 0.3); } html.nx-dark body .nx-btn-order.outline:hover { background: rgba(var(--nx-primary-rgb), 0.1); border-color: var(--nx-primary); } /* Centered Specs Layout */ .nx-centered-specs { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; margin-bottom: 28px; } .nx-centered-spec-row { font-size: var(--nx-font-size-lg); line-height: 1.4; } .nx-centered-spec-val { font-weight: 800; color: #1e293b; margin-right: 4px; } .nx-centered-spec-key { font-weight: 400; color: #64748b; } html.nx-dark body .nx-centered-spec-val { color: var(--nx-text); } html.nx-dark body .nx-centered-spec-key { color: var(--nx-muted); } /* Cart column layout lives in the order form stylesheet (templates/orderforms/nexum/css/custom.css), which loads after this file and scopes its rules to #order-nexum. A duplicate set here only competed with it. */ /* Left Aligned Specs Layout */ .nx-left-specs { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; justify-content: flex-start; text-align: left; margin-bottom: 28px; width: 100%; } .nx-left-spec-row { font-size: var(--nx-font-size-lg); line-height: 1.4; display: flex; align-items: center; gap: 6px; width: 100%; } .nx-left-spec-val { font-weight: 800; color: #1e293b; } .nx-left-spec-key { font-weight: 400; color: #64748b; } html.nx-dark body .nx-left-spec-val { color: var(--nx-text); } html.nx-dark body .nx-left-spec-key { color: var(--nx-muted); } /* Custom Select Dropdown Styling */ .nx-custom-select-wrapper { position: relative; display: inline-block; width: 100%; } .nx-custom-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; padding: 0 16px; font-size: var(--nx-font-size-md); font-weight: 600; color: var(--nx-text); background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input, 10px); cursor: pointer; text-align: left; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .nx-custom-select-trigger:hover, .nx-custom-select-wrapper.open .nx-custom-select-trigger { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.1); } .nx-custom-select-trigger i { font-size: var(--nx-font-size-xs); color: var(--nx-muted); transition: transform 0.2s ease; } .nx-custom-select-wrapper.open .nx-custom-select-trigger i { transform: rotate(180deg); } .nx-custom-select-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; display: none; list-style: none; padding: 6px; margin: 0; background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); z-index: 1000; max-height: 240px; overflow-y: auto; } .nx-custom-select-option { padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--nx-text); border-radius: var(--nx-radius-sm); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; margin: 0; list-style: none; } .nx-custom-select-option:hover { background: rgba(var(--nx-primary-rgb), 0.05); color: var(--nx-primary); } /* A full primary fill made the chosen row a loud bar across the list. A tint plus the brand colour on the label marks it just as clearly and keeps the list readable. */ .nx-custom-select-option.selected { background: rgba(var(--nx-primary-rgb), .10); color: var(--nx-primary); font-weight: 700; } .nx-custom-select-option.selected:hover { background: rgba(var(--nx-primary-rgb), .16); } /* Global Styling Alignments for Fallback Templates */ body.nx-theme .card, body.nx-theme .panel { background-color: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 16px); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } body.nx-theme .card-header, body.nx-theme .panel-heading { background-color: transparent; border-bottom: 1px solid var(--nx-border); color: var(--nx-text); font-weight: 800; } body.nx-theme .card-footer, body.nx-theme .panel-footer { background-color: transparent; border-top: 1px solid var(--nx-border); } body.nx-theme .table { color: var(--nx-text); } body.nx-theme .table th { border-bottom: 2px solid var(--nx-border); color: var(--nx-muted); font-weight: 800; text-transform: uppercase; font-size: var(--nx-font-size-xs); letter-spacing: 0.5px; } body.nx-theme .table td { border-top: 1px solid var(--nx-border); color: var(--nx-text); font-size: var(--nx-font-size-md); } body.nx-theme .list-group-item { background-color: var(--nx-card-bg); border: 1px solid var(--nx-border); color: var(--nx-text); } body.nx-theme .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 20px; } body.nx-theme .breadcrumb-item a { color: var(--nx-muted); text-decoration: none; } body.nx-theme .breadcrumb-item.active { color: var(--nx-primary); font-weight: 600; } body.nx-theme .alert { border-radius: var(--nx-radius-button, 10px); } /* ================================================================== Nexum — Reusable Component Layer Design-system primitives used across ALL client-area pages so the structure and styling stay constant & consistent. Prefer these classes over inline styles in .tpl files. ================================================================== */ /* ---------- Page head + breadcrumb ---------- */ .nx-page-head { margin-bottom: var(--nx-card-gap); } .nx-page-head .nx-page-title { font-size: 28px; font-weight: 800; color: var(--nx-text); letter-spacing: -0.5px; margin: 0; line-height: 1.2; } .nx-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--nx-font-size-md); font-weight: 500; color: var(--nx-muted); margin-top: 6px; padding: 0; list-style: none; } .nx-breadcrumb a { color: var(--nx-muted); text-decoration: none; transition: color .15s ease; } .nx-breadcrumb a:hover { color: var(--nx-primary); } .nx-breadcrumb .nx-crumb-sep { color: var(--nx-border); font-weight: 600; } .nx-breadcrumb .active, .nx-breadcrumb li:last-child { color: var(--nx-primary); font-weight: 600; } /* ---------- Card ---------- */ .nx-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04)); overflow: hidden; } .nx-card + .nx-card { margin-top: 22px; } .nx-card-pad { padding: var(--nx-card-padding, 22px); } .nx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--nx-border); } .nx-card-head h1, .nx-card-head h2, .nx-card-head h3, .nx-card-head h4, .nx-card-head h5, .nx-card-title { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--nx-text); } .nx-card-body { padding: 22px; } /* ---------- Stat tiles ---------- */ .nx-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 24px; } .nx-stat-tile { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04)); padding: 22px; } .nx-stat-tile .nx-stat-tile-label { font-size: var(--nx-font-size-md); font-weight: 700; color: var(--nx-muted); } .nx-stat-tile .nx-stat-tile-value { font-size: 32px; font-weight: 800; color: var(--nx-text); letter-spacing: -1px; margin-top: 8px; line-height: 1.1; } .nx-stat-tile .nx-stat-tile-hint { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 600; margin-top: 4px; } .nx-stat-tile.nx-stat-accent { background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-primary-hover) 100%); border: none; color: #fff; } .nx-stat-tile.nx-stat-accent .nx-stat-tile-label, .nx-stat-tile.nx-stat-accent .nx-stat-tile-value, .nx-stat-tile.nx-stat-accent .nx-stat-tile-hint { color: #fff; opacity: .96; } /* ---------- Tables ---------- */ .nx-table { width: 100%; margin: 0; border-collapse: collapse; } .nx-table thead th { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--nx-muted); padding: 14px 18px; border: none; border-bottom: 1px solid var(--nx-border); background: rgba(0,0,0,0.015); text-align: left; } .nx-table tbody td { padding: 14px 18px; border: none; border-bottom: 1px solid var(--nx-border); font-size: var(--nx-font-size); color: var(--nx-text); vertical-align: middle; } .nx-table tbody tr:last-child td { border-bottom: none; } .nx-table tbody tr { transition: background .12s ease; } .nx-table tbody tr:hover { background: rgba(var(--nx-primary-rgb), 0.03); } .nx-table .nx-td-strong { font-weight: 700; } .nx-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Bootstrap 5 / utility classes used in the markup that this Bootstrap 4.5 build does not ship, so they resolved to nothing. */ body.nx-theme .min-w-0 { min-width: 0; } body.nx-theme .gap-2 { gap: var(--nx-space-2); } body.nx-theme .gap-3 { gap: var(--nx-space-3); } /* A .table-responsive is a block, but inside a flex column it still reports its table's intrinsic width unless it is allowed to shrink. Without this the services table widened the whole main column. */ body.nx-theme .nx-content-container > .table-responsive, body.nx-theme .nx-prods-table-card > .table-responsive, body.nx-theme .nx-card > .table-responsive { max-width: 100%; } /* ---------- Badges / status pills ---------- */ .nx-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 11px; border-radius: var(--nx-radius-badge, 999px); font-size: var(--nx-font-size-sm); font-weight: 700; line-height: 1.4; white-space: nowrap; background: rgba(var(--nx-secondary-rgb), .1); color: var(--nx-secondary); } .nx-badge-active, .nx-badge-paid, .nx-badge-completed { background: var(--nx-pill-active-bg); color: var(--nx-pill-active-text); } .nx-badge-pending, .nx-badge-draft { background: var(--nx-pill-pending-bg); color: var(--nx-pill-pending-text); } .nx-badge-suspended, .nx-badge-overdue { background: var(--nx-pill-suspended-bg); color: var(--nx-pill-suspended-text); } .nx-badge-cancelled, .nx-badge-unpaid, .nx-badge-terminated, .nx-badge-fraud, .nx-badge-refunded { background: var(--nx-pill-cancelled-bg); color: var(--nx-pill-cancelled-text); } .nx-badge-open { background: var(--nx-pill-open-bg); color: var(--nx-pill-open-text); } .nx-badge-answered, .nx-badge-customer-reply { background: var(--nx-pill-answered-bg); color: var(--nx-pill-answered-text); } .nx-badge-closed { background: var(--nx-pill-closed-bg); color: var(--nx-pill-closed-text); } /* ---------- Buttons ---------- */ .nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: var(--nx-font-size-md); line-height: 1; padding: 11px 18px; border-radius: var(--nx-radius-button, 11px); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; text-transform: var(--nx-btn-transform, none); } .nx-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .25); } .nx-btn-primary { background: var(--nx-primary); color: #fff; } .nx-btn-primary:hover { background: var(--nx-primary-hover); } .nx-btn-outline { background: var(--nx-card-bg); color: var(--nx-text); border-color: var(--nx-border); } .nx-btn-outline:hover { border-color: var(--nx-primary); color: var(--nx-primary); } .nx-btn-danger { background: var(--nx-danger); color: #fff; } .nx-btn-success { background: var(--nx-success); color: #fff; } .nx-btn-ghost { background: transparent; color: var(--nx-primary); padding-left: 4px; padding-right: 4px; } .nx-btn-sm { padding: 7px 13px; font-size: 12.5px; } .nx-btn-lg { padding: 14px 24px; font-size: var(--nx-font-size-lg); } .nx-btn-block { width: 100%; } /* ---------- Forms ---------- */ .nx-form-group { margin-bottom: 18px; } .nx-form-label { display: block; font-size: 13px; font-weight: 700; color: var(--nx-text); margin-bottom: 7px; } .nx-form-control, body.nx-theme .form-control { width: 100%; height: 44px; padding: 0 14px; background: var(--nx-card-bg); color: var(--nx-text); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input, 11px); font-size: var(--nx-font-size); transition: border-color .15s ease, box-shadow .15s ease; } textarea.nx-form-control, body.nx-theme textarea.form-control { height: auto; padding: 12px 14px; min-height: 110px; } .nx-form-control:focus, body.nx-theme .form-control:focus { outline: none; border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .15); } .nx-form-hint { font-size: var(--nx-font-size-sm); color: var(--nx-muted); margin-top: 6px; } /* Respect the OS "reduce motion" setting. Transitions and the hover-lift are decorative, so they are dropped rather than shortened. */ @media (prefers-reduced-motion: reduce) { body.nx-theme *, body.nx-theme *::before, body.nx-theme *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } body.nx-theme.nx-hover-lift .card:hover, body.nx-theme.nx-hover-lift .tile:hover { transform: none; } } /* Focus rings for controls that set outline:none without offering any replacement -- keyboard users had no way to tell where they were. The bare inputs sit inside a styled wrapper, so the ring goes on the wrapper. */ body.nx-theme .nx-mp-select:focus-visible, body.nx-theme .nx-pmm-input:focus-visible, body.nx-theme .nx-af-field:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 1px; } /* Inputs that sit inside a styled wrapper carry no ring of their own -- the wrapper shows focus instead, so the highlight follows its rounded shape rather than drawing a square outline around the bare field. */ body.nx-theme .nx-doms-search-input:focus, body.nx-theme .nx-doms-search-input:focus-visible, body.nx-theme .nx-hp-domain-input:focus, body.nx-theme .nx-hp-domain-input:focus-visible, body.nx-theme .nx-pmm-iginput:focus, body.nx-theme .nx-pmm-iginput:focus-visible { outline: none; box-shadow: none; } body.nx-theme .nx-doms-search-box:focus-within, body.nx-theme .nx-hp-domain-inputwrap:focus-within { box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.25); } /* Icon baseline. Material Symbols and Font Awesome are both in use (290 vs 83 occurrences); neither had a shared rule, so an icon whose component did not set a size fell back to 24px and sat on the text baseline. This aligns both families to the surrounding text without changing any deliberate sizing. */ /* No font-size here on purpose: components set their own, and a body-scoped rule (0,0,2,1) would outrank selectors like .nx-kb-cat-ico .material-symbols- rounded (0,0,2,0) and flatten every deliberate size. */ .material-symbols-rounded { line-height: 1; vertical-align: middle; flex-shrink: 0; user-select: none; } .nx-theme .fas, .nx-theme .far, .nx-theme .fab { line-height: 1; vertical-align: middle; } /* Baseline for every checkbox and radio. accent-color alone only recolours the checked fill — the unchecked box keeps the browser's white background, which reads as a bright square on dark. Drawing the control from scratch puts its background on the theme token instead. */ body.nx-theme input[type="checkbox"], body.nx-theme input[type="radio"] { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; flex-shrink: 0; background: var(--nx-card-bg); border: 1.5px solid var(--nx-border); box-shadow: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; display: inline-grid; place-content: center; vertical-align: middle; } body.nx-theme input[type="radio"] { border-radius: 50%; } body.nx-theme input[type="checkbox"] { border-radius: 5px; } body.nx-theme input[type="radio"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; transform: scale(0); transition: transform .15s ease; background: var(--nx-on-primary, #fff); } body.nx-theme input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .15s ease; background: var(--nx-on-primary, #fff); clip-path: polygon(14% 44%, 0 65%, 39% 100%, 100% 16%, 80% 0%, 39% 62%); } body.nx-theme input[type="checkbox"]:checked, body.nx-theme input[type="radio"]:checked { background: var(--nx-primary); border-color: var(--nx-primary); } body.nx-theme input[type="checkbox"]:checked::before, body.nx-theme input[type="radio"]:checked::before { transform: scale(1); } body.nx-theme input[type="checkbox"]:hover:not(:checked), body.nx-theme input[type="radio"]:hover:not(:checked) { border-color: rgba(var(--nx-primary-rgb), .5); } body.nx-theme input[type="checkbox"]:focus-visible, body.nx-theme input[type="radio"]:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; } body.nx-theme input[type="checkbox"]:disabled, body.nx-theme input[type="radio"]:disabled { opacity: .5; cursor: default; } /* Bootstrap pulls .form-check-input out of flow with position:absolute and a negative margin, which parked the box underneath its own label text. The theme lays these out with flex/grid, so keep them in flow. */ body.nx-theme .form-check-input { position: static; margin-left: 0; } /* Inside a real .form-check wrapper Bootstrap's hanging indent is intentional. */ body.nx-theme .form-check > .form-check-input { position: absolute; margin-left: -1.25rem; } /* ---------- Toggle switch ---------- */ /* Used by autorenew.tpl and clientareadomains.tpl. Previously defined in a