Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-25 12:22:32 +01:00
Code Issues Projects Releases Activity

Added slider dot animation

Browse Source
This commit is contained in:
Jan Ochwat 2022-01-09 21:44:36 +01:00
parent c01f926038
commit 84ad9a5877
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Fluent/fluent.js
View File

@ -97,4 +97,27 @@
document.getElementsByTagName('head')[0].appendChild(playButtonStyle);
}, 10)
waitForElement([".progress-bar__slider"], () => {
const sliders = document.getElementsByClassName("progress-bar__slider");
for (const slider of sliders) {
const dot = document.createElement("div");
dot.classList.add("slider-dot");
slider.appendChild(dot);
}
}, 10);
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);
}
}, 10)
})
}, 10);
})();

21
Fluent/user.css
View File

@ -1367,16 +1367,29 @@ option {
.progress-bar__slider,
.giO6cIQ8auPNZuTvC4Y8 {
background-color: var(--spice-accent) !important;
border: 4px solid var(--spice-selected-row);
background-color: var(--spice-selected-row) !important;
border: 5px solid var(--spice-selected-row);
box-shadow: 0 0 3px 0 var(--spice-player-bar-shadow) !important;
box-sizing: content-box !important;
width: 11px;
height: 11px;
width: 10px;
height: 10px;
opacity: 1 !important;
display: block;
}
.slider-dot {
width: 3px;
height: 3px;
background-color: var(--spice-accent);
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid var(--spice-accent);
border-radius: 50%;
transition: border-width 75ms ease;
}
.main-nowPlayingWidget-nowPlaying>.ellipsis-one-line,
.main-trackInfo-container {
margin-left: 74px;