From abe3c7bce9dc1b8c15171e1c2a48aad6642cbecd Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 13 Jan 2025 01:42:01 +0100
Subject: [PATCH] Make range slider thumbs circular

Fits better with the new slightly rounded and spacious style. The track
was made slightly thicker to ensure proper centering of the new thumb.
---
 app/styles/input.css | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index e6b41c13..f5147fd8 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -405,8 +405,8 @@ input[type=checkbox].toggle:indeterminate::before {
 
 input[type=range] {
     border: unset;
-    border-radius: 3px;
-    height: 20px;
+    border-radius: 8px;
+    height: 15px;
     padding: 0;
     background: transparent;
 }
@@ -423,34 +423,35 @@ input[type=range]:disabled {
    https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */
 input[type=range]::-webkit-slider-runnable-track {
     background-color: var(--novnc-blue);
-    height: 6px;
-    border-radius: 3px;
+    height: 7px;
+    border-radius: 4px;
 }
 input[type=range]::-moz-range-track {
     background-color: var(--novnc-blue);
-    height: 6px;
-    border-radius: 3px;
+    height: 7px;
+    border-radius: 4px;
 }
 input[type=range]::-webkit-slider-thumb {
     appearance: none;
-    width: 18px;
-    height: 20px;
-    border-radius: 6px;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
     background-color: white;
     background-image: var(--button-activation-overlay);
     /* Disable Chrome's touch tap highlight to avoid conflicts with overlay */
     -webkit-tap-highlight-color: transparent;
-    border: 1px solid dimgray;
-    margin-top: -7px;
+    border: 3px solid var(--novnc-blue);
+    margin-top: -4px; /* (track height / 2) - (thumb height /2) */
 }
 input[type=range]::-moz-range-thumb {
     appearance: none;
-    width: 18px;
-    height: 20px;
-    border-radius: 6px;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    box-sizing: border-box;
     background-color: white;
     background-image: var(--button-activation-overlay);
-    border: 1px solid dimgray;
+    border: 3px solid var(--novnc-blue);
     margin-top: -7px;
 }