Migrate remaining text inputs to .form-control (hestiacp#2978)

- Migrate DNS entry fields
- Migrate `.vst-list-editor` fields
- Fix `.form-select` height not matching `.form-control`
- Fix some input widths
- Add `.js-` to JS-specific classes

Author: AlecRust

web/css/src/themes/dark.css

@@ -623,36 +623,25 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .data a {
 }
 
-label {
-}
-
-label:hover {
-  color: #d4d4d4 !important;
-}
-
-.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,
 .form-control:hover {
   border-color: #0090ff;
   background-color: #494949;
 }
 
-.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,
 .form-control:disabled,
 .form-select:disabled {
   background-color: #303030;
@@ -661,20 +650,12 @@ label:hover {
   border-color: #606060;
 }
 
-.vst-input:focus:disabled {
-}
-
-.vst-input:disabled:hover,
 .form-control:disabled:hover,
 .form-select:disabled:hover {
   border-color: #606060 !important;
 }
 
-.vst-input.vst-list-editor {
-
-}
-
-.vst-input.vst-list-editor:focus {
+.form-control.list-editor:focus {
   background-color: #222;
   box-shadow: none !important;
 }
@@ -844,8 +825,6 @@ a.vst-text:active b {
 
 .additional-control.add:active {}
 
-.additional-control.remove-ns {}
-
 .toggle-psw-visibility-icon {}
 
 .show-passwords-enabled-action {}
@@ -1095,9 +1074,6 @@ a.button.cancel {
 
 }
 
-:focus { outline: none; }
-::-moz-focus-inner { border: 0; }
-
 .login {
   background-color: #282828;
   box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%) !important;

web/css/src/themes/default.css

@@ -185,6 +185,9 @@ body {
   background-color: #fff;
 }
 
+:focus { outline: none; }
+::-moz-focus-inner { border: 0; }
+
 .body-login,
 .body-reset {
   height: auto;
@@ -488,7 +491,7 @@ a {
 
 .notification-container a {
   font-weight: 600;
-  color: #1a4492;/* #eee; */
+  color: #1a4492;
 }
 
 .notification-container a:hover {
@@ -600,7 +603,6 @@ form#vstobjects .alert {
 .app-form label {
   font-size: 0.85rem;
   font-weight: 600;
-  cursor: default;
 }
 
 .card {
@@ -2207,11 +2209,6 @@ body.mobile .l-icon-shortcuts {
   font-weight: 600;
 }
 
-.data input[type="checkbox"] {
-  display: inline;
-  cursor: pointer;
-}
-
 .jump-top {
   margin-top: -60px;
 }
@@ -2224,14 +2221,6 @@ body.mobile .l-icon-shortcuts {
   text-decoration: none;
 }
 
-label {
-  cursor: pointer;
-}
-
-label:hover {
-  color: #333;
-}
-
 .form-control {
   background-color: #fff;
   box-sizing: border-box;
@@ -2248,65 +2237,46 @@ label:hover {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-.vst-input {
-  background-color: #fff;
-  border: 1px solid #cfcfcf;
-  border-radius: 4px;
-  color: #4e4e4e;
-  font-family: Exo, Arial, Helvetica, sans-serif;
-  font-size: 0.8rem;
-  height: 20px;
-  margin: 2px 6px 0 0;
-  padding: 8px 3px 8px 14px;
-  width: 360px;
-  font-weight: normal;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-}
-
-.vst-input:hover,
 .form-control:hover {
   border: 1px solid #94c8f0;
 }
 
-.vst-input:focus,
 .form-control:focus {
   border: 1px solid #008fee;
   background-color: #d7f9ff;
   color: #333;
 }
 
-.vst-input:disabled,
 .form-control:disabled,
 .form-select:disabled {
   background-color: #e7e7e7;
   text-shadow: 1px 1px rgb(255 255 255 / 100%);
   color: #686868;
 }
 
-.vst-input:focus:disabled,
 .form-control:focus:disabled {
   border-color: #dedede;
   background-color: #f1f1f1;
 }
 
-.vst-input:disabled:hover,
 .form-control:disabled:hover,
 .form-select:disabled:hover {
   border-color: #cfcfcf;
 }
 
-.vst-input.vst-list-editor {
+.form-control.list-editor {
   border: none;
   box-shadow: none;
   position: absolute;
-  margin-top: -34px;
-  margin-left: 1px;
-  display: block;
-  width: 340px;
-  height: 1rem;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  width: auto;
+  top: 2px;
+  left: 2px;
+  right: 23px;
 }
 
-.vst-input.vst-list-editor:focus {
+.form-control.list-editor:focus {
   background-color: #fff;
 }
 
@@ -2434,7 +2404,7 @@ a.vst-text:active b {
   width: 100%;
   font-weight: normal;
   font-size: .8rem;
-  padding: 8px 30px 7px 12px;
+  padding: 8px 30px 8px 12px;
   line-height: 1.5;
   border-radius: 4px;
   background-color: #fff;
@@ -2457,14 +2427,19 @@ a.vst-text:active b {
 }
 
 .form-check {
+  position: relative;
   padding-left: 20px;
-  margin-bottom: 2px;
   margin-left: 3px;
   min-height: 24px;
 }
 
+.form-check label {
+  cursor: pointer;
+}
+
 .form-check-input {
-  float: left;
+  cursor: pointer;
+  position: absolute;
   margin-top: 3px;
   margin-left: -20px;
 }
@@ -2526,10 +2501,6 @@ a.vst-text:active b {
   border-color: #54a6e5;
 }
 
-.additional-control.remove-ns {
-  display: none;
-}
-
 .toggle-password {
   color: #aaa;
   z-index: 1;
@@ -2841,9 +2812,6 @@ a.button.cancel {
   padding-left: 20px !important;
 }
 
-:focus { outline: none; }
-::-moz-focus-inner { border: 0; }
-
 .login {
   background-color: rgb(255 255 255 / 70%);
   box-shadow:
@@ -2859,7 +2827,6 @@ a.button.cancel {
   cursor: default;
 }
 
-.login .vst-input,
 .login .form-control {
   border-color: #5787c8;
 }
@@ -3882,6 +3849,10 @@ li[aria-expanded="true"] a {
   margin-top: 15px !important;
 }
 
+.u-ml5 {
+  margin-left: 5px !important;
+}
+
 .u-ml10 {
   margin-left: 10px !important;
 }

web/css/src/themes/flat.css

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

web/css/src/themes/vestia.css

@@ -274,15 +274,19 @@ strong {
     inset 0 0 2px rgb(255 255 255 / 100%) !important;
 }
 
-.vst-input,
-.form-control {
+.form-control,
+.form-select {
   box-shadow: none;
   border-radius: 0 !important;
 }
 
-.form-select {
-  box-shadow: none;
-  border-radius: 0 !important;
+.form-label,
+.form-check label {
+  font-size: 0.8rem;
+}
+
+.form-check-input {
+  margin-top: 1px;
 }
 
 .pill {
@@ -347,9 +351,7 @@ a.vst-text:hover b,
   color: #ff791f !important;
 }
 
-.vst-input:focus,
 .form-control:focus,
-.login .vst-input:focus,
 .login .form-control:focus {
   border: 1px solid #ff6701;
   background-color: #fff4ed;
@@ -361,7 +363,6 @@ a.vst-text:hover b,
   color: #333;
 }
 
-.vst-input:hover,
 .form-control:hover,
 .form-select:hover {
   border: 1px solid #e95e00;
@@ -501,7 +502,6 @@ a.vst-text:hover b,
   box-shadow: none;
 }
 
-.vst-input,
 .form-control,
 .form-select {
   font-family: Arial, Helvetica, sans-serif !important;
@@ -511,8 +511,8 @@ a.vst-text:hover b,
   line-height: 1rem !important;
 }
 
-.vst-input.vst-list-editor:hover,
-.vst-input.vst-list-editor:focus {
+.form-control.list-editor:hover,
+.form-control.list-editor:focus {
   border: none !important;
 }
 
@@ -580,10 +580,6 @@ td.advanced-options .fas {
   display: none !important;
 }
 
-label {
-  font-size: 0.8rem;
-}
-
 a#btn-back {
   color: #30659d !important;
   background: none !important;
@@ -714,7 +710,6 @@ a.vst-advanced:focus {
   color: #326b9b !important;
 }
 
-.login .vst-input,
 .login .form-control {
   border: 1px solid #bbb;
 }