diff --git a/scss/components/shared/_ruler.scss b/scss/components/shared/_ruler.scss index 58593411..3fdb0065 100644 --- a/scss/components/shared/_ruler.scss +++ b/scss/components/shared/_ruler.scss @@ -6,26 +6,37 @@ /* Token Ruler Waypoint Styling with Color-Coded Movement Ranges */ -:root { - --ds4-movement-normal: inherit; - --ds4-movement-dash: #ffcc00; - --ds4-movement-impossible: #e83031; -} - .system-ds4 .waypoint-label { + font-size: 1.5em; + + // 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; + } + .distance { &.move-range { - color: var(--ds4-movement-normal); + color: var(--color-level-success); } &.dash-range { - color: var(--ds4-movement-dash); + color: var(--color-level-warning); font-weight: bold; } &.out-of-range { - color: var(--ds4-movement-impossible); + color: var(--color-level-error); font-weight: bold; + animation: pulse 2s infinite; } } @@ -40,10 +51,12 @@ } } -/* Dark mode support */ -@media (prefers-color-scheme: dark) { - :root { - --ds4-movement-dash: #ffd700; - --ds4-movement-impossible: #ff4444; +/* Icon animations */ +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.6; } } diff --git a/templates/partials/waypoint-label.hbs b/templates/partials/waypoint-label.hbs index 58983d5c..90639703 100644 --- a/templates/partials/waypoint-label.hbs +++ b/templates/partials/waypoint-label.hbs @@ -9,7 +9,11 @@ SPDX-License-Identifier: MIT !-- Based on DS4 movement combat values --}}
- {{#if action.icon}} + {{#if (eq rangeClass "dash-range")}} + + {{else if (eq rangeClass "out-of-range")}} + + {{else if action.icon}} {{else if action.label}} {{localize action.label}}