Complete <select> migration (#2919)

* Add initial .form-control styles, apply to "Hostname" text input

* Refactor Setup Webapp form to use new form controls

* Apply new selects to Add/Edit Package forms

* Apply new selects to Add/Edit Mail forms

* Apply new selects to Add/Edit DNS forms

* Fix checkboxes <label> on Setup Webapp form

* Apply new selects to Add/Edit DNS Record forms

* Apply new selects to Add/Edit Firewall Rule forms

* Apply new selects to Add Firewall IP List form

* Apply new selects to Add/Edit IP forms

* Apply new select to Add IP form

(missing from previous commit)

* Apply new select to Ban IP Address form

* Apply new select to Add Database form

* Remove old .vst-list CSS

* Replace last reference to .vst-list in JS

web/css/src/themes/dark.css

@@ -657,19 +657,22 @@ label:hover {
 
 }
 
-.vst-input {
+.vst-input,
+.form-control {
   background-color: #454545;
   border: 1px solid #606060;
   color: #d4d4d4;
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-.vst-input:hover {
+.vst-input:hover,
+.form-control:hover {
   border-color: #0090ff;
   background-color: #494949;
 }
 
-.vst-input:focus {
+.vst-input:focus,
+.form-control:focus {
   background-color: #222;
   border-color: #0080df;
   color: #fff;
@@ -677,7 +680,7 @@ label:hover {
 }
 
 .vst-input:disabled,
-.vst-list:disabled,
+.form-control:disabled,
 .form-select:disabled,
 .vst-textinput:disabled {
   background-color: #303030;
@@ -690,7 +693,7 @@ label:hover {
 }
 
 .vst-input:disabled:hover,
-.vst-list:disabled:hover,
+.form-control:disabled:hover,
 .form-select:disabled:hover,
 .vst-textinput:disabled:hover {
   border-color: #606060 !important;
@@ -713,7 +716,6 @@ label:hover {
   box-shadow: none !important;
 }
 
-.vst-list,
 .form-select {
   background-color: #454545;
   border: 1px solid #606060;
@@ -738,13 +740,11 @@ textarea:focus::placeholder {
   color: #909090 !important;
 }
 
-.vst-list:hover,
 .form-select:hover {
   border-color: #0090ff;
   background-color: #494949;
 }
 
-.vst-list:focus,
 .form-select:focus {
   background-color: #222;
   border-color: #0080df;

web/css/src/themes/default.css

@@ -625,7 +625,6 @@ form#vstobjects .alert {
 
 .app-form label {
   font-size: 0.85rem;
-  padding-bottom: 3px;
   font-weight: 600;
   cursor: default;
 }
@@ -2295,6 +2294,21 @@ label:hover {
   color: #333;
 }
 
+.form-control {
+  background-color: #fff;
+  border: 1px solid #cfcfcf;
+  display: block;
+  width: 100%;
+  padding: 8px 3px 8px 14px;
+  font-size: 0.8rem;
+  font-weight: normal;
+  color: #4e4e4e;
+  border-radius: 4px;
+  line-height: 1.5;
+  appearance: none;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
+}
+
 .vst-input {
   background-color: #fff;
   border: 1px solid #cfcfcf;
@@ -2310,18 +2324,20 @@ label:hover {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-.vst-input:hover {
+.vst-input:hover,
+.form-control:hover {
   border: 1px solid #94c8f0;
 }
 
-.vst-input:focus {
+.vst-input:focus,
+.form-control:focus {
   border: 1px solid #008fee;
   background-color: #d7f9ff;
   color: #333;
 }
 
 .vst-input:disabled,
-.vst-list:disabled,
+.form-control:disabled,
 .form-select:disabled,
 .vst-textinput:disabled {
   background-color: #e7e7e7;
@@ -2330,13 +2346,14 @@ label:hover {
 }
 
 .vst-input:focus:disabled,
+.form-control:focus:disabled,
 .vst-textinput:disabled {
   border-color: #dedede;
   background-color: #f1f1f1;
 }
 
 .vst-input:disabled:hover,
-.vst-list:disabled:hover,
+.form-control:disabled:hover,
 .form-select:disabled:hover,
 .vst-textinput:disabled:hover {
   border-color: #cfcfcf;
@@ -2365,37 +2382,6 @@ label:hover {
   background-color: #fff;
 }
 
-.vst-list {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #4e4e4e;
-  font-family: Exo, Arial, Helvetica, sans-serif;
-  font-size: 0.8rem;
-  font-weight: normal;
-  height: 36px;
-  cursor: pointer;
-  margin: 2px 6px 0 0;
-  min-width: 380px;
-  padding: 4px 1px 4px 10px;
-  background-image: url("/images/arrow.png");
-  background-position: 360px;
-  background-repeat: no-repeat;
-  width: 380px;
-  appearance: none;
-  text-shadow: 0 0 0 #4b4b4b;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-}
-
-.vst-list:hover {
-  border: 1px solid #94c8f0;
-}
-
-.vst-list:focus {
-  border: 1px solid #008fee;
-  color: #333;
-}
-
 .vst-text {
   cursor: default;
 }

web/css/src/themes/flat.css

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

web/css/src/themes/vestia.css

@@ -278,12 +278,12 @@ strong {
     inset 0 0 2px rgb(255 255 255 / 100%) !important;
 }
 
-.vst-input {
+.vst-input,
+.form-control {
   box-shadow: none;
   border-radius: 0 !important;
 }
 
-.vst-list,
 .form-select {
   box-shadow: none;
   border-radius: 0 !important;
@@ -356,6 +356,7 @@ a.vst-text:hover b,
 }
 
 .vst-input:focus,
+.form-control:focus,
 .vst-textinput:focus,
 .login .vst-input:focus,
 .login .vst-textinput:focus {
@@ -364,14 +365,13 @@ a.vst-text:hover b,
   color: #333;
 }
 
-.vst-list:focus,
 .form-select:focus {
   border: 1px solid #ff6701;
   color: #333;
 }
 
 .vst-input:hover,
-.vst-list:hover,
+.form-control:hover,
 .form-select:hover,
 .vst-textinput:hover {
   border: 1px solid #e95e00;
@@ -514,7 +514,7 @@ meter {
 }
 
 .vst-input,
-.vst-list,
+.form-control,
 .form-select,
 .vst-textinput {
   font-family: Arial, Helvetica, sans-serif !important;

web/js/init.js

@@ -40,7 +40,7 @@ $(document).ready(function(){
 
 
             // CREATE BUTTON
-              
+
             $('.l-sort__create-btn').hover(function(){
               $(".l-sort__create-btn").append("<div id='add-icon'></div>");
               $(".l-sort__create-btn").append("<div id='tooltip'>"+$('.l-sort__create-btn').attr('title').replace(' ','&nbsp;')+"</div>");
@@ -48,10 +48,10 @@ $(document).ready(function(){
               $("#add-icon").remove();
               $("#tooltip").remove();
             });
-            
-              
+
+
             // SEARCH BOX
-                
+
             $('.l-sort-toolbar__search, .l-sort-toolbar__search-box .search-input').hover(function(){
               clearTimeout(VE.tmp.search_display_interval);
               clearTimeout(VE.tmp.search_hover_interval);
@@ -102,8 +102,8 @@ $(document).ready(function(){
                 $('.refresh-timer').removeClass('paused');
               });
             }
-            
-            
+
+
             // SORTING
 
             $('#vstobjects input, #vstobjects select, #vstobjects textarea').change(function(){VE.tmp.form_changed=1});
@@ -117,7 +117,7 @@ $(document).ready(function(){
               $(this).addClass('active');
               VE.tmp.sort_par = $(this).parent('li').attr('entity');
               VE.tmp.sort_as_int = $(this).parent('li').attr('sort_as_int');
-              VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1; 
+              VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1;
 
               $('.l-sort .sort-by span b').html($(this).parent('li').find('.name').html());
               $('.l-sort .sort-by i').removeClass('fa-sort-alpha-up fa-sort-alpha-down');
@@ -129,7 +129,7 @@ $(document).ready(function(){
                   return $(a).attr(VE.tmp.sort_par) <= $(b).attr(VE.tmp.sort_par) ? VE.tmp.sort_direction : VE.tmp.sort_direction * -1;
                 }).appendTo(".l-center.units");
               });
-              
+
               $('#objects').submit( function (e){
                  if(!e.originalEvent){
                     return;
@@ -142,7 +142,7 @@ $(document).ready(function(){
                         $('#objects').append(div);
                     }
                  });
-                 
+
                  $('#objects').submit();
                  return false;
               });
@@ -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 .vst-list:not([disabled])').first().focus();
+                $('#vstobjects .vst-input:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
               }
 
               $('.l-profile__notifications').click(function(){
@@ -582,7 +582,7 @@ $(document).ready(function(){
             VE.core.register();
             if (location.href.search(/list/) != -1) {
                 var shift_select_ref = $('body').finderSelect({
-                    children: '.l-unit', 
+                    children: '.l-unit',
                     'onFinish': function(evt) {
                         if ($('.l-content').find('.l-unit.selected').length == $('.l-content').find('.l-unit').length) {
                             $('.toggle-all').addClass('clicked-on');
@@ -608,7 +608,7 @@ $(document).ready(function(){
                 });
             }
 
-            // 
+            //
             $('form#objects').on('submit', function(evt) {
                 $('.l-unit').find('.ch-toggle').prop('checked', false);
                 $('.l-unit.selected').find('.ch-toggle').prop('checked', true);
@@ -628,10 +628,10 @@ $(document).ready(function(){
 
 /**
  * generates a random string
- * using a cryptographically secure rng, 
+ * using a cryptographically secure rng,
  * and ensuring it contains at least 1 lowercase, 1 uppercase, and 1 number.
- * 
- * @param int length 
+ *
+ * @param int length
  * @throws Error if length is too small to create a "sufficiently secure" string
  * @returns string
  */

web/templates/pages/add_db.html

@@ -77,13 +77,9 @@
 								</td>
 							</tr>
 							<tr>
-								<td class="vst-text input-label">
-									<?=_('Type');?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<select class="vst-list" name="v_type">
+								<td class="input-label">
+									<label for="v_type" class="form-label"><?=_('Type');?></label>
+									<select class="form-select" name="v_type" id="v_type" style="max-width: 380px">
 										<?php
 											foreach ($db_types as $key => $value) {
 												echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -145,75 +141,57 @@
 								</td>
 							</tr>
 							<tr>
-								<td class="step-top">
-									<table id="advanced-opts" style="display: none;">
-										<tr>
-											<td class="vst-text input-label">
-												<?=_('Host');?>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<select class="vst-list" name="v_host">
-													<?php
-														foreach ($db_hosts as $value) {
-															echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
-															if ((!empty($v_host)) && ( $value == $v_host )) echo ' selected';
-															echo ">".htmlentities($value)."</option>";
-														}
-													?>
-												</select>
-											</td>
-										</tr>
-										<tr>
-											<td class="vst-text input-label">
-												<?=_('Charset');?>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<select class="vst-list" name="v_charset">
-													<option value=big5 <?php if ((!empty($v_charset)) && ( $v_charset == 'big5')) echo 'selected';?>>big5</option>
-													<option value=dec8 <?php if ((!empty($v_charset)) && ( $v_charset == 'dec8')) echo 'selected';?>>dec8</option>
-													<option value=cp850 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp850')) echo 'selected';?>>cp850</option>
-													<option value=hp8 <?php if ((!empty($v_charset)) && ( $v_charset == 'hp8')) echo 'selected';?>>hp8</option>
-													<option value=koi8r <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8r')) echo 'selected';?>>koi8r</option>
-													<option value=latin1 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin1')) echo 'selected';?>>latin1</option>
-													<option value=latin2 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin2')) echo 'selected';?>>latin2</option>
-													<option value=swe7 <?php if ((!empty($v_charset)) && ( $v_charset == 'swe7')) echo 'selected';?>>swe7</option>
-													<option value=ascii <?php if ((!empty($v_charset)) && ( $v_charset == 'ascii')) echo 'selected';?>>ascii</option>
-													<option value=ujis <?php if ((!empty($v_charset)) && ( $v_charset == 'ujis')) echo 'selected';?>>ujis</option>
-													<option value=sjis <?php if ((!empty($v_charset)) && ( $v_charset == 'sjis')) echo 'selected';?>>sjis</option>
-													<option value=hebrew <?php if ((!empty($v_charset)) && ( $v_charset == 'hebrew')) echo 'selected';?>>hebrew</option>
-													<option value=tis620 <?php if ((!empty($v_charset)) && ( $v_charset == 'tis620')) echo 'selected';?>>tis620</option>
-													<option value=euckr <?php if ((!empty($v_charset)) && ( $v_charset == 'euckr')) echo 'selected';?>>euckr</option>
-													<option value=koi8u <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8u')) echo 'selected';?>>koi8u</option>
-													<option value=gb2312 <?php if ((!empty($v_charset)) && ( $v_charset == 'gb2312')) echo 'selected';?>>gb2312</option>
-													<option value=greek <?php if ((!empty($v_charset)) && ( $v_charset == 'greek')) echo 'selected';?>>greek</option>
-													<option value=cp1250 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1250')) echo 'selected';?>>cp1250</option>
-													<option value=gbk <?php if ((!empty($v_charset)) && ( $v_charset == 'gbk')) echo 'selected';?>>gbk</option>
-													<option value=latin5 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin5')) echo 'selected';?>>latin5</option>
-													<option value=armscii8 <?php if ((!empty($v_charset)) && ( $v_charset == 'armscii8')) echo 'selected';?>>armscii8</option>
-													<option value=utf8 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8')) echo 'selected';?> <?php if (empty($v_charset)) echo 'selected';?>>utf8</option>
-													<option value=utf8mb4 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8mb4')) echo 'selected';?>>utf8mb4</option>
-													<option value=ucs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'ucs2')) echo 'selected';?>>ucs2</option>
-													<option value=cp866 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp866')) echo 'selected';?>>cp866</option>
-													<option value=keybcs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'keybcs2')) echo 'selected';?>>keybcs2</option>
-													<option value=macce <?php if ((!empty($v_charset)) && ( $v_charset == 'macce')) echo 'selected';?>>macce</option>
-													<option value=macroman <?php if ((!empty($v_charset)) && ( $v_charset == 'macroman')) echo 'selected';?>>macroman</option>
-													<option value=cp852 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp852')) echo 'selected';?>>cp852</option>
-													<option value=latin7 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin7')) echo 'selected';?>>latin7</option>
-													<option value=cp1251 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1251')) echo 'selected';?>>cp1251</option>
-													<option value=cp1256 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1256')) echo 'selected';?>>cp1256</option>
-													<option value=cp1257 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1257')) echo 'selected';?>>cp1257</option>
-													<option value=binary <?php if ((!empty($v_charset)) && ( $v_charset == 'binary')) echo 'selected';?>>binary</option>
-													<option value=geostd8 <?php if ((!empty($v_charset)) && ( $v_charset == 'geostd8')) echo 'selected';?>>geostd8</option>
-													<option value=cp932 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp932')) echo 'selected';?>>cp932</option>
-													<option value=eucjpms <?php if ((!empty($v_charset)) && ( $v_charset == 'eucjpms')) echo 'selected';?>>eucjpms</option>
-												</select>
-											</td>
-										</tr>
-									</table>
+								<td class="input-label step-top" id="advanced-opts" style="display: none;">
+									<label for="v_host" class="form-label"><?=_('Host');?></label>
+									<select class="form-select u-mb20" name="v_host" id="v_host" style="max-width: 380px">
+										<?php
+											foreach ($db_hosts as $value) {
+												echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
+												if ((!empty($v_host)) && ( $value == $v_host )) echo ' selected';
+												echo ">".htmlentities($value)."</option>";
+											}
+										?>
+									</select>
+									<label for="v_charset" class="form-label"><?=_('Charset');?></label>
+									<select class="form-select" name="v_charset" id="v_charset" style="max-width: 380px">
+										<option value=big5 <?php if ((!empty($v_charset)) && ( $v_charset == 'big5')) echo 'selected';?>>big5</option>
+										<option value=dec8 <?php if ((!empty($v_charset)) && ( $v_charset == 'dec8')) echo 'selected';?>>dec8</option>
+										<option value=cp850 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp850')) echo 'selected';?>>cp850</option>
+										<option value=hp8 <?php if ((!empty($v_charset)) && ( $v_charset == 'hp8')) echo 'selected';?>>hp8</option>
+										<option value=koi8r <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8r')) echo 'selected';?>>koi8r</option>
+										<option value=latin1 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin1')) echo 'selected';?>>latin1</option>
+										<option value=latin2 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin2')) echo 'selected';?>>latin2</option>
+										<option value=swe7 <?php if ((!empty($v_charset)) && ( $v_charset == 'swe7')) echo 'selected';?>>swe7</option>
+										<option value=ascii <?php if ((!empty($v_charset)) && ( $v_charset == 'ascii')) echo 'selected';?>>ascii</option>
+										<option value=ujis <?php if ((!empty($v_charset)) && ( $v_charset == 'ujis')) echo 'selected';?>>ujis</option>
+										<option value=sjis <?php if ((!empty($v_charset)) && ( $v_charset == 'sjis')) echo 'selected';?>>sjis</option>
+										<option value=hebrew <?php if ((!empty($v_charset)) && ( $v_charset == 'hebrew')) echo 'selected';?>>hebrew</option>
+										<option value=tis620 <?php if ((!empty($v_charset)) && ( $v_charset == 'tis620')) echo 'selected';?>>tis620</option>
+										<option value=euckr <?php if ((!empty($v_charset)) && ( $v_charset == 'euckr')) echo 'selected';?>>euckr</option>
+										<option value=koi8u <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8u')) echo 'selected';?>>koi8u</option>
+										<option value=gb2312 <?php if ((!empty($v_charset)) && ( $v_charset == 'gb2312')) echo 'selected';?>>gb2312</option>
+										<option value=greek <?php if ((!empty($v_charset)) && ( $v_charset == 'greek')) echo 'selected';?>>greek</option>
+										<option value=cp1250 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1250')) echo 'selected';?>>cp1250</option>
+										<option value=gbk <?php if ((!empty($v_charset)) && ( $v_charset == 'gbk')) echo 'selected';?>>gbk</option>
+										<option value=latin5 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin5')) echo 'selected';?>>latin5</option>
+										<option value=armscii8 <?php if ((!empty($v_charset)) && ( $v_charset == 'armscii8')) echo 'selected';?>>armscii8</option>
+										<option value=utf8 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8')) echo 'selected';?> <?php if (empty($v_charset)) echo 'selected';?>>utf8</option>
+										<option value=utf8mb4 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8mb4')) echo 'selected';?>>utf8mb4</option>
+										<option value=ucs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'ucs2')) echo 'selected';?>>ucs2</option>
+										<option value=cp866 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp866')) echo 'selected';?>>cp866</option>
+										<option value=keybcs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'keybcs2')) echo 'selected';?>>keybcs2</option>
+										<option value=macce <?php if ((!empty($v_charset)) && ( $v_charset == 'macce')) echo 'selected';?>>macce</option>
+										<option value=macroman <?php if ((!empty($v_charset)) && ( $v_charset == 'macroman')) echo 'selected';?>>macroman</option>
+										<option value=cp852 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp852')) echo 'selected';?>>cp852</option>
+										<option value=latin7 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin7')) echo 'selected';?>>latin7</option>
+										<option value=cp1251 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1251')) echo 'selected';?>>cp1251</option>
+										<option value=cp1256 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1256')) echo 'selected';?>>cp1256</option>
+										<option value=cp1257 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1257')) echo 'selected';?>>cp1257</option>
+										<option value=binary <?php if ((!empty($v_charset)) && ( $v_charset == 'binary')) echo 'selected';?>>binary</option>
+										<option value=geostd8 <?php if ((!empty($v_charset)) && ( $v_charset == 'geostd8')) echo 'selected';?>>geostd8</option>
+										<option value=cp932 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp932')) echo 'selected';?>>cp932</option>
+										<option value=eucjpms <?php if ((!empty($v_charset)) && ( $v_charset == 'eucjpms')) echo 'selected';?>>eucjpms</option>
+									</select>
 								</td>
 							</tr>
 						</table>
@@ -229,4 +207,4 @@
 <script>
 GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
 GLOBAL.DB_DBNAME_PREFIX = "<?=$user_plain;?>_";
-</script>
+</script>

web/templates/pages/add_dns.html

@@ -70,13 +70,9 @@
 								</td>
 							</tr>
 							<tr>
-								<td class="vst-text input-label">
-									<?=_('IP address');?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<select class="vst-list" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+								<td class="input-label">
+									<label for="v_ip" class="form-label"><?=_('IP address');?></label>
+									<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
 										<option value="">clear</option>
 										<?php
 											foreach ($v_ips as $ip => $value) {
@@ -85,18 +81,16 @@
 											}
 										?>
 									</select>
-									<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+									<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 								</td>
 							</tr>
 							<?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] === 'yes')) { ?>
 								<tr>
-									<td class="vst-text input-label">
-										<?=_('Template') . "<span class='optional'>" . strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
-									</td>
-								</tr>
-								<tr>
-									<td>
-										<select class="vst-list" name="v_template">
+									<td class="input-label">
+										<label for="v_template" class="form-label">
+											<?=_('Template') . "<span class='optional'>" . strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
+										</label>
+										<select class="form-select" name="v_template" id="v_template" style="max-width: 380px">
 											<?php
 												foreach ($templates as $key => $value) {
 													echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -221,4 +215,4 @@
 			<?php } ?>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/add_dns_rec.html

@@ -18,7 +18,7 @@
 	<form id="vstobjects" name="v_add_dns_rec" method="post">
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 		<input type="hidden" name="ok_rec" value="add" />
-		
+
 		<table class="data mode-add">
 			<tr class="data-add">
 				<td class="data-dotted">
@@ -63,13 +63,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('Type');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_type">
+							<td class="input-label">
+								<label for="v_type" class="form-label"><?=_('Type');?></label>
+								<select class="form-select" name="v_type" id="v_type" style="max-width: 380px">
 									<option value="A" <?php if ($v_type == 'A') echo "selected"; ?>>A</option>
 									<option value="AAAA" <?php if ($v_type == 'AAAA') echo "selected"; ?>>AAAA</option>
 									<option value="CAA" <?php if ($v_type == 'CAA') echo "selected"; ?>>CAA</option>
@@ -88,13 +84,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('IP or Value');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+							<td class="input-label">
+								<label for="v_val" class="form-label"><?=_('IP or Value');?></label>
+								<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 									<?php
 										foreach ($v_ips as $ip => $value) {
@@ -103,7 +95,7 @@
 										}
 									?>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								<input type="text" size="20" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
 							</td>
 						</tr>
 						<tr>

web/templates/pages/add_firewall.html

@@ -41,26 +41,18 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=_('Action') ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_action">
+							<td class="input-label step-top">
+								<label for="v_action" class="form-label"><?=_('Action') ?></label>
+								<select class="form-select" name="v_action" id="v_action" style="max-width: 380px">
 									<option value="DROP" <?php if ((!empty($v_action)) && ( $v_action == "'DROP'" )) echo 'selected'?>><?=_('DROP');?></option>
 									<option value="ACCEPT" <?php if ((!empty($v_action)) && ( $v_action == "'ACCEPT'" )) echo 'selected'?>><?=_('ACCEPT');?></option>
 								</select>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('Protocol') ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_protocol">
+							<td class="input-label">
+								<label for="v_protocol" class="form-label"><?=_('Protocol') ?></label>
+								<select class="form-select" name="v_protocol" id="v_protocol" style="max-width: 380px">
 									<option value="TCP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'TCP'" )) echo 'selected'?>><?=_('TCP');?></option>
 									<option value="UDP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'UDP'" )) echo 'selected'?>><?=_('UDP');?></option>
 									<option value="ICMP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'ICMP'" )) echo 'selected'?>><?=_('ICMP');?></option>
@@ -78,16 +70,14 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
+							<td class="input-label">
+								<label for="v_ip" class="form-label">
+									<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
+								</label>
+								<select class="form-select" tabindex="-1" id="quickips_list" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -129,4 +119,4 @@
 			targetelement.appendChild(newEl);
 		});
 	});
-</script>
+</script>

web/templates/pages/add_firewall_banlist.html

@@ -51,13 +51,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=_('Banlist') ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_chain">
+							<td class="input-label step-top">
+								<label for="v_chain" class="form-label"><?=_('Banlist') ?></label>
+								<select class="form-select" name="v_chain" id="v_chain" style="max-width: 380px">
 									<option value="SSH" <?php if ((!empty($v_chain)) && ( $v_chain == "'SSH'" )) echo 'selected'?>><?=_('SSH');?></option>
 									<option value="WEB" <?php if ((!empty($v_chain)) && ( $v_chain == "'WEB'" )) echo 'selected'?>><?=_('WEB');?></option>
 									<option value="FTP" <?php if ((!empty($v_chain)) && ( $v_chain == "'FTP'" )) echo 'selected'?>><?=_('FTP');?></option>
@@ -77,4 +73,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/add_firewall_ipset.html

@@ -51,39 +51,29 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=_('Data Source') ?> <span class="optional">(<?=_('url, script or file');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" tabindex="-1" id="datasource_list" onchange="this.nextElementSibling.value=this.value">
+							<td class="input-label step-top">
+								<label for="v_datasource" class="form-label">
+									<?=_('Data Source') ?> <span class="optional">(<?=_('url, script or file');?>)</span>
+								</label>
+								<select class="form-select" tabindex="-1" id="datasource_list" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
 									<option value="">clear</option>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="vst-text step-top">
-								<?=_('Ip Version') ?>
+								<input type="text" size="20" class="vst-input vst-list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<select class="vst-list" name="v_ipver">
+							<td class="input-label step-top">
+								<label for="v_ipver" class="form-label"><?=_('Ip Version') ?></label>
+								<select class="form-select" name="v_ipver" id="v_ipver" style="max-width: 380px">
 									<option value="v4" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v4'" )) echo 'selected'?>><?=_('ip v4');?></option>
 									<option value="v6" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v6'" )) echo 'selected'?>><?=_('ip v6');?></option>
 								</select>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=_('Autoupdate') ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_autoupdate">
+							<td class="input-label step-top">
+								<label for="v_autoupdate" class="form-label"><?=_('Autoupdate') ?></label>
+								<select class="form-select" name="v_autoupdate" id="v_autoupdate" style="max-width: 380px">
 									<option value="yes" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'yes'" )) echo 'selected'?>><?=_('yes');?></option>
 									<option value="no" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'no'" )) echo 'selected'?>><?=_('no');?></option>
 								</select>
@@ -99,7 +89,7 @@
 
 <script>
 	var country_iplists = [
-		<?php 
+		<?php
 			$country = array('ca' => 'Canada', 'cn' => 'China', 'fr' => 'French', 'de' => 'Germany', 'in' => 'India', 'nl' => 'Netherlands', 'ro' => 'Romania', 'ru' => 'Russia', 'es' => 'Spain', 'ch' => 'Switzerland', 'tr' => 'Turkey', 'ua' => 'Ukraine',  'uk' => 'United Kingdom', 'us' => 'United States');
 			foreach($country as $iso =>$name){
 				echo '{name: "[IPv4] Country - '.$name.'",	source:"https://raw.githubusercontent.com/ipverse/rir-ip/master/country/'.$iso.'/ipv4-aggregated.txt"},'."\n";

web/templates/pages/add_ip.html

@@ -61,13 +61,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('Interface');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_interface">
+							<td class="input-label">
+								<label for="v_interface" class="form-label"><?=_('Interface');?></label>
+								<select class="form-select" name="v_interface" id="v_interface">
 									<?php
 										foreach ($interfaces as $key => $value) {
 											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -89,27 +85,17 @@
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<table style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;" id="usrtable">
-									<tr>
-										<td class="vst-text input-label">
-											<?=_('Assigned user');?>
-										</td>
-									</tr>
-									<tr>
-										<td class="step-bottom">
-											<select class="vst-list" name="v_owner">
-												<?php
-													foreach ($users as $key => $value) {
-														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-														if ((!empty($v_owner)) && ( $value == $v_owner )) echo ' selected';
-														echo ">".htmlentities($value)."</option>\n";
-													}
-												?>
-											</select>
-										</td>
-									</tr>
-								</table>
+							<td class="input-label" style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;" id="usrtable">
+								<label for="v_owner" class="form-label"><?=_('Assigned user');?></label>
+								<select class="form-select" name="v_owner" id="v_owner" style="max-width: 380px">
+									<?php
+										foreach ($users as $key => $value) {
+											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+											if ((!empty($v_owner)) && ( $value == $v_owner )) echo ' selected';
+											echo ">".htmlentities($value)."</option>\n";
+										}
+									?>
+								</select>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/add_mail.html

@@ -60,24 +60,16 @@
 						<?php } ?>
 						<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin"))  {?>
 							<tr>
-								<td class="vst-text step-top">
-									<?=_('Domain');?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
+								<td class="step-top">
+									<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+									<input type="text" class="form-control" name="v_domain" id="v_domain" style="max-width: 341px" value="<?=htmlentities(trim($v_domain, "'"))?>">
 								</td>
 							</tr>
 							<?php if($_SESSION['WEBMAIL_SYSTEM']){?>
 								<tr>
-									<td class="vst-text step-top">
-										<?=_('Webmail Client');?>
-									</td>
-								</tr>
-								<tr>
-									<td>
-										<select class="vst-list" name="v_webmail" tabindex="6">
+									<td class="input-label step-top">
+										<label for="v_webmail" class="form-label"><?=_('Webmail Client');?></label>
+										<select class="form-select" name="v_webmail" id="v_webmail" tabindex="6" style="max-width: 360px">
 											<?php foreach ($webmail_clients as $client){
 												echo "\t\t\t\t<option value=\"".htmlentities($client)."\"";
 												if (( $v_webmail == $client )) {

web/templates/pages/add_package.html

@@ -114,13 +114,11 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<?=_('Web Template')  . " <span class='optional'> " .strtoupper($_SESSION['WEB_SYSTEM']) . "</span>";?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<select class="vst-list" name="v_web_template">
+										<td class="input-label">
+											<label for="v_web_template" class="form-label">
+												<?=_('Web Template') . " <span class='optional'> " .strtoupper($_SESSION['WEB_SYSTEM']) . "</span>";?>
+											</label>
+											<select class="form-select" name="v_web_template" id="v_web_template">
 												<?php
 													foreach ($web_templates as $key => $value) {
 														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -135,13 +133,11 @@
 									</tr>
 									<?php if (!empty($_SESSION['WEB_BACKEND'])) { echo ""; ?>
 										<tr>
-											<td class="vst-text input-label">
-												<?=_('Backend Template')  . "<span class='optional'>" .strtoupper($_SESSION['WEB_BACKEND']) . "</span>";?>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<select class="vst-list" name="v_backend_template">
+											<td class="input-label">
+												<label for="v_backend_template" class="form-label">
+													<?=_('Backend Template') . "<span class='optional'>" .strtoupper($_SESSION['WEB_BACKEND']) . "</span>";?>
+												</label>
+												<select class="form-select" name="v_backend_template" id="v_backend_template">
 													<?php
 														foreach ($backend_templates as $key => $value) {
 														echo $v_backend_template;
@@ -158,13 +154,11 @@
 									<?=""; }?>
 									<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { echo ""; ?>
 										<tr>
-											<td class="vst-text input-label">
-												<?=_('Proxy Template')  . "<span class='optional'>" .strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<select class="vst-list" name="v_proxy_template">
+											<td class="input-label">
+												<label for="v_proxy_template" class="form-label">
+													<?=_('Proxy Template') . "<span class='optional'>" .strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?>
+												</label>
+												<select class="form-select" name="v_proxy_template" id="v_proxy_template">
 													<?php
 														foreach ($proxy_templates as $key => $value) {
 															echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -191,13 +185,11 @@
 							<td>
 								<table id="dns-options" style="display: none;">
 									<tr>
-										<td class="vst-text input-label step-top">
-											<?=_('DNS Template')  . "<span class='optional'>" .strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<select class="vst-list" name="v_dns_template">
+										<td class="input-label step-top">
+											<label for="v_dns_template" class="form-label">
+												<?=_('DNS Template') . "<span class='optional'>" .strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
+											</label>
+											<select class="form-select" name="v_dns_template" id="v_dns_template">
 												<?php
 													foreach ($dns_templates as $key => $value) {
 														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -210,7 +202,6 @@
 											</select>
 										</td>
 									</tr>
-
 									<tr>
 										<td class="vst-text input-label">
 											<?=_('DNS domains');?>
@@ -388,13 +379,9 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<?=_('SSH Access');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<select class="vst-list" name="v_shell">
+										<td class="input-label">
+											<label for="v_shell" class="form-label"><?=_('SSH Access');?></label>
+											<select class="form-select u-mb20" name="v_shell" id="v_shell">
 												<?php
 													foreach ($shells as $key => $value) {
 														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -415,4 +402,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/edit_dns.html

@@ -18,7 +18,7 @@
 	<form id="vstobjects" name="v_edit_dns" method="post" class="<?=$v_status?>">
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 		<input type="hidden" name="save" value="save" />
-		
+
 		<table class='data'>
 			<tr class="data-add">
 				<td class="data-dotted">
@@ -53,13 +53,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('IP Address');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+							<td class="input-label">
+								<label for="v_ip" class="form-label"><?=_('IP address');?></label>
+								<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
 									<option value="">clear</option>
 									<?php
 										foreach ($v_ips as $ip => $value) {
@@ -69,18 +65,16 @@
 										}
 									?>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] === 'yes')) { ?>
 							<tr>
-								<td class="vst-text input-label">
-									<?=_('Template') . "<span class='optional'>" . strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<select class="vst-list" name="v_template">
+								<td class="input-label">
+									<label for="v_template" class="form-label">
+										<?=_('Template') . "<span class='optional'>" . strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
+									</label>
+									<select class="form-select" name="v_template" id="v_template" style="max-width: 380px">
 										<?php
 											foreach ($templates as $key => $value) {
 												echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -131,4 +125,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/edit_dns_rec.html

@@ -18,7 +18,7 @@
 	<form id="vstobjects" name="v_edit_dns_rec" method="post" class="<?=$v_status?>">
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 		<input type="hidden" name="save" value="save" />
-		
+
 		<table class='data'>
 			<tr class="data-add">
 				<td class="data-dotted">
@@ -65,13 +65,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('Type');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_type">
+							<td class="input-label">
+								<label for="v_type" class="form-label"><?=_('Type');?></label>
+								<select class="form-select" name="v_type" id="v_type" style="max-width: 380px">
 									<option value="A" <?php if ($v_type == 'A') echo "selected"; ?>>A</option>
 									<option value="AAAA" <?php if ($v_type == 'AAAA') echo "selected"; ?>>AAAA</option>
 									<option value="CAA" <?php if ($v_type == 'CAA') echo "selected"; ?>>CAA</option>
@@ -90,13 +86,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('IP or Value');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+							<td class="input-label">
+								<label for="v_val" class="form-label"><?=_('IP or Value');?></label>
+								<select class="form-select" tabindex="-1" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
 									<option value="">clear</option>
 									<?php
 										foreach ($v_ips as $ip => $value) {
@@ -105,7 +97,7 @@
 										}
 									?>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								<input type="text" size="20" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_firewall.html

@@ -42,26 +42,18 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<?=_('Action'); ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_action">
+							<td class="input-label step-top">
+								<label for="v_action" class="form-label"><?=_('Action') ?></label>
+								<select class="form-select" name="v_action" id="v_action" style="max-width: 380px">
 									<option value="DROP" <?php if ((!empty($v_action)) && ( $v_action == "DROP" )) echo 'selected'?>><?=_('DROP');?></option>
 									<option value="ACCEPT" <?php if ((!empty($v_action)) && ( $v_action == "ACCEPT" )) echo 'selected'?>><?=_('ACCEPT');?></option>
 								</select>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('Protocol') ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_protocol">
+							<td class="input-label">
+								<label for="v_protocol" class="form-label"><?=_('Protocol') ?></label>
+								<select class="form-select" name="v_protocol" id="v_protocol" style="max-width: 380px">
 									<option value="TCP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "TCP" )) echo 'selected'?>><?=_('TCP');?></option>
 									<option value="UDP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "UDP" )) echo 'selected'?>><?=_('UDP');?></option>
 									<option value="ICMP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "ICMP" )) echo 'selected'?>><?=_('ICMP');?></option>
@@ -79,16 +71,14 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
+							<td class="input-label">
+								<label for="v_ip" class="form-label">
+									<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
+								</label>
+								<select class="form-select" tabindex="-1" id="quickips_list" style="max-width: 380px" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -131,4 +121,4 @@
 			targetelement.appendChild(newEl);
 		});
 	});
-</script>
+</script>

web/templates/pages/edit_ip.html

@@ -83,27 +83,17 @@
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<table style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;" id="usrtable">
-									<tr>
-										<td class="vst-text input-label">
-											<?=_('Assigned user');?>
-										</td>
-									</tr>
-									<tr>
-										<td class="step-bottom">
-											<select class="vst-list" name="v_owner">
-												<?php
-													foreach ($users as $key => $value) {
-														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-														if ((!empty($v_owner)) && ( $value == $v_owner )) echo ' selected';
-														echo ">".htmlentities($value)."</option>\n";
-													}
-												?>
-											</select>
-										</td>
-									</tr>
-								</table>
+							<td class="input-label" style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;" id="usrtable">
+								<label for="v_owner" class="form-label"><?=_('Assigned user');?></label>
+								<select class="form-select" name="v_owner" id="v_owner" style="max-width: 380px">
+									<?php
+										foreach ($users as $key => $value) {
+											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+											if ((!empty($v_owner)) && ( $value == $v_owner )) echo ' selected';
+											echo ">".htmlentities($value)."</option>\n";
+										}
+									?>
+								</select>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_mail.html

@@ -53,26 +53,22 @@
 							</td>
 						</tr>
 						<?php if($_SESSION['WEBMAIL_SYSTEM']){?>
-						<tr>
-							<td class="vst-text step-top">
-								<?=_('Webmail Client');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<select class="vst-list" name="v_webmail" tabindex="6">
-									<?php foreach ($webmail_clients as $client){
-										echo "\t\t\t\t<option value=\"".htmlentities($client)."\"";
-										if (( htmlentities(trim($v_webmail,"'")) == $client )) {
-											echo ' selected' ;
-										}
-										echo ">".htmlentities(ucfirst($client))."</option>\n";
-										}
-									?>
-									<option value="disabled" <?php if (htmlentities(trim($v_webmail,"'")) == 'disabled') { echo "selected";}?>><?=_('Disabled');?></option>
-								</select>
-							</td>
-						</tr>
+							<tr>
+								<td class="input-label step-top">
+									<label for="v_webmail" class="form-label"><?=_('Webmail Client');?></label>
+									<select class="form-select" name="v_webmail" id="v_webmail" tabindex="6">
+										<?php foreach ($webmail_clients as $client){
+											echo "\t\t\t\t<option value=\"".htmlentities($client)."\"";
+											if (( htmlentities(trim($v_webmail,"'")) == $client )) {
+												echo ' selected' ;
+											}
+											echo ">".htmlentities(ucfirst($client))."</option>\n";
+											}
+										?>
+										<option value="disabled" <?php if (htmlentities(trim($v_webmail,"'")) == 'disabled') { echo "selected";}?>><?=_('Disabled');?></option>
+									</select>
+								</td>
+							</tr>
 						<?php } ?>
 						<tr>
 							<td class="vst-text input-label">

web/templates/pages/edit_package.html

@@ -18,7 +18,7 @@
 	<form id="vstobjects" name="v_edit_package" method="post" class="<?=$v_status?>">
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 		<input type="hidden" name="save" value="save" />
-		
+
 		<table class='data'>
 			<tr class="data-add">
 				<td class="data-dotted">
@@ -116,13 +116,11 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<?=_('Web Template')  . " <span class='optional'> " .strtoupper($_SESSION['WEB_SYSTEM']) . "</span>";?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<select class="vst-list" name="v_web_template">
+										<td class="input-label">
+											<label for="v_web_template" class="form-label">
+												<?=_('Web Template') . " <span class='optional'> " .strtoupper($_SESSION['WEB_SYSTEM']) . "</span>";?>
+											</label>
+											<select class="form-select" name="v_web_template" id="v_web_template">
 												<?php
 													foreach ($web_templates as $key => $value) {
 														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -137,44 +135,40 @@
 									</tr>
 									<?php if (!empty($_SESSION['WEB_BACKEND'])) { echo ""; ?>
 										<tr>
-											<td class="vst-text input-label">
-												<?=_('Backend Template')  . "<span class='optional'>" .strtoupper($_SESSION['WEB_BACKEND']) . "</span>";?>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<select class="vst-list" name="v_backend_template">
+											<td class="input-label">
+												<label for="v_backend_template" class="form-label">
+													<?=_('Backend Template') . "<span class='optional'>" .strtoupper($_SESSION['WEB_BACKEND']) . "</span>";?>
+												</label>
+												<select class="form-select" name="v_backend_template" id="v_backend_template">
 													<?php
-															foreach ($backend_templates as $key => $value) {
-																echo "\t\t\t\t<option value=\"".$value."\"";
-																if ((!empty($v_backend_template)) && ( $value == trim($v_backend_template, "'"))){
-																	echo ' selected' ;
-																}
-																echo ">".htmlentities($value)."</option>\n";
+														foreach ($backend_templates as $key => $value) {
+															echo "\t\t\t\t<option value=\"".$value."\"";
+															if ((!empty($v_backend_template)) && ( $value == trim($v_backend_template, "'"))){
+																echo ' selected' ;
 															}
-														?>
+															echo ">".htmlentities($value)."</option>\n";
+														}
+													?>
 												</select>
 											</td>
 										</tr>
 									<?=""; }?>
 									<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { echo ""; ?>
 										<tr>
-											<td class="vst-text input-label">
-												<?=_('Proxy Template')  . "<span class='optional'>" .strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<select class="vst-list" name="v_proxy_template">
+											<td class="input-label">
+												<label for="v_proxy_template" class="form-label">
+													<?=_('Proxy Template') . "<span class='optional'>" .strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?>
+												</label>
+												<select class="form-select" name="v_proxy_template" id="v_proxy_template">
 													<?php
-															foreach ($proxy_templates as $key => $value) {
-																echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-																if ((!empty($v_proxy_template)) && ( $value == trim($v_proxy_template, "'"))){
-																	echo ' selected' ;
-																}
-																echo ">".htmlentities($value)."</option>\n";
+														foreach ($proxy_templates as $key => $value) {
+															echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+															if ((!empty($v_proxy_template)) && ( $value == trim($v_proxy_template, "'"))){
+																echo ' selected' ;
 															}
-														?>
+															echo ">".htmlentities($value)."</option>\n";
+														}
+													?>
 												</select>
 											</td>
 										</tr>
@@ -193,13 +187,11 @@
 							<td>
 								<table id="dns-options" style="display: none;">
 									<tr>
-										<td class="vst-text input-label step-top">
-											<?=_('DNS Template')  . "<span class='optional'>" .strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<select class="vst-list" name="v_dns_template">
+										<td class="input-label step-top">
+											<label for="v_dns_template" class="form-label">
+												<?=_('DNS Template') . "<span class='optional'>" .strtoupper($_SESSION['DNS_SYSTEM']) . "</span>";?>
+											</label>
+											<select class="form-select" name="v_dns_template" id="v_dns_template">
 												<?php
 													foreach ($dns_templates as $key => $value) {
 														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -215,7 +207,6 @@
 											</select>
 										</td>
 									</tr>
-
 									<tr>
 										<td class="vst-text input-label">
 											<?=_('DNS domains');?>
@@ -256,7 +247,7 @@
 												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 											</td>
 										</tr>
-										<?php 
+										<?php
 											if($v_ns3) {
 												echo '<tr>
 													<td>
@@ -393,13 +384,9 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<?=_('SSH Access');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<select class="vst-list" name="v_shell">
+										<td class="input-label">
+											<label for="v_shell" class="form-label"><?=_('SSH Access');?></label>
+											<select class="form-select u-mb20" name="v_shell" id="v_shell">
 												<?php
 													foreach ($shells as $key => $value) {
 														echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -421,4 +408,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

web/templates/pages/edit_server.html

@@ -56,13 +56,9 @@
 							<td class="vst-text input-label step-left">
 								<table style="display:<?php if (empty($v_adv)) echo 'none';?> ;" id="basic">
 									<tr>
-										<td class="vst-text step-top">
-											<?=_('Hostname');?>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" size="20" class="vst-input" name="v_hostname" value="<?=htmlentities(trim($v_hostname, "'"))?>">
+										<td class="step-top">
+											<label for="v_hostname" class="form-label"><?=_('Hostname');?></label>
+											<input type="text" class="form-control" name="v_hostname" id="v_hostname" value="<?=htmlentities(trim($v_hostname, "'"))?>">
 										</td>
 									</tr>
 									<tr>

web/templates/pages/setup_webapp.html

@@ -61,13 +61,15 @@
 						$f_name = htmlentities($f_name);
 						$f_placeholder = htmlentities($f_placeholder);
 					?>
-					<div class="form-group">
-						<label style="padding-bottom: 2px;" for="<?=$f_name?>"><?=$f_label?>
-							<?php if ($f_type === 'password'):?> / <a href="javascript:randomString('<?=$f_name?>');" class="generate"><?=_('generate');?></a> <?php endif?>
-						</label>
+					<div style="max-width: 360px" 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:randomString('<?=$f_name?>');" class="generate"><?=_('generate');?></a> <?php endif?>
+							</label>
+						<?php endif; ?>
 						<?php if (in_array($f_type, ['select']) && count($form_control['options']) ):?>
-							<p style="margin-top:0;"></p>
-							<select class="vst-list" name="<?=$f_name?>">
+							<select class="form-select" name="<?=$f_name?>" id="<?=$f_name?>">
 								<?php foreach ($form_control['options'] as $key => $option){
 									if(is_numeric($key)){
 										$key = $option;
@@ -77,20 +79,18 @@
 									<option value="<?=$key?>" <?=$selected?>><?=htmlentities($option)?></option>
 								<?php }; ?>
 							</select>
-							</p>
 						<?php elseif (in_array($f_type, ['boolean'])):?>
-							<p>
+							<div class="form-check">
 								<?php $checked = (!empty($f_value))?'checked':''?>
-								<input style="width:auto;" type="checkbox" class="vst-input" name="<?=$f_name?>" id="<?=$f_name?>" <?=$checked?> value="true">
-							</p>
+								<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:?>
-							<p style="margin-top:0;"></p>
-							<input type="text" size="20" class="vst-input" name="<?=$f_name?>" id="<?=$f_name?>" placeholder="<?=$f_placeholder?>" value="<?=$f_value?>">
-							</p>
+							<input type="text" class="form-control" name="<?=$f_name?>" id="<?=$f_name?>" placeholder="<?=$f_placeholder?>" value="<?=$f_value?>">
 						<?php endif; ?>
 					</div>
 				<?php endforeach; ?>
 			</div>
 		</form>
 	<?php endif ?>
-</div>
+</div>