/** * Version Selector Responsive Styles * * This file contains styles for Mike's version selector to improve UX: * 1. Hide version selector when search is active * 2. Hide version selector on mobile devices * 3. Smooth transitions for better user experience */ /* ============================================ Hide version selector when search is active ============================================ */ /** * When search overlay is visible, hide the version selector * This prevents UI overlap and improves search experience * * Multiple selectors to cover different Material theme structures: * - Direct sibling selector for search toggle * - Body class when search is active * - Search visible state */ /* When search input is focused or checked - hide version selector AND mega-menu */ /* The search checkbox is BEFORE the header, so we use ~ (sibling) selector */ /* Note: mega-menu is OUTSIDE .md-header, so we target it separately */ [data-md-toggle="search"]:checked ~ .md-header .md-version, [data-md-toggle="search"]:checked ~ .mega-menu { display: none !important; } /* Alternative: if checkbox is inside header, use parent selector */ .md-header:has([data-md-toggle="search"]:checked) .md-version { display: none !important; } /* When search overlay is visible */ .md-search--active ~ .md-header .md-version, .md-search--active ~ .mega-menu, body:has(.md-search--active) .md-version, body:has(.md-search--active) .mega-menu { display: none !important; } /* Alternative: fade out animation (comment above and uncomment this if you prefer fade) */ /* [data-md-toggle="search"]:checked ~ .md-header .md-version, [data-md-toggle="search"]:checked ~ * .md-version { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease-in-out, visibility 0s 0.2s; } */ /** * Normal state: version selector is visible */ .md-version { transition: opacity 0.25s ease-in-out; } /* ============================================ Hide version selector AND mega-menu on mobile devices ============================================ */ /** * Mobile breakpoint: = 80em (1280px): keep the inline search box but cap its width so * everything fits on one row. * - 60em-80em (960-1280px): there is no room for an inline box next to all the * other items, so the search collapses to its icon and opens as the * full-width overlay (exactly what Material does natively below 60em). This * re-applies Material 9.5's mobile-search rules in that band. * - = 60em) and style it to match the Ask AI button so the two header buttons form a consistent pair. */ .md-header__button[for="__search"] { display: flex !important; align-items: center; justify-content: center; width: 42px !important; height: 42px !important; margin: 0 0.6rem 0 0 !important; padding: 0 !important; background-color: var(--search-bg-color) !important; border: 1px solid var(--search-border-color) !important; border-radius: 6px !important; transition: background-color 0.15s ease, border-color 0.15s ease; } .md-header__button[for="__search"]:hover { background-color: var(--neutral-95); border-color: #FF7E13; } /* Collapse the Ask AI button to an icon-only square (matching the search icon button) when the search itself becomes an icon. */ .md-header__ai-button:not(.md-header__ai-button--mobile) .md-header__ai-button-label { display: none; } .md-header__ai-button:not(.md-header__ai-button--mobile) { width: 42px; padding: 0; justify-content: center; } /* Collapse the inline field into the off-canvas overlay field. */ .md-search__inner { position: fixed !important; top: 0 !important; left: 0 !important; float: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; opacity: 0; overflow: hidden; z-index: 2; transform: translateX(5%); transition: width 0.3s, height 0.3s, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, opacity 0.15s 0.15s; } [data-md-toggle="search"]:checked ~ .md-header .md-search__inner { width: 100% !important; height: 100% !important; opacity: 1; transform: translateX(0); transition: width, height, transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1) 0.15s, opacity 0.15s 0.15s; } .md-search__overlay { background-color: var(--md-default-bg-color); border-radius: 1rem; width: 0; height: 2rem; overflow: hidden; pointer-events: none; position: absolute; top: -1rem; left: -2.2rem; opacity: 0; transform-origin: center center; transition: transform 0.3s 0.1s, opacity 0.2s 0.2s, width 0s 0.3s; } [data-md-toggle="search"]:checked ~ .md-header .md-search__overlay { width: 100%; opacity: 1; transform: scale(75); transition: transform 0.4s, opacity 0.1s; } .md-search__form { background-color: var(--md-default-bg-color) !important; border-radius: 0 !important; height: 2.4rem !important; } .md-search__input { width: 100% !important; height: 2.4rem !important; padding-left: 2.2rem !important; font-size: 0.9rem !important; } .md-search__icon[for="__search"] { top: 0.6rem; left: 0.8rem; } .md-search__icon[for="__search"] svg:first-child { display: block; } .md-search__icon[for="__search"] svg:last-child { display: none; } .md-search__options { top: 0.6rem; right: 0.8rem; } .md-search__output { top: 2.4rem !important; bottom: 0; } .md-search__scrollwrap { width: auto !important; } } /* At