From 04ff217671ef05821bc2f0134a731a905bb70d92 Mon Sep 17 00:00:00 2001 From: Carlos Fernandez Date: Mon, 11 May 2026 06:12:23 -0400 Subject: [PATCH] Slightly improve visibility of countdowns and fix mixing light and dark modes --- module/applications/ui/countdowns.mjs | 18 +- styles/less/ui/countdown/countdown.less | 220 ++++++++++++++---------- templates/ui/countdowns.hbs | 10 ++ 3 files changed, 138 insertions(+), 110 deletions(-) diff --git a/module/applications/ui/countdowns.mjs b/module/applications/ui/countdowns.mjs index 052564cc..76e2b399 100644 --- a/module/applications/ui/countdowns.mjs +++ b/module/applications/ui/countdowns.mjs @@ -21,10 +21,10 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application static DEFAULT_OPTIONS = { id: 'countdowns', tag: 'div', - classes: ['daggerheart', 'dh-style', 'countdowns', 'faded-ui'], + classes: ['daggerheart', 'dh-style', 'countdowns'], window: { icon: 'fa-solid fa-clock-rotate-left', - frame: true, + frame: false, title: 'DAGGERHEART.UI.Countdowns.title', positioned: false, resizable: false, @@ -62,20 +62,6 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application if (iconOnly) frame.classList.add('icon-only'); else frame.classList.remove('icon-only'); - const header = frame.querySelector('.window-header'); - header.querySelector('button[data-action="close"]').remove(); - header.querySelector('button[data-action="toggleControls"]').remove(); - - if (game.user.isGM) { - const editTooltip = game.i18n.localize('DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle'); - const editButton = ``; - header.insertAdjacentHTML('beforeEnd', editButton); - } - - const minimizeTooltip = game.i18n.localize('DAGGERHEART.UI.Countdowns.toggleIconMode'); - const minimizeButton = ``; - header.insertAdjacentHTML('beforeEnd', minimizeButton); - return frame; } diff --git a/styles/less/ui/countdown/countdown.less b/styles/less/ui/countdown/countdown.less index 47f06eb7..380eb454 100644 --- a/styles/less/ui/countdown/countdown.less +++ b/styles/less/ui/countdown/countdown.less @@ -1,28 +1,47 @@ @import '../../utils/colors.less'; @import '../../utils/fonts.less'; -.theme-dark { +#interface.theme-dark { .daggerheart.dh-style.countdowns { - background-image: url(../assets/parchments/dh-parchment-dark.png); - - .window-header { - background-image: url(../assets/parchments/dh-parchment-dark.png); - } + --background: url(../assets/parchments/dh-parchment-dark.png); } } -.daggerheart.dh-style.countdowns { +#interface.theme-light { + .daggerheart.dh-style.countdowns { + --background: url('../assets/parchments/dh-parchment-light.png') no-repeat center; + } +} + +.daggerheart.dh-style.countdowns { position: relative; border: 0; - border-radius: 4px; box-shadow: none; + color: var(--color-text-primary); width: 300px; pointer-events: all; align-self: flex-end; transition: 0.3s right ease-in-out; - .window-title { - font-family: @font-body; + display: flex; + flex-direction: column; + + &::before { + content: ' '; + position: absolute; + inset: 0; + background: var(--background); + border-radius: 4px; + opacity: var(--ui-fade-opacity); + transition: opacity var(--ui-fade-duration); + } + + :not(.performance-low, .noblur) { + backdrop-filter: blur(5px); + } + + &:hover::before { + opacity: 1; } #ui-right:has(#effects-display .effect-container) & { @@ -34,123 +53,136 @@ min-width: 180px; } - .window-header { - cursor: default; - border-bottom: 0; + .countdowns-header, + .countdowns-container { + position: relative; // allow rendering over the background } - .window-content { - padding-top: 4px; - padding-bottom: 16px; + .countdowns-header { + display: flex; + align-items: center; + gap: 0.25rem; + flex: 0 0 36px; + padding: 0 0.5rem; + overflow: hidden; + font-size: var(--font-size-13); + .window-title { + font-family: @font-body; + flex: 1; + } + .header-control + .header-control { + margin-left: 8px; + } + } + + .countdowns-container { + display: flex; + flex-direction: column; + gap: 8px; + padding: 4px var(--spacer-16) var(--spacer-16) var(--spacer-16); overflow: auto; max-height: 312px; - .countdowns-container { + .countdown-container { display: flex; - flex-direction: column; - gap: 8px; + width: 100%; - .countdown-container { - display: flex; - width: 100%; + &.icon-only { + gap: 8px; - &.icon-only { - gap: 8px; + .countdown-main-container { + .countdown-content { + justify-content: center; - .countdown-main-container { - .countdown-content { - justify-content: center; - - .countdown-tools { - gap: 8px; - } + .countdown-tools { + gap: 8px; } } } + } - .countdown-main-container { - width: 100%; + .countdown-main-container { + width: 100%; + display: flex; + align-items: center; + gap: 16px; + + img { + width: 44px; + height: 44px; + border-radius: 6px; + } + + .countdown-content { + flex: 1; display: flex; - align-items: center; - gap: 16px; + flex-direction: column; + justify-content: space-between; - img { - width: 44px; - height: 44px; - border-radius: 6px; - } - - .countdown-content { - flex: 1; + .countdown-tools { display: flex; - flex-direction: column; + align-items: center; justify-content: space-between; - .countdown-tools { + .countdown-tool-controls { display: flex; align-items: center; - justify-content: space-between; + gap: 16px; + } - .countdown-tool-controls { - display: flex; - align-items: center; - gap: 16px; - } + .progress-tag { + border: 1px solid; + border-radius: 4px; + padding: 2px 4px; + background-color: light-dark(@beige, @dark-blue); + } - .progress-tag { - border: 1px solid; - border-radius: 4px; + .countdown-tool-icons { + display: flex; + align-items: center; + gap: 8px; + + .looping-container { + position: relative; + border: 1px solid light-dark(@dark-blue, white); + border-radius: 6px; padding: 2px 4px; - background-color: light-dark(@beige, @dark-blue); - } - .countdown-tool-icons { - display: flex; - align-items: center; - gap: 8px; + &.should-loop { + background: light-dark(@golden, @golden); - .looping-container { - position: relative; - border: 1px solid light-dark(@dark-blue, white); - border-radius: 6px; - padding: 2px 4px; - - &.should-loop { - background: light-dark(@golden, @golden); - - .loop-marker { - color: light-dark(@dark-blue, @dark-blue); - } + .loop-marker { + color: light-dark(@dark-blue, @dark-blue); } + } - .direction-marker { - position: absolute; - font-size: 10px; - filter: drop-shadow(0 0 3px black); - top: -3px; - } + .direction-marker { + position: absolute; + font-size: 10px; + filter: drop-shadow(0 0 3px black); + top: -3px; } } } } } - /* Keep incase we want to reintroduce the player pips */ - // .countdown-access-container { - // display: grid; - // grid-template-columns: 1fr 1fr 1fr; - // grid-auto-rows: min-content; - // width: 38px; - // gap: 4px; - - // .countdown-access { - // height: 10px; - // width: 10px; - // border-radius: 50%; - // border: 1px solid light-dark(@dark-blue, @beige-80); - // content: ''; - // } - // } } + /* Keep incase we want to reintroduce the player pips */ + // .countdown-access-container { + // display: grid; + // grid-template-columns: 1fr 1fr 1fr; + // grid-auto-rows: min-content; + // width: 38px; + // gap: 4px; + + // .countdown-access { + // height: 10px; + // width: 10px; + // border-radius: 50%; + // border: 1px solid light-dark(@dark-blue, @beige-80); + // content: ''; + // } + // } } } } diff --git a/templates/ui/countdowns.hbs b/templates/ui/countdowns.hbs index 18694e49..95067826 100644 --- a/templates/ui/countdowns.hbs +++ b/templates/ui/countdowns.hbs @@ -1,4 +1,14 @@
+
+ + {{localize "DAGGERHEART.UI.Countdowns.title"}} + + + + + + +
{{#each countdowns as | countdown id |}}