[Feature] EffectsDisplay (#1340)

* Merged with main

* Added the display

* .

* Removed unused override function

* Fixed layout for generic effects

* feat: add basic style to effects tooltip

* Corrected distancing

* Use CSS based solution for shifting the countdowns

* Centered tooltip header

---------

Co-authored-by: moliloo <dev.murilobrito@gmail.com>
Co-authored-by: Carlos Fernandez <cfern1990@gmail.com>

styles/less/hud/token-hud/token-hud.less

@@ -52,6 +52,15 @@
                 align-items: center;
                 justify-content: center;
             }
+
+            .effect-locked {
+                position: absolute;
+                bottom: 2px;
+                right: 2px;
+                font-size: 12px;
+                color: @golden;
+                filter: drop-shadow(0 0 3px black);
+            }
         }
     }
 }

styles/less/ui/countdown/countdown.less

@@ -12,18 +12,23 @@
 }
 
 .daggerheart.dh-style.countdowns {
-    position: initial;
+    position: relative;
     border: 0;
     border-radius: 4px;
     box-shadow: none;
     width: 300px;
     pointer-events: all;
     align-self: flex-end;
+    transition: 0.3s right ease-in-out;
 
     .window-title {
         font-family: @font-body;
     }
 
+    #ui-right:has(#effects-display .effect-container) & {
+        right: 62px;
+    }
+
     &.icon-only {
         width: 180px;
         min-width: 180px;

styles/less/ui/effects-display/sheet.less

@@ -0,0 +1,40 @@
+.daggerheart.dh-style.effects-display {
+    position: absolute;
+    right: 0;
+    width: 46px;
+    max-height: 600px;
+    overflow: hidden;
+    border: 0;
+
+    .window-content {
+        > div {
+            height: 100%;
+        }
+    }
+
+    .effects-display-container {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .effect-container {
+            position: relative;
+            pointer-events: all;
+            border: 1px solid light-dark(@dark-blue, @golden);
+            border-radius: 3px;
+
+            img {
+                border-radius: 3px;
+            }
+
+            .effect-locked {
+                position: absolute;
+                bottom: 4px;
+                right: 4px;
+                font-size: 16px;
+                color: @golden;
+                filter: drop-shadow(0 0 3px black);
+            }
+        }
+    }
+}

styles/less/ui/index.less

@@ -31,3 +31,5 @@
 @import './sidebar/daggerheartMenu.less';
 
 @import './scene-config/scene-config.less';
+
+@import './effects-display/sheet.less';

styles/less/ui/sidebar/tabs.less

@@ -4,12 +4,18 @@
     }
 }
 
-#interface #ui-right #sidebar {
-    menu li button {
-        img {
-            width: 22px;
-            max-width: unset;
-            filter: @beige-filter;
+#interface #ui-right {
+    #ui-right-column-1 {
+        position: relative;
+    }
+
+    #sidebar {
+        menu li button {
+            img {
+                width: 22px;
+                max-width: unset;
+                filter: @beige-filter;
+            }
         }
     }
 }

styles/less/utils/colors.less

@@ -28,6 +28,8 @@
 @dark-golden-40: #2b1d0340;
 @dark-golden-80: #2b1d0380;
 
+@rustic-brown-80: #4c340780;
+
 @red: #e54e4e;
 @red-10: #e54e4e10;
 @red-40: #e54e4e40;

styles/less/ux/index.less

@@ -1,2 +1,3 @@
 @import './tooltip/tooltip.less';
+@import './tooltip/bordered-tooltip.less';
 @import './autocomplete/autocomplete.less';

styles/less/ux/tooltip/bordered-tooltip.less

@@ -0,0 +1,44 @@
+#tooltip.bordered-tooltip {
+    border: 1px solid @golden;
+    background-image: url('../assets/parchments/dh-parchment-dark.png');
+
+    .daggerheart.dh-style.tooltip {
+        display: flex;
+        flex-direction: column;
+        text-align: start;
+        width: 100%;
+        gap: 5px;
+        padding: 0px;
+        border-radius: 3px;
+
+        .tooltip-header {
+            display: flex;
+            flex-direction: column;
+            text-align: start;
+            padding: 5px;
+            gap: 0px;
+
+            h2 {
+                display: flex;
+                justify-content: start;
+                font-size: var(--font-size-20);
+                color: @golden;
+                font-weight: 700;
+                margin: 0;
+                padding: 0;
+            }
+
+            .subtitle {
+                font-size: 12px;
+            }
+        }
+
+        .close-hint {
+            border-radius: 3px;
+            padding: 3px;
+            background: @rustic-brown-80;
+            color: @golden;
+            font-size: 12px;
+        }
+    }
+}