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

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

web/css/src/themes/dark.css

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

web/css/src/themes/default.css

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

web/css/src/themes/flat.css

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

web/css/src/themes/vestia.css

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

web/js/init.js

@@ -557,7 +557,7 @@ $(document).ready(function(){
 
               // focusing on the first input at form
               if( location.href.indexOf('lead=') == -1 && !$('.ui-dialog').is(':visible') ){
-                $('#vstobjects .vst-input:not([disabled]), #vstobjects .form-control:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
+                $('#vstobjects .form-control:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
               }
 
               $('.l-profile__notifications').click(function(){

web/js/pages/add_dns.js

@@ -1,24 +1,24 @@
 $(document).ready(function(){
-    $('.add-ns-button').click(function(){
+    $('.js-add-ns-button').click(function(){
         var n = $('input[name^=v_ns]').length;
         if(n < 8){
             var t = $($('input[name=v_ns1]').parents('tr')[0]).clone(true, true);
             t.find('input').attr({value:'', name:'v_ns'+(n+1)});
             t.find('span').show();
-            $('tr.add-ns').before(t);
+            $('tr.js-add-ns').before(t);
         }
         if( n == 7 ) {
-            $('.add-ns').hide();
+            $('.js-add-ns').addClass('u-hidden');
         }
     });
 
-    $('.remove-ns').click(function(){
+    $('.js-remove-ns').click(function(){
         $(this).parents('tr')[0].remove();
         $('input[name^=v_ns]').each(function(i, ns){
             $(ns).attr({name: 'v_ns'+(i+1)});
             i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
         })
-        $('.add-ns').show()
+        $('.js-add-ns').removeClass('u-hidden');
     });
 
     $('input[name^=v_ns]').each(function(i, ns){

web/js/pages/add_package.js

@@ -78,26 +78,26 @@ $('form[name="v_add_package"]').on('submit', function(evt) {
 
 
 $(document).ready(function(){
-    $('.add-ns-button').click(function(){
+    $('.js-add-ns-button').click(function(){
         var n = $('input[name^=v_ns]').length;
         if(n < 8){
             var t = $($('input[name=v_ns1]').parents('tr')[0]).clone(true, true);
             t.find('input').attr({value:'', name:'v_ns'+(n+1)});
             t.find('span').show();
-            $('tr.add-ns').before(t);
+            $('tr.js-add-ns').before(t);
         }
         if( n == 7 ) {
-            $('.add-ns').hide();
+            $('.js-add-ns').addClass('u-hidden');
         }
     });
 
-    $('.remove-ns').click(function(){
+    $('.js-remove-ns').click(function(){
         $(this).parents('tr')[0].remove();
         $('input[name^=v_ns]').each(function(i, ns){
             $(ns).attr({name: 'v_ns'+(i+1)});
             i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
         });
-        $('.add-ns').show();
+        $('.js-add-ns').removeClass('u-hidden');
     });
 
     $('input[name^=v_ns]').each(function(i, ns){

web/js/pages/edit_package.js

@@ -78,26 +78,26 @@ $('form[name="v_edit_package"]').on('submit', function(evt) {
 
 
 $(document).ready(function(){
-    $('.add-ns-button').click(function(){
+    $('.js-add-ns-button').click(function(){
         var n = $('input[name^=v_ns]').length;
         if(n < 8){
             var t = $($('input[name=v_ns1]').parents('tr')[0]).clone(true, true);
             t.find('input').attr({value:'', name:'v_ns'+(n+1)});
             t.find('span').show();
-            $('tr.add-ns').before(t);
+            $('tr.js-add-ns').before(t);
         }
         if( n == 7 ) {
-            $('.add-ns').hide();
+            $('.js-add-ns').addClass('u-hidden');
         }
     });
 
-    $('.remove-ns').click(function(){
+    $('.js-remove-ns').click(function(){
         $(this).parents('tr')[0].remove();
         $('input[name^=v_ns]').each(function(i, ns){
             $(ns).attr({name: 'v_ns'+(i+1)});
             i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
         });
-        $('.add-ns').show();
+        $('.js-add-ns').removeClass('u-hidden');
     });
 
     $('input[name^=v_ns]').each(function(i, ns){

web/js/pages/edit_user.js

@@ -31,26 +31,26 @@ App.Listeners.WEB.keypress_v_password();
 
 
 $(document).ready(function(){
-    $('.add-ns-button').click(function(){
+    $('.js-add-ns-button').click(function(){
         var n = $('input[name^=v_ns]').length;
         if(n < 8){
             var t = $($('input[name=v_ns1]').parents('tr')[0]).clone(true, true);
             t.find('input').attr({value:'', name:'v_ns'+(n+1)});
             t.find('span').show();
-            $('tr.add-ns').before(t);
+            $('tr.js-add-ns').before(t);
         }
         if( n == 7 ) {
-            $('.add-ns').hide();
+            $('.js-add-ns').addClass('u-hidden');
         }
     });
 
-    $('.remove-ns').click(function(){
+    $('.js-remove-ns').click(function(){
         $(this).parents('tr')[0].remove();
         $('input[name^=v_ns]').each(function(i, ns){
             $(ns).attr({name: 'v_ns'+(i+1)});
             i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
         });
-        $('.add-ns').show();
+        $('.js-add-ns').removeClass('u-hidden');
     });
 
     $('input[name^=v_ns]').each(function(i, ns){

web/templates/pages/add_db.html

@@ -103,7 +103,8 @@
 							<tr>
 								<td class="u-pt6">
 									<label for="v_password" class="form-label">
-										<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+										<?=_('Password');?>
+										<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
 									</label>
 									<div class="u-pos-relative u-input-width u-mb10">
 										<input type="text" class="form-control js-password-input" name="v_password" id="v_password">

web/templates/pages/add_dns.html

@@ -68,16 +68,18 @@
 							<tr>
 								<td class="u-pt6">
 									<label for="v_ip" class="form-label"><?=_('IP address');?></label>
-									<select class="form-select u-input-width" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
-										<option value="">clear</option>
-										<?php
-											foreach ($v_ips as $ip => $value) {
-												$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
-												echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
-											}
-										?>
-									</select>
-									<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+									<div class="u-pos-relative u-input-width">
+										<select class="form-select" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+											<option value="">clear</option>
+											<?php
+												foreach ($v_ips as $ip => $value) {
+													$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
+													echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
+												}
+											?>
+										</select>
+										<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+									</div>
 								</td>
 							</tr>
 							<?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] === 'yes')) { ?>
@@ -120,86 +122,96 @@
 										<tr>
 											<td class="u-pt6">
 												<label for="v_ttl" class="form-label"><?=_('TTL');?></label>
-												<input type="text" class="form-control" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
+												<input type="text" class="form-control u-input-width" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
 											</td>
 										</tr>
 										<tr>
 											<td class="u-pt6">
-												<?=_('Name servers');?>
+												<p class="form-label"><?=_('Name servers');?></p>
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
-												<span class="remove-ns additional-control delete"><?=_('delete');?></span>
+												<input type="text" class="form-control u-input-width" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
-												<span class="remove-ns additional-control delete"><?=_('delete');?></span>
+												<input type="text" class="form-control u-input-width" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 											</td>
 										</tr>
 										<?php
 											if($v_ns3) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-														<span class="remove-ns additional-control delete">'._('delete').'</span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+															<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns4) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-														<span class="remove-ns additional-control delete">'._('delete').'</span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+															<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns5) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-														<span class="remove-ns additional-control delete">'._('delete').'</span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+															<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns6) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-														<span class="remove-ns additional-control delete">'._('delete').'</span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+															<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns7) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-														<span class="remove-ns additional-control delete">'._('delete').'</span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+															<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns8) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-														<span class="remove-ns additional-control delete">'._('delete').'</span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+															<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+														</div>
 													</td>
 												</tr>';
 											}
 										?>
-										<tr class="add-ns" <?php if ($v_ns8) echo 'style="display:none;"' ; ?> >
+										<tr class="js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
 											<td class="u-pt18">
-												<span class="add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
+												<span class="js-add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
 											</td>
 										</tr>
 									</table>
 								</td>
 							</tr>
 						</table>
-						<table class="data-col2"></table>
+						<table class="data-col2 u-mb20"></table>
 					</td>
 				</tr>
 			<?php } ?>

web/templates/pages/add_dns_rec.html

@@ -80,16 +80,18 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_val" class="form-label"><?=_('IP or Value');?></label>
-								<select class="form-select u-input-width" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
-									<option value="">&nbsp;</option>
-									<?php
-										foreach ($v_ips as $ip => $value) {
-											$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
-											echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
-										}
-									?>
-								</select>
-								<input type="text" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								<div class="u-pos-relative u-input-width">
+									<select class="form-select" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+										<option value="">&nbsp;</option>
+										<?php
+											foreach ($v_ips as $ip => $value) {
+												$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
+												echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
+											}
+										?>
+									</select>
+									<input type="text" class="form-control list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								</div>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/add_firewall.html

@@ -72,10 +72,12 @@
 								<label for="v_ip" class="form-label">
 									<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
 								</label>
-								<select class="form-select u-input-width" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
-									<option value="">&nbsp;</option>
-								</select>
-								<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<div class="u-pos-relative u-input-width">
+									<select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
+										<option value="">&nbsp;</option>
+									</select>
+									<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -101,18 +103,18 @@
 	});
 
 	$(function () {
-		var targetelement = document.getElementById('quickips_list');
+		var targetElement = document.getElementById('quickips_list');
 
 		var newEl = document.createElement("option");
 		newEl.text = "IP address lists:";
 		newEl.disabled = true;
-		targetelement.appendChild(newEl);
+		targetElement.appendChild(newEl);
 
 		iplists.forEach(iplist => {
 			var newEl = document.createElement("option");
 			newEl.text = iplist.name;
 			newEl.value = "ipset:" + iplist.name;
-			targetelement.appendChild(newEl);
+			targetElement.appendChild(newEl);
 		});
 	});
 </script>

web/templates/pages/add_firewall_ipset.html

@@ -51,10 +51,12 @@
 								<label for="v_datasource" class="form-label">
 									<?=_('Data Source') ?> <span class="optional">(<?=_('url, script or file');?>)</span>
 								</label>
-								<select class="form-select u-input-width" tabindex="-1" id="datasource_list" onchange="this.nextElementSibling.value=this.value">
-									<option value="">clear</option>
-								</select>
-								<input type="text" class="vst-input vst-list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
+								<div class="u-pos-relative u-input-width">
+									<select class="form-select" tabindex="-1" id="datasource_list" onchange="this.nextElementSibling.value=this.value">
+										<option value="">clear</option>
+									</select>
+									<input type="text" class="form-control list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -117,32 +119,32 @@
 	});
 
 	$(function () {
-		var targetelement = document.getElementById('datasource_list');
+		var targetElement = document.getElementById('datasource_list');
 
 		// Blacklist
 		var newEl = document.createElement("option");
 		newEl.text = "<?=_('BLACKLIST') ?>";
 		newEl.disabled = true;
-		targetelement.appendChild(newEl);
+		targetElement.appendChild(newEl);
 
 		blacklist_iplists.forEach(iplist => {
 			var newEl = document.createElement("option");
 			newEl.text = iplist.name;
 			newEl.value = iplist.source;
-			targetelement.appendChild(newEl);
+			targetElement.appendChild(newEl);
 		});
 
 		// IPVERSE
 		var newEl = document.createElement("option");
 		newEl.text = "<?=_('IPVERSE') ?>";
 		newEl.disabled = true;
-		targetelement.appendChild(newEl);
+		targetElement.appendChild(newEl);
 
 		country_iplists.forEach(iplist => {
 			var newEl = document.createElement("option");
 			newEl.text = iplist.name;
 			newEl.value = iplist.source;
-			targetelement.appendChild(newEl);
+			targetElement.appendChild(newEl);
 		});
 	});
 </script>

web/templates/pages/add_mail_acc.html

@@ -56,7 +56,8 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_password" class="form-label">
-									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+									<?=_('Password');?>
+									<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
 								</label>
 								<div class="u-pos-relative u-input-width u-mb10">
 									<input type="text" class="form-control js-password-input" name="v_password" id="v_password">

web/templates/pages/add_package.html

@@ -215,74 +215,84 @@
 									<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
 										<tr>
 											<td class="u-pt6">
-												<?=_('Name Servers');?>
+												<p class="form-label"><?=_('Name Servers');?></p>
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
-												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+												<input type="text" class="form-control u-input-width" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
-												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+												<input type="text" class="form-control u-input-width" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 											</td>
 										</tr>
 										<?php
 											if($v_ns3) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns4) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns5) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns6) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns7) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns8) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 										?>
-										<tr class="add-ns" <?php if ($v_ns8) echo 'style="display:none;"' ; ?> >
+										<tr class="js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
 											<td class="u-pt18">
-												<span class="add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
+												<span class="js-add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
 											</td>
 										</tr>
 									<?php } ?>

web/templates/pages/add_user.html

@@ -61,7 +61,8 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_password" class="form-label">
-									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+									<?=_('Password');?>
+									<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
 								</label>
 								<div class="u-pos-relative u-mb10">
 									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>" tabindex="4">

web/templates/pages/edit_db.html

@@ -64,7 +64,8 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_password" class="form-label">
-									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+									<?=_('Password');?>
+									<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
 								</label>
 								<div class="u-pos-relative u-mb10">
 									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">

web/templates/pages/edit_dns.html

@@ -50,17 +50,19 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_ip" class="form-label"><?=_('IP address');?></label>
-								<select class="form-select u-input-width" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
-									<option value="">clear</option>
-									<?php
-										foreach ($v_ips as $ip => $value) {
-											$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
-											$ip_selected = ((!empty($v_ip) && ($v_ip==$ip||$v_ip==$display_ip) ))? 'selected' : '';
-											echo "<option value='{$display_ip}' {$ip_selected}>" . htmlentities($display_ip) . "</option>\n";
-										}
-									?>
-								</select>
-								<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<div class="u-pos-relative">
+									<select class="form-select" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+										<option value="">clear</option>
+										<?php
+											foreach ($v_ips as $ip => $value) {
+												$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
+												$ip_selected = ((!empty($v_ip) && ($v_ip==$ip||$v_ip==$display_ip) ))? 'selected' : '';
+												echo "<option value='{$display_ip}' {$ip_selected}>" . htmlentities($display_ip) . "</option>\n";
+											}
+										?>
+									</select>
+									<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								</div>
 							</td>
 						</tr>
 						<?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] === 'yes')) { ?>

web/templates/pages/edit_dns_rec.html

@@ -52,7 +52,7 @@
 								<label for="v_rec" class="form-label"><?=_('Record');?></label>
 								<div class="u-side-by-side">
 									<input type="text" class="form-control u-input-width" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
-                  <input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
+									<input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
 									<small class="hint u-ml10"></small>
 								</div>
 							</td>
@@ -81,16 +81,18 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_val" class="form-label"><?=_('IP or Value');?></label>
-								<select class="form-select u-input-width" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
-									<option value="">clear</option>
-									<?php
-										foreach ($v_ips as $ip => $value) {
-											$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
-											echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
-										}
-									?>
-								</select>
-								<input type="text" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								<div class="u-pos-relative u-input-width">
+									<select class="form-select" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+										<option value="">&nbsp;</option>
+										<?php
+											foreach ($v_ips as $ip => $value) {
+												$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
+												echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
+											}
+										?>
+									</select>
+									<input type="text" class="form-control list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								</div>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_firewall.html

@@ -72,10 +72,12 @@
 								<label for="v_ip" class="form-label">
 									<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
 								</label>
-								<select class="form-select u-input-width" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
-									<option value="">&nbsp;</option>
-								</select>
-								<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<div class="u-pos-relative u-input-width">
+									<select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
+										<option value="">&nbsp;</option>
+									</select>
+									<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -101,18 +103,18 @@
 	});
 
 	$(function () {
-		var targetelement = document.getElementById('quickips_list');
+		var targetElement = document.getElementById('quickips_list');
 
 		var newEl = document.createElement("option");
 		newEl.text = "IP address lists:";
 		newEl.disabled = true;
-		targetelement.appendChild(newEl);
+		targetElement.appendChild(newEl);
 
 		iplists.forEach(iplist => {
 			var newEl = document.createElement("option");
 			newEl.text = iplist.name;
 			newEl.value = "ipset:" + iplist.name;
-			targetelement.appendChild(newEl);
+			targetElement.appendChild(newEl);
 		});
 	});
 </script>

web/templates/pages/edit_mail_acc.html

@@ -51,7 +51,8 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_password" class="form-label">
-									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+									<?=_('Password');?>
+									<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
 								</label>
 								<div class="u-pos-relative u-input-width u-mb10">
 									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">

web/templates/pages/edit_package.html

@@ -219,74 +219,84 @@
 									<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
 										<tr>
 											<td class="u-pt6">
-												<?=_('Name Servers');?>
+												<p class="form-label"><?=_('Name Servers');?></p>
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
-												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+												<input type="text" class="form-control u-input-width" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
-												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+												<input type="text" class="form-control u-input-width" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 											</td>
 										</tr>
 										<?php
 											if($v_ns3) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns4) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns5) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns6) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns7) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 											if($v_ns8) {
 												echo '<tr>
 													<td>
-														<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
+														<div class="u-side-by-side">
+															<input type="text" class="form-control u-input-width" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+															<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+														</div>
 													</td>
 												</tr>';
 											}
 										?>
-										<tr class="add-ns" <?php if ($v_ns8) echo 'style="display:none;"' ; ?> >
+										<tr class="js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
 											<td class="u-pt18">
-												<span class="add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
+												<span class="js-add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
 											</td>
 										</tr>
 									<?php } ?>

web/templates/pages/edit_server.html

@@ -419,7 +419,7 @@
 													<tr>
 														<td class="u-pt6">
 															<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, "'"))?>">
+															<input type="text" class="form-control u-input-width" name="v_smtp_relay_host" id="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
 														</td>
 													</tr>
 													<tr>

web/templates/pages/edit_user.html

@@ -101,7 +101,8 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_password" class="form-label">
-									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+									<?=_('Password');?>
+									<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
 								</label>
 								<div class="u-pos-relative u-mb10">
 									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">
@@ -305,74 +306,84 @@
 										<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
 											<tr>
 												<td class="u-pt6">
-													<?=_('Default Name Servers');?>
+													<p class="form-label"><?=_('Default Name Servers');?></p>
 												</td>
 											</tr>
 											<tr>
 												<td>
-													<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
-													<span class="remove-ns additional-control delete vst-advanced button danger"><?=_('delete');?></span>
+													<input type="text" class="form-control u-input-width" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 												</td>
 											</tr>
 											<tr>
 												<td>
-													<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
-													<span class="remove-ns additional-control delete vst-advanced button danger"><?=_('delete');?></span>
+													<input type="text" class="form-control u-input-width" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 												</td>
 											</tr>
 											<?php
 												if($v_ns3) {
 													echo '<tr>
 														<td>
-															<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
+															<div class="u-side-by-side">
+																<input type="text" class="form-control u-input-width" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+															</div>
 														</td>
 													</tr>';
 												}
 												if($v_ns4) {
 													echo '<tr>
 														<td>
-															<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
+															<div class="u-side-by-side">
+																<input type="text" class="form-control u-input-width" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+															</div>
 														</td>
 													</tr>';
 												}
 												if($v_ns5) {
 													echo '<tr>
 														<td>
-															<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
+															<div class="u-side-by-side">
+																<input type="text" class="form-control u-input-width" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+															</div>
 														</td>
 													</tr>';
 												}
 												if($v_ns6) {
 													echo '<tr>
 														<td>
-															<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
+															<div class="u-side-by-side">
+																<input type="text" class="form-control u-input-width" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+															</div>
 														</td>
 													</tr>';
 												}
 												if($v_ns7) {
 													echo '<tr>
 														<td>
-															<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
+															<div class="u-side-by-side">
+																<input type="text" class="form-control u-input-width" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+															</div>
 														</td>
 													</tr>';
 												}
 												if($v_ns8) {
 													echo '<tr>
 														<td>
-															<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
+															<div class="u-side-by-side">
+																<input type="text" class="form-control u-input-width" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+															</div>
 														</td>
 													</tr>';
 												}
 											?>
-											<tr class="add-ns" <?php if ($v_ns8) echo 'style="display:none;"' ; ?> >
+											<tr class="js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
 												<td class="u-pt18">
-													<span class="add-ns-button vst-advanced button"><?=_('Add one more Name Server');?></span>
+													<span class="js-add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
 												</td>
 											</tr>
 										<?php } ?>
@@ -387,7 +398,7 @@
 							</tr>
 						<?php } ?>
 					</table>
-					<table class="data-col2"></table>
+					<table class="data-col2 u-mb20"></table>
 				</td>
 			</tr>
 		</table>

web/templates/pages/edit_web.html

@@ -146,7 +146,7 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="u-pl50"> <!-- here -->
+							<td class="u-pl50">
 								<div style="display:<?php if (empty($v_redirect)) { echo 'none';} else {echo 'block';}?> ;" id="v_redirect">
 									<div class="form-check">
 										<input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-1" value="<?='www.'.htmlentities($v_domain);?>" <?php if ($v_redirect == "www.".$v_domain) echo 'checked'; ?>>
@@ -156,13 +156,13 @@
 									</div>
 									<div class="form-check">
 										<input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-2" value="<?=htmlentities($v_domain);?>" <?php if( $v_redirect == $v_domain) echo 'checked';?> >
-										<label class="form-check-label" for="v-redirect-radio-2">
+										<label for="v-redirect-radio-2">
 											<?=sprintf(_('Redirect visitors to %s'),htmlentities($v_domain));?>
 										</label>
 									</div>
 									<div class="form-check">
 										<input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-3" value="custom" <?php if( !empty($v_redirect_custom)) echo 'checked';?>>
-										<label class="form-check-label" for="v-redirect-radio-3">
+										<label for="v-redirect-radio-3">
 											<?=_("Redirect visitors to a custom domain or web address");?>
 										</label>
 									</div>

web/templates/pages/setup_webapp.html

@@ -39,57 +39,59 @@
 					</span>
 					<br>
 				<?php endif; ?>
-				<?php foreach ($WebappInstaller->getOptions() as $form_name => $form_control):?>
-					<?php
-						$f_name = $WebappInstaller->formNs() . '_' . $form_name;
-						$f_type = $form_control;
-						$f_value = '';
-						if(isset($form_control['label'])){
-							$f_label = htmlentities($form_control['label']);
-						}else{
-							$f_label = ucwords(str_replace(['.','_'], ' ', $form_name));
-						}
-						$f_placeholder = '';
-						if (is_array($form_control)) {
-								$f_type = (!empty($form_control['type']))?$form_control['type']:'text';
-								$f_value = (!empty($form_control['value']))?$form_control['value']:'';
-								$f_placeholder = (!empty($form_control['placeholder']))?$form_control['placeholder']:'';
-						}
+				<div class="u-input-width u-pt18">
+					<?php foreach ($WebappInstaller->getOptions() as $form_name => $form_control):?>
+						<?php
+							$f_name = $WebappInstaller->formNs() . '_' . $form_name;
+							$f_type = $form_control;
+							$f_value = '';
+							if(isset($form_control['label'])){
+								$f_label = htmlentities($form_control['label']);
+							}else{
+								$f_label = ucwords(str_replace(['.','_'], ' ', $form_name));
+							}
+							$f_placeholder = '';
+							if (is_array($form_control)) {
+									$f_type = (!empty($form_control['type']))?$form_control['type']:'text';
+									$f_value = (!empty($form_control['value']))?$form_control['value']:'';
+									$f_placeholder = (!empty($form_control['placeholder']))?$form_control['placeholder']:'';
+							}
 
-						$f_value = htmlentities($f_value);
-						$f_label = htmlentities($f_label);
-						$f_name = htmlentities($f_name);
-						$f_placeholder = htmlentities($f_placeholder);
-					?>
-					<div class="u-mb20">
-						<?php if($f_type != 'boolean'): ?>
-							<label for="<?=$f_name?>" class="form-label">
-								<?=$f_label?>
-								<?php if ($f_type === 'password'):?> / <a href="javascript:applyRandomStringToTarget('<?=$f_name?>');" class="generate"><?=_('generate');?></a> <?php endif?>
-							</label>
-						<?php endif; ?>
-						<?php if (in_array($f_type, ['select']) && count($form_control['options']) ):?>
-							<select class="form-select u-input-width" name="<?=$f_name?>" id="<?=$f_name?>">
-								<?php foreach ($form_control['options'] as $key => $option){
-									if(is_numeric($key)){
-										$key = $option;
-									}
-								?>
-									<?php $selected = (!empty($form_control['value']) && $key == $form_control['value'])?'selected':''?>
-									<option value="<?=$key?>" <?=$selected?>><?=htmlentities($option)?></option>
-								<?php }; ?>
-							</select>
-						<?php elseif (in_array($f_type, ['boolean'])):?>
-							<div class="form-check">
-								<?php $checked = (!empty($f_value))?'checked':''?>
-								<input class="form-check-input" type="checkbox" name="<?=$f_name?>" id="<?=$f_name?>" <?=$checked?> value="true">
-								<label for="<?=$f_name?>"><?=$f_label?></label>
-							</div>
-						<?php else:?>
-							<input type="text" class="form-control u-input-width" name="<?=$f_name?>" id="<?=$f_name?>" placeholder="<?=$f_placeholder?>" value="<?=$f_value?>">
-						<?php endif; ?>
-					</div>
-				<?php endforeach; ?>
+							$f_value = htmlentities($f_value);
+							$f_label = htmlentities($f_label);
+							$f_name = htmlentities($f_name);
+							$f_placeholder = htmlentities($f_placeholder);
+						?>
+						<div class="u-mb10">
+							<?php if($f_type != 'boolean'): ?>
+								<label for="<?=$f_name?>" class="form-label">
+									<?=$f_label?>
+									<?php if ($f_type === 'password'):?> / <a href="javascript:applyRandomStringToTarget('<?=$f_name?>');" class="generate"><?=_('generate');?></a> <?php endif?>
+								</label>
+							<?php endif; ?>
+							<?php if (in_array($f_type, ['select']) && count($form_control['options']) ):?>
+								<select class="form-select" name="<?=$f_name?>" id="<?=$f_name?>">
+									<?php foreach ($form_control['options'] as $key => $option){
+										if(is_numeric($key)){
+											$key = $option;
+										}
+									?>
+										<?php $selected = (!empty($form_control['value']) && $key == $form_control['value'])?'selected':''?>
+										<option value="<?=$key?>" <?=$selected?>><?=htmlentities($option)?></option>
+									<?php }; ?>
+								</select>
+							<?php elseif (in_array($f_type, ['boolean'])):?>
+								<div class="form-check">
+									<?php $checked = (!empty($f_value))?'checked':''?>
+									<input class="form-check-input" type="checkbox" name="<?=$f_name?>" id="<?=$f_name?>" <?=$checked?> value="true">
+									<label for="<?=$f_name?>"><?=$f_label?></label>
+								</div>
+							<?php else:?>
+								<input type="text" class="form-control" name="<?=$f_name?>" id="<?=$f_name?>" placeholder="<?=$f_placeholder?>" value="<?=$f_value?>">
+							<?php endif; ?>
+						</div>
+					<?php endforeach; ?>
+				</div>
 			</div>
 		</form>
 	<?php endif ?>