From 88216861a9d3b93e0f80bb8d1f50523573dd19f9 Mon Sep 17 00:00:00 2001
From: Mar0xy <marie@kaifa.ch>
Date: Sun, 15 Oct 2023 23:19:21 +0200
Subject: [PATCH] upd: attempt at fancy blur

---
 packages/frontend/src/components/MkNote.vue           | 4 +++-
 packages/frontend/src/components/MkOmit.vue           | 4 +++-
 packages/frontend/src/components/MkSubNoteContent.vue | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 987c126b33..32e7436698 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -866,6 +866,7 @@ function readPromo() {
 	position: relative;
 	max-height: 9em;
 	overflow: clip;
+	mask: linear-gradient(black calc(100% - 64px),transparent);
 }
 
 .collapsed {
@@ -876,7 +877,8 @@ function readPromo() {
 	z-index: 2;
 	width: 100%;
 	height: 64px;
-	background: linear-gradient(0deg, var(--panel), var(--X15));
+	//background: linear-gradient(0deg, var(--panel), var(--X15));
+	backdrop-filter: blur(1.6px);
 
 	&:hover > .collapsedLabel {
 		background: var(--panelHighlight);
diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
index 85202ff3c0..e01a3468e3 100644
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@@ -62,7 +62,9 @@ onUnmounted(() => {
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
+			//background: linear-gradient(0deg, var(--panel), var(--X15));
+			mask: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
+			backdrop-filter: blur(1.6px);
 
 			> .fadeLabel {
 				display: inline-block;
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index c59031070b..72d8cc98dc 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -71,7 +71,8 @@ const collapsed = $ref(isLong);
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
+			mask: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
+			backdrop-filter: blur(1.6px);
 
 			> .fadeLabel {
 				display: inline-block;