style(next): update the colors of combo boxes

TriliumNext · Jan 14, 2025 · 99a6e65 · 99a6e65
1 parent 9724b19
commit 99a6e65
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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);
 }