marijo/movmaker-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add map image lightbox overlay with zoom animation on click

Browse source
This commit is contained in:
hbrain 2026-05-31 14:55:56 +02:00
parent 5a81f48be0
commit a52e0a8bb3
4 changed files with 147 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

78
style.css
View file

@ -45,14 +45,6 @@
}
.describe-button{display:inline-block;margin-right:.6rem}
.map-image{
width: 100%;
aspect-ratio: 16/9;
background: #111315;
border-radius: .5rem;
margin-top: 1rem;
}
.map-image {
width: 100%;
aspect-ratio: 16 / 9;
@ -60,8 +52,78 @@
background: #111315;
border-radius: .5rem;
margin-top: 1rem;
cursor: zoom-in;
transition: transform .22s ease, box-shadow .22s ease;
}
.map-image:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.video-wrapper {
display: flex;
flex-direction: column;
}
body.map-lightbox-open { overflow: hidden; }
.map-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
background: rgba(11, 13, 15, .86);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity .22s ease;
padding: 2.2rem;
box-sizing: border-box;
}
.map-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.map-lightbox__img {
max-width: min(96vw, 2300px);
max-height: 92vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: .65rem;
box-shadow: 0 20px 70px rgba(0,0,0,.65);
transform: scale(.9);
opacity: 0;
transition: transform .24s cubic-bezier(.2,.75,.15,1), opacity .24s ease;
}
.map-lightbox.is-open .map-lightbox__img {
transform: scale(1);
opacity: 1;
}
.map-lightbox__close {
position: fixed;
top: 1.1rem;
right: 1.1rem;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
border: 1px solid #C46A3A;
background: #C46A3A;
color: #111315;
font-size: 1.15rem;
line-height: 1;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.map-lightbox__close:hover { background: #d97b48; border-color: #d97b48; }
.map-lightbox__hint {
position: fixed;
bottom: .9rem;
left: 50%;
transform: translateX(-50%);
color: #A0A4AB;
font-size: .82rem;
}