feat: add darkening and blur at the preview

haxgun · Oct 30, 2023 · c4a1e82 · c4a1e82
1 parent 4efc839
commit c4a1e82
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/public/img/bg.png b/public/img/bg.png
diff --git a/public/img/previews/sunset.png b/public/img/previews/sunset.png
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -417,14 +417,24 @@ input.nickname {
 }
 .preview {
 	flex: 1;
-	background-image: url("/img/bg.png");
-	background-color: $background-color_9;
+	background-image: url("/img/previews/sunset.png");
+	background-color: $background-color_6;
 	width: 100%;
 	height: 100%;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
 	position: relative;
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0,0,0,.5);
+		backdrop-filter: blur(10px);
+	}
 }
 .generate {
 	display: flex;
@@ -453,6 +463,7 @@ input.nickname {
 	right: 0;
 	top: 0;
 	bottom: 0;
+	z-index: 1;
 }
 .colorpicker {
 	appearance: none;