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

style(volume-ui): adjust volume thumb position to align with volume fill using CSS var

Browse source
This commit is contained in:
Dazly Gonsalves 2025-10-19 22:23:19 +05:30
parent 2a708e2b99
commit 40e67070c2
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
js/app.js
View file

@ -890,7 +890,10 @@ document.addEventListener('DOMContentLoaded', async () => {
const updateVolumeUI = () => {
const { volume, muted } = audioPlayer;
volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME;
volumeFill.style.width = `${muted ? 0 : volume * 100}%`;
const effectiveVolume = muted ? 0 : volume * 100;
volumeFill.style.setProperty('--volume-level', `${effectiveVolume}%`);
};
volumeBtn.addEventListener('click', () => {
@ -1013,4 +1016,4 @@ document.addEventListener('DOMContentLoaded', async () => {
e.preventDefault();
deferredPrompt = e;
});
});
});

6
styles.css
View file

@ -920,7 +920,7 @@ input:checked + .slider:before {
}
.volume-controls .volume-bar .volume-fill {
width: 70%;
width: var(--volume-level, 70%);
height: 100%;
background-color: var(--foreground);
border-radius: 2px;
@ -933,7 +933,7 @@ input:checked + .slider:before {
.volume-controls .volume-bar:hover .volume-fill::after {
content: '';
position: absolute;
right: 0;
left: calc(var(--volume-level, 70%) - 6px);
top: 50%;
transform: translateY(-50%);
width: 12px;
@ -1748,4 +1748,4 @@ input:checked + .slider:before {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
}
}
}