From 7184fd9e303a90e004785a416f7819b298bc7b4d Mon Sep 17 00:00:00 2001
From: molilo <dev.murilobrito@gmail.com>
Date: Thu, 18 Dec 2025 01:32:46 -0300
Subject: [PATCH] feat: add basic tooltip style and style domain card template

---
 lang/en.json                             |   4 +-
 styles/less/ux/index.less                |   2 +
 styles/less/ux/tooltip/domain-cards.less |  18 +++
 styles/less/ux/tooltip/tooltip.less      | 156 +++++++++++++++++++++++
 templates/ui/tooltip/domainCard.hbs      |  45 ++++---
 5 files changed, 203 insertions(+), 22 deletions(-)
 create mode 100644 styles/less/ux/tooltip/domain-cards.less

diff --git a/lang/en.json b/lang/en.json
index d2386744..a87c3ce9 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -2787,7 +2787,9 @@
                 "companionPartnerLevelBlock": "The companion needs an assigned partner to level up.",
                 "configureAttribution": "Configure Attribution",
                 "deleteItem": "Delete Item",
-                "immune": "Immune"
+                "immune": "Immune",
+                "middleClick": "[Middle Click] Keep tooltip view"
+
             }
         }
     }
diff --git a/styles/less/ux/index.less b/styles/less/ux/index.less
index dd0492da..0bd1b71e 100644
--- a/styles/less/ux/index.less
+++ b/styles/less/ux/index.less
@@ -1,4 +1,6 @@
 @import './tooltip/tooltip.less';
 @import './tooltip/battlepoints.less';
 @import './tooltip/bordered-tooltip.less';
+@import './tooltip/domain-cards.less';
+
 @import './autocomplete/autocomplete.less';
diff --git a/styles/less/ux/tooltip/domain-cards.less b/styles/less/ux/tooltip/domain-cards.less
new file mode 100644
index 00000000..51d54922
--- /dev/null
+++ b/styles/less/ux/tooltip/domain-cards.less
@@ -0,0 +1,18 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
+.theme-light .daggerheart.dh-style.tooltip {
+    &.domain-card {
+        .item-icons-list .item-icon img {
+            filter: @bright-beige-filter;
+        }
+    }
+}
+
+.daggerheart.dh-style.tooltip {
+    &.domain-card {
+        .item-icons-list .item-icon img {
+            filter: @golden-filter !important;
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/less/ux/tooltip/tooltip.less b/styles/less/ux/tooltip/tooltip.less
index 2aa1c2c7..88f8e52d 100644
--- a/styles/less/ux/tooltip/tooltip.less
+++ b/styles/less/ux/tooltip/tooltip.less
@@ -1,3 +1,159 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
+#tooltip:has(div.daggerheart.dh-style.tooltip),
+aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip) {
+    padding: 0;
+    border: none;
+    border-radius: 10px;
+    height: max-content;
+    max-height: 650px;
+    width: 260px;
+    background-image: url('../assets/parchments/dh-parchment-dark.png');
+    position: relative;
+
+    .tooltip-title {
+        font-size: var(--font-size-20);
+        color: light-dark(@dark-blue, @golden);
+        font-weight: 700;
+        margin-bottom: 5px;
+    }
+
+    .tooltip-image {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+        mask-image: linear-gradient(180deg, black 88%, transparent 100%);
+    }
+
+    .tooltip-description {
+        font-style: inherit;
+        text-align: inherit;
+        width: 100%;
+        padding: 5px 10px;
+        position: relative;
+        
+
+        &::before {
+            content: '';
+            background: @golden;
+            mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+            height: 2px;
+            width: calc(100% - 10px);
+        }
+
+        &::before {
+          position: absolute;
+          top: -5px;
+        }
+    }
+
+    .tags {
+        display: flex;
+        gap: 10px;
+        padding-bottom: 16px;
+
+        .tag {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 3px 5px;
+            font-size: var(--font-size-12);
+            font: @font-body;
+
+            background: light-dark(@dark-15, @beige-15);
+            border: 1px solid light-dark(@dark, @beige);
+            border-radius: 3px;
+        }
+
+        .label {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            font-size: var(--font-size-12);
+        }
+    }
+
+    .item-icons-list {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        align-items: end;
+        justify-content: center;
+        top: 25px;
+        right: 10px;
+        z-index: 1;
+
+        .item-icon {
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            text-align: center;
+            padding-right: 8px;
+            width: 50px;
+            height: 50px;
+            font-size: 1.2rem;
+            background: light-dark(@dark-blue-60, @dark-golden-80);
+            backdrop-filter: blur(8px);
+            border: 4px double light-dark(@beige, @golden);
+            color: light-dark(@beige, @golden);
+            border-radius: 999px;
+            transition: all 0.3s ease;
+
+            .recall-label {
+                font-size: var(--font-size-14);
+                opacity: 0;
+                margin-right: 0.3rem;
+                transition: all 0.3s ease;
+            }
+
+            i {
+                font-size: 0.8rem;
+            }
+
+            img {
+                height: 24px;
+                width: 24px;
+            }
+
+            &:hover {
+                max-width: 300px;
+                padding: 0 10px;
+                border-radius: 60px;
+
+                .recall-label {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .tooltip-hint {
+        border-radius: 3px;
+        padding: 3px;
+        background: light-dark(@dark-blue-60, @rustic-brown-80);
+        color: light-dark(@dark-blue, @golden);
+        font-size: 12px;
+        margin-bottom: 10px;
+    }
+}
+
+aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip) {
+    box-shadow: 0 0 20px @golden-90;
+}
+
+.theme-light #tooltip:has(div.daggerheart.dh-style.tooltip),
+.theme-light aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip) {
+    background-image: url('../assets/parchments/dh-parchment-light.png');
+}
+
+.theme-light aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip) {
+    box-shadow: 0 0 20px @dark-blue-90;
+}
+
 #tooltip,
 .locked-tooltip {
     &.wide {
diff --git a/templates/ui/tooltip/domainCard.hbs b/templates/ui/tooltip/domainCard.hbs
index c209f29d..087a43a3 100644
--- a/templates/ui/tooltip/domainCard.hbs
+++ b/templates/ui/tooltip/domainCard.hbs
@@ -1,29 +1,32 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
-    <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
-
-    <div class="tooltip-information-section">
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.Domain.single"}}</label>
+<div class="daggerheart dh-style tooltip domain-card">
+    <div class="item-icons-list">
+        <span class="item-icon">
+            <span class="recall-value">{{item.system.recallCost}}</span>
+            <i class="fa-solid fa-bolt"></i>
+        </span>
+        <span class="item-icon">
             {{#with (lookup config.DOMAIN.domains item.system.domain) as | domain |}}
-                <div>{{localize domain.label}}</div>
+                <img src="{{domain.src}}" alt="">
             {{/with}}
-        </div>
-        
-        <div class="tooltip-information">
-            <label>{{localize "Type"}}</label>
+        </span>
+    </div>
+    <img class="tooltip-image" src="{{item.img}}" />
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <div class="tags">
+        <div class="tag">
             {{#with (lookup config.DOMAIN.cardTypes item.system.type) as | type |}}
-                <div>{{localize type.label}}</div>
+                <span>{{localize type.label}}</span>
             {{/with}}
         </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.level"}}</label>
-            <div>{{item.system.level}}</div>
-        </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.ITEMS.DomainCard.recallCost"}}</label>
-            <div>{{item.system.recallCost}}</div>
+        <div class="tag">
+            <span>{{localize 'DAGGERHEART.GENERAL.levelShort'}} {{ item.system.level }}</span>
         </div>
     </div>
+    {{#if description}}      
+      <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>
\ No newline at end of file