chore: use after instead of new element for overlay
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
This commit is contained in:
parent
97945f3f42
commit
334c5610d9
|
@ -2,15 +2,13 @@
|
||||||
<div class="no-auth-wrapper">
|
<div class="no-auth-wrapper">
|
||||||
<Logo class="logo" width="200" height="58"/>
|
<Logo class="logo" width="200" height="58"/>
|
||||||
<div class="noauth-container">
|
<div class="noauth-container">
|
||||||
<section class="image">
|
<section class="image" :class="{'has-message': motd !== ''}">
|
||||||
<div class="overlay" :class="{'has-message': motd !== ''}">
|
|
||||||
<Message v-if="motd !== ''">
|
<Message v-if="motd !== ''">
|
||||||
{{ motd }}
|
{{ motd }}
|
||||||
</Message>
|
</Message>
|
||||||
<h2 class="title">
|
<h2 class="title">
|
||||||
{{ $t('misc.welcomeBack') }}
|
{{ $t('misc.welcomeBack') }}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<section class="content">
|
<section class="content">
|
||||||
<slot/>
|
<slot/>
|
||||||
|
@ -60,6 +58,29 @@ const motd = computed(() => store.state.config.motd)
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: end;
|
||||||
|
|
||||||
|
&.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) {
|
@media screen and (max-width: $tablet) {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -71,23 +92,6 @@ const motd = computed(() => store.state.config.motd)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
|
|
||||||
&.has-message {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
padding: 2rem 2rem 1.5rem;
|
padding: 2rem 2rem 1.5rem;
|
||||||
|
|
Reference in New Issue
Block a user