From 81fe4af36c55421d7f7ead7228044cc9fd95bd13 Mon Sep 17 00:00:00 2001 From: Murilo Brito Date: Tue, 23 Dec 2025 01:27:15 -0300 Subject: [PATCH] style beatform tooltip, fix unnarmed attack location, add outline border when users use midle click --- styles/less/ux/tooltip/tooltip.less | 132 +++++++++++++-------- templates/ui/tooltip/attack.hbs | 4 +- templates/ui/tooltip/beastform.hbs | 48 +++++--- templates/ui/tooltip/parts/tooltipTags.hbs | 6 +- 4 files changed, 118 insertions(+), 72 deletions(-) diff --git a/styles/less/ux/tooltip/tooltip.less b/styles/less/ux/tooltip/tooltip.less index 2d76d44c..a5358ef6 100644 --- a/styles/less/ux/tooltip/tooltip.less +++ b/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; } diff --git a/templates/ui/tooltip/attack.hbs b/templates/ui/tooltip/attack.hbs index 2a4e0767..8e4a1bb0 100644 --- a/templates/ui/tooltip/attack.hbs +++ b/templates/ui/tooltip/attack.hbs @@ -1,6 +1,6 @@
-

{{attack.name}}

+

{{localize attack.name}}

{{#if (lookup config.ACTOR.abilities attack.roll.trait)}}
@@ -31,6 +31,6 @@ {{/if}}

- {{localize "DAGGERHEART.UI.Tooltip.middleClick"}} + {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}

\ No newline at end of file diff --git a/templates/ui/tooltip/beastform.hbs b/templates/ui/tooltip/beastform.hbs index 0b90c8f7..1b04ac82 100644 --- a/templates/ui/tooltip/beastform.hbs +++ b/templates/ui/tooltip/beastform.hbs @@ -1,31 +1,41 @@ -
-

{{item.name}}

+
-
{{{description}}}
+

{{item.name}}

+

{{item.system.examples}}

-
{{item.system.examples}}
- {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipChips.hbs" chips=item.system.advantageOn label=(localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label")}} + {{#if description}} +
{{{description}}}
+ {{/if}} -
- {{#with item.system.beastformAttackData}} -
- -
{{this.trait}}
+
+ {{#with item.system.beastformAttackData}} +
+ {{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}} {{this.trait}}
-
- -
{{this.traitBonus}}
+
+ {{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}} {{this.traitBonus}}
-
- -
{{this.evasionBonus}}
+
+ {{localize "DAGGERHEART.GENERAL.evasion"}} {{this.evasionBonus}}
-
- -
{{concat this.damageDice ' ' this.damageBonus}}
+
+ {{localize "DAGGERHEART.GENERAL.damage"}} {{concat this.damageDice ' ' this.damageBonus}}
{{/with}}
+

{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}

+
+ {{#each item.system.advantageOn as | chip |}} +
+ {{ifThen chip.value chip.value chip}} +
+ {{/each}} +
+ {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.features label=(localize "DAGGERHEART.GENERAL.features")}} + +

+ {{localize "DAGGERHEART.UI.Tooltip.middleClick"}} +

\ No newline at end of file diff --git a/templates/ui/tooltip/parts/tooltipTags.hbs b/templates/ui/tooltip/parts/tooltipTags.hbs index b77c2215..6a6d126d 100644 --- a/templates/ui/tooltip/parts/tooltipTags.hbs +++ b/templates/ui/tooltip/parts/tooltipTags.hbs @@ -1,12 +1,12 @@ -{{#if (gt features.length 0)}}

{{label}}

{{/if}} +{{#if (gt features.length 0)}}

{{label}}

{{/if}}
{{#each features as | feature |}} {{#with (ifThen ../isAction feature (ifThen feature.item feature.item feature))}}
-
{{localize this.name}}
{{#if this.img}}{{/if}} -
+ {{localize this.name}} +
{{{localize (ifThen this.enrichedDescription this.enrichedDescription this.system.enrichedDescription)}}}
{{/with}}