mixapps

commit f6ae230b2a62c93e9615122b0baf0d0c2243b4aa
parent 8bff327fc15be281e21682b1a0704ace203fabda
Author: Hunter
Date:   Tue, 28 Oct 2025 16:51:18 -0400

wrap control-buttons to avoid accidentally clicking tracks

Diffstat:
M
index.html
 | 
8
+++++---
M
styles.css
 | 
19
+++++++++++++++----

2 files changed, 20 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
@@ -23,9 +23,11 @@
 			</div>
 		</div>
 		<div class="controls">
-			<button class="control-button" id="prev"></button>
-			<button class="control-button" id="playPause"></button>
-			<button class="control-button" id="next"></button>
+			<div class="controls-inner">
+				<button class="control-button" id="prev"></button>
+				<button class="control-button" id="playPause"></button>
+				<button class="control-button" id="next"></button>
+			</div>
 		</div>
 	</div>
 
diff --git a/styles.css b/styles.css
@@ -59,9 +59,8 @@ body {
 .controls {
 	display: flex;
 	justify-content: center;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	height: 62px;
+	padding-left: 15px;
+	padding-right: 15px;
 	background: transparent;
 	position: absolute;
 	bottom: 0;
@@ -69,6 +68,7 @@ body {
 	right: 0;
 	box-sizing: border-box;
 	z-index: 3;
+	pointer-events: none;
 }
 
 .control-button {
@@ -79,7 +79,7 @@ body {
 	background-position: center;
 	border: none;
 	cursor: pointer;
-	margin: 0 7px;
+	margin: 0;
 	border-radius: 50%;
 	background-color: var(--text);
 	box-shadow:
@@ -91,6 +91,17 @@ body {
 		drop-shadow(0 0 1px rgba(0, 0, 0, 0.8))
 		drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6))
 		drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.2));
+	pointer-events: auto;
+}
+
+.control-button:not(:last-child) {
+	margin-right: 14px;
+}
+
+.controls-inner {
+	display: flex;
+	padding: 10px 15px;
+	pointer-events: auto;
 }
 
 .playlist-wrapper {