mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25: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.
57 lines
1.6 KiB
CSS
57 lines
1.6 KiB
CSS
/* ─ Bulk Select ─ */
|
|
.bulk-action-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--accent-dim, color-mix(in srgb, var(--accent) 15%, transparent));
|
|
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.bulk-action-count {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
margin-right: auto;
|
|
}
|
|
.bulk-pl-picker-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.bulk-check {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 1.5px solid var(--text-muted);
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
vertical-align: middle;
|
|
flex-shrink: 0;
|
|
transition: border-color 0.1s, background 0.1s;
|
|
}
|
|
.bulk-check.checked {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
background-size: 10px 10px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.track-row.bulk-selected {
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
|
|
}
|
|
.track-row.bulk-selected:hover {
|
|
background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
|
|
}
|
|
|
|
/* Drop indicator line */
|
|
.playlist-drop-indicator {
|
|
height: 2px;
|
|
background: var(--accent);
|
|
border-radius: 1px;
|
|
margin: 1px 0;
|
|
pointer-events: all;
|
|
}
|
|
|