<textarea> migration (hestiacp#2940)

* Improve padding consistency

* Set new box-sizing on new form controls

* Add .u-inputWidth for necessary temporary width

* Update textareas in Edit Server form

* Update textareas in Edit Web form

* Update textareas in Edit Dovecot Server form

* Update textareas in Add SSH Key form

* Update all fields in New Self-Signed SSL Certificate form

* Update textareas in Edit Backup Exclusions form

* Update textareas in Edit Mail form

* Update textareas in Add Mail Account form

* Update textareas in Edit Mail Account form

- Remove usage of dead `.input-type` class

* Update textareas in List SSL form

* Update textareas in Edit BIND9 form

* Update textareas in Edit Postgres form

* Update textareas in edit server forms

* Remove .vst-textinput CSS

Author: AlecRust

web/css/src/themes/dark.css

@@ -630,33 +630,6 @@ label:hover {
   color: #d4d4d4 !important;
 }
 
-.vst-textinput {
-  background-color: #454545;
-  border: 1px solid #606060;
-  color: #d4d4d4;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
-}
-
-.vst-textinput:hover {
-  border: 1px solid #0090ff;
-  background-color: #494949;
-}
-
-.vst-textinput:focus {
-  background-color: #222;
-  border-color: #0080df;
-  color: #fff !important;
-  box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
-}
-
-.vst-textinput.console{
-
-}
-
-.vst-textinput.short {
-
-}
-
 .vst-input,
 .form-control {
   background-color: #454545;
@@ -681,8 +654,7 @@ label:hover {
 
 .vst-input:disabled,
 .form-control:disabled,
-.form-select:disabled,
-.vst-textinput:disabled {
+.form-select:disabled {
   background-color: #303030;
   text-shadow: 1px 1px rgb(0 0 0 / 30%);
   color: #acacac;
@@ -694,8 +666,7 @@ label:hover {
 
 .vst-input:disabled:hover,
 .form-control:disabled:hover,
-.form-select:disabled:hover,
-.vst-textinput:disabled:hover {
+.form-select:disabled:hover {
   border-color: #606060 !important;
 }
 
@@ -788,10 +759,6 @@ a.vst-text:active b {
 
 }
 
-#advanced-options .console{
-
-}
-
 .generate {
   color: #29a9ff;
   border-radius: 4px;

web/css/src/themes/default.css

@@ -2296,10 +2296,11 @@ label:hover {
 
 .form-control {
   background-color: #fff;
+  box-sizing: border-box;
   border: 1px solid #cfcfcf;
   display: block;
   width: 100%;
-  padding: 8px 3px 8px 14px;
+  padding: 8px 12px;
   font-size: 0.8rem;
   font-weight: normal;
   color: #4e4e4e;
@@ -2338,24 +2339,21 @@ label:hover {
 
 .vst-input:disabled,
 .form-control:disabled,
-.form-select:disabled,
-.vst-textinput: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,
-.vst-textinput:disabled {
+.form-control:focus:disabled {
   border-color: #dedede;
   background-color: #f1f1f1;
 }
 
 .vst-input:disabled:hover,
 .form-control:disabled:hover,
-.form-select:disabled:hover,
-.vst-textinput:disabled:hover {
+.form-select:disabled:hover {
   border-color: #cfcfcf;
 }
 
@@ -2421,54 +2419,9 @@ a.vst-text:active b {
   width: 14px;
 }
 
-.vst-textinput {
-  background-color: #fff;
-  border: 1px solid #cfcfcf;
-  border-radius: 4px;
-  color: #4e4e4e;
-  font-size: 0.8rem;
-  width: 560px;
-  height: 60px;
-  font-family: Exo, Arial, Helvetica, sans-serif;
-  padding: 7px 1px 3px 14px;
-  font-weight: normal;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-}
-
-.vst-textinput:hover {
-  border: 1px solid #94c8f0;
-}
-
-.vst-textinput:focus {
-  border: 1px solid #008fee;
-  background-color: #d7f9ff;
-  color: #333;
-}
-
-.vst-textinput:disabled {
-  background-color: #f1f1f1;
-}
-
-.vst-textinput.console {
-  font-size: 0.8rem;
-  width: 630px;
-  height: 300px;
-  font-family: Inconsolata, "Lucida Console", Monaco, monospace;
-  white-space: pre;
-}
-
-.vst-textinput.short {
-  width: 360px;
-}
-
-.vst-textinput.short.console {
-  height: 80px;
-  overflow: scroll;
-}
-
-#advanced-options .console {
+#advanced-options .u-console {
   width: 833px;
-  height: 600px;
+  height: 600px !important;
 }
 
 .generate {
@@ -2550,11 +2503,12 @@ a.vst-text:active b {
 
 .form-select {
   display: block;
+  box-sizing: border-box;
   cursor: pointer;
   width: 100%;
   font-weight: normal;
   font-size: .8rem;
-  padding: 8px 35px 7px 10px;
+  padding: 8px 30px 7px 12px;
   line-height: 1.5;
   border-radius: 4px;
   background-color: #fff;
@@ -3992,3 +3946,21 @@ meter[value="4"]::-moz-meter-bar { background: green; }
 .u-mb20 {
   margin-bottom: 20px !important;
 }
+
+.u-inputWidth {
+  width: 380px !important;
+}
+
+.u-minHeight100 {
+  min-height: 100px !important;
+}
+
+.u-minHeight300 {
+  min-height: 300px !important;
+}
+
+.u-console {
+  font-family: Inconsolata, "Lucida Console", Monaco, monospace !important;
+  white-space: pre !important;
+  line-height: 1.2 !important;
+}

web/css/src/themes/flat.css

@@ -102,10 +102,6 @@ strong {
   box-shadow: none !important;
 }
 
-.vst-textinput {
-  box-shadow: none;
-}
-
 .ui-button,
 .button,
 .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit,

web/css/src/themes/vestia.css

@@ -125,10 +125,6 @@ strong {
   box-shadow: none !important;
 }
 
-.vst-textinput {
-  box-shadow: none;
-}
-
 .card a.ui-button {
   line-height: 2rem !important;
 }
@@ -289,10 +285,6 @@ strong {
   border-radius: 0 !important;
 }
 
-.vst-textinput {
-  border-radius: 0 !important;
-}
-
 .pill {
   border-radius: 4px;
 }
@@ -357,9 +349,7 @@ a.vst-text:hover b,
 
 .vst-input:focus,
 .form-control:focus,
-.vst-textinput:focus,
-.login .vst-input:focus,
-.login .vst-textinput:focus {
+.login .vst-input:focus {
   border: 1px solid #ff6701;
   background-color: #fff4ed;
   color: #333;
@@ -372,8 +362,7 @@ a.vst-text:hover b,
 
 .vst-input:hover,
 .form-control:hover,
-.form-select:hover,
-.vst-textinput:hover {
+.form-select:hover {
   border: 1px solid #e95e00;
 }
 
@@ -515,8 +504,7 @@ meter {
 
 .vst-input,
 .form-control,
-.form-select,
-.vst-textinput {
+.form-select {
   font-family: Arial, Helvetica, sans-serif !important;
 }