Refactor collapse components (hestiacp#4152)

* Rename .collapse component to .box-collapse

* Remove dead .js class

* Add new basic .collapse component

Author: AlecRust

web/css/src/themes/dark.css

@@ -355,10 +355,10 @@
 	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-/* Collapse component
+/* Box collapse component
 		========================================================================== */
 
-.collapse-header {
+.box-collapse-header {
 	background: #454545;
 	border-color: #505050;
 	text-shadow: 0 1px rgb(0 0 0 / 40%);
@@ -368,6 +368,13 @@
 	color: #fff;
 }
 
+/* Collapse component
+   ========================================================================== */
+
+.collapse-header {
+	border-bottom-color: #484848;
+}
+
 /* Units table
    ========================================================================== */
 
@@ -575,10 +582,6 @@
 	color: #a2a2a2;
 }
 
-.section-title {
-	border-bottom-color: #484848;
-}
-
 /* Buttons
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -1719,18 +1719,6 @@
 	font-size: 0.8rem;
 }
 
-.section-title {
-	display: flex;
-	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
    ========================================================================== */
 
@@ -2070,17 +2058,17 @@
 	border-radius: var(--border-radius-base);
 }
 
-/* Collapse component
+/* Box collapse component
    ========================================================================== */
 
-.collapse {
+.box-collapse {
 }
 
-.collapse[open] .collapse-header::after {
+.box-collapse[open] .box-collapse-header::after {
 	transform: rotate(180deg);
 }
 
-.collapse-header {
+.box-collapse-header {
 	background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
 	border: 1px solid #ddd;
 	text-shadow: 0 1px rgb(255 255 255 / 95%);
@@ -2117,7 +2105,7 @@
 	}
 }
 
-.collapse-content {
+.box-collapse-content {
 	box-sizing: border-box; /* Work around box-sizing not inheriting in <details> in many browsers */
 	padding: 20px 20px 10px;
 
@@ -2126,6 +2114,49 @@
 	}
 }
 
+/* Collapse component
+   ========================================================================== */
+
+.collapse {
+}
+
+.collapse[open] .collapse-header::after {
+	content: "\f146";
+}
+
+.collapse-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	cursor: pointer;
+	color: var(--color-text-heading);
+	font-size: 1.05rem;
+	font-weight: 600;
+	padding-top: 28px;
+	padding-bottom: 12px;
+	border-bottom: 1px solid #ccc;
+
+	&:hover {
+		&::after {
+			color: var(--icon-color-maroon);
+		}
+	}
+
+	&::after {
+		font: var(--fa-font-solid);
+		content: "\f0fe";
+		color: #ddd;
+		display: inline-block;
+		text-rendering: auto;
+		-webkit-font-smoothing: antialiased;
+	}
+}
+
+.collapse-content {
+	box-sizing: border-box; /* Work around box-sizing not inheriting in <details> in many browsers */
+	padding-top: 15px;
+}
+
 /* Login
    ========================================================================== */
 

web/css/src/themes/flat.css

@@ -105,10 +105,10 @@
 	}
 }
 
-/* Collapse component
+/* Box collapse component
    ========================================================================== */
 
-.collapse-header {
+.box-collapse-header {
 	background: #fafafa;
 	box-shadow: none;
 }

web/css/src/themes/vestia.css

@@ -388,10 +388,10 @@ h1 {
 	border-radius: 0;
 }
 
-/* Collapse component
+/* Box collapse component
    ========================================================================== */
 
-.collapse-header {
+.box-collapse-header {
 	background: #fafafa;
 	box-shadow: none;
 	color: #444;

web/templates/pages/add_dns.php

@@ -89,7 +89,7 @@
 						<?= _("Advanced Options") ?>
 					</button>
 				</div>
-				<div x-cloak  x-show="showAdvanced" id="advtable">
+				<div x-cloak x-show="showAdvanced" id="advtable">
 					<?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'; } ?>>