itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-21 22:15:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(styles): split components.css into per-section files (#657)

Browse Source 
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.
This commit is contained in:
Frank Stellmacher
2026-05-13 19:10:11 +02:00
committed by GitHub
parent 45a6a18849
commit 4b4cf42167
87 changed files with 14215 additions and 14206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components/what-s-new-banner-page.css
+84
View File
@@ -0,0 +1,84 @@
/* ─ What's New — banner + page ────────────────────────────────────────────
Fixed neutral palette so it reads identically on every theme (light and
dark). The banner sits in the sidebar just above Now Playing; the page
opens in the main content area. */
.sidebar-bottom-spacer {
margin-top: auto;
flex-shrink: 0;
}
.whats-new-banner {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
margin: 0 0 6px 0;
background: #1f2233;
color: #dfe3f6;
border: 1px solid #3a3f5a;
border-radius: 8px;
font: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
position: relative;
}
.whats-new-banner:hover {
background: #272b40;
border-color: #4a5072;
}
.whats-new-banner__icon {
flex-shrink: 0;
color: #8ec8ff;
}
.whats-new-banner__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.25;
}
.whats-new-banner__title {
font-weight: 600;
color: #f1f3fb;
}
.whats-new-banner__version {
font-size: 10.5px;
color: #9aa0bd;
font-variant-numeric: tabular-nums;
}
.whats-new-banner__dismiss {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
color: #9aa0bd;
cursor: pointer;
}
.whats-new-banner__dismiss:hover {
background: rgba(255, 255, 255, 0.08);
color: #e4e7f5;
}
.whats-new-banner--collapsed {
width: 34px;
height: 34px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6px;
}