Start refactoring <select> (hestiacp#2907)

* Add new <select> HTML/CSS and apply to Edit User form

* Apply new selects to Edit Cron form

* Apply new selects to Add Cron form

* Apply new selects to Add User form

* Apply new selects to Add/Edit Web forms

* Remove hidden/unused field

* Due to change in last commit

* Apply new selects to Edit Server form

* Time to clean up a lot of old code

Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>

Author: AlecRust

web/add/web/index.php

@@ -678,6 +678,7 @@ label:hover {
 
 .vst-input:disabled,
 .vst-list:disabled,
+.form-select:disabled,
 .vst-textinput:disabled {
   background-color: #303030;
   text-shadow: 1px 1px rgb(0 0 0 / 30%);
@@ -690,6 +691,7 @@ label:hover {
 
 .vst-input:disabled:hover,
 .vst-list:disabled:hover,
+.form-select:disabled:hover,
 .vst-textinput:disabled:hover {
   border-color: #606060 !important;
 }
@@ -711,7 +713,8 @@ label:hover {
   box-shadow: none !important;
 }
 
-.vst-list {
+.vst-list,
+.form-select {
   background-color: #454545;
   border: 1px solid #606060;
   color: #d4d4d4;
@@ -735,43 +738,20 @@ textarea:focus::placeholder {
   color: #909090 !important;
 }
 
-select.vst-list:-moz-focusring {
-
-}
-
-.vst-list.long-2 {
-
-}
-
-.vst-list option {
-
-}
-
-.vst-list:hover {
+.vst-list:hover,
+.form-select:hover {
   border-color: #0090ff;
   background-color: #494949;
 }
 
-.vst-list:focus {
+.vst-list:focus,
+.form-select:focus {
   background-color: #222;
   border-color: #0080df;
   color: #fff;
   box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
 }
 
-.vst-list.flat {
-  border: 1px solid #454545;
-  color: #fff;
-}
-
-.vst-list.flat:hover {
-  color: #ff3478;
-}
-
-.vst-list.flat option {
-  color: #d4d4d4;
-}
-
 a.vst-text,
 a.vst-text b {
   color: #fff;

web/css/src/themes/dark.css

@@ -2322,6 +2322,7 @@ label:hover {
 
 .vst-input:disabled,
 .vst-list:disabled,
+.form-select:disabled,
 .vst-textinput:disabled {
   background-color: #e7e7e7;
   text-shadow: 1px 1px rgb(255 255 255 / 100%);
@@ -2335,7 +2336,9 @@ label:hover {
 }
 
 .vst-input:disabled:hover,
-.vst-list:disabled:hover .vst-textinput:disabled:hover {
+.vst-list:disabled:hover,
+.form-select:disabled:hover,
+.vst-textinput:disabled:hover {
   border-color: #cfcfcf;
 }
 
@@ -2359,7 +2362,7 @@ label:hover {
 }
 
 .vst-input.vst-list-editor:focus {
-  background-color: white;
+  background-color: #fff;
 }
 
 .vst-list {
@@ -2384,19 +2387,6 @@ label:hover {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-select.vst-list:-moz-focusring {
-  color: transparent;
-}
-
-.vst-list.long-2 {
-  width: 486px;
-  background-position: 465px;
-}
-
-.vst-list option {
-  padding: 6px 1px 6px 15px;
-}
-
 .vst-list:hover {
   border: 1px solid #94c8f0;
 }
@@ -2406,25 +2396,6 @@ select.vst-list:-moz-focusring {
   color: #333;
 }
 
-.vst-list.flat {
-  border: 1px solid #fff;
-  color: #326b9b;
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 0.8rem;
-  margin-left: -10px;
-  text-shadow: none !important;
-  box-shadow: none !important;
-}
-
-.vst-list.flat:hover {
-  color: #c36;
-}
-
-.vst-list.flat option {
-  color: #4e4e4e;
-}
-
 .vst-text {
   cursor: default;
 }
@@ -2586,6 +2557,39 @@ a.vst-text:active b {
   border: none !important;
 }
 
+.form-label {
+  margin-bottom: 6px;
+  display: inline-block;
+}
+
+.form-select {
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  font-weight: normal;
+  font-size: .8rem;
+  padding: 8px 35px 7px 10px;
+  line-height: 1.5;
+  border-radius: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  color: #4e4e4e;
+  appearance: none;
+  background-image: url(/images/arrow.png);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  text-shadow: 0 0 0 #4b4b4b;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
+}
+
+.form-select:hover {
+  border: 1px solid #94c8f0;
+}
+
+.form-select:focus {
+  border: 1px solid #008fee;
+}
+
 .form-check {
   padding-left: 20px;
   margin-bottom: 2px;
@@ -3793,29 +3797,32 @@ li[aria-expanded="true"] a {
   color: #c36;
 }
 
-.cron-helper-tabs select.short {
-  background-position: -388px -604px;
-  min-width: 30px;
-  width: 70px;
-}
-
 .cron-helper-tabs p {
   color: #777;
   font-size: 0.8rem;
 }
 
-.cron-helper-tabs p span {
+.cron-helper-tabs .form-label {
   padding-right: 15px;
   padding-left: 25px;
 }
 
-.cron-helper-tabs p span.first {
+.cron-helper-tabs .form-label.first {
   display: inline-block;
-  padding-right: 15px;
   width: 100px;
   padding-left: 0;
 }
 
+.cron-helper-tabs .form-select {
+  display: inline-block;
+  width: 379px;
+}
+
+.cron-helper-tabs .form-select.short {
+  min-width: 30px;
+  width: 70px;
+}
+
 .cron-helper-tabs .button {
   width: auto;
   background-color: #3b9de8;
@@ -3995,3 +4002,7 @@ meter[value="4"]::-moz-meter-bar { background: green; }
 .u-mt15 {
   margin-top: 15px !important;
 }
+
+.u-mb20 {
+  margin-bottom: 20px !important;
+}

web/css/src/themes/default.css

@@ -93,7 +93,8 @@ strong {
   box-shadow: none;
 }
 
-.vst-list {
+.vst-list,
+.form-select {
   box-shadow: none;
 }
 

web/css/src/themes/flat.css

@@ -283,7 +283,8 @@ strong {
   border-radius: 0 !important;
 }
 
-.vst-list {
+.vst-list,
+.form-select {
   box-shadow: none;
   border-radius: 0 !important;
 }
@@ -363,14 +364,16 @@ a.vst-text:hover b,
   color: #333;
 }
 
-.vst-list:focus {
+.vst-list:focus,
+.form-select:focus {
   border: 1px solid #ff6701;
   color: #333;
 }
 
 .vst-input:hover,
-.vst-textinput:hover,
-.vst-list:hover {
+.vst-list:hover,
+.form-select:hover,
+.vst-textinput:hover {
   border: 1px solid #e95e00;
 }
 
@@ -512,6 +515,7 @@ meter {
 
 .vst-input,
 .vst-list,
+.form-select,
 .vst-textinput {
   font-family: Arial, Helvetica, sans-serif !important;
 }
@@ -617,12 +621,6 @@ a#btn-back:focus {
   text-transform: none !important;
 }
 
-.vst-list.flat:hover,
-.vst-list.flat:focus {
-  color: #ff6701 !important;
-  border: 1px solid #fff !important;
-}
-
 a.ui-button:hover,
 a.ui-button:active,
 a.ui-button:focus {