diff --git a/webui/index.html b/webui/index.html index 310b8fca..cd2838b1 100644 --- a/webui/index.html +++ b/webui/index.html @@ -7886,6 +7886,11 @@ + +
diff --git a/webui/static/downloads.js b/webui/static/downloads.js index a772d9e5..ec55d38f 100644 --- a/webui/static/downloads.js +++ b/webui/static/downloads.js @@ -5043,6 +5043,8 @@ for (const _src of SOURCE_ORDER) _gsState.configuredSources[_src] = true; input.addEventListener('focus', () => { bar.classList.add('active'); + const aura = document.getElementById('gsearch-aura'); + if (aura) aura.classList.add('active'); _gsState.active = true; const shortcut = document.getElementById('gsearch-shortcut'); if (shortcut) shortcut.style.display = 'none'; @@ -5125,18 +5127,22 @@ for (const _src of SOURCE_ORDER) _gsState.configuredSources[_src] = true; function _gsUpdateVisibility() { const bar = document.getElementById('gsearch-bar'); + const aura = document.getElementById('gsearch-aura'); if (!bar) return; // Hide on the Search page where the unified search already exists. Accept the // legacy 'downloads' id for callers that predate the page rename. const onSearchPage = typeof currentPage !== 'undefined' && (currentPage === 'search' || currentPage === 'downloads'); bar.style.display = onSearchPage ? 'none' : ''; + if (aura) aura.classList.toggle('hidden', onSearchPage); if (onSearchPage && _gsState.active) _gsDeactivate(); } function _gsDeactivate() { const bar = document.getElementById('gsearch-bar'); + const aura = document.getElementById('gsearch-aura'); const shortcut = document.getElementById('gsearch-shortcut'); if (bar) bar.classList.remove('active'); + if (aura) aura.classList.remove('active'); if (shortcut) shortcut.style.display = ''; _gsState.active = false; _gsHideResults(); diff --git a/webui/static/style.css b/webui/static/style.css index b2d70932..c7743e65 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -5336,6 +5336,38 @@ body.helper-mode-active #dashboard-activity-feed:hover { GLOBAL SEARCH BAR — Spotlight-style search from anywhere ================================================================================== */ +/* Ambient glow under the global search bar — a radial gradient that emanates + from the bar's position and tapers out toward the window corners. Pointer + events disabled so it never intercepts clicks; hidden on /search where the + bar itself is hidden. */ +.gsearch-aura { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 260px; + pointer-events: none; + z-index: 99990; /* below the bar (99998) but above most page content */ + opacity: 0.55; + transition: opacity 0.4s ease, background 0.4s ease; + background: + radial-gradient(ellipse 620px 230px at 50% 100%, + rgba(var(--accent-rgb), 0.22) 0%, + rgba(var(--accent-rgb), 0.10) 32%, + rgba(var(--accent-rgb), 0.03) 62%, + transparent 85%); +} +.gsearch-aura.hidden { display: none; } +.gsearch-aura.active { + opacity: 1; + background: + radial-gradient(ellipse 820px 280px at 50% 100%, + rgba(var(--accent-rgb), 0.40) 0%, + rgba(var(--accent-rgb), 0.18) 28%, + rgba(var(--accent-rgb), 0.05) 58%, + transparent 85%); +} + .gsearch-bar { position: fixed; bottom: 24px;