<textarea> migration (#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

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;
 }
 

web/templates/pages/add_db.html

@@ -79,7 +79,7 @@
 							<tr>
 								<td class="input-label">
 									<label for="v_type" class="form-label"><?=_('Type');?></label>
-									<select class="form-select" name="v_type" id="v_type" style="max-width: 380px">
+									<select class="form-select u-inputWidth" name="v_type" id="v_type">
 										<?php
 											foreach ($db_types as $key => $value) {
 												echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -143,7 +143,7 @@
 							<tr>
 								<td class="input-label step-top" id="advanced-opts" style="display: none;">
 									<label for="v_host" class="form-label"><?=_('Host');?></label>
-									<select class="form-select u-mb20" name="v_host" id="v_host" style="max-width: 380px">
+									<select class="form-select u-inputWidth u-mb20" name="v_host" id="v_host">
 										<?php
 											foreach ($db_hosts as $value) {
 												echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -153,7 +153,7 @@
 										?>
 									</select>
 									<label for="v_charset" class="form-label"><?=_('Charset');?></label>
-									<select class="form-select" name="v_charset" id="v_charset" style="max-width: 380px">
+									<select class="form-select u-inputWidth" name="v_charset" id="v_charset">
 										<option value=big5 <?php if ((!empty($v_charset)) && ( $v_charset == 'big5')) echo 'selected';?>>big5</option>
 										<option value=dec8 <?php if ((!empty($v_charset)) && ( $v_charset == 'dec8')) echo 'selected';?>>dec8</option>
 										<option value=cp850 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp850')) echo 'selected';?>>cp850</option>

web/templates/pages/add_dns.html

@@ -72,7 +72,7 @@
 							<tr>
 								<td class="input-label">
 									<label for="v_ip" class="form-label"><?=_('IP address');?></label>
-									<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
+									<select class="form-select u-inputWidth" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
 										<option value="">clear</option>
 										<?php
 											foreach ($v_ips as $ip => $value) {
@@ -90,7 +90,7 @@
 										<label for="v_template" class="form-label">
 											<?=_('Template') . "<span class='optional'>" . strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
 										</label>
-										<select class="form-select" name="v_template" id="v_template" style="max-width: 380px">
+										<select class="form-select u-inputWidth" name="v_template" id="v_template">
 											<?php
 												foreach ($templates as $key => $value) {
 													echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";

web/templates/pages/add_dns_rec.html

@@ -65,7 +65,7 @@
 						<tr>
 							<td class="input-label">
 								<label for="v_type" class="form-label"><?=_('Type');?></label>
-								<select class="form-select" name="v_type" id="v_type" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_type" id="v_type">
 									<option value="A" <?php if ($v_type == 'A') echo "selected"; ?>>A</option>
 									<option value="AAAA" <?php if ($v_type == 'AAAA') echo "selected"; ?>>AAAA</option>
 									<option value="CAA" <?php if ($v_type == 'CAA') echo "selected"; ?>>CAA</option>
@@ -86,7 +86,7 @@
 						<tr>
 							<td class="input-label">
 								<label for="v_val" class="form-label"><?=_('IP or Value');?></label>
-								<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
+								<select class="form-select u-inputWidth" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 									<?php
 										foreach ($v_ips as $ip => $value) {

web/templates/pages/add_firewall.html

@@ -43,7 +43,7 @@
 						<tr>
 							<td class="input-label step-top">
 								<label for="v_action" class="form-label"><?=_('Action') ?></label>
-								<select class="form-select" name="v_action" id="v_action" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_action" id="v_action">
 									<option value="DROP" <?php if ((!empty($v_action)) && ( $v_action == "'DROP'" )) echo 'selected'?>><?=_('DROP');?></option>
 									<option value="ACCEPT" <?php if ((!empty($v_action)) && ( $v_action == "'ACCEPT'" )) echo 'selected'?>><?=_('ACCEPT');?></option>
 								</select>
@@ -52,7 +52,7 @@
 						<tr>
 							<td class="input-label">
 								<label for="v_protocol" class="form-label"><?=_('Protocol') ?></label>
-								<select class="form-select" name="v_protocol" id="v_protocol" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_protocol" id="v_protocol">
 									<option value="TCP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'TCP'" )) echo 'selected'?>><?=_('TCP');?></option>
 									<option value="UDP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'UDP'" )) echo 'selected'?>><?=_('UDP');?></option>
 									<option value="ICMP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'ICMP'" )) echo 'selected'?>><?=_('ICMP');?></option>
@@ -74,7 +74,7 @@
 								<label for="v_ip" class="form-label">
 									<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
 								</label>
-								<select class="form-select" tabindex="-1" id="quickips_list" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
+								<select class="form-select u-inputWidth" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 								</select>
 								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">

web/templates/pages/add_firewall_banlist.html

@@ -53,7 +53,7 @@
 						<tr>
 							<td class="input-label step-top">
 								<label for="v_chain" class="form-label"><?=_('Banlist') ?></label>
-								<select class="form-select" name="v_chain" id="v_chain" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_chain" id="v_chain">
 									<option value="SSH" <?php if ((!empty($v_chain)) && ( $v_chain == "'SSH'" )) echo 'selected'?>><?=_('SSH');?></option>
 									<option value="WEB" <?php if ((!empty($v_chain)) && ( $v_chain == "'WEB'" )) echo 'selected'?>><?=_('WEB');?></option>
 									<option value="FTP" <?php if ((!empty($v_chain)) && ( $v_chain == "'FTP'" )) echo 'selected'?>><?=_('FTP');?></option>

web/templates/pages/add_firewall_ipset.html

@@ -55,7 +55,7 @@
 								<label for="v_datasource" class="form-label">
 									<?=_('Data Source') ?> <span class="optional">(<?=_('url, script or file');?>)</span>
 								</label>
-								<select class="form-select" tabindex="-1" id="datasource_list" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
+								<select class="form-select u-inputWidth" tabindex="-1" id="datasource_list" onchange="this.nextElementSibling.value=this.value">
 									<option value="">clear</option>
 								</select>
 								<input type="text" size="20" class="vst-input vst-list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
@@ -64,7 +64,7 @@
 						<tr>
 							<td class="input-label step-top">
 								<label for="v_ipver" class="form-label"><?=_('Ip Version') ?></label>
-								<select class="form-select" name="v_ipver" id="v_ipver" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_ipver" id="v_ipver">
 									<option value="v4" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v4'" )) echo 'selected'?>><?=_('ip v4');?></option>
 									<option value="v6" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v6'" )) echo 'selected'?>><?=_('ip v6');?></option>
 								</select>
@@ -73,7 +73,7 @@
 						<tr>
 							<td class="input-label step-top">
 								<label for="v_autoupdate" class="form-label"><?=_('Autoupdate') ?></label>
-								<select class="form-select" name="v_autoupdate" id="v_autoupdate" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_autoupdate" id="v_autoupdate">
 									<option value="yes" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'yes'" )) echo 'selected'?>><?=_('yes');?></option>
 									<option value="no" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'no'" )) echo 'selected'?>><?=_('no');?></option>
 								</select>

web/templates/pages/add_ip.html

@@ -87,7 +87,7 @@
 						<tr>
 							<td class="input-label" style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;" id="usrtable">
 								<label for="v_owner" class="form-label"><?=_('Assigned user');?></label>
-								<select class="form-select" name="v_owner" id="v_owner" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_owner" id="v_owner">
 									<?php
 										foreach ($users as $key => $value) {
 											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";

web/templates/pages/add_key.html

@@ -2,11 +2,11 @@
 <div class="l-center edit">
 	<div class="l-sort clearfix">
 		<div class="l-unit-toolbar__buttonstrip">
-            <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
-                <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/?user=<?=htmlentities($_GET['user']);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-            <?php } else { ?>
-                <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-            <?php } ?>
+			<?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
+				<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/?user=<?=htmlentities($_GET['user']);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+			<?php } else { ?>
+				<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+			<?php } ?>
 		</div>
 		<div class="l-unit-toolbar__buttonstrip float-right">
 			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
@@ -45,13 +45,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=_('SSH KEY') ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput" name="v_key"><?=htmlentities(trim($v_key, "'"))?></textarea>
+							<td class="step-top">
+								<label for="v_key" class="form-label"><?=_('SSH KEY') ?></label>
+								<textarea class="form-control u-minHeight100" name="v_key" id="v_key"><?=htmlentities(trim($v_key, "'"))?></textarea>
 							</td>
 						</tr>
 					</table>
@@ -60,4 +56,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/add_mail_acc.html

@@ -102,23 +102,19 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<textarea size="20" class="vst-textinput short" name="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
-										</td>
-									</tr>
-									<tr>
-										<td class="vst-text input-label">
-											<?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
+										<td class="input-label">
+											<label for="v_aliases" class="form-label">
+												<?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
+											</label>
+											<textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
 										</td>
 									</tr>
 									<tr>
-										<td>
-											<textarea size="20" class="vst-textinput short" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
+										<td class="input-label">
+											<label for="v_fwd" class="form-label">
+												<?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
+											</label>
+											<textarea class="form-control" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
 										</td>
 									</tr>
 									<tr>

web/templates/pages/edit_backup_exclusions.html

@@ -18,7 +18,7 @@
 	<form id="vstobjects" name="v_edit_backup_exclusions" method="post" class="<?=_($v_status)?>">
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 		<input type="hidden" name="save" value="save" />
-		
+
 		<table class='data'>
 			<tr class="data-add">
 				<td class="data-dotted">
@@ -42,43 +42,27 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=_('Web Domains');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput" name="v_web" placeholder="<?=_('WEB_EXCLUSIONS') ?>"><?=htmlentities(trim($v_web, "'"))?></textarea>
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text input-label">
-								<?=_('Mail Domains');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput" name="v_mail" placeholder="<?=_('MAIL_EXCLUSIONS') ?>"><?=htmlentities(trim($v_mail, "'"))?></textarea>
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text input-label">
-								<?=_('Databases');?>
+							<td class="step-top">
+								<label for="v_web" class="form-label"><?=_('Web Domains');?></label>
+								<textarea class="form-control" name="v_web" id="v_web" placeholder="<?=_('WEB_EXCLUSIONS') ?>"><?=htmlentities(trim($v_web, "'"))?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<textarea class="vst-textinput" name="v_db" placeholder="<?=_('DB_EXCLUSIONS') ?>"><?=htmlentities(trim($v_db, "'"))?></textarea>
+							<td class="input-label">
+								<label for="v_mail" class="form-label"><?=_('Mail Domains');?></label>
+								<textarea class="form-control" name="v_mail" id="v_mail" placeholder="<?=_('MAIL_EXCLUSIONS') ?>"><?=htmlentities(trim($v_mail, "'"))?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('User Directories');?>
+							<td class="input-label">
+								<label for="v_db" class="form-label"><?=_('Databases');?></label>
+								<textarea class="form-control" name="v_db" id="v_db" placeholder="<?=_('DB_EXCLUSIONS') ?>"><?=htmlentities(trim($v_db, "'"))?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<textarea size="20" class="vst-textinput" name="v_userdir" placeholder="<?=_('USER_EXCLUSIONS') ?>"><?=htmlentities(trim($v_userdir, "'"))?></textarea>
+							<td class="input-label">
+								<label for="v_userdir" class="form-label"><?=_('User Directories');?></label>
+								<textarea class="form-control" name="v_userdir" id="v_userdir" placeholder="<?=_('USER_EXCLUSIONS') ?>"><?=htmlentities(trim($v_userdir, "'"))?></textarea>
 							</td>
 						</tr>
 					</table>
@@ -87,4 +71,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/edit_dns.html

@@ -55,7 +55,7 @@
 						<tr>
 							<td class="input-label">
 								<label for="v_ip" class="form-label"><?=_('IP address');?></label>
-								<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
+								<select class="form-select u-inputWidth" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
 									<option value="">clear</option>
 									<?php
 										foreach ($v_ips as $ip => $value) {
@@ -74,7 +74,7 @@
 									<label for="v_template" class="form-label">
 										<?=_('Template') . "<span class='optional'>" . strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
 									</label>
-									<select class="form-select" name="v_template" id="v_template" style="max-width: 380px">
+									<select class="form-select u-inputWidth" name="v_template" id="v_template">
 										<?php
 											foreach ($templates as $key => $value) {
 												echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";

web/templates/pages/edit_dns_rec.html

@@ -67,7 +67,7 @@
 						<tr>
 							<td class="input-label">
 								<label for="v_type" class="form-label"><?=_('Type');?></label>
-								<select class="form-select" name="v_type" id="v_type" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_type" id="v_type">
 									<option value="A" <?php if ($v_type == 'A') echo "selected"; ?>>A</option>
 									<option value="AAAA" <?php if ($v_type == 'AAAA') echo "selected"; ?>>AAAA</option>
 									<option value="CAA" <?php if ($v_type == 'CAA') echo "selected"; ?>>CAA</option>
@@ -88,7 +88,7 @@
 						<tr>
 							<td class="input-label">
 								<label for="v_val" class="form-label"><?=_('IP or Value');?></label>
-								<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
+								<select class="form-select u-inputWidth" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
 									<option value="">clear</option>
 									<?php
 										foreach ($v_ips as $ip => $value) {

web/templates/pages/edit_firewall.html

@@ -44,7 +44,7 @@
 						<tr>
 							<td class="input-label step-top">
 								<label for="v_action" class="form-label"><?=_('Action') ?></label>
-								<select class="form-select" name="v_action" id="v_action" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_action" id="v_action">
 									<option value="DROP" <?php if ((!empty($v_action)) && ( $v_action == "DROP" )) echo 'selected'?>><?=_('DROP');?></option>
 									<option value="ACCEPT" <?php if ((!empty($v_action)) && ( $v_action == "ACCEPT" )) echo 'selected'?>><?=_('ACCEPT');?></option>
 								</select>
@@ -53,7 +53,7 @@
 						<tr>
 							<td class="input-label">
 								<label for="v_protocol" class="form-label"><?=_('Protocol') ?></label>
-								<select class="form-select" name="v_protocol" id="v_protocol" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_protocol" id="v_protocol">
 									<option value="TCP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "TCP" )) echo 'selected'?>><?=_('TCP');?></option>
 									<option value="UDP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "UDP" )) echo 'selected'?>><?=_('UDP');?></option>
 									<option value="ICMP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "ICMP" )) echo 'selected'?>><?=_('ICMP');?></option>
@@ -75,7 +75,7 @@
 								<label for="v_ip" class="form-label">
 									<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
 								</label>
-								<select class="form-select" tabindex="-1" id="quickips_list" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
+								<select class="form-select u-inputWidth" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 								</select>
 								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">

web/templates/pages/edit_ip.html

@@ -85,7 +85,7 @@
 						<tr>
 							<td class="input-label" style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;" id="usrtable">
 								<label for="v_owner" class="form-label"><?=_('Assigned user');?></label>
-								<select class="form-select" name="v_owner" id="v_owner" style="max-width: 380px">
+								<select class="form-select u-inputWidth" name="v_owner" id="v_owner">
 									<?php
 										foreach ($users as $key => $value) {
 											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";

web/templates/pages/edit_mail.html

@@ -170,34 +170,26 @@
 										<td>
 											<table id="ssl-details" style="<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') { echo 'display: none;'; } ?>">
 												<tr>
-													<td class="vst-text input-label step-top">
-														<?=_('SSL Certificate');?>
-														<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
+													<td class="input-label step-top">
+														<label for="v_ssl_crt" class="form-label">
+															<?=_('SSL Certificate');?>
+															<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
+														</label>
+														<textarea class="form-control u-inputWidth u-minHeight100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_crt" id="v_ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
 													</td>
 												</tr>
 												<tr>
-													<td>
-														<textarea size="20" class="vst-textinput short console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
-													</td>
-												</tr>
-												<tr>
-													<td class="vst-text input-label">
-														<?=_('SSL Key');?>
-													</td>
-												</tr>
-												<tr>
-													<td>
-														<textarea size="20" class="vst-textinput short console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
-													</td>
-												</tr>
-												<tr>
-													<td class="vst-text input-label">
-														<?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
+													<td class="input-label">
+														<label for="v_ssl_key" class="form-label"><?=_('SSL Key');?></label>
+														<textarea class="form-control u-minHeight100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_key" id="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
 													</td>
 												</tr>
 												<tr>
-													<td>
-														<textarea size="20" class="vst-textinput short console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
+													<td class="input-label">
+														<label for="v_ssl_ca" class="form-label">
+															<?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
+														</label>
+														<textarea class="form-control u-minHeight100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_ca" id="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
 													</td>
 												</tr>
 											</table>

web/templates/pages/edit_mail_acc.html

@@ -54,7 +54,7 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-type input-label">
+							<td class="vst-text input-label">
 								<?=_('Password');?> <a href="javascript:randomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
 							</td>
 						</tr>
@@ -86,7 +86,7 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-type input-label">
+							<td class="vst-text input-label">
 								<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
 							</td>
 						</tr>
@@ -97,13 +97,11 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-type input-label">
-								<?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea size="20" class="vst-textinput short" name="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
+							<td class="input-label">
+								<label for="v_aliases" class="form-label">
+									<?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
+								</label>
+								<textarea class="form-control u-inputWidth" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
 							</td>
 						</tr>
 						<tr>
@@ -117,7 +115,7 @@
 							</td>
 						</tr>
 						<tr <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for">
-							<td class="input-type input-label">
+							<td class="input-label">
 								<div class="form-check">
 									<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo "checked=yes" ?>>
 									<label for="v_fwd_for">
@@ -127,7 +125,7 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="input-type input-label">
+							<td class="input-label">
 								<div class="form-check">
 									<input class="form-check-input" type="checkbox" name="v_autoreply" id="v_autoreply" <?php if ($v_autoreply == 'yes') echo "checked=yes" ?> onclick="javascript:elementHideShow('autoreplytable');">
 									<label for="v_autoreply">
@@ -140,13 +138,9 @@
 							<td>
 								<table style="display:<?php if ($v_autoreply == 'yes') { echo 'block';} else {echo 'none';}?> ;" id="autoreplytable">
 									<tr>
-										<td class="vst-text" style="padding: 12px 0 0 0;">
-											<?=_('Message');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<textarea size="20" class="vst-textinput short" name="v_autoreply_message"><?=htmlentities(trim($v_autoreply_message, "'"))?></textarea>
+										<td class="input-label">
+											<label for="v_autoreply_message" class="form-label"><?=_('Message');?></label>
+											<textarea class="form-control u-inputWidth" name="v_autoreply_message" id="v_autoreply_message"><?=htmlentities(trim($v_autoreply_message, "'"))?></textarea>
 										</td>
 									</tr>
 								</table>
@@ -156,13 +150,11 @@
 							<td>
 								<table id="v-fwd-opt">
 									<tr>
-										<td class="vst-text input-type input-label">
-											<?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<textarea size="20" class="vst-textinput short" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
+										<td class="input-label">
+											<label for="v_fwd" class="form-label">
+												<?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
+											</label>
+											<textarea class="form-control u-inputWidth" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
 										</td>
 									</tr>
 								</table>

web/templates/pages/edit_server.html

@@ -402,14 +402,11 @@
 										<?php } ?>
 										<?php if($_SESSION['WEBMAIL_SYSTEM']){?>
 											<tr>
-												<td class="vst-text step-top">
-													<?=_('Webmail URL');?> <span class="hint">(<?=$_SESSION['WEBMAIL_ALIAS'];?>.example.com)</span>
-												</td>
-											</tr>
-											<tr>
-												<td>
-													<input type="text" size="20" class="vst-input" name="v_webmail_alias" value="<?=$_SESSION['WEBMAIL_ALIAS']; ?>">
-													<br><br>
+												<td class="step-top">
+													<label for="v_webmail_alias" class="form-label">
+														<?=_('Webmail URL');?> <span class="hint">(<?=$_SESSION['WEBMAIL_ALIAS'];?>.example.com)</span>
+													</label>
+													<input type="text" class="form-control u-inputWidth u-mb20" name="v_webmail_alias" id="v_webmail_alias" value="<?=$_SESSION['WEBMAIL_ALIAS']; ?>">
 												</td>
 											</tr>
 										<?php } ?>
@@ -427,33 +424,21 @@
 											<td class="step-left">
 												<table style="display:<?php if ($v_smtp_relay == 'true') {echo 'block';} else {echo 'none';} ?>;" id="smtp_relay_table">
 													<tr>
-														<td class="input-label vst-text">
-															<?=_('Host');?>
-														</td>
-													</tr>
-													<tr>
-														<td>
-															<input type="text" size="20" class="vst-input" name="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
-														</td>
-													</tr>
-													<tr>
-														<td class="input-label vst-text">
-															<?=_('Port');?>
+														<td class="input-label">
+															<label for="v_smtp_relay_host" class="form-label"><?=_('Host');?></label>
+															<input type="text" class="form-control" name="v_smtp_relay_host" id="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
 														</td>
 													</tr>
 													<tr>
 														<td>
-															<input type="text" size="20" class="vst-input" name="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
-														</td>
-													</tr>
-													<tr>
-														<td class="input-label vst-text">
-															<?=_('Username');?>
+															<label for="v_smtp_relay_port" class="form-label"><?=_('Port');?></label>
+															<input type="text" class="form-control" name="v_smtp_relay_port" id="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
 														</td>
 													</tr>
 													<tr>
-														<td>
-															<input type="text" size="20" class="vst-input" name="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
+														<td class="input-label">
+															<label for="v_smtp_relay_user" class="form-label"><?=_('Username');?></label>
+															<input type="text" class="form-control" name="v_smtp_relay_user" id="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
 														</td>
 													</tr>
 													<tr>
@@ -842,24 +827,18 @@
 							<td class="vst-text input-label step-left">
 								<table style="display:<?php if (empty($v_adv)) echo 'none';?> ;" id="ssl">
 									<tr>
-										<td class="vst-text step-top">
-											<?=_('SSL Certificate');?>
-											<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities(trim($v_hostname,'"'));?>"><?=_('Generate CSR');?></a></span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<textarea size="20" class="vst-textinput short console" name="v_ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
-										</td>
-									</tr>
-									<tr>
-										<td class="vst-text input-label">
-											<?=_('SSL Key');?>
+										<td class="step-top">
+											<label for="v_ssl_crt" class="form-label">
+												<?=_('SSL Certificate');?>
+												<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities(trim($v_hostname,'"'));?>"><?=_('Generate CSR');?></a></span>
+											</label>
+											<textarea class="form-control u-minHeight100 u-console" name="v_ssl_crt" id="v_ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
 										</td>
 									</tr>
 									<tr>
-										<td>
-											<textarea size="20" class="vst-textinput short console" name="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
+										<td class="input-label">
+											<label for="v_ssl_key" class="form-label"><?=_('SSL Key');?></label>
+											<textarea class="form-control u-minHeight100 u-console" name="v_ssl_key" id="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
 										</td>
 									</tr>
 									<tr>
@@ -974,18 +953,15 @@
 													<td>
 														<table id="security_ip" style="<?php if ($_SESSION['API'] == "no" && $_SESSION['API_SYSTEM'] == '0') echo 'display:none;';?>">
 															<tr>
-																<td class="vst-text input-label">
-																	<?=_('Allowed IP addresses for API');?> <span class="optional" style="float:right">1 IP address per line</span>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<textarea size="20" class="vst-textinput short" name="v_api_allowed_ip"><?php
-																		foreach(explode(',',$_SESSION['API_ALLOWED_IP']) as $ip ){
+																<td class="input-label">
+																	<label for="v_api_allowed_ip" class="form-label" style="display: block">
+																		<?=_('Allowed IP addresses for API');?> <span class="optional" style="float: right">1 IP address per line</span>
+																	</label>
+																	<textarea class="form-control u-inputWidth" name="v_api_allowed_ip" id="v_api_allowed_ip"><?php
+																			foreach(explode(',',$_SESSION['API_ALLOWED_IP']) as $ip ){
 																				echo trim($ip)."\n";
 																			}
 																		?></textarea>
-																	<br><br>
 																</td>
 															</tr>
 														</table>
@@ -1187,7 +1163,7 @@
 									<tr>
 										<td class="input-label step-top">
 											<label for="v_plugin_app_installer" class="form-label"><?=_('Quick App Installer');?></label>
-											<select class="form-select" name="v_plugin_app_installer" id="v_plugin_app_installer">
+											<select class="form-select u-inputWidth" name="v_plugin_app_installer" id="v_plugin_app_installer">
 												<option value="false"><?=_('No'); ?></option>
 												<option value="true" <?php if($_SESSION['PLUGIN_APP_INSTALLER'] == 'true') echo 'selected' ?>><?=_('Yes'); ?></option>
 											</select>

web/templates/pages/edit_server_bind9.html

@@ -41,23 +41,15 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_options_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_options"><?=$v_options;?></textarea>
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
+							<td class="step-top">
+								<label for="v_options" class="form-label"><?=$v_options_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_options" id="v_options"><?=$v_options;?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
 						<td class="input-label" style="text-transform: capitalize;">

web/templates/pages/edit_server_dovecot.html

@@ -41,94 +41,58 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config?></textarea>
 							</td>
 						</tr>
 						<?php if (!empty($v_config_path1)) { ?>
 							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path1;?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config1"><?=$v_config1?></textarea>
-								</td>
-							</tr>
-							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path2;?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config2"><?=$v_config2?></textarea>
-								</td>
-							</tr>
-							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path3;?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config3"><?=$v_config3?></textarea>
-								</td>
-							</tr>
-							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path4;?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config4"><?=$v_config4?></textarea>
-								</td>
-							</tr>
-							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path5;?>
+								<td class="step-top">
+									<label for="v_config1" class="form-label"><?=$v_config_path1;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config1" id="v_config1"><?=$v_config1?></textarea>
 								</td>
 							</tr>
 							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config5"><?=$v_config5?></textarea>
+								<td class="step-top">
+									<label for="v_config2" class="form-label"><?=$v_config_path2;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config2" id="v_config2"><?=$v_config2?></textarea>
 								</td>
 							</tr>
 							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path6;?>
+								<td class="step-top">
+									<label for="v_config3" class="form-label"><?=$v_config_path3;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config3" id="v_config3"><?=$v_config3?></textarea>
 								</td>
 							</tr>
 							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config6"><?=$v_config6?></textarea>
+								<td class="step-top">
+									<label for="v_config4" class="form-label"><?=$v_config_path4;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config4" id="v_config4"><?=$v_config4?></textarea>
 								</td>
 							</tr>
 							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path7;?>
+								<td class="step-top">
+									<label for="v_config5" class="form-label"><?=$v_config_path5;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config5" id="v_config5"><?=$v_config5?></textarea>
 								</td>
 							</tr>
 							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config7"><?=$v_config7?></textarea>
+								<td class="step-top">
+									<label for="v_config6" class="form-label"><?=$v_config_path6;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config6" id="v_config6"><?=$v_config6?></textarea>
 								</td>
 							</tr>
 							<tr>
-								<td class="vst-text step-top">
-									<?=$v_config_path8;?>
+								<td class="step-top">
+									<label for="v_config7" class="form-label"><?=$v_config_path7;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config7" id="v_config7"><?=$v_config7?></textarea>
 								</td>
 							</tr>
 							<tr>
-								<td>
-									<textarea class="vst-textinput console" name="v_config8"><?=$v_config8?></textarea>
+								<td class="step-top">
+									<label for="v_config8" class="form-label"><?=$v_config_path8;?></label>
+									<textarea class="form-control u-minHeight300 u-console" name="v_config8" id="v_config8"><?=$v_config8?></textarea>
 								</td>
 							</tr>
 						<?php } ?>

web/templates/pages/edit_server_httpd.html

@@ -42,13 +42,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_server_mysql.html

@@ -110,13 +110,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_server_nginx.html

@@ -165,15 +165,10 @@
 								<a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Basic options');?></a>
 							</td>
 						</tr>
-
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_server_pgsql.html

@@ -41,23 +41,15 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_options_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_options"><?=$v_options;?></textarea>
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
+							<td class="step-top">
+								<label for="v_options" class="form-label"><?=$v_options_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_options" id="v_options"><?=$v_options;?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
 						<td class="input-label" style="text-transform: capitalize;">

web/templates/pages/edit_server_php.html

@@ -131,15 +131,10 @@
 								<a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Basic options');?></a>
 							</td>
 						</tr>
-
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
 						<td class="input-label" style="text-transform: capitalize;">

web/templates/pages/edit_server_service.html

@@ -41,13 +41,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=$v_config_path;?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
+							<td class="step-top">
+								<label for="v_config" class="form-label"><?=$v_config_path;?></label>
+								<textarea class="form-control u-minHeight300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_web.html

@@ -61,13 +61,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('Aliases');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea size="20" class="vst-textinput short" name="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
+							<td class="input-label">
+								<label for="v_aliases" class="form-label"><?=_('Aliases');?></label>
+								<textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
 							</td>
 						</tr>
 						<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') {?>
@@ -254,34 +250,26 @@
 										<td>
 											<table id="ssl-details" style="<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') { echo 'display: none;'; } ?>">
 												<tr>
-													<td class="vst-text input-label step-top">
-														<?=_('SSL Certificate');?>
-														<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
-													</td>
-												</tr>
-												<tr>
-													<td>
-														<textarea size="20" class="vst-textinput short console" name="v_ssl_crt" id="ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
-													</td>
-												</tr>
-												<tr>
-													<td class="vst-text input-label">
-														<?=_('SSL Key');?>
-													</td>
-												</tr>
-												<tr>
-													<td>
-														<textarea size="20" class="vst-textinput short console" name="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
+													<td class="input-label step-top">
+														<label for="ssl_crt" class="form-label">
+															<?=_('SSL Certificate');?>
+															<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
+														</label>
+														<textarea class="form-control u-minHeight100 u-console" name="v_ssl_crt" id="ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
 													</td>
 												</tr>
 												<tr>
-													<td class="vst-text input-label">
-														<?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
+													<td class="input-label">
+														<label for="v_ssl_key" class="form-label"><?=_('SSL Key');?></label>
+														<textarea class="form-control u-minHeight100 u-console" name="v_ssl_key" id="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
 													</td>
 												</tr>
 												<tr>
-													<td>
-														<textarea size="20" class="vst-textinput short console" name="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
+													<td class="input-label">
+														<label for="v_ssl_ca" class="form-label">
+															<?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
+														</label>
+														<textarea class="form-control u-minHeight100 u-console" name="v_ssl_ca" id="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
 													</td>
 												</tr>
 											</table>
@@ -475,13 +463,9 @@
 															</td>
 														</tr>
 														<tr>
-															<td class="vst-text input-label">
-																<?=_('Proxy Extensions');?>
-															</td>
-														</tr>
-														<tr>
-															<td>
-																<textarea size="20" class="vst-textinput short" name="v_proxy_ext"><?php if (!empty($v_proxy_ext)) { echo htmlentities(trim($v_proxy_ext, "'"));} else { echo 'jpg, jpeg, gif, png, ico, svg, css, zip, tgz, gz, rar, bz2, exe, pdf, doc, xls, ppt, txt, odt, ods, odp, odf, tar, bmp, rtf, js, mp3, avi, mpeg, flv, html, htm'; }  ?></textarea>
+															<td class="input-label">
+																<label for="v_proxy_ext" class="form-label"><?=_('Proxy Extensions');?></label>
+																<textarea class="form-control u-inputWidth u-minHeight100" name="v_proxy_ext" id="v_proxy_ext"><?php if (!empty($v_proxy_ext)) { echo htmlentities(trim($v_proxy_ext, "'"));} else { echo 'jpg, jpeg, gif, png, ico, svg, css, zip, tgz, gz, rar, bz2, exe, pdf, doc, xls, ppt, txt, odt, ods, odp, odf, tar, bmp, rtf, js, mp3, avi, mpeg, flv, html, htm'; } ?></textarea>
 															</td>
 														</tr>
 													</table>

web/templates/pages/generate_ssl.html

@@ -31,79 +31,61 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text" style="padding: 24px 0 0 0;">
-								<?=_('Domain');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'")) ?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text" style="padding: 24px 0 0 0;">
-								<?=_('Aliases');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea size="20" class="vst-textinput short" name="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text" style="padding: 12px 0 0 0;">
-								<?=_('Email');?>
-								<span class="optional">(<?php print _('optional');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_email" value="<?=htmlentities(trim($v_email, "'")) ?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text" style="padding: 12px 0 0 0;">
-								<?=_('Country'); ?>
-								<span class="optional">(<?=_('2 letter code');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_country" value="<?=htmlentities(trim($v_country, "'"))?>">
+							<td class="step-top">
+								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'")) ?>">
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text" style="padding: 12px 0 0 0;">
-								<?=_('State / Province');?>
+							<td class="input-label">
+								<label for="v_aliases" class="form-label"><?=_('Aliases');?></label>
+								<textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_state" value="<?=htmlentities(trim($v_state, "'")) ?>">
+							<td class="input-label">
+								<label for="v_email" class="form-label">
+									<?=_('Email');?>
+									<span class="optional">(<?php print _('optional');?>)</span>
+								</label>
+								<input type="text" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'")) ?>">
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text" style="padding: 12px 0 0 0;">
-								<?=_('City / Locality');?>
+							<td class="input-label">
+								<label for="v_country" class="form-label">
+									<?=_('Country'); ?>
+									<span class="optional">(<?=_('2 letter code');?>)</span>
+								</label>
+								<input type="text" class="form-control" name="v_country" id="v_country" value="<?=htmlentities(trim($v_country, "'")) ?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_locality" value="<?=htmlentities(trim($v_locality, "'")) ?>">
+							<td class="input-label">
+								<label for="v_state" class="form-label">
+									<?=_('State / Province');?>
+								</label>
+								<input type="text" class="form-control" name="v_state" id="v_state" value="<?=htmlentities(trim($v_state, "'")) ?>">
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text" style="padding: 12px 0 0 0;">
-								<?=_('Organization');?>
+							<td class="input-label">
+								<label for="v_locality" class="form-label">
+									<?=_('City / Locality');?>
+								</label>
+								<input type="text" class="form-control" name="v_locality" id="v_locality" value="<?=htmlentities(trim($v_locality, "'")) ?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_org" value="<?=htmlentities(trim($v_org, "'")) ?>">
+							<td class="input-label">
+								<label for="v_org" class="form-label">
+									<?=_('Organization');?>
+								</label>
+								<input type="text" class="form-control" name="v_org" id="v_org" value="<?=htmlentities(trim($v_org, "'")) ?>">
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
+					<table class="data-col2 u-mb20">
 						<tr>
 							<td style="padding: 24px 0 0 0;" width="116px">
 								<input type="submit" class="button" name="generate" value="<?=_('Ok');?>">
@@ -117,4 +99,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/list_ssl.html

@@ -25,7 +25,7 @@
 					</table>
 				</td>
 				<td class="data-dotted">
-					<table class="data-col2">
+					<table class="data-col2" width="600px">
 						<tr>
 							<td class="step-top">
 								<span class="page-title"><?=_('Generating CSR');?></span>
@@ -37,36 +37,34 @@
 						</tr>
 						</tr>
 						<tr>
-							<td class="vst-text" style="padding: 12px 0 0 0;"><?=_('SSL Certificate');?> <a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain);?>.crt', 'v_crt');"><i class="fas fa-download"></i></a>
+							<td class="input-label step-top">
+								<label for="v_crt" class="form-label">
+									<?=_('SSL Certificate');?>
+									<a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain);?>.crt', 'v_crt');"><i class="fas fa-download"></i></a>
+								</label>
+								<textarea class="form-control u-minHeight100" name="v_crt" id="v_crt"><?=$v_crt ?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<textarea size="20" class="vst-textinput" name="v_crt" id="v_crt"><?=$v_crt ?> </textarea>
+							<td class="input-label step-top">
+								<label for="v_key" class="form-label">
+									<?=_('SSL Key');?>
+									<a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain);?>.key', 'v_key');"><i class="fas fa-download"></i></a>
+								</label>
+								<textarea class="form-control u-minHeight100" name="v_key" id="v_key"><?=$v_key ?></textarea>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text" style="padding: 12px 0 0 0;">
-								<?=_('SSL Key');?> <a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain);?>.key', 'v_key');"><i class="fas fa-download"></i></a>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea size="20" class="vst-textinput" name="v_key" id="v_key"><?=$v_key ?> </textarea>
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text" style="padding: 24px 0 0 0;">
-								<?=_('SSL CSR');?> <a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain);?>.csr', 'v_crt');"><i class="fas fa-download"></i></a>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<textarea size="20" class="vst-textinput" name="v_csr" id="v_csr"><?=$v_csr ?> </textarea>
+							<td class="input-label step-top">
+								<label for="v_csr" class="form-label">
+									<?=_('SSL CSR');?>
+									<a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain);?>.csr', 'v_crt');"><i class="fas fa-download"></i></a>
+								</label>
+								<textarea class="form-control u-minHeight100" name="v_csr" id="v_csr"><?=$v_csr ?></textarea>
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
+					<table class="data-col2 u-mb20">
 						<tr>
 							<td style="padding: 24px 0 0 0;">
 								<input type="button" class="button cancel" value="<?=_('Back');?>" onclick="<?=$back ?>">
@@ -77,4 +75,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>