mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 06:25:41 +00:00
feat: v1.13.0 — SVG Logo, Marquee, Player UX, Global Shortcuts fix
### Added - SVG logo with theme-adaptive gradient in sidebar (full wordmark + P-icon for collapsed state) - Player bar: song title/artist marquee scroll on overflow - Player bar: live volume percentage tooltip on slider hover ### Changed - Sidebar collapse button moved to right-edge hover tab - Player bar: fixed 320px track info width, increased waveform margins - Settings: Server tab opens by default - Crossfade: experimental badge removed (stable) - Help page: Lyrics/Keybindings/Font entries added, theme count corrected ### Fixed - Global shortcuts double-fire (Rust-side ShortcutMap idempotency fix) - W98 theme: comprehensive contrast fixes for navy hover backgrounds - Help page: removed orphaned translation key under Playback Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
+68
-18
@@ -38,7 +38,7 @@
|
||||
flex-direction: column;
|
||||
background: var(--bg-sidebar);
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
@@ -70,7 +70,7 @@
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: var(--space-4) var(--space-3);
|
||||
padding: var(--space-1) var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
@@ -176,7 +176,7 @@
|
||||
/* Collapsed Sidebar Styles */
|
||||
.sidebar.collapsed .sidebar-brand {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-link {
|
||||
@@ -185,21 +185,34 @@
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -13px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 101;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: var(--space-2);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-fast);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.sidebar:hover .collapse-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* ─── Update Toast ─── */
|
||||
@@ -311,7 +324,7 @@
|
||||
grid-area: player;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
gap: var(--space-6);
|
||||
padding: 0 var(--space-5);
|
||||
background: var(--bg-player);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
@@ -324,9 +337,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex: 0 0 auto;
|
||||
max-width: min(40vw, 480px);
|
||||
flex: 0 0 320px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player-album-art {
|
||||
@@ -385,6 +398,7 @@
|
||||
.player-album-art-wrap.clickable:hover .player-art-expand-hint { opacity: 1; }
|
||||
|
||||
.player-track-meta {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -393,20 +407,33 @@
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.player-track-artist {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ── Marquee (PlayerBar track name / artist) ── */
|
||||
.marquee-wrap {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.marquee-scroll {
|
||||
display: inline-block;
|
||||
animation: player-marquee 12s linear infinite;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
@keyframes player-marquee {
|
||||
0%, 12% { transform: translateX(0); }
|
||||
78%, 88% { transform: translateX(var(--marquee-amount)); }
|
||||
88.1%, 100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.player-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -462,6 +489,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.player-waveform-wrap {
|
||||
@@ -486,9 +515,30 @@
|
||||
width: 155px;
|
||||
}
|
||||
|
||||
.player-volume-slider {
|
||||
.player-volume-slider-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.player-volume-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player-volume-pct {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.player-eq-btn {
|
||||
|
||||
+117
-4
@@ -1900,6 +1900,10 @@
|
||||
border-color: #222222;
|
||||
}
|
||||
|
||||
[data-theme='doh-matic'] .btn-surface:hover {
|
||||
background: #D0E5FF;
|
||||
}
|
||||
|
||||
/* ─── Order of the Phoenix ─── */
|
||||
[data-theme='order-of-the-phoenix'] {
|
||||
color-scheme: dark;
|
||||
@@ -1997,7 +2001,7 @@
|
||||
--ctp-mantle: #a0a0a0;
|
||||
--ctp-base: #c0c0c0;
|
||||
--ctp-surface0: #dfdfdf;
|
||||
--ctp-surface1: #ffffff;
|
||||
--ctp-surface1: #e0e0e0;
|
||||
--ctp-surface2: #000080;
|
||||
--ctp-overlay0: #808080;
|
||||
--ctp-overlay1: #404040;
|
||||
@@ -2052,7 +2056,7 @@
|
||||
[data-theme='w98'] .sidebar,
|
||||
[data-theme='w98'] .player-bar,
|
||||
[data-theme='w98'] .btn-surface {
|
||||
border: 1px solid #ffffff !important;
|
||||
border: 1px solid #e0e0e0 !important;
|
||||
border-right-color: #808080 !important;
|
||||
border-bottom-color: #808080 !important;
|
||||
box-shadow: 1px 1px 0 0 #000, inset 1px 1px 0 0 #dfdfdf !important;
|
||||
@@ -2060,7 +2064,7 @@
|
||||
|
||||
[data-theme='w98'] .nav-link.active {
|
||||
background-color: #000080 !important;
|
||||
color: #ffffff !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme='w98'] .nav-link:hover:not(.active) {
|
||||
@@ -2081,12 +2085,121 @@
|
||||
|
||||
[data-theme='w98'] ::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border: 1px solid #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-right-color: #808080;
|
||||
border-bottom-color: #808080;
|
||||
box-shadow: 1px 1px 0 0 #000;
|
||||
}
|
||||
|
||||
/* ── W98: contrast & hover fixes ── */
|
||||
/* Queue round buttons default bg uses --bg-hover (#000080) → swap to silver */
|
||||
[data-theme='w98'] .queue-round-btn {
|
||||
background: #d4d0c8;
|
||||
color: #000000;
|
||||
}
|
||||
[data-theme='w98'] .queue-round-btn:hover:not(:disabled) {
|
||||
background: #000080;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
[data-theme='w98'] .queue-round-btn.active {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
/* btn-surface hover: light W98 grey instead of navy */
|
||||
[data-theme='w98'] .btn-surface:hover {
|
||||
background: #d4d0c8 !important;
|
||||
color: #000000;
|
||||
}
|
||||
/* Queue tab hover */
|
||||
[data-theme='w98'] .queue-tab-btn:hover {
|
||||
background: #d4d0c8;
|
||||
color: #000000;
|
||||
}
|
||||
/* Hero eyebrow + meta badges: --accent (#000080) invisible on dark hero overlay */
|
||||
[data-theme='w98'] .hero-eyebrow {
|
||||
color: rgba(224, 224, 224, 0.85);
|
||||
}
|
||||
[data-theme='w98'] .hero-meta .badge {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
/* Hero play/enqueue buttons */
|
||||
[data-theme='w98'] .hero-play-btn {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
/* Settings nav tabs hover */
|
||||
[data-theme='w98'] .settings-tab:hover { color: #e0e0e0; }
|
||||
/* Theme accordion: hover + open-state both use navy bg */
|
||||
[data-theme='w98'] .theme-accordion-header:hover { color: #e0e0e0; }
|
||||
[data-theme='w98'] .theme-accordion-open .theme-accordion-header { color: #e0e0e0; }
|
||||
[data-theme='w98'] .theme-accordion-open .theme-accordion-chevron { color: rgba(224, 224, 224, 0.7); }
|
||||
/* Language dropdown hover */
|
||||
[data-theme='w98'] .custom-select-trigger:hover { color: #e0e0e0; }
|
||||
[data-theme='w98'] .custom-select-option:hover { color: #e0e0e0; }
|
||||
/* Genre filter keywords / artist ext links hover (!important — inline style wins otherwise) */
|
||||
[data-theme='w98'] .artist-ext-link:hover { color: #e0e0e0 !important; }
|
||||
/* Changelog entries hover */
|
||||
[data-theme='w98'] .changelog-summary:hover { color: #e0e0e0; }
|
||||
/* Keybind/global-shortcut badge buttons: --bg-hover (#000080) as static bg */
|
||||
[data-theme='w98'] .keybind-badge { color: #e0e0e0 !important; }
|
||||
|
||||
/* ── W98: remaining navy-hover contrast fixes ── */
|
||||
/* Header toggle button (queue/sidebar) */
|
||||
[data-theme='w98'] .collapse-btn:hover { color: #e0e0e0; }
|
||||
/* Album section nav arrows */
|
||||
[data-theme='w98'] .album-row-nav .nav-btn:hover:not(.disabled) { color: #e0e0e0; }
|
||||
/* Live search results */
|
||||
[data-theme='w98'] .search-result-item:hover .search-result-name,
|
||||
[data-theme='w98'] .search-result-item:hover .search-result-sub,
|
||||
[data-theme='w98'] .search-result-item.active .search-result-name,
|
||||
[data-theme='w98'] .search-result-item.active .search-result-sub { color: #e0e0e0; }
|
||||
/* Tracklist rows — many children have explicit colors, override all */
|
||||
[data-theme='w98'] .track-row:hover *,
|
||||
[data-theme='w98'] .track-row.context-active * { color: #e0e0e0; }
|
||||
/* Artist list rows */
|
||||
[data-theme='w98'] .artist-row:hover { color: #e0e0e0; }
|
||||
/* Year/decade toggle */
|
||||
[data-theme='w98'] .year-toggle:hover { color: #e0e0e0; }
|
||||
/* Playlist rows */
|
||||
[data-theme='w98'] .playlist-row:hover,
|
||||
[data-theme='w98'] .playlist-row:hover * { color: #e0e0e0; }
|
||||
/* Help/FAQ */
|
||||
[data-theme='w98'] .help-question:hover { color: #e0e0e0; }
|
||||
[data-theme='w98'] .help-item-open .help-question { color: #e0e0e0; }
|
||||
[data-theme='w98'] .help-item-open .help-chevron { color: rgba(224, 224, 224, 0.7); }
|
||||
/* Now Playing action buttons + queue items */
|
||||
[data-theme='w98'] .np-action-btn:hover { color: #e0e0e0; }
|
||||
[data-theme='w98'] .np-queue-item:hover,
|
||||
[data-theme='w98'] .np-queue-item.context-active { color: #e0e0e0; }
|
||||
/* EQ buttons: static navy bg → swap to silver; hover → navy + light grey */
|
||||
[data-theme='w98'] .eq-ctrl-btn { background: #d4d0c8; color: #000000; }
|
||||
[data-theme='w98'] .eq-ctrl-btn:hover { background: #000080; color: #e0e0e0; }
|
||||
/* Changelog inline code: navy bg + navy text = invisible → silver bg + navy text */
|
||||
[data-theme='w98'] .changelog-code { background: #d4d0c8; color: #000080; }
|
||||
/* Ghost buttons (e.g. "Als Favorit") — !important needed, inline color style wins otherwise */
|
||||
[data-theme='w98'] .btn-ghost:hover { color: #e0e0e0 !important; }
|
||||
/* Built-in keyword chips (inline style uses --bg-hover) */
|
||||
[data-theme='w98'] .genre-keyword-badge { background: #d4d0c8 !important; color: #404040 !important; }
|
||||
/* Toggle switch knob: hardcoded white → W98 silver-grey */
|
||||
[data-theme='w98'] .toggle-track::before { background: #e0e0e0; }
|
||||
/* Now Playing: song title in W98 teal (inline style needs !important) */
|
||||
[data-theme='w98'] .np-title { color: #008080 !important; }
|
||||
/* Queue items: keep navy hover, light grey text */
|
||||
[data-theme='w98'] .queue-item:hover .queue-item-title,
|
||||
[data-theme='w98'] .queue-item:hover .queue-item-artist,
|
||||
[data-theme='w98'] .queue-item:hover .queue-item-duration,
|
||||
[data-theme='w98'] .queue-item.context-active .queue-item-title,
|
||||
[data-theme='w98'] .queue-item.context-active .queue-item-artist,
|
||||
[data-theme='w98'] .queue-item.context-active .queue-item-duration {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
/* Player bar buttons: keep navy hover, light grey icon */
|
||||
[data-theme='w98'] .player-btn:hover {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
[data-theme='w98'] .player-btn-primary:hover {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* ─── Global Base Settings ─── */
|
||||
:root {
|
||||
/* Typography */
|
||||
|
||||
Reference in New Issue
Block a user