diff options
| -rw-r--r-- | public/css/style.css | 14 | ||||
| -rw-r--r-- | views/album.erb | 4 |
2 files changed, 7 insertions, 11 deletions
diff --git a/public/css/style.css b/public/css/style.css index 062b187..059d340 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -173,20 +173,17 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; - cursor: zoom-out; overflow: hidden; - padding: 16px; } -/* inline-block shrink-wraps to the rendered image size; - arrows inside are then anchored to the photo's actual edges */ .lb-media { position: relative; - display: inline-block; + width: 100%; height: 100%; + display: flex; align-items: center; justify-content: center; line-height: 0; cursor: default; } -#lb-img { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); object-fit: contain; display: block; } -#lb-video { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); display: block; } +#lb-img { width: 100%; height: 100%; object-fit: contain; display: block; } +#lb-video { width: 100%; height: 100%; display: block; } #lb-audio { width: 400px; max-width: 90vw; display: block; } .lb-info { @@ -264,7 +261,7 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } position: relative; } #ss-img, #ss-video { - max-width: 100%; max-height: 100%; + width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity .5s ease; @@ -375,7 +372,6 @@ legend { padding: 0 8px; color: var(--text-dim); font-size: .85rem; } main { padding: 12px; } .lb-prev { left: 4px; } .lb-next { right: 4px; } - .lb-stage { padding: 48px 40px; } .files-table { font-size: .78rem; } } diff --git a/views/album.erb b/views/album.erb index 64bf763..d13ced9 100644 --- a/views/album.erb +++ b/views/album.erb @@ -83,8 +83,8 @@ <div id="lightbox" class="lightbox hidden" role="dialog" aria-modal="true"> <button class="lb-btn lb-close" onclick="closeLightbox()" aria-label="Close">✕</button> - <div class="lb-stage" onclick="closeLightbox()"> - <div class="lb-media" onclick="event.stopPropagation()"> + <div class="lb-stage" onclick="if(event.target===this)closeLightbox()"> + <div class="lb-media"> <img id="lb-img" src="" alt="" class="hidden"> <video id="lb-video" controls class="hidden"></video> <audio id="lb-audio" controls class="hidden"></audio> |