From 093498e168afdcd1ff4e4f9b8030e7b12eb88a59 Mon Sep 17 00:00:00 2001
From: olcxja <olcxja@olcxja.ovh>
Date: Mon, 24 Aug 2026 20:20:00 +0200
Subject: [PATCH] 0.2.0 - better sliders

---
 android/app/src/main/assets/public/style.css | 50 +++++++++++---------
 webroot/style.css                            | 50 +++++++++++---------
 2 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css
index 6506b747..f4b1f83e 100644
--- a/android/app/src/main/assets/public/style.css
+++ b/android/app/src/main/assets/public/style.css
@@ -774,7 +774,7 @@ space{
         border-radius: 0.8rem;
         transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
     }
-    button:hover, input:hover, textarea:hover {
+    button:hover, input:not([type="range"]):hover, textarea:hover {
         background-color: rgba(255, 255, 255, 0.1);
     }
     .submit-button:hover, .profile-action-btn:hover {
@@ -791,7 +791,11 @@ space{
         filter: brightness(0.93);
     }
 }
-button:active, button.is-pressed, input:active, input.is-pressed, textarea:active, textarea.is-pressed {
+/* Suwaki ([type=range]) są wyłączone z efektu klikania całego pola -
+   przytrzymanie skaluje tylko uchwyt (patrz ::-webkit-slider-thumb:active). */
+button:active, button.is-pressed,
+input:not([type="range"]):active, input:not([type="range"]).is-pressed,
+textarea:active, textarea.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
     transform: var(--press-scale);
 }
@@ -1021,15 +1025,18 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     height: auto;
 }
 
-/* Custom Zoom Slider Styling */
-#cropper-zoom,
-.voice-setting-row input[type="range"] {
+
+input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
+    display: block;
+    margin: 0;
+    padding: 0.4rem 0.05rem;
+    border: none;
     width: 100%;
     height: 0.375rem;
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 0.1875rem;
+    border-radius: 0.34rem;
     outline: none;
 }
 
@@ -1037,8 +1044,7 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     margin: 0.625rem 0;
 }
 
-#cropper-zoom::-webkit-slider-thumb,
-.voice-setting-row input[type="range"]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 1rem;
@@ -1049,14 +1055,16 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     transition: transform 0.2s, background 0.2s;
 }
 
-#cropper-zoom::-webkit-slider-thumb:hover,
-.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.08);
     background: #fff;
 }
 
-#cropper-zoom::-moz-range-thumb,
-.voice-setting-row input[type="range"]::-moz-range-thumb {
+input[type="range"]::-webkit-slider-thumb:active {
+    transform: scale(0.87);
+}
+
+input[type="range"]::-moz-range-thumb {
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
@@ -1066,12 +1074,15 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     border: none;
 }
 
-#cropper-zoom::-moz-range-thumb:hover,
-.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
-    transform: scale(1.2);
+input[type="range"]::-moz-range-thumb:hover {
+    transform: scale(1.08);
     background: #fff;
 }
 
+input[type="range"]::-moz-range-thumb:active {
+    transform: scale(0.87);
+}
+
 roomcontent roomtopbar .room-action-pin,
 roomcontent roomtopbar .room-action-call {
     display: flex;
@@ -1713,13 +1724,6 @@ input:checked + .toggle-slider:before {
     display: flex;
     justify-content: space-between;
 }
-.voice-setting-row input[type="range"] {
-    margin: 0;
-    width: 100%;
-    appearance: none;
-    -webkit-appearance: none;
-    outline: none;
-}
 
 /* In-call Voice Device Settings Popup */
 #voice-device-settings {
diff --git a/webroot/style.css b/webroot/style.css
index 6506b747..f4b1f83e 100644
--- a/webroot/style.css
+++ b/webroot/style.css
@@ -774,7 +774,7 @@ space{
         border-radius: 0.8rem;
         transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
     }
-    button:hover, input:hover, textarea:hover {
+    button:hover, input:not([type="range"]):hover, textarea:hover {
         background-color: rgba(255, 255, 255, 0.1);
     }
     .submit-button:hover, .profile-action-btn:hover {
@@ -791,7 +791,11 @@ space{
         filter: brightness(0.93);
     }
 }
-button:active, button.is-pressed, input:active, input.is-pressed, textarea:active, textarea.is-pressed {
+/* Suwaki ([type=range]) są wyłączone z efektu klikania całego pola -
+   przytrzymanie skaluje tylko uchwyt (patrz ::-webkit-slider-thumb:active). */
+button:active, button.is-pressed,
+input:not([type="range"]):active, input:not([type="range"]).is-pressed,
+textarea:active, textarea.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
     transform: var(--press-scale);
 }
@@ -1021,15 +1025,18 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     height: auto;
 }
 
-/* Custom Zoom Slider Styling */
-#cropper-zoom,
-.voice-setting-row input[type="range"] {
+
+input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
+    display: block;
+    margin: 0;
+    padding: 0.4rem 0.05rem;
+    border: none;
     width: 100%;
     height: 0.375rem;
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 0.1875rem;
+    border-radius: 0.34rem;
     outline: none;
 }
 
@@ -1037,8 +1044,7 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     margin: 0.625rem 0;
 }
 
-#cropper-zoom::-webkit-slider-thumb,
-.voice-setting-row input[type="range"]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 1rem;
@@ -1049,14 +1055,16 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     transition: transform 0.2s, background 0.2s;
 }
 
-#cropper-zoom::-webkit-slider-thumb:hover,
-.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.08);
     background: #fff;
 }
 
-#cropper-zoom::-moz-range-thumb,
-.voice-setting-row input[type="range"]::-moz-range-thumb {
+input[type="range"]::-webkit-slider-thumb:active {
+    transform: scale(0.87);
+}
+
+input[type="range"]::-moz-range-thumb {
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
@@ -1066,12 +1074,15 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     border: none;
 }
 
-#cropper-zoom::-moz-range-thumb:hover,
-.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
-    transform: scale(1.2);
+input[type="range"]::-moz-range-thumb:hover {
+    transform: scale(1.08);
     background: #fff;
 }
 
+input[type="range"]::-moz-range-thumb:active {
+    transform: scale(0.87);
+}
+
 roomcontent roomtopbar .room-action-pin,
 roomcontent roomtopbar .room-action-call {
     display: flex;
@@ -1713,13 +1724,6 @@ input:checked + .toggle-slider:before {
     display: flex;
     justify-content: space-between;
 }
-.voice-setting-row input[type="range"] {
-    margin: 0;
-    width: 100%;
-    appearance: none;
-    -webkit-appearance: none;
-    outline: none;
-}
 
 /* In-call Voice Device Settings Popup */
 #voice-device-settings {