From 8b7022c45e807e26904311d9080f67ad07e8e86c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 15 May 2026 14:14:46 -0400
Subject: [PATCH] Style range sliders and checkboxes with theme cyan color

- Add accent-color: #00d9ff to input[type='range'] and input[type='checkbox']
- Custom webkit slider thumb and track styling with cyan theme
- Custom Firefox slider styling with cyan theme
- Radio button styling with cyan accent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/index.html | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/index.html b/src/index.html
index 156dd5f..bc2f53a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -207,6 +207,55 @@
 
     input[type="range"] {
       width: 100%;
+      height: 6px;
+      accent-color: #00d9ff;
+      cursor: pointer;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      appearance: none;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: #00d9ff;
+      cursor: pointer;
+      border: 2px solid #00d9ff;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+      background: var(--line);
+      height: 6px;
+      border-radius: 3px;
+    }
+
+    input[type="range"]::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: #00d9ff;
+      cursor: pointer;
+      border: 2px solid #00d9ff;
+    }
+
+    input[type="range"]::-moz-range-track {
+      background: var(--line);
+      height: 6px;
+      border-radius: 3px;
+      border: none;
+    }
+
+    input[type="checkbox"] {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      accent-color: #00d9ff;
+    }
+
+    input[type="radio"] {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      accent-color: #00d9ff;
     }
 
     textarea {