diff --git a/CHANGELOG.md b/CHANGELOG.md index 64b01cbe..3b1654e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -563,6 +563,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 * **Album grids and song rails:** overlay `pointer-events` so the dim layer does not steal hover from the card. +### Mainstage album rails — stable New badge on first hover + +**By [@cucadmuh](https://github.com/cucadmuh), PR [#986](https://github.com/Psychotoxical/psysonic/pull/986)** + +* Horizontal album rails (Home New Releases, Discover, Favorites, Statistics, search rows, …) no longer hide the **New** / offline cover badges during hover zoom — cover stacking is shared with grid pages; rails keep dim-on-`::before` for play controls. + ### Album view — bulk add to playlist selection diff --git a/src/styles/components/album-card.css b/src/styles/components/album-card.css index 82096e31..7c123322 100644 --- a/src/styles/components/album-card.css +++ b/src/styles/components/album-card.css @@ -29,6 +29,8 @@ height: 100%; object-fit: cover; transform-origin: center center; + position: relative; + z-index: 0; transform: translateZ(0) scale(1); transition: opacity 0.15s ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1); } diff --git a/src/styles/components/album-row-container.css b/src/styles/components/album-row-container.css index aa3ff8d2..b04d93f7 100644 --- a/src/styles/components/album-row-container.css +++ b/src/styles/components/album-row-container.css @@ -107,7 +107,6 @@ no .card transition, hover pinned to cover, dim via overlay background not opacity. */ .album-grid .album-card { contain: none; - transform: none; transition: none; } @@ -115,42 +114,44 @@ box-shadow: inset 0 0 0 1px var(--border-subtle); } -.album-grid .album-card-cover { - contain: layout style; - transform: none; +/* Dim below badges/play controls (all horizontal rails: Home, Favorites, Statistics, …). */ +.album-grid .album-card-cover::before { + content: ''; + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + background: transparent; } -.album-grid .album-card-cover img { - transform-origin: center center; - transform: scale(1); - transition: opacity 0.15s ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.album-grid .album-card-cover:hover img { - transform: scale(1.02); +.album-grid .album-card-cover:hover::before, +.album-grid .album-card-cover:focus-within::before { + background: rgba(0, 0, 0, 0.4); } .album-grid .album-card .album-card-play-overlay { + z-index: 4; + transform: translateZ(0); opacity: 1; background-color: transparent; transition: none; + pointer-events: none; } .album-grid .album-card .album-card-details-btn { - visibility: hidden; opacity: 0; + visibility: visible; pointer-events: none; transition: none; } .album-grid .album-card-cover:hover .album-card-play-overlay, .album-grid .album-card-cover:focus-within .album-card-play-overlay { - background-color: rgba(0, 0, 0, 0.4); + background-color: transparent; } .album-grid .album-card-cover:hover .album-card-details-btn, .album-grid .album-card-cover:focus-within .album-card-details-btn { - visibility: visible; opacity: 1; pointer-events: auto; } @@ -190,7 +191,8 @@ flex-direction: column; align-items: flex-end; gap: 4px; - z-index: 2; + z-index: 5; + transform: translateZ(0); pointer-events: none; } @@ -221,6 +223,8 @@ .album-card-play-overlay { position: absolute; inset: 0; + z-index: 2; + transform: translateZ(0); background: rgba(0, 0, 0, 0.4); display: flex; align-items: center;