graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 03:23:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

upd: attempt at fancy blur

Browse source
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;