From 99a6e65d1523891eb79641ce94ce8cd618b717d3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 21:40:05 +0200 Subject: [PATCH] style(next): update the colors of combo boxes --- src/public/stylesheets/theme-next-dark.css | 4 +++ src/public/stylesheets/theme-next-light.css | 4 +++ src/public/stylesheets/theme-next/forms.css | 29 +++++++++++++++++++++ 3 files changed, 37 insertions(+) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 6bac8f85d..59937d1bb 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -46,6 +46,10 @@ --input-action-button-color: #c6c6c6; --input-action-button-hover: white; + --select-focus-background: #333; + --select-focus-text-color: var(--input-text-color); + --select-dropdown-text-color: var(--input-text-color); + --hover-item-text-color: #efefef; --hover-item-background-color: #ffffff24; --hover-item-border-color: transparent; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 9d9ce3895..64a0101ef 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -46,6 +46,10 @@ --input-action-button-color: #575757; --input-action-button-hover: black; + --select-focus-background: white; + --select-focus-text-color: var(--input-text-color); + --select-dropdown-text-color: var(--input-text-color); + --hover-item-text-color: black; --hover-item-background-color: #0000001a; --hover-item-border-color: transparent; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 163b934fe..fd7561439 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -121,4 +121,33 @@ input::selection, .input-group .input-clearer-button { background: transparent !important; +} + +/* Combo boxes */ + +select, select.form-select { + outline: 3px solid transparent; + outline-offset: 6px; + background-color: var(--input-background-color); + color: var(--input-text-color); + border: unset; +} + +select:hover, select.form-select:hover { + background-color: var(--input-hover-background); + color: var(--input-hover-color); +} + +select:focus, select.form-select:focus { + box-shadow: unset; + outline: 3px solid var(--input-focus-outline-color); + outline-offset: 0; + background-color: var(--select-focus-background); + color: var(--select-focus-text-color); + transition: outline-color 50ms linear, + outline-offset 200ms ease-out; +} + +option { + color: var(--select-dropdown-text-color); } \ No newline at end of file