Migrate "infinity" fields to .form-control (#2975)

* Migrate Rclone text inputs to .form-control

* Migrate "Command" field on Add/Edit Cron forms

* Migrate text fields on Add/Edit Cron forms

* Consistency

* Fix HTML

* Migrate "infinity" fields on Add/Edit Mail forms

- Fix "infinity" icon JS not working on Edit Mail form

* Migrate some text fields on Add/Edit Package forms

* Migrate "infinity" fields on Add/Edit Package forms

* Remove unnecessary IDs

* Remove .short class

web/css/src/themes/dark.css

@@ -670,14 +670,6 @@ label:hover {
   border-color: #606060 !important;
 }
 
-.vst-input.long {
-
-}
-
-.vst-input.short {
-
-}
-
 .vst-input.vst-list-editor {
 
 }

web/css/src/themes/default.css

@@ -2295,14 +2295,6 @@ label:hover {
   border-color: #cfcfcf;
 }
 
-.vst-input.long {
-  width: 832px;
-}
-
-.vst-input.short {
-  width: 200px;
-}
-
 .vst-input.vst-list-editor {
   border: none;
   box-shadow: none;
@@ -2747,8 +2739,8 @@ a.button.cancel {
 .unlim-trigger {
   cursor: pointer;
   position: absolute;
-  margin-left: -32px;
-  margin-top: 16px;
+  top: 13px;
+  right: 12px;
   z-index: 1;
   font-size: 0.8rem;
 }
@@ -3686,11 +3678,6 @@ li[aria-expanded="true"] a {
   width: 379px;
 }
 
-.cron-helper-tabs .form-select.short {
-  min-width: 30px;
-  width: 70px;
-}
-
 .cron-helper-tabs .button {
   width: auto;
   background-color: #3b9de8;

web/js/pages/add_mail_acc.js

@@ -26,7 +26,7 @@ App.Actions.MAIL_ACC.disable_unlimited = function(elm, source_elm) {
 
 App.Actions.MAIL_ACC.toggle_unlimited_feature = function(evt) {
     var elm = $(evt.target);
-    var ref = elm.prev('.vst-input');
+    var ref = elm.prev('.form-control');
     if (!$(ref).data('checked')) {
         App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
     }
@@ -41,7 +41,7 @@ App.Listeners.MAIL_ACC.checkbox_unlimited_feature = function() {
 
 App.Listeners.MAIL_ACC.init = function() {
     $('.unlim-trigger').each(function(i, elm) {
-        var ref = $(elm).prev('.vst-input');
+        var ref = $(elm).prev('.form-control');
         if (App.Helpers.isUnlimitedValue($(ref).val())) {
             App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
         }

web/js/pages/add_package.js

@@ -24,10 +24,10 @@ App.Actions.PACKAGE.disable_unlimited = function(elm, source_elm) {
     $(source_elm).css('opacity', '0.5');
 }
 
-// 
+//
 App.Actions.PACKAGE.toggle_unlimited_feature = function(evt) {
     var elm = $(evt.target);
-    var ref = elm.prev('.vst-input');
+    var ref = elm.prev('.form-control');
     if (!$(ref).data('checked')) {
         App.Actions.PACKAGE.enable_unlimited(ref, elm);
     }
@@ -42,7 +42,7 @@ App.Listeners.PACKAGE.checkbox_unlimited_feature = function() {
 
 App.Listeners.PACKAGE.init = function() {
     $('.unlim-trigger').each(function(i, elm) {
-        var ref = $(elm).prev('.vst-input');
+        var ref = $(elm).prev('.form-control');
         if (App.Helpers.isUnlimitedValue($(ref).val())) {
             App.Actions.PACKAGE.enable_unlimited(ref, elm);
         }

web/js/pages/edit_mail_acc.js

@@ -27,7 +27,7 @@ App.Actions.MAIL_ACC.disable_unlimited = function(elm, source_elm) {
 //
 App.Actions.MAIL_ACC.toggle_unlimited_feature = function(evt) {
     var elm = $(evt.target);
-    var ref = elm.prev('.vst-input');
+    var ref = elm.prev('.form-control');
     if (!$(ref).data('checked')) {
         App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
     }
@@ -42,7 +42,7 @@ App.Listeners.MAIL_ACC.checkbox_unlimited_feature = function() {
 
 App.Listeners.MAIL_ACC.init = function() {
     $('.unlim-trigger').each(function(i, elm) {
-        var ref = $(elm).prev('.vst-input');
+        var ref = $(elm).prev('.form-control');
         if (App.Helpers.isUnlimitedValue($(ref).val())) {
             App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
         }
@@ -53,6 +53,18 @@ App.Listeners.MAIL_ACC.init = function() {
     });
 }
 
+App.Helpers.isUnlimitedValue = function(value) {
+  var value = value.trim();
+  if (value == App.Constants.UNLIM_VALUE || value == App.Constants.UNLIM_TRANSLATED_VALUE) {
+      return true;
+  }
+
+  return false;
+}
+
+App.Listeners.MAIL_ACC.init();
+App.Listeners.MAIL_ACC.checkbox_unlimited_feature();
+
 App.Actions.MAIL_ACC.update_password_meter = function (){
     var password = $('input[name="v_password"]').val();
     var min_small = new RegExp(/^(?=.*[a-z]).+$/);

web/js/pages/edit_package.js

@@ -24,10 +24,10 @@ App.Actions.PACKAGE.disable_unlimited = function(elm, source_elm) {
     $(source_elm).css('opacity', '0.5');
 }
 
-// 
+//
 App.Actions.PACKAGE.toggle_unlimited_feature = function(evt) {
     var elm = $(evt.target);
-    var ref = elm.prev('.vst-input');
+    var ref = elm.prev('.form-control');
     if (!$(ref).data('checked')) {
         App.Actions.PACKAGE.enable_unlimited(ref, elm);
     }
@@ -42,7 +42,7 @@ App.Listeners.PACKAGE.checkbox_unlimited_feature = function() {
 
 App.Listeners.PACKAGE.init = function() {
     $('.unlim-trigger').each(function(i, elm) {
-        var ref = $(elm).prev('.vst-input');
+        var ref = $(elm).prev('.form-control');
         if (App.Helpers.isUnlimitedValue($(ref).val())) {
             App.Actions.PACKAGE.enable_unlimited(ref, elm);
         }
@@ -103,4 +103,4 @@ $(document).ready(function(){
     $('input[name^=v_ns]').each(function(i, ns){
         i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
     });
-});
+});

web/templates/pages/add_cron.html

@@ -15,7 +15,7 @@
 
 <div class="l-center animated fadeIn">
 
-	<div class="u-pt18 helper-container">
+	<div class="helper-container">
 		<div id="tabs" class="cron-helper-tabs">
 			<ul>
 				<li><a href="#tabs-1"><?=_('Minutes');?></a></li>
@@ -63,7 +63,7 @@
 					</p>
 					<p>
 						<label for="h_min_2" class="form-label first"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_2">
+						<select class="form-select" name="h_min" id="h_min_2" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="15">15</option>
 							<option value="30">30</option>
@@ -94,7 +94,7 @@
 					</p>
 					<p>
 						<label for="h_hour_3" class="form-label first"><?=_('Hour');?>:</label>
-						<select class="form-select short" name="h_hour" id="h_hour_3">
+						<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;">
 							<option value="0">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -121,7 +121,7 @@
 							<option value="23">23</option>
 						</select>
 						<label for="h_min_3" class="form-label"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_3">
+						<select class="form-select" name="h_min" id="h_min_3" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -165,7 +165,7 @@
 					</p>
 					<p>
 						<label for="h_hour_4" class="form-label first"><?=_('Hour');?>:</label>
-						<select class="form-select short" name="h_hour" id="h_hour_4">
+						<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;">
 							<option value="0">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -192,7 +192,7 @@
 							<option value="23">23</option>
 						</select>
 						<label for="h_min_4" class="form-label"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_4">
+						<select class="form-select" name="h_min" id="h_min_4" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -242,7 +242,7 @@
 					</p>
 					<p>
 						<label for="h_day_5" class="form-label first"><?=_('Date');?>:</label>
-						<select class="form-select short" name="h_day" id="h_day_5">
+						<select class="form-select" name="h_day" id="h_day_5" style="width:70px;">
 							<option value="1" selected="selected">1</option>
 							<option value="2">2</option>
 							<option value="3">3</option>
@@ -276,7 +276,7 @@
 							<option value="31">31</option>
 						</select>
 						<label for="h_hour_5" class="form-label"><?=_('Hour');?>:</label>
-						<select class="form-select short" name="h_hour" id="h_hour_5">
+						<select class="form-select" name="h_hour" id="h_hour_5" style="width:70px;">
 							<option value="0">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -303,7 +303,7 @@
 							<option value="23">23</option>
 						</select>
 						<label for="h_min_5" class="form-label"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_5">
+						<select class="form-select" name="h_min" id="h_min_5" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -341,7 +341,7 @@
 					</table>
 				</td>
 				<td class="data-dotted">
-					<table class="data-col2" width="600px">
+					<table class="data-col2" width="850px">
 						<tr>
 							<td class="u-pt18">
 								<span class="page-title"><?=_('Adding Cron Job');?></span>
@@ -354,67 +354,42 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Command');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input long" name="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
+								<label for="v_cmd" class="form-label"><?=_('Command');?></label>
+								<input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Minute');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_min" value="<?=htmlentities(trim($v_min, "'"))?>">
+								<label for="v_min" class="form-label"><?=_('Minute');?></label>
+								<input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?=htmlentities(trim($v_min, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Hour');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_hour" value="<?=htmlentities(trim($v_hour, "'"))?>">
+								<label for="v_hour" class="form-label"><?=_('Hour');?></label>
+								<input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?=htmlentities(trim($v_hour, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Day');?>
+								<label for="v_day" class="form-label"><?=_('Day');?></label>
+								<input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?=htmlentities(trim($v_day, "'"))?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_day" value="<?=htmlentities(trim($v_day, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<?=_('Month');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_month" value="<?=htmlentities(trim($v_month, "'"))?>">
+							<td class="u-pt18">
+								<label for="v_month" class="form-label"><?=_('Month');?></label>
+								<input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Day of week');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_wday" value="<?=htmlentities(trim($v_wday, "'"))?>">
+								<label for="v_wday" class="form-label"><?=_('Day of week');?></label>
+								<input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?=htmlentities(trim($v_wday, "'"))?>">
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
-					</table>
+					<table class="data-col2"></table>
 				</td>
 			</tr>
 		</table>

web/templates/pages/add_db.html

@@ -189,8 +189,7 @@
 								</td>
 							</tr>
 						</table>
-						<table class="data-col2">
-						</table>
+						<table class="data-col2"></table>
 					</td>
 				</tr>
 			<?php } ?>

web/templates/pages/add_firewall_banlist.html

@@ -63,10 +63,7 @@
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
-						<tr>
-						</tr>
-					</table>
+					<table class="data-col2"></table>
 				</td>
 			</tr>
 		</table>

web/templates/pages/add_mail_acc.html

@@ -84,13 +84,13 @@
 								<table style="display:<?php if (empty($v_adv)) echo 'none';?> ;" id="advtable">
 									<tr>
 										<td class="u-pt6">
-											<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_quota" value="<?=htmlentities(trim($v_quota, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-quota" /</i>
+											<label for="v_quota" class="form-label">
+												<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+											</label>
+											<div class="u-pos-relative u-input-width">
+												<input type="text" class="form-control" name="v_quota" id="v_quota" value="<?=htmlentities(trim($v_quota, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -150,8 +150,7 @@
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
-					</table>
+					<table class="data-col2"></table>
 				</td>
 				<td class="mail-infoblock-td">
 					<div class="mail-infoblock">

web/templates/pages/add_package.html

@@ -42,44 +42,36 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Package Name');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_package" value="<?=htmlentities(trim($v_package, "'"))?>">
+								<label for="v_package" class="form-label"><?=_('Package Name');?></label>
+								<input type="text" class="form-control" name="v_package" id="v_package" value="<?=htmlentities(trim($v_package, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
-								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-disk-quota"></i>
+								<label for="v_disk_quota" class="form-label">
+									<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+								</label>
+								<div class="u-pos-relative">
+									<input type="text" class="form-control" name="v_disk_quota" id="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
+									<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+								</div>
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Bandwidth');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
-								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-bandwidth"></i>
+								<label for="v_bandwidth" class="form-label">
+									<?=_('Bandwidth');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+								</label>
+								<div class="u-pos-relative">
+									<input type="text" class="form-control" name="v_bandwidth" id="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
+									<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+								</div>
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Backups');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
+								<label for="v_backups" class="form-label"><?=_('Backups');?></label>
+								<input type="text" class="form-control" name="v_backups" id="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -93,24 +85,22 @@
 								<table id="web-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Web Domains');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-domains"></i>
+											<label for="v_web_domains" class="form-label"><?=_('Web Domains');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_web_domains" id="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('Web Aliases');?> <span class="optional">(<?=_('per domain');?>)</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-aliases"></i>
+											<label for="v_web_aliases" class="form-label">
+												<?=_('Web Aliases');?> <span class="optional">(<?=_('per domain');?>)</span>
+											</label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -204,24 +194,22 @@
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('DNS domains');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-domain"></i>
+											<label for="v_dns_domains" class="form-label"><?=_('DNS domains');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('DNS records');?> <span class="optional">(<?=_('per domain');?>)</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-records"></i>
+											<label for="v_dns_records" class="form-label">
+												<?=_('DNS records');?> <span class="optional">(<?=_('per domain');?>)</span>
+											</label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
@@ -312,36 +300,32 @@
 								<table id="mail-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Mail Domains');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-domains"></i>
+											<label for="v_mail_domains" class="form-label"><?=_('Mail Domains');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_mail_domains" id="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('Mail Accounts');?> <span class="optional">(<?=_('per domain');?>)</span>
+											<label for="v_mail_accounts" class="form-label">
+												<?=_('Mail Accounts');?> <span class="optional">(<?=_('per domain');?>)</span>
+											</label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-accounts"></i>
-										<td>
-									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('Rate limit');?> <span class="optional">(<?=_('per account / hour');?>)</span>
+											<label for="v_ratelimit" class="form-label">
+												<?=_('Rate limit');?> <span class="optional">(<?=_('per account / hour');?>)</span>
+											</label>
+											<input type="text" class="form-control" name="v_ratelimit" id="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
 										</td>
 									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
-										<td>
-									</tr>
 								</table>
 							</td>
 						</tr>
@@ -356,13 +340,11 @@
 								<table id="database-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Databases');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-databases"></i>
+											<label for="v_databases" class="form-label"><?=_('Databases');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_databases" id="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 								</table>
@@ -379,13 +361,11 @@
 								<table id="system-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Cron Jobs');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-cron-jobs"></i>
+											<label for="v_cron_jobs" class="form-label"><?=_('Cron Jobs');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_cron_jobs" id="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>

web/templates/pages/edit_cron.html

@@ -15,7 +15,7 @@
 
 <div class="l-center animated fadeIn">
 
-	<div class="u-pt18 helper-container">
+	<div class="helper-container">
 		<div id="tabs" class="cron-helper-tabs">
 			<ul>
 				<li><a href="#tabs-1"><?=_('Minutes');?></a></li>
@@ -63,7 +63,7 @@
 					</p>
 					<p>
 						<label for="h_min_2" class="form-label first"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_2">
+						<select class="form-select" name="h_min" id="h_min_2" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="15">15</option>
 							<option value="30">30</option>
@@ -94,7 +94,7 @@
 					</p>
 					<p>
 						<label for="h_hour_3" class="form-label first"><?=_('Hour');?>:</label>
-						<select class="form-select short" name="h_hour" id="h_hour_3">
+						<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;">
 							<option value="0">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -121,7 +121,7 @@
 							<option value="23">23</option>
 						</select>
 						<label for="h_min_3" class="form-label"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_3">
+						<select class="form-select" name="h_min" id="h_min_3" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -165,7 +165,7 @@
 					</p>
 					<p>
 						<label for="h_hour_4" class="form-label first"><?=_('Hour');?>:</label>
-						<select class="form-select short" name="h_hour" id="h_hour_4">
+						<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;">
 							<option value="0">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -192,7 +192,7 @@
 							<option value="23">23</option>
 						</select>
 						<label for="h_min_4" class="form-label"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_4">
+						<select class="form-select" name="h_min" id="h_min_4" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -242,7 +242,7 @@
 					</p>
 					<p>
 						<label for="h_day_5" class="form-label first"><?=_('Date');?>:</label>
-						<select class="form-select short" name="h_day" id="h_day_5">
+						<select class="form-select" name="h_day" id="h_day_5" style="width:70px;">
 							<option value="1" selected="selected">1</option>
 							<option value="2">2</option>
 							<option value="3">3</option>
@@ -276,7 +276,7 @@
 							<option value="31">31</option>
 						</select>
 						<label for="h_hour_5" class="form-label"><?=_('Hour');?>:</label>
-						<select class="form-select short" name="h_hour" id="h_hour_5">
+						<select class="form-select" name="h_hour" id="h_hour_5" style="width:70px;">
 							<option value="0">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -303,7 +303,7 @@
 							<option value="23">23</option>
 						</select>
 						<label for="h_min_5" class="form-label"><?=_('Minute');?>:</label>
-						<select class="form-select short" name="h_min" id="h_min_5">
+						<select class="form-select" name="h_min" id="h_min_5" style="width:70px;">
 							<option value="0" selected="selected">00</option>
 							<option value="1">01</option>
 							<option value="2">02</option>
@@ -341,7 +341,7 @@
 					</table>
 				</td>
 				<td class="data-dotted">
-					<table class="data-col2" width="600px">
+					<table class="data-col2" width="850px">
 						<tr>
 							<td class="u-pt18">
 								<span class="page-title"><?=_('Editing Cron Job');?></span>
@@ -354,67 +354,42 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Command');?>
+								<label for="v_cmd" class="form-label"><?=_('Command');?></label>
+								<input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
 							</td>
 						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input long" name="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
-							</td>
-						</tr>
-
 						<tr>
 							<td class="u-pt18">
-								<?=_('Minute');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_min" value="<?=htmlentities(trim($v_min, "'"))?>">
+								<label for="v_min" class="form-label"><?=_('Minute');?></label>
+								<input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?=htmlentities(trim($v_min, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Hour');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_hour" value="<?=htmlentities(trim($v_hour, "'"))?>">
+								<label for="v_hour" class="form-label"><?=_('Hour');?></label>
+								<input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?=htmlentities(trim($v_hour, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Day');?>
+								<label for="v_day" class="form-label"><?=_('Day');?></label>
+								<input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?=htmlentities(trim($v_day, "'"))?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_day" value="<?=htmlentities(trim($v_day, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<?=_('Month');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_month" value="<?=htmlentities(trim($v_month, "'"))?>">
+							<td class="u-pt18">
+								<label for="v_month" class="form-label"><?=_('Month');?></label>
+								<input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Day of week');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input short" name="v_wday" value="<?=htmlentities(trim($v_wday, "'"))?>">
+								<label for="v_wday" class="form-label"><?=_('Day of week');?></label>
+								<input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?=htmlentities(trim($v_wday, "'"))?>">
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2"></table>
+					<table class="data-col2 u-mb20"></table>
 				</td>
 			</tr>
 		</table>

web/templates/pages/edit_firewall.html

@@ -87,8 +87,7 @@
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
-					</table>
+					<table class="data-col2"></table>
 				</td>
 			</tr>
 		</table>

web/templates/pages/edit_mail_acc.html

@@ -80,13 +80,13 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_quota" value="<?php if (!empty($v_quota)) {echo htmlentities(trim($v_quota, "'"));} else { echo "0"; } ?>">
-								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-quota"></i>
+								<label for="v_quota" class="form-label">
+									<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+								</label>
+								<div class="u-pos-relative u-input-width">
+									<input type="text" class="form-control" name="v_quota" id="v_quota" value="<?php if (!empty($v_quota)) {echo htmlentities(trim($v_quota, "'"));} else { echo "0"; } ?>">
+									<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -162,8 +162,7 @@
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
-					</table>
+					<table class="data-col2"></table>
 				</td>
 				<td class="mail-infoblock-td">
 					<div class="mail-infoblock">

web/templates/pages/edit_package.html

@@ -42,45 +42,37 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Package Name');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_package_new" value="<?=htmlentities(trim($v_package_new, "'"))?>">
+								<label for="v_package_new" class="form-label"><?=_('Package Name');?></label>
+								<input type="text" class="form-control" name="v_package_new" id="v_package_new" value="<?=htmlentities(trim($v_package_new, "'"))?>">
 								<input type="hidden" name="v_package" value="<?=htmlentities(trim($v_package, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
-								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-disk-quota"></i>
+								<label for="v_disk_quota" class="form-label">
+									<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+								</label>
+								<div class="u-pos-relative">
+									<input type="text" class="form-control" name="v_disk_quota" id="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
+									<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+								</div>
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Bandwidth');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
-								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-bandwidth"></i>
+								<label for="v_bandwidth" class="form-label">
+									<?=_('Bandwidth');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+								</label>
+								<div class="u-pos-relative">
+									<input type="text" class="form-control" name="v_bandwidth" id="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
+									<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+								</div>
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Backups');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input" name="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
+								<label for="v_backups" class="form-label"><?=_('Backups');?></label>
+								<input type="text" class="form-control" name="v_backups" id="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -94,24 +86,22 @@
 								<table id="web-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Web Domains');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-domains"></i>
+											<label for="v_web_domains" class="form-label"><?=_('Web Domains');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_web_domains" id="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('Web Aliases');?> <span class="optional">(<?=_('per domain');?>)</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-aliases"></i>
+											<label for="v_web_aliases" class="form-label">
+												<?=_('Web Aliases');?> <span class="optional">(<?=_('per domain');?>)</span>
+											</label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -208,24 +198,22 @@
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('DNS domains');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-domain"></i>
+											<label for="v_dns_domains" class="form-label"><?=_('DNS domains');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('DNS records');?> <span class="optional">(<?=_('per domain');?>)</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-records"></i>
+											<label for="v_dns_records" class="form-label">
+												<?=_('DNS records');?> <span class="optional">(<?=_('per domain');?>)</span>
+											</label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
@@ -316,36 +304,32 @@
 								<table id="mail-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Mail Domains');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-domains"></i>
+											<label for="v_mail_domains" class="form-label"><?=_('Mail Domains');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_mail_domains" id="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('Mail Accounts');?> <span class="optional">(<?=_('per domain');?>)</span>
+											<label for="v_mail_accounts" class="form-label">
+												<?=_('Mail Accounts');?> <span class="optional">(<?=_('per domain');?>)</span>
+											</label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-accounts"></i>
-										<td>
-									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('Rate limit');?> <span class="optional">(<?=_('per account / hour');?>)</span>
+											<label for="v_ratelimit" class="form-label">
+												<?=_('Rate limit');?> <span class="optional">(<?=_('per account / hour');?>)</span>
+											</label>
+											<input type="text" class="form-control" name="v_ratelimit" id="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
 										</td>
 									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
-										<td>
-									</tr>
 								</table>
 							</td>
 						</tr>
@@ -360,13 +344,11 @@
 								<table id="database-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Databases');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-databases"></i>
+											<label for="v_databases" class="form-label"><?=_('Databases');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_databases" id="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 								</table>
@@ -383,13 +365,11 @@
 								<table id="system-options" style="display: none;">
 									<tr>
 										<td class="u-pt18">
-											<?=_('Cron Jobs');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input" name="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
-											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-cron-jobs"></i>
+											<label for="v_cron_jobs" class="form-label"><?=_('Cron Jobs');?></label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control u-input-width" name="v_cron_jobs" id="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
+												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+											</div>
 										</td>
 									</tr>
 									<tr>

web/templates/pages/edit_server.html

@@ -731,24 +731,19 @@
 													<td>
 														<table>
 															<tr>
-																<td class="vst-text">
+																<td class="u-pt6">
 																	<label for="v_rclone_host" class="form-label"><?=_('Host');?></label>
-																	<input type="text" class="form-control" name="v_rclone_host" id="v_rclone_host" value="<?=trim($v_rclone_host, "'")?>">
-																</td>
-															</tr>
-															<tr>
-																<td class="vst-text">
-																	<?=_('Directory');?>
+																	<input type="text" class="form-control u-input-width" name="v_rclone_host" id="v_rclone_host" value="<?=trim($v_rclone_host, "'")?>">
 																</td>
 															</tr>
 															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_rclone_path" value="<?=trim($v_rclone_path, "'")?>">
-																	<br><br>
+																<td class="u-pt6">
+																	<label for="v_rclone_path" class="form-label"><?=_('Directory');?></label>
+																	<input type="text" class="form-control u-input-width u-mb20" name="v_rclone_path" id="v_rclone_path" value="<?=trim($v_rclone_path, "'")?>">
 																</td>
 															</tr>
 														</table>
-													</td>	
+													</td>
 												</tr>
 											</table>
 										</td>