Complete <select> migration (hestiacp#2919)

* Add initial .form-control styles, apply to "Hostname" text input

* Refactor Setup Webapp form to use new form controls

* Apply new selects to Add/Edit Package forms

* Apply new selects to Add/Edit Mail forms

* Apply new selects to Add/Edit DNS forms

* Fix checkboxes <label> on Setup Webapp form

* Apply new selects to Add/Edit DNS Record forms

* Apply new selects to Add/Edit Firewall Rule forms

* Apply new selects to Add Firewall IP List form

* Apply new selects to Add/Edit IP forms

* Apply new select to Add IP form

(missing from previous commit)

* Apply new select to Ban IP Address form

* Apply new select to Add Database form

* Remove old .vst-list CSS

* Replace last reference to .vst-list in JS

Author: AlecRust

web/css/src/themes/dark.css

@@ -657,27 +657,30 @@ label:hover {
 
 }
 
-.vst-input {
+.vst-input,
+.form-control {
   background-color: #454545;
   border: 1px solid #606060;
   color: #d4d4d4;
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-.vst-input:hover {
+.vst-input:hover,
+.form-control:hover {
   border-color: #0090ff;
   background-color: #494949;
 }
 
-.vst-input:focus {
+.vst-input:focus,
+.form-control:focus {
   background-color: #222;
   border-color: #0080df;
   color: #fff;
   box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
 }
 
 .vst-input:disabled,
-.vst-list:disabled,
+.form-control:disabled,
 .form-select:disabled,
 .vst-textinput:disabled {
   background-color: #303030;
@@ -690,7 +693,7 @@ label:hover {
 }
 
 .vst-input:disabled:hover,
-.vst-list:disabled:hover,
+.form-control:disabled:hover,
 .form-select:disabled:hover,
 .vst-textinput:disabled:hover {
   border-color: #606060 !important;
@@ -713,7 +716,6 @@ label:hover {
   box-shadow: none !important;
 }
 
-.vst-list,
 .form-select {
   background-color: #454545;
   border: 1px solid #606060;
@@ -738,13 +740,11 @@ textarea:focus::placeholder {
   color: #909090 !important;
 }
 
-.vst-list:hover,
 .form-select:hover {
   border-color: #0090ff;
   background-color: #494949;
 }
 
-.vst-list:focus,
 .form-select:focus {
   background-color: #222;
   border-color: #0080df;

web/css/src/themes/default.css

@@ -625,7 +625,6 @@ form#vstobjects .alert {
 
 .app-form label {
   font-size: 0.85rem;
-  padding-bottom: 3px;
   font-weight: 600;
   cursor: default;
 }
@@ -2295,6 +2294,21 @@ label:hover {
   color: #333;
 }
 
+.form-control {
+  background-color: #fff;
+  border: 1px solid #cfcfcf;
+  display: block;
+  width: 100%;
+  padding: 8px 3px 8px 14px;
+  font-size: 0.8rem;
+  font-weight: normal;
+  color: #4e4e4e;
+  border-radius: 4px;
+  line-height: 1.5;
+  appearance: none;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
+}
+
 .vst-input {
   background-color: #fff;
   border: 1px solid #cfcfcf;
@@ -2310,18 +2324,20 @@ label:hover {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-.vst-input:hover {
+.vst-input:hover,
+.form-control:hover {
   border: 1px solid #94c8f0;
 }
 
-.vst-input:focus {
+.vst-input:focus,
+.form-control:focus {
   border: 1px solid #008fee;
   background-color: #d7f9ff;
   color: #333;
 }
 
 .vst-input:disabled,
-.vst-list:disabled,
+.form-control:disabled,
 .form-select:disabled,
 .vst-textinput:disabled {
   background-color: #e7e7e7;
@@ -2330,13 +2346,14 @@ label:hover {
 }
 
 .vst-input:focus:disabled,
+.form-control:focus:disabled,
 .vst-textinput:disabled {
   border-color: #dedede;
   background-color: #f1f1f1;
 }
 
 .vst-input:disabled:hover,
-.vst-list:disabled:hover,
+.form-control:disabled:hover,
 .form-select:disabled:hover,
 .vst-textinput:disabled:hover {
   border-color: #cfcfcf;
@@ -2365,37 +2382,6 @@ label:hover {
   background-color: #fff;
 }
 
-.vst-list {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #4e4e4e;
-  font-family: Exo, Arial, Helvetica, sans-serif;
-  font-size: 0.8rem;
-  font-weight: normal;
-  height: 36px;
-  cursor: pointer;
-  margin: 2px 6px 0 0;
-  min-width: 380px;
-  padding: 4px 1px 4px 10px;
-  background-image: url("/images/arrow.png");
-  background-position: 360px;
-  background-repeat: no-repeat;
-  width: 380px;
-  appearance: none;
-  text-shadow: 0 0 0 #4b4b4b;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-}
-
-.vst-list:hover {
-  border: 1px solid #94c8f0;
-}
-
-.vst-list:focus {
-  border: 1px solid #008fee;
-  color: #333;
-}
-
 .vst-text {
   cursor: default;
 }

web/css/src/themes/flat.css

@@ -89,11 +89,11 @@ strong {
   box-shadow: none;
 }
 
-.vst-input {
+.vst-input,
+.form-control {
   box-shadow: none;
 }
 
-.vst-list,
 .form-select {
   box-shadow: none;
 }

web/css/src/themes/vestia.css

@@ -278,12 +278,12 @@ strong {
     inset 0 0 2px rgb(255 255 255 / 100%) !important;
 }
 
-.vst-input {
+.vst-input,
+.form-control {
   box-shadow: none;
   border-radius: 0 !important;
 }
 
-.vst-list,
 .form-select {
   box-shadow: none;
   border-radius: 0 !important;
@@ -356,6 +356,7 @@ a.vst-text:hover b,
 }
 
 .vst-input:focus,
+.form-control:focus,
 .vst-textinput:focus,
 .login .vst-input:focus,
 .login .vst-textinput:focus {
@@ -364,14 +365,13 @@ a.vst-text:hover b,
   color: #333;
 }
 
-.vst-list:focus,
 .form-select:focus {
   border: 1px solid #ff6701;
   color: #333;
 }
 
 .vst-input:hover,
-.vst-list:hover,
+.form-control:hover,
 .form-select:hover,
 .vst-textinput:hover {
   border: 1px solid #e95e00;
@@ -514,7 +514,7 @@ meter {
 }
 
 .vst-input,
-.vst-list,
+.form-control,
 .form-select,
 .vst-textinput {
   font-family: Arial, Helvetica, sans-serif !important;