Update autocomplete, add dark mode support

resources/assets/sass/appdark.scss

@@ -154,3 +154,56 @@ 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

@@ -603,16 +603,15 @@ details summary::-webkit-details-marker {
     height: auto;
     max-height: 300px;
     min-width: 120px;
-  max-width: 100vw;
+    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);
-}
     
-.tribute-container ul {
+    ul {
         margin: 0;
         margin-top: 2px;
         padding: 0;
@@ -622,30 +621,27 @@ details summary::-webkit-details-marker {
         border: 1px solid rgba(#000, 0.13);
         background-clip: padding-box;
         overflow: hidden;
-}
+    }
 
-.tribute-container li {
+    li {
         color: #000;
         padding: 5px 15px;
         cursor: pointer;
         font-size: 14px;
         overflow-x: hidden !important;
-}
         
-.tribute-container li.highlight,
+        &.highlight,
-.tribute-container li:hover {
+        &:hover {
             background: #2c78bf;
             color: #fff;
-}
+        }
-
-.tribute-container li span {
-  font-weight: bold;
-}
         
-.tribute-container li.no-match {
+        &.no-match {
             cursor: default;
-}
+        }
+    }
 
-.tribute-container .menu-highlighted {
+    .menu-highlighted {
         font-weight: bold;
+    }
 }