fix effects panel position when persistent hud isn't enabled

src/hud/tracker.ts

@@ -450,7 +450,7 @@ class PF2eHudTracker extends PF2eHudBase<TrackerSettings, any, TrackerRenderOpti
         const offsetHeight = this.#trackerHeight.offsetHeight;
         effectsPanel.style.setProperty(
             "max-height",
-            `calc(100% - ${offsetHeight}px - (var(--panel-gap) * 3) - 4px)`
+            `calc(100% - ${offsetHeight}px - (var(--pf2e-hud-panel-gap) * 3) - 4px)`
         );
     }
 

styles/_persistent.scss

@@ -1,15 +1,17 @@
-$bottom-width: 542px;
+:root {
+    --pf2e-hud-hotbar-width: 542px;
+}
 
 #pf2e-hud-persistent {
     --hud-height: 8em;
 
     display: flex;
     align-items: flex-start;
     font-size: var(--font-size);
-    gap: var(--panel-gap);
+    gap: var(--pf2e-hud-panel-gap);
     width: var(--players-width);
     height: calc(var(--hotbar-height) + var(--hud-height));
-    margin: 0 var(--panel-gap) var(--interface-margin) 15px;
+    margin: 0 var(--pf2e-hud-panel-gap) var(--interface-margin) 15px;
     padding: 0;
     z-index: var(--z-index-app);
 
@@ -28,9 +30,9 @@ $bottom-width: 542px;
         position: absolute;
         top: 100%;
         left: 0;
-        width: $bottom-width;
+        width: var(--pf2e-hud-hotbar-width);
         margin-left: -2px;
-        margin-bottom: var(--panel-gap);
+        margin-bottom: var(--pf2e-hud-panel-gap);
         font-size: var(--font-size-14);
 
         #macro-list,
@@ -197,12 +199,12 @@ $bottom-width: 542px;
     display: flex;
     width: fit-content;
     height: var(--hud-height);
-    gap: var(--panel-gap);
+    gap: var(--pf2e-hud-panel-gap);
 
     .group {
         display: grid;
         grid-template-rows: var(--one-three-rows);
-        gap: var(--panel-gap);
+        gap: var(--pf2e-hud-panel-gap);
 
         .panel {
             padding: var(--panel-padding-block) calc(var(--panel-padding-inline) + 0.1em)
@@ -239,7 +241,7 @@ $bottom-width: 542px;
 
             .top {
                 display: flex;
-                gap: var(--panel-gap);
+                gap: var(--pf2e-hud-panel-gap);
 
                 .sidebars,
                 .shortcut-menus {
@@ -290,7 +292,7 @@ $bottom-width: 542px;
             .bottom {
                 grid-row: 2 / 3;
                 display: flex;
-                gap: var(--panel-gap);
+                gap: var(--pf2e-hud-panel-gap);
             }
         }
     }
@@ -299,7 +301,7 @@ $bottom-width: 542px;
 #pf2e-hud-persistent-shortcuts {
     flex: 1;
     display: grid;
-    gap: var(--panel-gap);
+    gap: var(--pf2e-hud-panel-gap);
     justify-content: start;
     grid-auto-rows: 1fr;
     grid-auto-flow: column;
@@ -777,8 +779,8 @@ $bottom-width: 542px;
     pointer-events: auto;
     justify-content: unset;
     align-items: end;
-    max-width: calc($bottom-width + 3px);
-    margin-bottom: var(--panel-gap);
+    max-width: calc(var(--pf2e-hud-hotbar-width) + 3px);
+    margin-bottom: var(--pf2e-hud-panel-gap);
     gap: 0.2em;
     flex-wrap: wrap-reverse;
 

styles/_shared.scss

@@ -1,20 +1,21 @@
-$panel-gap: 5px;
+:root {
+    --pf2e-hud-panel-gap: 5px;
+}
 
 .pf2e-hud {
     --icon-width: 1.4em;
     --icon-color: #d4d7de;
 
     --inline-gap: 0.2em;
     --section-gap: 0.1em 0.4em;
-    --interface-margin: var(--panel-gap);
+    --interface-margin: var(--pf2e-hud-panel-gap);
 
     --outer-background: url("../../../ui/denim075.png") repeat #4d4d4d;
     --outer-box-shadow: 0 0 20px var(--color-shadow-dark);
     --outer-border-width: 1px;
     --outer-border: var(--outer-border-width) solid var(--color-border-dark);
     --outer-border-radius: 4px;
 
-    --panel-gap: #{$panel-gap};
     --panel-padding-block: 0.2em;
     --panel-padding-inline: 0.3em;
 
@@ -314,12 +315,12 @@ $panel-gap: 5px;
 }
 
 #interface.has-hud-persistent {
-    --panel-gap: #{$panel-gap};
+    --panel-gap: var(--pf2e-hud-panel-gap);
 }
 
 #interface.has-hud-tracker {
     #fps {
-        --panel-gap: #{$panel-gap};
+        --panel-gap: var(--pf2e-hud-panel-gap);
 
         margin: 0 18em var(--panel-gap) 0;
     }

styles/_tracker.scss

@@ -1,8 +1,10 @@
-$threat-trivial: aqua;
-$threat-low: lime;
-$threat-moderate: yellow;
-$threat-severe: orange;
-$threat-extreme: red;
+:root {
+    --pf2e-hud-threat-trivial: aqua;
+    --pf2e-hud-threat-low: lime;
+    --pf2e-hud-threat-moderate: yellow;
+    --pf2e-hud-threat-severe: orange;
+    --pf2e-hud-threat-extreme: red;
+}
 
 #pf2e-hud-tracker {
     --border-top: 1px solid rgba(255, 255, 255, 0.06);
@@ -270,23 +272,23 @@ $threat-extreme: red;
                 text-shadow: 1px 1px 4px var(--color-shadow-dark);
 
                 &.trivial {
-                    color: $threat-trivial;
+                    color: var(--pf2e-hud-threat-trivial);
                 }
 
                 &.low {
-                    color: $threat-low;
+                    color: var(--pf2e-hud-threat-low);
                 }
 
                 &.moderate {
-                    color: $threat-moderate;
+                    color: var(--pf2e-hud-threat-moderate);
                 }
 
                 &.severe {
-                    color: $threat-severe;
+                    color: var(--pf2e-hud-threat-severe);
                 }
 
                 &.extreme {
-                    color: $threat-extreme;
+                    color: var(--pf2e-hud-threat-extreme);
                 }
             }
         }
@@ -370,7 +372,9 @@ $threat-extreme: red;
     #effects-panel {
         --cell-width: 52px;
 
-        top: var(--panel-gap);
+        top: var(--pf2e-hud-panel-gap);
+        right: calc(var(--pf2e-hud-panel-gap) * -1);
+
         max-height: calc(100% - var(--combatant-height) * 2 - 4em);
 
         .effects-list {
@@ -428,23 +432,23 @@ aside.locked-tooltip {
 
         .threat {
             &.trivial {
-                color: $threat-trivial;
+                color: var(--pf2e-hud-threat-trivial);
             }
 
             &.low {
-                color: $threat-low;
+                color: var(--pf2e-hud-threat-low);
             }
 
             &.moderate {
-                color: $threat-moderate;
+                color: var(--pf2e-hud-threat-moderate);
             }
 
             &.severe {
-                color: $threat-severe;
+                color: var(--pf2e-hud-threat-severe);
             }
 
             &.extreme {
-                color: $threat-extreme;
+                color: var(--pf2e-hud-threat-extreme);
             }
         }