From 334c5610d9b83f58bd564d381a0c8a1808b96110 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 11 Dec 2021 20:50:27 +0100
Subject: [PATCH] chore: use after instead of new element for overlay

---
 src/components/misc/no-auth-wrapper.vue | 58 +++++++++++++------------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index e616876b8..41e30aef2 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -2,15 +2,13 @@
 	<div class="no-auth-wrapper">
 		<Logo class="logo" width="200" height="58"/>
 		<div class="noauth-container">
-			<section class="image">
-				<div class="overlay" :class="{'has-message': motd !== ''}">
-					<Message v-if="motd !== ''">
-						{{ motd }}
-					</Message>
-					<h2 class="title">
-						{{ $t('misc.welcomeBack') }}
-					</h2>
-				</div>
+			<section class="image" :class="{'has-message': motd !== ''}">
+				<Message v-if="motd !== ''">
+					{{ motd }}
+				</Message>
+				<h2 class="title">
+					{{ $t('misc.welcomeBack') }}
+				</h2>
 			</section>
 			<section class="content">
 				<slot/>
@@ -60,25 +58,7 @@ const motd = computed(() => store.state.config.motd)
 
 .image {
 	width: 50%;
-	
-	@media screen and (max-width: $tablet) {
-		display: none;
-	}
-	
-	@media screen and (min-width: $tablet) {
-		background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
-		position: relative;
-	}
-}
-
-.overlay {
 	padding: 1rem;
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: rgba(0, 0, 0, .2);
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
@@ -86,6 +66,30 @@ const motd = computed(() => store.state.config.motd)
 	&.has-message {
 		justify-content: space-between;
 	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, .2);
+		z-index: 10;
+	}
+
+	> * {
+		z-index: 20;
+	}
+
+	@media screen and (max-width: $tablet) {
+		display: none;
+	}
+
+	@media screen and (min-width: $tablet) {
+		background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
+		position: relative;
+	}
 }
 
 .content {