155 lines
2.6 KiB
CSS
155 lines
2.6 KiB
CSS
@property --hue {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
@property --opacity {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
@property --scale {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
@property --uiScale {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
@property --shimmer {
|
|
initial-value: '';
|
|
inherits: false;
|
|
syntax: '<custom-ident>';
|
|
}
|
|
@property --offsetX {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
@property --offsetY {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
@property --randomnessX {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
@property --randomnessY {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<number>';
|
|
}
|
|
|
|
.damage {
|
|
--hue: 0;
|
|
--opacity: 0.75;
|
|
--randomnessX: 0;
|
|
--randomnessY: 0;
|
|
--scale: 0.35;
|
|
--background: hsl(var(--hue) 100% 12.5%);
|
|
--foreground: hsl(var(--hue) 100% 50%);
|
|
animation:
|
|
fade 1.5s linear forwards,
|
|
grow 1.5s ease-in forwards,
|
|
move 1.5s cubic-bezier(0.5, 1, 0.89, 1),
|
|
var(--shimmer) 300ms infinite cubic-bezier(0.87, 0, 0.13, 1)
|
|
;
|
|
color: var(--foreground);
|
|
font-size: calc(5px + (var(--magnitude) * 6px));
|
|
opacity: var(--opacity);
|
|
overflow-wrap: break-word;
|
|
position: absolute;
|
|
margin: 0;
|
|
text-shadow:
|
|
0px -1px 0px var(--background),
|
|
1px 0px 0px var(--background),
|
|
0px 1px 0px var(--background),
|
|
-1px 0px 0px var(--background),
|
|
0px -2px 0px var(--background),
|
|
2px 0px 0px var(--background),
|
|
0px 2px 0px var(--background),
|
|
-2px 0px 0px var(--background)
|
|
;
|
|
scale: var(--scale);
|
|
translate:
|
|
calc(-50% + (1px * var(--offsetX)) + var(--positionX))
|
|
calc(-50% + (1px * var(--offsetY)) + var(--positionY))
|
|
;
|
|
user-select: none;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {
|
|
--offsetX: 0;
|
|
--offsetY: 0;
|
|
}
|
|
33%, 91.6% {
|
|
--offsetX: calc(20 * var(--uiScale) * var(--randomnessX));
|
|
--offsetY: calc(-1 * (10 + var(--randomnessY) * 22.5 * var(--uiScale)));
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
--opacity: 0.75;
|
|
}
|
|
25% {
|
|
--opacity: 1;
|
|
}
|
|
91.6% {
|
|
--opacity: 1;
|
|
}
|
|
100% {
|
|
--opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes grow {
|
|
0% {
|
|
--scale: 0.35;
|
|
}
|
|
33% {
|
|
--scale: 1;
|
|
}
|
|
45% {
|
|
--scale: 1;
|
|
}
|
|
40% {
|
|
--scale: 1.5;
|
|
}
|
|
45% {
|
|
--scale: 1;
|
|
}
|
|
91.6% {
|
|
--scale: 1;
|
|
}
|
|
95% {
|
|
--scale: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pain {
|
|
0% { --hue: 0 }
|
|
50% { --hue: 30 }
|
|
100% { --hue: 0 }
|
|
}
|
|
|
|
@keyframes healing {
|
|
0% { --hue: 120 }
|
|
50% { --hue: 90 }
|
|
100% { --hue: 120 }
|
|
}
|
|
|
|
@keyframes mana {
|
|
0% { --hue: 220 }
|
|
50% { --hue: 215 }
|
|
100% { --hue: 220 }
|
|
}
|