From add2d214e7b3cbba6d872f912b3a67bbacc9971d Mon Sep 17 00:00:00 2001
From: jalensailin <jalen.michalslevy@gmail.com>
Date: Wed, 16 Jul 2025 15:39:58 -0400
Subject: [PATCH] fix css in dark mode; fix item name displaying as h4

---
 css/deltagreen.css                         |  8 ++++++--
 templates/actor/parts/bonds-tab.html       |  2 +-
 templates/actor/parts/gear-tab.html        | 14 +++++++-------
 templates/actor/parts/motivations-tab.html | 12 ++++++------
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/css/deltagreen.css b/css/deltagreen.css
index 30ff2df..43d903a 100644
--- a/css/deltagreen.css
+++ b/css/deltagreen.css
@@ -43,6 +43,7 @@
 .deltagreen section.window-content {
   scrollbar-color: #215112 #111 !important;
   padding: 0.5rem;
+  color: black;
 }
 
 /* Character Sheet Style Options */
@@ -350,6 +351,7 @@ explicitly define a number of rows, rather than columns. */
 
 .deltagreen .tabs [data-action="tab"] {
   font-weight: bold;
+  color: inherit;
   vertical-align: middle !important;
   line-height: inherit;
   padding: 5px 10px 0px 10px;
@@ -358,7 +360,6 @@ explicitly define a number of rows, rather than columns. */
   border: gray;
   border-width: 1px 1px 0px 1px;
   border-style: solid;
-  /*background: rgba(173, 151, 101, 0.3);*/
 }
 
 .deltagreen .tabs [data-action="tab"].active {
@@ -433,9 +434,12 @@ explicitly define a number of rows, rather than columns. */
 }
 
 .deltagreen .items-list .item-name {
-  margin: 0;
   display: flex;
   align-content: center;
+
+  word-wrap: break-word;
+
+  margin: 0;
 }
 
 .deltagreen .items-list .item-controls {
diff --git a/templates/actor/parts/bonds-tab.html b/templates/actor/parts/bonds-tab.html
index 8d67641..3ec4d91 100644
--- a/templates/actor/parts/bonds-tab.html
+++ b/templates/actor/parts/bonds-tab.html
@@ -41,7 +41,7 @@
                         <div class="item-image">
                             <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                         </div>
-                        <h4 style="word-wrap: break-word;" class="item-name">{{item.name}}</h4>
+                        <span class="item-name">{{item.name}}</span>
                         <span>{{item.system.relationship}}</span>
                         <span>{{item.system.score}}</span>
                         <div class="item-controls">
diff --git a/templates/actor/parts/gear-tab.html b/templates/actor/parts/gear-tab.html
index 01ba2f1..8922308 100644
--- a/templates/actor/parts/gear-tab.html
+++ b/templates/actor/parts/gear-tab.html
@@ -46,7 +46,7 @@
                              width="24"
                              height="24" />
                         <span>
-                            <h4 style="word-wrap: break-word; display: inline;" class="item-name">{{item.name}}</h4>
+                            <span style="display: inline;" class="item-name">{{item.name}}</span>
                             <span class="rollable"
                                   data-action="roll"
                                   data-iid="{{item._id}}"
@@ -170,7 +170,7 @@
                         <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                     </div>
 
-                    <h4 style="word-wrap: break-word;" class="item-name">{{item.name}}</h4>
+                    <span class="item-name">{{item.name}}</span>
 
                     <span class="centered-item-property">{{item.system.protection}}</span>
 
@@ -246,7 +246,7 @@
                         <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                     </div>
 
-                    <h4 style="word-wrap: break-word; min-width: 55%;" class="item-name">{{item.name}}</h4>
+                    <span style="min-width: 55%;" class="item-name">{{item.name}}</span>
 
                     <a class="centered-item-property"
                        data-action="toggleEquipped"
@@ -323,7 +323,7 @@
                             <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                         </div>
 
-                        <h4 style="word-wrap: break-word; min-width: 55%;" class="item-name">
+                        <span style="min-width: 55%;" class="item-name">
                             {{#if item.system.revealed }}
                                 {{item.name}}
                             {{else}}
@@ -332,7 +332,7 @@
                                     ({{item.name}})
                                 {{/if}}
                             {{/if}}
-                        </h4>
+                        </span>
 
                         <div class="item-controls">
                             <a class="item-control"
@@ -407,7 +407,7 @@
                             <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                         </div>
 
-                        <h4 style="word-wrap: break-word; min-width: 55%;" class="item-name">
+                        <span style="min-width: 55%;" class="item-name">
                             {{#if item.system.revealed }}
                                 {{item.name}}
                             {{else}}
@@ -416,7 +416,7 @@
                                     ({{item.name}})
                                 {{/if}}
                             {{/if}}
-                        </h4>
+                        </span>
 
                         <div class="item-controls">
                             <a class="item-control"
diff --git a/templates/actor/parts/motivations-tab.html b/templates/actor/parts/motivations-tab.html
index cf06d77..208c82b 100644
--- a/templates/actor/parts/motivations-tab.html
+++ b/templates/actor/parts/motivations-tab.html
@@ -101,15 +101,15 @@
                 {{#if_eq item.type 'motivation' }}
 
                     <li class="item flexrow" data-item-id="{{item.id}}">
-                        <h4 class="item-name"
-                            {{#if item.system.crossedOut }}
-                            style="text-decoration: line-through"
-                            {{/if }}>
+                        <span class="item-name"
+                              {{#if item.system.crossedOut }}
+                              style="text-decoration: line-through"
+                              {{/if }}>
                             {{item.name}}
-                        </h4>
+                        </span>
 
                         {{#if item.system.crossedOut }}
-                            <h4 class="item-name">{{item.system.disorder}}</h4>
+                            <span class="item-name">{{item.system.disorder}}</span>
                         {{/if}}
 
                         <div class="item-controls">