/* * site.css — PathToMarket global overrides * * Font selection: set --tblr-font-family-sans-serif to whichever * Google Font is loaded in the layout. Comment/uncomment to switch. * * The layout loads both Inter and Nunito from Google Fonts. * Comment out one of the @import lines in _Layout.cshtml / _AdminLayout.cshtml, * then set the corresponding variable here. */ :root { /* Inter — Tabler's recommended font */ --tblr-font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Nunito — uncomment to switch */ /* --tblr-font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */ } /* * Icon size override. * Our layouts use the Tabler Icons font (), not inline SVGs. * The .ti rule in tabler-icons.min.css sets no font-size, so icons inherit the * body font size (~14px). Set explicitly to 1.25rem (20px) to match the Tabler * demo site. The .icon rule below handles any inline SVG icons should we ever * use them. */ .ti { font-size: 1.25rem; vertical-align: text-bottom; } .icon { --tblr-icon-size: 1.25rem; } /* ============================================================================= Tenant Admin sidebar colour — dark blue to distinguish from global admin Applied via .navbar-theme-blue on the
in _AdminLayout.cshtml ============================================================================= */ .navbar-theme-blue { --tblr-navbar-bg: #2d4678; --tblr-navbar-color: rgba(255, 255, 255, 0.75); --tblr-navbar-hover-color: #fff; --tblr-navbar-active-color: #fff; --tblr-navbar-brand-color: #fff; --tblr-navbar-border-color: rgba(255, 255, 255, 0.1); background-color: #2d4678 !important; } /* ============================================================================= Desktop sidebar collapse Toggled by adding .navbar-collapsed to . On large screens only — mobile uses Bootstrap's existing toggler. ============================================================================= */ /* The collapse toggle sits at the very bottom of the sidebar */ .navbar-collapse-btn { display: none; /* hidden on mobile — mobile uses the navbar-toggler */ width: 100%; padding: .5rem 1rem; background: transparent; border: none; border-top: 1px solid var(--tblr-navbar-border-color, rgba(255, 255, 255, .1)); color: var(--tblr-navbar-color, rgba(255, 255, 255, .75)); text-align: left; cursor: pointer; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; transition: color .15s; } .navbar-collapse-btn:hover { color: var(--tblr-navbar-hover-color, #fff); } @media (min-width: 992px) { .navbar-collapse-btn { display: flex; align-items: center; gap: .5rem; } /* ---- Collapsed state ---- */ body.navbar-collapsed .navbar.navbar-vertical.navbar-expand-lg { width: 3.5rem; overflow-x: visible; /* allow tooltips to escape the sidebar */ overflow-y: auto; } /* * Override Tabler's automatic margin-left: 15rem on .page-wrapper. * The header is inside .page-wrapper so it shifts along for free. */ body.navbar-collapsed .navbar.navbar-vertical.navbar-expand-lg ~ .page-wrapper { margin-left: 3.5rem; } /* Hide text labels, section headings, and the tenant indicator */ body.navbar-collapsed .navbar-vertical .nav-link-title, body.navbar-collapsed .navbar-vertical .navbar-section-label, body.navbar-collapsed .navbar-vertical .tenant-indicator, body.navbar-collapsed .navbar-vertical .navbar-section-divider, body.navbar-collapsed .navbar-collapse-btn .collapse-label { display: none; } /* Centre nav links when icon-only */ body.navbar-collapsed .navbar-vertical .nav-link { justify-content: center; padding-left: 0; padding-right: 0; } /* Centre the collapse button chevron */ body.navbar-collapsed .navbar-vertical .navbar-collapse-btn { justify-content: center; } /* Rotate the chevron to indicate direction when collapsed */ body.navbar-collapsed .navbar-collapse-btn .ti-chevron-left { transform: rotate(180deg); } .navbar-collapse-btn .ti-chevron-left { transition: transform .25s; flex-shrink: 0; } /* Always allow vertical scroll on the sidebar if content overflows */ .navbar.navbar-vertical.navbar-expand-lg { overflow-y: auto; } /* Smooth width/margin transitions */ .navbar.navbar-vertical.navbar-expand-lg { transition: width .25s ease; } .page-wrapper { transition: margin-left .25s ease; } } /* ============================================================================= /app/ area — dual-row top nav ============================================================================= */ /* * Row 2 (nav links) gets a bottom border from Tabler's .border-bottom class, * but nothing visually separates it from Row 1 above. Add a subtle top border * so the two rows read as distinct bands rather than one merged block. */ .app-nav-row { border-top: 1px solid var(--tblr-border-color, rgba(101, 109, 119, .16)); } /* ============================================================================= Toast notifications (HTMX OOB swap) ============================================================================= */ #toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1090; /* above modals (1050) and Tabler navbar (1030) */ display: flex; flex-direction: column; gap: .5rem; min-width: 18rem; max-width: 24rem; pointer-events: none; /* let clicks pass through the empty container */ } #toast-container .ptm-toast { pointer-events: all; box-shadow: var(--tblr-box-shadow-lg, 0 .5rem 1rem rgba(0,0,0,.15)); animation: ptm-toast-in .2s ease; } @keyframes ptm-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================= Validation summary ASP.NET tag helpers always render the div; hide it when there are no errors. ============================================================================= */ .validation-summary-valid { display: none !important; } /* ============================================================================= Dark / light mode toggle icons Show/hide based on data-bs-theme on . The JS sets this attribute; the inline