Add hover state for the quick search box

This commit is contained in:
Adorian Doran 2024-11-29 12:34:32 +02:00
parent e6aa8a5299
commit 04efba1f26

View File

@ -103,6 +103,7 @@
--quick-search-background: #00000012; --quick-search-background: #00000012;
--quick-search-color: #06060682; --quick-search-color: #06060682;
--quick-search-hover-background: #00000020;
--quick-search-focus-border: #00000029; --quick-search-focus-border: #00000029;
--quick-search-focus-background: #ffffff80; --quick-search-focus-background: #ffffff80;
--quick-search-focus-color: #000; --quick-search-focus-color: #000;
@ -219,6 +220,7 @@
--quick-search-background: #dcdcdc; --quick-search-background: #dcdcdc;
--quick-search-color: gray; --quick-search-color: gray;
--quick-search-hover-background: #00000020;
--quick-search-focus-border: gray; --quick-search-focus-border: gray;
--quick-search-focus-background: #dcdcdc; --quick-search-focus-background: #dcdcdc;
--quick-search-focus-color: black; --quick-search-focus-color: black;
@ -396,6 +398,12 @@
transition: background-color 200ms ease-in; transition: background-color 200ms ease-in;
} }
#left-pane .quick-search:hover:before {
/* Hovered search box background rectangle */
background: var(--quick-search-hover-background);
transition: background-color 75ms ease-out;
}
#left-pane .quick-search:focus-within:before { #left-pane .quick-search:focus-within:before {
/* Focused search box background rectangle */ /* Focused search box background rectangle */
border-color: var(--quick-search-focus-border); border-color: var(--quick-search-focus-border);