From 3e333d3533860bef9e52cafd811a16c1797cb71d Mon Sep 17 00:00:00 2001
From: Murilo Brito <91566541+moliloo@users.noreply.github.com>
Date: Wed, 30 Jul 2025 23:58:37 -0300
Subject: [PATCH] add domain icon into domain cards (#489)

---
 styles/less/global/item-header.less          | 23 ++++++++++++++++++--
 styles/less/utils/colors.less                |  3 +++
 templates/sheets/items/domainCard/header.hbs |  4 ++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/styles/less/global/item-header.less b/styles/less/global/item-header.less
index 3b3e7ee9..1fb27325 100755
--- a/styles/less/global/item-header.less
+++ b/styles/less/global/item-header.less
@@ -1,4 +1,15 @@
 @import '../utils/colors.less';
+@import '../utils/mixin.less';
+
+.appTheme({
+    .item-card-header .item-icons-list .item-icon img {
+        filter: invert(88%) sepia(98%) saturate(1784%) hue-rotate(311deg) brightness(104%) contrast(91%);
+    }
+}, {
+    .item-card-header .item-icons-list .item-icon img {
+        filter: invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%);
+    }
+});
 
 .application.sheet.daggerheart.dh-style {
     .item-sheet-header {
@@ -68,7 +79,9 @@
         .item-icons-list {
             position: absolute;
             display: flex;
-            align-items: center;
+            flex-direction: column;
+            gap: 5px;
+            align-items: end;
             justify-content: center;
             top: 50px;
             right: 10px;
@@ -82,7 +95,8 @@
                 max-width: 50px;
                 height: 50px;
                 font-size: 1.2rem;
-                background: light-dark(@light-black, @semi-transparent-dark-blue);
+                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;
@@ -99,6 +113,11 @@
                     font-size: 0.8rem;
                 }
 
+                img {
+                    height: 24px;
+                    width: 24px;
+                }
+
                 &:hover {
                     max-width: 300px;
                     padding: 0 10px;
diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less
index 033a42cb..ea4cdcb7 100755
--- a/styles/less/utils/colors.less
+++ b/styles/less/utils/colors.less
@@ -5,6 +5,9 @@
 @golden-10: #f3c26710;
 @golden-40: #f3c26740;
 
+@dark-golden: #2b1d03;
+@dark-golden-80: #2b1d0380;
+
 @red: #e54e4e;
 @red-10: #e54e4e10;
 @red-40: #e54e4e40;
diff --git a/templates/sheets/items/domainCard/header.hbs b/templates/sheets/items/domainCard/header.hbs
index 566de11c..dd048236 100644
--- a/templates/sheets/items/domainCard/header.hbs
+++ b/templates/sheets/items/domainCard/header.hbs
@@ -6,6 +6,10 @@
             <span class="recall-value">{{source.system.recallCost}}</span>
             <i class="fa-solid fa-bolt"></i>
         </span>
+        <span class="item-icon">
+            <span class="recall-label">{{localize (concat 'DAGGERHEART.GENERAL.Domain.' source.system.domain '.label')}}</span>
+            <img src="{{concat 'systems/daggerheart/assets/icons/domains/' source.system.domain '.svg'}}" alt="">
+        </span>
     </div>
     <div class='item-info'>
         <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>