mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Frank Stellmacher
4b4cf42167
components.css (14205 LOC) → 84 per-section files in src/styles/components/ +
an index.css that imports them in original cascade order.
Same approach as the theme.css split: top-level sections are detected by
single-dash or 3+ dash header decoration (/^\/\* ─(?: |─{2,})/), 2-dash
sub-sections stay inside their parent. Concatenating in @import order
reproduces the original byte stream (+1 trailing newline, cosmetic).
Each section is now self-contained — touching Tracklist, Modal, Hero,
Sidebar, etc. only opens one focused file.
Generated via /tmp/split-components-css.mjs.
62 lines
1.6 KiB
CSS
62 lines
1.6 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);
|
|
transform: translateY(-1px);
|
|
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;
|
|
}
|
|
|