fix search bar hover

Author: paperbenni

.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 import DefaultTheme from "vitepress/theme";
 import "@catppuccin/vitepress/theme/mocha/blue.css";
 import './styles/keyboard-shortcuts.css'
+import './styles/custom.css'
 import { h } from "vue";
 import AnnouncementBanner from './components/AnnouncementBanner.vue'
 

.vitepress/theme/styles/custom.css

@@ -0,0 +1,19 @@
+/* Fix search bar hover animation */
+.DocSearch-Button {
+  transition: all 0.2s ease;
+}
+
+.DocSearch-Button:hover {
+  background-color: var(--vp-c-gray-2) !important;
+  box-shadow: inset 0 0 0 1px var(--vp-c-brand-1) !important;
+}
+
+.dark .DocSearch-Button:hover {
+  background-color: var(--vp-c-bg) !important;
+}
+
+/* Ensure the icon and text colors are correct on hover */
+.DocSearch-Button:hover .DocSearch-Search-Icon,
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+  color: var(--vp-c-text-1) !important;
+}