diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-05-12 14:45:00 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-05-12 14:45:00 +0000 |
| commit | b47fdda4fe1bf6fe90d0ba30eedac435dde7c034 (patch) | |
| tree | 81f1921bedaf9e86e65d511c6bacbddd4697c7df /public/css/style.css | |
| parent | 67a19fed3ff7ff9a40d489863fcef432cdba0913 (diff) | |
Add photo counts, EXIF details, video duration badges, slideshow launcher UI
- Album cards show recursive photo count (bubbles up through sub-albums).
- Lightbox info panel shows camera, aperture, shutter speed, and ISO;
update.rb now extracts and stores these EXIF fields.
- Video thumbnail cards show a duration badge (e.g. "1:23").
- Slideshow launcher redesigned: button on its own line, with Shuffle /
Full screen / Interval options on a second line, all inside a rounded
border to make the grouping clear.
- Fixed album-actions alignment so Interval sits level with the checkboxes.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'public/css/style.css')
| -rw-r--r-- | public/css/style.css | 7 |
1 files changed, 5 insertions, 2 deletions
diff --git a/public/css/style.css b/public/css/style.css index b0c73dd..b5d713e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -81,7 +81,8 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } .breadcrumbs .sep { margin: 0 4px; } .album-desc { color: var(--text-dim); margin-bottom: 10px; } -.album-actions { margin-top: 10px; } +.ss-launcher { margin-top: 10px; display: inline-flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; } +.ss-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } /* ── Grid ──────────────────────────────────────────────────────────────── */ .grid-section { margin-bottom: 32px; } @@ -147,7 +148,9 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } pointer-events: none; } -.album-label { padding: 6px 8px; font-size: .88rem; font-weight: 500; color: var(--text); } +.album-label { padding: 6px 8px; font-size: .88rem; font-weight: 500; color: var(--text); display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } +.album-count { font-size: .75rem; font-weight: 400; color: var(--text-dim); white-space: nowrap; } +.duration-badge { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; padding: 2px 5px; border-radius: 3px; pointer-events: none; } #album-search { display: block; width: 100%; max-width: 280px; margin-bottom: 14px; padding: 5px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .9rem; } .card-meta { padding: 6px 8px; } .card-caption { font-size: .8rem; color: var(--text-dim); } |