mirror of
https://github.com/imfing/hextra.git
synced 2025-09-15 12:01:59 -04:00
ba0934b2e1
- 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.
57 lines
1.3 KiB
CSS
57 lines
1.3 KiB
CSS
.hextra-zoom-image-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--hextra-image-zoom-backdrop, rgba(0, 0, 0, 0.9));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
opacity: 0;
|
|
transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
|
|
cursor: zoom-out;
|
|
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);
|
|
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) {
|
|
.hextra-zoom-image-overlay,
|
|
.hextra-zoom-image {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* Show magnifier cursor over zoomable images in content */
|
|
.content img:not([data-no-zoom]) {
|
|
cursor: zoom-in;
|
|
}
|