diff --git a/app/static/js/showcase.js b/app/static/js/showcase.js index 79d5571..00d8753 100644 --- a/app/static/js/showcase.js +++ b/app/static/js/showcase.js @@ -169,7 +169,6 @@ if (img.is_video) { const play = document.createElement('div'); play.className = 'play-overlay'; - play.textContent = '▶'; item.appendChild(play); } diff --git a/app/static/style.css b/app/static/style.css index b6d07af..76f4943 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -353,6 +353,12 @@ header { text-shadow: 0 1px 2px rgba(0,0,0,0.5); z-index: 2; pointer-events: none; + opacity: 0.5; + transition: opacity 0.2s ease; +} + +.gallery-item:hover .image-date { + opacity: 1; } .gallery-item a { @@ -369,12 +375,23 @@ header { inset: 0; display: grid; place-items: center; - color: white; - font-size: 3rem; - text-shadow: 0 2px 8px rgba(0,0,0,0.8); z-index: 1; pointer-events: none; - opacity: 0.9; +} + +.play-overlay::before { + content: '▶'; + font-size: 2rem; + color: rgba(255, 255, 255, 0.85); + text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.8); + width: 52px; + height: 52px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.45); + display: flex; + align-items: center; + justify-content: center; + padding-left: 4px; /* optical centering of triangle */ } /*------------------------------------------------------------------------------ diff --git a/app/templates/_gallery_item.html b/app/templates/_gallery_item.html index 0d01495..d7e9f96 100644 --- a/app/templates/_gallery_item.html +++ b/app/templates/_gallery_item.html @@ -8,7 +8,7 @@
- {% set visible_tags = image.tags | selectattr('kind', 'ne', 'archive') | list %} + {% set visible_tags = image.tags | rejectattr('kind', 'in', ['archive', 'source']) | list %} {% if visible_tags %}