Fix and Revert "Revert "⌨️Add autocomplete widget with command line completion""

This reverts commit dd5dfdbabd.

assets/css/styles.scss

@@ -86,20 +86,20 @@ button {
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
-  transition: all .2s;
+  transition: all 0.2s ease-in-out;
 
-  &[disabled],
-  &.disabled {
+  &[disabled], &.disabled {
     opacity: 0.7;
     cursor: default;
   }
 
-  &:hover,
-  &:focus {
-    background-color: var(--act-color);
-    box-shadow: inset 0 0 0 2px var(--ac-color);
-    color: var(--ac-color);
-  }
+	// Only show hover and focus if the button is *not*
+	// disabled.
+	&:not([disabled]):hover, &:not(.disabled):focus {
+		background-color: transparent;
+		box-shadow: inset 0 0 0 2px var(--ac-color);
+		color: var(--ac-color);
+	}
 }
 
 fieldset {
@@ -237,7 +237,8 @@ input[type="checkbox"] {
 }
 
 .disabled,
-input[disabled] {
+input[disabled],
+button[disabled] {
   background-color: var(--err-color);
   color: #b2b2b2;
 }

assets/css/themes.scss

@@ -10,6 +10,8 @@
   --bg-dark-color: #000000;
   // Background color
   --bg-color: #121212;
+	// Auto-complete color
+	--atc-color: #212121;
   // Text color
   --fg-color: #FFF;
 
@@ -26,6 +28,8 @@
   --bg-dark-color: #ffffff;
   // Background color
   --bg-color: #F6F8FA;
+	// Auto-complete color
+	--atc-color: #F1F1F1;
   // Text color
   --fg-color: #121212;
 
@@ -36,4 +40,4 @@
   --ac-color: #51FF0D;
   // Active text color
   --act-color: #121212;
-}
+}