mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-05 20:34:15 +02:00
[UI] Rework styling of traits section of the character sheet (#1865)
* Rework styling of traits section of the character sheet * Adjust spacing in header a smidge
This commit is contained in:
Carlos Fernandez
GitHub
parent
c91d53b4d4
commit
e95ea3c281
6 changed files with 62 additions and 97 deletions
|
|
@ -209,8 +209,9 @@ export default class CharacterSheet extends DHBaseActorSheet {
|
|||
context.attributes = Object.keys(this.document.system.traits).reduce((acc, key) => {
|
||||
acc[key] = {
|
||||
...this.document.system.traits[key],
|
||||
name: game.i18n.localize(CONFIG.DH.ACTOR.abilities[key].name),
|
||||
verbs: CONFIG.DH.ACTOR.abilities[key].verbs.map(x => game.i18n.localize(x))
|
||||
label: _loc(CONFIG.DH.ACTOR.abilities[key].label),
|
||||
verbs: CONFIG.DH.ACTOR.abilities[key].verbs.map(x => game.i18n.localize(x)),
|
||||
isSpellcasting: this.document.system.spellcastModifierTrait.key === key
|
||||
};
|
||||
|
||||
return acc;
|
||||
|
|
|
|||
|
|
@ -5,20 +5,12 @@
|
|||
// Theme header backgrounds
|
||||
.appTheme({
|
||||
.character-header-sheet {
|
||||
.trait {
|
||||
background: url(../assets/svg/trait-shield.svg) no-repeat;
|
||||
}
|
||||
|
||||
.character-row .domains-section img {
|
||||
filter: @golden-filter;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
.character-header-sheet {
|
||||
.trait {
|
||||
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
|
||||
}
|
||||
|
||||
.character-row .domains-section img {
|
||||
filter: brightness(0) saturate(100%);
|
||||
}
|
||||
|
|
@ -101,7 +93,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
font-size: var(--font-size-12);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
|
||||
|
|
@ -131,7 +123,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.resource-section {
|
||||
display: flex;
|
||||
|
|
@ -217,37 +209,68 @@
|
|||
|
||||
.character-traits {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
gap: 8px;
|
||||
|
||||
.trait {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
height: 3.625rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.trait-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 5px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
font-size: var(--font-size-14);
|
||||
font-size: var(--font-size-12);
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
|
||||
i {
|
||||
line-height: 17px;
|
||||
font-size: var(--font-size-10);
|
||||
}
|
||||
}
|
||||
|
||||
.trait-value {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-20);
|
||||
text-align: center;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.tier-mark,
|
||||
.spellcasting-mark {
|
||||
position: absolute;
|
||||
opacity: 0.9;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
i {
|
||||
line-height: 17px;
|
||||
font-size: var(--font-size-11);
|
||||
}
|
||||
}
|
||||
|
||||
.tier-mark {
|
||||
bottom: 1px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.spellcasting-mark {
|
||||
bottom: 1px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.trait-name {
|
||||
color: light-dark(@dark, @beige);
|
||||
text-shadow: 0 0 8px light-dark(@dark-80, @beige-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,62 +74,6 @@
|
|||
.death-roll-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icons-list {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
top: 45px;
|
||||
right: 10px;
|
||||
|
||||
.spellcast-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
text-align: center;
|
||||
padding-right: 8px;
|
||||
max-width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
background: light-dark(@dark-blue-60, @dark-golden-80);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 4px double light-dark(@beige, @golden);
|
||||
color: light-dark(@beige, @golden);
|
||||
border-radius: 999px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.spellcast-label {
|
||||
font-size: var(--font-size-14);
|
||||
opacity: 0;
|
||||
margin-right: 0.3rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
i {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
align-content: center;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&:not(.no-label):hover {
|
||||
max-width: 300px;
|
||||
padding: 0 10px;
|
||||
border-radius: 60px;
|
||||
|
||||
.spellcast-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
--dh-font-title: 'Cinzel Decorative';
|
||||
--dh-font-subtitle: 'Cinzel';
|
||||
--dh-font-body: 'Montserrat';
|
||||
|
||||
/* Include missing font sizes */
|
||||
--font-size-22: 1.375rem;
|
||||
}
|
||||
|
||||
@font-title: ~"var(--dh-font-title, 'Cinzel Decorative'), serif";
|
||||
|
|
|
|||
|
|
@ -125,14 +125,9 @@
|
|||
|
||||
<div class="character-traits">
|
||||
{{#each this.attributes as |attribute key|}}
|
||||
<div class="trait" data-tooltip="<b>{{localize (concat 'DAGGERHEART.CONFIG.Traits.' key '.name') }}:</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>{{localize (concat 'DAGGERHEART.CONFIG.Traits.' key '.short')}}</span>
|
||||
{{#if attribute.tierMarked}}
|
||||
<i class='fa-solid fa-circle'></i>
|
||||
{{else}}
|
||||
<i class='fa-regular fa-circle'></i>
|
||||
{{/if}}
|
||||
<span>{{attribute.label}}</span>
|
||||
</div>
|
||||
<div class="trait-value">
|
||||
{{#if (gt attribute.value 0)}}
|
||||
|
|
@ -141,6 +136,16 @@
|
|||
<span>{{attribute.value}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if attribute.tierMarked}}
|
||||
<div class="tier-mark">
|
||||
<i class='fa-solid fa-circle' inert></i>
|
||||
</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>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,6 @@
|
|||
<aside class="character-sidebar-sheet">
|
||||
<div class="portrait {{#if isDeath}}death-roll{{/if}}">
|
||||
<img src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
|
||||
{{#if document.system.spellcastModifierTrait.key}}
|
||||
<div class="icons-list">
|
||||
<span class="spellcast-icon {{#if isDeath}}no-label{{/if}}">
|
||||
<span class="spellcast-label">
|
||||
{{localize "DAGGERHEART.ITEMS.Subclass.spellcastingTrait"}}:
|
||||
{{localize (concat 'DAGGERHEART.CONFIG.Traits.' document.system.spellcastModifierTrait.key '.short')}}
|
||||
</span>
|
||||
<i class="fa-solid fa-wand-sparkles"></i>
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
|
||||
isDeath}}data-action="makeDeathMove" {{/if}}><i class="fa-solid fa-skull death-save"></i></a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue