From c45c51fa315d35f22529a7cb91e7c605fa1fab05 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Mon, 6 Apr 2026 14:27:45 +0100
Subject: [PATCH] fix: input range thumb off center

---
 src/app/globals.css                                 | 8 ++++----
 src/components/mii/instructions.tsx                 | 4 ++--
 src/components/mii/voice-viewer.tsx                 | 2 +-
 src/components/submit-form/mii-editor/tabs/misc.tsx | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index c2d01c0..2aa3f4a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -126,20 +126,20 @@ input[type="range"] {
 
 /* Track */
 input[type="range"]::-webkit-slider-runnable-track {
-	@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
+	@apply h-1 bg-orange-300 rounded-full;
 }
 
 input[type="range"]::-moz-range-track {
-	@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
+	@apply h-1 bg-orange-300 rounded-full;
 }
 
 /* Thumb */
 input[type="range"]::-webkit-slider-thumb {
-	@apply appearance-none size-4 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition -mt-1.5;
+	@apply appearance-none size-4 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition -mt-1.5;
 }
 
 input[type="range"]::-moz-range-thumb {
-	@apply size-3.5 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition;
+	@apply size-3.5 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition;
 }
 
 /* Hover */
diff --git a/src/components/mii/instructions.tsx b/src/components/mii/instructions.tsx
index c307ccf..f183dac 100644
--- a/src/components/mii/instructions.tsx
+++ b/src/components/mii/instructions.tsx
@@ -206,7 +206,7 @@ export default function MiiInstructions({ instructions }: Props) {
 							</label>
 							<div className="relative h-5 flex justify-center items-center">
 								<input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>
 					)}
@@ -217,7 +217,7 @@ export default function MiiInstructions({ instructions }: Props) {
 							</label>
 							<div className="relative h-5 flex justify-center items-center">
 								<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>
 					)}
diff --git a/src/components/mii/voice-viewer.tsx b/src/components/mii/voice-viewer.tsx
index a4660ff..d809588 100644
--- a/src/components/mii/voice-viewer.tsx
+++ b/src/components/mii/voice-viewer.tsx
@@ -33,7 +33,7 @@ export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
 								if (onChange) onChange(e, label.toLowerCase());
 							}}
 						/>
-						<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+						<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 					</div>
 				</div>
 			))}
diff --git a/src/components/submit-form/mii-editor/tabs/misc.tsx b/src/components/submit-form/mii-editor/tabs/misc.tsx
index 6e50ad6..2cfaf1d 100644
--- a/src/components/submit-form/mii-editor/tabs/misc.tsx
+++ b/src/components/submit-form/mii-editor/tabs/misc.tsx
@@ -67,7 +67,7 @@ export default function HeadTab({ instructions }: Props) {
 										instructions.current.height = e.target.valueAsNumber;
 									}}
 								/>
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>
 
@@ -89,7 +89,7 @@ export default function HeadTab({ instructions }: Props) {
 										instructions.current.weight = e.target.valueAsNumber;
 									}}
 								/>
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>