cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-12 03:31:07 +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 {
position: absolute;
right: 0;
width: 68px;
width: 40px;
max-height: 600px;
overflow: hidden;
border: 0;
@ -20,13 +20,18 @@
.effect-container {
position: relative;
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 {
position: absolute;
bottom: 4px;
right: 4px;
font-size: 24px;
font-size: 16px;
color: @golden;
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-80: #2b1d0380;
@rustic-brown-80: #4c340780;
@red: #e54e4e;
@red-10: #e54e4e10;
@red-40: #e54e4e40;

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

@ -1,28 +1,45 @@
#tooltip.bordered-tooltip {
width: 320px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @golden;
background-image: url('../assets/parchments/dh-parchment-dark.png');
.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 {
display: flex;
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-style: italic;
}
}
.tooltip-footer {
display: flex;
justify-content: center;
.close-hint {
border-radius: 3px;
padding: 3px;
background: @rustic-brown-80;
color: @golden;
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="tooltip-header">
<h3>{{effect.name}}</h3>
<div class="helper">
{{#unless effect.isLockedCondition}}
{{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
{{/unless}}
<h2>{{effect.name}}</h2>
{{#if effect.appliedBy}}
<p class="subtitle">{{localize "DAGGERHEART.UI.EffectsDisplay.appliedBy" by=effect.appliedBy}}</p>
{{/if}}
</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>
{{#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}}
{{#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>