From d1d74707a72fc842fed079175b63b04bad31b288 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Mon, 1 Mar 2021 22:52:12 -0700
Subject: [PATCH] Update autocomplete, add dark mode support

---
 resources/assets/sass/appdark.scss | 55 ++++++++++++++++-
 resources/assets/sass/custom.scss  | 94 ++++++++++++++----------------
 2 files changed, 99 insertions(+), 50 deletions(-)

diff --git a/resources/assets/sass/appdark.scss b/resources/assets/sass/appdark.scss
index f6f60287c..e8454f580 100644
--- a/resources/assets/sass/appdark.scss
+++ b/resources/assets/sass/appdark.scss
@@ -153,4 +153,57 @@ hr {
 
 .border {
 	border-color: #282828 !important;
-}
\ No newline at end of file
+}
+
+.tribute-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: auto;
+    max-height: 300px;
+    min-width: 120px;
+    max-width: 500px;
+    overflow: auto;
+    display: block;
+    z-index: 999999;
+    border-radius: 4px;
+    border: 1px solid #282828;
+
+    ul {
+      margin: 0;
+      margin-top: 2px;
+      padding: 0;
+      list-style: none;
+      background: #181818;
+      border-radius: 4px;
+      border: 1px solid #282828;
+      background-clip: padding-box;
+      overflow: hidden;
+    }
+
+    li {
+        color: #ADAFAE;
+        padding: 5px 15px;
+        cursor: pointer;
+        font-size: 14px;
+        overflow-x: hidden !important;
+        
+        span {
+          font-weight: bold;
+        }
+
+        &.highlight,
+        &:hover {
+            background: #11304c;
+            color: #fff;
+        }
+
+        &.no-match {
+            cursor: default;
+        }
+    }
+
+    .menu-highlighted {
+        font-weight: bold;
+    }
+}
diff --git a/resources/assets/sass/custom.scss b/resources/assets/sass/custom.scss
index c214bacc4..fb6e6d60d 100644
--- a/resources/assets/sass/custom.scss
+++ b/resources/assets/sass/custom.scss
@@ -597,55 +597,51 @@ details summary::-webkit-details-marker {
 }
 
 .tribute-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: auto;
-  max-height: 300px;
-  min-width: 120px;
-  max-width: 100vw;
-  overflow: auto;
-  display: block;
-  z-index: 999999;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(#000, 0.13);
-}
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: auto;
+    max-height: 300px;
+    min-width: 120px;
+    max-width: 500px;
+    overflow: auto;
+    display: block;
+    z-index: 999999;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(#000, 0.13);
+    
+    ul {
+        margin: 0;
+        margin-top: 2px;
+        padding: 0;
+        list-style: none;
+        background: #fff;
+        border-radius: 4px;
+        border: 1px solid rgba(#000, 0.13);
+        background-clip: padding-box;
+        overflow: hidden;
+    }
 
-.tribute-container ul {
-  margin: 0;
-  margin-top: 2px;
-  padding: 0;
-  list-style: none;
-  background: #fff;
-  border-radius: 4px;
-  border: 1px solid rgba(#000, 0.13);
-  background-clip: padding-box;
-  overflow: hidden;
-}
+    li {
+        color: #000;
+        padding: 5px 15px;
+        cursor: pointer;
+        font-size: 14px;
+        overflow-x: hidden !important;
+        
+        &.highlight,
+        &:hover {
+            background: #2c78bf;
+            color: #fff;
+        }
+        
+        &.no-match {
+            cursor: default;
+        }
+    }
 
-.tribute-container li {
-  color: #000;
-  padding: 5px 15px;
-  cursor: pointer;
-  font-size: 14px;
-  overflow-x: hidden !important;
-}
-
-.tribute-container li.highlight,
-.tribute-container li:hover {
-  background: #2c78bf;
-  color: #fff;
-}
-
-.tribute-container li span {
-  font-weight: bold;
-}
-
-.tribute-container li.no-match {
-  cursor: default;
-}
-
-.tribute-container .menu-highlighted {
-  font-weight: bold;
+    .menu-highlighted {
+        font-weight: bold;
+    }
 }