From 54e3893b85aa1480f1404aaf4d92d3f08bfe4170 Mon Sep 17 00:00:00 2001
From: Hussain <h.ali@vam.ac.uk>
Date: Thu, 8 Feb 2024 14:42:38 +0000
Subject: [PATCH] Scoping input[type=range] to .uv (#961)

---
 .../modules/uv-shared-module/css/range.less   | 212 +++++++++---------
 1 file changed, 107 insertions(+), 105 deletions(-)

diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/range.less b/src/content-handlers/iiif/modules/uv-shared-module/css/range.less
index 346c59f7c..eee385831 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/range.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/range.less
@@ -1,105 +1,107 @@
-
-/* WebKit */
-
-input[type=range] {
-    -webkit-appearance: none;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
-    width: 300px;
-    height: 5px;
-    background: @gray-light;
-    border: none;
-}
-
-input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: none;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-    background: @gray;
-    margin-top: -5px;
-}
-
-input[type=range]:focus {
-    outline: none;
-}
-
-input[type=range]:focus::-webkit-slider-runnable-track {
-    background: @gray-light;
-}
-
-/* Firefox */
-
-input[type=range] {
-    /*required for proper track sizing in FF*/
-    width: 300px;
-}
-
-input[type=range]::-moz-range-track {
-    width: 300px;
-    height: 5px;
-    background: #ddd;
-    border: none;
-}
-
-input[type=range]::-moz-range-thumb {
-    border: none;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-    background: @gray;
-}
-
-/*hide the outline behind the border*/
-input[type=range]:-moz-focusring {
-    outline: 1px solid white;
-    outline-offset: -1px;
-}
-
-input[type=range]:focus::-moz-range-track {
-    background: #ccc;
-}
-
-
-/* IE */
-
-input[type=range]::-ms-track {
-    width: 300px;
-    height: 5px;
-
-    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
-    background: transparent;
-
-    /*leave room for the larger thumb to overflow with a transparent border */
-    border-color: transparent;
-    border-width: 6px 0;
-
-    /*remove default tick marks*/
-    color: transparent;
-}
-
-input[type=range]::-ms-fill-lower {
-    background: @gray-light;
-}
-
-input[type=range]::-ms-fill-upper {
-    background: @gray-light;
-}
-
-input[type=range]::-ms-thumb {
-    border: none;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-    background: @gray;
-}
-
-input[type=range]:focus::-ms-fill-lower {
-    background:  @gray-light;
-}
-
-input[type=range]:focus::-ms-fill-upper {
-    background: @gray-lighter;
-}
+.uv {
+
+    /* WebKit */
+
+    input[type=range] {
+        -webkit-appearance: none;
+    }
+
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 300px;
+        height: 5px;
+        background: @gray-light;
+        border: none;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        border: none;
+        height: 16px;
+        width: 16px;
+        border-radius: 50%;
+        background: @gray;
+        margin-top: -5px;
+    }
+
+    input[type=range]:focus {
+        outline: none;
+    }
+
+    input[type=range]:focus::-webkit-slider-runnable-track {
+        background: @gray-light;
+    }
+
+    /* Firefox */
+
+    input[type=range] {
+        /*required for proper track sizing in FF*/
+        width: 300px;
+    }
+
+    input[type=range]::-moz-range-track {
+        width: 300px;
+        height: 5px;
+        background: #ddd;
+        border: none;
+    }
+
+    input[type=range]::-moz-range-thumb {
+        border: none;
+        height: 16px;
+        width: 16px;
+        border-radius: 50%;
+        background: @gray;
+    }
+
+    /*hide the outline behind the border*/
+    input[type=range]:-moz-focusring {
+        outline: 1px solid white;
+        outline-offset: -1px;
+    }
+
+    input[type=range]:focus::-moz-range-track {
+        background: #ccc;
+    }
+
+
+    /* IE */
+
+    input[type=range]::-ms-track {
+        width: 300px;
+        height: 5px;
+
+        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+        background: transparent;
+
+        /*leave room for the larger thumb to overflow with a transparent border */
+        border-color: transparent;
+        border-width: 6px 0;
+
+        /*remove default tick marks*/
+        color: transparent;
+    }
+
+    input[type=range]::-ms-fill-lower {
+        background: @gray-light;
+    }
+
+    input[type=range]::-ms-fill-upper {
+        background: @gray-light;
+    }
+
+    input[type=range]::-ms-thumb {
+        border: none;
+        height: 16px;
+        width: 16px;
+        border-radius: 50%;
+        background: @gray;
+    }
+
+    input[type=range]:focus::-ms-fill-lower {
+        background:  @gray-light;
+    }
+
+    input[type=range]:focus::-ms-fill-upper {
+        background: @gray-lighter;
+    }
+}
\ No newline at end of file