DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

upd: attempt at fancy blur

This commit is contained in:
Mar0xy 2023-10-15 23:19:21 +02:00
parent 870fbf9852
commit 88216861a9
No known key found for this signature in database
GPG Key ID: 56569BBE47D2C828
3 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/MkNote.vue
View File

@ -866,6 +866,7 @@ function readPromo() {
position: relative; position: relative;
max-height: 9em; max-height: 9em;
overflow: clip; overflow: clip;
mask: linear-gradient(black calc(100% - 64px),transparent);
} }
.collapsed { .collapsed {
@ -876,7 +877,8 @@ function readPromo() {
z-index: 2; z-index: 2;
width: 100%; width: 100%;
height: 64px; 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 { &:hover > .collapsedLabel {
background: var(--panelHighlight); background: var(--panelHighlight);

4
packages/frontend/src/components/MkOmit.vue
View File

@ -62,7 +62,9 @@ onUnmounted(() => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 64px; 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 { > .fadeLabel {
display: inline-block; display: inline-block;

3
packages/frontend/src/components/MkSubNoteContent.vue
View File

@ -71,7 +71,8 @@ const collapsed = $ref(isLong);
left: 0; left: 0;
width: 100%; width: 100%;
height: 64px; 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 { > .fadeLabel {
display: inline-block; display: inline-block;