diff options
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; |