Slightly improve visibility of countdowns and fix mixing light and dark modes (#1878)

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 = `<a style="margin-right: 8px;" class="header-control" data-tooltip="${editTooltip}" aria-label="${editTooltip}" data-action="editCountdowns"><i class="fa-solid fa-wrench"></i></a>`;
-            header.insertAdjacentHTML('beforeEnd', editButton);
-        }
-
-        const minimizeTooltip = game.i18n.localize('DAGGERHEART.UI.Countdowns.toggleIconMode');
-        const minimizeButton = `<a class="header-control" data-tooltip="${minimizeTooltip}" aria-label="${minimizeTooltip}" data-action="toggleViewMode"><i class="fa-solid fa-down-left-and-up-right-to-center"></i></a>`;
-        header.insertAdjacentHTML('beforeEnd', minimizeButton);
-
         return frame;
     }
 

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);
+        --background: url(../assets/parchments/dh-parchment-dark.png);
-
-        .window-header {
-            background-image: url(../assets/parchments/dh-parchment-dark.png);
     }
 }
+
+#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 {
+    display: flex;
-        font-family: @font-body;
+    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,21 +53,35 @@
         min-width: 180px;
     }
 
-    .window-header {
+    .countdowns-header,
-        cursor: default;
+    .countdowns-container {
-        border-bottom: 0;
+        position: relative; // allow rendering over the background
     }
 
-    .window-content {
+    .countdowns-header {
-        padding-top: 4px;
+        display: flex;
-        padding-bottom: 16px;
+        align-items: center;
-        overflow: auto;
+        gap: 0.25rem;
-        max-height: 312px;
+        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;
 
         .countdown-container {
             display: flex;
@@ -153,4 +186,3 @@
         }
     }
 }
-}

templates/ui/countdowns.hbs

@@ -1,4 +1,14 @@
 <div>
+    <header class="countdowns-header">
+        <i class="fa-solid fa-clock-rotate-left" inert></i>
+        <span class="window-title">{{localize "DAGGERHEART.UI.Countdowns.title"}}</span>
+        <a class="header-control" data-tooltip aria-label="DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle" data-action="editCountdowns">
+            <i class="fa-solid fa-wrench" inert></i>
+        </a>
+        <a class="header-control" data-tooltip aria-label="DAGGERHEART.UI.Countdowns.toggleIconMode" data-action="toggleViewMode">
+            <i class="fa-solid fa-down-left-and-up-right-to-center" inert></i>
+        </a>
+    </header>
     <div class="countdowns-container">
         {{#each countdowns as | countdown id |}}
             <div class="countdown-container {{#if ../iconOnly}}icon-only{{/if}}">