From 6936485d949c0e7b970fe2ca3fb6d4ce50c6fd08 Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Fri, 5 Apr 2024 10:42:08 -0400
Subject: [PATCH] autocomplete styling

---
 public/style.css | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/public/style.css b/public/style.css
index 73208ac32..16a49ac9d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1062,29 +1062,42 @@ select {
 }
 
 .slashCommandAutoComplete {
+    --ac-color-border: rgb(69, 69, 69);
+    --ac-color-background: rgb(32, 32, 32);
+    --ac-color-text: rgb(204 204 204);
+    --ac-color-matched-background: transparent;
+    --ac-color-matched-text: rgb(108, 171, 251);
+    --ac-color-selected-background: rgb(32, 57, 92);
+    --ac-color-selected-text: rgb(255, 255, 255);
+    --ac-color-hovered-background: rgb(43 45 46);
+    --ac-color-hovered-text: rgb(204 204 204);
     --bottom: 50vh;
-    background: black;
-    border: 1px solid white;
-    color: rgb(204 204 204);
+    background: var(--ac-color-background);
+    border: 1px solid var(--ac-color-border);
+    border-radius: 3px;
+    color: var(--ac-color-text);
     max-height: calc(95vh - var(--bottom));
     list-style: none;
     margin: 0px;
     overflow: auto;
     padding: 0px;
-    position: fixed;
+    position: absolute;
     z-index: 10000;
 
     > .item {
         cursor: pointer;
+        padding: 3px;
         &:hover {
-            background-color: rgb(43 45 46);
+            background-color: var(--ac-color-hovered-background);
+            color: var(--ac-color-hovered-text);
         }
         &.selected {
-            background-color: #20395C;
-            color: white;
+            background-color: var(--ac-color-selected-background);
+            color: var(--ac-color-selected-text);
         }
         .matched {
-            color: #6CABFB;
+            background-color: var(--ac-color-matched-background);
+            color: var(--ac-color-matched-text);
             font-weight: bold;
         }
     }