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

FIX: standardize custom playlist buttons style and responsiveness

Browse source
This commit is contained in:
Julien Maille 2026-01-02 23:01:30 +01:00
parent bff48ad21c
commit df334a2ee3
2 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
js/ui.js
View file

@ -1049,11 +1049,11 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const editBtn = document.createElement('button');
editBtn.id = 'edit-playlist-btn';
editBtn.className = 'btn-secondary';
editBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg><span>Edit</span>';
editBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg><span>Edit</span>';
const deleteBtn = document.createElement('button');
deleteBtn.id = 'delete-playlist-btn';
deleteBtn.className = 'btn-secondary danger';
deleteBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg><span>Delete</span>';
deleteBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg><span>Delete</span>';
actionsDiv.appendChild(editBtn);
actionsDiv.appendChild(deleteBtn);

32
styles.css
View file

@ -1168,6 +1168,21 @@ body.has-page-background .track-item:hover {
background: #dc2626;
}
.detail-header-actions .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
border-radius: 2rem;
font-weight: 600;
font-size: 0.95rem;
}
.detail-header-actions .btn-secondary:hover {
transform: scale(1.05);
}
.settings-list {
max-width: 800px;
}
@ -2507,7 +2522,7 @@ input:checked + .slider::before {
gap: 0.5rem;
}
.detail-header-actions .btn-primary {
.detail-header-actions button {
width: 40px;
height: 40px;
padding: 0;
@ -2518,20 +2533,7 @@ input:checked + .slider::before {
flex-shrink: 0;
}
#like-album-btn,
#like-playlist-btn,
#like-artist-btn {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.detail-header-actions .btn-primary span {
.detail-header-actions button span {
display: none;
}