mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
Psychotoxical
00512df207
* feat(sort-dropdown): support a right-aligned popover via align prop * feat(playlist): sort playlist tracks by date added * docs(changelog): playlist sort by date added (#1191) * docs(credits): playlist sort by date added (#1191)
69 lines
2.7 KiB
CSS
69 lines
2.7 KiB
CSS
/* ─ Compact buttons (Settings → Appearance → Compact buttons) ─
|
||
Toggled by `html[data-button-size="small"]` (themeStore `buttonSize`).
|
||
Reusable opt-in: a button row adds `compact-action-bar`, and each button
|
||
wraps its text in a `compact-btn-label` span. In Small the labels hide and
|
||
the buttons collapse to icon-only — across detail-page hero rows, shared
|
||
browse toolbars (`mainstage-inpage-toolbar` → `toolbar-btn-label`) and the
|
||
standalone Most Played sort/filter buttons.
|
||
|
||
These rules are viewport-agnostic, so the toggle applies on mobile too. The
|
||
one deliberate exception is the AlbumHeader's mobile layout: it renders its
|
||
own large touch-target buttons (`album-icon-btn`, ~44–54px) instead of a
|
||
`compact-action-bar`, so Small never shrinks them below the touch target. */
|
||
|
||
html[data-button-size="small"] .compact-action-bar {
|
||
gap: 6px;
|
||
}
|
||
|
||
html[data-button-size="small"] .compact-action-bar .btn,
|
||
html[data-button-size="small"] .compact-action-bar .artist-ext-link {
|
||
padding: 5px;
|
||
gap: 5px;
|
||
min-height: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
html[data-button-size="small"] .compact-action-bar .btn svg,
|
||
html[data-button-size="small"] .compact-action-bar .artist-ext-link svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
|
||
/* Labelled buttons (Play, Bio, Download, Offline, …) become icon-only in Small. */
|
||
html[data-button-size="small"] .compact-action-bar .compact-btn-label {
|
||
display: none;
|
||
}
|
||
|
||
/* Album header keeps its inner primary cluster tight in Small too. */
|
||
html[data-button-size="small"] .album-detail-actions-primary {
|
||
gap: 5px;
|
||
}
|
||
|
||
/* Browse-page toolbars (All Albums style: Sort, Year, Genre, Favorites, Lossless,
|
||
Sampler, multi-select) collapse to icon-only in Small, reusing the same pattern
|
||
as the mobile toolbar — labels live in `.toolbar-btn-label`, the icon + tooltip
|
||
+ aria-label stay. One rule covers every shared `mainstage-inpage-toolbar`. */
|
||
html[data-button-size="small"] .mainstage-inpage-toolbar .toolbar-btn-label {
|
||
display: none;
|
||
}
|
||
|
||
/* Once labels are hidden, keep all toolbar buttons square / equal size. */
|
||
html[data-button-size="small"] .mainstage-inpage-toolbar .btn {
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
/* Most Played has its own standalone sort/filter buttons (not in a shared bar). */
|
||
html[data-button-size="small"] .mp-sort-btn .compact-btn-label,
|
||
html[data-button-size="small"] .mp-filter-btn .compact-btn-label {
|
||
display: none;
|
||
}
|
||
|
||
/* Playlist filter/sort toolbar: the SortDropdown collapses to icon-only in Small
|
||
too (label hidden, square button), reusing the shared `toolbar-btn-label`. */
|
||
html[data-button-size="small"] .playlist-filter-toolbar .toolbar-btn-label {
|
||
display: none;
|
||
}
|
||
html[data-button-size="small"] .playlist-filter-toolbar .btn-surface {
|
||
padding: 0.5rem;
|
||
}
|