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 @@
-
-
-
- {{ motd }}
-
-
- {{ $t('misc.welcomeBack') }}
-
-
+
+
+ {{ motd }}
+
+
+ {{ $t('misc.welcomeBack') }}
+
@@ -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 {