dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-24 12:35:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove tooltip constraining and vhange transition speed to variable

Browse source
This commit is contained in:
Send_Nukez 2021-09-28 20:24:05 +02:00
parent 927f25867c
commit 324f041729
2 changed files with 4 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
dribbblish.js
View file

@ -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;

8
user.css
View file

@ -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 {