style: improve ChatSearch visual contrast and prominence

🎨 Visual Enhancements:
- Enhance shadow from shadow-lg to shadow-2xl for better depth and separation
- Improve background contrast (dark mode: gray-800 → gray-900)
- Strengthen border colors for better definition against various backgrounds
- Add backdrop-blur-sm for modern visual effect and content separation
- Maintain border at 1px thickness for refined appearance

🔍 Improved User Experience:
- Search box now stands out clearly against both light and dark backgrounds
- Better visual hierarchy with enhanced depth perception
- More prominent appearance without being overwhelming
- Improved accessibility with higher contrast ratios
- Professional modern styling with subtle backdrop blur

📱 Cross-Theme Compatibility:
- Enhanced visibility in light mode with stronger gray-300 borders
- Better contrast in dark mode with gray-900 background and gray-600 borders
- Consistent appearance across different chat background colors
- Maintains responsive design and accessibility standards

The search overlay is now much more visible and easier to locate when activated,
addressing user feedback about the search box getting lost against the background.
This commit is contained in:
PVBLIC Foundation 2025-06-20 13:18:42 -07:00
parent e353beada0
commit 1deae34656

View File

@ -308,7 +308,7 @@
{#if show}
<div
bind:this={searchContainer}
class="fixed top-4 right-4 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-3 w-80"
class="fixed top-4 right-4 z-50 bg-white dark:bg-gray-900 rounded-lg shadow-2xl border border-gray-300 dark:border-gray-600 p-3 w-80 backdrop-blur-sm"
class:animate-pulse={isNavigating}
transition:fly={{ y: -20, duration: 200 }}
on:keydown={handleKeydown}