vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: enlarge cover mode z-index and closing options

Browse source 
improved text readability in light mode
This commit is contained in:
Julien Maille 2025-12-24 09:59:23 +01:00
parent 2564b809e6
commit 51a65c5190
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
js/app.js
View file

@ -252,8 +252,13 @@ document.addEventListener('DOMContentLoaded', async () => {
clearLyricsPanelSync(audioPlayer, lyricsPanel);
}
} else if (mode === 'cover') {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack);
const overlay = document.getElementById('fullscreen-cover-overlay');
if (overlay && overlay.style.display === 'flex') {
ui.closeFullscreenCover();
} else {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack);
}
} else {
// Default to 'album' mode - navigate to album
if (player.currentTrack.album?.id) {
@ -266,6 +271,10 @@ document.addEventListener('DOMContentLoaded', async () => {
ui.closeFullscreenCover();
});
document.getElementById('fullscreen-cover-image')?.addEventListener('click', () => {
ui.closeFullscreenCover();
});
document.getElementById('close-lyrics-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
lyricsPanel.classList.add('hidden');

13
styles.css
View file

@ -135,7 +135,7 @@
--active-highlight: var(--highlight);
--explicit-badge: #ef4444;
--explicit-badge-foreground: #ffffff;
--cover-filter: blur(30px) brightness(1.1) opacity(0.8);
--cover-filter: blur(30px) brightness(1.6) opacity(0.85);
}
*, *::before, *::after {
@ -1229,7 +1229,7 @@ input:checked + .slider::before {
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 1000;
z-index: 3000;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@ -1313,6 +1313,12 @@ input:checked + .slider::before {
text-align: center;
z-index: 1;
max-width: 90%;
background: color-mix(in srgb, var(--card), transparent 25%);
padding: 1.5rem 2rem;
border-radius: var(--radius);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid color-mix(in srgb, var(--border), transparent 50%);
}
#fullscreen-track-title {
@ -1320,7 +1326,6 @@ input:checked + .slider::before {
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--foreground);
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
word-break: break-word;
}
@ -1328,14 +1333,12 @@ input:checked + .slider::before {
font-size: 1.25rem;
color: var(--muted-foreground);
font-weight: 500;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
#fullscreen-next-track {
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--muted-foreground);
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
gap: 0.2rem;