From c72ee4ff58292bd0838d50ec1d9b9a178255f433 Mon Sep 17 00:00:00 2001 From: Liam Mitchell Date: Mon, 30 Dec 2024 10:26:33 +0100 Subject: [PATCH 1/2] Autocomplete suggestion focus outline Give autocomplete suggestion a visible focus outline to differentiate from hovered suggestion --- assets/css/autocomplete.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css index 9a86f445b..3ce851881 100644 --- a/assets/css/autocomplete.css +++ b/assets/css/autocomplete.css @@ -141,6 +141,10 @@ background-color: var(--autocompleteHover); } +.autocomplete-suggestion.selected { + box-shadow: inset 0 0 0 1px var(--searchBarFocusColor); +} + .autocomplete-suggestion:not(.selected) .autocomplete-preview-indicator { display: none; } From 9acbedda6bf445c807baf6210f1b84616e327f87 Mon Sep 17 00:00:00 2001 From: Liam Mitchell Date: Mon, 30 Dec 2024 13:53:26 +0100 Subject: [PATCH 2/2] Reduce focus outline to left side and add subtle bg --- assets/css/autocomplete.css | 10 ++++++---- assets/css/custom-props/theme-dark.css | 1 + assets/css/custom-props/theme-light.css | 3 ++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css index 3ce851881..6698420ab 100644 --- a/assets/css/autocomplete.css +++ b/assets/css/autocomplete.css @@ -136,13 +136,15 @@ font-size: 0.9rem; } -.autocomplete-suggestion:hover, + .autocomplete-suggestion.selected { - background-color: var(--autocompleteHover); + background-color: var(--autocompleteSelected); + /* focus indicator on left, similar to default in focus.css */ + box-shadow: inset 2px 0 var(--main); } -.autocomplete-suggestion.selected { - box-shadow: inset 0 0 0 1px var(--searchBarFocusColor); +.autocomplete-suggestion:hover { + background-color: var(--autocompleteHover); } .autocomplete-suggestion:not(.selected) .autocomplete-preview-indicator { 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);