Harmonize topo background

src/styles/_common.scss

@@ -1,5 +1,6 @@
 @use "@styles/var";
 @use "@styles/color";
+@use "sass:color" as sass-color;
 
 /* Animations */
 
@@ -67,6 +68,21 @@
 		sans-serif;
 }
 
+@mixin topo-bg($gradient, $direction, $color, $pos1:0, $pos2:100%) {
+	@if $gradient != linear and $gradient != radial {
+		@error 'topo-bg gradient must be linear or radial.';
+	}
+
+	background: 
+		#{$gradient}-gradient(
+			$direction,
+			$color $pos1,
+			sass-color.adjust($color, $alpha: -0.3) $pos2
+		),
+		url(../images/logo_bg.webp)
+		85% 80% / 100%;
+}
+
 *:focus {
 	outline: 0px none transparent;
 }

src/styles/_page.project.panel.settings.scss

@@ -1,20 +1,13 @@
 @use "@styles/common";
 @use "@styles/var";
 @use "@styles/color";
-@use "sass:color" as sass-color;
 
 #settings {
 	#settings-panel {
 		gap: var.$block-spacing;
 
 		.settings-box {
-			background: color.$default-bg;
-			border-radius: var.$block-radius;
 			box-shadow: var.$map-shadow;
-
-			a.button:hover, button:hover {
-				background: color.$default-bg-light;
-			}
 		}
 
 		.settings-header {
@@ -23,14 +16,8 @@
 			align-items: center;
 			gap: var.$elem-spacing;
 			padding: var.$block-spacing;
-			background:
+			border-radius: var.$block-radius var.$block-radius;
-				radial-gradient(
+			@include common.topo-bg(radial, circle farthest-side at 50% 50%, color.$default-bg-light, 40%);
-					circle farthest-side at center bottom,
-					color.$default-bg-light 40%,
-					sass-color.adjust(color.$default-bg-light, $alpha: -0.3) 100%
-				),
-				url(../images/logo_bg.webp)
-				50% 50%;
 
 			img {
 				display: block;
@@ -59,28 +46,10 @@
 			}
 		}
 
-		.settings-footer {
-			flex: 0 1 auto;
-			display: flex;
-			justify-content: center;
-			font-size: 0.7em;
-			color: color.$default-inv;
-			text-shadow: var.$elem-shadow;
-
-			a {
-				color: color.$default-inv;
-				text-decoration: none;
-
-				&:hover {
-					color: color.$default-inv-hover;
-				}
-			}
-		}
 
 		.settings-sections {
 			flex: 1 1 auto;
 			overflow: auto;
-			border-radius: var.$block-radius;
 
 			#settings-sections-scrollbox {
 				height: 100%;
@@ -98,14 +67,16 @@
 				h1 {
 					margin: 0;
 					padding: var.$block-spacing;
-					border-radius: var.$block-radius var.$block-radius 0 0;
 					color: color.$title;
 					font-size: 1.75em;
-					background: color.$default-bg-light;
+					border-radius: var.$block-radius var.$block-radius 0 0;
+					@include common.topo-bg(linear, 0deg, color.$default-bg);
 				}
 
 				.settings-section-body {
 					padding: var.$block-spacing;
+					border-radius: 0 0 var.$block-radius var.$block-radius;
+					background: color.$default-bg;
 
 					.radio {
 						&:not(:first-child) {
@@ -178,6 +149,24 @@
 				}
 			}
 		}
+
+		.settings-footer {
+			flex: 0 1 auto;
+			display: flex;
+			justify-content: center;
+			font-size: 0.7em;
+			color: color.$default-inv;
+			text-shadow: var.$elem-shadow;
+
+			a {
+				color: color.$default-inv;
+				text-decoration: none;
+
+				&:hover {
+					color: color.$default-inv-hover;
+				}
+			}
+		}
 	}
 
 	#title {