diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css index 9a86f445b..6698420ab 100644 --- a/assets/css/autocomplete.css +++ b/assets/css/autocomplete.css @@ -136,8 +136,14 @@ font-size: 0.9rem; } -.autocomplete-suggestion:hover, + .autocomplete-suggestion.selected { + background-color: var(--autocompleteSelected); + /* focus indicator on left, similar to default in focus.css */ + box-shadow: inset 2px 0 var(--main); +} + +.autocomplete-suggestion:hover { background-color: var(--autocompleteHover); } diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css index b41b3c56a..6fbc93e0e 100644 --- a/assets/css/custom-props/theme-dark.css +++ b/assets/css/custom-props/theme-dark.css @@ -91,6 +91,7 @@ body.dark { --searchSearch: var(--gray900); --autocompleteBorder: rgba(28,42,60,.75); --autocompletePreview: var(--gray750); + --autocompleteSelected: var(--gray750); --autocompleteHover: var(--gray700); --autocompleteBackground: var(--gray800); --suggestionBorder: var(--gray600); diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css index 9e0a02862..0fc93b5f5 100644 --- a/assets/css/custom-props/theme-light.css +++ b/assets/css/custom-props/theme-light.css @@ -92,7 +92,8 @@ --searchSearch: var(--white); --autocompleteBorder: rgba(3, 9, 19, 0.10); --autocompletePreview: var(--gray25); - --autocompleteHover: var(--grey50, #F0F5F9); + --autocompleteSelected: var(--gray25); + --autocompleteHover: var(--gray50); --autocompleteBackground: var(--white); --suggestionBorder: var(--gray200); --autocompleteResults: var(--gray600);