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

improved css, larger side panel, background header image for all pages

Browse source
This commit is contained in:
Julien Maille 2026-01-03 22:52:12 +01:00
parent d06d11359e
commit c83ca9c23c
3 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -131,7 +131,7 @@
</li>
<li class="nav-item">
<a href="#account">
<svg viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:#8B8B93;stroke-miterlimit:10;stroke-width:1.9200000000000004;}</style></defs><circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle><path class="cls-1" d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"></path></g></svg>
<svg viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:1.9200000000000004;}</style></defs><circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle><path class="cls-1" d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"></path></g></svg>
<span>Account</span>
</a>
</li>

24
js/ui.js
View file

@ -47,10 +47,6 @@ export class UIRenderer {
}
updateGlobalTheme() {
// If the album background setting is disabled, we don't do global coloring
// except possibly for the album page which handles its own check.
// But here we are handling the "not on album page" case or general updates.
// Check if we are currently viewing an album page
const isAlbumPage = document.getElementById('page-album').classList.contains('active');
@ -446,6 +442,11 @@ export class UIRenderer {
}
resetVibrantColor() {
if (backgroundSettings.isEnabled() && this.currentTrack?.album?.vibrantColor) {
this.setVibrantColor(this.currentTrack.album.vibrantColor);
return;
}
const root = document.documentElement;
root.style.removeProperty('--primary');
root.style.removeProperty('--primary-foreground');
@ -520,8 +521,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
document.querySelector('.main-content').scrollTop = 0;
// Clear background and color if not on album page
if (pageId !== 'album') {
// Clear background and color if not on album, artist, playlist, or mix page
if (!['album', 'artist', 'playlist', 'mix'].includes(pageId)) {
this.setPageBackground(null);
this.updateGlobalTheme();
}
@ -1088,9 +1089,12 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const imageId = playlist.squareImage || playlist.image;
if (imageId) {
imageEl.src = this.api.getCoverUrl(imageId, '1080');
this.setPageBackground(imageEl.src);
} else {
imageEl.src = 'assets/appicon.png';
this.setPageBackground(null);
}
this.resetVibrantColor();
imageEl.style.backgroundColor = '';
titleEl.textContent = playlist.title;
@ -1176,14 +1180,18 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
// For now assume standard playlist-like cover or placeholder.
if (imageId && imageId !== mix.id) {
imageEl.src = this.api.getCoverUrl(imageId, '1080');
this.setPageBackground(imageEl.src);
} else {
// Try to get cover from first track album
if (tracks.length > 0 && tracks[0].album?.cover) {
imageEl.src = this.api.getCoverUrl(tracks[0].album.cover, '1080');
this.setPageBackground(imageEl.src);
} else {
imageEl.src = 'assets/appicon.png';
this.setPageBackground(null);
}
}
this.resetVibrantColor();
imageEl.style.backgroundColor = '';
@ -1289,6 +1297,10 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
imageEl.style.backgroundColor = '';
nameEl.textContent = artist.name;
// Set background
this.setPageBackground(imageEl.src);
this.resetVibrantColor(); // Ensure we don't carry over color from previous page
this.adjustTitleFontSize(nameEl, artist.name);
metaEl.innerHTML = `

5
styles.css
View file

@ -2994,8 +2994,8 @@ input:checked + .slider::before {
right: 0;
top: 0;
bottom: var(--player-bar-height-desktop);
width: 400px;
max-width: 100vw;
width: 600px;
max-width: 50vw;
background: var(--card);
border-left: 1px solid var(--border);
z-index: 2050;
@ -3110,6 +3110,7 @@ input:checked + .slider::before {
@media (max-width: 768px) {
.side-panel {
width: 100vw;
max-width: 100vw;
bottom: var(--player-bar-height-mobile);
}