From 07c6d09870c18729e25374882ebb9865d4252295 Mon Sep 17 00:00:00 2001
From: Jan Ochwat <janochwat@yahoo.com>
Date: Sun, 9 Jan 2022 23:41:25 +0100
Subject: [PATCH] fix hovering and multiple dots bug

---
 Fluent/fluent.js | 20 +++++++++++---------
 Fluent/user.css  |  8 ++++++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/Fluent/fluent.js b/Fluent/fluent.js
index 056ce32..46b0457 100644
--- a/Fluent/fluent.js
+++ b/Fluent/fluent.js
@@ -104,20 +104,22 @@
       dot.classList.add("slider-dot");
       slider.appendChild(dot);
     }
-    }, 10);
+  }, 10);
     
     
-    waitForElement([".ExtraControls"], () => {
+  waitForElement([".ExtraControls"], () => {
     const element = document.querySelector(".ExtraControls");
     element.addEventListener("click", () => {
       waitForElement([".npv-main-container .progress-bar__slider"], () => {
-      const sliders = document.getElementsByClassName("npv-main-container")[0].getElementsByClassName("progress-bar__slider");
-      for (const slider of sliders) {
-        const dot = document.createElement("div");
-        dot.classList.add("slider-dot");
-        slider.appendChild(dot);
-      }
+        const sliders = document.getElementsByClassName("npv-main-container")[0].getElementsByClassName("progress-bar__slider");
+        for (const slider of sliders) {
+          if(slider.dataset.dot === "true") { continue; }
+          slider.dataset.dot = "true";
+          const dot = document.createElement("div");
+          dot.classList.add("slider-dot");
+          slider.appendChild(dot);
+        }
       }, 10)
     })
-    }, 10);
+  }, 10);
 })();
diff --git a/Fluent/user.css b/Fluent/user.css
index 99d49f6..24ff1b1 100644
--- a/Fluent/user.css
+++ b/Fluent/user.css
@@ -1368,7 +1368,7 @@ option {
 .progress-bar__slider,
 .giO6cIQ8auPNZuTvC4Y8 {
   background-color: var(--spice-selected-row) !important;
-  border: 5px solid var(--spice-selected-row);
+  border: 6px solid var(--spice-selected-row);
   box-shadow: 0 0 3px 0 var(--spice-player-bar-shadow) !important;
   box-sizing: content-box !important;
   width: 10px;
@@ -1390,12 +1390,16 @@ option {
   transition: border-width 75ms ease;
 }
 
+.progress-bar__slider:hover .slider-dot:not(:hover) {
+  border-width: 7px;
+}
+
 .slider-dot:hover {
   border-width: 7px;
 }
 
 .slider-dot:active {
-  border-width: 4px;
+  border-width: 4px !important;
 }
 
 .main-nowPlayingWidget-nowPlaying>.ellipsis-one-line,