diff --git a/docs/js/toc-highlight.js b/docs/js/toc-highlight.js new file mode 100644 index 00000000..94dbdae0 --- /dev/null +++ b/docs/js/toc-highlight.js @@ -0,0 +1,92 @@ +/** + * Simple TOC scroll-based highlighting + * Highlights current section in purple text + */ + +(function () { + "use strict"; + + let tocLinks = []; + let headings = []; + + function init() { + // Find TOC links + tocLinks = Array.from( + document.querySelectorAll(".md-nav--secondary .md-nav__link") + ); + if (tocLinks.length === 0) return; + + // Find corresponding headings + headings = tocLinks + .map((link) => { + const href = link.getAttribute("href"); + return href && href.startsWith("#") + ? document.getElementById(href.substring(1)) + : null; + }) + .filter((h) => h !== null); + + if (headings.length === 0) return; + + // Listen to scroll + window.addEventListener("scroll", updateHighlight, { passive: true }); + updateHighlight(); + } + + function updateHighlight() { + const scrollTop = window.pageYOffset; + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + + // If near bottom, highlight last item + if (scrollTop + windowHeight >= documentHeight - 50) { + setActive(tocLinks.length - 1); + return; + } + + // Find current section + let activeIndex = -1; + for (let i = headings.length - 1; i >= 0; i--) { + if (headings[i] && headings[i].getBoundingClientRect().top <= 80) { + activeIndex = i; + break; + } + } + + setActive(activeIndex); + } + + function setActive(index) { + // Remove all active classes + tocLinks.forEach((link) => { + link.classList.remove("md-nav__link--active", "is-active"); + }); + + // Add active class to current item and scroll into view if needed + if (index >= 0 && index < tocLinks.length) { + const activeLink = tocLinks[index]; + activeLink.classList.add("md-nav__link--active", "is-active"); + // Scroll the active link into view within the sidebar + // Only if not already fully visible + if (typeof activeLink.scrollIntoView === "function") { + activeLink.scrollIntoView({ block: "nearest", behavior: "smooth" }); + } + } + } + + // Initialize when ready + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", init); + } else { + init(); + } + + // Re-initialize on page changes + let currentUrl = location.href; + new MutationObserver(() => { + if (location.href !== currentUrl) { + currentUrl = location.href; + setTimeout(init, 100); + } + }).observe(document, { childList: true, subtree: true }); +})(); diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 2ce80a1b..c69a2bdc 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,3 +1,81 @@ +/* === FINAL SECONDARY SIDEBAR POSITIONING OVERRIDE === */ +.md-sidebar--secondary, +.md-sidebar--secondary[data-md-component="sidebar"], +.md-sidebar--secondary[data-md-state], +.md-sidebar--secondary[data-md-state="lock"] { + position: sticky !important; + top: 8rem !important; + transform: none !important; + transition: none !important; + will-change: auto !important; + z-index: 200 !important; +} + +/* STRONG FINAL MOBILE SCROLL FIX (highest priority): + Lock the sidebar inner to the viewport and force the scrollwrap to handle + vertical scrolling. This is intentionally placed at the end and uses + !important to win over earlier rules that made nested lists overflow. +*/ +@media (max-width: 76.24em) { + /* Ensure the sidebar occupies the viewport height while drawer is open */ + .md-sidebar--primary, + input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary, + .md-toggle[data-md-toggle="drawer"]:checked + ~ .md-container + .md-sidebar--primary { + position: fixed !important; + top: 0 !important; + left: 0 !important; + height: 100vh !important; + max-height: 100vh !important; + overflow: hidden !important; /* prevent sidebar itself from scrolling */ + will-change: auto !important; + } + + /* Keep the inner wrapper full height but clipped; scrollwrap will scroll */ + .md-sidebar--primary .md-sidebar__inner { + height: 100% !important; + max-height: 100% !important; + overflow: hidden !important; + position: relative !important; + } + + /* Force scrollwrap to fill available space and handle vertical scrolling */ + .md-sidebar--primary .md-sidebar__scrollwrap, + input[id="__drawer"]:checked + ~ .md-container + .md-sidebar--primary + .md-sidebar__scrollwrap, + .md-toggle[data-md-toggle="drawer"]:checked + ~ .md-container + .md-sidebar--primary + .md-sidebar__scrollwrap { + height: 100% !important; + max-height: 100% !important; + overflow-y: auto !important; + overflow-x: hidden !important; + -webkit-overflow-scrolling: touch !important; + position: relative !important; + } + + /* Prevent nested navs from using absolute/transform tricks that remove them + from the scroll context (keep them in normal flow) */ + .md-sidebar--primary .md-nav__list, + .md-sidebar--primary .md-nav__item, + .md-sidebar--primary .md-nav__item > .md-nav__list, + .md-sidebar--primary nav[data-md-level] { + position: static !important; + transform: none !important; + max-height: none !important; + overflow: visible !important; + } + + /* Make sure scrolling works with touch and pointer events */ + .md-sidebar--primary .md-sidebar__scrollwrap { + touch-action: pan-y !important; + } +} + [data-md-color-scheme="openobserve"] { --md-primary-fg-color: #ffffff; --md-primary-fg-color--light: #ecb7b7; @@ -42,15 +120,6 @@ html { 4. Provide stable scrollbar to avoid layout shift. */ @media (min-width: 60em) { - /* Minimal, non-intrusive adjustments */ - .md-sidebar--primary { - position: sticky; /* stay visible */ - top: 0; /* eliminate excess gap */ - z-index: 200; - display: flex; - flex-direction: column; - } - /* Add bottom padding to main content so sidebar never gets overlapped by footer */ .md-main, .md-content { @@ -59,12 +128,19 @@ html { .md-footer { z-index: 0; } - /* Give room so last items can scroll fully into view */ + /* Primary sidebar scroll container - content-based height like secondary sidebar */ .md-sidebar--primary .md-sidebar__scrollwrap { - flex: 1; - overflow-y: auto; - padding: 0.25rem 0 2.25rem; /* trim top, moderate bottom */ - overscroll-behavior: contain; + overflow-y: auto !important; + padding: 0.25rem 0 1rem !important; + overscroll-behavior: contain !important; + width: 100% !important; + padding-right: 0 !important; + margin-right: 0 !important; + border-right: none !important; + box-sizing: border-box !important; + /* Allow content-based height with increased footer clearance */ + height: auto !important; + max-height: calc(100vh - 12rem) !important; } /* Remove bottom fade/overlay that appeared as white block */ .md-sidebar--primary .md-sidebar__scrollwrap:after { @@ -171,7 +247,7 @@ html { color: #fff !important; border-radius: 8px !important; box-shadow: none !important; - padding: 0.75em 2.5em 0.75em 3.2em !important; + padding: 8px 3.2em 8px 3.2em !important; font-size: 1.5em !important; min-width: 16em !important; } @@ -202,10 +278,10 @@ html { color: #222 !important; transition: border-color 0.2s; box-shadow: none !important; - padding: 0.2em 3.2em 0.2em 3.2em !important; /* Remove extra right padding for desktop */ + padding: 8px 3.2em 8px 3.2em !important; /* Match docs title padding: 5px vertical */ font-size: 1.5em !important; min-width: 20em !important; - height: 3em !important; + height: auto !important; /* Let height be determined by padding + content */ /* Remove background image for desktop - will be added for mobile only */ } .md-search__input::placeholder { @@ -221,7 +297,7 @@ html { /* transition: color 0.2s; */ position: absolute !important; right: 1.5em !important; - top: 50% !important; + top: 46% !important; transform: translateY(-50%) !important; font-size: 1.25em !important; pointer-events: auto; @@ -241,12 +317,12 @@ html { [data-md_color-scheme="slate"] .md-search__input { background-color: #7c3aed !important; color: #fff !important; - border-radius: 999px !important; + border-radius: 8px !important; box-shadow: none !important; - padding: 0.85em 3.2em 0.85em 3.2em !important; /* Remove extra right padding for desktop */ + padding: 8px 3.2em 8px 3.2em !important; /* Match docs title padding: 5px vertical */ font-size: 1.5em !important; min-width: 20em !important; - height: 3em !important; + height: auto !important; /* Let height be determined by padding + content */ /* Remove close button for desktop - will be added for mobile only */ } [data-md-color-scheme="slate"] .md-search__input::placeholder { @@ -267,6 +343,20 @@ html { pointer-events: none; } +/* --- NAVBAR HEIGHT CONSISTENCY --- */ +.md-header { + min-height: 4rem !important; + height: auto !important; + position: sticky !important; + top: 0 !important; +} + +.md-header__inner { + min-height: 4rem !important; + height: auto !important; + padding: 0.5rem 1rem !important; +} + /* --- FINAL: Sidebar Custom Design --- */ .md-sidebar--primary { background: rgb(245, 243, 254) !important; @@ -275,14 +365,24 @@ html { padding: 1em 0.5em !important; /* margin-right: 2em !important; */ box-shadow: none !important; - z-index: 10 !important; - /* allow the active indicator to sit inside the rounded border */ - overflow: visible !important; + z-index: 200 !important; + position: sticky !important; + top: 8rem !important; + /* Content-based height with increased footer clearance */ + height: auto !important; + min-height: auto !important; + max-height: calc(100vh - 9rem) !important; + overflow: hidden !important; + /* Keep it visible when scrolling */ + transform: none !important; + display: block !important; } -@media (min-width: 1024px) { +/* Desktop-only styles */ +@media (min-width: 76.25em) { .md-sidebar--primary { margin-left: 12px; + margin-right: 1em !important; } } [data-md-color-scheme="slate"] .md-sidebar--primary { @@ -290,10 +390,24 @@ html { border: 2px solid #7c3aed !important; border-radius: 8px !important; padding: 1em 0.5em !important; - margin-right: 2em !important; box-shadow: none !important; - z-index: 10 !important; + z-index: 200 !important; + position: sticky !important; + top: 8rem !important; + /* Content-based height with increased footer clearance */ + height: auto !important; + min-height: auto !important; + max-height: calc(100vh - 9rem) !important; overflow: hidden !important; + transform: none !important; + display: block !important; +} + +/* Desktop-only dark theme margin */ +@media (min-width: 76.25em) { + [data-md-color-scheme="slate"] .md-sidebar--primary { + margin-right: 1em !important; + } } .md-sidebar__title, @@ -307,55 +421,31 @@ html { .md-sidebar--primary .md-nav__item--active > .md-nav__link { position: relative !important; background: transparent !important; - border-radius: 5px !important; + border-radius: 3px !important; /* make the active link text bold (applies to the text, not the empty pseudo-element) */ font-weight: 700 !important; /* leave space on the RIGHT for the indicator that sits against the sidebar border */ padding-right: 1.6em !important; /* keep a little left padding for text alignment */ padding-left: 1.1em !important; - overflow: visible !important; + overflow: hidden !important; } .md-sidebar--primary .md-nav__item--active > .md-nav__link::before { content: ""; position: absolute; - /* place the indicator INSIDE the sidebar inner border (right side in this theme) - tweak the `right` value if you want it closer/further from the border */ - right: 8px; /* adjust this number to visually align with your border (2px) */ + right: 8px; left: 0; top: 50%; transform: translateY(-50%); width: 4px; - height: 25px; + height: 30px; background: #4b237a; - /* slightly rounded marker to match sidebar corner curvature */ border-radius: 3px !important; z-index: 3 !important; - /* font-weight on an empty pseudo-element has no effect; kept empty for visual bar */ -} - -/* Thin sidebar scrollbar thumb, flush with border */ -.md-sidebar--primary .md-sidebar__scrollwrap { - scrollbar-width: thin !important; -} -.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar { - width: 6px !important; - background: transparent !important; -} -.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb { - background: #7c3aed !important; - border-radius: 6px !important; - margin: 0 !important; - border: none !important; } /* --- Sidebar: Add right margin for full rounded border visibility --- */ -.md-sidebar--primary { - margin-right: 1em !important; -} -[data-md_color-scheme="slate"] .md-sidebar--primary { - margin-right: 1em !important; -} +/* Margins are now handled in the main sidebar rules above */ /* --- Remove white shadow from sidebar title --- */ .md-sidebar__title { @@ -382,16 +472,6 @@ html { border-right: none !important; box-sizing: border-box !important; } -.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar { - width: 6px !important; - background: transparent !important; -} -.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb { - background: #7c3aed !important; - border-radius: 6px !important; - border-right: none !important; - margin-right: 0 !important; -} /* --- Final fix: Remove all space between sidebar scrollbar and border --- */ .md-sidebar--primary { @@ -438,43 +518,6 @@ html { } /* Hide native scrollbar inside the sidebar scrollwrap and provide a custom - visual track + thumb that we control via JS so the active marker can be - aligned exactly with the visible thumb. */ -.md-sidebar--primary .md-sidebar__scrollwrap { - scrollbar-width: none !important; /* Firefox */ -} -.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar { - display: none !important; /* Chrome/Safari */ -} - -/* custom track & thumb appended as children of the outer sidebar */ -.md-sidebar--primary > .o-scroll-track { - position: absolute; - right: 2px; - width: 12px; /* includes some padding so thumb doesn't touch the border */ - top: 0; - height: 100%; - pointer-events: none; /* visual only */ -} -.md-sidebar--primary > .o-scroll-track .o-scroll-thumb { - position: absolute; - right: 3px; /* place thumb inside track, a few px from border */ - width: 6px; - background: #4b237a; /* purple thumb */ - border-radius: 6px; - box-shadow: 0 0 0 2px rgba(75, 35, 122, 0.06) inset; - transition: top 120ms linear, height 120ms linear; - pointer-events: auto; -} - -/* Keep the active indicator visually matching the custom thumb (same color) - but slightly narrower so it reads as an indicator inside the sidebar. */ -.md-sidebar--primary > .o-active-indicator { - right: 8px; /* move it slightly left so it appears inside the content area */ - width: 4px; - background: #4b237a; -} - /* --- Remove background and shadow from sidebar nav title --- */ .md-sidebar--primary .md-nav__title, .md-sidebar--primary .md-nav__title:before, @@ -484,6 +527,25 @@ html { border: none !important; } +/* Ensure primary sidebar inner container is content-based like secondary */ +.md-sidebar--primary .md-sidebar__inner { + height: auto !important; + min-height: auto !important; + display: block !important; + overflow: hidden !important; +} + +/* Ensure all navigation elements stay within sidebar boundaries */ +.md-sidebar--primary .md-nav, +.md-sidebar--primary .md-nav__list, +.md-sidebar--primary .md-nav__item, +.md-sidebar--primary .md-nav__link { + max-width: 100% !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + word-wrap: break-word !important; +} + .md-nav__title { font-weight: 700 !important; /* Ensure the nav title is not sticky — override any theme "sticky" rules */ @@ -515,6 +577,7 @@ html { .md-header .md-search__input { min-width: 14em !important; font-size: 1.5em !important; + height: auto !important; /* Ensure consistent height calculation */ } } @@ -536,7 +599,7 @@ html { width: 100% !important; min-width: auto !important; margin: 0 !important; - padding: 0.75em 4.5em 0.75em 1em !important; /* Extra right padding for close button on mobile */ + padding: 5px 4.5em 5px 1em !important; /* Match docs title padding: 5px vertical, extra right for close button */ font-size: 1.2em !important; border-radius: 8px !important; pointer-events: auto !important; @@ -602,5 +665,735 @@ html { min-width: 20em !important; font-size: 1.5em !important; display: inline-block !important; + height: auto !important; /* Ensure consistent height calculation */ + } +} + +/* Slim scrollbar styling for both sidebars - High specificity override */ +.md-sidebar--primary .md-sidebar__scrollwrap { + scrollbar-width: thin !important; + scrollbar-color: #7c3aed transparent !important; +} + +.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar { + width: 3px !important; + height: 3px !important; + background: transparent !important; + background-color: transparent !important; +} + +.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track { + background: transparent !important; + background-color: transparent !important; +} + +.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb { + background: #7c3aed !important; + background-color: #7c3aed !important; + border-radius: 3px !important; + border: none !important; + min-height: 20px !important; +} + +.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background: #6d28d9 !important; + background-color: #6d28d9 !important; +} + +/* Fix sidebar overflow and ensure proper scrolling */ +.md-sidebar--primary .md-sidebar__scrollwrap { + overflow-y: auto !important; + max-height: inherit !important; +} + +/* Ensure sidebars maintain their position and don't move */ +.md-sidebar--primary { + will-change: auto !important; + transition: none !important; + /* Force sticky positioning and prevent any transforms */ + position: sticky !important; + transform: none !important; +} + +/* Override any MkDocs Material default transforms */ +.md-sidebar--primary[data-md-state] { + transform: none !important; +} + +/* Stronger override for primary sidebar positioning */ +.md-sidebar--primary { + top: 8rem !important; + position: sticky !important; +} + +/* Ensure both sidebars have proper footer clearance */ +@media (min-width: 60em) { + .md-main, + .md-content { + padding-bottom: 3rem; + } + .md-footer { + z-index: 0; + margin-top: 2rem; + } +} + +/* === FINAL SIDEBAR POSITIONING OVERRIDE === */ +/* These rules must be at the end to override all other positioning */ +.md-sidebar--primary, +.md-sidebar--primary[data-md-component="sidebar"], +.md-sidebar--primary[data-md-state], +.md-sidebar--primary[data-md-state="lock"] { + position: sticky !important; + top: 8rem !important; + transform: none !important; + transition: none !important; + will-change: auto !important; + z-index: 200 !important; +} + +/* Override any CSS transforms that might be applied by JavaScript */ +.md-sidebar--primary * { + transform: none !important; +} +/* Force override any inline styles that might be applied by MkDocs Material */ +.md-sidebar--primary[style*="transform"] { + transform: none !important; +} + +/* Additional safety measures to prevent sidebar shifting */ +html .md-sidebar--primary { + position: sticky !important; + top: 8rem !important; +} + +/* Remove any masking pseudo-elements from primary sidebar - like secondary sidebar */ +.md-sidebar--primary .md-sidebar__scrollwrap:after { + display: none !important; +} + +.md-sidebar--primary:before, +.md-sidebar--primary:after, +.md-sidebar--primary .md-sidebar__inner:before, +.md-sidebar--primary .md-sidebar__inner:after { + display: none !important; +} + +.md-header { + position: fixed !important; + top: 70px !important; +} + +.md-main__inner { + margin-top: 70px !important; +} + +nav.md-grid { + max-width: 100%; + margin-left: auto; + margin-right: auto; + padding-left: 1rem; /* default (base) = px-4 */ + padding-right: 1rem; +} + +@media (min-width: 640px) { + nav.md-grid { + padding-left: 1.5rem; /* sm:px-6 */ + padding-right: 1.5rem; + } +} + +@media (min-width: 1024px) { + nav.md-grid { + padding-left: 2rem; /* lg:px-8 */ + padding-right: 2rem; + } +} + +@media (min-width: 1280px) { + nav.md-grid { + padding-left: 2.5rem; /* xl:px-10 */ + padding-right: 2.5rem; + } +} +.md-search__inner { + width: 20rem; +} +@media (max-width: 768px) { + .md-search__inner { + top: 80px !important; + } + + .md-search__input { + pointer-events: auto !important; + color: black !important; + } +} + +.md-header__title { + margin-left: 0.1rem; + width: 100px; +} + +@media (min-width: 1025px) { + .md-header__title { + flex-grow: 0; + flex-basis: auto; + max-width: 400px; + } + .md-header__inner { + display: flex; + align-items: center; + justify-content: space-between; + } +} + +/* === MOBILE SIDEBAR RESPONSIVE FIXES === */ + +/* Mobile breakpoints for sidebar */ +@media (max-width: 76.24em) { + /* Reset sidebar positioning for mobile */ + .md-sidebar--primary, + .md-sidebar--primary[data-md-component="sidebar"], + .md-sidebar--primary[data-md-state], + .md-sidebar--primary[data-md-state="lock"] { + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + max-width: 280px !important; + height: 100vh !important; + max-height: 100vh !important; + z-index: 300 !important; + transform: translateX(-100%) !important; + transition: transform 0.3s ease-in-out !important; + margin: 0 !important; + padding: 1rem !important; + border-radius: 0 !important; + border: none !important; + border-right: 2px solid #7c3aed !important; + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important; + will-change: transform !important; + } + + /* Show sidebar when drawer is checked (mobile menu open) */ + .md-toggle[data-md-toggle="drawer"]:checked + ~ .md-container + .md-sidebar--primary, + input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary { + transform: translateX(0) !important; + } + + /* Mobile sidebar scroll container */ + .md-sidebar--primary .md-sidebar__scrollwrap { + height: 100% !important; + max-height: calc(100vh - 2rem) !important; + overflow-y: auto !important; + padding: 0 !important; + margin: 0 !important; + border: none !important; + } + + /* Mobile sidebar inner container */ + .md-sidebar--primary .md-sidebar__inner { + height: 100% !important; + min-height: 100% !important; + padding: 1rem 0 !important; + } + + /* Hide secondary sidebar on mobile */ + .md-sidebar--secondary { + display: none !important; + } + + /* Ensure main content doesn't overlap */ + .md-main { + margin-left: 0 !important; + margin-right: 0 !important; + } + + .md-main__inner { + margin-top: 4rem !important; + margin-left: 0 !important; + margin-right: 0 !important; + padding: 0 1rem !important; + } + + /* Mobile navigation improvements */ + .md-sidebar--primary .md-nav__title { + padding: 1rem 0 0.5rem !important; + font-size: 1.1rem !important; + border-bottom: 1px solid rgba(124, 58, 237, 0.2) !important; + margin-bottom: 0.5rem !important; + } + + .md-sidebar--primary .md-nav__link { + padding: 0.75rem 1rem !important; + font-size: 0.9rem !important; + line-height: 1.4 !important; + } + + /* Mobile nested navigation */ + .md-sidebar--primary .md-nav__item--nested .md-nav__link { + padding-left: 1rem !important; + } + + .md-sidebar--primary .md-nav[data-md-level="1"] .md-nav__link { + padding-left: 1.5rem !important; + } + + .md-sidebar--primary .md-nav[data-md-level="2"] .md-nav__link { + padding-left: 2rem !important; + } + + .md-sidebar--primary .md-nav[data-md-level="3"] .md-nav__link { + padding-left: 2.5rem !important; + } + + /* Mobile active link styling */ + .md-sidebar--primary .md-nav__item--active > .md-nav__link::before { + right: 0 !important; + width: 3px !important; + height: 100% !important; + top: 0 !important; + transform: none !important; + } + + /* Mobile drawer overlay */ + .md-overlay { + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + background: rgba(0, 0, 0, 0.5) !important; + z-index: 250 !important; + opacity: 0 !important; + pointer-events: none !important; + transition: opacity 0.3s ease !important; + } + + input[id="__drawer"]:checked ~ .md-overlay { + opacity: 1 !important; + pointer-events: auto !important; + } +} + +/* Tablet-specific adjustments */ +@media (max-width: 1024px) and (min-width: 769px) { + .md-sidebar--primary { + max-width: 260px !important; + padding: 0.75rem !important; + } + + .md-sidebar--primary .md-sidebar__scrollwrap { + max-height: calc(100vh - 6rem) !important; + } +} + +/* Extra small mobile devices */ +@media (max-width: 480px) { + .md-sidebar--primary { + max-width: 90vw !important; + padding: 0.75rem !important; + } + + .md-sidebar--primary .md-nav__link { + padding: 0.6rem 0.75rem !important; + font-size: 0.85rem !important; + } + + .md-main__inner { + padding: 0 0.5rem !important; + } +} + +/* Dark theme mobile adjustments */ +@media (max-width: 76.24em) { + [data-md-color-scheme="slate"] .md-sidebar--primary { + background: rgb(23, 20, 29) !important; + border-right: 2px solid #7c3aed !important; + box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3) !important; + } + + [data-md-color-scheme="openobserve"] .md-sidebar--primary { + background: #1a1a2e !important; + border-right: 2px solid #7c3aed !important; + box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4) !important; + } +} + +/* Improve mobile header and navigation button */ +@media (max-width: 76.24em) { + .md-header__button[for="__drawer"] { + margin-right: 0.5rem !important; + color: #7c3aed !important; + } + + .md-header__title { + margin-left: 0.5rem !important; + flex-grow: 1 !important; + } +} + +/* MOBILE FIX: Ensure primary sidebar links are tappable on mobile + - force the sidebar and its inner containers above the overlay + - ensure pointer-events are enabled for sidebar and links + - enable smooth touch scrolling inside the scrollwrap +*/ +@media (max-width: 76.24em) { + /* Make sure the sidebar sits above the overlay and other content */ + .md-sidebar--primary { + z-index: 1000 !important; + pointer-events: auto !important; + -webkit-overflow-scrolling: touch !important; /* smooth scrolling on iOS */ + } + + /* Ensure the scroll container accepts touch and clicks */ + .md-sidebar--primary .md-sidebar__scrollwrap, + .md-sidebar--primary .md-sidebar__inner { + z-index: 1001 !important; + pointer-events: auto !important; + overflow: auto !important; /* allow scrolling and tapping inside */ + } + + /* Make links fully interactive and on top of any small pseudo-elements */ + .md-sidebar--primary .md-nav__link { + position: relative !important; + z-index: 1002 !important; + pointer-events: auto !important; + display: block !important; + } + + /* Prevent any active-indicator pseudo-elements from intercepting taps */ + .md-sidebar--primary .md-nav__item--active > .md-nav__link::before, + .md-sidebar--primary > .o-active-indicator { + pointer-events: none !important; + } + + /* Keep overlay visually behind sidebar and don't intercept taps when drawer is open */ + .md-overlay { + z-index: 900 !important; + } +} + +/* STRONG MOBILE OVERRIDES: fix overlap and non-clickable links */ +@media (max-width: 76.24em) { + /* Make sidebar a narrow drawer (avoid full-width that can cover content) */ + .md-sidebar--primary { + position: fixed !important; + left: 0 !important; + right: auto !important; + width: 280px !important; + max-width: 90vw !important; + transform: translateX(-100%) !important; /* hidden by default */ + z-index: 1200 !important; /* baseline above header */ + top: 0 !important; + height: 100vh !important; + box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important; + background-clip: padding-box !important; + } + + /* When drawer is checked (open), bring sidebar fully into view and above overlay */ + input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary, + .md-toggle[data-md-toggle="drawer"]:checked + ~ .md-container + .md-sidebar--primary { + transform: translateX(0) !important; + z-index: 1400 !important; /* ensure it's above overlay and header */ + pointer-events: auto !important; + } + + /* Ensure overlay remains behind the sidebar when open */ + input[id="__drawer"]:checked ~ .md-overlay, + .md-toggle[data-md-toggle="drawer"]:checked ~ .md-container .md-overlay { + z-index: 1300 !important; /* below the sidebar but above page */ + opacity: 1 !important; + pointer-events: auto !important; + } + + /* Keep header beneath the sidebar so it doesn't capture taps */ + .md-header { + z-index: 1250 !important; + } + + /* Scroll container should allow touch scrolling and not intercept taps */ + .md-sidebar--primary .md-sidebar__scrollwrap, + .md-sidebar--primary .md-sidebar__inner { + overflow-y: auto !important; + -webkit-overflow-scrolling: touch !important; + pointer-events: auto !important; + z-index: 1401 !important; + } + + /* Links: ensure they receive taps and use touch-action for faster response */ + .md-sidebar--primary .md-nav__link { + pointer-events: auto !important; + z-index: 1402 !important; + touch-action: manipulation !important; + } + + /* Deactivate any decorative element from intercepting touches */ + .md-sidebar--primary .md-nav__item--active > .md-nav__link::before, + .md-sidebar--primary > .o-active-indicator, + .md-sidebar--primary:before, + .md-sidebar--primary:after { + pointer-events: none !important; + } + + /* Safety: ensure nothing else is layered above the sidebar when open */ + input[id="__drawer"]:checked ~ .md-container * { + pointer-events: auto !important; + } +} + +/* MOBILE ACCORDION: hide nested navs by default and show only when toggled */ +@media (max-width: 76.24em) { + /* Hide all nested nav blocks by default to prevent them stacking above parents + but keep top-level (data-md-level="0") visible */ + .md-sidebar--primary .md-nav[data-md-level]:not([data-md-level="0"]) { + display: none !important; + visibility: hidden !important; + height: 0 !important; + max-height: 0 !important; + overflow: hidden !important; + position: static !important; + transform: none !important; + } + + /* When the toggle checkbox is checked, show the corresponding nav below the label */ + .md-nav__toggle:checked ~ nav[data-md-level], + .md-nav__toggle:checked + label + nav[data-md-level] { + display: block !important; + visibility: visible !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + position: static !important; + transform: none !important; + } + + /* Ensure child ul lists are visible when their parent nav is shown */ + .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list, + .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list { + display: block !important; + visibility: visible !important; + overflow: visible !important; + max-height: none !important; + } + + /* Make sure labels remain interactive and in normal flow */ + .md-sidebar--primary .md-nav__link { + display: block !important; + position: relative !important; + } +} + +/* MOBILE NESTED-LIST FIX: ensure subitems expand below their parent and are readable */ +@media (max-width: 76.24em) { + /* Allow the sidebar scrolling container and inner container to show expanded content */ + .md-sidebar--primary .md-sidebar__scrollwrap, + .md-sidebar--primary .md-sidebar__inner { + overflow: visible !important; + max-height: none !important; + position: static !important; + } + + /* Ensure nav lists and items flow in document order (not absolutely positioned) */ + .md-sidebar--primary .md-nav__list, + .md-sidebar--primary .md-nav__item, + .md-sidebar--primary .md-nav__item > .md-nav__list { + position: static !important; + overflow: visible !important; + max-height: none !important; + display: block !important; + } + + /* If nested lists were collapsed using transforms or translate, reset them */ + .md-sidebar--primary .md-nav__item .md-nav__list { + transform: none !important; + } + + /* Remove clipping on individual link elements so child lists aren't hidden */ + .md-sidebar--primary .md-nav__link, + .md-sidebar--primary .md-nav__title { + overflow: visible !important; + } + + /* Reduce z-index stacking on nav elements so expanded lists appear in normal flow */ + .md-sidebar--primary .md-nav__list, + .md-sidebar--primary .md-nav__item { + z-index: auto !important; + } +} + +/* MOBILE: keep label text and arrow on one line; ensure nested navs expand in-flow */ +@media (max-width: 76.24em) { + .md-sidebar--primary .md-nav__link { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 0.5rem !important; + white-space: nowrap !important; + width: 100% !important; + box-sizing: border-box !important; + } + + .md-sidebar--primary .md-nav__icon { + margin-left: 0.5rem !important; + flex-shrink: 0 !important; + order: 2 !important; + } + + /* Show nested nav when its toggle checkbox is checked */ + input[type="checkbox"].md-nav__toggle:checked + label + nav[data-md-level], + input[type="checkbox"].md-nav__toggle:checked ~ nav[data-md-level], + .md-nav__toggle:checked + label + nav[data-md-level], + .md-nav__toggle:checked ~ nav[data-md-level] { + display: block !important; + visibility: visible !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + position: static !important; + transform: none !important; + } + + /* Ensure child lists inside shown nav are visible and flow below */ + input[type="checkbox"].md-nav__toggle:checked + + label + + nav[data-md-level] + .md-nav__list, + input[type="checkbox"].md-nav__toggle:checked + ~ nav[data-md-level] + .md-nav__list, + .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list, + .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list { + display: block !important; + visibility: visible !important; + overflow: visible !important; + max-height: none !important; + } + + /* Ensure nested labels stay full-width and don't wrap arrow */ + .md-sidebar--primary .md-nav__item--nested > .md-nav__link { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + white-space: nowrap !important; + } +} + +/* SHOW ACTUAL SUBITEMS: hide duplicate nav titles and force UL visible when open */ +@media (max-width: 76.24em) { + /* Hide the internal nav title that repeats the parent label inside the nav block */ + .md-sidebar--primary nav[data-md-level] > .md-nav__title { + display: none !important; + visibility: hidden !important; + height: 0 !important; + overflow: hidden !important; + } + + /* Show the direct UL (.md-nav__list) when the toggle checkbox is checked or nav reports expanded */ + input.md-nav__toggle:checked + label + nav[data-md-level] > .md-nav__list, + input.md-nav__toggle:checked ~ nav[data-md-level] > .md-nav__list, + nav[data-md-level][aria-expanded="true"] > .md-nav__list { + display: block !important; + visibility: visible !important; + max-height: none !important; + overflow: visible !important; + height: auto !important; + } + + /* Also ensure the nav container itself is visible when toggled */ + input.md-nav__toggle:checked + label + nav[data-md-level], + input.md-nav__toggle:checked ~ nav[data-md-level], + nav[data-md-level][aria-expanded="true"] { + display: block !important; + visibility: visible !important; + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + /* Make sure nested items are in normal flow */ + .md-sidebar--primary .md-nav__item--nested { + display: block !important; + } +} + +/* EXTRA: explicitly show/hide the actual