mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +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.
35 lines
787 B
CSS
35 lines
787 B
CSS
/* ─── Hero — mobile ─── */
|
|
.app-shell[data-mobile] .hero,
|
|
.app-shell[data-mobile] .hero-placeholder {
|
|
height: 290px;
|
|
}
|
|
|
|
/* Stronger bottom gradient so white text stays readable without a cover */
|
|
.app-shell[data-mobile] .hero-overlay {
|
|
background:
|
|
linear-gradient(to top,
|
|
rgba(0, 0, 0, 0.90) 0%,
|
|
rgba(0, 0, 0, 0.55) 45%,
|
|
rgba(0, 0, 0, 0.22) 100%);
|
|
}
|
|
|
|
.app-shell[data-mobile] .hero-content {
|
|
padding: var(--space-4);
|
|
padding-bottom: 44px; /* keep buttons clear of the pagination dots */
|
|
gap: 0;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.app-shell[data-mobile] .hero-title {
|
|
font-size: clamp(17px, 5vw, 22px);
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Circular action buttons on mobile hero */
|
|
.hero-actions-mobile {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|