/* Sidebar menu icon alignment */ .navbar-vertical .navbar-nav .dropdown-menu .dropdown-item i { width: 1.25rem; text-align: center; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; } /* Font Size Customizer */ [data-bs-theme-font-size="small"], [data-theme-font-size="small"] { --tblr-body-font-size: 0.8125rem; /* ~13px */ } [data-bs-theme-font-size="medium"], [data-theme-font-size="medium"] { --tblr-body-font-size: 0.875rem; /* ~14px (default) */ } [data-bs-theme-font-size="large"], [data-theme-font-size="large"] { --tblr-body-font-size: 1rem; /* ~16px */ } /* Custom Vertical Sidebar Width Override (Default was 15rem / 240px, increased to 18rem / 288px) */ @media (min-width: 992px) { .navbar-vertical.navbar-expand-lg { width: 18rem !important; } .navbar-vertical.navbar-expand-lg ~ .page-wrapper, .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-inline-start: 18rem !important; margin-left: 18rem !important; } .navbar-vertical.navbar-expand-lg ~ .navbar, .navbar-expand-lg.navbar-vertical ~ .navbar { margin-inline-start: 18rem !important; margin-left: 18rem !important; } } /* The customer and card-distributor sidebars carry the operator's company name as a text brand. The vendor sets white-space: nowrap on .navbar-brand, so a long name ran out past the aside into the page instead of wrapping inside it. */ .navbar-vertical .navbar-brand { white-space: normal; overflow-wrap: anywhere; min-width: 0; } /* Responsive Navbar adjustments for Mobile View (collapsed sidebar view, screen width < 992px) */ @media (max-width: 991.98px) { /* Make the navbar container wrap items and add vertical gap */ .navbar .container-xl { flex-wrap: wrap !important; gap: 0.75rem !important; } /* Row 1 & 2: Navbar nav (info & user dropdown) stretches full width and lays out vertically in reverse */ .navbar .navbar-nav.order-md-last { width: 100% !important; display: flex !important; flex-direction: column-reverse !important; align-items: center !important; order: -1 !important; gap: 0.5rem !important; } /* Row 3: Search form stretches full width and displays at the bottom */ .navbar form[role="search"] { width: 100% !important; order: 1 !important; margin: 0 !important; } .navbar form[role="search"] .input-icon, .navbar form[role="search"] .form-control { width: 100% !important; } } /* -------------------------------------------------------------------------- * Tabler 1.5.0: keep BOTH the vertical sidebar and the top navbar * -------------------------------------------------------------------------- * 1.5.0 made the two navbars mutually exclusive. core/scss/layout/_navbar.scss * hides the aside on any page that also renders a horizontal navbar: * * html:not([data-bs-navbar-position='vertical']) * .page:has(> [class*='navbar-expand']:not(.navbar-vertical)) > .navbar-vertical { display: none } * * ...and setting data-bs-navbar-position="vertical" hides the horizontal one instead. The operator * layout renders both on purpose — the aside is the navigation, the header carries the account * balance, support ticket link, global search and the user menu — so neither branch of the vendor * rule fits it. This restores the aside plus the --tblr-sidebar-width its siblings offset against, * which the vendor rule zeroes out when it hides the aside. * * Operator layout only: the customer and card-distributor layouts render the aside alone, so the * vendor's :has() guard never fires there. Matching the vendor selector exactly means source order * decides, and custom.css is loaded after tabler.min.css. */ html:not([data-bs-navbar-position='vertical']) .page:has(> .navbar-vertical):has(> [class*='navbar-expand']:not(.navbar-vertical)) > .navbar-vertical { display: flex; } html:not([data-bs-navbar-position='vertical']) .page:has(> .navbar-vertical):has(> [class*='navbar-expand']:not(.navbar-vertical)) > .navbar, html:not([data-bs-navbar-position='vertical']) .page:has(> .navbar-vertical):has(> [class*='navbar-expand']:not(.navbar-vertical)) > .page-wrapper { --tblr-sidebar-width: 18rem; } /* -------------------------------------------------------------------------- * Typography: the vendor default * -------------------------------------------------------------------------- * 1.5.0 stopped bundling a webfont - tabler.min.css carries zero @font-face rules and starts * --tblr-font-sans-serif at system-ui. The 1.5.0 upgrade carried the 1.4 Geist faces forward here * so the upgrade would not silently restyle every panel; that has now been dropped deliberately in * favour of the vendor's system-font stack, and public/themes/tabler140/fonts/ was deleted with it. * * Nothing overrides --tblr-font-sans-serif or --tblr-font-monospace any more. To go back to Geist, * restore the font files and re-add the @font-face block plus a :root override - see the 1.5.0 * upgrade commit (c1620abd4) for the exact declarations. */ /* -------------------------------------------------------------------------- * Tabler 1.5.0: colour fallback for browsers without light-dark() * -------------------------------------------------------------------------- * 1.4.0 declared its themed colours concretely - the light values on * `:root,[data-bs-theme=light]` and the dark ones on `[data-bs-theme=dark]`. 1.5.0 collapsed both * halves into `light-dark()` on `:root` alone; the `[data-bs-theme=dark]` block now carries only * `color-scheme:dark` and a handful of `*-rgb` values. * * `light-dark()` is Chrome 123 / Firefox 120 / Safari 17.5 (the vendor's own .browserslistrc names * that floor). Windows 7 caps Chrome at 109, so there every one of those variables substitutes an * unknown function and becomes invalid at computed-value time. * * That is what blanks the sidebar. It renders as