/* ========================================================================= Per-user theme: header / menu / body background. Driven by three attributes on : data-theme -> header surface (gradient, buttons, search input) data-theme-menu -> side menu surface (panel bg, border, hover) data-theme-bg -> body / page background Each palette derives values from the matching Tailwind v4 shade family. ========================================================================= */ /* ----- defaults (slate) ----- */ :root { /* header */ --th-bg-from: #0f172a; --th-bg-via: #1e293b; --th-bg-to: #0f172a; --th-border-bottom: rgba(51, 65, 85, 0.5); --th-btn-bg: #334155; --th-btn-bg-hover: #475569; --th-btn-border: rgba(71, 85, 105, 0.5); --th-search-bg: rgba(51, 65, 85, 0.8); --th-search-bg-hover: #334155; --th-search-border: rgba(71, 85, 105, 0.6); --th-search-border-focus: rgba(100, 116, 139, 0.8); --th-search-ring: rgba(100, 116, 139, 0.3); --th-search-placeholder: #94a3b8; --th-icon: #ffffff; --th-icon-soft: #e2e8f0; --th-icon-muted: #94a3b8; /* menu */ --th-menu-bg: #f8fafc; --th-menu-border: #e2e8f0; --th-menu-hover-bg: #f1f5f9; --th-menu-hover-text: #334155; --th-menu-chevron-hover: #64748b; /* body */ --th-body-bg: #020617; } /* ========================================================================= HEADER PALETTES — data-theme attribute ========================================================================= */ [data-theme="slate"] { --th-bg-from:#0f172a; --th-bg-via:#1e293b; --th-bg-to:#0f172a; --th-border-bottom:rgba(51,65,85,.5); --th-btn-bg:#334155; --th-btn-bg-hover:#475569; --th-btn-border:rgba(71,85,105,.5); --th-search-bg:rgba(51,65,85,.8); --th-search-bg-hover:#334155; --th-search-border:rgba(71,85,105,.6); --th-search-border-focus:rgba(100,116,139,.8); --th-search-ring:rgba(100,116,139,.3); --th-search-placeholder:#94a3b8; --th-icon-soft:#e2e8f0; --th-icon-muted:#94a3b8; } [data-theme="zinc"] { --th-bg-from:#18181b; --th-bg-via:#27272a; --th-bg-to:#18181b; --th-border-bottom:rgba(63,63,70,.5); --th-btn-bg:#3f3f46; --th-btn-bg-hover:#52525b; --th-btn-border:rgba(82,82,91,.5); --th-search-bg:rgba(63,63,70,.8); --th-search-bg-hover:#3f3f46; --th-search-border:rgba(82,82,91,.6); --th-search-border-focus:rgba(113,113,122,.8); --th-search-ring:rgba(113,113,122,.3); --th-search-placeholder:#a1a1aa; --th-icon-soft:#e4e4e7; --th-icon-muted:#a1a1aa; } [data-theme="stone"] { --th-bg-from:#1c1917; --th-bg-via:#292524; --th-bg-to:#1c1917; --th-border-bottom:rgba(68,64,60,.5); --th-btn-bg:#44403c; --th-btn-bg-hover:#57534e; --th-btn-border:rgba(87,83,78,.5); --th-search-bg:rgba(68,64,60,.8); --th-search-bg-hover:#44403c; --th-search-border:rgba(87,83,78,.6); --th-search-border-focus:rgba(120,113,108,.8); --th-search-ring:rgba(120,113,108,.3); --th-search-placeholder:#a8a29e; --th-icon-soft:#e7e5e4; --th-icon-muted:#a8a29e; } [data-theme="red"] { --th-bg-from:#7f1d1d; --th-bg-via:#991b1b; --th-bg-to:#7f1d1d; --th-border-bottom:rgba(185,28,28,.5); --th-btn-bg:#b91c1c; --th-btn-bg-hover:#dc2626; --th-btn-border:rgba(220,38,38,.5); --th-search-bg:rgba(185,28,28,.8); --th-search-bg-hover:#b91c1c; --th-search-border:rgba(220,38,38,.6); --th-search-border-focus:rgba(239,68,68,.8); --th-search-ring:rgba(239,68,68,.3); --th-search-placeholder:#fecaca; --th-icon-soft:#fee2e2; --th-icon-muted:#fca5a5; } [data-theme="orange"] { --th-bg-from:#7c2d12; --th-bg-via:#9a3412; --th-bg-to:#7c2d12; --th-border-bottom:rgba(194,65,12,.5); --th-btn-bg:#c2410c; --th-btn-bg-hover:#ea580c; --th-btn-border:rgba(234,88,12,.5); --th-search-bg:rgba(194,65,12,.8); --th-search-bg-hover:#c2410c; --th-search-border:rgba(234,88,12,.6); --th-search-border-focus:rgba(249,115,22,.8); --th-search-ring:rgba(249,115,22,.3); --th-search-placeholder:#fed7aa; --th-icon-soft:#ffedd5; --th-icon-muted:#fdba74; } [data-theme="amber"] { --th-bg-from:#451a03; --th-bg-via:#78350f; --th-bg-to:#451a03; --th-border-bottom:rgba(180,83,9,.5); --th-btn-bg:#92400e; --th-btn-bg-hover:#b45309; --th-btn-border:rgba(180,83,9,.5); --th-search-bg:rgba(146,64,14,.85);--th-search-bg-hover:#92400e; --th-search-border:rgba(180,83,9,.6); --th-search-border-focus:rgba(217,119,6,.8); --th-search-ring:rgba(217,119,6,.3); --th-search-placeholder:#fde68a; --th-icon-soft:#fef3c7; --th-icon-muted:#fcd34d; } [data-theme="lime"] { --th-bg-from:#365314; --th-bg-via:#3f6212; --th-bg-to:#365314; --th-border-bottom:rgba(77,124,15,.5); --th-btn-bg:#4d7c0f; --th-btn-bg-hover:#65a30d; --th-btn-border:rgba(101,163,13,.5);--th-search-bg:rgba(77,124,15,.8); --th-search-bg-hover:#4d7c0f; --th-search-border:rgba(101,163,13,.6);--th-search-border-focus:rgba(132,204,22,.8); --th-search-ring:rgba(132,204,22,.3); --th-search-placeholder:#d9f99d; --th-icon-soft:#ecfccb; --th-icon-muted:#bef264; } [data-theme="green"] { --th-bg-from:#14532d; --th-bg-via:#166534; --th-bg-to:#14532d; --th-border-bottom:rgba(21,128,61,.5); --th-btn-bg:#15803d; --th-btn-bg-hover:#16a34a; --th-btn-border:rgba(22,163,74,.5); --th-search-bg:rgba(21,128,61,.8); --th-search-bg-hover:#15803d; --th-search-border:rgba(22,163,74,.6); --th-search-border-focus:rgba(34,197,94,.8); --th-search-ring:rgba(34,197,94,.3); --th-search-placeholder:#bbf7d0; --th-icon-soft:#dcfce7; --th-icon-muted:#86efac; } [data-theme="emerald"] { --th-bg-from:#064e3b; --th-bg-via:#065f46; --th-bg-to:#064e3b; --th-border-bottom:rgba(4,120,87,.5); --th-btn-bg:#047857; --th-btn-bg-hover:#059669; --th-btn-border:rgba(5,150,105,.5); --th-search-bg:rgba(4,120,87,.8); --th-search-bg-hover:#047857; --th-search-border:rgba(5,150,105,.6); --th-search-border-focus:rgba(16,185,129,.8); --th-search-ring:rgba(16,185,129,.3); --th-search-placeholder:#a7f3d0; --th-icon-soft:#d1fae5; --th-icon-muted:#6ee7b7; } [data-theme="teal"] { --th-bg-from:#134e4a; --th-bg-via:#115e59; --th-bg-to:#134e4a; --th-border-bottom:rgba(15,118,110,.5);--th-btn-bg:#0f766e; --th-btn-bg-hover:#0d9488; --th-btn-border:rgba(13,148,136,.5);--th-search-bg:rgba(15,118,110,.8);--th-search-bg-hover:#0f766e; --th-search-border:rgba(13,148,136,.6);--th-search-border-focus:rgba(20,184,166,.8); --th-search-ring:rgba(20,184,166,.3); --th-search-placeholder:#99f6e4; --th-icon-soft:#ccfbf1; --th-icon-muted:#5eead4; } [data-theme="cyan"] { --th-bg-from:#164e63; --th-bg-via:#155e75; --th-bg-to:#164e63; --th-border-bottom:rgba(14,116,144,.5);--th-btn-bg:#0e7490; --th-btn-bg-hover:#0891b2; --th-btn-border:rgba(8,145,178,.5); --th-search-bg:rgba(14,116,144,.8);--th-search-bg-hover:#0e7490; --th-search-border:rgba(8,145,178,.6); --th-search-border-focus:rgba(6,182,212,.8); --th-search-ring:rgba(6,182,212,.3); --th-search-placeholder:#a5f3fc; --th-icon-soft:#cffafe; --th-icon-muted:#67e8f9; } [data-theme="sky"] { --th-bg-from:#0c4a6e; --th-bg-via:#075985; --th-bg-to:#0c4a6e; --th-border-bottom:rgba(3,105,161,.5); --th-btn-bg:#0369a1; --th-btn-bg-hover:#0284c7; --th-btn-border:rgba(2,132,199,.5); --th-search-bg:rgba(3,105,161,.8); --th-search-bg-hover:#0369a1; --th-search-border:rgba(2,132,199,.6); --th-search-border-focus:rgba(14,165,233,.8); --th-search-ring:rgba(14,165,233,.3); --th-search-placeholder:#bae6fd; --th-icon-soft:#e0f2fe; --th-icon-muted:#7dd3fc; } [data-theme="blue"] { --th-bg-from:#1e3a8a; --th-bg-via:#1e40af; --th-bg-to:#1e3a8a; --th-border-bottom:rgba(29,78,216,.5); --th-btn-bg:#1d4ed8; --th-btn-bg-hover:#2563eb; --th-btn-border:rgba(37,99,235,.5); --th-search-bg:rgba(29,78,216,.8); --th-search-bg-hover:#1d4ed8; --th-search-border:rgba(37,99,235,.6); --th-search-border-focus:rgba(59,130,246,.8); --th-search-ring:rgba(59,130,246,.3); --th-search-placeholder:#bfdbfe; --th-icon-soft:#dbeafe; --th-icon-muted:#93c5fd; } [data-theme="indigo"] { --th-bg-from:#312e81; --th-bg-via:#3730a3; --th-bg-to:#312e81; --th-border-bottom:rgba(67,56,202,.5); --th-btn-bg:#4338ca; --th-btn-bg-hover:#4f46e5; --th-btn-border:rgba(79,70,229,.5); --th-search-bg:rgba(67,56,202,.8); --th-search-bg-hover:#4338ca; --th-search-border:rgba(79,70,229,.6); --th-search-border-focus:rgba(99,102,241,.8); --th-search-ring:rgba(99,102,241,.3); --th-search-placeholder:#c7d2fe; --th-icon-soft:#e0e7ff; --th-icon-muted:#a5b4fc; } [data-theme="violet"] { --th-bg-from:#4c1d95; --th-bg-via:#5b21b6; --th-bg-to:#4c1d95; --th-border-bottom:rgba(109,40,217,.5);--th-btn-bg:#6d28d9; --th-btn-bg-hover:#7c3aed; --th-btn-border:rgba(124,58,237,.5);--th-search-bg:rgba(109,40,217,.8);--th-search-bg-hover:#6d28d9; --th-search-border:rgba(124,58,237,.6);--th-search-border-focus:rgba(139,92,246,.8); --th-search-ring:rgba(139,92,246,.3); --th-search-placeholder:#ddd6fe; --th-icon-soft:#ede9fe; --th-icon-muted:#c4b5fd; } [data-theme="purple"] { --th-bg-from:#581c87; --th-bg-via:#6b21a8; --th-bg-to:#581c87; --th-border-bottom:rgba(126,34,206,.5);--th-btn-bg:#7e22ce; --th-btn-bg-hover:#9333ea; --th-btn-border:rgba(147,51,234,.5);--th-search-bg:rgba(126,34,206,.8);--th-search-bg-hover:#7e22ce; --th-search-border:rgba(147,51,234,.6);--th-search-border-focus:rgba(168,85,247,.8); --th-search-ring:rgba(168,85,247,.3); --th-search-placeholder:#e9d5ff; --th-icon-soft:#f3e8ff; --th-icon-muted:#d8b4fe; } [data-theme="fuchsia"] { --th-bg-from:#701a75; --th-bg-via:#86198f; --th-bg-to:#701a75; --th-border-bottom:rgba(162,28,175,.5);--th-btn-bg:#a21caf; --th-btn-bg-hover:#c026d3; --th-btn-border:rgba(192,38,211,.5);--th-search-bg:rgba(162,28,175,.8);--th-search-bg-hover:#a21caf; --th-search-border:rgba(192,38,211,.6);--th-search-border-focus:rgba(217,70,239,.8); --th-search-ring:rgba(217,70,239,.3); --th-search-placeholder:#f5d0fe; --th-icon-soft:#fae8ff; --th-icon-muted:#f0abfc; } [data-theme="pink"] { --th-bg-from:#831843; --th-bg-via:#9d174d; --th-bg-to:#831843; --th-border-bottom:rgba(190,24,93,.5); --th-btn-bg:#be185d; --th-btn-bg-hover:#db2777; --th-btn-border:rgba(219,39,119,.5);--th-search-bg:rgba(190,24,93,.8); --th-search-bg-hover:#be185d; --th-search-border:rgba(219,39,119,.6);--th-search-border-focus:rgba(236,72,153,.8); --th-search-ring:rgba(236,72,153,.3); --th-search-placeholder:#fbcfe8; --th-icon-soft:#fce7f3; --th-icon-muted:#f9a8d4; } /* ========================================================================= MENU PALETTES — data-theme-menu attribute ========================================================================= */ [data-theme-menu="slate"] { --th-menu-bg:#f8fafc; --th-menu-border:#e2e8f0; --th-menu-hover-bg:#f1f5f9; --th-menu-hover-text:#334155; --th-menu-chevron-hover:#64748b; } [data-theme-menu="zinc"] { --th-menu-bg:#fafafa; --th-menu-border:#e4e4e7; --th-menu-hover-bg:#f4f4f5; --th-menu-hover-text:#3f3f46; --th-menu-chevron-hover:#71717a; } [data-theme-menu="stone"] { --th-menu-bg:#fafaf9; --th-menu-border:#e7e5e4; --th-menu-hover-bg:#f5f5f4; --th-menu-hover-text:#44403c; --th-menu-chevron-hover:#78716c; } [data-theme-menu="red"] { --th-menu-bg:#fef2f2; --th-menu-border:#fecaca; --th-menu-hover-bg:#fee2e2; --th-menu-hover-text:#b91c1c; --th-menu-chevron-hover:#ef4444; } [data-theme-menu="orange"] { --th-menu-bg:#fff7ed; --th-menu-border:#fed7aa; --th-menu-hover-bg:#ffedd5; --th-menu-hover-text:#c2410c; --th-menu-chevron-hover:#f97316; } [data-theme-menu="amber"] { --th-menu-bg:#fffbeb; --th-menu-border:#fde68a; --th-menu-hover-bg:#fef3c7; --th-menu-hover-text:#b45309; --th-menu-chevron-hover:#f59e0b; } [data-theme-menu="lime"] { --th-menu-bg:#f7fee7; --th-menu-border:#d9f99d; --th-menu-hover-bg:#ecfccb; --th-menu-hover-text:#4d7c0f; --th-menu-chevron-hover:#84cc16; } [data-theme-menu="green"] { --th-menu-bg:#f0fdf4; --th-menu-border:#bbf7d0; --th-menu-hover-bg:#dcfce7; --th-menu-hover-text:#15803d; --th-menu-chevron-hover:#22c55e; } [data-theme-menu="emerald"] { --th-menu-bg:#ecfdf5; --th-menu-border:#a7f3d0; --th-menu-hover-bg:#d1fae5; --th-menu-hover-text:#047857; --th-menu-chevron-hover:#10b981; } [data-theme-menu="teal"] { --th-menu-bg:#f0fdfa; --th-menu-border:#99f6e4; --th-menu-hover-bg:#ccfbf1; --th-menu-hover-text:#0f766e; --th-menu-chevron-hover:#14b8a6; } [data-theme-menu="cyan"] { --th-menu-bg:#ecfeff; --th-menu-border:#a5f3fc; --th-menu-hover-bg:#cffafe; --th-menu-hover-text:#0e7490; --th-menu-chevron-hover:#06b6d4; } [data-theme-menu="sky"] { --th-menu-bg:#f0f9ff; --th-menu-border:#bae6fd; --th-menu-hover-bg:#e0f2fe; --th-menu-hover-text:#0369a1; --th-menu-chevron-hover:#0ea5e9; } [data-theme-menu="blue"] { --th-menu-bg:#eff6ff; --th-menu-border:#bfdbfe; --th-menu-hover-bg:#dbeafe; --th-menu-hover-text:#1d4ed8; --th-menu-chevron-hover:#3b82f6; } [data-theme-menu="indigo"] { --th-menu-bg:#eef2ff; --th-menu-border:#c7d2fe; --th-menu-hover-bg:#e0e7ff; --th-menu-hover-text:#4338ca; --th-menu-chevron-hover:#6366f1; } [data-theme-menu="violet"] { --th-menu-bg:#f5f3ff; --th-menu-border:#ddd6fe; --th-menu-hover-bg:#ede9fe; --th-menu-hover-text:#6d28d9; --th-menu-chevron-hover:#8b5cf6; } [data-theme-menu="purple"] { --th-menu-bg:#faf5ff; --th-menu-border:#e9d5ff; --th-menu-hover-bg:#f3e8ff; --th-menu-hover-text:#7e22ce; --th-menu-chevron-hover:#a855f7; } [data-theme-menu="fuchsia"] { --th-menu-bg:#fdf4ff; --th-menu-border:#f5d0fe; --th-menu-hover-bg:#fae8ff; --th-menu-hover-text:#a21caf; --th-menu-chevron-hover:#d946ef; } [data-theme-menu="pink"] { --th-menu-bg:#fdf2f8; --th-menu-border:#fbcfe8; --th-menu-hover-bg:#fce7f3; --th-menu-hover-text:#be185d; --th-menu-chevron-hover:#ec4899; } /* ========================================================================= BACKGROUND PALETTES — data-theme-bg attribute (body) ========================================================================= */ [data-theme-bg="slate"] { --th-body-bg:#020617; } [data-theme-bg="zinc"] { --th-body-bg:#09090b; } [data-theme-bg="stone"] { --th-body-bg:#0c0a09; } [data-theme-bg="red"] { --th-body-bg:#450a0a; } [data-theme-bg="orange"] { --th-body-bg:#431407; } [data-theme-bg="amber"] { --th-body-bg:#451a03; } [data-theme-bg="lime"] { --th-body-bg:#1a2e05; } [data-theme-bg="green"] { --th-body-bg:#052e16; } [data-theme-bg="emerald"] { --th-body-bg:#022c22; } [data-theme-bg="teal"] { --th-body-bg:#042f2e; } [data-theme-bg="cyan"] { --th-body-bg:#083344; } [data-theme-bg="sky"] { --th-body-bg:#082f49; } [data-theme-bg="blue"] { --th-body-bg:#172554; } [data-theme-bg="indigo"] { --th-body-bg:#1e1b4b; } [data-theme-bg="violet"] { --th-body-bg:#2e1065; } [data-theme-bg="purple"] { --th-body-bg:#3b0764; } [data-theme-bg="fuchsia"] { --th-body-bg:#4a044e; } [data-theme-bg="pink"] { --th-body-bg:#500724; } /* ========================================================================= COMPONENT RULES ========================================================================= */ /* Body background applies globally; overrides Tailwind bg-* utilities and login bg image. */ body { background-color: var(--th-body-bg) !important; background-image: none !important; min-height: 100vh; } /* HEADER */ .themed-header { background-image: linear-gradient( to right, color-mix(in srgb, var(--th-bg-from) 95%, transparent), color-mix(in srgb, var(--th-bg-via) 95%, transparent), color-mix(in srgb, var(--th-bg-to) 95%, transparent) ); border-bottom: 1px solid var(--th-border-bottom); } .themed-btn { background-color: var(--th-btn-bg); border: 1px solid var(--th-btn-border); color: var(--th-icon); transition: background-color .18s ease, border-color .18s ease, transform .15s ease; } .themed-btn:hover { background-color: var(--th-btn-bg-hover); } .themed-btn:active { transform: scale(.97); } .themed-btn i, .themed-btn .themed-icon { color: var(--th-icon); } .themed-btn-icon-soft i { color: var(--th-icon-soft); } .themed-input { background-color: var(--th-search-bg); border: 1px solid var(--th-search-border); color: var(--th-icon); transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .themed-input::placeholder { color: var(--th-search-placeholder); } .themed-input:hover { background-color: var(--th-search-bg-hover); } .themed-input:focus { border-color: var(--th-search-border-focus); box-shadow: 0 0 0 3px var(--th-search-ring); outline: none; } .themed-input-icon { color: var(--th-search-placeholder); } /* SIDE MENU */ .themed-menu-bg { background-color: var(--th-menu-bg) !important; } .themed-menu-border { border-color: var(--th-menu-border) !important; } /* MAIN-MENU DRAWER — themed visuals layered on the renderDrawer aside. Slide animation, scroll, top offset and close handlers are all handled by components/drawer.php. Here we only theme the aside and constrain item width. */ #oxy-drawer-main-menu aside, #oxy-drawer-notifications aside, #oxy-drawer-ticket-views aside { background-color: var(--th-menu-bg) !important; } /* Force the menu wrapper visible — legacy `.menu` CSS rules can otherwise hide it. */ #oxy-drawer-main-menu .menu.sidebar-menu { display: block !important; } #oxy-drawer-main-menu aside > header, #oxy-drawer-notifications aside > header, #oxy-drawer-ticket-views aside > header { background-color: var(--th-menu-bg) !important; border-color: var(--th-menu-border) !important; } /* Drop the renderDrawer body padding so menu items use the full width — they have their own px-5 spacing and the parent padding would compound it. Target the immediate body wrapper inside the aside (handles different Tailwind compiled class outputs by matching the overflow-y class). */ #oxy-drawer-main-menu aside > div { padding: 0.5rem 0 !important; } /* ========================================================================= MENU SEARCH MODAL (Ctrl+Alt / Slash) Overrides the hardcoded slate-* utilities so the modal follows the theme. ========================================================================= */ /* Backdrop — neutral dark with a SUBTLE tint of the active theme so it stays easy on the eyes regardless of how saturated the chosen palette is. */ #menuSearchBackdrop { background-image: linear-gradient( to bottom right, color-mix(in srgb, var(--th-bg-from) 18%, rgba(15, 23, 42, 0.85)), color-mix(in srgb, var(--th-bg-via) 15%, rgba(30, 41, 59, 0.80)), color-mix(in srgb, var(--th-bg-from) 18%, rgba(15, 23, 42, 0.85)) ) !important; } /* Panel surfaces — slate-900/800 base with ~18-20% theme tint. Avoids the "wall of red/blue/green" feeling that pure theme colours produced. */ #menuSearchModal .bg-slate-900 { background-color: color-mix(in srgb, var(--th-bg-from) 20%, #0f172a) !important; } #menuSearchModal .bg-slate-800, #menuSearchModal .hover\:bg-slate-800:hover { background-color: color-mix(in srgb, var(--th-bg-via) 22%, #1e293b) !important; } #menuSearchModal [class*="bg-slate-800\/"] { background-color: color-mix(in srgb, color-mix(in srgb, var(--th-bg-via) 22%, #1e293b) 60%, transparent) !important; } /* Borders + dividers + rings */ #menuSearchModal .border-slate-700, #menuSearchModal .border-t-slate-700, #menuSearchModal .border-b-slate-700 { border-color: var(--th-border-bottom) !important; } #menuSearchModal .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--th-border-bottom) !important; } #menuSearchModal .ring-slate-700, #menuSearchModal [class*="ring-slate-700\/"] { --tw-ring-color: var(--th-btn-border) !important; } /* Search input focus — themed accent (matches the header search field) */ #menuSearchModal #menuSearchInput:focus { --tw-ring-color: var(--th-search-border-focus) !important; } /* Prevent long menu labels from forcing the drawer wider than its set width. */ #oxy-drawer-main-menu .menu-parent-btn, #oxy-drawer-main-menu .menu-child-btn, #oxy-drawer-main-menu .lv1, #oxy-drawer-main-menu .sidebar-children > a, #oxy-drawer-main-menu .sidebar-parent > div { min-width: 0; } /* The sticky search bar uses negative horizontal margins (-mx-5) to extend to the drawer edges. Inside a scrollable parent (overflow-y: auto), this makes the browser compute overflow-x: auto and shows a horizontal scrollbar. We never want horizontal scroll in the menu, so clip it explicitly. */ #oxy-drawer-main-menu aside > div.overflow-y-auto { overflow-x: hidden; } /* The drawer body has padding-top: 1rem (py-4). Sticky offsets reference the parent's CONTENT-box top, so `top: 0` would stick the search bar 1rem below the body's actual top — leaving a 1rem strip where menu items scroll into view above it. We offset by the same amount so the sticky bar pins at the body's true top edge and fully covers items scrolling underneath. */ #oxy-drawer-main-menu .drawer-menu-search { top: -0.5rem; } #oxy-drawer-main-menu .themed-menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .themed-menu-item:hover { background-color: var(--th-menu-hover-bg) !important; } .themed-menu-item:hover .themed-menu-text { color: var(--th-menu-hover-text) !important; } .themed-menu-item:hover .sidebar-chevron { color: var(--th-menu-chevron-hover) !important; } /* Active section indicator */ .sidebar-item.active.sidebar-parent, .sidebar-item.active.standalone { background-color: var(--th-menu-hover-bg); } .sidebar-item.active.sidebar-parent .themed-menu-text, .sidebar-item.active.standalone .themed-menu-text { color: var(--th-menu-hover-text); } /* Suppress browser-native clear/reveal icons on the drawer menu search input so only our custom X button shows. */ .drawer-menu-search input::-ms-clear, .drawer-menu-search input::-ms-reveal { display: none; width: 0; height: 0; } .drawer-menu-search input::-webkit-search-cancel-button, .drawer-menu-search input::-webkit-search-decoration, .drawer-menu-search input::-webkit-search-results-button, .drawer-menu-search input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }