diff --git a/dribbblish.js b/dribbblish.js index 31a7ff3..057a179 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -157,19 +157,6 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => const newText = Spicetify.Player.formatTime(timeOverride || Spicetify.Player.getProgress()) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration()); // To reduce DOM Updates when the Song is Paused if (tooltip.innerText != newText) tooltip.innerText = newText; - - const tooltipWidth = tooltip.clientWidth; - const knobOffsets = progKnob.getBoundingClientRect(); - const barOffsets = progBar.getBoundingClientRect(); - const distFromLeft = knobOffsets.left + progKnob.clientWidth / 2 - barOffsets.left; - const distFromRight = Math.abs(knobOffsets.right - progKnob.clientWidth / 2 - barOffsets.right); - if (distFromLeft < tooltipWidth / 2 + 10) { - tooltip.style.setProperty("--padding-offset", `${tooltipWidth / 2 + 10 - distFromLeft}px`); - } else if (distFromRight < tooltipWidth / 2 + 10) { - tooltip.style.setProperty("--padding-offset", `-${tooltipWidth / 2 + 10 - distFromRight}px`); - } else { - tooltip.style.setProperty("--padding-offset", "0px"); - } } const knobPosObserver = new MutationObserver((muts) => { const progressPercentage = Number(getComputedStyle(document.querySelector(".progress-bar")).getPropertyValue("--progress-bar-transform").replace("%", "")) / 100; diff --git a/user.css b/user.css index 6e8a9ec..1f0e431 100644 --- a/user.css +++ b/user.css @@ -5,6 +5,7 @@ --main-corner-radius: 10px; --scrollbar-vertical-size: 8px; --cover-border-radius: 8px; + --playbar-movement-anim-speed: 0.5s; --os-windows-icon-dodge: 0; } @@ -438,7 +439,7 @@ html.sidebar-hide-text .GlueDropTarget span { } .progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div { - transition: transform 0.2s ease; + transition: transform var(--playbar-movement-anim-speed) ease; } .progress-bar:not(:active) .progress-bar__slider { @@ -446,12 +447,11 @@ html.sidebar-hide-text .GlueDropTarget span { } .playback-bar .prog-tooltip { - --padding-offset: 0px; position: absolute; min-width: 100px; top: -35px; left: 50%; - transform: translateX(calc(-50% + var(--padding-offset))); + transform: translateX(calc(-50%)); padding: 0 5px; border-radius: 4px; text-align: center; @@ -460,7 +460,7 @@ html.sidebar-hide-text .GlueDropTarget span { } .playback-bar:not(:active) .prog-tooltip { - transition: transform 0.2s ease; + transition: transform var(--playbar-movement-anim-speed) ease; } .minimal-player .player-controls__buttons {