fix hovering and multiple dots bug

This commit is contained in:
Jan Ochwat 2022-01-09 23:41:25 +01:00
parent 5f89a8f26b
commit 07c6d09870
No known key found for this signature in database
GPG Key ID: D33C79EB4FE970CE
2 changed files with 17 additions and 11 deletions

View File

@ -104,20 +104,22 @@
dot.classList.add("slider-dot"); dot.classList.add("slider-dot");
slider.appendChild(dot); slider.appendChild(dot);
} }
}, 10); }, 10);
waitForElement([".ExtraControls"], () => { waitForElement([".ExtraControls"], () => {
const element = document.querySelector(".ExtraControls"); const element = document.querySelector(".ExtraControls");
element.addEventListener("click", () => { element.addEventListener("click", () => {
waitForElement([".npv-main-container .progress-bar__slider"], () => { waitForElement([".npv-main-container .progress-bar__slider"], () => {
const sliders = document.getElementsByClassName("npv-main-container")[0].getElementsByClassName("progress-bar__slider"); const sliders = document.getElementsByClassName("npv-main-container")[0].getElementsByClassName("progress-bar__slider");
for (const slider of sliders) { for (const slider of sliders) {
const dot = document.createElement("div"); if(slider.dataset.dot === "true") { continue; }
dot.classList.add("slider-dot"); slider.dataset.dot = "true";
slider.appendChild(dot); const dot = document.createElement("div");
} dot.classList.add("slider-dot");
slider.appendChild(dot);
}
}, 10) }, 10)
}) })
}, 10); }, 10);
})(); })();

View File

@ -1368,7 +1368,7 @@ option {
.progress-bar__slider, .progress-bar__slider,
.giO6cIQ8auPNZuTvC4Y8 { .giO6cIQ8auPNZuTvC4Y8 {
background-color: var(--spice-selected-row) !important; 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-shadow: 0 0 3px 0 var(--spice-player-bar-shadow) !important;
box-sizing: content-box !important; box-sizing: content-box !important;
width: 10px; width: 10px;
@ -1390,12 +1390,16 @@ option {
transition: border-width 75ms ease; transition: border-width 75ms ease;
} }
.progress-bar__slider:hover .slider-dot:not(:hover) {
border-width: 7px;
}
.slider-dot:hover { .slider-dot:hover {
border-width: 7px; border-width: 7px;
} }
.slider-dot:active { .slider-dot:active {
border-width: 4px; border-width: 4px !important;
} }
.main-nowPlayingWidget-nowPlaying>.ellipsis-one-line, .main-nowPlayingWidget-nowPlaying>.ellipsis-one-line,