From edfc36606181c8f930a49f30f4f46ff0e00d8233 Mon Sep 17 00:00:00 2001 From: Carlos Fernandez Date: Sat, 13 Jun 2026 20:01:34 -0400 Subject: [PATCH] Punchier shimmer animation --- module/applications/ui/countdowns.mjs | 10 +++------- styles/less/ui/countdown/countdown.less | 5 ++++- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/module/applications/ui/countdowns.mjs b/module/applications/ui/countdowns.mjs index 72a6ef6f..165f923b 100644 --- a/module/applications/ui/countdowns.mjs +++ b/module/applications/ui/countdowns.mjs @@ -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; diff --git a/styles/less/ui/countdown/countdown.less b/styles/less/ui/countdown/countdown.less index aad1441d..d7cc83ff 100644 --- a/styles/less/ui/countdown/countdown.less +++ b/styles/less/ui/countdown/countdown.less @@ -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% }