mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Psychotoxical
d49424e95b
* feat(ui): prototype compact hero and toolbar buttons (Large/Small appearance setting) * feat(settings): rename action-button size toggle to "Compact buttons" Promote the hero-button prototype to a real, app-wide setting. - rename heroButtonSize → buttonSize, data-hero-buttons → data-button-size, hero-action-bar/hero-btn-label → compact-action-bar/compact-btn-label - relabel "Hero buttons" → "Compact buttons" and broaden the description (action + toolbar buttons across detail pages and browse views) in all 11 locales - move the feature CSS out of cover-lightbox.css into its own compact-buttons.css - add tests: themeStore buttonSize toggle, SelectionToggleButton * docs(changelog): compact buttons appearance toggle (#1189) * docs(credits): compact buttons appearance toggle (#1189)
60 lines
2.3 KiB
CSS
60 lines
2.3 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;
|
||
}
|