From 0d3e7f816879325af4b2fa8dbcac1c4d39670007 Mon Sep 17 00:00:00 2001
From: AlexanderRebai <alexander.rebai@student.hogent.be>
Date: Tue, 19 Jul 2022 08:47:31 +0000
Subject: [PATCH] fixed levels slider with elevator icon in firefox

---
 css/index-tailwind-output.css | 71 +++++++++++++++++++----------------
 index.css                     |  7 ++--
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css
index b8b950474..71a4ae761 100644
--- a/css/index-tailwind-output.css
+++ b/css/index-tailwind-output.css
@@ -803,18 +803,10 @@ video {
   float: none;
 }
 
-.m-8 {
-  margin: 2rem;
-}
-
 .m-1 {
   margin: 0.25rem;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -835,6 +827,14 @@ video {
   margin: 0.75rem;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-6 {
   margin: 1.5rem;
 }
@@ -866,6 +866,10 @@ video {
   margin-top: 2rem;
 }
 
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -2040,34 +2044,35 @@ input[type="range"].vertical {
   -webkit-appearance: slider-vertical;
   /* Chromium */
   width: 8px;
-  height: 310px;
-  padding: 0 5px;
+  height: 180px;
+  padding: 31px 5px 0 5px;
+  cursor: pointer;
 }
 
-.elevatorslider::-webkit-slider-thumb {
-  width: 100px;
-  height: 100px;
-  border: 0;
-  background-color: #00000000 !important;
-  background-image: url("/assets/svg/elevator.svg");
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  position: relative;
-  z-index: 2;
-}
+@-moz-document url-prefix() {
+  input[type="range"].vertical {
+    height: 269px !important;
+    width: 65px !important;
+  }
 
-.elevatorslider::-moz-range-thumb {
-  width: 100px;
-  height: 100px;
-  border: 0;
-  background-color: #00000000 !important;
-  background-image: url("/assets/svg/elevator.svg");
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat;
-  cursor: pointer;
+  .valuesContainer {
+    padding-top: 30px;
+  }
+
+  input[type="range"].vertical::-moz-range-thumb {
+    width: 150px;
+    height: 30px;
+    border: 2px;
+    border-style: solid;
+    background-color: #00000000 !important;
+    background-image: url("/assets/svg/elevator_wheelchair.svg");
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    border-image: linear-gradient(to right, black 50%, transparent 50%) 100% 1;
+    padding-bottom: 5px;
+  }
 }
 
 .border-detail {
diff --git a/index.css b/index.css
index ffaecf572..50b5c9e0e 100644
--- a/index.css
+++ b/index.css
@@ -234,22 +234,21 @@ input[type="range"].vertical {
   -webkit-appearance: slider-vertical; /* Chromium */
   width: 8px;
   height: 180px;
-  padding: 0 5px;
+  padding: 31px 5px 0 5px;
   cursor: pointer;
 }
 
 @-moz-document url-prefix() {
   input[type="range"].vertical {
-    height: 280px !important;
+    height: 269px !important;
     width: 65px !important;
-    padding-top: 25px;
   }
   .valuesContainer {
     padding-top: 30px;
   }
   input[type="range"].vertical::-moz-range-thumb {
     width: 150px;
-    height: 35px;
+    height: 30px;
     border: 2px;
     border-style: solid;
     background-color: #00000000 !important;