Refine :focus styles (#3432)

* Disable outline on form elements with their own :focus styles

* Apply some Prettier formatting

web/css/src/themes/default.css

@@ -547,7 +547,6 @@
 
 		&:focus {
 			border-right-color: #008fee;
-			outline-offset: 1px;
 		}
 	}
 
@@ -1459,6 +1458,7 @@
 	}
 
 	&:focus {
+		outline: 0;
 		border-color: #008fee;
 		background-color: #d7f9ff;
 		color: #333;
@@ -1518,6 +1518,7 @@
 	}
 
 	&:focus {
+		outline: 0;
 		border-color: #008fee;
 	}
 

web/templates/footer.php

@@ -85,11 +85,9 @@
 	endif;
 ?>
 
-<?php
-	if (($_SESSION['DEBUG_MODE']) == "true") {
-		require $_SERVER['HESTIA'] . '/web/templates/pages/debug_panel.php';
-	}
-?>
+<?php if ($_SESSION["DEBUG_MODE"] == "true") {
+	require $_SERVER["HESTIA"] . "/web/templates/pages/debug_panel.php";
+} ?>
 
 </body>
 </html>

web/templates/pages/add_dns.php

@@ -88,7 +88,7 @@
 					</button>
 				</div>
 				<div x-cloak  x-show="showAdvanced" id="advtable">
-					<?php if ($_SESSION['DNS_CLUSTER_SYSTEM'] == 'hestia-zone' && $_SESSION['SUPPORT_DNSSEC'] == 'yes'){?>
+					<?php if ($_SESSION["DNS_CLUSTER_SYSTEM"] == "hestia-zone" && $_SESSION["SUPPORT_DNSSEC"] == "yes") { ?>
 					<div class="form-check u-mb10">
 						<input class="form-check-input" type="checkbox" name="v_dnssec" id="v_dnssec" value="yes" <?php if($v_dnssec === 'yes'){ echo ' checked'; } ?>>
 						<label for="v_dnssec">

web/templates/pages/edit_dns.php

@@ -64,7 +64,7 @@
 					</select>
 				</div>
 			<?php } ?>
-			<?php if ($_SESSION['DNS_CLUSTER_SYSTEM'] == 'hestia-zone' && $_SESSION['SUPPORT_DNSSEC'] == 'yes'){?>
+			<?php if ($_SESSION["DNS_CLUSTER_SYSTEM"] == "hestia-zone" && $_SESSION["SUPPORT_DNSSEC"] == "yes") { ?>
 			<div class="form-check u-mb10">
 				<input class="form-check-input" type="checkbox" name="v_dnssec" id="v_dnssec" value="yes" <?php if($v_dnssec === 'yes'){ echo ' checked'; } ?>>
 				<label for="v_dnssec">

web/templates/pages/list_firewall_ipset.php

@@ -37,8 +37,7 @@
 	</div>
 
 	<!-- Begin firewall IP address list item loop -->
-	<?php
-	foreach ($data as $key => $value) {
+	<?php foreach ($data as $key => $value) {
  	$listname = $key; ?>
 		<div class="l-unit animate__animated animate__fadeIn">
 			<div class="l-unit__col l-unit__col--right">

web/templates/pages/list_rrd.php

@@ -23,8 +23,8 @@
 				<h2 class="u-mb20">
 					<?= _($data[$key]["TITLE"]) ?>
 				</h2>
-				<a href="/list/rrd/image.php?/rrd/<?=$data[$key]['TYPE']."/".$period."-".$data[$key]['RRD'].".png"?>" class="u-block" target="_blank">
-					<img class="u-image-fluid u-rounded" src="/list/rrd/image.php?/rrd/<?=$data[$key]['TYPE']."/".$period."-".$data[$key]['RRD'].".png"?>" alt="">
+				<a href="/list/rrd/image.php?/rrd/<?= $data[$key]["TYPE"] . "/" . $period . "-" . $data[$key]["RRD"] . ".png" ?>" class="u-block" target="_blank">
+					<img class="u-image-fluid u-rounded" src="/list/rrd/image.php?/rrd/<?= $data[$key]["TYPE"] . "/" . $period . "-" . $data[$key]["RRD"] . ".png" ?>" alt="">
 				</a>
 			</div>
 		<?php } ?>

web/templates/pages/list_services.php

@@ -137,11 +137,11 @@
 				sort-memory="<?=$data[$key]['MEM']?>" sort-cpu="<?=$cpu;?>" sort-uptime="<?=$data[$key]['RTIME']?>">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?=$i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="service[]" value="<?=$key?>">
+						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="service[]" value="<?= $key ?>">
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide-2">
-						<i class="fas <?=$state_icon;?> u-mr5"></i>
-						<b><a href="/edit/server/<? echo $edit_url ?>/" title="<?= _("edit") ?>: <?=$key?>"><?=$key?></a></b>
+						<i class="fas <?= $state_icon ?> u-mr5"></i>
+						<b><a href="/edit/server/<? echo $edit_url ?>/" title="<?= _("edit") ?>: <?= $key ?>"><?= $key ?></a></b>
 					</div>
 					<div class="clearfix l-unit__stat-col--left u-text-center compact-2">
 						<div class="actions-panel clearfix">
@@ -151,9 +151,9 @@
 							<div class="actions-panel__col actions-panel__stop shortcut-s" key-action="js">
 								<a
 									class="data-controls js-confirm-action"
-									href="/restart/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>"
+									href="/restart/service/?srv=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 									data-confirm-title="<?= _("Restart") ?>"
-									data-confirm-message="<?= sprintf(_('RESTART_CONFIRMATION'), $key) ?>"
+									data-confirm-message="<?= sprintf(_("RESTART_CONFIRMATION"), $key) ?>"
 								>
 									<i class="fas fa-arrow-rotate-left icon-highlight icon-dim"></i>
 								</a>

web/templates/pages/list_updates.php

@@ -57,7 +57,7 @@
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact center">
-						<input id="check<?=$i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="pkg[]" value="<?=$key?>">
+						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="pkg[]" value="<?= $key ?>">
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide"><b><?=$key?></b></div>
 					<div class="clearfix l-unit__stat-col--left wide-5"><?=_($data[$key]['DESCR'])?></div>

web/templates/pages/list_user.php

@@ -21,7 +21,7 @@
 					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
 				<form x-data x-bind="BulkEdit" action="/bulk/user/" method="post">
-					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+					<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 					<select class="form-select" name="action">
 						<option value=""><?= _("apply to selected") ?></option>
 						<option value="rebuild"><?= _("rebuild") ?></option>
@@ -99,7 +99,7 @@
 			sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>" sort-disk="<?=$data[$key]['U_DISK']?>">
 			<div class="l-unit__col l-unit__col--right" style="<?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($_SESSION['user'] !== 'admin') && ($key === 'admin')) { echo 'display: none';} else {echo 'display: table-cell';}?>">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?=$i?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="user[]" value="<?=$key?>">
+					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="user[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3 userlist-username">
 					<?php if ($key == $user_plain) { ?>
@@ -108,24 +108,24 @@
 						<b><a href="/login/?loginas=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("login as") ?> <?=$key?>"><?=$key?> <span style="font-weight: normal !important;">(<?=$data[$key]['NAME'];?>)</span></a></b>
 					<?php } ?>
 					<br>
-					<div class="userlist-email"><b><?= _("Email") ?>:</b> <?=$data[$key]['CONTACT']?></div>
+					<div class="userlist-email"><b><?= _("Email") ?>:</b> <?= $data[$key]["CONTACT"] ?></div>
 				</div>
 				<!-- START QUICK ACTION TOOLBAR AREA -->
 				<div class="clearfix l-unit__stat-col--left u-text-right compact-3">
 					<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
 						<div class="actions-panel clearfix">
 							<?php if ($key == $user_plain) { ?>
-								<i class="fas fa-user-check icon-dim" title="<?=$key?> (<?=$data[$key]['NAME']?>)"></i>
+								<i class="fas fa-user-check icon-dim" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
 							<?php } else { ?>
-								<a href="/login/?loginas=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("login as") ?> <?=$key?>"><i class="fas fa-right-to-bracket icon-green icon-dim"></i></a>
+								<a href="/login/?loginas=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("login as") ?> <?= $key ?>"><i class="fas fa-right-to-bracket icon-green icon-dim"></i></a>
 							<?php } ?>
-							<?php if (($_SESSION['userContext'] === 'admin') && ($key == 'admin') && ($_SESSION['user'] != 'admin')) { ?>
+							<?php if ($_SESSION["userContext"] === "admin" && $key == "admin" && $_SESSION["user"] != "admin") { ?>
 								<!-- Hide edit button from admin user when logged in with another admin user -->
 								&nbsp;
 							<?php } else { ?>
 								<div class="actions-panel__col actions-panel__edit shortcut-enter" key-action="href"><a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Editing User") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
 							<?php } ?>
-							<?php if ($key == 'admin') { ?>
+							<?php if ($key == "admin") { ?>
 								<!-- Hide suspend and delete buttons in the user list for primary 'admin' account -->
 							<?php } else { ?>
 								<?php if ($key == $user_plain) { ?>
@@ -134,7 +134,7 @@
 								<div class="actions-panel__col actions-panel__suspend shortcut-s" key-action="js">
 									<a
 										class="data-controls js-confirm-action"
-										href="/<?=$spnd_action?>/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>"
+										href="/<?= $spnd_action ?>/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 										data-confirm-title="<?= _($spnd_action) ?>"
 										data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
 									>
@@ -144,9 +144,9 @@
 								<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 									<a
 										class="data-controls js-confirm-action"
-										href="/delete/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>"
+										href="/delete/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 										data-confirm-title="<?= _("Delete") ?>"
-										data-confirm-message="<?= sprintf(_('DELETE_USER_CONFIRMATION'), $key) ?>"
+										data-confirm-message="<?= sprintf(_("DELETE_USER_CONFIRMATION"), $key) ?>"
 									>
 										<i class="fas fa-trash icon-red icon-dim"></i>
 									</a>