test transparency on user profiles

3 files changed, 13 insertions, 6 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);
 			}
 		}