cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-17 23:49:02 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add basic style to effects tooltip

Browse source
This commit is contained in:
moliloo 2025-11-26 00:09:21 -03:00
parent 5b671a931e
commit 24626545b9
4 changed files with 58 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

11
styles/less/ui/effects-display/sheet.less
View file

@ -1,7 +1,7 @@
.daggerheart.dh-style.effects-display { .daggerheart.dh-style.effects-display {
position: absolute; position: absolute;
right: 0; right: 0;
width: 68px; width: 40px;
max-height: 600px; max-height: 600px;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
@ -20,13 +20,18 @@
.effect-container { .effect-container {
position: relative; position: relative;
pointer-events: all; pointer-events: all;
border: 2px solid light-dark(@dark-blue, @golden); border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px;
img {
border-radius: 3px;
}
.effect-locked { .effect-locked {
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
right: 4px; right: 4px;
font-size: 24px; font-size: 16px;
color: @golden; color: @golden;
filter: drop-shadow(0 0 3px black); filter: drop-shadow(0 0 3px black);
} }

2
styles/less/utils/colors.less
View file

@ -28,6 +28,8 @@
@dark-golden-40: #2b1d0340; @dark-golden-40: #2b1d0340;
@dark-golden-80: #2b1d0380; @dark-golden-80: #2b1d0380;
@rustic-brown-80: #4c340780;
@red: #e54e4e; @red: #e54e4e;
@red-10: #e54e4e10; @red-10: #e54e4e10;
@red-40: #e54e4e40; @red-40: #e54e4e40;

41
styles/less/ux/tooltip/bordered-tooltip.less
View file

@ -1,28 +1,45 @@
#tooltip.bordered-tooltip { #tooltip.bordered-tooltip {
width: 320px; border: 1px solid @golden;
border: 1px solid light-dark(@dark-blue, @golden); background-image: url('../assets/parchments/dh-parchment-dark.png');
.daggerheart.dh-style.tooltip { .daggerheart.dh-style.tooltip {
color: @beige; display: flex;
flex-direction: column;
text-align: start;
width: 100%;
gap: 5px;
padding: 0px;
border-radius: 3px;
.tooltip-header { .tooltip-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: start;
width: 100%;
padding: 5px;
gap: 0px;
.helper { h2 {
display: flex;
justify-content: start;
font-size: var(--font-size-20);
color: @golden;
font-weight: 700;
margin: 0;
padding: 0;
}
.subtitle {
font-size: 12px; font-size: 12px;
font-style: italic;
} }
} }
.tooltip-footer { .close-hint {
display: flex; border-radius: 3px;
justify-content: center; padding: 3px;
background: @rustic-brown-80;
color: @golden;
font-size: 12px; font-size: 12px;
width: 100%;
font-style: italic;
font-weight: bold;
} }
} }
} }

30
templates/ui/tooltip/effect-display.hbs
View file

@ -1,16 +1,24 @@
<div class="daggerheart dh-style tooltip"> <div class="daggerheart dh-style tooltip">
<div class="tooltip-header"> <div class="tooltip-header">
<h3>{{effect.name}}</h3> <h2>{{effect.name}}</h2>
<div class="helper"> {{#if effect.appliedBy}}
{{#unless effect.isLockedCondition}} <p class="subtitle">{{localize "DAGGERHEART.UI.EffectsDisplay.appliedBy" by=effect.appliedBy}}</p>
{{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}} {{/if}}
{{/unless}} </div>
{{#if effect.description}}
<div class="description">
{{{effect.description}}}
</div>
{{else if effect.parent.system.description}}
<div class="description">
{{{effect.parent.system.description}}}
</div> </div>
</div>
<div>
{{#if effect.description}}{{{effect.description}}}{{else}}{{{effect.parent.system.description}}}{{/if}}
</div>
{{#if effect.appliedBy}}
<footer class="tooltip-footer">{{localize "DAGGERHEART.UI.EffectsDisplay.appliedBy" by=effect.appliedBy}}</footer>
{{/if}} {{/if}}
{{#unless effect.isLockedCondition}}
<p class="close-hint">
<i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
</p>
{{/unless}}
</div> </div>