From b1ffa9050e63329ac72cfc9cca5b44800984e34c Mon Sep 17 00:00:00 2001 From: Ken D'Ambrosio Date: Sat, 9 May 2026 15:50:10 +0000 Subject: Add info overlay to lightbox showing photo metadata MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tap "ℹ Info" in the caption bar to toggle a semi-transparent panel at the bottom of the image showing filename (if different from title), date taken, and pixel dimensions. Panel resets to hidden on each photo change. Button is hidden automatically when no metadata is available. Width/height are now included in the ENTRIES payload. Co-Authored-By: Claude Sonnet 4.6 --- public/css/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'public/css/style.css') diff --git a/public/css/style.css b/public/css/style.css index bb152aa..3dd2450 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -186,6 +186,17 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } #lb-video { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); display: block; } #lb-audio { width: 400px; max-width: 90vw; display: block; } +.lb-info { + position: absolute; bottom: 0; left: 0; right: 0; + background: rgba(0,0,0,.72); + padding: 10px 14px; + font-size: .82rem; + line-height: 1.6; +} +.lb-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0; } +.lb-info dt { color: #aaa; white-space: nowrap; } +.lb-info dd { margin: 0; color: #eee; } + .lb-caption-bar { padding: 8px 80px; text-align: center; -- cgit v1.2.3