denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added blur to gallery entries when highlighted

Browse Source
This commit is contained in:
denizk0461
2026-02-12 15:47:47 +01:00
parent 96ee17e8c5
commit 6119ee8eda
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/lists/gallery-row.svelte
View File

@@ -42,13 +42,16 @@
margin: 0; margin: 0;
padding: 8px; padding: 8px;
text-decoration: none; text-decoration: none;
transition: background-color 0.1s ease-out, border-color 0.1s ease-out; transition: background-color 0.1s ease-out,
border-color 0.1s ease-out,
backdrop-filter 0.2s ease-out;
border: 2px dashed transparent; border: 2px dashed transparent;
} }
.row-entry:hover { .row-entry:hover {
background-color: var(--color-background-highlight); background-color: var(--color-background-highlight);
border-color: var(--color-highlight); border-color: var(--color-highlight);
backdrop-filter: blur(var(--blur-radius-background));
} }
.row-entry:hover .row-img { .row-entry:hover .row-img {

6
src/lib/lists/gallery.svelte
View File

@@ -90,7 +90,10 @@
border-color: transparent; border-color: transparent;
border-width: 2px; border-width: 2px;
border-left: none; border-left: none;
transition: border-color 0.1s ease-out, padding-right 0.1s ease-out, background-color 0.1s ease-out; transition: border-color 0.1s ease-out,
padding-right 0.1s ease-out,
background-color 0.1s ease-out,
backdrop-filter 0.2s ease-out;
} }
.gallery-title, .gallery-subtitle { .gallery-title, .gallery-subtitle {
@@ -111,6 +114,7 @@
.gallery-container:hover .gallery-text-container { .gallery-container:hover .gallery-text-container {
border-color: var(--color-highlight); border-color: var(--color-highlight);
background-color: var(--color-background-highlight); background-color: var(--color-background-highlight);
backdrop-filter: blur(var(--blur-radius-background));
} }
.gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder { .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder {
/* filter: grayscale(0%); */ /* filter: grayscale(0%); */