diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index d92e42c8d9..0fa9782990 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -866,7 +866,6 @@ function readPromo() { position: relative; max-height: 9em; overflow: clip; - mask: linear-gradient(black calc(100% - 64px),transparent); } .collapsed { @@ -877,7 +876,8 @@ function readPromo() { z-index: 2; width: 100%; height: 64px; - //background: linear-gradient(0deg, var(--panel), var(--X15)); + --mix: color-mix(in srgb, var(--panel) 10%, transparent); + background: linear-gradient(0deg, var(--mix), transparent); &:hover > .collapsedLabel { background: var(--panelHighlight); diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue index 33c26ee57c..ae017f696f 100644 --- a/packages/frontend/src/components/MkOmit.vue +++ b/packages/frontend/src/components/MkOmit.vue @@ -62,8 +62,9 @@ onUnmounted(() => { 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%); + --mix: color-mix(in srgb, var(--panel) 10%, transparent); + background: linear-gradient(0deg, var(--mix), transparent); + backdrop-filter: blur(1px); > .fadeLabel { display: inline-block; diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index 041f101034..d8b737649d 100644 --- a/packages/frontend/src/components/MkSubNoteContent.vue +++ b/packages/frontend/src/components/MkSubNoteContent.vue @@ -71,7 +71,9 @@ const collapsed = $ref(isLong); left: 0; width: 100%; height: 64px; - mask: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); + --mix: color-mix(in srgb, var(--panel) 10%, transparent); + background: linear-gradient(0deg, var(--mix), transparent); + backdrop-filter: blur(1px); > .fadeLabel { display: inline-block;