mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix Gallery preview overlay and backdrop (#7505)

Browse Source 
* Restore `Gallery` translucent background

* Add `backdrop-filter` for Safari

* Fix overflowing `Gallery` preview overlay

* add changeset

* Older browser support

* add changeset

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Dawood Khan <dawoodkhan82@gmail.com>
This commit is contained in:
MMP0 2024-02-23 04:33:03 +09:00 committed by GitHub
parent 9c36572e32
commit b186767744
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/young-emus-find.md Normal file
View File

@ -0,0 +1,7 @@
---
"@gradio/app": patch
"@gradio/gallery": patch
"gradio": patch
---
fix:Fix `Gallery` preview overlay and backdrop

1
js/app/src/Blocks.svelte
View File

@ -867,6 +867,7 @@
.backdrop {
flex: 1 1 0%;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}

16
js/gallery/shared/Gallery.svelte
View File

@ -338,14 +338,22 @@
.preview {
display: flex;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
flex-direction: column;
z-index: var(--layer-2);
border-radius: calc(var(--block-radius) - var(--block-border-width));
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
width: var(--size-full);
height: var(--size-full);
}
.preview::before {
content: "";
position: absolute;
z-index: var(--layer-below);
background: var(--background-fill-primary);
opacity: 0.9;
width: var(--size-full);
height: var(--size-full);
}