cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-06 04:44:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Implement another traits redesign

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-05 03:26:05 -04:00
parent 94852cec21
commit e4d8530b03
4 changed files with 105 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

110
styles/less/sheets/actors/character/header.less
View file

@ -211,59 +211,101 @@
display: flex; display: flex;
padding: 0; padding: 0;
margin-bottom: 15px; margin-bottom: 15px;
gap: 8px; justify-content: space-between;
max-width: 38.5rem;
gap: 0.5rem;
padding-left: 0.5rem;
.trait { .trait {
height: 3.625rem; --color-border: light-dark(@semi-transparent-dark-blue, @golden-60);
cursor: pointer; cursor: pointer;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
flex: 1;
position: relative; position: relative;
background-color: light-dark(transparent, @dark-blue);
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
min-width: 4.375rem;
.trait-name { .trait-name {
display: flex; position: relative;
align-items: center; background-color: light-dark(@semi-transparent-dark-blue, @golden-40);
padding-top: 5px; border: 1px solid var(--color-border);
color: light-dark(@dark-blue, @golden); border-radius: 3px;
color: light-dark(var(--color-light-1), @golden);
font-size: var(--font-size-12); font-size: var(--font-size-12);
font-weight: 600; font-weight: 600;
height: 1rem;
line-height: 1rem;
white-space: nowrap;
width: 100%;
padding: 0 0.1876px 0 0.375rem;
margin-right: 0.125rem; /* makes it center SLIGHTLY */
text-shadow: 1px 1px 2px @light-black;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.trait-value { .tier-mark {
font-style: normal; position: absolute;
font-weight: 600; background-color: @dark-blue;
font-size: var(--font-size-20); border: 1px solid light-dark(@dark-blue, @golden);
text-align: center; border-radius: 50%;
margin-bottom: 0.375rem; width: 1rem;
} height: 1rem;
right: calc(100% - 0.4375rem);
.tier-mark, display: flex;
.spellcasting-mark { justify-content: center;
position: absolute; align-items: center;
opacity: 0.9; &.marked::before {
color: light-dark(@dark-blue, @golden); content: ' ';
i { position: absolute;
line-height: 17px; width: 0.5rem;
font-size: var(--font-size-11); height: 0.5rem;
border-radius: 50%;
background-color: @golden;
}
} }
} }
.tier-mark { .trait-value-area {
bottom: 1px; --background: light-dark(#e8e6e3, @dark-blue);
left: 3px; display: flex;
} position: relative;
.trait-value {
position: absolute;
inset: 0;
display: flex;
align-items: center;
.spellcasting-mark { justify-content: center;
bottom: 1px; font-style: normal;
right: 3px; font-weight: 600;
font-size: var(--font-size-20);
text-align: center;
margin-bottom: 0.375rem;
}
.spellcasting-mark {
position: absolute;
border: 1px solid light-dark(@dark-blue, @golden);
color: @golden;
left: 0;
right: 0;
bottom: -0.375rem;
margin-inline: auto;
border-radius: 50%;
width: 1.125rem;
height: 1.125rem;
background: radial-gradient(190.63% 190.63% at 50% -80.63%, #18152E 70%, #4D4494 80%, #A0837E 90%, var(--color-border) 100%);
font-size: var(--font-size-9);
text-shadow: 0 0 2px @light-black;
display: flex;
align-items: center;
justify-content: center;
}
} }
&:hover { &:hover {

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

@ -5,6 +5,7 @@
--golden: #f3c267; --golden: #f3c267;
--golden-10: #f3c26710; --golden-10: #f3c26710;
--golden-40: #f3c26740; --golden-40: #f3c26740;
--golden-60: #f3c26760;
--golden-90: #f3c26790; --golden-90: #f3c26790;
--golden-bg: #f3c2671a; --golden-bg: #f3c2671a;
--golden-secondary: #eaaf42; --golden-secondary: #eaaf42;
@ -89,6 +90,7 @@
@golden: var(--golden, #f3c267); @golden: var(--golden, #f3c267);
@golden-10: var(--golden-10, #f3c26710); @golden-10: var(--golden-10, #f3c26710);
@golden-40: var(--golden-40, #f3c26740); @golden-40: var(--golden-40, #f3c26740);
@golden-60: var(--golden-60, #f3c26760);
@golden-90: var(--golden-90, #f3c26790); @golden-90: var(--golden-90, #f3c26790);
@golden-bg: var(--golden-bg, #f3c2671a); @golden-bg: var(--golden-bg, #f3c2671a);
@golden-secondary: var(--golden-secondary, #eaaf42); @golden-secondary: var(--golden-secondary, #eaaf42);

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

@ -7,6 +7,8 @@
--dh-font-body: 'Montserrat'; --dh-font-body: 'Montserrat';
/* Include missing font sizes */ /* Include missing font sizes */
--font-size-8: 0.5rem;
--font-size-9: 0.5625rem;
--font-size-22: 1.375rem; --font-size-22: 1.375rem;
} }

40
templates/sheets/actors/character/header.hbs
View file

@ -125,27 +125,37 @@
<div class="character-traits"> <div class="character-traits">
{{#each this.attributes as |attribute key|}} {{#each this.attributes as |attribute key|}}
<div class="trait" data-tooltip="<b>{{attribute.label}}:</b><br>{{#each attribute.verbs}}{{this}}<br>{{/each}}" data-action="rollAttribute" data-attribute="{{key}}" data-value="{{attribute.value}}"> {{!-- <div class="trait" data-tooltip="<b>{{attribute.label}}:</b><br>{{#each attribute.verbs}}{{this}}<br>{{/each}}" data-action="rollAttribute" data-attribute="{{key}}" data-value="{{attribute.value}}">
<div class="trait-name">
<span>{{attribute.label}}</span>
</div>
<div class="trait-value">
{{#if (gt attribute.value 0)}}
<span>+{{attribute.value}}</span>
{{else}}
<span>{{attribute.value}}</span>
{{/if}}
</div>
{{#if attribute.tierMarked}} {{#if attribute.tierMarked}}
<div class="tier-mark"> <div class="tier-mark">
<i class='fa-solid fa-circle' inert></i> <i class='fa-solid fa-circle' inert></i>
</div> </div>
{{/if}} {{/if}}
{{#if isSpellcasting}} </div> --}}
<div class="spellcasting-mark" data-tooltip="DAGGERHEART.ITEMS.Subclass.spellcastingTrait"> <div class="trait {{#if isSpellcasting}}with-spellcasting{{/if}}" data-tooltip="<b>{{attribute.label}}:</b><br>{{#each attribute.verbs}}{{this}}<br>{{/each}}" data-action="rollAttribute" data-attribute="{{key}}" data-value="{{attribute.value}}">
<i class="fa-solid fa-wand-magic-sparkles" inert></i> <div class="trait-name">
<div class="tier-mark {{#if attribute.tierMarked}}marked{{/if}}"></div>
<span>{{attribute.label}}</span>
</div>
<div class="trait-value-area">
<svg width="52" height="46" viewBox="0 0 52 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H52L51.0714 18.254L48.6808 24.0952L47.5745 39.9596L26 46L4.42553 39.9596L3.31915 24.0952L0.928571 18.254L0 0Z" fill="var(--color-border)"/>
<path d="M2.61192 6.55748C2.28358 3.03888 5.05207 0 8.58596 0H43.414C46.9479 0 49.7164 3.03887 49.3881 6.55747L46.8083 34.203C46.5652 36.808 44.6622 38.9552 42.1052 39.5094L27.2709 42.7245C26.4334 42.9061 25.5666 42.9061 24.7291 42.7245L9.89482 39.5094C7.33785 38.9552 5.43478 36.808 5.19169 34.203L2.61192 6.55748Z" fill="var(--background)"/>
</svg>
<div class="trait-value">
{{#if (gt attribute.value 0)}}
<span>+{{attribute.value}}</span>
{{else}}
<span>{{attribute.value}}</span>
{{/if}}
</div> </div>
{{/if}} {{#if isSpellcasting}}
<div class="spellcasting-mark" data-tooltip="DAGGERHEART.ITEMS.Subclass.spellcastingTrait">
<i class="fa-solid fa-wand-magic-sparkles" inert></i>
</div>
{{/if}}
</div>
</div> </div>
{{/each}} {{/each}}
</div> </div>