feat: restyle unauthenticated screens #1103
|
@ -33,12 +33,16 @@ const motd = computed(() => store.state.config.motd)
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.no-auth-wrapper {
|
||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
|
||||
background-color: var(--site-background);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: $fullhd) {
|
||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.noauth-container {
|
||||
|
@ -50,7 +54,7 @@ const motd = computed(() => store.state.config.motd)
|
|||
border-radius: $radius;
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
@ -65,7 +69,7 @@ const motd = computed(() => store.state.config.motd)
|
|||
@media screen and (max-width: $desktop) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: none;
|
||||
konrad marked this conversation as resolved
|
||||
}
|
||||
|
@ -82,7 +86,7 @@ const motd = computed(() => store.state.config.motd)
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
|
||||
|
||||
&.has-message {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
Reference in New Issue
Block a user
Move these rules to the
@media screen and (min-width: $tablet)
media query=> makes it clearer that it just appies there.
Move media queries before
&::after
and> *
=> those are styling other elements
=> move styles together that style the same stuff
If you change
&::after
in&::before
you can remove the z-index if you replacez-index: 20;
withposition: relative
(this creates a new stacking context.=> less complexity with managing z-index.
Done!