/* Moves LeptonX's SideMenu toolbar (user avatar, chat, appearance, container-width, language, settings) from its default fixed 72px-wide vertical rail on the right edge of the screen to a horizontal bar fixed at the top. The main left navigation menu (.lpx-sidebar-container) is untouched. Linked directly in App.razor's (last stylesheet) instead of going through the ABP bundle pipeline, to avoid bundle-caching picking up a stale copy. Confirmed DOM structure (from live inspection): .lpx-toolbar-container nav.lpx-toolbar#lpx-toolbar div.lpx-context-menu[data-lpx-context-menu="user-context-menu"] (hidden dropdown) ul.lpx-nav-menu > li.lpx-user-menu#userItem (visible avatar trigger) div.lpx-settings#lpx-settings (visible icons; itself > div.setting-icon (appearance / containerWidth / language / gear) position:fixed by > div.lpx-context-menu[data-lpx-context-menu="settings-context-menu"] default - must be un-fixed to join the row div.outer-menu-item (chat icon) */ @media only screen and (min-width: 768px) and (max-width: 1199px) { /* Sidebar is collapsed to 72px in this range (layout-bundle.css line ~344) - match it so the bar starts right after the sidebar instead of covering its logo/branding area. */ .lpx-toolbar-container { left: 72px !important; } } @media only screen and (min-width: 1200px) { /* Sidebar is 280px wide at this breakpoint (layout-bundle.css line ~339). */ .lpx-toolbar-container { left: 280px !important; } } @media only screen and (min-width: 768px) { .lpx-toolbar-container { width: auto !important; min-height: 0 !important; height: 64px !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; z-index: 1030 !important; } .lpx-toolbar-container .lpx-toolbar { position: static !important; top: auto !important; width: 100% !important; min-width: 0 !important; height: 64px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; padding-right: 12px !important; } /* Everything that isn't a hidden dropdown panel becomes a row item. */ .lpx-toolbar-container .lpx-toolbar > .lpx-nav-menu, .lpx-toolbar-container .lpx-toolbar > .lpx-settings, .lpx-toolbar-container .lpx-toolbar > .outer-menu-item, .lpx-toolbar-container .lpx-toolbar > .lpx-toolbar-item, .lpx-toolbar-container .lpx-toolbar > *:not(.lpx-context-menu) { position: static !important; bottom: auto !important; width: auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; margin: 0 !important; } /* Push items containing header timer to the left side */ .lpx-toolbar-container .lpx-toolbar > *:has(.header-timer-wrapper), .lpx-toolbar-container .lpx-toolbar > .header-timer-wrapper { margin-right: auto !important; order: -9999 !important; margin-left: 12px !important; } .lpx-toolbar-container .lpx-user-menu .lpx-menu-item-link { height: 64px !important; display: flex !important; align-items: center !important; padding: 0 12px 13px !important; } .lpx-user-menu .lpx-menu-item-link .lpx-menu-item-text { display: block !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; margin: 0 6px !important; text-align: left !important; font-size: 13px !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .lpx-toolbar-container .lpx-settings .setting-icon { margin: 0 9px !important; } /* Dropdown panels (user context menu, settings menu) open below the bar instead of to the left. bottom:auto is required - the vendor's own ".lpx-settings .lpx-context-menu" rule sets "bottom: 0", which combined with our "top: 64px" on a containing block that's now only 64px tall collapses the panel's height to zero (invisible, unclickable, looks like "nothing happens" on click even though it did technically open). */ .lpx-toolbar-container .lpx-context-menu { position: fixed !important; right: 0 !important; left: auto !important; top: 64px !important; bottom: auto !important; margin: 0 !important; } /* Reclaim the space the right rail used to reserve; add top space for the new bar instead. */ .lpx-content-container { margin-right: 0 !important; margin-top: 64px !important; } /* LeptonX's own JS measures the toolbar and offsets the sidebar's top accordingly - since we drastically changed the toolbar's shape (72px-wide right rail -> 100%-wide top bar), that JS now pushes the sidebar down by the new toolbar height. Pin it back to the top-left corner. */ .lpx-sidebar-container { top: 0 !important; left: 0 !important; margin-top: 0 !important; } }