From 09366401a3c864704891d747565b4d070f8d0c93 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Sun, 21 Aug 2022 23:42:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Add=20focus=20color=20chan?=
 =?UTF-8?q?ge=20in=20settings=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/base.css        | 1 +
 src/views/SettingsView.vue | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 4afe561..e9c447f 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -3,6 +3,7 @@
   --element-color: #333030;
   --element-color-hover: #292424;
   --element-border-input: #4e7a3a;
+  --element-border-focus: #9ac982;
   --element-border-action: #1f5b63;
   --text-color: #bdbdbd;
   --font-family: "sourcesanspro";
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 00787f3..6068a3f 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -82,13 +82,18 @@ select {
   border: 2px solid var(--element-border-input);
   border-radius: 5px;
   background-color: var(--element-color);
-  transition: background-color 0.2s;
+  transition: 0.2s;
+  transition-property: background-color border-color;
 }
 
 select:hover {
   background-color: var(--element-color-hover);
 }
 
+select:focus {
+  border-color: var(--element-border-focus);
+}
+
 select[multiple] {
   min-width: 90px;
 }