mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
feat(ui): UI refinements — sidebar indicators, adaptive header, and interaction polish (#397)
* feat(ui): unify queue toggle handle behavior Show the queue toggle in the header when the queue is collapsed and use a seam-aligned drag handle when it is open. Hide the seam handle while the main content is actively scrolling to reduce accidental interactions. * feat(ui): add adaptive header search collapse behavior Collapse header search to a magnifier when top controls get crowded and expand it as an overlay only while active. Use measured header space with hysteresis to avoid flicker and keep neighboring controls stable. * chore(ui): remove leftover search prototype artifacts Drop an unused icon import from live search and remove an unused header container-type rule left from an earlier layout experiment. * feat(ui): persist sidebar and queue visibility state Save left sidebar collapse and right queue open/closed visibility in local storage helpers so both panel modes are restored after app restart. * feat(ui): unify player overflow menu behavior Use a single overflow menu for click and wheel interactions, with a volume-only mode that keeps the same layout and volume controls as the full menu. * feat(ui): add wheel seek controls to waveform Apply 10-second wheel seek steps with trailing 1-second debounce and keep the waveform preview stable so the playhead moves smoothly during rapid scroll input. * fix(now-playing): stabilize narrow dashboard layout Switch now-playing responsiveness to container-based breakpoints and prevent stacked widgets from overlapping when width is constrained. * fix(search): reduce collapse jitter and avoid header overlap Add a short collapse-state cooldown to prevent threshold flicker and hide conflicting header controls while collapsed search expands as an overlay. * fix(i18n): localize player overflow controls across locales Replace hardcoded player overflow labels with translation keys and add the missing keys for all shipped locale files. * fix(search): keep advanced control clickable in collapsed mode Prevent focus loss on the advanced search button in collapsed overlay mode so its click handler consistently runs. * fix(i18n): restore queue translation in offline library Use the existing queue.appendToQueue key for the offline enqueue button tooltip and label instead of a missing key and hardcoded English text. * fix(ui): apply overlay scrollbar to right-panel text tabs Switch now-playing content, lyrics, and info panes to OverlayScrollArea and harden tour-item layout so long concert metadata stays within panel bounds. * fix(ui): add unread indicator for new releases and guard sidebar drag clicks Track unread new-release IDs per server/library scope and clear the badge when opening the New Releases page. Also prevent click-through navigation after sidebar drag release and keep related i18n/responsive sidebar-adjacent refinements in this snapshot. * fix(ui): stabilize live dropdown layering and unread reset flow Render the topbar Live dropdown via a portal so it consistently overlays sidebar layers. Rework new-releases unread tracking to handle library scope baselines, ignore stale refresh races, and mark items as seen after a 5-second stay on the New Releases page. * feat(ui): add localized New badges for recently added albums Show a theme-consistent New badge on album cards and album detail for albums created within the last 48 hours. Localize the badge label across all supported locales and centralize recency logic in a shared utility to avoid duplication. * fix(album): prevent tracklist jump when entering multiselect Move bulk selection actions from the tracklist body into the album toolbar next to the track filter. Keep selection controls stable in the header area so enabling multiselect no longer shifts the tracklist content downward. * fix(tray): add playback-state badge and finalize queue handle tooltip Show play/pause/stop icons in the Linux tray now-playing entry and persist state safely in Tauri managed state. Also switch the queue-resize handle tooltip to the dedicated localized key across all locales. * fix(header): prioritize search collapse before Live/Orbit labels Make topbar compression deterministic by collapsing search first and compacting Live/Orbit labels only in sustained low-space mode. Add sticky hysteresis-based header compact state to prevent oscillation while resizing. * fix(ui): stabilize header compaction and show tray state icons Prevent topbar flicker in the narrow-width range by tightening compact-mode thresholds, gating on real overflow, and removing width transitions from live search. Also include playback state icons in tray tooltip text across platforms while preserving tooltip length limits. * fix(tray): keep tooltip iconization Windows-only Revert Linux tray tooltip/title fallback attempts and keep state icons only in Windows tray tooltips, while Linux continues to show playback state in the now-playing menu entry. * fix(ui): restore queue resize response after overlay scroll interactions Hide the queue handle while scrolling on both the main route viewport and the now-playing viewport, and clear stale thumb-drag state before starting queue resize. Also ignore inactive/faded overlay thumbs in resizer suppression so horizontal pointer transitions no longer leave the queue seam unresponsive. * docs(changelog): summarize ui-refinements branch features Document the branch-level feature additions in 1.45.0 as separate changelog sections and group remaining branch-local fixes under a single polish entry. * docs(changelog): add PR #397 references for ui-refinements Attach PR metadata to the new 1.45.0 ui-refinement sections and the polish entry so release notes map directly to the merged branch discussion.
This commit is contained in:
cucadmuh
GitHub
+263
-14
@@ -452,6 +452,23 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.album-card-new-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
background: var(--accent);
|
||||
color: var(--ctp-crust);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 3px 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.album-card-play-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -633,9 +650,72 @@
|
||||
/* ─ Live Search ─ */
|
||||
.live-search {
|
||||
position: relative;
|
||||
min-width: 280px;
|
||||
min-width: 240px;
|
||||
max-width: 420px;
|
||||
flex: 1;
|
||||
flex: 1 1 320px;
|
||||
}
|
||||
|
||||
/* JS-computed collapse mode (budget-based, with hysteresis) */
|
||||
.live-search[data-collapsed] {
|
||||
min-width: 34px;
|
||||
max-width: 34px;
|
||||
flex: 0 0 34px;
|
||||
}
|
||||
|
||||
.live-search[data-collapsed]:not([data-active]) .live-search-input-wrap {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: color-mix(in srgb, var(--bg-card) 84%, transparent);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.live-search[data-collapsed]:not([data-active]) .live-search-icon {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.live-search[data-collapsed]:not([data-active]) .live-search-field {
|
||||
width: 0 !important;
|
||||
min-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.live-search[data-collapsed][data-active] {
|
||||
min-width: 34px;
|
||||
max-width: 34px;
|
||||
flex: 0 0 34px;
|
||||
}
|
||||
|
||||
.live-search[data-collapsed][data-active] .live-search-input-wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: min(420px, calc(100vw - 2 * var(--space-4)));
|
||||
z-index: 25;
|
||||
}
|
||||
|
||||
.live-search[data-collapsed][data-active] .live-search-field {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.live-search[data-collapsed]:not([data-active]) .live-search-clear,
|
||||
.live-search[data-collapsed]:not([data-active]) .live-search-adv-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.live-search[data-collapsed][data-active] .live-search-dropdown {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: min(420px, calc(100vw - 2 * var(--space-4)));
|
||||
}
|
||||
|
||||
.live-search-input-wrap {
|
||||
@@ -1183,7 +1263,7 @@
|
||||
.album-detail-badge {
|
||||
margin-bottom: 0.5rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
color: var(--ctp-crust);
|
||||
}
|
||||
|
||||
.album-detail-back {
|
||||
@@ -1191,6 +1271,28 @@
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.album-track-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 0 16px 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.album-track-toolbar-filter {
|
||||
position: relative;
|
||||
flex: 1 1 160px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.album-track-toolbar-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.album-info-dot {
|
||||
margin: 0 4px;
|
||||
}
|
||||
@@ -3565,6 +3667,17 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
|
||||
}
|
||||
|
||||
/* ─ Help Page ─ */
|
||||
.help-columns {
|
||||
columns: 2;
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.help-columns {
|
||||
columns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.help-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -3755,11 +3868,13 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
|
||||
|
||||
.lyrics-pane {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.lyrics-pane__viewport {
|
||||
overflow-x: hidden;
|
||||
/* scroll-behavior intentionally left to auto — JS drives smooth scroll imperatively */
|
||||
padding: 16px 16px 8px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.lyrics-pane-empty {
|
||||
@@ -5745,13 +5860,13 @@ html.no-compositing .fs-seekbar-played {
|
||||
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.stats-overview {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5769,10 +5884,12 @@ html.no-compositing .fs-seekbar-played {
|
||||
|
||||
.stats-card-value {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
font-size: clamp(1.45rem, 3.4vw, 2rem);
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.stats-card-label {
|
||||
@@ -6004,6 +6121,7 @@ html.no-compositing .fs-seekbar-played {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
container-type: inline-size;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 10%, var(--bg-main)) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--ctp-blue) 8%, var(--bg-main)) 0%, transparent 60%),
|
||||
@@ -6013,7 +6131,10 @@ html.no-compositing .fs-seekbar-played {
|
||||
/* Main scrollable content */
|
||||
.np-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.np-main__viewport {
|
||||
padding: 28px 28px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -10942,7 +11063,10 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
/* ── Now Playing Info panel ──────────────────────────────────────────────── */
|
||||
.np-info {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.np-info__viewport {
|
||||
overflow-x: hidden;
|
||||
padding: 6px 16px 20px;
|
||||
display: block;
|
||||
@@ -11076,8 +11200,9 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
}
|
||||
.np-info-tour > .np-info-tour-item + .np-info-tour-item { margin-top: 6px; }
|
||||
.np-info-tour-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 48px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-elevated);
|
||||
@@ -11088,6 +11213,7 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
min-width: 0; /* allow children to shrink past their min-content */
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -11126,6 +11252,7 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
* overflows the parent ul on WebKit. */
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
@@ -11142,9 +11269,10 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
.np-info-tour-place {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
text-align: left;
|
||||
}
|
||||
.np-info-tour-when { color: var(--text-secondary); }
|
||||
@@ -11831,6 +11959,112 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
.np-dash-hero-title { font-size: 24px; }
|
||||
}
|
||||
|
||||
/* Prefer container-based adaptation (main-content width can be narrow on desktop). */
|
||||
@container (max-width: 900px) {
|
||||
.np-dash-grid {
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.np-dash-col {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.np-dash-card-wrap {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.np-dash-card,
|
||||
.np-info-card {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.np-dash-hero {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.np-dash-hero-cover {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.np-dash-hero-body {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.np-dash-hero-title {
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.np-dash-hero-sub,
|
||||
.np-dash-hero-lfm-row {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.np-dash-hero-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 760px) {
|
||||
.np-main__viewport {
|
||||
padding: 16px 14px 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.np-dash {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.np-dash-hero {
|
||||
padding: 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.np-dash-hero-cover {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.np-dash-hero-title {
|
||||
font-size: 21px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.np-dash-hero-sub {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.np-dash-hero-lfm {
|
||||
padding: 10px 11px;
|
||||
}
|
||||
|
||||
.np-info-card {
|
||||
padding: 14px 15px;
|
||||
}
|
||||
|
||||
.np-card-header {
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.np-dash-col {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-shell[data-mobile] .np-dash-grid { flex-direction: column; }
|
||||
.app-shell[data-mobile] .np-dash-hero { grid-template-columns: 1fr; }
|
||||
.app-shell[data-mobile] .np-dash-hero-cover { width: 160px; height: 160px; margin: 0 auto; }
|
||||
@@ -12261,6 +12495,21 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
}
|
||||
.orbit-start-trigger:hover .orbit-start-trigger__spin { transform: rotate(45deg); }
|
||||
|
||||
/* Collapse Live/Orbit labels in a sticky low-space mode (with hysteresis). */
|
||||
.content-header[data-live-header-compact] .now-playing-dropdown__trigger,
|
||||
.content-header[data-live-header-compact] .orbit-start-trigger {
|
||||
padding-left: 0.55rem !important;
|
||||
padding-right: 0.55rem !important;
|
||||
gap: 0.35rem !important;
|
||||
min-width: 36px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-header[data-live-header-compact] .now-playing-dropdown__label,
|
||||
.content-header[data-live-header-compact] .orbit-start-trigger__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Launch popover — three-option menu anchored below the topbar trigger. */
|
||||
.orbit-launch-pop {
|
||||
min-width: 220px;
|
||||
|
||||
@@ -196,6 +196,31 @@
|
||||
}
|
||||
|
||||
.resizer-queue { right: calc(var(--queue-width) - 3px); }
|
||||
.resizer-queue { overflow: visible; }
|
||||
/* Queue handle has its own visual affordance; don't paint seam stripe on hover. */
|
||||
.resizer-queue:hover, .resizer-queue:active { background: transparent; }
|
||||
|
||||
.resizer-queue-handle {
|
||||
z-index: 101;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-muted);
|
||||
cursor: col-resize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.resizer-queue-handle:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* While dragging an overlay scrollbar thumb, hide queue resizer so the
|
||||
pointer does not pick up col-resize / queue resize (thumb sits under the
|
||||
@@ -568,6 +593,21 @@ body.is-overlay-scrollbar-thumb-drag .resizer {
|
||||
50% { opacity: 0.4; transform: scale(0.7); }
|
||||
}
|
||||
|
||||
.sidebar-nav-unread-badge {
|
||||
margin-left: auto;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: var(--ctp-crust, #11111b);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
|
||||
}
|
||||
|
||||
/* Collapsed Sidebar Styles */
|
||||
.sidebar.collapsed .sidebar-brand {
|
||||
justify-content: center;
|
||||
@@ -579,6 +619,18 @@ body.is-overlay-scrollbar-thumb-drag .resizer {
|
||||
padding: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-nav-unread-badge {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 7px;
|
||||
margin-left: 0;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
line-height: 16px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
position: absolute;
|
||||
top: calc(50% - var(--player-height) / 2);
|
||||
@@ -1125,6 +1177,16 @@ body.is-overlay-scrollbar-thumb-drag .resizer {
|
||||
|
||||
.content-header .spacer { flex: 1; }
|
||||
|
||||
.content-header > * {
|
||||
transition: opacity 0.14s ease, visibility 0.14s ease;
|
||||
}
|
||||
|
||||
.content-header[data-live-search-overlay] > :not(.live-search):not(.spacer) {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -1626,6 +1688,72 @@ html[data-platform="windows"] .player-bar.floating {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.player-overflow-wrap {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.player-overflow-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: calc(100% + 8px);
|
||||
width: 238px;
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
z-index: 240;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.player-overflow-menu-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.player-overflow-menu-btn {
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
height: 30px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.player-overflow-menu-btn:hover {
|
||||
background: var(--border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.player-overflow-menu-btn.active {
|
||||
color: var(--accent);
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
|
||||
}
|
||||
|
||||
.player-volume-section.player-volume-section--menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player-overflow-menu--volume-only {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.player-volume-slider-wrap.player-volume-slider-wrap--menu-only {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ─── EQ Popup ─── */
|
||||
.eq-popup-backdrop {
|
||||
position: fixed;
|
||||
@@ -2419,6 +2547,10 @@ html[data-platform="windows"] .player-bar.floating {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-shell[data-mobile] .resizer-queue-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ─── Player Bar — Mobile ─── */
|
||||
.app-shell[data-mobile] .player-bar {
|
||||
gap: var(--space-3);
|
||||
|
||||
Reference in New Issue
Block a user