Changed so encounter countdowns is a button (#804)

lang/en.json

@@ -272,7 +272,8 @@
                 "combatStarted": "Active",
                 "giveSpotlight": "Give The Spotlight",
                 "requestingSpotlight": "Requesting The Spotlight",
-                "requestSpotlight": "Request The Spotlight"
+                "requestSpotlight": "Request The Spotlight",
+                "openCountdowns": "Countdowns"
             },
             "ContextMenu": {
                 "disableEffect": "Disable Effect",
@@ -1899,7 +1900,7 @@
             "difficulty": "Difficulty",
             "downtime": "Downtime",
             "dropActorsHere": "Drop Actors here",
-        "dropFeaturesHere": "Drop Features here",
+            "dropFeaturesHere": "Drop Features here",
             "duality": "Duality",
             "dualityRoll": "Duality Roll",
             "enabled": "Enabled",

styles/less/ui/combat-sidebar/encounter-controls.less

@@ -2,43 +2,14 @@
     .encounter-controls.combat {
         justify-content: space-between;
 
-        .encounter-fear-controls {
+        .encounter-title {
+            text-align: left;
+        }
+
+        .inner-controls {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 4px;
-
-            .encounter-fear-dice-container {
-                display: flex;
-                gap: 2px;
-
-                .encounter-control-fear-container {
-                    display: flex;
-                    position: relative;
-                    align-items: center;
-                    justify-content: center;
-                    color: black;
-
-                    .dice {
-                        height: 22px;
-                        width: 22px;
-                    }
-
-                    .encounter-control-fear {
-                        position: absolute;
-                        font-size: 16px;
-                    }
-
-                    .encounter-control-counter {
-                        position: absolute;
-                        right: -10px;
-                        color: var(--color-text-secondary);
-                    }
-                }
-            }
-
-            .encounter-countdowns {
-                color: var(--content-link-icon-color);
-            }
         }
 
         .control-buttons {

templates/ui/combatTracker/combatTrackerHeader.hbs

@@ -51,19 +51,6 @@
     {{/if}}
 
     <div class="encounter-controls {{#if hasCombat}}combat{{/if}}">
-        {{#if hasCombat}}
-            <div class="encounter-fear-controls">
-                <div class="encounter-fear-dice-container">
-                    <div class="encounter-control-fear-container">
-                        <img class="dice " src="../icons/svg/d12-grey.svg"/>
-                        <i class="fas fa-skull encounter-control-fear"></i>
-                    </div>
-                    <div>{{fear}}</div>
-                </div>
-                <a class="encounter-countdowns" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Countdown.title" type=(localize "DAGGERHEART.APPLICATIONS.Countdown.types.encounter")}}" data-action="openCountdowns"><i class="fa-solid fa-stopwatch"></i></a>
-            </div>
-        {{/if}}
-
         {{!-- Combat Status --}}
         <strong class="encounter-title">
             {{#if combats.length}}
@@ -78,14 +65,16 @@
         </strong>
 
         {{!-- Combat Controls --}}
-        {{#if hasCombat}}
+        <div class="inner-controls">
-            <div class="control-buttons right flexrow">
+            {{#if hasCombat}}
-                <div class="spacer"></div>
+                <button data-action="openCountdowns">{{localize "DAGGERHEART.APPLICATIONS.CombatTracker.openCountdowns"}}</button>
-                <button type="button" class="encounter-context-menu inline-control combat-control icon fa-solid fa-ellipsis-vertical"
+                <div class="control-buttons right flexrow">
-                        {{#unless (and user.isGM hasCombat)}}disabled{{/unless}}></button>
+                    <div class="spacer"></div>
-            </div>
+                    <button type="button" class="encounter-context-menu inline-control combat-control icon fa-solid fa-ellipsis-vertical"
-        {{/if}}
+                            {{#unless (and user.isGM hasCombat)}}disabled{{/unless}}></button>
-
+                </div>
+            {{/if}}
+        </div>
     </div>
 
 </header>