Consistent overlay styles (#3617)

* Consistent overlay styles

* Fix missing gutter on stats page (mobile)

docs/.vitepress/theme/components/InstallOptions.vue

@@ -292,7 +292,7 @@ export default {
 	padding: 0;
 
 	&::backdrop {
-		background-color: rgb(0 0 0 / 60%);
+		background-color: rgb(0 0 0 / 50%);
 	}
 }
 .modal-close {

web/css/src/base.css

@@ -113,7 +113,7 @@ dialog {
 	padding: 0;
 
 	&::backdrop {
-		background-color: rgb(0 0 0 / 60%);
+		background-color: rgb(0 0 0 / 50%);
 	}
 }
 

web/css/src/themes/dark.css

@@ -819,7 +819,9 @@ strong {
    ========================================================================== */
 
 .spinner-overlay {
-	background-color: rgb(0 0 0 / 50%);
+	& .fas {
+		box-shadow: 0 8px 25px rgb(0 0 0 / 90%);
+	}
 }
 
 /* Badge component

web/css/src/themes/default.css

@@ -1437,6 +1437,13 @@
    ========================================================================== */
 
 .stats {
+	padding-left: 20px;
+	padding-right: 20px;
+
+	@media (--viewport-large) {
+		padding-left: 0;
+		padding-right: 0;
+	}
 }
 
 .stats-item {
@@ -2397,17 +2404,21 @@
 	justify-content: center;
 	align-items: center;
 	padding: 50px;
-	background-color: rgb(0 0 0 / 10%);
+	color: #fff;
+	background-color: rgb(0 0 0 / 50%);
 	font-size: 50px;
 	z-index: 4;
 	visibility: hidden;
 	opacity: 0;
-	transition: opacity 0.2s ease, visibility 0s 0.2s;
 
 	&.active {
 		visibility: visible;
 		opacity: 1;
-		transition: opacity 0.2s ease, visibility 0s 0s;
+	}
+
+	& .fas {
+		border-radius: 50%;
+		box-shadow: 0 8px 40px 0 rgb(0 0 0 / 35%);
 	}
 }
 

web/css/src/themes/flat.css

@@ -114,6 +114,15 @@ strong {
 	}
 }
 
+/* Spinner
+   ========================================================================== */
+
+.spinner-overlay {
+	& .fas {
+		box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+	}
+}
+
 /* Badge component
    ========================================================================== */
 

web/css/src/themes/vestia.css

@@ -261,6 +261,15 @@ strong {
 	}
 }
 
+/* Spinner
+   ========================================================================== */
+
+.spinner-overlay {
+	& .fas {
+		box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+	}
+}
+
 /* Buttons
    ========================================================================== */