From bdc9619f2da7a378dcba3a764b257b189f25f904 Mon Sep 17 00:00:00 2001
From: Insert5StarName <anime@shourai.de>
Date: Mon, 9 Oct 2023 04:38:31 +0200
Subject: [PATCH] test transparency on user profiles
---
packages/frontend/src/components/MkContainer.vue | 7 +++++--
packages/frontend/src/components/MkInfo.vue | 6 ++++--
packages/frontend/src/components/MkNotes.vue | 6 ++++--
packages/frontend/src/pages/user/home.vue | 9 +++++++--
packages/frontend/src/pages/user/index.listenbrainz.vue | 4 ++--
5 files changed, 22 insertions(+), 10 deletions(-)
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index f703db5eb3..d3b8073b0b 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -138,7 +138,8 @@ onUnmounted(() => {
position: relative;
overflow: clip;
contain: content;
-
+ background: color-mix(in srgb, var(--panel) 65%, transparent);
+ backdrop-filter: blur(16px);
&.naked {
background: transparent !important;
box-shadow: none !important;
@@ -168,10 +169,12 @@ onUnmounted(() => {
top: var(--stickyTop, 0px);
left: 0;
color: var(--panelHeaderFg);
- background: var(--panelHeaderBg);
+ //background: var(--panelHeaderBg);
border-bottom: solid 0.5px var(--panelHeaderDivider);
z-index: 2;
line-height: 1.4em;
+ background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
+ backdrop-filter: blur(16px);
}
.title {
diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue
index ceb76d0d97..2b786ebb78 100644
--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@@ -23,13 +23,15 @@ const props = defineProps<{
.root {
padding: 12px 14px;
font-size: 90%;
- background: var(--infoBg);
+ background: color-mix(in srgb, var(--infoBg) 65%, transparent);
+ backdrop-filter: blur(16px);
color: var(--infoFg);
border-radius: var(--radius);
white-space: pre-wrap;
+ z-index: 1;
&.warn {
- background: var(--infoWarnBg);
+ background: color-mix(in srgb, var(--infoWarnBg) 65%, transparent);
color: var(--infoWarnFg);
}
}
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index 89fd504dcc..2fc50f4d47 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -56,7 +56,8 @@ defineExpose({
.root {
&.noGap {
> .notes {
- background: var(--panel);
+ background: color-mix(in srgb, var(--panel) 65%, transparent);
+ backdrop-filter: blur(16px);
}
}
@@ -65,7 +66,8 @@ defineExpose({
background: var(--bg);
.note {
- background: var(--panel);
+ background: color-mix(in srgb, var(--panel) 65%, transparent);
+ backdrop-filter: blur(16px);
border-radius: var(--radius);
}
}
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 39227f726c..cd8e2a5eaf 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -358,6 +358,7 @@ onUnmounted(() => {
left: -100%;
top: -100%;
right: -100%;
+ bottom: -100%;
background-attachment: fixed;
}
@@ -373,6 +374,8 @@ onUnmounted(() => {
> .main {
position: relative;
overflow: clip;
+ background: color-mix(in srgb, var(--panel) 65%, transparent);
+ backdrop-filter: blur(16px);
> .banner-container {
position: relative;
@@ -726,15 +729,17 @@ onUnmounted(() => {
<style lang="scss" module>
.tl {
- background: var(--bg);
+ background-color: rgba(0, 0, 0, 0);
border-radius: var(--radius);
overflow: clip;
+ z-index: 0;
}
.tab {
margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0;
- background: var(--bg);
+ background: color-mix(in srgb, var(--bg) 65%, transparent);
+ backdrop-filter: blur(16px);
border-radius: 5px;
> button {
border-radius: 5px;
diff --git a/packages/frontend/src/pages/user/index.listenbrainz.vue b/packages/frontend/src/pages/user/index.listenbrainz.vue
index ff51b09027..b3136c91fa 100644
--- a/packages/frontend/src/pages/user/index.listenbrainz.vue
+++ b/packages/frontend/src/pages/user/index.listenbrainz.vue
@@ -1,9 +1,9 @@
<template>
- <MkContainer :foldable="true">
+ <MkContainer>
<template #header
><i
class="ph-headphones ph-bold ph-lg"
- style="margin-right: 0.5em"
+ style="margin-right: 0.5em;"
></i
>Music</template
>