style beatform tooltip, fix unnarmed attack location, add outline border when users use midle click

styles/less/ux/tooltip/tooltip.less

@@ -19,6 +19,10 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
         margin-bottom: 5px;
     }
 
+    .tooltip-subtitle {
+        margin: 0;
+    }
+
     .tooltip-image {
         width: 100%;
         height: 160px;
@@ -32,7 +36,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
         width: 100%;
         padding: 5px 10px;
         position: relative;
-        
+        margin-top: 5px;
 
         &::before {
             content: '';
@@ -43,8 +47,55 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
         }
 
         &::before {
-          position: absolute;
-          top: -5px;
+            position: absolute;
+            top: -5px;
+        }
+    }
+
+    .tooltip-tags {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+        padding: 5px 10px;
+        position: relative;
+        padding-top: 10px;
+        max-height: 150px;
+        overflow-y: auto;
+        position: relative;
+
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+
+        &::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: 0px;
+        }
+
+        .tooltip-tag {
+            display: flex;
+            gap: 10px;
+            flex-direction: column;
+
+            .tooltip-tag-label-container {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 3px;
+                }
+            }
         }
     }
 
@@ -55,6 +106,33 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
         flex-wrap: wrap;
         justify-content: center;
 
+        &.advantages {
+            width: 100%;
+            padding: 5px 10px;
+            padding-bottom: 16px;
+            position: relative;
+            margin-top: 5px;
+
+            &::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;
+            }
+
+            .tag {
+                background: @green-10;
+                color: @green;
+                border-color: @green;
+            }
+        }
+
         .tag {
             display: flex;
             flex-direction: row;
@@ -145,6 +223,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
 
 aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-style) {
     box-shadow: 0 0 25px @golden-90;
+    outline: 1px solid light-dark(@dark-blue, @golden);
 }
 
 .theme-light #tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
@@ -154,6 +233,8 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
 
 .theme-light aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip) {
     box-shadow: 0 0 25px @dark-blue-90;
+    outline: 1px solid light-dark(@dark-blue, @golden);
+    
 }
 
 #tooltip,
@@ -207,11 +288,6 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
             font-style: italic;
         }
 
-        .tooltip-sub-title {
-            margin: 0;
-            color: light-dark(@dark-blue, @beige);
-        }
-
         .tooltip-information-section {
             width: 100%;
             display: grid;
@@ -263,46 +339,6 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
             }
         }
 
-        .tooltip-tags {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-
-            .tooltip-tag {
-                width: 100%;
-                display: grid;
-                grid-template-columns: 80px 1fr;
-                align-items: start;
-                gap: 8px;
-                padding: 4px;
-                border: 1px solid light-dark(@dark-blue, @golden);
-                border-radius: 6px;
-
-                .tooltip-tag-label-container {
-                    display: flex;
-                    align-items: center;
-                    flex-direction: column;
-                    gap: 2px;
-
-                    .tooltip-tag-image {
-                        width: 40px;
-                        height: 40px;
-                    }
-                }
-
-                .tooltip-tag-label {
-                    font-weight: bold;
-                    text-align: center;
-                }
-
-                .tooltip-tag-description {
-                    display: flex;
-                    flex-wrap: wrap;
-                }
-            }
-        }
-
         .spaced {
             margin-bottom: 4px;
         }

templates/ui/tooltip/attack.hbs

@@ -1,6 +1,6 @@
 <div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{attack.img}}" />
-    <h2 class="tooltip-title">{{attack.name}}</h2>
+    <h2 class="tooltip-title">{{localize attack.name}}</h2>
     <div class="tags">
         {{#if (lookup config.ACTOR.abilities attack.roll.trait)}}
             <div class="tag">
@@ -31,6 +31,6 @@
     {{/if}}
 
     <p class="tooltip-hint">
-        <i class="fa-solid fa-computer-emouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
     </p>
 </div>

templates/ui/tooltip/beastform.hbs

@@ -1,31 +1,41 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <p class="tooltip-subtitle"><i>{{item.system.examples}}</i></p>
 
-    <div class="simple-info">{{item.system.examples}}</div>
-    {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipChips.hbs" chips=item.system.advantageOn label=(localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label")}}
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
 
-    <div class="tooltip-information-section spaced">
-        {{#with item.system.beastformAttackData}}
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}}</label>
-                <div>{{this.trait}}</div>
+    <div class="tags">
+        {{#with item.system.beastformAttackData}} 
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}} {{this.trait}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}}</label>
-                <div>{{this.traitBonus}}</div>
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}} {{this.traitBonus}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.evasion"}}</label>
-                <div>{{this.evasionBonus}}</div>
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.GENERAL.evasion"}} {{this.evasionBonus}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.damage"}}</label>
-                <div>{{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></div>
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.GENERAL.damage"}} {{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></span>
             </div>
         {{/with}}
     </div>
 
+    <h2 class="tooltip-title">{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}</h2>
+    <div class="tags advantages">
+        {{#each item.system.advantageOn as | chip |}}
+            <div class="tag">
+                <span>{{ifThen chip.value chip.value chip}}</span>
+            </div>
+        {{/each}}
+    </div>
+
     {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.features label=(localize "DAGGERHEART.GENERAL.features")}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>

templates/ui/tooltip/parts/tooltipTags.hbs

@@ -1,12 +1,12 @@
-{{#if (gt features.length 0)}}<h4 class="tooltip-sub-title">{{label}}</h4>{{/if}}
+{{#if (gt features.length 0)}}<h2 class="tooltip-title">{{label}}</h2>{{/if}}
 <div class="tooltip-tags">
     {{#each features as | feature |}}
         {{#with (ifThen ../isAction feature (ifThen feature.item feature.item feature))}}
             <div class="tooltip-tag">
                 <div class="tooltip-tag-label-container">
-                        <div class="tooltip-tag-label">{{localize this.name}}</div>
                         {{#if this.img}}<img class="tooltip-tag-image" src="{{this.img}}" />{{/if}}
-                    </div>
+                        <span class="tooltip-tag-label">{{localize this.name}}</span>
+                </div>
                 <div class="tooltip-tag-description">{{{localize (ifThen this.enrichedDescription this.enrichedDescription this.system.enrichedDescription)}}}</div>
             </div>
         {{/with}}