mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-21 22:15:40 +00:00
feat(changelog): replace auto-modal with sidebar banner + /whats-new page
Removes the giant startup changelog modal. After an update, a compact neutral-palette pill now sits above Now Playing in the sidebar saying "Changelog — vX.Y.Z". Clicking opens a proper /whats-new page in the main content area; X dismisses. Page renders the current version's CHANGELOG entry with inline Markdown (headings, lists, blockquotes, hr, bold/italic/code, and real [label](url) links that open via the Tauri shell plugin). Visual tokens are hardcoded slate/gray/blue so the banner and page look identical across every theme (dark, light, skeuomorphic, whatever) — requested for consistent contrast. Auto-mark-as-seen removed from the page; the banner only goes away on explicit dismiss, so users can re-read as often as they want. Settings → About gains a "Release notes" row with a link that resets the seen-version and opens the page, so the banner can be retriggered manually (also helpful for dev builds ahead of the current tag). The existing "Show changelog on update" toggle now gates the banner instead of the modal; description strings updated in all 8 locales. fix(themes): WCAG contrast audit — mocha + winmedplayer + wista Mocha (Catppuccin dark) .track-size used --ctp-overlay0 directly (3.36:1 on bg-app, 2.57 on bg-card). Swapped to --text-muted → 7.37 / 5.65. Fix also lifts macchiato/frappe/latte which shared the failure. WinMedPlayer (Luna) --text-muted #b8d0f8 (3.87:1 on bg-app) → #e8f0ff (5.28) --border #2a5090 (1.31 on bg-app) → #071027 (3.12, meets 3:1 UI) Wista (Vista Aero) Lyrics pane sits on bg-sidebar #0e1e3e but used --text-primary (#0d1d3c) for active lines — 1.01:1, literally invisible. Added component overrides: .lyrics-line / .lyrics-status / word-synced variants → #aac8f0 (9.60), .lyrics-line.active → #ffffff (16.48). Palette: --warning #c8980c → #735a00 (2.37 → 5.91 on bg-app), --text-muted #4870a8 → #3f6aa0 (4.23 → 4.65 on bg-card). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
+224
-1
@@ -1868,7 +1868,7 @@
|
||||
}
|
||||
|
||||
.track-size {
|
||||
color: var(--ctp-overlay0);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.track-duration {
|
||||
@@ -8832,6 +8832,229 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
|
||||
led-pulse, …) even when the app is minimized, causing constant GPU use.
|
||||
Pausing them cuts that to near zero while hidden without touching the
|
||||
running Rust/audio threads. */
|
||||
/* ─ 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;
|
||||
}
|
||||
|
||||
/* ─── Page ─── */
|
||||
.whats-new {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 32px 48px;
|
||||
color: #e4e7f5;
|
||||
background: #16182a;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.25);
|
||||
border: 1px solid #2a2d44;
|
||||
}
|
||||
|
||||
.whats-new__header {
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #2a2d44;
|
||||
}
|
||||
.whats-new__title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.whats-new__close {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #3a3f5a;
|
||||
background: transparent;
|
||||
color: #9aa0bd;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.whats-new__close:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: #e4e7f5;
|
||||
border-color: #4a5072;
|
||||
}
|
||||
.whats-new__icon {
|
||||
color: #8ec8ff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.whats-new__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #f1f3fb;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.whats-new__subtitle {
|
||||
font-size: 13px;
|
||||
color: #9aa0bd;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.whats-new__date {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.whats-new__body {
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.whats-new__empty {
|
||||
color: #9aa0bd;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.whats-new-h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #f1f3fb;
|
||||
margin: 22px 0 10px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #2a2d44;
|
||||
}
|
||||
.whats-new-h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #dfe3f6;
|
||||
margin: 14px 0 6px;
|
||||
}
|
||||
|
||||
.whats-new-p {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.whats-new-list {
|
||||
list-style: disc;
|
||||
padding-left: 22px;
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
.whats-new-list li {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.whats-new-list li::marker {
|
||||
color: #6b7192;
|
||||
}
|
||||
|
||||
.whats-new-quote {
|
||||
border-left: 3px solid #3a3f5a;
|
||||
padding: 6px 12px;
|
||||
margin: 10px 0;
|
||||
color: #b6bcd8;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.whats-new-hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a2d44;
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
.whats-new-code {
|
||||
background: #262a3e;
|
||||
color: #d4d7f0;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
font-family: var(--font-mono, ui-monospace, monospace);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.whats-new-link {
|
||||
color: #8ec8ff;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed #4a5072;
|
||||
cursor: pointer;
|
||||
}
|
||||
.whats-new-link:hover {
|
||||
color: #b6dbff;
|
||||
border-bottom-color: #8ec8ff;
|
||||
}
|
||||
|
||||
/* ─ Mini Player window ───────────────────────────────────────────────────── */
|
||||
.mini-player {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user