Просмотр исходного кода

Improve checkboxes/radios (#2902)

* Refactor radio and checkbox styles, apply to "Edit Web" template

* Remove invalid </br> HTML

* Apply new checkboxes to Edit User form

* Apply new checkboxes to edit server package forms

* Apply new checkbox to edit/add IP forms

* Apply new checkboxes add user form

* Apply new checkboxes add web form

* Move .hidden utility class with other utilities

* Apply new checkboxes edit server form

* Apply new checkboxes to add access key form

* Improve formatting of add access key form

* Apply new checkboxes to remaining forms

* Remove unnecessary .vst-text around new checkboxes
Alec Rust 3 лет назад
Родитель
Сommit
3c55dc15e3

+ 0 - 6
web/css/src/themes/dark.css

@@ -880,8 +880,6 @@ a.vst-text:active b {
   box-shadow: none !important;
 }
 
-.vst-checkbox {}
-
 .lets-encrypt-note {}
 
 .additional-control {
@@ -1187,10 +1185,6 @@ a.button.cancel {
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-.password-option {
-
-}
-
 .login a.error {
   color: #f864fa;
 }

+ 22 - 16
web/css/src/themes/default.css

@@ -159,10 +159,6 @@
   background-color: #fff;
 }
 
-.hidden {
-  display: none;
-}
-
 * {
   -webkit-tap-highlight-color: transparent;
 }
@@ -2271,10 +2267,6 @@ body.mobile .l-icon-shortcuts {
   cursor: pointer;
 }
 
-input[type="radio"] {
-  margin-top: 10px;
-}
-
 .step-top {
   padding-top: 18px;
 }
@@ -2594,10 +2586,17 @@ a.vst-text:active b {
   border: none !important;
 }
 
-.vst-checkbox {
-  font-size: 0.85rem;
-  margin: 2px 6px 0 3px;
-  padding: 5px;
+.form-check {
+  padding-left: 20px;
+  margin-bottom: 2px;
+  margin-left: 3px;
+  min-height: 24px;
+}
+
+.form-check-input {
+  float: left;
+  margin-top: 3px;
+  margin-left: -20px;
 }
 
 .lets-encrypt-note {
@@ -3039,10 +3038,6 @@ a.button.cancel {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-.password-option {
-  margin-top: 15px;
-}
-
 .login a.error {
   color: #be5abf;
   font-size: 0.8rem;
@@ -3989,3 +3984,14 @@ meter[value="1"]::-moz-meter-bar { background: red; }
 meter[value="2"]::-moz-meter-bar { background: orange; }
 meter[value="3"]::-moz-meter-bar { background: yellow; }
 meter[value="4"]::-moz-meter-bar { background: green; }
+
+/* Global utilities
+   ========================================================================== */
+
+.hidden {
+  display: none;
+}
+
+.u-mt15 {
+  margin-top: 15px !important;
+}

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
web/css/themes/default.min.css


+ 20 - 19
web/templates/pages/add_access_key.html

@@ -2,12 +2,14 @@
 <div class="l-center edit">
     <div class="l-sort clearfix">
         <div class="l-unit-toolbar__buttonstrip">
-            <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/"><i
-                        class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?></a>
+            <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
+                <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
+            </a>
         </div>
         <div class="l-unit-toolbar__buttonstrip float-right">
-            <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i
-                        class="fas fa-save status-icon purple"></i><?= _('Save'); ?></a>
+            <a href="#" class="ui-button" data-action="submit" data-id="vstobjects">
+                <i class="fas fa-save status-icon purple"></i><?= _('Save'); ?>
+            </a>
         </div>
     </div>
 </div>
@@ -16,10 +18,9 @@
 <div class="l-separator"></div>
 
 <div class="l-center animated fadeIn">
-
     <form id="vstobjects" name="v_add_access_key" method="post">
-        <input type="hidden" name="token" value="<?= $_SESSION['token'] ?>"/>
-        <input type="hidden" name="ok" value="Add"/>
+        <input type="hidden" name="token" value="<?= $_SESSION['token'] ?>" />
+        <input type="hidden" name="ok" value="Add" />
 
         <table class="data mode-add">
             <tr class="data-add">
@@ -48,18 +49,18 @@
                                 <?= _('Permissions'); ?>
                             </td>
                         </tr>
-                        <?php
-                        foreach ($apis as $api_name => $api_data) {
-                            ?>
-                            <tr>
-                                <td class="vst-text input-label">
-                                    <label><input type="checkbox" size="20" class="vst-checkbox"
-                                                  name="v_apis[]" value="<?= $api_name ?>"
-                                                  tabindex="5"/><?= _($api_name); ?></label>
-                                </td>
-                            </tr>
-                            <?php
-                        } ?>
+                        <tr>
+                            <td class="input-label">
+                                <?php foreach ($apis as $api_name => $api_data) { ?>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
+                                        <label for="v_apis_<?= $api_name ?>">
+                                            <?= _($api_name); ?>
+                                        </label>
+                                    </div>
+                                <?php } ?>
+                            </td>
+                        </tr>
 
                         <tr>
                             <td class="vst-text step-top">

+ 8 - 3
web/templates/pages/add_ip.html

@@ -79,8 +79,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_shared" <?php if (empty($v_dedicated)) echo "checked=yes" ?> onclick="javascript:elementHideShow('usrtable');"><?=_('Shared');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_shared" id="v_shared" <?php if (empty($v_dedicated)) echo "checked=yes" ?> onclick="javascript:elementHideShow('usrtable');">
+									<label for="v_shared">
+										<?=_('Shared');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -133,4 +138,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 37 - 12
web/templates/pages/add_mail.html

@@ -18,7 +18,7 @@
 	<form id="vstobjects" name="v_add_mail" method="post">
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 		<input type="hidden" name="ok" value="Add" />
-		
+
 		<table class="data mode-add">
 			<tr class="data-add">
 				<td class="data-dotted">
@@ -93,31 +93,56 @@
 							<?php } ?>
 							<?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
 								<tr>
-									<td class="vst-text input-label step-top">
-										<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antispam" <?php if ((empty($v_antispam)) || ($v_antispam == 'yes')) echo "checked=yes"; ?>><?=_('AntiSpam Support');?></label>
+									<td class="input-label step-top">
+										<div class="form-check">
+											<input class="form-check-input" type="checkbox" name="v_antispam" id="v_antispam" <?php if ((empty($v_antispam)) || ($v_antispam == 'yes')) echo "checked=yes"; ?>>
+											<label for="v_antispam">
+												<?=_('AntiSpam Support');?>
+											</label>
+										</div>
 									</td>
 								</tr>
 								<tr>
-									<td class="vst-text input-label">
-										<label><input type="checkbox" size="20" class="vst-checkbox" name="v_reject" <?php if ((empty($v_reject)) || ($v_reject == 'yes')) echo "checked=yes"; ?>><?=_('Reject spam');?></label>
+									<td class="input-label">
+										<div class="form-check">
+											<input class="form-check-input" type="checkbox" name="v_reject" id="v_reject" <?php if ((empty($v_reject)) || ($v_reject == 'yes')) echo "checked=yes"; ?>>
+											<label for="v_reject">
+												<?=_('Reject spam');?>
+											</label>
+										</div>
 									</td>
 								</tr>
 							<?php } ?>
 							<?php if (!empty($_SESSION['ANTIVIRUS_SYSTEM'])) {?>
 								<tr>
-									<td class="vst-text input-label">
-										<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antivirus" <?php if ((empty($v_antivirus)) || ($v_antivirus == 'yes')) echo "checked=yes"; ?>><?=_('AntiVirus Support');?></label>
+									<td class="input-label">
+										<div class="form-check">
+											<input class="form-check-input" type="checkbox" name="v_antivirus" id="v_antivirus" <?php if ((empty($v_antivirus)) || ($v_antivirus == 'yes')) echo "checked=yes"; ?>>
+											<label for="v_antivirus">
+												<?=_('AntiVirus Support');?>
+											</label>
+										</div>
 									</td>
 								</tr>
 							<?php } ?>
 							<tr>
-								<td class="vst-text input-label">
-									<label><input type="checkbox" size="20" class="vst-checkbox" name="v_dkim" <?php if (isset($v_dkim)&&$v_dkim == 'yes') echo "checked=yes"; ?>><?=_('DKIM Support');?></label>
+								<td class="input-label">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" name="v_dkim" id="v_dkim" <?php if (isset($v_dkim)&&$v_dkim == 'yes') echo "checked=yes"; ?>>
+										<label for="v_dkim">
+											<?=_('DKIM Support');?>
+										</label>
+									</div>
 								</td>
 							</tr>
 							<tr>
-								<td class="vst-text input-label">
-									<label><input type="checkbox" size="20" class="vst-checkbox" name="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');"><?=_('SMTP Relay');?></label>
+								<td class="input-label">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
+										<label for="v_smtp_relay">
+											<?=_('SMTP Relay');?>
+										</label>
+									</div>
 								</td>
 							</tr>
 							<tr>
@@ -178,4 +203,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 19 - 9
web/templates/pages/add_mail_acc.html

@@ -122,13 +122,23 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" id="v_blackhole" name="v_blackhole" <?php if ($v_blackhole == 'yes') echo "checked=yes" ?>><?=_('Discard all mail');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo "checked=yes" ?>>
+												<label for="v_blackhole">
+													<?=_('Discard all mail');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for">
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" id="v_fwd_for" name="v_fwd_only" <?php if ($v_fwd_only == 'yes') echo "checked=yes" ?>><?=_('Do not store forwarded mail');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo "checked=yes" ?>>
+												<label for="v_fwd_for">
+													<?=_('Do not store forwarded mail');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -166,20 +176,20 @@
 						<tr><td><?=_('Username');?>: </td><td><span id="v_account">example</span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
 						<tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
 						<?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
-						<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>	
-							
+						<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
+
 						<tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>
 						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
 						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 993
 						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 143
 						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 143
-							
+
 						<tr><td colspan="2"><strong><?=strtoupper(_('POP3 settings'));?></strong></td></tr>
 						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
 						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 995
 						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 110
 						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 110
-						
+
 						<tr><td colspan="2"><strong><?=strtoupper(_('SMTP settings'));?></strong></td></tr>
 						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
 						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 465
@@ -191,4 +201,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 14 - 4
web/templates/pages/add_user.html

@@ -93,12 +93,22 @@
 						</tr>
 						<tr>
 							<td>
-								<label><input type="checkbox" size="20" class="vst-checkbox" onclick="javascript:elementHideShow('send-welcome');" name="v_login_disabled" <?php if ($v_login_disabled == "yes") echo "checked=yes" ?>><?=_('Do not allow user to log in to Control Panel');?></label>
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_login_disabled" id="v_login_disabled" onclick="javascript:elementHideShow('send-welcome');" <?php if ($v_login_disabled == "yes") echo "checked=yes" ?>>
+									<label for="v_login_disabled">
+										<?=_('Do not allow user to log in to Control Panel');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr id="send-welcome">
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_email_notice" id='v_email_notify' value="" tabindex="5" /><?=_('Send welcome email');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_email_notice" id="v_email_notify" tabindex="5">
+									<label for="v_email_notify">
+										<?=_('Send welcome email');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -179,4 +189,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 122 - 78
web/templates/pages/add_web.html

@@ -42,7 +42,7 @@
 								<?php show_error_panel($_SESSION);?>
 							</td>
 						</tr>
-						<?php 
+						<?php
 						if (($user_plain == 'admin') && (($_GET['accept'] !== "true")))  {?>
 							<tr>
 								<td class="step-top">
@@ -96,8 +96,13 @@
 							<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
 								<?php if($panel[$user_plain]['DNS_DOMAINS'] != "0") { ?>
 									<tr>
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_dns" <?php if (empty($v_dns)&&$panel[$user_plain]['DNS_DOMAINS'] != "0") ?>><?=_('DNS Support');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_dns" id="v_dns" <?php if (empty($v_dns)&&$panel[$user_plain]['DNS_DOMAINS'] != "0") ?>>
+												<label for="v_dns">
+													<?=_('DNS Support');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 								<?php } ?>
@@ -105,8 +110,13 @@
 							<?php if ((isset($_SESSION['IMAP_SYSTEM'])) && (!empty($_SESSION['IMAP_SYSTEM']))) {?>
 								<?php if($panel[$user_plain]['MAIL_DOMAINS'] != "0") { ?>
 									<tr>
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_mail" <?php if (empty($v_mail)&&$panel[$user_plain]['MAIL_DOMAINS'] != "0") ?>><?=_('Mail Support');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_mail" id="v_mail" <?php if (empty($v_mail)&&$panel[$user_plain]['MAIL_DOMAINS'] != "0") ?>>
+												<label for="v_mail">
+													<?=_('Mail Support');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 								<?php } ?>
@@ -185,8 +195,13 @@
 						<?php }?>
 						<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { echo ""; ?>
 							<tr>
-								<td class="vst-text step-top">
-									<label><input type="checkbox" size="20" class="vst-checkbox" name="v_proxy" <?php if ($v_proxy !== 'off') echo "checked=yes" ?> onclick="javascript:elementHideShow('proxytable');"><?=_('Proxy Support');?></label>
+								<td class="step-top">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" name="v_proxy" id="v_proxy" <?php if ($v_proxy !== 'off') echo "checked=yes" ?> onclick="javascript:elementHideShow('proxytable');">
+										<label for="v_proxy">
+											<?=_('Proxy Support');?>
+										</label>
+									</div>
 								</td>
 							</tr>
 							<tr>
@@ -253,9 +268,13 @@
 							</td>
 						</tr>
 						<tr class="stats-auth" style="<?php if (trim($v_stats, "'") == ' none') { echo 'display:none;'; } ?>">
-							<td class="step-left vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_stats_auth" <?php if (!empty($v_stats_user)) echo "checked=yes" ?>
-										onclick="javascript:elementHideShow('statstable');"><?=_('Statistics Authorization');?></label>
+							<td class="step-left input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_stats_auth" id="v_stats_auth" <?php if (!empty($v_stats_user)) echo "checked=yes" ?> onclick="javascript:elementHideShow('statstable');">
+									<label for="v_proxy">
+										<?=_('Statistics Authorization');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -285,8 +304,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_custom_doc_root_check" <?php if (!empty($v_custom_doc_root)) echo "checked=yes" ?> onclick="javascript:elementHideShow('v_custom_doc_root');"><?=_('Custom document root');?></label>
+							<td class="step-top">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_custom_doc_root_check" id="v_custom_doc_root_check" <?php if (!empty($v_custom_doc_root)) echo "checked=yes" ?> onclick="javascript:elementHideShow('v_custom_doc_root');">
+									<label for="v_custom_doc_root_check">
+										<?=_('Custom document root');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -336,16 +360,26 @@
 						</tr>
 
 						<tr>
-							<td class="step-top vst-text">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ssl" <?php if($v_ssl == 'yes' || $v_ssl == 'on') echo "checked=yes" ?> onclick="javascript:elementHideShow('ssltable');"><?=_('SSL Support');?></label>
+							<td class="step-top">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_ssl" id="v_ssl" <?php if($v_ssl == 'yes' || $v_ssl == 'on') echo "checked=yes" ?> onclick="javascript:elementHideShow('ssltable');">
+									<label for="v_ssl">
+										<?=_('SSL Support');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
 							<td>
 								<table style="display:<?php if (empty($v_ssl)) { echo 'none';} else {echo 'block';}?>;" id="ssltable">
 									<tr>
-										<td class="step-left input-label vst-text">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_letsencrypt" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_letsencrypt(this)"><?=_('Lets Encrypt Support');?></label>
+										<td class="step-left input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_letsencrypt" id="v_letsencrypt" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_letsencrypt(this)">
+												<label for="v_letsencrypt">
+													<?=_('Lets Encrypt Support');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -354,8 +388,13 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="step-left input-label vst-text">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ssl_forcessl" <?php if($v_ssl_forcessl != 'no') echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_forcessl(this)"><?=_('Force SSL/HTTPS');?></label>
+										<td class="step-left input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_ssl_forcessl" id="v_ssl_forcessl" <?php if($v_ssl_forcessl != 'no') echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_forcessl(this)">
+												<label for="v_ssl_forcessl">
+													<?=_('Force SSL/HTTPS');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -393,8 +432,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text step-top">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ftp" <?php if (!empty($v_ftp) && count($v_ftp_users)) echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_additional_ftp_accounts(this)"><?=_('Additional FTP Account');?></label>
+							<td class="step-top">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_ftp" id="v_ftp" <?php if (!empty($v_ftp) && count($v_ftp_users)) echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_additional_ftp_accounts(this)">
+									<label for="v_ftp">
+										<?=_('Additional FTP Account');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -479,64 +523,64 @@
 	</form>
 
 	<div id="templates" class="hidden">
-			<table class="ftptable ftptable-nrm" name="v_add_domain_ftp">
-				<tr>
-					<td class="vst-text input-label">
-						<?=_('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control do_delete" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?=_('delete');?>)</a>
-						<input type="hidden"  class="v-ftp-user-deleted" name="v_ftp_user[%INDEX%][delete]" value="0" />
-						<input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[%INDEX%][is_new]" value="1" />
-					</td>
-				</tr>
-				<tr>
-					<td class="vst-text step-left input-label">
-						<?=_('Username');?><br>
-						<span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
-					</td>
-				</tr>
-				<tr>
-					<td class="step-left">
-						<input type="text" size="20" class="vst-input v-ftp-user" name="v_ftp_user[%INDEX%][v_ftp_user]" value="">
-						<small class="hint"></small>
-					</td>
-				</tr>
-				<tr>
-					<td class="vst-text step-left  input-label">
-						<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)"; class="generate" ><?=_('generate');?></a>
-					</td>
-				</tr>
-				<tr>
-					<td class="step-left">
-						<input type="text" class="vst-input v-ftp-user-psw password" name="v_ftp_user[%INDEX%][v_ftp_password]" value="">
-					</td>
-				</tr>
+		<table class="ftptable ftptable-nrm" name="v_add_domain_ftp">
+			<tr>
+				<td class="vst-text input-label">
+					<?=_('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control do_delete" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?=_('delete');?>)</a>
+					<input type="hidden"  class="v-ftp-user-deleted" name="v_ftp_user[%INDEX%][delete]" value="0" />
+					<input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[%INDEX%][is_new]" value="1" />
+				</td>
+			</tr>
+			<tr>
+				<td class="vst-text step-left input-label">
+					<?=_('Username');?><br>
+					<span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
+				</td>
+			</tr>
+			<tr>
+				<td class="step-left">
+					<input type="text" size="20" class="vst-input v-ftp-user" name="v_ftp_user[%INDEX%][v_ftp_user]" value="">
+					<small class="hint"></small>
+				</td>
+			</tr>
+			<tr>
+				<td class="vst-text step-left  input-label">
+					<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)"; class="generate" ><?=_('generate');?></a>
+				</td>
+			</tr>
+			<tr>
+				<td class="step-left">
+					<input type="text" class="vst-input v-ftp-user-psw password" name="v_ftp_user[%INDEX%][v_ftp_password]" value="">
+				</td>
+			</tr>
 
-				<tr>
-					<td class="vst-text step-left input-label">
-						 <?=_('Path');?>
-					</td>
-				</tr>
-				<tr>
-					<td class="step-left">
-						<input type="hidden" class="vst-input v-ftp-pre-path" name="v_ftp_pre_path" value="">
-						<input type="text"  class="vst-input v-ftp-path" name="v_ftp_user[%INDEX%][v_ftp_path]" value="">
-						<br /><span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path_new_user, "'")) ?></span><span class="ftp-path-value v-ftp-path-hint"></span>
-					</td>
-				</tr>
-				<tr>
-					<td class="vst-text step-left input-label">
-						 <?=_('Send FTP credentials to email');?>
-					</td>
-				</tr>
-				<tr>
-					<td class="step-left">
-						<input type="text" class="vst-input" name="v_ftp_user[%INDEX%][v_ftp_email]" value="">
-					</td>
-				</tr>
+			<tr>
+				<td class="vst-text step-left input-label">
+						<?=_('Path');?>
+				</td>
+			</tr>
+			<tr>
+				<td class="step-left">
+					<input type="hidden" class="vst-input v-ftp-pre-path" name="v_ftp_pre_path" value="">
+					<input type="text"  class="vst-input v-ftp-path" name="v_ftp_user[%INDEX%][v_ftp_path]" value="">
+					<br /><span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path_new_user, "'")) ?></span><span class="ftp-path-value v-ftp-path-hint"></span>
+				</td>
+			</tr>
+			<tr>
+				<td class="vst-text step-left input-label">
+						<?=_('Send FTP credentials to email');?>
+				</td>
+			</tr>
+			<tr>
+				<td class="step-left">
+					<input type="text" class="vst-input" name="v_ftp_user[%INDEX%][v_ftp_email]" value="">
+				</td>
+			</tr>
 		</table>
-		</div>
-	  </div>
+	</div>
+</div>
 
-	<script>
-		GLOBAL.FTP_USER_PREFIX =  "<?=$user_plain.'_';?>";
-		GLOBAL.FTP_USER_PREPATH = "<?=htmlentities($v_ftp_user_prepath);?>";
-	</script>
+<script>
+	GLOBAL.FTP_USER_PREFIX =  "<?=$user_plain.'_';?>";
+	GLOBAL.FTP_USER_PREPATH = "<?=htmlentities($v_ftp_user_prepath);?>";
+</script>

+ 8 - 3
web/templates/pages/edit_ip.html

@@ -73,8 +73,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_shared" <?php if (empty($v_dedicated)) echo "checked=yes" ?> onclick="javascript:elementHideShow('usrtable');"><?=_('Shared');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_shared" id="v_shared" <?php if (empty($v_dedicated)) echo "checked=yes" ?> onclick="javascript:elementHideShow('usrtable');">
+									<label for="v_shared">
+										<?=_('Shared');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -127,4 +132,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 51 - 16
web/templates/pages/edit_mail.html

@@ -18,7 +18,7 @@
 	<form id="vstobjects" name="v_edit_mail" 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">
@@ -96,39 +96,69 @@
 						</tr>
 						<?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
 							<tr>
-								<td class="vst-text input-label step-top">
-									<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antispam" <?php if ($v_antispam == 'yes') echo "checked=yes"; ?>><?=_('AntiSpam Support');?></label>
+								<td class="input-label step-top">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" name="v_antispam" id="v_antispam" <?php if ($v_antispam == 'yes') echo "checked=yes"; ?>>
+										<label for="v_antispam">
+											<?=_('AntiSpam Support');?>
+										</label>
+									</div>
 								</td>
 							</tr>
 							<tr>
-								<td class="vst-text input-label">
-									<label><input type="checkbox" size="20" class="vst-checkbox" name="v_reject" <?php if ($v_reject == 'yes') echo "checked=yes"; ?>><?=_('Reject spam');?></label>
+								<td class="input-label">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" name="v_reject" id="v_reject" <?php if ($v_reject == 'yes') echo "checked=yes"; ?>>
+										<label for="v_reject">
+											<?=_('Reject spam');?>
+										</label>
+									</div>
 								</td>
 							</tr>
 						<?php } ?>
 						<?php if (!empty($_SESSION['ANTIVIRUS_SYSTEM'])) {?>
 							<tr>
-								<td class="vst-text input-label">
-									<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antivirus" <?php if ($v_antivirus == 'yes') echo "checked=yes"; ?>><?=_('AntiVirus Support');?></label>
+								<td class="input-label">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" name="v_antivirus" id="v_antivirus" <?php if ($v_antivirus == 'yes') echo "checked=yes"; ?>>
+										<label for="v_antivirus">
+											<?=_('AntiVirus Support');?>
+										</label>
+									</div>
 								</td>
 							</tr>
 						<?php } ?>
 						<tr>
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_dkim" <?php if ($v_dkim == 'yes') echo "checked=yes"; ?>><?=_('DKIM Support');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_dkim" id="v_dkim" <?php if ($v_dkim == 'yes') echo "checked=yes"; ?>>
+									<label for="v_dkim">
+										<?=_('DKIM Support');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ssl" <?php if ($v_ssl == 'yes') echo "checked=yes" ?> onclick="javascript:elementHideShow('ssltable');"><?=_('SSL Support');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_ssl" id="v_ssl" <?php if ($v_ssl == 'yes') echo "checked=yes" ?> onclick="javascript:elementHideShow('ssltable');">
+									<label for="v_ssl">
+										<?=_('SSL Support');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr id="ssltable" style="display:<?php if ($v_ssl == 'no' ) { echo 'none';} else {echo 'block';}?> ;" class="step-left">
 							<td>
 								<table>
 									<tr>
-										<td class="input-label vst-text">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_letsencrypt" onclick="javascript:elementHideShow('ssl-details');App.Actions.MAIL.toggle_letsencrypt(this);" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo "checked=yes" ?>"><?=_('Lets Encrypt Support');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_letsencrypt" id="v_letsencrypt" onclick="javascript:elementHideShow('ssl-details');App.Actions.MAIL.toggle_letsencrypt(this);" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo "checked=yes" ?>">
+												<label for="v_letsencrypt">
+													<?=_('Lets Encrypt Support');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr id="le-warning" class="step-top">
@@ -247,9 +277,14 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
+							<td class="input-label">
 								<label>
-									<input type="checkbox" size="20" class="vst-checkbox" name="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');"><?=_('SMTP Relay');?>
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
+										<label for="v_smtp_relay">
+											<?=_('SMTP Relay');?>
+										</label>
+									</div>
 								</label>
 							</td>
 						</tr>
@@ -310,4 +345,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 26 - 11
web/templates/pages/edit_mail_acc.html

@@ -107,18 +107,33 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" onclick="javascript:elementHideShow(' v-fwd-opt');" id="v_blackhole" name="v_blackhole" <?php if ($v_blackhole == 'yes') echo "checked=yes" ?>><?=_('Discard all mail');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo "checked=yes" ?>>
+									<label for="v_blackhole">
+										<?=_('Discard all mail');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for">
-							<td class="vst-text input-type input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" id="v_fwd_for" name="v_fwd_only" <?php if ($v_fwd_only == 'yes') echo "checked=yes" ?>><?=_('Do not store forwarded mail');?></label>
+							<td class="input-type input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo "checked=yes" ?>>
+									<label for="v_fwd_for">
+										<?=_('Do not store forwarded mail');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-type input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_autoreply" <?php if ($v_autoreply == 'yes') echo "checked=yes" ?> onclick="javascript:elementHideShow('autoreplytable');"><?=_('Autoreply');?></label>
+							<td class="input-type input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_autoreply" id="v_autoreply" <?php if ($v_autoreply == 'yes') echo "checked=yes" ?> onclick="javascript:elementHideShow('autoreplytable');">
+									<label for="v_autoreply">
+										<?=_('Autoreply');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -174,20 +189,20 @@
 						<tr><td><?=_('Username');?>: </td><td><span id="v_account"></span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
 						<tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
 						<?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
-						<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>	
-							
+						<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
+
 						<tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>
 						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
 						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 993
 						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 143
 						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 143
-							
+
 						<tr><td colspan="2"><strong><?=strtoupper(_('POP3 settings'));?></strong></td></tr>
 						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
 						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 995
 						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 110
 						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 110
-						
+
 						<tr><td colspan="2"><strong><?=strtoupper(_('SMTP settings'));?></strong></td></tr>
 						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
 						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 465
@@ -199,4 +214,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 80 - 37
web/templates/pages/edit_server.html

@@ -111,8 +111,13 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_policy_user_change_theme" <?php if ((isset($_SESSION['POLICY_USER_CHANGE_THEME'])) && (!empty($_SESSION['POLICY_USER_CHANGE_THEME'])) && ($_SESSION['POLICY_USER_CHANGE_THEME'] == "no")) echo "checked=yes" ?>><?=_('Set as selected theme for all users');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_policy_user_change_theme" id="v_policy_user_change_theme" <?php if ((isset($_SESSION['POLICY_USER_CHANGE_THEME'])) && (!empty($_SESSION['POLICY_USER_CHANGE_THEME'])) && ($_SESSION['POLICY_USER_CHANGE_THEME'] == "no")) echo "checked=yes" ?>>
+												<label for="v_policy_user_change_theme">
+													<?=_('Set as selected theme for all users');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -136,8 +141,13 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_language_update"><?=_('Set as default language for all users');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_language_update" id="v_language_update">
+												<label for="v_language_update">
+													<?=_('Set as default language for all users');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -179,22 +189,43 @@
 									</tr>
 									<tr>
 										<td>
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_debug_mode" <?php if ((isset($_SESSION['DEBUG_MODE'])) && (!empty($_SESSION['DEBUG_MODE'])) && ($_SESSION['DEBUG_MODE'] == "true")) echo "checked=yes" ?>><?=_('Enable debug mode');?></label>
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_debug_mode" id="v_debug_mode" <?php if ((isset($_SESSION['DEBUG_MODE'])) && (!empty($_SESSION['DEBUG_MODE'])) && ($_SESSION['DEBUG_MODE'] == "true")) echo "checked=yes" ?>>
+												<label for="v_debug_mode">
+													<?=_('Enable debug mode');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td>
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_experimental_features" <?php if ((isset($_SESSION['POLICY_SYSTEM_ENABLE_BACON'])) && (!empty($_SESSION['POLICY_SYSTEM_ENABLE_BACON'])) && ($_SESSION['POLICY_SYSTEM_ENABLE_BACON'] == "true")) echo "checked=yes" ?>><?=_('Enable preview features');?></label> <span class="hint">(<a href="/list/server/preview/"><?=_('View');?></a>)</span>
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_experimental_features" id="v_experimental_features" <?php if ((isset($_SESSION['POLICY_SYSTEM_ENABLE_BACON'])) && (!empty($_SESSION['POLICY_SYSTEM_ENABLE_BACON'])) && ($_SESSION['POLICY_SYSTEM_ENABLE_BACON'] == "true")) echo "checked=yes" ?>>
+												<label for="v_experimental_features">
+													<?=_('Enable preview features');?>
+												</label>
+												<span class="hint">(<a href="/list/server/preview/"><?=_('View');?></a>)</span>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td>
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_upgrade_send_notification_email" <?php if ((isset($_SESSION['UPGRADE_SEND_EMAIL'])) && (!empty($_SESSION['UPGRADE_SEND_EMAIL'])) && ($_SESSION['UPGRADE_SEND_EMAIL'] == "true")) echo "checked=yes" ?>><?=_('SYSTEM_UPGRADE_SEND_NOTIFICATION_EMAIL');?></label>
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_upgrade_send_notification_email" id="v_upgrade_send_notification_email" <?php if ((isset($_SESSION['UPGRADE_SEND_EMAIL'])) && (!empty($_SESSION['UPGRADE_SEND_EMAIL'])) && ($_SESSION['UPGRADE_SEND_EMAIL'] == "true")) echo "checked=yes" ?>>
+												<label for="v_upgrade_send_notification_email">
+													<?=_('SYSTEM_UPGRADE_SEND_NOTIFICATION_EMAIL');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
 										<td>
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_upgrade_send_email_log" <?php if ((isset($_SESSION['UPGRADE_SEND_EMAIL_LOG'])) && (!empty($_SESSION['UPGRADE_SEND_EMAIL_LOG'])) && ($_SESSION['UPGRADE_SEND_EMAIL_LOG'] == "true")) echo "checked=yes" ?>><?=_('SYSTEM_UPGRADE_SEND_EMAIL_LOG');?></label>
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_upgrade_send_email_log" id="v_upgrade_send_email_log" <?php if ((isset($_SESSION['UPGRADE_SEND_EMAIL_LOG'])) && (!empty($_SESSION['UPGRADE_SEND_EMAIL_LOG'])) && ($_SESSION['UPGRADE_SEND_EMAIL_LOG'] == "true")) echo "checked=yes" ?>>
+												<label for="v_upgrade_send_email_log">
+													<?=_('SYSTEM_UPGRADE_SEND_EMAIL_LOG');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -258,13 +289,17 @@
 										</tr>
 										<?php foreach($v_php_versions as $php_version): ?>
 											<tr>
-												<td class="vst-text input-label">
-													<input type="checkbox" size="20" class="vst-checkbox"
-														<?=$php_version->installed?'checked':''; ?>
-														<?=$php_version->protected?'disabled':''; ?>
-														id="<?=$php_version->name?>"
-														name="v_php_versions[<?=$php_version->tpl?>]">
-													<label for="<?=$php_version->name?>"><?=$php_version->name?></label>
+												<td class="input-label">
+													<div class="form-check">
+														<input class="form-check-input" type="checkbox"
+															<?=$php_version->installed?'checked':''; ?>
+															<?=$php_version->protected?'disabled':''; ?>
+															id="<?=$php_version->name?>"
+															name="v_php_versions[<?=$php_version->tpl?>]">
+														<label for="<?=$php_version->name?>">
+															<?=$php_version->name?>
+														</label>
+													</div>
 												</td>
 											</tr>
 											<?php foreach($php_version->usedby as $wd_user => $wd_domains ): ?>
@@ -405,10 +440,13 @@
 											</tr>
 										<?php } ?>
 										<tr>
-											<td class="vst-text">
-												<label>
-													<input type="checkbox" size="20" class="vst-checkbox" name="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');"><?=_('Global SMTP Relay');?>
-												</label>
+											<td class="input-label">
+												<div class="form-check">
+													<input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
+													<label for="v_smtp_relay">
+														<?=_('Global SMTP Relay');?>
+													</label>
+												</div>
 											</td>
 										</tr>
 										<tr>
@@ -710,8 +748,13 @@
 										</td>
 									</tr>
 									<tr>
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_backup_remote_adv" <?php if (!empty($v_backup_remote_adv)) echo "checked=yes" ?> onclick="javascript:elementHideShow('remote_backup');"><?=_('Remote backup');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_backup_remote_adv" id="v_backup_remote_adv" <?php if (!empty($v_backup_remote_adv)) echo "checked=yes" ?> onclick="javascript:elementHideShow('remote_backup');">
+												<label for="v_backup_remote_adv">
+													<?=_('Remote backup');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -972,21 +1015,21 @@
 														<br><br>
 													</td>
 												</tr>
-                                                <tr>
-                                                    <td class="vst-text input-label">
-                                                        <?=_('Enable API access');?>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td>
-                                                        <select class="vst-list" name="v_api_system" id="api-system">
-                                                            <option value='0' <?php if(empty($_SESSION['API_SYSTEM']) || $_SESSION['API_SYSTEM'] == '0') echo 'selected' ?>><?=_('Disabled'); ?></option>
-                                                            <option value='1' <?php if($_SESSION['API_SYSTEM'] == '1') echo 'selected' ?>><?=_('Enabled for admin'); ?></option>
-                                                            <option value='2' <?php if($_SESSION['API_SYSTEM'] == '2') echo 'selected' ?>><?=_('Enabled for all users'); ?></option>
-                                                        </select>
-                                                        <br><br>
-                                                    </td>
-                                                </tr>
+												<tr>
+													<td class="vst-text input-label">
+															<?=_('Enable API access');?>
+													</td>
+												</tr>
+												<tr>
+													<td>
+														<select class="vst-list" name="v_api_system" id="api-system">
+																<option value='0' <?php if(empty($_SESSION['API_SYSTEM']) || $_SESSION['API_SYSTEM'] == '0') echo 'selected' ?>><?=_('Disabled'); ?></option>
+																<option value='1' <?php if($_SESSION['API_SYSTEM'] == '1') echo 'selected' ?>><?=_('Enabled for admin'); ?></option>
+																<option value='2' <?php if($_SESSION['API_SYSTEM'] == '2') echo 'selected' ?>><?=_('Enabled for all users'); ?></option>
+														</select>
+														<br><br>
+													</td>
+												</tr>
 												<tr>
 													<td>
 														<table id="security_ip" style="<?php if ($_SESSION['API'] == "no" && $_SESSION['API_SYSTEM'] == '0') echo 'display:none;';?>">
@@ -999,7 +1042,7 @@
 																<td>
 																	<textarea size="20" class="vst-textinput short" name="v_api_allowed_ip"><?php
 																		foreach(explode(',',$_SESSION['API_ALLOWED_IP']) as $ip ){
-                                                                            echo trim($ip)."\n";
+																				echo trim($ip)."\n";
 																			}
 																		?></textarea>
 																	<br><br>

+ 8 - 3
web/templates/pages/edit_server_bind9.html

@@ -60,8 +60,13 @@
 								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
-						<td class="vst-text input-label" style="text-transform: capitalize;">
-							<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+						<td class="input-label" style="text-transform: capitalize;">
+							<div class="form-check">
+								<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+								<label for="v_restart">
+									<?=_('restart');?>
+								</label>
+							</div>
 						</td>
 					</table>
 					<table class="data-col2"></table>
@@ -69,4 +74,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 8 - 3
web/templates/pages/edit_server_dovecot.html

@@ -132,8 +132,13 @@
 								</td>
 							</tr>
 						<?php } ?>
-						<td class="vst-text input-label" style="text-transform: capitalize;">
-							<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+						<td class="input-label" style="text-transform: capitalize;">
+							<div class="form-check">
+								<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+								<label for="v_restart">
+									<?=_('restart');?>
+								</label>
+							</div>
 						</td>
 					</table>
 					<table class="data-col2"></table>
@@ -141,4 +146,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 8 - 3
web/templates/pages/edit_server_httpd.html

@@ -52,8 +52,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label" style="text-transform: capitalize;">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+							<td class="input-label" style="text-transform: capitalize;">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+									<label for="v_restart">
+										<?=_('restart');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 					</table>
@@ -62,4 +67,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 8 - 3
web/templates/pages/edit_server_mysql.html

@@ -120,8 +120,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label" style="text-transform: capitalize;">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+							<td class="input-label" style="text-transform: capitalize;">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+									<label for="v_restart">
+										<?=_('restart');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 					</table>
@@ -130,4 +135,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 8 - 3
web/templates/pages/edit_server_nginx.html

@@ -177,8 +177,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label" style="text-transform: capitalize;">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+							<td class="input-label" style="text-transform: capitalize;">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+									<label for="v_restart">
+										<?=_('restart');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 					</table>
@@ -188,4 +193,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 8 - 3
web/templates/pages/edit_server_pgsql.html

@@ -60,8 +60,13 @@
 								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
-						<td class="vst-text input-label" style="text-transform: capitalize;">
-							<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+						<td class="input-label" style="text-transform: capitalize;">
+							<div class="form-check">
+								<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+								<label for="v_restart">
+									<?=_('restart');?>
+								</label>
+							</div>
 						</td>
 					</table>
 
@@ -70,4 +75,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 8 - 3
web/templates/pages/edit_server_php.html

@@ -142,8 +142,13 @@
 								<textarea class="vst-textinput console" name="v_config"><?=$v_config;?></textarea>
 							</td>
 						</tr>
-						<td class="vst-text input-label" style="text-transform: capitalize;">
-							<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+						<td class="input-label" style="text-transform: capitalize;">
+							<div class="form-check">
+								<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+								<label for="v_restart">
+									<?=_('restart');?>
+								</label>
+							</div>
 						</td>
 					</table>
 					<table class="data-col2"></table>
@@ -151,4 +156,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 8 - 3
web/templates/pages/edit_server_service.html

@@ -51,8 +51,13 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label" style="text-transform: capitalize;">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_restart" checked="yes"><?=_('restart');?></label>
+							<td class="input-label" style="text-transform: capitalize;">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_restart" id="v_restart" checked>
+									<label for="v_restart">
+										<?=_('restart');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 					</table>
@@ -61,4 +66,4 @@
 			</tr>
 		</table>
 	</form>
-</div>
+</div>

+ 21 - 6
web/templates/pages/edit_user.html

@@ -19,8 +19,8 @@
 				<a href="<?=$log_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Logs');?>"><i class="fas fa-history status-icon maroon"></i><?=_('Logs');?></a>
 			<?php } ?>
 			<?php
-            $api_status = (!empty($_SESSION['API_SYSTEM']) && is_numeric($_SESSION['API_SYSTEM'])) ? $_SESSION['API_SYSTEM'] : 0;
-            if (($user_plain == 'admin' && $api_status > 0) || ($user_plain != 'admin' && $api_status > 1)) { ?>
+				$api_status = (!empty($_SESSION['API_SYSTEM']) && is_numeric($_SESSION['API_SYSTEM'])) ? $_SESSION['API_SYSTEM'] : 0;
+				if (($user_plain == 'admin' && $api_status > 0) || ($user_plain != 'admin' && $api_status > 1)) { ?>
 				<a href="<?=$keys_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Access Keys');?>"><i class="fas fa-key status-icon purple"></i><?=_('Access Keys');?></a>
 			<?php } ?>
 		</div>
@@ -138,15 +138,25 @@
 									<?php if ($_SESSION['userContext'] === 'admin') {?>
 										<tr>
 											<td>
-												<label><input type="checkbox" size="20" class="vst-checkbox" onclick="javascript:elementHideShow('password-options');elementHideShow('password-options-ip');" name="v_login_disabled" <?php if ($v_login_disabled === "yes") echo "checked=yes" ?>><?=_('Do not allow user to log in to Control Panel');?></label>
+												<div class="form-check">
+													<input class="form-check-input" type="checkbox" name="v_login_disabled" id="v_login_disabled" onclick="javascript:elementHideShow('password-options');elementHideShow('password-options-ip');" <?php if ($v_login_disabled === "yes") echo "checked=yes" ?>>
+													<label for="v_login_disabled">
+														<?=_('Do not allow user to log in to Control Panel');?>
+													</label>
+												</div>
 											</td>
 										</tr>
 									<?php } ?>
 									<tr>
 										<td id="password-options" style="<?php if ($v_login_disabled === 'yes') { echo 'display: none;'; } else { echo 'display: table-cell;'; }?>">
-											<label><input type="checkbox" class="vst-checkbox password-option" name="v_twofa" <?php if(!empty($v_twofa)) echo "checked=yes" ?>><?=_('Enable 2FA');?></label>
+											<div class="form-check u-mt15">
+												<input class="form-check-input" type="checkbox" name="v_twofa" id="v_twofa" <?php if(!empty($v_twofa)) echo "checked=yes" ?>>
+												<label for="v_twofa">
+													<?=_('Enable 2FA');?>
+												</label>
+											</div>
 											<?php if (!empty($v_twofa)) { ?>
-											<p><?=_('2FA Reset Code:').' '.$v_twofa; ?></br></p>
+											<p><?=_('2FA Reset Code:').' '.$v_twofa; ?></p>
 											<p><?=_('Please scan the code below in your 2FA application:'); ?></p>
 											<div><img class="qr-code" src="<?=htmlentities($v_qrcode); ?>"></div>
 											<?php } ?>
@@ -154,7 +164,12 @@
 									</tr>
 									<tr>
 										<td id="password-options-ip" style="<?php if ($v_login_disabled === 'yes') { echo 'display: none;'; } else { echo 'display: table-cell;'; }?>">
-											<label><input type="checkbox" size="20" class="vst-checkbox" onclick="javascript:elementHideShow('ip-allowlist')" name="v_login_use_iplist" <?php if ($v_login_use_iplist === "yes") echo "checked=yes" ?>><?=_('Use IP address allow list for login attempts');?></label>
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_login_use_iplist" id="v_login_use_iplist" onclick="javascript:elementHideShow('ip-allowlist')" <?php if ($v_login_use_iplist === "yes") echo "checked=yes" ?>>
+												<label for="v_login_use_iplist">
+													<?=_('Use IP address allow list for login attempts');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>

+ 123 - 63
web/templates/pages/edit_web.html

@@ -120,8 +120,13 @@
 							</td>
 						</tr>
 						<tr class="stats-auth" style="<?php if ($v_stats == 'none') { ?>display:none<?php } ?>">
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_stats_auth" <?php if (!empty($v_stats_user)) echo "checked=yes" ?> onclick="javascript:elementHideShow('statstable');"><?=_('Statistics Authorization');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_stats_auth" id="v_stats_auth" <?php if (!empty($v_stats_user)) echo "checked=yes" ?> onclick="javascript:elementHideShow('statstable');">
+									<label for="v_stats_auth">
+										<?=_('Statistics Authorization');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr class="stats-auth">
@@ -151,77 +156,109 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v-redirect-checkbox" <?php if (!empty($v_redirect)) echo "checked=yes" ?> onclick="javascript:elementHideShow('v_redirect');"><?=_('Enable domain redirection');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v-redirect-checkbox" id="v-redirect-checkbox" <?php if (!empty($v_redirect)) echo "checked=yes" ?> onclick="javascript:elementHideShow('v_redirect');">
+									<label for="v-redirect-checkbox">
+										<?=_('Enable domain redirection');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
-							<td class="step-left">
-								<table style="display:<?php if (empty($v_redirect)) { echo 'none';} else {echo 'block';}?> ;" id="v_redirect">
-									<tr>
-										<td>
-											<label><input type="radio" name="v-redirect" value="<?='www.'.htmlentities($v_domain);?>" <?php if ($v_redirect == "www.".$v_domain) echo "checked"; ?> class="v-redirect-custom-value"><?=sprintf(_('Redirect visitors to %s'),"www.".htmlentities($v_domain));?></label></input><br />
-											<label><input type="radio" name="v-redirect" value="<?=htmlentities($v_domain);?>" <?php if( $v_redirect == $v_domain) echo "checked";?> class="v-redirect-custom-value"><?=sprintf(_('Redirect visitors to %s'),htmlentities($v_domain));?></label></input><br />
-											<label><input type="radio" name="v-redirect" value="custom" <?php if( !empty($v_redirect_custom)) echo "checked";?> class="v-redirect-custom-value"><?=_("Redirect visitors to a custom domain or web address");?></label></input>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<table id="custom_redirect" style="margin-left: 22px; display:<?php if (empty($v_redirect_custom)) { echo 'none';} else {echo 'block';}?> ;">
-												<tr>
-													<td class="vst-text input-label">
-														<?=_('Target domain or URL');?>:
-													</td>
-												</tr>
-												<tr>
-													<td class="vst-text input-label">
-														<input type="text" name="v-redirect-custom" class="vst-input" value="<?=$v_redirect_custom;?>" />
-													</td>
-												</tr>
-												<tr>
-													<td class="vst-text input-label">
-														<?=_('Status code');?>:
-													</td>
-												</tr>
-												<tr>
-													<td class="vst-text input-label">
-														<select class="vst-list" name="v-redirect-code">
-															<?php foreach ($redirect_code_options as $status_code): ?>
-															<option value="<?=$status_code;?>"
-																<?=($v_redirect_code === $status_code || (empty($v_redirect_code) && $status_code === $v_redirect_code))?' selected="selected" ':''; ?>>
-																<?=$status_code;?>
-															</option>
-															<?php endforeach; ?>
-														</select>
-													</td>
-												</tr>
-											</table>
-										</td>
-									</tr>
-								</table>
+							<td class="step-left"> <!-- here -->
+								<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"; ?>>
+										<label for="v-redirect-radio-1">
+											<?=sprintf(_('Redirect visitors to %s'),"www.".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-2" value="<?=htmlentities($v_domain);?>" <?php if( $v_redirect == $v_domain) echo "checked";?> >
+										<label class="form-check-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">
+											<?=_("Redirect visitors to a custom domain or web address");?>
+										</label>
+									</div>
+									<table id="custom_redirect" style="margin-left: 22px; display:<?php if (empty($v_redirect_custom)) { echo 'none';} else {echo 'block';}?> ;">
+										<tr>
+											<td class="vst-text input-label">
+												<?=_('Target domain or URL');?>:
+											</td>
+										</tr>
+										<tr>
+											<td class="vst-text input-label">
+												<input type="text" name="v-redirect-custom" class="vst-input" value="<?=$v_redirect_custom;?>" />
+											</td>
+										</tr>
+										<tr>
+											<td class="vst-text input-label">
+												<?=_('Status code');?>:
+											</td>
+										</tr>
+										<tr>
+											<td class="vst-text input-label">
+												<select class="vst-list" name="v-redirect-code">
+													<?php foreach ($redirect_code_options as $status_code): ?>
+													<option value="<?=$status_code;?>"
+														<?=($v_redirect_code === $status_code || (empty($v_redirect_code) && $status_code === $v_redirect_code))?' selected="selected" ':''; ?>>
+														<?=$status_code;?>
+													</option>
+													<?php endforeach; ?>
+												</select>
+											</td>
+										</tr>
+									</table>
+								</div>
 							</td>
 						</tr>
 						<tr>
-							<td class="vst-text input-label">
-								<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ssl" <?php if ($v_ssl == 'yes') echo "checked=yes" ?> onclick="javascript:App.Actions.WEB.toggle_ssl(this);"><?=_('SSL Support');?></label>
+							<td class="input-label">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" name="v_ssl" id="v_ssl" <?php if ($v_ssl == 'yes') echo "checked=yes" ?> onclick="javascript:App.Actions.WEB.toggle_ssl(this);">
+									<label for="v_ssl">
+										<?=_('SSL Support');?>
+									</label>
+								</div>
 							</td>
 						</tr>
 						<tr>
 							<td class="step-left">
 								<table style="display:<?php if ($v_ssl == 'no' ) { echo 'none';} else {echo 'block';}?> ;" id="ssltable">
 									<tr>
-										<td class="input-label vst-text">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_letsencrypt" id="letsencrypt" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo "checked=yes" ?> onclick="elementHideShow('letsinfo');App.Actions.WEB.toggle_letsencrypt(this)"><?=_('Lets Encrypt Support');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_letsencrypt" id="letsencrypt" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo "checked=yes" ?> onclick="elementHideShow('letsinfo');App.Actions.WEB.toggle_letsencrypt(this)">
+												<label for="letsencrypt">
+													<?=_('Lets Encrypt Support');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
-										<td class="input-label vst-text">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ssl_forcessl" id="v_ssl_forcessl" <?php if($v_ssl_forcessl == 'yes') echo "checked=yes" ?> onclick=""><?=_('Force SSL/HTTPS');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_ssl_forcessl" id="v_ssl_forcessl" <?php if($v_ssl_forcessl == 'yes') echo "checked=yes" ?> onclick="">
+												<label for="v_ssl_forcessl">
+													<?=_('Force SSL/HTTPS');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
-										<td class="input-label vst-text">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ssl_hsts" id="ssl_hsts" <?php if($v_ssl_hsts == 'yes') echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_hsts(this)"><?=_('Enable SSL HSTS');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_ssl_hsts" id="ssl_hsts" <?php if($v_ssl_hsts == 'yes') echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_hsts(this)">
+												<label for="ssl_hsts">
+													<?=_('Enable SSL HSTS');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr style="display: none;">
@@ -381,8 +418,16 @@
 										</tr>
 										<?php if($_SESSION['WEB_SYSTEM'] == 'nginx'){?>
 											<tr>
-												<td class="vst-text">
-													<label><input type="checkbox" size="20" class="vst-checkbox" name="v_nginx_cache_check" <?php if ($v_nginx_cache == 'yes') echo "checked=yes" ?> onclick="javascript:elementHideShow('v_nginx_duration');"><?=_('Enable FastCGI Cache'); ?> <a href="https://docs.hestiacp.com/admin_docs/web/fastcgi.html#nginx-fastcgi-cache" target="_blank"><i class="fas fa-question-circle"></i></a></label>
+												<td>
+													<div class="form-check">
+														<input class="form-check-input" type="checkbox" name="v_nginx_cache_check" id="v_nginx_cache_check" <?php if ($v_nginx_cache == 'yes') echo "checked=yes" ?> onclick="javascript:elementHideShow('v_nginx_duration');">
+														<label for="v_nginx_cache_check">
+															<?=_('Enable FastCGI Cache'); ?>
+															<a href="https://docs.hestiacp.com/admin_docs/web/fastcgi.html#nginx-fastcgi-cache" target="_blank">
+																<i class="fas fa-question-circle"></i>
+															</a>
+														</label>
+													</div>
 												</td>
 											</tr>
 											<tr>
@@ -426,8 +471,13 @@
 										<?php }?>
 										<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { ?>
 											<tr style="display: none;">
-												<td class="vst-text input-label">
-													<label><input type="checkbox" size="20" class="vst-checkbox" name="v_proxy" <?php if (!empty($v_proxy)) echo "checked=yes" ?> onclick="javascript:elementHideShow('proxytable');"><?=_('Proxy Support') . "<span class='optional'>" . strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?></label>
+												<td class="input-label">
+													<div class="form-check">
+														<input class="form-check-input" type="checkbox" name="v_proxy" id="v_proxy" <?php if (!empty($v_proxy)) echo "checked=yes" ?> onclick="javascript:elementHideShow('proxytable');">
+														<label for="v_proxy">
+															<?=_('Proxy Support') . "<span class='optional'>" . strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?>
+														</label>
+													</div>
 												</td>
 											</tr>
 											<tr>
@@ -473,8 +523,13 @@
 										<?php } ?>
 									<?php } ?>
 									<tr>
-										<td class="vst-text input-label">
-											<label><input type="checkbox" size="20" class="vst-checkbox" name="v_custom_doc_root_check" <?php if (!empty($v_custom_doc_root)) echo "checked=yes" ?> onclick="javascript:elementHideShow('v_custom_doc_root');"><?=_('Custom document root');?></label>
+										<td class="input-label">
+											<div class="form-check">
+												<input class="form-check-input" type="checkbox" name="v_custom_doc_root_check" id="v_custom_doc_root_check" <?php if (!empty($v_custom_doc_root)) echo "checked=yes" ?> onclick="javascript:elementHideShow('v_custom_doc_root');">
+												<label for="v_custom_doc_root_check">
+													<?=_('Custom document root');?>
+												</label>
+											</div>
 										</td>
 									</tr>
 									<tr>
@@ -519,8 +574,13 @@
 									</tr>
 									<?php if (in_array($_SESSION['FTP_SYSTEM'], array('vsftpd', 'proftpd'))) { ?>
 										<tr>
-											<td class="vst-text input-label">
-												<label><input type="checkbox" size="20" class="vst-checkbox" name="v_ftp" <?php if (!empty($v_ftp_user)) echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_additional_ftp_accounts(this)"><?=_('Additional FTP Account');?></label>
+											<td class="input-label">
+												<div class="form-check">
+													<input class="form-check-input" type="checkbox" name="v_ftp" id="v_ftp" <?php if (!empty($v_ftp_user)) echo "checked=yes" ?> onclick="App.Actions.WEB.toggle_additional_ftp_accounts(this)">
+													<label for="v_ftp">
+														<?=_('Additional FTP Account');?>
+													</label>
+												</div>
 											</td>
 										</tr>
 										<tr>

Некоторые файлы не были показаны из-за большого количества измененных файлов