72 lines
1.5 KiB
CSS
72 lines
1.5 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 --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%);
|
|
color: var(--foreground);
|
|
font-size: calc(10px + (var(--magnitude) * 12px));
|
|
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;
|
|
will-change: color, scale, opacity, translate, transform;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|