Consistent overlay styles (hestiacp#3617)

AlecRust · web-flow · commit 67572882978d · 2023-05-23T10:06:52.000+02:00
* Consistent overlay styles

* Fix missing gutter on stats page (mobile)
diff --git a/docs/.vitepress/theme/components/InstallOptions.vue b/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 {
diff --git a/web/css/src/base.css b/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%);
 	}
 }
 
diff --git a/web/css/src/themes/dark.css b/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
diff --git a/web/css/src/themes/default.css b/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%);
 	}
 }
 
diff --git a/web/css/src/themes/flat.css b/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
    ========================================================================== */
 
diff --git a/web/css/src/themes/vestia.css b/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
    ========================================================================== */
 

Original file line number	Diff line number	Diff line change
`@@ -292,7 +292,7 @@ export default {`
`292`	`292`	`padding: 0;`
`293`	`293`
`294`	`294`	`&::backdrop {`
`295`		`- background-color: rgb(0 0 0 / 60%);`
	`295`	`+ background-color: rgb(0 0 0 / 50%);`
`296`	`296`	`}`
`297`	`297`	`}`
`298`	`298`	`.modal-close {`
Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ dialog {`
`113`	`113`	`padding: 0;`
`114`	`114`
`115`	`115`	`&::backdrop {`
`116`		`- background-color: rgb(0 0 0 / 60%);`
	`116`	`+ background-color: rgb(0 0 0 / 50%);`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`
Original file line number	Diff line number	Diff line change
`@@ -819,7 +819,9 @@ strong {`
`819`	`819`	`========================================================================== */`
`820`	`820`
`821`	`821`	`.spinner-overlay {`
`822`		`- background-color: rgb(0 0 0 / 50%);`
	`822`	`+ & .fas {`
	`823`	`+ box-shadow: 0 8px 25px rgb(0 0 0 / 90%);`
	`824`	`+ }`
`823`	`825`	`}`
`824`	`826`
`825`	`827`	`/* Badge component`
Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,15 @@ strong {`
`114`	`114`	`}`
`115`	`115`	`}`
`116`	`116`
	`117`	`+/* Spinner`
	`118`	`+ ========================================================================== */`
	`119`	`+`
	`120`	`+.spinner-overlay {`
	`121`	`+ & .fas {`
	`122`	`+ box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);`
	`123`	`+ }`
	`124`	`+}`
	`125`	`+`
`117`	`126`	`/* Badge component`
`118`	`127`	`========================================================================== */`
`119`	`128`
Original file line number	Diff line number	Diff line change
`@@ -261,6 +261,15 @@ strong {`
`261`	`261`	`}`
`262`	`262`	`}`
`263`	`263`
	`264`	`+/* Spinner`
	`265`	`+ ========================================================================== */`
	`266`	`+`
	`267`	`+.spinner-overlay {`
	`268`	`+ & .fas {`
	`269`	`+ box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);`
	`270`	`+ }`
	`271`	`+}`
	`272`	`+`
`264`	`273`	`/* Buttons`
`265`	`274`	`========================================================================== */`
`266`	`275`