UI tidy (#3893)

* Trim Flarum logo

* Fix sidebar increasing with content on Add/Edit Mail

* Tidy alerts spacing

* Improve how bg gradients with fallback is set

* Add some CSS vars for .top-bar

To demonstrate how I think this theming should be implemented.

web/css/src/themes/dark.css

@@ -7,14 +7,15 @@
 @import url("../media_queries");
 
 :root {
+	/* Colors */
 	--color-text: #cdcdcd;
 	--color-text-link: #4fabe9;
 	--color-text-link-hover: #ff3478;
 	--color-text-heading: #e8e8e8;
 	--color-background: #282828;
-	--alert-border-color: #212121;
 
 	/* Alerts */
+	--alert-border-color: #212121;
 	--alert-danger-color: #d13535;
 
 	/* Icons */
@@ -23,6 +24,11 @@
 	--icon-color-green: #37cf39;
 	--icon-color-blue: #0092f4;
 
+	/* Top Bar */
+	--top-bar-background: #454545;
+	--top-bar-box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
+	--top-bar-border-bottom: 1px solid #505050;
+
 	/* Charts */
 	--chart-label-color: #cdcdcd;
 	--chart-grid-color: #434343;
@@ -31,12 +37,6 @@
 /* Top bar
    ========================================================================== */
 
-.top-bar {
-	background: #454545;
-	border-bottom: 1px solid #505050;
-	box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
-}
-
 .top-bar-usage-inner {
 	color: #909090;
 }
@@ -86,7 +86,7 @@
 }
 
 .top-bar-menu-panel {
-	background-color: #454545;
+	background-color: var(--top-bar-background);
 }
 
 .top-bar-menu-link {
@@ -277,12 +277,12 @@
 		&.active {
 			color: #fff;
 			background: linear-gradient(
-				to bottom,
-				rgb(15 15 15 / 60%) 0%,
-				rgb(45 45 45 / 75%) 30%,
-				rgb(60 60 60 / 100%) 95%
-			);
-			background-color: #454545;
+					to bottom,
+					rgb(15 15 15 / 60%) 0%,
+					rgb(45 45 45 / 75%) 30%,
+					rgb(60 60 60 / 100%) 95%
+				),
+				#454545;
 			text-shadow: 0 1px rgb(0 0 0 / 80%);
 		}
 	}
@@ -577,13 +577,13 @@
 	text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
 	font-weight: 400;
 	border-color: #707070;
-	background: #303030;
 	background: linear-gradient(
-		0deg,
-		rgb(48 48 48 / 100%) 0%,
-		rgb(53 53 53 / 100%) 35%,
-		rgb(69 69 69 / 100%) 100%
-	);
+			0deg,
+			rgb(48 48 48 / 100%) 0%,
+			rgb(53 53 53 / 100%) 35%,
+			rgb(69 69 69 / 100%) 100%
+		),
+		#303030;
 	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%);
 
@@ -592,12 +592,12 @@
 		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;
+				0deg,
+				rgb(58 58 58 / 100%) 0%,
+				rgb(68 68 68 / 100%) 35%,
+				rgb(79 79 79 / 100%) 100%
+			),
+			#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%);
 	}
@@ -619,29 +619,29 @@
 
 .button-secondary {
 	border-color: #454545;
-	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%
-	);
-
-	&: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%
-		);
+		),
+		#343434;
+
+	&:hover {
+		background: linear-gradient(
+				0deg,
+				rgb(48 48 48 / 100%) 0%,
+				rgb(53 53 53 / 100%) 100%,
+				rgb(69 69 69 / 100%) 100%
+			),
+			#343434;
 	}
 }
 
 .button-danger {
 	&:hover {
-		background: rgb(133 0 0);
-		background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
+		background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%),
+			rgb(133 0 0);
 		color: #fff;
 		text-shadow: 0 1px rgb(0 0 0 / 45%);
 		border-color: rgb(170 0 0);
@@ -649,8 +649,8 @@
 
 	&:active,
 	&:focus {
-		background: rgb(133 0 0);
-		background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
+		background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%),
+			rgb(133 0 0);
 		color: #4d0000;
 		text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
 		border-color: rgb(251 71 51);
@@ -662,8 +662,7 @@
 
 .body-login,
 .body-reset {
-	background: #303030;
-	background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
+	background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%), #303030;
 }
 
 .login {

web/css/src/themes/default.css

@@ -12,12 +12,14 @@
 	--animate-duration: 300ms;
 	--font-family: "Exo", system-ui;
 	--font-family-monospace: "Inconsolata", "Lucida Console", "Monaco", monospace;
+	--border-radius-base: 4px;
+
+	/* Colors */
 	--color-text: #7c7c7c;
 	--color-text-link: #326b9b;
 	--color-text-link-hover: #c36;
 	--color-text-heading: #4b4b4b;
 	--color-background: #fff;
-	--border-radius-base: 4px;
 
 	/* Alerts */
 	--alert-border-color: #fff;
@@ -37,6 +39,17 @@
 	--icon-color-blue: #326b9b;
 	--icon-color-lightblue: #6eb6f0;
 
+	/* Top Bar */
+	--top-bar-background: linear-gradient(
+			to bottom,
+			rgb(104 145 196 / 100%) 0%,
+			rgb(69 114 181 / 100%) 50%,
+			rgb(65 90 149 / 100%) 100%
+		),
+		#5070a6;
+	--top-bar-box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
+	--top-bar-border-bottom: 1px solid #fff;
+
 	/* Charts */
 	--chart-label-color: #7c7c7c;
 	--chart-grid-color: #e9e9e9;
@@ -65,15 +78,9 @@
    ========================================================================== */
 
 .top-bar {
-	background: linear-gradient(
-		to bottom,
-		rgb(104 145 196 / 100%) 0%,
-		rgb(69 114 181 / 100%) 50%,
-		rgb(65 90 149 / 100%) 100%
-	);
-	background-color: #5070a6;
-	box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
-	border-bottom: 1px solid #fff;
+	background: var(--top-bar-background);
+	box-shadow: var(--top-bar-box-shadow);
+	border-bottom: var(--top-bar-border-bottom);
 	position: fixed;
 	display: flex;
 	width: 100%;
@@ -749,14 +756,14 @@
 		}
 
 		&.active {
-			background-color: #4f8bbc;
 			color: #4686b8;
 			background: linear-gradient(
-				to bottom,
-				rgb(255 255 255 / 60%) 0%,
-				rgb(255 255 255 / 75%) 50%,
-				rgb(255 255 255 / 95%) 95%
-			);
+					to bottom,
+					rgb(255 255 255 / 60%) 0%,
+					rgb(255 255 255 / 75%) 50%,
+					rgb(255 255 255 / 95%) 95%
+				),
+				#4f8bbc;
 			text-shadow: 0 1px rgb(255 255 255 / 80%);
 		}
 
@@ -1356,7 +1363,7 @@
 	.sidebar-right-grid {
 		display: grid;
 		gap: 50px;
-		grid-template-columns: 2fr 1.3fr;
+		grid-template-columns: 2fr 350px;
 	}
 
 	.sidebar-right-grid-content {
@@ -1805,13 +1812,13 @@
 	text-shadow: 0 1px 1px rgb(255 255 255 / 85%);
 	border: 1px solid #0083db;
 	border-radius: 3px;
-	background-color: #3b9de8;
 	background: linear-gradient(
-		to bottom,
-		rgb(235 243 249 / 100%) 0%,
-		rgb(192 216 236 / 100%) 51%,
-		rgb(223 235 245 / 100%) 100%
-	);
+			to bottom,
+			rgb(235 243 249 / 100%) 0%,
+			rgb(192 216 236 / 100%) 51%,
+			rgb(223 235 245 / 100%) 100%
+		),
+		#3b9de8;
 	box-shadow: 0 1px 3px rgb(0 0 0 / 25%), inset 0 0 1px #fff, inset 0 0 3px rgb(255 255 255 / 50%);
 
 	&:hover {
@@ -2076,8 +2083,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: rgb(102 158 231);
-	background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%);
+	background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%),
+		rgb(102 158 231);
 
 	& .debug-panel {
 		display: none;

web/css/src/themes/flat.css

@@ -10,16 +10,15 @@
 	/* Alerts */
 	--alert-box-shadow: none;
 	--alert-text-shadow: none;
+
+	/* Top Bar */
+	--top-bar-background: #5070a6;
+	--top-bar-box-shadow: none;
 }
 
 /* Top bar
    ========================================================================== */
 
-.top-bar {
-	box-shadow: none;
-	background: #5070a6;
-}
-
 .top-bar-usage-inner {
 	text-shadow: none;
 }

web/css/src/themes/vestia.css

@@ -9,12 +9,18 @@
 :root {
 	--animate-duration: 0s;
 	--font-family: "Arial", system-ui;
+
+	/* Colors */
 	--color-text-link: #444;
 	--color-text-link-hover: #ff791f;
 
 	/* Alerts */
 	--alert-box-shadow: none;
 	--alert-text-shadow: none;
+
+	/* Top Bar */
+	--top-bar-background: #5d5d5d;
+	--top-bar-box-shadow: none;
 }
 
 h1 {
@@ -24,11 +30,6 @@ h1 {
 /* Top bar
    ========================================================================== */
 
-.top-bar {
-	box-shadow: none;
-	background: #5d5d5d;
-}
-
 .top-bar-notifications-panel {
 	@media (--viewport-small) {
 		box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
@@ -166,13 +167,11 @@ h1 {
 		text-transform: uppercase;
 		text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
 		background: #a0c105;
-		background-color: #a0c105;
 
 		&:hover {
 			border-color: transparent;
 			color: #fff;
 			background: #a9cc06;
-			background-color: #a9cc06;
 			text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
 		}
 	}
@@ -263,7 +262,6 @@ h1 {
 	padding-top: 6px;
 	padding-bottom: 6px;
 	background: #a0c105;
-	background-color: #a0c105;
 	border-radius: 2px;
 	box-shadow: none;
 
@@ -271,7 +269,6 @@ h1 {
 		border-color: transparent;
 		color: #fff;
 		background: #a9cc06;
-		background-color: #a9cc06;
 		text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
 		transition: none;
 		box-shadow: none;
@@ -281,7 +278,6 @@ h1 {
 		border-color: transparent;
 		color: #fff;
 		background: #809c00;
-		background-color: #809c00;
 		text-shadow: 0 0 2px rgb(0 0 0 / 20%);
 		box-shadow: none;
 	}

web/templates/pages/edit_mail.php

@@ -106,13 +106,11 @@
 						<?= _("Use Let's Encrypt to obtain SSL certificate") ?>
 					</label>
 				</div>
-				<div id="le-warning" class="u-mb20">
-					<div class="alert alert-info" role="alert">
-						<i class="fas fa-exclamation"></i>
-						<div>
-							<p><?php echo $v_webmail_alias; ?></p>
-							<p><?= sprintf(_("To enable Let's Encrypt SSL, ensure that DNS records exist for mail.%s and %s!"), $v_domain, $v_webmail_alias) ?></p>
-						</div>
+				<div class="alert alert-info u-mb20" role="alert">
+					<i class="fas fa-exclamation"></i>
+					<div>
+						<p><?php echo $v_webmail_alias; ?></p>
+						<p><?= sprintf(_("To enable Let's Encrypt SSL, ensure that DNS records exist for mail.%s and %s!"), $v_domain, $v_webmail_alias) ?></p>
 					</div>
 				</div>
 				<div x-cloak x-show="!letsEncryptEnabled">

web/templates/pages/edit_web.php

@@ -58,11 +58,9 @@
 				<textarea class="form-control" name="v_aliases" id="v_aliases"><?= htmlentities(trim($v_aliases, "'")) ?></textarea>
 			</div>
 			<?php if ($v_letsencrypt == "yes" || $v_letsencrypt == "on") { ?>
-				<div class="u-mb10">
-					<div class="alert alert-info" role="alert">
-						<i class="fas fa-exclamation"></i>
-						<p><?= _("If the aliases changes, Let's Encrypt will obtain a new SSL certificate.") ?></p>
-					</div>
+				<div class="alert alert-info u-mb10" role="alert">
+					<i class="fas fa-exclamation"></i>
+					<p><?= _("If the aliases changes, Let's Encrypt will obtain a new SSL certificate.") ?></p>
 				</div>
 			<?php } ?>
 			<div class="u-mb20">

web/templates/pages/setup_webapp.php

@@ -27,7 +27,7 @@
 				<h1 class="u-mb20"><?= sprintf(_("Install %s"), $WebappInstaller->info()["name"]) ?></h1>
 				<?php show_alert_message($_SESSION); ?>
 				<?php if (!$WebappInstaller->isDomainRootClean()) { ?>
-					<div class="alert alert-info" role="alert">
+					<div class="alert alert-info u-mb10" role="alert">
 						<i class="fas fa-info"></i>
 						<div>
 							<p class="u-mb10"><?= _("Data Loss Warning!") ?></p>