diff options
Diffstat (limited to 'web/css')
| -rw-r--r-- | web/css/layout.css | 31 | ||||
| -rw-r--r-- | web/css/player.css | 9 |
2 files changed, 39 insertions, 1 deletions
diff --git a/web/css/layout.css b/web/css/layout.css index 006f874..7f0e19e 100644 --- a/web/css/layout.css +++ b/web/css/layout.css @@ -78,6 +78,12 @@ body { color: var(--accent); font-weight: 600; } +.sidebar .set-item.selected { + border: 2px solid var(--accent); + background: var(--bg-elevated); + color: var(--text-primary); + font-weight: 600; +} .sidebar-header { display: flex; align-items: center; @@ -176,9 +182,21 @@ body { } .media-card .card-actions { + position: absolute; + bottom: 0.35rem; + left: 0; + right: 0; display: flex; gap: 0.25rem; - padding: 0 0.5rem 0.5rem; + justify-content: center; + opacity: 0; + transition: opacity var(--transition-fast); + z-index: 2; +} +.media-card:hover .card-actions, +.media-card.selected .card-actions, +.media-card.playing .card-actions { + opacity: 1; } /* Audio row variant */ @@ -239,6 +257,17 @@ body { background: var(--bg-elevated); } +/* Hide row action buttons unless hovered/selected/playing */ +.media-row button[data-action] { + opacity: 0; + transition: opacity var(--transition-fast); +} +.media-row:hover button[data-action], +.media-row.selected button[data-action], +.media-row.playing button[data-action] { + opacity: 1; +} + /* Modal */ .modal-overlay { position: fixed; diff --git a/web/css/player.css b/web/css/player.css index 29baf30..004e2bd 100644 --- a/web/css/player.css +++ b/web/css/player.css @@ -53,6 +53,15 @@ max-height: 100%; } +/* Cover art for audio playback */ +.player .cover-art { + width: 100%; + height: 100%; + object-fit: contain; + display: block; + background: var(--player-stage-bg); +} + /* Overlay controls */ .player .controls { display: flex; |
