Update autocomplete, add dark mode support

resources/assets/sass/appdark.scss

@@ -153,4 +153,57 @@ hr {
 
 .border {
 	border-color: #282828 !important;
-}
+}
+
+.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;
+    }
+}

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);
-}
-
-.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;
-}
-
-.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;
-}
+    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 li.no-match {
-  cursor: default;
-}
+    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 .menu-highlighted {
-  font-weight: bold;
+    .menu-highlighted {
+        font-weight: bold;
+    }
 }