cosmo/cosmos-dh-tweaks
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

fixed button icon position and clarified countdown UI

Browse source
This commit is contained in:
CPTN Cosmo 2026-07-10 20:45:15 +02:00
parent 8e3b991518
commit 92c7a2a9b9
2 changed files with 46 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scripts/cosmos-dh-tweaks.mjs
View file

@ -53,7 +53,7 @@ Hooks.once("init", () => {
addBtn = document.createElement("a"); addBtn = document.createElement("a");
addBtn.className = "cosmo-add-countdown"; addBtn.className = "cosmo-add-countdown";
addBtn.setAttribute("data-tooltip", game.i18n.localize("COSMOS_DH_TWEAKS.Countdown.add")); 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) => { addBtn.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
new game.system.api.applications.ui.CountdownEdit().render(true); new game.system.api.applications.ui.CountdownEdit().render(true);

56
styles/cosmos-dh-tweaks.css
View file

@ -9,21 +9,22 @@
border-radius: 4px; border-radius: 4px;
align-self: flex-end; align-self: flex-end;
overflow: hidden; overflow: hidden;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
} }
.daggerheart.dh-style.countdowns.cosmo-minimal-countdown::before { .daggerheart.dh-style.countdowns.cosmo-minimal-countdown:hover {
opacity: 1 !important; width: 140px !important;
} }
.daggerheart.dh-style.countdowns.cosmo-minimal-countdown .countdowns-header { .daggerheart.dh-style.countdowns.cosmo-minimal-countdown .countdowns-header {
display: flex !important; display: flex !important;
width: 36px !important; width: 100% !important;
height: 36px !important; height: 36px !important;
flex: 0 0 36px !important; flex: 0 0 36px !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
} }
@ -38,25 +39,58 @@
.daggerheart.dh-style.countdowns.cosmo-minimal-countdown .cosmo-add-countdown { .daggerheart.dh-style.countdowns.cosmo-minimal-countdown .cosmo-add-countdown {
display: flex !important; display: flex !important;
align-items: center; align-items: center !important;
justify-content: center; justify-content: center !important;
width: 36px !important;
height: 36px !important; height: 36px !important;
width: 36px;
font-size: 16px !important; font-size: 16px !important;
color: var(--golden, #c5a45e) !important;
cursor: pointer; 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 { .daggerheart.dh-style.countdowns.cosmo-minimal-countdown .cosmo-add-countdown:hover {
color: #ffffff !important; color: #ffffff !important;
transform: scale(1.15); transform: scale(1.05);
text-shadow: 0 0 5px var(--golden, #c5a45e) !important; }
.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 */ /* Token HUD Spotlight Button styling */
.control-icon.cosmo-spotlight-hud-btn { .control-icon.cosmo-spotlight-hud-btn {
transition: color 0.2s ease, text-shadow 0.2s ease, background-color 0.2s ease; 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 { .control-icon.cosmo-spotlight-hud-btn:hover {