fix: move background into seperate element to prevent it from being funny

This commit is contained in:
Insert5StarName 2023-10-17 08:23:10 +02:00
parent 6f46dfa7bb
commit 4d71afa884
1 changed files with 17 additions and 16 deletions

View File

@ -154,6 +154,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user"/> <XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user"/>
</div> </div>
</div> </div>
<div class="background"></div>
</MkSpacer> </MkSpacer>
</template> </template>
@ -359,23 +360,23 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.background{
position: fixed;
z-index: -1;
background: var(--backgroundImageStatic);
background-size: cover;
background-position: center;
pointer-events: none;
filter: blur(8px) opacity(0.6);
// Funny CSS schenanigans to make background escape container
left: -100%;
top: -5%;
right: -100%;
bottom: -100%;
background-attachment: fixed;
}
.ftskorzw { .ftskorzw {
&::before {
content: "";
position: fixed;
inset: 0;
background: var(--backgroundImageStatic);
background-size: cover;
background-position: center;
pointer-events: none;
filter: blur(8px) opacity(0.6);
// Funny CSS schenanigans to make background escape container
left: -100%;
top: -5%;
right: -100%;
bottom: -100%;
background-attachment: fixed;
}
> .main { > .main {