drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-09-15 12:01:59 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore(image-zoom): enhance zoom functionality with improved transitions and closing behavior

Browse Source 
- Updated CSS for smoother transitions and added closing effects for the zoom overlay.
- Enhanced JavaScript to support dedicated closing transitions and improved event handling for dismissing the overlay.
- Removed unnecessary scroll lock and overflow styles for better user experience.
This commit is contained in:
Xin
2025-09-11 09:54:35 +01:00
parent a528d9adc0
commit ba0934b2e1
2 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/components/image-zoom.css
View File

@@ -1,4 +1,3 @@
/* Minimal styles for Hextra image zoom overlay */
.hextra-zoom-image-overlay {
position: fixed;
inset: 0;
@@ -8,27 +7,40 @@
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.25s ease-out;
transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
cursor: zoom-out;
overscroll-behavior: contain;
touch-action: none;
overscroll-behavior: auto;
touch-action: auto;
backdrop-filter: blur(var(--hextra-image-zoom-blur, 4px));
-webkit-backdrop-filter: blur(var(--hextra-image-zoom-blur, 4px));
}
.hextra-zoom-image-overlay.show {
opacity: 1;
}
.hextra-zoom-image-overlay.closing {
opacity: 0;
transition: opacity 360ms cubic-bezier(0.2, 0, 0, 1);
}
.hextra-zoom-image {
max-width: min(95vw, 1200px);
max-height: 95vh;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
transition: transform 0.3s ease-out;
will-change: transform;
transform: scale(0.98);
}
.hextra-zoom-image-overlay.show .hextra-zoom-image {
transform: scale(1);
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hextra-zoom-image-overlay.closing .hextra-zoom-image {
transform: scale(0.98);
transition: transform 340ms cubic-bezier(0.3, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
@@ -42,9 +54,3 @@
.content img:not([data-no-zoom]) {
cursor: zoom-in;
}
html:has(.hextra-zoom-image-overlay.show),
body:has(.hextra-zoom-image-overlay.show) {
overflow: hidden;
height: 100%;
}