Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: enhance movement waypoint styling with semantic colors and

Browse source 
animations
This commit is contained in:
Alexander Minges 2025-07-13 16:49:21 +02:00
parent 7faadf6583
commit 4479cdc4de
Signed by: Athemis
GPG key ID: 31FBDEF92DDB162B
2 changed files with 32 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

39
scss/components/shared/_ruler.scss
View file

@ -6,26 +6,37 @@
/* Token Ruler Waypoint Styling with Color-Coded Movement Ranges */ /* Token Ruler Waypoint Styling with Color-Coded Movement Ranges */
:root { .system-ds4 .waypoint-label {
--ds4-movement-normal: inherit; font-size: 1.5em;
--ds4-movement-dash: #ffcc00;
--ds4-movement-impossible: #e83031; // Main icon styling for movement types
&.move-range > i.fa-person-walking {
color: var(--color-level-success);
}
&.dash-range > i.fa-person-running {
color: var(--color-level-warning);
}
&.out-of-range > i.fa-person-rays {
color: var(--color-level-error);
animation: pulse 2s infinite;
} }
.system-ds4 .waypoint-label {
.distance { .distance {
&.move-range { &.move-range {
color: var(--ds4-movement-normal); color: var(--color-level-success);
} }
&.dash-range { &.dash-range {
color: var(--ds4-movement-dash); color: var(--color-level-warning);
font-weight: bold; font-weight: bold;
} }
&.out-of-range { &.out-of-range {
color: var(--ds4-movement-impossible); color: var(--color-level-error);
font-weight: bold; font-weight: bold;
animation: pulse 2s infinite;
} }
} }
@ -40,10 +51,12 @@
} }
} }
/* Dark mode support */ /* Icon animations */
@media (prefers-color-scheme: dark) { @keyframes pulse {
:root { 0%, 100% {
--ds4-movement-dash: #ffd700; opacity: 1;
--ds4-movement-impossible: #ff4444; }
50% {
opacity: 0.6;
} }
} }

6
templates/partials/waypoint-label.hbs
View file

@ -9,7 +9,11 @@ SPDX-License-Identifier: MIT
!-- Based on DS4 movement combat values !-- Based on DS4 movement combat values
--}} --}}
<div class="waypoint-label {{rangeClass}}"> <div class="waypoint-label {{rangeClass}}">
{{#if action.icon}} {{#if (eq rangeClass "dash-range")}}
<i class="fas fa-person-running"></i>
{{else if (eq rangeClass "out-of-range")}}
<i class="fas fa-person-rays"></i>
{{else if action.icon}}
<i class="{{action.icon}}"></i> <i class="{{action.icon}}"></i>
{{else if action.label}} {{else if action.label}}
{{localize action.label}} {{localize action.label}}