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

[Feature] CountdownsType Split (#1990)

Browse source 
* Toggle pills

* Finished animation framework

* .

* Fixed localization

* Fixed iconOnly

* Updated SRD Action Countdown types

* feat: add shimmer animation when change countdown value

* Fixed so that hidden countdowns don't take up space

* Fixed countdowns.hbs part using wrong context for iconOnly

* Restored glow animation for category chip

* Changed back to a single sheen effect

* [Review] Move visible countdown types to getter (#1999)

* Move visible countdown types to getter

* Punchier shimmer animation

* Restored encounter/narrative

* Lang cleanup

* .

---------

Co-authored-by: Murilo Brito <dev.murilobrito@gmail.com>
Co-authored-by: Carlos Fernandez <CarlosFdez@users.noreply.github.com>
This commit is contained in:
WBHarry 2026-06-16 22:23:13 +02:00 • committed by GitHub
parent 3a3aa17a1c
commit d2e87e4eb9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 267 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,7 +22,6 @@
pointer-events: all;
align-self: flex-end;
transition: 0.3s right ease-in-out;
display: flex;
flex-direction: column;
@ -65,12 +64,35 @@
padding: 0 0.5rem;
overflow: hidden;
font-size: var(--font-size-13);
.window-title {
font-family: @font-body;
flex: 1;
}
.header-control + .header-control {
margin-left: 8px;
.header-type-toggles {
flex: 1;
display: flex;
align-items: center;
gap: 4px;
.header-type {
flex: 1;
border: 1px solid @beige;
border-radius: 12px;
padding: 2px 4px;
text-align: center;
background-color: @dark-blue;
color: @beige;
&.inactive {
opacity: 0.4;
}
&.change-glow {
animation: glow 1s ease-in-out infinite;
}
}
}
}
@ -82,9 +104,27 @@
overflow: auto;
max-height: 312px;
.countdown-category-container {
display: flex;
flex-direction: column;
gap: 8px;
&.hidden {
display: none;
}
}
.countdown-container {
display: flex;
width: 100%;
border-radius: 6px;
&.change-glow {
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%
}
&.icon-only {
gap: 8px;
@ -105,6 +145,7 @@
display: flex;
align-items: center;
gap: 16px;
border-radius: 6px;
img {
width: 2.75rem;
@ -184,4 +225,23 @@
// }
}
}
@keyframes glow {
0% {
box-shadow: 0 0 1px 1px @golden;
}
100% {
box-shadow: 0 0 2px 2px @golden;
}
}
@keyframes shimmer {
from {
background-position-x: 98%;
}
to {
background-position-x: 0%
}
}
}