From 92c7a2a9b90a6bfad9b0e9b9116a1d4db3c1b107 Mon Sep 17 00:00:00 2001
From: cosmo <cptncosmo@gmail.com>
Date: Fri, 10 Jul 2026 20:45:15 +0200
Subject: [PATCH] fixed button icon position and clarified countdown UI

---
 scripts/cosmos-dh-tweaks.mjs |  2 +-
 styles/cosmos-dh-tweaks.css  | 56 +++++++++++++++++++++++++++++-------
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/scripts/cosmos-dh-tweaks.mjs b/scripts/cosmos-dh-tweaks.mjs
index 3d110ce..658f467 100644
--- a/scripts/cosmos-dh-tweaks.mjs
+++ b/scripts/cosmos-dh-tweaks.mjs
@@ -53,7 +53,7 @@ Hooks.once("init", () => {
                                 addBtn = document.createElement("a");
                                 addBtn.className = "cosmo-add-countdown";
                                 addBtn.setAttribute("data-tooltip", game.i18n.localize("COSMOS_DH_TWEAKS.Countdown.add"));
-                                addBtn.innerHTML = '<i class="fa-solid fa-plus"></i>';
+                                addBtn.innerHTML = '<i class="fa-solid fa-plus"></i><span class="cosmo-add-label">' + game.i18n.localize("COSMOS_DH_TWEAKS.Countdown.add") + '</span>';
                                 addBtn.addEventListener("click", (e) => {
                                     e.preventDefault();
                                     new game.system.api.applications.ui.CountdownEdit().render(true);
diff --git a/styles/cosmos-dh-tweaks.css b/styles/cosmos-dh-tweaks.css
index 39486a5..3357712 100644
--- a/styles/cosmos-dh-tweaks.css
+++ b/styles/cosmos-dh-tweaks.css
@@ -9,21 +9,22 @@
     border-radius: 4px;
     align-self: flex-end;
     overflow: hidden;
+    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
-.daggerheart.dh-style.countdowns.cosmo-minimal-countdown::before {
-    opacity: 1 !important;
+.daggerheart.dh-style.countdowns.cosmo-minimal-countdown:hover {
+    width: 140px !important;
 }
 
 .daggerheart.dh-style.countdowns.cosmo-minimal-countdown .countdowns-header {
     display: flex !important;
-    width: 36px !important;
+    width: 100% !important;
     height: 36px !important;
     flex: 0 0 36px !important;
     padding: 0 !important;
     margin: 0 !important;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     border: none !important;
     background: transparent !important;
 }
@@ -38,25 +39,58 @@
 
 .daggerheart.dh-style.countdowns.cosmo-minimal-countdown .cosmo-add-countdown {
     display: flex !important;
-    align-items: center;
-    justify-content: center;
-    width: 36px !important;
+    align-items: center !important;
+    justify-content: center !important;
     height: 36px !important;
+    width: 36px;
     font-size: 16px !important;
-    color: var(--golden, #c5a45e) !important;
     cursor: pointer;
-    transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
+    transition: color 0.2s ease, transform 0.2s ease;
+}
+
+.daggerheart.dh-style.countdowns.cosmo-minimal-countdown:hover .cosmo-add-countdown {
+    width: 100% !important;
+    justify-content: flex-start !important;
+    padding-left: 10px !important;
 }
 
 .daggerheart.dh-style.countdowns.cosmo-minimal-countdown .cosmo-add-countdown:hover {
     color: #ffffff !important;
-    transform: scale(1.15);
-    text-shadow: 0 0 5px var(--golden, #c5a45e) !important;
+    transform: scale(1.05);
+}
+
+.daggerheart.dh-style.countdowns.cosmo-minimal-countdown .cosmo-add-label {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-left 0.25s ease;
+    font-size: 13px;
+    font-family: inherit;
+    font-weight: bold;
+}
+
+.daggerheart.dh-style.countdowns.cosmo-minimal-countdown:hover .cosmo-add-label {
+    max-width: 95px;
+    opacity: 1;
+    margin-left: 8px;
 }
 
 /* Token HUD Spotlight Button styling */
 .control-icon.cosmo-spotlight-hud-btn {
     transition: color 0.2s ease, text-shadow 0.2s ease, background-color 0.2s ease;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.control-icon.cosmo-spotlight-hud-btn i {
+    margin: 0 !important;
+    padding: 0 !important;
+    display: block !important;
+    line-height: 1 !important;
+    text-align: center !important;
 }
 
 .control-icon.cosmo-spotlight-hud-btn:hover {