diff options
| author | Christophe Besson <cbesson@gmail.com> | 2026-10-10 15:26:45 +0200 |
|---|---|---|
| committer | Christophe Besson <cbesson@gmail.com> | 2026-10-10 15:26:45 +0200 |
| commit | 1521cc1ac0cca7ee8786056f84fa399d5cc268f9 (patch) | |
| tree | 00cc3132ee05894350db12e8e5cb94f81b1d4876 /packages/meshbay-hub/src/meshbay_hub/static/style.css | |
| parent | 1fd7bbcd038cddf40540bae7083b9adf4c728912 (diff) | |
| download | meshbay-1521cc1ac0cca7ee8786056f84fa399d5cc268f9.tar.gz | |
feat(photos): show a phone's clips in their albums
Videos in a photo folder are thumbnailed by the node, counted and marked in
the album, and played in the group's video player from the lightbox; the
slideshow passes them by.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index ea017fb..1b8dd8e 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -5104,6 +5104,29 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } border: 1px solid var(--border); } .photo-tile:hover { border-color: var(--accent); } +.photo-tile { position: relative; } +/* A video among the photos: a play mark and its length over the thumbnail. */ +.photo-tile-video { + position: absolute; left: 6px; bottom: 6px; + display: inline-flex; align-items: center; gap: 3px; + padding: 2px 6px; border-radius: 10px; + background: rgba(0, 0, 0, 0.6); color: #fff; + font-size: 0.75em; font-variant-numeric: tabular-nums; + pointer-events: none; +} +.photo-tile-video .icon { width: 0.9em; height: 0.9em; } +.photo-lightbox-video { + position: relative; display: flex; align-items: center; justify-content: center; + max-width: 100%; max-height: 100%; +} +.photo-lightbox-poster { max-width: 100%; max-height: 70vh; object-fit: contain; display: block; } +.photo-lightbox-play { + position: absolute; width: 64px; height: 64px; border-radius: 50%; + border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; + display: flex; align-items: center; justify-content: center; +} +.photo-lightbox-play:hover { background: var(--accent); } +.photo-lightbox-play .icon { width: 28px; height: 28px; } .photo-tile-thumb { width: 100%; aspect-ratio: 1 / 1; |