cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-07-22 02:19:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Punchier shimmer animation

Browse source
This commit is contained in:
Carlos Fernandez 2026-06-13 20:01:34 -04:00
parent 759829585f
commit edfc366061
2 changed files with 7 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
module/applications/ui/countdowns.mjs
View file

@ -103,14 +103,10 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
this.countdownChangeAnimationTimeout = setTimeout(() => {
this.changedCountdownsForAnimation.clear();
for (const element of this.element.querySelectorAll('.countdown-container')) {
const selector = '.countdown-container, .header-type-toggles .header-type';
for (const element of this.element.querySelectorAll(selector)) {
element.classList.remove('change-glow');
}
for (const element of this.element.querySelectorAll('.header-type-toggles .header-type')) {
element.classList.remove('change-glow');
}
}, 3000);
/* If the countdown is not currently visible, add a glow to the CountdownType pill */
@ -123,7 +119,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
.classList.add('change-glow');
}
/* If the countdown element is not rendered the user doesn't have permissiosn to it. No animation needed on the elment itself */
/* If the countdown element is not rendered the user doesn't have permissions to it. No animation needed on the elment itself */
const countdownElement = this.element.querySelector(`.countdown-container[data-countdown="${countdownKey}"]`);
if (!countdownElement) continue;

5
styles/less/ui/countdown/countdown.less
View file

@ -120,7 +120,7 @@
border-radius: 6px;
&.change-glow {
animation: shimmer 1s ease-in-out;
animation: shimmer 1s ease-out;
background: linear-gradient(-45deg, transparent 30%, light-dark(@dark-blue-40, @golden-40) 35%, transparent 40%);
background-size: 300%;
background-position-x: 100%
@ -237,6 +237,9 @@
}
@keyframes shimmer {
from {
background-position-x: 98%;
}
to {
background-position-x: 0%
}