Fix tracker styling issues when left aligned or scrolling

Author: CarlosFdez

module/clock-panel.mjs

@@ -118,7 +118,8 @@ export class ClockPanel extends fapi.HandlebarsApplicationMixin(fapi.Application
         // Update the last rendered list (to get ready for next cycle)
         this.lastRendered = rendered;
 
-        for (const clock of html.querySelectorAll(".clock-entry.editable :where(.clock, .points, .tracker)")) {
+        const elements = [".clock-element", ".points-element", ".tracker-element"].join(", ");
+        for (const clock of html.querySelectorAll(`.clock-entry.editable :where(${elements})`)) {
             clock.addEventListener("click", (event) => {
                 const clockId = event.target.closest("[data-id]").dataset.id;
                 const clock = this.db.get(clockId);

styles/style.css

@@ -73,7 +73,7 @@ body:has(#effects-panel .effect-item) #clock-panel {
 
     /** Flip everything when left aligned */
     &.left {
-        .clock-entry {
+        .clock-entry:not(.tracker) {
             flex-direction: row-reverse;
             &::before {
                 border-radius: calc(var(--entry-height) / 2) 4px 4px calc(var(--entry-height) / 2);
@@ -150,21 +150,23 @@ body:has(#effects-panel .effect-item) #clock-panel {
     min-width: var(--entry-width);
     max-width: var(--max-entry-width);
 
-    &::before {
-        content: " ";
-        position: absolute;
-        width: 100%;
-        height: 100%;
+    &:not(.tracker) {
+        &::before {
+            content: " ";
+            position: absolute;
+            width: 100%;
+            height: 100%;
 
-        border-radius: 4px calc(var(--entry-height) / 2) calc(var(--entry-height) / 2) 4px;
-        background: var(--control-bg-color);
-        border: 1px solid var(--control-border-color);
-        z-index: 0;
-    }
+            border-radius: 4px calc(var(--entry-height) / 2) calc(var(--entry-height) / 2) 4px;
+            background: var(--control-bg-color);
+            border: 1px solid var(--control-border-color);
+            z-index: 0;
+        }
 
-    &.private::before {
-        border-color: var(--private-highlight-color);
-        box-shadow: 0 0 3px inset var(--private-highlight-color);
+        &.private::before {
+            border-color: var(--private-highlight-color);
+            box-shadow: 0 0 3px inset var(--private-highlight-color);
+        }
     }
 
     &.hidden {
@@ -223,7 +225,106 @@ body:has(#effects-panel .effect-item) #clock-panel {
         }
     }
 
-    .points {
+    /* Show controls, hide real name, when hovering */
+    &:has(.controls):hover {
+        .controls {
+            display: flex;
+        }
+
+        .name > .value {
+            visibility: hidden;
+        }
+    }
+
+    &.editable .graphic {
+        cursor: pointer;
+    }
+
+    /* Tracker Styles */
+    &:has(.tracker-container) {
+        height: auto;
+        min-height: var(--entry-height);
+        background: transparent;
+        border: none;
+        justify-content: flex-end;
+    }
+
+    &:has(.tracker-container)::before {
+        display: none;
+    }
+
+    &:has(.tracker-container) > .name {
+        display: none;
+    }
+
+    &.tracker {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+        width: 100%;
+        justify-content: flex-end;
+        height: unset;
+
+        .name {
+            align-items: center;
+            align-self: center;
+            background: var(--control-bg-color);
+            border-radius: 4px 4px 0 0;
+            border: 1px solid var(--control-border-color);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            color: var(--control-icon-color);
+            display: flex;
+            font-size: 14px;
+            gap: 8px;
+            justify-content: space-between; 
+            max-width: none;
+            padding: 0 8px;
+            position: relative;
+            white-space: nowrap;
+            width: 100%;
+            flex: 1 0 1.5rem;
+
+            .value {
+                order: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: right;
+                flex: 1;
+            }
+
+            .tracker-controls {
+                display: none;
+                order: 1;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                gap: 1px; 
+                border-radius: inherit;
+                flex-shrink: 0;
+                font-size: 0.85em; 
+
+                a {
+                    color: white;
+                    cursor: pointer;
+                }
+            }
+
+            &:hover .tracker-controls {
+                display: flex;
+            }
+        }
+
+        &:hover .value {
+            opacity: 1;
+            transition: opacity 0s;
+        }
+    }
+}
+
+/** Styling for the actual element, separated for reusability */
+#clock-panel {
+    .points-element {
         background: white;
         border-radius: 25%;
         border: black 2px solid;
@@ -244,7 +345,7 @@ body:has(#effects-panel .effect-item) #clock-panel {
         z-index: 1;
     }
 
-    .clock {
+    .clock-element {
         width: var(--entry-height);
         height: var(--entry-height);
 
@@ -277,103 +378,10 @@ body:has(#effects-panel .effect-item) #clock-panel {
         }
     }
 
-    /* Show controls, hide real name, when hovering */
-    &:has(.controls):hover {
-        .controls {
-            display: flex;
-        }
-
-        .name > .value {
-            visibility: hidden;
-        }
-    }
-
-    &.editable {
-        .points,
-        .clock,
-        .tracker {
-            cursor: pointer;
-        }
-    }
-
-    /* Tracker Styles */
-    &:has(.tracker-container) {
-        height: auto;
-        min-height: var(--entry-height);
-        background: transparent;
-        border: none;
-        justify-content: flex-end;
-    }
-
-    &:has(.tracker-container)::before {
-        display: none;
-    }
-
-    &:has(.tracker-container) > .name {
-        display: none;
-    }
-
-    .tracker-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0;
-        width: 100%;
-        justify-content: flex-end;
-    }
-
-    .tracker-name {
-        background: var(--control-bg-color);
-        color: var(--control-icon-color);
-        border: 1px solid var(--control-border-color);
-        padding: 4px 8px;
-        border-radius: 4px 4px 0 0;
-        font-size: 14px;        
-        width: 100%;
-        max-width: none;        
-        align-self: center;
-        white-space: nowrap;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        position: relative;
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        justify-content: space-between; 
-
-        .value {
-            order: 2;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            text-align: right;
-            flex: 1;
-        }
-
-        .tracker-controls {
-            display: none;
-            order: 1;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            gap: 1px; 
-            border-radius: inherit;
-            flex-shrink: 0;
-            font-size: 0.85em; 
-
-            a {
-                color: white;
-                cursor: pointer;
-            }
-        }
-
-        &:hover .tracker-controls {
-            display: flex;
-        }
-    }
-
-    .tracker {
+    .tracker-element {
         background: var(--entry-background);
         overflow: hidden;
-        height: 32px;
+        flex: 1 0 1.75rem;
         width: 100%;
         position: relative;
         display: flex;
@@ -383,48 +391,43 @@ body:has(#effects-panel .effect-item) #clock-panel {
         padding-right: 8px;
         border: 2px solid var(--control-border-color);
         border-radius: 0 0 4px 4px;
-        border-top: none; 
-    }
-
-    .tracker-value {
-        font-size: 20px;
-        font-weight: 600;
-        color: white;
-        z-index: 2;  
-        padding: 0px 3px;
-        background: rgba(0, 0, 0, 0.4);
-        border-radius: 3px;
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
+        border-top: none;
 
-    .tracker-container:hover .tracker-value {
-        opacity: 1;
-        transition: opacity 0s;
-    }
-
-    .tracker-slashes {
-        position: absolute;
-        height: 100%;
-        width: 100%; 
-        left: -4px;
-        gap: 4px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        pointer-events: none;
-    }
+        .value {
+            font-size: 20px;
+            font-weight: 600;
+            color: white;
+            z-index: 2;  
+            padding: 0px 3px;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 3px;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
 
-    .tracker-slash {
-        height: 100%;
-        width: calc((100% - (var(--max) - 1) * 4px) / (var(--max) - 0.2));
-        background: var(--entry-color);
-        transform: skewX(-15deg);
-        flex-shrink: 0;
-        opacity: 0.2;
-    }
+        .tracker-slashes {
+            position: absolute;
+            height: 100%;
+            width: 100%; 
+            left: -4px;
+            gap: 4px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            pointer-events: none;
+
+            .slash {
+                height: 100%;
+                width: calc((100% - (var(--max) - 1) * 4px) / (var(--max) - 0.2));
+                background: var(--entry-color);
+                transform: skewX(-15deg);
+                flex-shrink: 0;
+                opacity: 0.2;
+            }
 
-    .tracker-slash.filled {
-        opacity: 1;
+            .slash.filled {
+                opacity: 1;
+            }
+        }
     }
 }