mixapps

commit f98908d2ef3a505b1ffbb41b3711dc2102f9ab33
parent 73dc42479884ff3db30c316aaa77c63ea82e7dfd
Author: Hunter
Date:   Tue, 28 Oct 2025 14:17:10 -0400

improve progress bar handle styling

Diffstat:
M
script.js
 | 
7
+++----
M
styles.css
 | 
6
+++---

2 files changed, 6 insertions(+), 7 deletions(-)
diff --git a/script.js b/script.js
@@ -229,7 +229,7 @@ function stopProgressBar() {
 }
 
 function resetProgressBar() {
-	progressBar.style.setProperty('--progress', '0%');
+	progressBar.style.setProperty('--progress', '0');
 }
 
 function updateProgressBar() {
@@ -238,8 +238,7 @@ function updateProgressBar() {
 		const duration = audio.duration;
 		const progressPercentage = (currentTime / duration) * 100;
 		const displayPercentage = isNaN(progressPercentage) ? 0 : progressPercentage;
-
-		progressBar.style.setProperty('--progress', `${displayPercentage}%`);
+		progressBar.style.setProperty('--progress', displayPercentage);
 	}
 }
 
@@ -256,7 +255,7 @@ function updateVisualProgress(event) {
 	const clickPosition = clientX - rect.left;
 	const clickPercentage = Math.max(0, Math.min(1, clickPosition / rect.width));
 
-	progressBar.style.setProperty('--progress', `${clickPercentage * 100}%`);
+	progressBar.style.setProperty('--progress', clickPercentage * 100);
 	return clickPercentage;
 }
 
diff --git a/styles.css b/styles.css
@@ -230,7 +230,7 @@ body {
 	background-color: var(--text);
 	position: relative;
 	border-radius: 1px;
-	--progress: 0%;
+	--progress: 0;
 	--circle-size: 16px;
 }
 
@@ -240,7 +240,7 @@ body {
 	left: 0;
 	top: 0;
 	height: 100%;
-	width: var(--progress);
+	width: calc((100% - var(--circle-size) + 2px) * var(--progress) / 100 + var(--circle-size) / 2);
 	background-color: var(--accent);
 	border-radius: 1px;
 	transition: none;
@@ -249,7 +249,7 @@ body {
 .progress-bar::after {
 	content: '';
 	position: absolute;
-	left: calc(var(--progress) - var(--circle-size) / 2);
+	left: calc((100% - var(--circle-size) + 2px) * var(--progress) / 100 - 1px);
 	top: 50%;
 	transform: translateY(-50%);
 	width: var(--circle-size);