mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
cucadmuh
c683b5e37b
* fix(artists): inset selection ring on grid cards, stop composer hover clip Artist multi-select used a positive outline-offset that clipped in the first grid row and sat outside the card border on hover. Match album cards with an inset ring; drop composer-card hover translateY that sheared the top edge in the in-page scrollport. Reported by zunoz (v1.47.0-rc.3). * fix(cards): selection ring via inset ::after overlay on WebKitGTK grids Replace outline-based multi-select rings on album/artist/playlist cards with the same inset ::after box-shadow pattern used for card focus rings (card.css) — avoids clipping and the 1px gap vs the inner border on overflow:hidden tiles in All Albums and related browse grids. * docs: note browse grid selection ring fix in CHANGELOG (PR #962) * docs(changelog): credit zunoz on Psysonic Discord for PR #962
61 lines
1.5 KiB
CSS
61 lines
1.5 KiB
CSS
/* ─ Composer Grid (text-only, compact) ─
|
|
* Composers carry no useful imagery — visual is just noise. Strip the avatar,
|
|
* keep the name as the visual anchor with the participation count below. */
|
|
.composer-grid-wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: var(--space-2);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.composer-grid-wrap > .composer-card {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 0 78px;
|
|
}
|
|
|
|
.composer-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-subtle);
|
|
padding: var(--space-3) var(--space-3);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition:
|
|
transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
border-color 200ms ease,
|
|
background 200ms ease,
|
|
box-shadow 200ms ease;
|
|
}
|
|
|
|
.composer-card:hover {
|
|
border-color: var(--accent);
|
|
background: var(--bg-hover);
|
|
box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.composer-card-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
line-height: 1.25;
|
|
white-space: normal;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
/* Reserve two name lines so the participation row stays vertically aligned
|
|
* across the grid, regardless of whether the name wraps or not. */
|
|
min-height: calc(14px * 1.25 * 2);
|
|
}
|
|
|
|
.composer-card-meta {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.3;
|
|
}
|
|
|