/* ============================================================================ Origami navigation skins (version-gated) Activated by a class on

set from the nav JSON "version" property in Pages/Shared/Components/Navigation/Default.cshtml: 5.0 -> .nav-skin-a (minimal accent) 5.5 -> .nav-skin-b (soft pill) 6.0 -> .nav-skin-d (grouped cards) Version 4.5 (or anything else) adds no class, so the original theme is left completely untouched. All rules below are scoped under .nav-skin*. ============================================================================ */ :root { --nav-skin-bg: #ffffff; --nav-skin-text: #1f2733; --nav-skin-text-strong: #0f1622; --nav-skin-muted: #6b7280; --nav-skin-email: #4b5563; --nav-skin-icon: #7a8699; --nav-skin-pull-icon: #ffffff; --nav-skin-hover: #f2f4f7; --nav-skin-border: #e6e8ec; --nav-skin-accent: #2E75B6; --nav-skin-active-bg: #e9f2fb; --nav-skin-active-text: #0c447c; /* Style E (v6.5): dimmed inactive items so the active one stands out */ --nav-skin-inactive: #6b7280; --nav-skin-inactive-icon: #a3abb8; } /* The Pace progress bar is attached to , not the sidebar, so gate it from a common ancestor (body) rather than .page-sidebar. */ body:has(.nav-menu.nav-skin) .pace .pace-progress { background: var(--nav-skin-bg) !important; } body:has(.nav-menu.nav-skin) .pace-active .pace-progress { background: var(--nav-skin-border) !important; } /* Page header: drop the drop-shadow, keep a simple bottom border */ body:has(.nav-menu.nav-skin) .page-header { -webkit-box-shadow: none !important; box-shadow: none !important; border-bottom: 1px solid var(--nav-skin-border) !important; } /* ---- Whiten the sidebar chrome only when a skin is active (uses :has) ---- */ .page-sidebar:has(.nav-menu.nav-skin), .page-sidebar:has(.nav-menu.nav-skin) .primary-nav { background-color: var(--nav-skin-bg) !important; } .page-sidebar:has(.nav-menu.nav-skin) { border-right: 1px solid var(--nav-skin-border); } /* The menu owns a clean, thin vertical scrollbar */ .page-sidebar:has(.nav-menu.nav-skin) .primary-nav, .nav-menu.nav-skin { scrollbar-width: thin; scrollbar-color: #c4c9d2 transparent; overflow-y: auto; } .page-sidebar:has(.nav-menu.nav-skin) .primary-nav::-webkit-scrollbar, .nav-menu.nav-skin::-webkit-scrollbar { width: 8px; } .page-sidebar:has(.nav-menu.nav-skin) .primary-nav::-webkit-scrollbar-thumb, .nav-menu.nav-skin::-webkit-scrollbar-thumb { background: #c4c9d2; border-radius: 8px; } .page-sidebar:has(.nav-menu.nav-skin) .primary-nav::-webkit-scrollbar-thumb:hover, .nav-menu.nav-skin::-webkit-scrollbar-thumb:hover { background: #aab1bd; } .page-sidebar:has(.nav-menu.nav-skin) .primary-nav::-webkit-scrollbar-track, .nav-menu.nav-skin::-webkit-scrollbar-track { background: transparent; } /* ---- Shared: white surface, black text, neutral icons, light hover ---- */ .nav-menu.nav-skin { background-color: var(--nav-skin-bg); } .nav-menu.nav-skin li > ul { background-color: transparent; } .nav-menu.nav-skin li a { color: var(--nav-skin-text) !important; font-weight: 400; } .nav-menu.nav-skin li a > [class*='fa-'], .nav-menu.nav-skin li a > [class*='bi-'], .nav-menu.nav-skin li a > .ni { color: var(--nav-skin-icon) !important; font-size: 1rem !important; } .nav-menu.nav-skin li a:hover { background-color: var(--nav-skin-hover) !important; color: var(--nav-skin-text-strong) !important; } .nav-menu.nav-skin li a:hover > [class*='fa-'], .nav-menu.nav-skin li a:hover > .ni { color: var(--nav-skin-accent) !important; } /* An expanded (open) parent stays dark-text, not white */ .nav-menu.nav-skin li.open > a { color: var(--nav-skin-text-strong) !important; } /* Tighter, consistent link spacing */ .nav-menu.nav-skin li a { padding: 0.75rem 1.0rem 0.5rem 0.5rem !important; } .nav-menu.nav-skin li > ul li a { padding: 0.5rem 1rem 0.5rem 1rem !important; } /* Submenu container: subtle tint + tighter vertical padding */ .nav-menu.nav-skin li > ul { /*background-color: rgba(0, 0, 0, 0.1) !important;*/ padding-top: 2px !important; padding-bottom: 2px !important; } /* Keep the small "selected" arrow glyph on-theme */ .nav-menu.nav-skin li.active:not(.open) > a:before { color: #24b3a4 !important; } /* ============================ Style A — minimal accent =================== */ .nav-menu.nav-skin-a li.active > a { background-color: var(--nav-skin-active-bg) !important; color: var(--nav-skin-active-text) !important; font-weight: 300 !important; -webkit-box-shadow: inset 3px 0 0 var(--nav-skin-accent) !important; box-shadow: inset 3px 0 0 var(--nav-skin-accent) !important; } .nav-menu.nav-skin-a li.active > a > [class*='fa-'], .nav-menu.nav-skin-a li.active > a > .ni { color: var(--nav-skin-accent) !important; } /* ============================ Style B — soft pill ======================= */ .nav-menu.nav-skin-b li a { margin: 2px 12px; border-radius: 12px; padding-top: 0.6rem; padding-bottom: 0.6rem; } .nav-menu.nav-skin-b li.active > a { background-color: var(--nav-skin-active-bg) !important; color: var(--nav-skin-active-text) !important; font-weight: 300 !important; border-radius: 12px; -webkit-box-shadow: none !important; box-shadow: none !important; } .nav-menu.nav-skin-b li.active > a > [class*='fa-'], .nav-menu.nav-skin-b li.active > a > .ni { color: var(--nav-skin-accent) !important; } /* The base theme shows an active "dot" (a:before, \f413) pinned to the right edge — the same spot as the expand/collapse caret — so on PARENT items (those with a submenu) it overlaps the caret. Hide it for parents only; leaf and sub nav items keep the indicator. */ .nav-menu.nav-skin-b li.active:has(> ul) > a:before { content: none !important; display: none !important; } /* ============================ Style D — grouped cards =================== */ .nav-menu.nav-skin-d > li { margin: 6px 12px; border: 1px solid var(--nav-skin-border); border-radius: 8px; overflow: hidden; } .nav-menu.nav-skin-d > li.active, .nav-menu.nav-skin-d > li.open { border-color: #cdd9e6; } .nav-menu.nav-skin-d li.active > a { background-color: var(--nav-skin-active-bg) !important; color: var(--nav-skin-active-text) !important; font-weight: 300 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .nav-menu.nav-skin-d li.active > a > [class*='fa-'], .nav-menu.nav-skin-d li.active > a > .ni { color: var(--nav-skin-accent) !important; } /* ==================== Style E — soft pill, dimmed inactive (v6.5) ========= */ /* Same soft-pill look as Style B, but INACTIVE items, sub-items and their icons are a lighter dark-grey so the ACTIVE item clearly stands out. Active styling matches Style B. Style B (5.5) is left untouched. */ /* Pill geometry (same as Style B) */ .nav-menu.nav-skin-e li a { margin: 2px 12px; border-radius: 12px; padding-top: 0.6rem; padding-bottom: 0.6rem; } /* Inactive links: dimmed grey text (top-level + nested) */ .nav-menu.nav-skin-e li a, .nav-menu.nav-skin-e li > ul li a { color: var(--nav-skin-inactive) !important; font-weight: 400; } /* Inactive icons: even lighter grey (top-level + nested) */ .nav-menu.nav-skin-e li a > [class*='fa-'], .nav-menu.nav-skin-e li a > [class*='bi-'], .nav-menu.nav-skin-e li a > .ni, .nav-menu.nav-skin-e li > ul li a > [class*='fa-'], .nav-menu.nav-skin-e li > ul li a > .ni { color: var(--nav-skin-inactive-icon) !important; } /* Hover: darken text toward strong, icon toward accent */ .nav-menu.nav-skin-e li a:hover { background-color: var(--nav-skin-hover) !important; color: var(--nav-skin-text-strong) !important; } .nav-menu.nav-skin-e li a:hover > [class*='fa-'], .nav-menu.nav-skin-e li a:hover > .ni { color: var(--nav-skin-accent) !important; } /* When a group is OPEN, the whole branch — the group header PLUS every sub-item and icon in its tree — turns strong/black, so the open section clearly stands out from the dimmed (grey) closed groups. */ .nav-menu.nav-skin-e li.open > a, .nav-menu.nav-skin-e li.open > ul li a { color: var(--nav-skin-text-strong) !important; } .nav-menu.nav-skin-e li.open > a > [class*='fa-'], .nav-menu.nav-skin-e li.open > a > [class*='bi-'], .nav-menu.nav-skin-e li.open > a > .ni, .nav-menu.nav-skin-e li.open > ul li a > [class*='fa-'], .nav-menu.nav-skin-e li.open > ul li a > .ni { color: var(--nav-skin-text-strong) !important; } /* Active leaf (current page): soft-pill highlight; text + icon stay black so the open branch keeps one uniform colour. Group headers (items that own a submenu) are excluded from the pill — they use the open/black treatment above instead. */ .nav-menu.nav-skin-e li.active:not(:has(> ul)) > a { background-color: var(--nav-skin-active-bg) !important; color: var(--nav-skin-text-strong) !important; font-weight: 500 !important; border-radius: 12px; -webkit-box-shadow: none !important; box-shadow: none !important; } .nav-menu.nav-skin-e li.active:not(:has(> ul)) > a > [class*='fa-'], .nav-menu.nav-skin-e li.active:not(:has(> ul)) > a > [class*='bi-'], .nav-menu.nav-skin-e li.active:not(:has(> ul)) > a > .ni { color: var(--nav-skin-text-strong) !important; } /* Hide the active "dot" on parent items (overlaps the caret), same as Style B */ .nav-menu.nav-skin-e li.active:has(> ul) > a:before { content: none !important; display: none !important; } /* ============================================================================ Sidebar chrome on a white sidebar (logo / filter / footer) Applied to all three skins, gated by an active .nav-skin on the menu. ============================================================================ */ /* ---- Logo ---- */ .page-sidebar:has(.nav-menu.nav-skin) .page-logo { background-color: var(--nav-skin-bg) !important; border-bottom: 1px solid var(--nav-skin-border); -webkit-box-shadow: none !important; box-shadow: none !important; } .page-sidebar:has(.nav-menu.nav-skin) .page-logo .page-logo-text { color: var(--nav-skin-text-strong) !important; } /* The faint subscript next to the app name (originally .text-white) */ .page-sidebar:has(.nav-menu.nav-skin) .page-logo .text-white { color: var(--nav-skin-muted) !important; } .page-sidebar:has(.nav-menu.nav-skin) .page-logo [class*='color-primary-'] { color: var(--nav-skin-muted) !important; } /* App-name version label — hidden by default (v4.5), shown only on the new skins */ .app-asset-version { display: none; } .page-sidebar:has(.nav-menu.nav-skin) .page-logo .app-asset-version { display: inline-block; font-size: 0.6875rem; font-weight: 600; line-height: 1; padding: 2px 6px; margin-left: 4px; border-radius: 10px; color: var(--nav-skin-accent) !important; background-color: var(--nav-skin-active-bg); } /* ---- User card (white, black name, dark-grey email) ---- */ .page-sidebar:has(.nav-menu.nav-skin) .info-card { background-color: var(--nav-skin-bg) !important; border-bottom: 1px solid var(--nav-skin-border); height: 6.0rem !important; padding: 0 0.5rem; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .cover { display: none !important; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .info-card-text, .page-sidebar:has(.nav-menu.nav-skin) .info-card .info-card-text * { text-shadow: none !important; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .info-card-text a, .page-sidebar:has(.nav-menu.nav-skin) .info-card .info-card-text a span { color: var(--nav-skin-text-strong) !important; font-size: 12px !important; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .info-card-text a span.text-truncate-sm, .page-sidebar:has(.nav-menu.nav-skin) .info-card .info-card-text > span.text-truncate-sm { max-width: 150px !important; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .info-card-text > span { color: var(--nav-skin-email) !important; font-size: 11px !important; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .pull-trigger-btn { background: #ffffff; border: 1px solid var(--nav-skin-border); -webkit-box-shadow: none !important; box-shadow: none !important; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .pull-trigger-btn, .page-sidebar:has(.nav-menu.nav-skin) .info-card .pull-trigger-btn > i { color: var(--nav-skin-icon) !important; } .page-sidebar:has(.nav-menu.nav-skin) .info-card .profile-image { width: 2.75rem; height: auto; display: inline-block; z-index: 2; position: relative; } /* ---- Menu filter input ---- */ .page-sidebar:has(.nav-menu.nav-skin) .nav-filter input.form-control { background-color: #f5f6f8 !important; border: 1px solid var(--nav-skin-border) !important; color: var(--nav-skin-text) !important; } .page-sidebar:has(.nav-menu.nav-skin) .nav-filter input.form-control::-webkit-input-placeholder { color: var(--nav-skin-muted) !important; } .page-sidebar:has(.nav-menu.nav-skin) .nav-filter input.form-control::placeholder { color: var(--nav-skin-muted) !important; } /* ---- Footer (minify toggle + quick buttons) ---- */ .page-sidebar:has(.nav-menu.nav-skin) .nav-footer { background-color: var(--nav-skin-bg) !important; border-top: 1px solid var(--nav-skin-border); -webkit-box-shadow: none !important; box-shadow: none !important; } .page-sidebar:has(.nav-menu.nav-skin) .nav-footer a, .page-sidebar:has(.nav-menu.nav-skin) .nav-footer a > i, .page-sidebar:has(.nav-menu.nav-skin) .nav-footer .ni { color: var(--nav-skin-icon) !important; } .page-sidebar:has(.nav-menu.nav-skin) .nav-footer a:hover, .page-sidebar:has(.nav-menu.nav-skin) .nav-footer a:hover > i { color: var(--nav-skin-accent) !important; } /* ============================================================================ Own scrollbar — pin the sidebar to the viewport height so the navigation region scrolls inside itself instead of growing the page. Desktop only; mobile keeps the default off-canvas behavior. ============================================================================ */ @media (min-width: 992px) { .page-sidebar:has(.nav-menu.nav-skin) { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; max-height: 100vh; -ms-flex-item-align: start; align-self: flex-start; } /* Logo and footer stay fixed at top/bottom */ .page-sidebar:has(.nav-menu.nav-skin) .page-logo, .page-sidebar:has(.nav-menu.nav-skin) .nav-footer { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; background: #fff; width: 100% } /* The nav region fills the remaining height as a column but does NOT scroll itself */ .page-sidebar:has(.nav-menu.nav-skin) .primary-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Filter box, user card and filter message stay pinned (no scroll) */ .page-sidebar:has(.nav-menu.nav-skin) .primary-nav > .nav-filter, .page-sidebar:has(.nav-menu.nav-skin) .primary-nav > .info-card, .page-sidebar:has(.nav-menu.nav-skin) .primary-nav > .filter-message { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } /* Only the menu list scrolls, with its own scrollbar */ .page-sidebar:has(.nav-menu.nav-skin) .primary-nav > .nav-menu.nav-skin { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } } /* ============================================================================ Remove the SmartAdmin submenu hierarchy decoration (connector line + bullet dots) for the new skins only. Version 4.5 keeps them. ============================================================================ */ .nav-menu.nav-skin li > ul:before { content: none !important; display: none !important; border: 0 !important; } .nav-menu.nav-skin li > ul > li a:after, .nav-menu.nav-skin li > ul li a:after { content: none !important; display: none !important; }