mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-21 22:15:40 +00:00
feat: UI polish, DnD fix, navigation, and installer improvements (v1.0.10)
- Fix queue DnD on macOS/Windows: delay ref cleanup in onDragEnd so onDropQueue reads correct source/destination before dragend clears them - Active track highlighting in album tracklist (pulsing accent bg + play icon) - Marquee scrolling for long titles in Fullscreen Player - Clickable artist/album in Player Bar and Queue now-playing strip - Tracklist: format column moved after duration, auto width, kHz/filesize removed - Settings dropdowns: visible border (base bg + overlay0 border) - Sidebar: fixed responsive width via clamp(), removed drag-to-resize - Favorites icon: HandMetal → Star in Random Mix page - Linux app menu category set to Multimedia (AudioVideo) - Windows MSI: stable upgradeCode for in-place upgrades - Bundle: category/description fields at correct config level - About: Claude Code credit, fixed German MIT licence wording Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+27
-11
@@ -567,7 +567,7 @@
|
||||
.tracklist { padding: 0 var(--space-6) var(--space-6); }
|
||||
.tracklist-header {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
|
||||
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: 11px;
|
||||
@@ -579,12 +579,12 @@
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.tracklist-header.tracklist-va {
|
||||
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
|
||||
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
|
||||
}
|
||||
|
||||
.track-row {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
|
||||
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
@@ -593,37 +593,46 @@
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
.track-row.track-row-va {
|
||||
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
|
||||
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
|
||||
}
|
||||
|
||||
.tracklist-total {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
|
||||
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
|
||||
gap: var(--space-3);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.tracklist-total.tracklist-va {
|
||||
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
|
||||
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
|
||||
}
|
||||
.tracklist-total-label {
|
||||
grid-column: 1 / -2;
|
||||
grid-column: 1 / 5;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
padding-right: var(--space-3);
|
||||
}
|
||||
.tracklist-total-value {
|
||||
grid-column: 5 / 6;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.tracklist-total.tracklist-va .tracklist-total-label { grid-column: 1 / 6; }
|
||||
.tracklist-total.tracklist-va .tracklist-total-value { grid-column: 6 / 7; }
|
||||
.track-row:hover { background: var(--bg-hover); }
|
||||
.track-row.active { background: var(--accent-dim); animation: track-pulse 2.5s ease-in-out infinite; }
|
||||
.track-row.active:hover { background: var(--accent-dim); animation: none; }
|
||||
@keyframes track-pulse {
|
||||
0%, 100% { background: var(--accent-dim); }
|
||||
50% { background: transparent; }
|
||||
}
|
||||
.track-row > * { padding-top: 6px; padding-bottom: 6px; }
|
||||
|
||||
/* CD / Disc separator */
|
||||
@@ -1070,7 +1079,7 @@
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.fs-title {
|
||||
.fs-title-wrap {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(20px, 3vw, 32px);
|
||||
font-weight: 800;
|
||||
@@ -1079,7 +1088,14 @@
|
||||
line-height: 1.15;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.fs-title-marquee {
|
||||
display: inline-block;
|
||||
animation: marquee-scroll 14s linear infinite alternate;
|
||||
}
|
||||
@keyframes marquee-scroll {
|
||||
0%, 15% { transform: translateX(0); }
|
||||
85%, 100% { transform: translateX(var(--scroll-amount, 0px)); }
|
||||
}
|
||||
.fs-album {
|
||||
font-size: 14px;
|
||||
|
||||
Reference in New Issue
Block a user