Some refactoring (#3141)

* Refactor non-default theme loading

* Tidy some CSS

* Refactor CSS for links in forms

web/css/src/themes/dark.css

@@ -204,20 +204,6 @@ strong {
 	}
 }
 
-/* Cards
-   ========================================================================== */
-
-.card {
-	background-color: #454545;
-	border-color: #606060;
-	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
-}
-
-.card-content {
-	color: #fafafa;
-	text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
-}
-
 /* Toolbar
    ========================================================================== */
 
@@ -345,6 +331,20 @@ strong {
 	}
 }
 
+/* Cards
+   ========================================================================== */
+
+.card {
+	background-color: #454545;
+	border-color: #606060;
+	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
+}
+
+.card-content {
+	color: #fafafa;
+	text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
+}
+
 .l-unit {
 	color: #dadada;
 }
@@ -546,33 +546,37 @@ strong {
 	}
 }
 
-.generate {
-	color: #29a9ff;
-	border-radius: 4px;
+.form-link {
+	color: #09f;
 
 	&:hover {
-		background-color: #ff3478;
-		border-color: #ff3478;
+		background-color: #3b9de8;
 	}
 
 	&:active {
-		background-color: #be1f54;
-		border-color: #be1f54;
+		background-color: #54a6e5;
 	}
 }
 
-textarea::placeholder {
-	color: #bbb;
-}
+.form-link-danger {
+	&:hover {
+		background-color: #ff3478;
+	}
 
-textarea:focus::placeholder {
-	color: #909090;
+	&:active {
+		background-color: #be1f54;
+	}
 }
 
 .hint {
 	color: #a2a2a2;
 }
 
+.section-title {
+	color: #d4d4d4;
+	border-bottom-color: #484848;
+}
+
 /* Buttons
    ========================================================================== */
 
@@ -590,37 +594,37 @@ textarea:focus::placeholder {
 	);
 	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px rgb(20 20 20 / 100%),
 		inset 0 0 3px rgb(0 0 0 / 50%);
-}
 
-.button:hover {
-	color: #fff;
-	text-shadow: 1px 1px rgb(0 0 0 / 25%);
-	border-color: #0098ff;
-	background: linear-gradient(
-		0deg,
-		rgb(58 58 58 / 100%) 0%,
-		rgb(68 68 68 / 100%) 35%,
-		rgb(79 79 79 / 100%) 100%
-	);
-	background-color: #454545;
-	box-shadow: 0 1px 3px rgb(0 0 0 / 35%), inset 0 0 1px rgb(0 0 0 / 100%),
-		inset 0 0 3px rgb(0 0 0 / 65%);
-	transition: 0.2s;
-}
+	&:hover {
+		color: #fff;
+		text-shadow: 1px 1px rgb(0 0 0 / 25%);
+		border-color: #0098ff;
+		background: linear-gradient(
+			0deg,
+			rgb(58 58 58 / 100%) 0%,
+			rgb(68 68 68 / 100%) 35%,
+			rgb(79 79 79 / 100%) 100%
+		);
+		background-color: #454545;
+		box-shadow: 0 1px 3px rgb(0 0 0 / 35%), inset 0 0 1px rgb(0 0 0 / 100%),
+			inset 0 0 3px rgb(0 0 0 / 65%);
+		transition: 0.2s;
+	}
 
-.button:active,
-.button:focus {
-	color: #d4d4d4;
-	text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
-	border-color: #0066b4;
-	background: linear-gradient(
-		0deg,
-		rgb(69 69 69 / 100%) 0%,
-		rgb(53 53 53 / 100%) 35%,
-		rgb(48 48 48 / 100%) 100%
-	);
-	box-shadow: 0 1px 3px rgb(0 0 0 / 30%), inset 0 0 1px rgb(0 0 0 / 100%),
-		inset -1px -1px 4px rgb(30 30 30 / 40%);
+	&:active,
+	&:focus {
+		color: #d4d4d4;
+		text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
+		border-color: #0066b4;
+		background: linear-gradient(
+			0deg,
+			rgb(69 69 69 / 100%) 0%,
+			rgb(53 53 53 / 100%) 35%,
+			rgb(48 48 48 / 100%) 100%
+		);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 30%), inset 0 0 1px rgb(0 0 0 / 100%),
+			inset -1px -1px 4px rgb(30 30 30 / 40%);
+	}
 }
 
 .button-secondary {
@@ -632,64 +636,39 @@ textarea:focus::placeholder {
 		rgb(53 53 53 / 100%) 100%,
 		rgb(69 69 69 / 100%) 100%
 	);
-}
 
-.button-secondary:hover {
-	background-color: #343434;
-	background: linear-gradient(
-		0deg,
-		rgb(48 48 48 / 100%) 0%,
-		rgb(53 53 53 / 100%) 100%,
-		rgb(69 69 69 / 100%) 100%
-	);
-}
-
-.button-danger:hover {
-	background: rgb(133 0 0);
-	background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
-	color: #fff;
-	text-shadow: 0 1px rgb(0 0 0 / 45%);
-	border-color: rgb(170 0 0);
-}
-
-.button-danger:active,
-.button-danger:focus {
-	background: rgb(133 0 0);
-	background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
-	color: #4d0000;
-	text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
-	border-color: rgb(251 71 51);
-}
-
-.ui-dialog button.cancel span {
-	color: #fff !important;
-}
-
-.additional-control {
-	color: #09f;
-}
-
-.additional-control:hover {
-	background-color: #ff3478;
-	border-color: #ff3478;
-}
-
-.additional-control:active {
-}
-
-.additional-control.delete:hover,
-.additional-control.delete:active,
-.additional-control.add:hover {
+	&:hover {
+		background-color: #343434;
+		background: linear-gradient(
+			0deg,
+			rgb(48 48 48 / 100%) 0%,
+			rgb(53 53 53 / 100%) 100%,
+			rgb(69 69 69 / 100%) 100%
+		);
+	}
 }
 
-.additional-control.add:active {
-}
+.button-danger {
+	&:hover {
+		background: rgb(133 0 0);
+		background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
+		color: #fff;
+		text-shadow: 0 1px rgb(0 0 0 / 45%);
+		border-color: rgb(170 0 0);
+	}
 
-.unlim-trigger {
+	&:active,
+	&:focus {
+		background: rgb(133 0 0);
+		background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
+		color: #4d0000;
+		text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
+		border-color: rgb(251 71 51);
+	}
 }
 
-.optional {
-}
+/* Login
+   ========================================================================== */
 
 .body-login,
 .body-reset {
@@ -697,9 +676,6 @@ textarea:focus::placeholder {
 	background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
 }
 
-/* Login
-   ========================================================================== */
-
 .login {
 	& .error {
 		color: #f864fa;
@@ -719,7 +695,7 @@ textarea:focus::placeholder {
 	color: #fff;
 }
 
-.login-label-link {
+.login-form-link {
 	color: #eee;
 	text-transform: initial;
 	font-weight: 400;
@@ -729,11 +705,6 @@ textarea:focus::placeholder {
 	}
 }
 
-.section-title {
-	color: #d4d4d4;
-	border-bottom-color: #484848;
-}
-
 .qr-code {
 	border: 1px solid #3b3b3b;
 	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);

web/css/src/themes/default.css

@@ -1815,22 +1815,34 @@
 	border-color: #cfcfcf;
 }
 
-.generate {
+.form-link {
 	color: #326b9b;
-	text-decoration: underline;
 	cursor: pointer;
+	text-decoration: underline;
+	font-weight: 600;
+	border-radius: 4px;
 	margin-left: -3px;
-	padding: 0 3px;
+	padding-left: 3px;
+	padding-right: 3px;
 
 	&:hover {
-		background-color: #c36;
-		border-color: #c36;
+		text-decoration: none;
 		color: #fff;
+		background-color: #3b9de8;
+	}
+
+	&:active {
+		background-color: #54a6e5;
+	}
+}
+
+.form-link-danger {
+	&:hover {
+		background-color: #c36;
 	}
 
 	&:active {
 		background-color: #f7d616;
-		border-color: #f7d616;
 	}
 }
 
@@ -1877,6 +1889,21 @@
 	}
 }
 
+.unlim-trigger {
+	cursor: pointer;
+	position: absolute;
+	top: 13px;
+	right: 12px;
+	z-index: 1;
+	font-size: 0.8rem;
+}
+
+.optional {
+	font-size: 0.8rem;
+	margin-left: 6px;
+	font-weight: normal;
+}
+
 .hint {
 	color: #777;
 	font-size: 0.8rem;
@@ -1889,6 +1916,19 @@
 	font-size: 0.8rem;
 }
 
+.section-title {
+	display: flex;
+	color: #4b4b4b;
+	cursor: pointer;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 1.05rem;
+	font-weight: 600;
+	padding-top: 28px;
+	padding-bottom: 12px;
+	border-bottom: 1px solid #ccc;
+}
+
 /* Modals
    ========================================================================== */
 
@@ -2128,53 +2168,6 @@
 	right: 110px;
 }
 
-.additional-control {
-	color: #326b9b;
-	border-bottom: 0 solid #326b9b;
-	font-size: 0.8rem;
-	cursor: pointer;
-	text-transform: uppercase;
-	font-weight: 600;
-	padding: 2px 2px 0;
-	text-decoration: none;
-
-	&:hover {
-		background-color: #c36;
-		border-color: #c36;
-		color: #fff;
-	}
-
-	&:active {
-		color: #fff;
-		background-color: #aaa;
-	}
-}
-
-.additional-control.add:hover {
-	background-color: #3b9de8;
-	border-color: #3b9de8;
-}
-
-.additional-control.add:active {
-	background-color: #54a6e5;
-	border-color: #54a6e5;
-}
-
-.unlim-trigger {
-	cursor: pointer;
-	position: absolute;
-	top: 13px;
-	right: 12px;
-	z-index: 1;
-	font-size: 0.8rem;
-}
-
-.optional {
-	font-size: 0.8rem;
-	margin-left: 6px;
-	font-weight: normal;
-}
-
 /* Values List component
    ========================================================================== */
 
@@ -2349,7 +2342,7 @@
 	}
 }
 
-.login-label-link {
+.login-form-link {
 	color: #fff;
 	text-transform: uppercase;
 
@@ -2362,19 +2355,6 @@
 	}
 }
 
-.section-title {
-	display: flex;
-	color: #4b4b4b;
-	cursor: pointer;
-	justify-content: space-between;
-	align-items: center;
-	font-size: 1.05rem;
-	font-weight: 600;
-	padding-top: 28px;
-	padding-bottom: 12px;
-	border-bottom: 1px solid #ccc;
-}
-
 .qr-code {
 	border: 1px solid #cfcfcf;
 	border-radius: 4px;

web/css/src/themes/vestia.css

@@ -449,7 +449,7 @@ li[aria-expanded="true"] a {
 	color: #4b4b4b;
 }
 
-.login-label-link {
+.login-form-link {
 	color: #326b9b;
 }
 

web/js/pages/add_dns.js

@@ -1,5 +1,5 @@
 $(document).ready(function () {
-	$('.js-add-ns-button').click(function () {
+	$('.js-add-ns').click(function () {
 		var n = $('input[name^=v_ns]').length;
 		if (n < 8) {
 			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);

web/js/pages/add_package.js

@@ -65,7 +65,7 @@ $('form[name="v_add_package"]').on('submit', function (evt) {
 });
 
 $(document).ready(function () {
-	$('.js-add-ns-button').click(function () {
+	$('.js-add-ns').click(function () {
 		var n = $('input[name^=v_ns]').length;
 		if (n < 8) {
 			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);

web/js/pages/edit_package.js

@@ -65,7 +65,7 @@ $('form[name="v_edit_package"]').on('submit', function (evt) {
 });
 
 $(document).ready(function () {
-	$('.js-add-ns-button').click(function () {
+	$('.js-add-ns').click(function () {
 		var n = $('input[name^=v_ns]').length;
 		if (n < 8) {
 			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);

web/js/pages/edit_user.js

@@ -35,7 +35,7 @@ App.Listeners.WEB.keypress_v_password = () => {
 App.Listeners.WEB.keypress_v_password();
 
 (function () {
-	$('.js-add-ns-button').click(function () {
+	$('.js-add-ns').click(function () {
 		var n = $('input[name^=v_ns]').length;
 		if (n < 8) {
 			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);

web/templates/includes/css.php

@@ -1,25 +1,25 @@
 <link rel="alternate icon" href="/images/favicon.png" type="image/png">
 <link rel="icon" href="/images/logo.svg" type="image/svg+xml">
-<link rel="stylesheet" href="/css/themes/default.min.css?<?=JS_LATEST_UPDATE?>">
+<link rel="stylesheet" href="/css/themes/default.min.css?<?= JS_LATEST_UPDATE ?>">
+
 <?php
-		$selected_theme = (!empty($_SESSION['userTheme'])) ? $_SESSION['userTheme'] : $_SESSION['THEME'];
-// Load custom theme
-		if ($selected_theme !== 'default') {
-// Load HestiaCP-shipped themes (minified, updated/overwritten with updates) - ($HESTIA/web/css/themes/*.min.css)
-				if (file_exists($_SERVER['HESTIA'] . '/web/css/themes/' . $selected_theme . '.min.css')) {
-?>
-<link rel="stylesheet" href="/css/themes/<?=$selected_theme?>.min.css?<?=JS_LATEST_UPDATE?>">
-<?php
-				}
-// Load custom theme files ($HESTIA/web/css/themes/custom/*.css)
-				elseif (file_exists($_SERVER['HESTIA'] . '/web/css/themes/custom/' . $selected_theme . '.min.css')) {
-?>
-<link rel="stylesheet" href="/css/themes/custom/<?=$selected_theme?>.min.css?<?=JS_LATEST_UPDATE?>">
-<?php
-				}else{
-				?>
-<link rel="stylesheet" href="/css/themes/custom/<?=$selected_theme?>.css?<?=JS_LATEST_UPDATE?>>">
-				<?php
-				}
+$selected_theme = !empty($_SESSION["userTheme"]) ? $_SESSION["userTheme"] : $_SESSION["THEME"];
+// Load non-default theme
+if ($selected_theme !== "default") {
+	// Load HestiaCP-shipped themes (minified, updated/overwritten with updates) - ($HESTIA/web/css/themes/*.min.css)
+	$non_default_theme_path = $_SERVER["HESTIA"] . "/web/css/themes/" . $selected_theme . ".min.css";
+	if (file_exists($non_default_theme_path)) {
+		echo '<link rel="stylesheet" href="/css/themes/' . $selected_theme . ".min.css?" . JS_LATEST_UPDATE . '">';
+	}
+	// Load custom theme files ($HESTIA/web/css/themes/custom/*.css)
+	else {
+		$custom_theme_path = $_SERVER["HESTIA"] . "/web/css/themes/custom/" . $selected_theme . ".min.css";
+		if (file_exists($custom_theme_path)) {
+			echo '<link rel="stylesheet" href="/css/themes/custom/' . $selected_theme . ".min.css?" . JS_LATEST_UPDATE . '">';
+		} else {
+			echo '<link rel="stylesheet" href="/css/themes/custom/' . $selected_theme . ".css?" . JS_LATEST_UPDATE . '">';
 		}
+	}
+}
+
 ?>

web/templates/pages/add_dns.php

@@ -113,42 +113,42 @@
 						if($v_ns3) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-								<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+								<span class="form-link form-link-danger u-ml10 js-remove-ns">'._('delete').'</span>
 							</div>';
 						}
 						if($v_ns4) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-								<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+								<span class="form-link form-link-danger u-ml10 js-remove-ns">'._('delete').'</span>
 							</div>';
 						}
 						if($v_ns5) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-								<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+								<span class="form-link form-link-danger u-ml10 js-remove-ns">'._('delete').'</span>
 							</div>';
 						}
 						if($v_ns6) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-								<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+								<span class="form-link form-link-danger u-ml10 js-remove-ns">'._('delete').'</span>
 							</div>';
 						}
 						if($v_ns7) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-								<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+								<span class="form-link form-link-danger u-ml10 js-remove-ns">'._('delete').'</span>
 							</div>';
 						}
 						if($v_ns8) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-								<span class="js-remove-ns additional-control delete u-ml10">'._('delete').'</span>
+								<span class="form-link form-link-danger u-ml10 js-remove-ns">'._('delete').'</span>
 							</div>';
 						}
 					?>
 					<div class="u-pt18 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
-						<span class="js-add-ns-button additional-control add"><?= _("Add one more Name Server") ?></span>
+						<span class="form-link js-add-ns"><?= _("Add one more Name Server") ?></span>
 					</div>
 				</div>
 			<?php } ?>

web/templates/pages/add_package.php

@@ -191,42 +191,42 @@
 						if($v_ns3) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns4) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns5) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns6) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns7) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns8) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 					?>
 					<div class="u-pt18 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
-						<span class="js-add-ns-button additional-control add"><?= _("Add one more Name Server") ?></span>
+						<span class="form-link js-add-ns"><?= _("Add one more Name Server") ?></span>
 					</div>
 				<?php } ?>
 			</div>

web/templates/pages/edit_mail.php

@@ -119,7 +119,7 @@
 					<div class="u-mb10">
 						<label for="v_ssl_crt" class="form-label">
 							<?= _("SSL Certificate") ?>
-							<span x-cloak x-show="!letsEncryptEnabled" id="generate-csr" > / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?= htmlentities($v_domain) ?>"><?= _("Generate CSR") ?></a></span>
+							<span x-cloak x-show="!letsEncryptEnabled" id="generate-csr" > / <a class="form-link" target="_blank" href="/generate/ssl/?domain=<?= htmlentities($v_domain) ?>"><?= _("Generate CSR") ?></a></span>
 						</label>
 						<textarea x-bind:disabled="!letsEncryptEnabled" class="form-control u-min-height100 u-console" name="v_ssl_crt" id="v_ssl_crt"><?= htmlentities(trim($v_ssl_crt, "'")) ?></textarea>
 					</div>

web/templates/pages/edit_package.php

@@ -195,42 +195,42 @@
 						if($v_ns3) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns4) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns5) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns6) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns7) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 						if($v_ns8) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-								<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 							</div>';
 						}
 					?>
 					<div class="u-pt18 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
-						<span class="js-add-ns-button additional-control add"><?= _("Add one more Name Server") ?></span>
+						<span class="form-link js-add-ns"><?= _("Add one more Name Server") ?></span>
 					</div>
 				<?php } ?>
 			</div>

web/templates/pages/edit_server.php

@@ -569,7 +569,7 @@
 					<div class="u-mb20">
 						<label for="v_ssl_crt" class="form-label">
 							<?= _("SSL Certificate") ?>
-							<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?= htmlentities(trim($v_hostname, '"')) ?>"><?= _("Generate CSR") ?></a></span>
+							<span id="generate-csr"> / <a class="form-link" target="_blank" href="/generate/ssl/?domain=<?= htmlentities(trim($v_hostname, '"')) ?>"><?= _("Generate CSR") ?></a></span>
 						</label>
 						<textarea class="form-control u-min-height100 u-console" name="v_ssl_crt" id="v_ssl_crt"><?= htmlentities(trim($v_ssl_crt, "'")) ?></textarea>
 					</div>

web/templates/pages/edit_user.php

@@ -268,42 +268,42 @@
 							if($v_ns3) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-									<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 								</div>';
 							}
 							if($v_ns4) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-									<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 								</div>';
 							}
 							if($v_ns5) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-									<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 								</div>';
 							}
 							if($v_ns6) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-									<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 								</div>';
 							}
 							if($v_ns7) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-									<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 								</div>';
 							}
 							if($v_ns8) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-									<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 								</div>';
 							}
 						?>
 						<div class="u-pt18 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
-							<span class="js-add-ns-button additional-control add"><?= _("Add one more Name Server") ?></span>
+							<span class="form-link js-add-ns"><?= _("Add one more Name Server") ?></span>
 						</div>
 					<?php } ?>
 				</div>

web/templates/pages/edit_web.php

@@ -110,7 +110,7 @@
 						</div>
 						<div class="u-mb20">
 							<label for="v_password" class="form-label">
-								<?= _("Password") ?> / <a href="javascript:WEBrandom();" class="generate"><?= _("generate") ?></a>
+								<?= _("Password") ?> / <a href="javascript:WEBrandom();" class="form-link"><?= _("generate") ?></a>
 							</label>
 							<div class="u-pos-relative">
 								<input type="text" class="form-control js-password-input" name="v_stats_password" id="v_password" value="<?= trim($v_stats_password, "'") ?>">
@@ -191,7 +191,7 @@
 					<div class="u-mb10">
 						<label for="ssl_crt" class="form-label">
 							<?= _("SSL Certificate") ?>
-							<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?= htmlentities($v_domain) ?>"><?= _("Generate CSR") ?></a></span>
+							<span id="generate-csr"> / <a class="form-link" target="_blank" href="/generate/ssl/?domain=<?= htmlentities($v_domain) ?>"><?= _("Generate CSR") ?></a></span>
 						</label>
 						<textarea class="form-control u-min-height100 u-console" name="v_ssl_crt" id="ssl_crt"><?= htmlentities(trim($v_ssl_crt, "'")) ?></textarea>
 					</div>
@@ -239,7 +239,7 @@
 							<span class="values-list-value"><?= $v_ssl_issuer ?></span>
 						</li>
 						<p x-cloak x-show="letsEncryptEnabled" id="letsinfo">
-							<a x-on:click="showCertificates = !showCertificates" href="#" class="generate"><?= _("Show Certificate") ?></a>
+							<a x-on:click="showCertificates = !showCertificates" href="#" class="form-link"><?= _("Show Certificate") ?></a>
 						</p>
 					</ul>
 				<?php } ?>
@@ -387,7 +387,8 @@
 						?>
 						<div class="js-ftp-account js-ftp-account-nrm" name="v_add_domain_ftp" style="display:<?php if (empty($v_ftp_user)) { echo 'none';} else {echo 'block';}?> ;">
 							<div class="u-mb10">
-								<?= _("FTP") ?> #<span class="ftp-user-number"><?=$i + 1; ?></span> <a class="additional-control delete" onclick="App.Actions.WEB.remove_ftp_user(this)"><?= _("delete") ?></a>
+								<?= _("FTP") ?> #<span class="ftp-user-number"><?=$i + 1; ?></span>
+								<a class="form-link form-link-danger" href="#" onclick="App.Actions.WEB.remove_ftp_user(this)"><?= _("delete") ?></a>
 								<input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[<?=$i ?>][delete]" value="0">
 								<input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[<?=$i ?>][is_new]" value="<?=htmlentities($ftp_user['is_new']) ?>">
 							</div>
@@ -403,7 +404,7 @@
 							</div>
 							<div class="u-pl30 u-mb10">
 								<label for="v_ftp_user[<?=$i ?>][v_ftp_password]" class="form-label">
-									<?= _("Password") ?> / <a href="javascript:void(0);" onclick="FTPrandom(this)" ; class="generate"><?= _("generate") ?></a>
+									<?= _("Password") ?> / <a href="javascript:void(0);" onclick="FTPrandom(this)" ; class="form-link"><?= _("generate") ?></a>
 								</label>
 								<input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[<?=$i ?>][v_ftp_password]" id="v_ftp_user[<?=$i ?>][v_ftp_password]" value="<?=htmlentities(trim($v_ftp_password, "'"))?>">
 							</div>
@@ -426,7 +427,7 @@
 
 					<div class="js-add-new-ftp-user-button" style="<?=!empty($v_ftp_user) ? '' : 'display:none;' ?>">
 						<div class="u-pt18 v-add-new-user">
-							<a class="additional-control add" onclick="App.Actions.WEB.add_ftp_user_form()"><?= _("Add one more FTP Account") ?></a>
+							<a class="form-link" onclick="App.Actions.WEB.add_ftp_user_form()"><?= _("Add one more FTP Account") ?></a>
 						</div>
 					</div>
 				<?php } ?>
@@ -440,7 +441,8 @@
 <div id="templates" class="u-hidden">
 	<div class="js-ftp-account js-ftp-account-nrm" name="v_add_domain_ftp">
 		<div class="u-mb10">
-			<?= _("FTP") ?> #<span class="ftp-user-number"></span> <a class="additional-control delete" onclick="App.Actions.WEB.remove_ftp_user(this)"><?= _("delete") ?></a>
+			<?= _("FTP") ?> #<span class="ftp-user-number"></span>
+			<a class="form-link form-link-danger" 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">
 		</div>
@@ -454,7 +456,7 @@
 		</div>
 		<div class="u-pl30 u-mb10">
 			<label for="v_ftp_user[%INDEX%][v_ftp_password]" class="form-label">
-				<?= _("Password") ?> / <a href="javascript:void(0);" onclick="FTPrandom(this)" ; class="generate"><?= _("generate") ?></a>
+				<?= _("Password") ?> / <a href="javascript:void(0);" onclick="FTPrandom(this)" ; class="form-link"><?= _("generate") ?></a>
 			</label>
 			<input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[%INDEX%][v_ftp_password]" id="v_ftp_user[%INDEX%][v_ftp_password]">
 		</div>

web/templates/pages/login/login_1.php

@@ -13,7 +13,7 @@
 			<label for="password" class="form-label u-side-by-side">
 				<?= _("Password") ?>
 				<?php if ($_SESSION["POLICY_SYSTEM_PASSWORD_RESET"] !== "no") { ?>
-					<a class="login-label-link" href="/reset/">
+					<a class="login-form-link" href="/reset/">
 						<?= _("forgot password") ?>
 					</a>
 				<?php } ?>

web/templates/pages/login/login_2.php

@@ -12,7 +12,7 @@
 		<div class="u-mb20">
 			<label for="twofa" class="form-label u-side-by-side">
 				<?= _("2FA Token") ?>
-				<a class="login-label-link" href="/reset2fa/">
+				<a class="login-form-link" href="/reset2fa/">
 					<?= _("Forgot token") ?>
 				</a>
 			</label>

web/templates/pages/login/login_a.php

@@ -17,7 +17,7 @@
 			<label for="password" class="form-label u-side-by-side">
 				<?= _("Password") ?>
 				<?php if ($_SESSION["POLICY_SYSTEM_PASSWORD_RESET"] !== "no") { ?>
-					<a class="login-label-link" href="/reset/">
+					<a class="login-form-link" href="/reset/">
 						<?= _("forgot password") ?>
 					</a>
 				<?php } ?>

web/templates/pages/setup_webapp.php

@@ -70,7 +70,7 @@
 							<?php if($f_type != 'boolean'): ?>
 								<label for="<?=$f_name?>" class="form-label">
 									<?=$f_label?>
-									<?php if ($f_type === 'password'):?> / <a href="javascript:applyRandomStringToTarget('<?=$f_name?>');" class="generate"><?= _("generate") ?></a> <?php endif?>
+									<?php if ($f_type === 'password'):?> / <a href="javascript:applyRandomStringToTarget('<?=$f_name?>');" class="form-link"><?= _("generate") ?></a> <?php endif?>
 								</label>
 							<?php endif; ?>
 							<?php if (in_array($f_type, ['select']) && count($form_control['options']) ):?>