cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-07-23 10:59: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.countdownChangeAnimationTimeout = setTimeout(() => {
this.changedCountdownsForAnimation.clear(); 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'); element.classList.remove('change-glow');
} }
for (const element of this.element.querySelectorAll('.header-type-toggles .header-type')) {
element.classList.remove('change-glow');
}
}, 3000); }, 3000);
/* If the countdown is not currently visible, add a glow to the CountdownType pill */ /* 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'); .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}"]`); const countdownElement = this.element.querySelector(`.countdown-container[data-countdown="${countdownKey}"]`);
if (!countdownElement) continue; if (!countdownElement) continue;

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

@ -120,7 +120,7 @@
border-radius: 6px; border-radius: 6px;
&.change-glow { &.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: linear-gradient(-45deg, transparent 30%, light-dark(@dark-blue-40, @golden-40) 35%, transparent 40%);
background-size: 300%; background-size: 300%;
background-position-x: 100% background-position-x: 100%
@ -237,6 +237,9 @@
} }
@keyframes shimmer { @keyframes shimmer {
from {
background-position-x: 98%;
}
to { to {
background-position-x: 0% background-position-x: 0%
} }