/* Navigation menu drawer styles for Mini variant with OpenMiniOnHover */ /* MudBlazor handles the expand/collapse behavior - we just add smooth transitions */ /* ============================================================ Glass nav menu — Design D ("Glass Cohesion") A floating panel, not an edge-attached drawer. Three elements, each doing one job: .nav-menu-drawer the

. Transparent; exists only to position. .mud-drawer-content transparent padding — the gutter that holds the panel off the viewport edge. Do not paint it. .drawer-nav-content THE PANEL. Blue gradient + blur, white rim, 18px radius. What it blurs is the BODY GRADIENT (utilities.css). That works only because the gradient is on : MudBlazor margin-lefts .mud-main-content by the drawer width, so if the ground lived there, the strip behind this fixed drawer would be white — and blurring a flat colour returns that colour, giving a flat white slab. If this panel ever renders flat, check the body gradient before touching anything here. Never `filter: drop-shadow` — filter establishes a containing block, so the panel's own backdrop-filter would sample an empty backdrop and render flat. box-shadow only. Web host never stamps .mud-theme-dark on the drawer. defex-theme-dark USED to go on the content container only, which is why this file long carried no dark variants — one would never have matched, and the menu rendered as a white slab in dark mode. It is now ALSO stamped on .mud-layout (MainLayout.razor), which contains the drawer, so the dark token block at the end of this section does match. Still write `.defex-theme-dark`, never `.mud-theme-dark`. ============================================================ */ /* Design D values. The menu is one of D's three genuinely glass surfaces: a floating panel inset from the viewport edge, blurring the page gradient behind it. */ .nav-menu-drawer { --nav-glass-fill: linear-gradient(180deg, rgba(219, 231, 250, 0.92) 0%, rgba(233, 240, 252, 0.86) 38%, rgba(248, 250, 254, 0.92) 100%); --nav-glass-edge: rgba(255, 255, 255, 0.75); --nav-glass-shadow: 0 16px 44px rgba(15, 23, 43, 0.12); --nav-link-fg: #1c2740; --nav-link-fg-hover: #0f172a; --nav-link-fg-sub: #4a5878; --nav-icon-fg: #3d4d6d; --nav-caret-fg: rgba(28, 39, 64, 0.35); --nav-hover-bg: rgba(255, 255, 255, 0.62); /* D's active state is a WHITE pill, not the blue gradient of the previous pass — the menu is already blue, so a blue selection had nothing to sit against. */ --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #0f172a; --nav-rule: rgba(15, 23, 43, 0.08); --nav-scrollbar: rgba(15, 23, 43, 0.18); /* The search well: a pill carved into the panel. */ --nav-inset-fill: rgba(255, 255, 255, 0.72); --nav-inset-edge: rgba(255, 255, 255, 0.90); /* The favourites star is the ONE place the menu earns an accent hue. --mud-palette-primary is a near-black navy here, and D's active pill is deliberately white, so neither reads as "starred" against the outline stars. DEFEX cobalt is the brand value and carries against the panel's pale blue. */ --nav-fav-fg: #1747E8; } /* Dark counterpart. Same panel, same structure — only the values move, so every rule below this point is written once and works in both themes. Descendant selector, not `.defex-theme-dark.nav-menu-drawer`: the marker lands on .mud-layout, and the drawer is its descendant, not the marked element itself. */ .defex-theme-dark .nav-menu-drawer { /* Top-to-bottom the light fill goes pale blue → near white. Dark inverts the DIRECTION as well as the values: it starts darkest at the top, under the appbar, and lifts toward the bottom, so the panel still reads as catching light from the page rather than as a flat navy rectangle. */ --nav-glass-fill: linear-gradient(180deg, rgba(19, 31, 53, 0.92) 0%, rgba(23, 37, 62, 0.88) 38%, rgba(29, 45, 74, 0.92) 100%); /* A white rim at 0.75 would be a hard glare line on a dark panel; the edge is the same idea at a tenth of the strength. */ --nav-glass-edge: rgba(255, 255, 255, 0.10); --nav-glass-shadow: 0 16px 44px rgba(0, 0, 0, 0.45); --nav-link-fg: #D7E0F0; --nav-link-fg-hover: #F8FAFC; --nav-link-fg-sub: #96A6C4; --nav-icon-fg: #A9B8D6; --nav-caret-fg: rgba(215, 224, 240, 0.40); --nav-hover-bg: rgba(255, 255, 255, 0.07); /* D's active state is a white pill against a pale panel. The dark equivalent is the same gesture — the selected row is the lightest thing in the menu — but a literal white pill blows out against this panel, so it is white at low alpha instead. */ --nav-active-bg: rgba(255, 255, 255, 0.13); --nav-active-fg: #F8FAFC; --nav-rule: rgba(255, 255, 255, 0.09); --nav-scrollbar: rgba(255, 255, 255, 0.18); /* The search well inverts too: carved INTO a dark panel means a lighter recess is wrong, so the well is a low-alpha white film with a slightly brighter lip. */ --nav-inset-fill: rgba(255, 255, 255, 0.06); --nav-inset-edge: rgba(255, 255, 255, 0.12); /* Brand cobalt #1747E8 is too dark to carry against this panel — the star would read as another outline icon. Lifted to the tint that keeps the same hue at dark-mode luminance. */ --nav-fav-fg: #5B8CFF; } .nav-menu-drawer { transition: width 0.2s ease-in-out; } /* Force MudLayout to ignore drawer width changes when in mini mode */ /* Override the layout's margin calculation */ .mud-layout:has(.nav-menu-drawer.mud-drawer-mini.mud-drawer--open) .mud-main-content, .mud-layout:has(.nav-menu-drawer.mud-drawer-mini.mud-drawer--open) .mud-appbar.mud-appbar-fixed-left { margin-left: 56px !important; transition: margin-left 0.2s ease-in-out !important; } /* Add shadow to drawer when expanded (hover on desktop, tap-open .rail-open on tablet) */ .nav-menu-drawer.mud-drawer-mini:hover, .nav-menu-drawer.mud-drawer-mini.rail-open { /* Deepen the panel's own cast while it's floating over content, rather than shadowing the transparent aside — see the box-shadow: none note below. */ box-shadow: none !important; } .nav-menu-drawer.mud-drawer-mini:hover .drawer-nav-content, .nav-menu-drawer.mud-drawer-mini.rail-open .drawer-nav-content { box-shadow: 0 20px 52px rgba(15, 23, 43, 0.18); } /* Tablet rail dismiss scrim: sits below the drawer (z 1300) and above content so a tap outside the tap-expanded menu collapses it back to the icon rail. */ .rail-dismiss-scrim { position: fixed; inset: 0; z-index: 1250; /* Lighter than the old near-black: that value was calibrated against a navy drawer. */ background: rgba(15, 23, 42, 0.25); } /* Give drawer higher z-index to overlay content */ .nav-menu-drawer.mud-drawer-mini { z-index: 1300 !important; } /* Drawer content layout - pin button at bottom */ .drawer-content-wrapper { display: flex; flex-direction: column; height: 100%; /* Anchors the floating pin button below. */ position: relative; } /* The pin USED to float over the panel's lower edge in its own .drawer-pin-button wrapper. It now renders inside NavMenu's .nav-footer-toggles row (passed down from MainLayout as a RenderFragment), so there is no absolute positioning and no 44px footer clearance to leave for it. The old rules are gone; .pin-button below still styles the button itself. */ .drawer-nav-content { flex: 1; overflow: hidden; } .nav-menu-drawer .mud-drawer-content { transition: width 0.2s ease-in-out; overflow-x: hidden; } /* Ensure text doesn't wrap awkwardly during transitions */ .nav-menu-drawer .mud-nav-link-text { white-space: nowrap; overflow: hidden; } /* Recent items: reduce card footprint and keep wrapping labels readable */ .nav-menu-root .nav-recent-item, .nav-menu-drawer .nav-recent-item { gap: 0.55rem !important; padding: 0.35rem 0.6rem !important; padding-left: 0.2rem !important; min-height: 0 !important; } .nav-menu-root .nav-recent-item .mud-nav-link-text, .nav-menu-drawer .nav-recent-item .mud-nav-link-text { display: flex !important; align-items: flex-start; gap: 0.5rem; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-wrap: break-word; flex: 1; min-width: 0; font-size: 0.78rem !important; line-height: 1.3 !important; } /* Keep dot aligned to first line of text */ .nav-menu-root .nav-recent-item .navigator-icon-container, .nav-menu-drawer .nav-recent-item .navigator-icon-container { flex-shrink: 0; margin-top: 4px; } .nav-menu-drawer { transition: width 0.2s ease-in-out; background: transparent !important; border-right: none !important; /* No shadow on the

itself — it is a transparent positioning box, and a shadow here would trace a full-height rectangle around the floating panel inside it. The panel casts its own (--nav-glass-shadow). utilities.css excludes this element from its blanket `aside` shadow rule for the same reason. */ box-shadow: none !important; } /* THE INSET GUTTER. Transparent — the local bloom wash that used to live here is gone, because the body gradient now runs the full viewport width BEHIND this fixed drawer, so the pane below has the real page ground to sample. Painting a wash here as well would put an opaque layer between the pane and the gradient it is meant to be showing. The padding is load-bearing: it is what holds the floating panel off the viewport edge. The RIGHT side is 0 on purpose: the drawer box ends where the content column begins, so the 16px gap between this panel and the page header is supplied by the header's own ml-4. Adding padding here as well would double it. TOP is 16, not 20, and that 4px is not a typo. The drawer and the content column hang off DIFFERENT baselines: MudDrawer positions itself at --mud-appbar-height (64px), while .mud-main-content pads by --app-bar-offset (60px) because the bar's true rendered height is ~4px less than the theme variable claims (see the note at utilities.css:726). The page header sits 20px below its 60px baseline; matching it means sitting 16px below the 64px one. Fix the baseline discrepancy and this should go back to 20. */ .nav-menu-drawer .mud-drawer-content { transition: width 0.2s ease-in-out; overflow-x: hidden; padding: 16px 0 20px 20px; background: transparent; } /* DEAD RULES — .nav-menu-shell / .nav-menu-header are not emitted by any .razor or .cs in AI.Client; leftovers from a previous drawer design. Left on their old navy values deliberately rather than half-converted, so nobody mistakes them for the live surface. The live chain is .mud-drawer-content (gutter) → .drawer-nav-content (panel). */ .nav-menu-shell { display: flex; flex-direction: column; min-height: 100%; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(51, 65, 85, 0.7); border-radius: 28px; box-shadow: 0 22px 48px rgba(2, 6, 23, 0.45); overflow: hidden; } .nav-menu-header { padding: 14px 12px 8px; border-bottom: 1px solid rgba(51, 65, 85, 0.55); background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.82)); } .nav-menu-search { margin: 0 !important; } .nav-menu-search .mud-input-control > .mud-input-control-input-container > .mud-input-root, .nav-menu-search .mud-input-root { background: transparent !important; } /* THE WELL goes on .mud-input — the wrapper that contains the adornment as well as the text. NOT on .mud-input-slot: despite the name that class is on the ELEMENT itself, which starts after the search icon (measured: wrapper [21,89,238,42], input [67,89,192,42]). Style the slot and the well begins to the right of the magnifier, leaving the icon outside it. Also clears the opaque --mud-palette-surface fill that utilities.css:278 puts on every outlined input's slot, which otherwise stacks a second white on the sticky strip's white. */ .nav-menu-search .mud-input.mud-input-outlined { background-color: var(--nav-inset-fill); border: 1px solid var(--nav-inset-edge); /* A pill, per Design D. (An earlier pass used 12px to match the panel radius; D's own language puts the search on a pill and the rows on 9px, so follow the design.) */ border-radius: var(--defex-radius-pill); box-shadow: inset 0 1px 2px rgba(15, 23, 43, 0.04); min-height: 42px; } .nav-menu-search .mud-input.mud-input-outlined .mud-input-slot, .nav-menu-search .mud-input-slot { background-color: transparent !important; border: none; border-radius: 0; box-shadow: none; } .nav-menu-search input { color: var(--nav-link-fg) !important; } .nav-menu-search input::placeholder { color: var(--nav-link-fg-sub) !important; opacity: 0.8; } .nav-menu-search input:focus { outline: none !important; box-shadow: none !important; } .nav-menu-search .mud-input-root.mud-input-focus, .nav-menu-search .mud-input-root:focus-within { outline: none !important; box-shadow: none !important; } .nav-menu-search .mud-input-root.mud-input-focus fieldset, .nav-menu-search .mud-input-root:focus-within fieldset { border-color: transparent !important; box-shadow: none !important; } /* Focus lives on the well, not the (transparent) outlined fieldset: the field brightens and picks up a soft blue ring tied to the active-pill blue. */ .nav-menu-search .mud-input.mud-input-outlined:focus-within, .nav-menu-search .mud-input.mud-input-outlined.mud-input-focused { background-color: rgba(255, 255, 255, 0.92); border-color: rgba(21, 93, 252, 0.45); box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.12); } .nav-menu-scroll { flex: 1; overflow-y: auto; padding: 12px 10px; scrollbar-width: thin; scrollbar-color: var(--nav-scrollbar) transparent; } .nav-menu-scroll::-webkit-scrollbar { width: 4px; } .nav-menu-scroll::-webkit-scrollbar-thumb { background: var(--nav-scrollbar); border-radius: 999px; } .nav-menu-root { background: transparent; } .nav-menu-root > .mud-nav-item > .mud-nav-link, .nav-menu-root > .mud-nav-link, .nav-menu-root > .mud-nav-group > .mud-nav-link, .nav-footer-link { margin: 0 0 4px; padding: 11px 14px; min-height: 48px; border-radius: var(--defex-radius-nav); color: var(--nav-link-fg) !important; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .nav-menu-root > .mud-nav-item > .mud-nav-link, .nav-menu-root > .mud-nav-link, .nav-menu-root > .mud-nav-item > .mud-nav-link .mud-nav-link-text, .nav-menu-root > .mud-nav-link .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link .mud-icon-root, .nav-menu-root > .mud-nav-link .mud-icon-root, .nav-menu-root > .mud-nav-group > .mud-nav-link, .nav-menu-root > .mud-nav-group > .mud-nav-link .mud-nav-link-text, .nav-menu-root > .mud-nav-group > .mud-nav-link .mud-icon-root { color: var(--nav-link-fg) !important; } /* Fallback: MudNavMenu may wrap items (e.g. in mud-list-item), so top-level links can miss the child selector. Use descendant selector to ensure consistent color. Nested links in .mud-collapse-container override with --nav-link-fg-sub via a more specific rule. */ .nav-menu-root .mud-nav-link, .nav-menu-root .mud-nav-link .mud-nav-link-text, .nav-menu-root .mud-nav-link .mud-icon-root { color: var(--nav-link-fg) !important; } /* Design D colours the leading GLYPH a step back from the label, so the icon column reads as texture and the words carry the hierarchy. Scoped to the first icon: the trailing caret has its own (lighter still) colour below, and .nav-active must keep its own. */ .nav-menu-root .mud-nav-link:not(.active):not(.nav-active) .mud-icon-root:first-child { color: var(--nav-icon-fg) !important; } .nav-menu-root .mud-nav-link .mud-nav-link-text { font-weight: 500; } .nav-menu-root > .mud-nav-item > .mud-nav-link:hover, .nav-menu-root > .mud-nav-link:hover, .nav-menu-root > .mud-nav-item > .mud-nav-link:hover .mud-nav-link-text, .nav-menu-root > .mud-nav-link:hover .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link:hover .mud-icon-root, .nav-menu-root > .mud-nav-link:hover .mud-icon-root, .nav-menu-root > .mud-nav-group > .mud-nav-link:hover, .nav-menu-root > .mud-nav-group > .mud-nav-link:hover .mud-nav-link-text, .nav-menu-root > .mud-nav-group > .mud-nav-link:hover .mud-icon-root { color: var(--nav-link-fg-hover) !important; } .nav-menu-root > .mud-nav-item > .mud-nav-link:not(.nav-active):not(.active), .nav-menu-root > .mud-nav-link:not(.nav-active):not(.active), .nav-menu-root > .mud-nav-item > .mud-nav-link:not(.nav-active):not(.active) .mud-nav-link-text, .nav-menu-root > .mud-nav-link:not(.nav-active):not(.active) .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link:not(.nav-active):not(.active) .mud-icon-root, .nav-menu-root > .mud-nav-link:not(.nav-active):not(.active) .mud-icon-root { color: var(--nav-link-fg) !important; opacity: 0.96; } .nav-menu-root > .mud-nav-group > .mud-nav-link { display: flex !important; align-items: center; } .nav-menu-root > .mud-nav-group > .mud-nav-link .mud-icon-root:last-child { margin-left: auto; font-size: 0.95rem !important; color: var(--nav-caret-fg) !important; opacity: 1; transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease; } .nav-menu-root > .mud-nav-group > .mud-nav-link:hover .mud-icon-root:last-child, .nav-menu-root > .mud-nav-group.mud-nav-group-expanded > .mud-nav-link .mud-icon-root:last-child { color: var(--nav-link-fg-hover) !important; opacity: 1; } .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link { margin: 2px 0 2px 18px; padding: 8px 12px 8px 18px; border-radius: var(--defex-radius-nav); color: var(--nav-link-fg-sub) !important; min-height: 38px; } .nav-recent-section-header { color: var(--nav-link-fg-sub) !important; } .nav-menu-root .mud-nav-link:hover, .nav-menu-root .mud-nav-group > .mud-nav-link:hover, .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link:hover, .nav-footer-link:hover { /* The inset hairline gives the hovered row its own glass edge, so it reads as a lens lifting off the pane rather than a grey smear across it. */ background: var(--nav-hover-bg) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.50); color: var(--nav-link-fg-hover) !important; transform: none; } .nav-menu-root .mud-nav-link .mud-nav-link-text, .nav-menu-root .mud-nav-group .mud-nav-link .mud-nav-link-text, .nav-footer-link .mud-nav-link-text { font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em; } .nav-menu-search .mud-input-outlined-border { border-color: transparent !important; } .nav-menu-search .mud-input-adornment, .nav-menu-search .mud-input-adornment .mud-icon-root, .nav-menu-search .mud-input-adornment-start, .nav-menu-search .mud-input-adornment-start .mud-icon-root, .nav-menu-search .mud-input-adornment-end, .nav-menu-search .mud-input-adornment-end .mud-icon-root, .nav-menu-search .mud-input-adornment-end .mud-icon-button .mud-icon-root, .nav-menu-search .mud-input-clear-button, .nav-menu-search .mud-input-clear-button .mud-icon-root { color: var(--nav-link-fg) !important; opacity: 0.72; } .nav-menu-search:hover .mud-input-outlined-border, .nav-menu-search.mud-input-control.mud-input-control-margin-dense .mud-input-outlined:hover .mud-input-outlined-border, .nav-menu-search .mud-input-root.mud-input-root-outlined:hover .mud-input-outlined-border, .nav-menu-search .mud-input-root.mud-input-root-outlined.mud-input-focused .mud-input-outlined-border { border-color: transparent !important; } /* THE PANEL. Design D's floating glass menu, blurring the page gradient behind the drawer. The saturate() is part of the recipe, not decoration — it keeps the blue reading as blue after the blur washes it out. */ .drawer-nav-content { padding: 0; background: var(--nav-glass-fill); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--nav-glass-edge); border-radius: var(--defex-radius-panel); box-shadow: var(--nav-glass-shadow); /* overflow: hidden already set above — it is what clips the scrolling nav list to the panel's radius, so don't remove it there. */ } .nav-menu-container { display: flex; flex-direction: column; height: 100%; } .nav-menu-container > .nav-menu-root { flex: 1; overflow-y: auto; overflow-x: hidden; /* No top padding: the sticky search supplies its own, so it pins flush without jumping */ padding-top: 0; scrollbar-width: thin; scrollbar-color: var(--nav-scrollbar) transparent; } .nav-menu-container > .nav-menu-root::-webkit-scrollbar { width: 4px; } .nav-menu-container > .nav-menu-root::-webkit-scrollbar-thumb { background: var(--nav-scrollbar); border-radius: 999px; } .nav-menu-sticky-footer { flex-shrink: 0; padding: 0 10px 12px; } .nav-menu-root { display: flex; flex-direction: column; min-height: unset; padding: 14px 10px 12px; background: transparent; border: none; border-radius: 0; box-shadow: none; } .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active:hover, .nav-menu-root > .mud-nav-link.nav-active:hover, .nav-menu-root > .mud-nav-group .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-group .mud-nav-link.nav-active:hover { border-radius: var(--defex-radius-nav) !important; } .nav-menu-root { justify-content: flex-start !important; align-items: stretch; } .nav-menu-root > * { flex: 0 0 auto; } /* Keep the menu search pinned to the top of the scrolling nav list */ .nav-menu-root > .mud-input-control { position: sticky; top: 0; z-index: 2; margin: 0 2px 10px !important; padding: 12px 0 10px; /* Denser than the pane on purpose: this strip is sticky over the scrolling list, so it has to mask links passing underneath it. Its own blur keeps it reading as glass. Kept below the pane's brightest stop so the inset well inside it still reads recessed. */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .nav-menu-search { margin: 0 !important; } /* Keep every rule on the pane faint. A dark hairline over translucent glass reads as a seam cutting the pane rather than an edge drawn within it. */ .nav-menu-root > .mud-divider { margin: 14px 10px !important; border-color: var(--nav-rule) !important; } /* .nav-footer-link retired: the drawer footer is now the .nav-footer-toggles icon pair, not a labelled nav row. Its remaining appearances in the shared selector lists above are inert. */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-search { display: none; } .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link .mud-nav-link-text, .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link .mud-icon-root { font-size: 0.82rem; font-weight: 500; color: var(--nav-link-fg-sub) !important; } .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active:hover, .nav-menu-root > .mud-nav-link.nav-active:hover, .nav-menu-root .mud-nav-group .mud-nav-link.nav-active, .nav-menu-root .mud-nav-group .mud-nav-link.nav-active:hover, .nav-menu-root > .mud-nav-item > .mud-nav-link.active, .nav-menu-root > .mud-nav-link.active, .nav-menu-root > .mud-nav-item > .mud-nav-link.active:hover, .nav-menu-root > .mud-nav-link.active:hover, .nav-menu-root .mud-nav-group .mud-nav-link.active, .nav-menu-root .mud-nav-group .mud-nav-link.active:hover, .nav-active, .nav-active:hover, .nav-menu-root .mud-nav-link.active { background: var(--nav-active-bg) !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; box-shadow: 0 2px 6px rgba(15, 23, 43, 0.06); color: var(--nav-active-fg) !important; opacity: 1 !important; } .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active .mud-nav-link-text, .nav-menu-root > .mud-nav-link.nav-active .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active .mud-icon-root, .nav-menu-root > .mud-nav-link.nav-active .mud-icon-root, .nav-menu-root .mud-nav-group .mud-nav-link.nav-active .mud-nav-link-text, .nav-menu-root .mud-nav-group .mud-nav-link.nav-active .mud-icon-root, .nav-menu-root > .mud-nav-item > .mud-nav-link.active .mud-nav-link-text, .nav-menu-root > .mud-nav-link.active .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link.active .mud-icon-root, .nav-menu-root > .mud-nav-link.active .mud-icon-root, .nav-menu-root .mud-nav-group .mud-nav-link.active .mud-nav-link-text, .nav-menu-root .mud-nav-group .mud-nav-link.active .mud-icon-root, .nav-active .mud-nav-link-text, .nav-active .mud-icon-root, .nav-active .mud-typography, .nav-active i, .nav-menu-root .mud-nav-link.active .mud-nav-link-text, .nav-menu-root .mud-nav-link.active .mud-icon-root, .nav-menu-root .mud-nav-link.active .mud-typography, .nav-menu-root .mud-nav-link.active i { background: transparent !important; color: var(--nav-active-fg) !important; opacity: 1 !important; } .nav-menu-section-divider { height: 1px; margin: 16px 10px; background: linear-gradient(90deg, transparent, var(--nav-rule), transparent); } .nav-menu-footer { padding: 10px; border-top: 1px solid var(--nav-rule); background: rgba(255, 255, 255, 0.55); } /* The pin was a floating glass chip (own blur, pill radius) back when it sat on the wash BELOW the pane. It now sits IN the pane, first in the footer's button row, so it takes the same .nav-footer-toggle well as the favourites/recents filters — three matching controls rather than a pill next to two squares. Nothing else in the web app targets .pin-button. */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-header, .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-footer, .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-section-divider { display: none; } .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-shell { border-radius: 22px; } /* === Mini mode (collapsed) styles === */ /* Reduce drawer content padding so icons have room */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .mud-drawer-content { padding: 4px 0 !important; } /* Collapsed rail. The panel KEEPS its glass fill and blur here and only squares off — at 56px there is no room for an inset gutter, and the radius would clip the icons. Do not strip the fill as well: the wash that used to back this element is gone (the page gradient replaced it), so a transparent rail would leave the icons floating on bare page with no surface under them at all. */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .drawer-nav-content { border: none; border-right: 1px solid var(--nav-glass-edge); border-radius: 0; box-shadow: 1px 0 20px rgba(15, 23, 43, 0.06); } .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-container { background: transparent; border: none; border-radius: 0; box-shadow: none; } /* Reduce nav-menu-root padding */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-root { padding: 4px 0 !important; } /* Center icons in collapsed links. Both shapes must be listed: MudNavLink wraps its in a .mud-nav-item div, MudNavGroup does not — a rule written only for the direct-child form silently skips every plain top-level link (Home), leaving its icon left-aligned while the section icons centre. */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-root > .mud-nav-item > .mud-nav-link, .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-root > .mud-nav-link, .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-root > .mud-nav-group > .mud-nav-link { display: flex !important; align-items: center; justify-content: center; padding: 8px 0 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; margin: 2px 4px !important; /* MudNavGroup renders its header link with width:100% inside a plain block wrapper, so the 4px side margins overflow it by 8px and shift the centred icon 4px right; the MudNavLink form nests in a flex .mud-nav-item wrapper that does subtract them. Pin the width explicitly so both shapes span the same box and their icons centre on the same axis. Do NOT use width:auto — in the flex wrapper that shrinks the pill to the icon. */ width: calc(100% - 8px) !important; min-height: 40px; border-radius: 10px; text-align: center; } /* Hide all link text in mini mode */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .mud-nav-link-text { display: none !important; } /* Reset icon margins in mini mode so icons center correctly */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .mud-nav-link .mud-icon-root { margin: 0 !important; padding: 0 !important; flex-shrink: 0; } /* Hide the sticky footer in mini mode */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .nav-menu-sticky-footer { display: none; } /* Hide caret/arrow icons on parent groups when in mini mode */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .mud-nav-group > .mud-nav-link .mud-icon-root:last-child { display: none; } /* Hide all group children when in mini mode (not hovered) */ .nav-menu-drawer.mud-drawer-mini:not(:hover):not(.rail-open) .mud-collapse-container { display: none !important; height: 0 !important; overflow: hidden !important; } /* === Expanded mode (hovered) styles === */ /* Show carets when drawer is expanded (hover on desktop, tap-open .rail-open on tablet) */ .nav-menu-drawer.mud-drawer-mini:hover .mud-nav-group > .mud-nav-link .mud-icon-root:last-child, .nav-menu-drawer.mud-drawer-mini.rail-open .mud-nav-group > .mud-nav-link .mud-icon-root:last-child { display: inline-flex; } /* Final nav color normalization */ .nav-menu-root > .mud-nav-item > .mud-nav-link:not(.active):not(.nav-active), .nav-menu-root > .mud-nav-link:not(.active):not(.nav-active), .nav-menu-root > .mud-nav-item > .mud-nav-link:not(.active):not(.nav-active) .mud-nav-link-text, .nav-menu-root > .mud-nav-link:not(.active):not(.nav-active) .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link:not(.active):not(.nav-active) .mud-icon-root, .nav-menu-root > .mud-nav-link:not(.active):not(.nav-active) .mud-icon-root { color: var(--nav-link-fg) !important; opacity: 1 !important; } .nav-menu-root > .mud-nav-item > .mud-nav-link.active, .nav-menu-root > .mud-nav-link.active, .nav-menu-root > .mud-nav-item > .mud-nav-link.active:hover, .nav-menu-root > .mud-nav-link.active:hover, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active:hover, .nav-menu-root > .mud-nav-link.nav-active:hover { background: var(--nav-active-bg) !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: var(--defex-radius-nav) !important; box-shadow: 0 2px 6px rgba(15, 23, 43, 0.06); color: var(--nav-active-fg) !important; opacity: 1 !important; } .nav-menu-root > .mud-nav-item > .mud-nav-link.active .mud-nav-link-text, .nav-menu-root > .mud-nav-link.active .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link.active .mud-icon-root, .nav-menu-root > .mud-nav-link.active .mud-icon-root, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active .mud-nav-link-text, .nav-menu-root > .mud-nav-link.nav-active .mud-nav-link-text, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active .mud-icon-root, .nav-menu-root > .mud-nav-link.nav-active .mud-icon-root { color: var(--nav-active-fg) !important; background: transparent !important; opacity: 1 !important; } .nav-menu-root > .mud-nav-item > .mud-nav-link.active, .nav-menu-root > .mud-nav-link.active, .nav-menu-root > .mud-nav-item > .mud-nav-link.active:hover, .nav-menu-root > .mud-nav-link.active:hover, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-link.nav-active, .nav-menu-root > .mud-nav-item > .mud-nav-link.nav-active:hover, .nav-menu-root > .mud-nav-link.nav-active:hover, .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link.active, .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link.active:hover, .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link.nav-active, .nav-menu-root .mud-nav-group .mud-collapse-container .mud-nav-link.nav-active:hover { border-radius: var(--defex-radius-nav) !important; overflow: hidden !important; clip-path: inset(0 round 14px); } .nav-white { color: var(--mud-palette-drawer-text) !important; } /* When drawer is hovered, allow normal MudBlazor expand/collapse behavior */ /* Don't force hide - let MudBlazor's classes control visibility */ /* "Under construction" marker on a nav item — muted amber wrench icon */ .nav-menu-root .nav-under-construction { color: #f59e0b !important; opacity: 0.85; font-size: 1rem !important; height: 1rem !important; width: 1rem !important; flex: 0 0 auto; align-self: center; } /* --------------------------------------------------------------------------- Nav favourites --------------------------------------------------------------------------- */ /* The footer row: pin first, then the two icon-only filters (star = favourites, clock = recents). The filters each replace the whole menu body, so they read as a pair of mutually exclusive lenses on the same list. Centred as a group under the menu body. */ .nav-footer-toggles { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 0; padding-top: 10px; border-top: 1px solid var(--nav-rule); } .nav-menu-root .nav-footer-toggle, .nav-footer-toggle { width: 36px; height: 36px; border-radius: var(--defex-radius-nav); background: var(--nav-inset-fill); border: 1px solid var(--nav-inset-edge); color: var(--nav-link-fg-sub) !important; } .nav-footer-toggle:hover { background: var(--nav-hover-bg); color: var(--nav-link-fg-hover) !important; } /* On = the filter is applied. Primary ink on a lifted inset, so it reads as pressed rather than merely hovered. */ .nav-footer-toggle.nav-footer-toggle--on, .nav-footer-toggle.nav-footer-toggle--on .mud-icon-root { color: var(--nav-fav-fg) !important; } .nav-footer-toggle.nav-footer-toggle--on { background: var(--nav-hover-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.50); } /* Favourites-only list: the rows are a short, self-contained set, so they sit tighter than the full menu's 4px-gapped top-level links (same idea as .nav-recent-item). */ .nav-menu-root .mud-nav-link.nav-fav-item, .nav-menu-root .mud-nav-item > .mud-nav-link.nav-fav-item { margin-bottom: 0; min-height: 40px; padding-top: 7px; padding-bottom: 7px; } /* The trailing star on a nav row. .mud-nav-link-text is the flex track the label lives in, so margin-left:auto pushes the star to the right edge (same trick as .nav-recent-item above). */ .nav-menu-root .mud-nav-link .mud-nav-link-text, .nav-menu-root .mud-nav-group .mud-nav-link .mud-nav-link-text { display: flex; align-items: center; gap: 0.25rem; } .nav-fav-star { margin-left: auto; display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px; border-radius: 4px; color: var(--nav-link-fg-sub); opacity: 0; transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } /* Reveal on row hover, and on keyboard focus so the star is reachable without a pointer. */ .nav-menu-root .mud-nav-link:hover .nav-fav-star, .nav-menu-root .mud-nav-link:focus-within .nav-fav-star, .nav-fav-star:hover, .nav-fav-star:focus-visible { opacity: 1; } /* The star's colour has to out-shout TWO blanket icon rules above: the 3-class `.nav-menu-root .mud-nav-link .mud-icon-root` and, worse, the 5-class `.nav-menu-root > .mud-nav-link:not(.nav-active):not(.active) .mud-icon-root`. Both carry !important, so !important alone loses — these selectors are deliberately padded past 5 compound classes. Measured: at 4 classes the starred icon still rendered --nav-link-fg. */ .nav-menu-drawer .nav-menu-root .mud-nav-link .nav-fav-star .mud-icon-root { color: inherit !important; } .nav-fav-star:hover, .nav-menu-drawer .nav-menu-root .mud-nav-link .nav-fav-star.nav-fav-star:hover .mud-icon-root { color: var(--nav-fav-fg) !important; } /* Already a favourite: always visible, never fades with the row. */ .nav-fav-star.nav-fav-star--on, .nav-menu-drawer .nav-menu-root .mud-nav-link .nav-fav-star.nav-fav-star--on .mud-icon-root { opacity: 1; color: var(--nav-fav-fg) !important; } .nav-menu-root .nav-fav-hint { color: var(--nav-link-fg-sub) !important; font-size: 0.75rem; line-height: 1.5; }