[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

module/applications/sheets/actors/character.mjs

@@ -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),
+                label: _loc(CONFIG.DH.ACTOR.abilities[key].label),
-                verbs: CONFIG.DH.ACTOR.abilities[key].verbs.map(x => game.i18n.localize(x))
+                verbs: CONFIG.DH.ACTOR.abilities[key].verbs.map(x => game.i18n.localize(x)),
+                isSpellcasting: this.document.system.spellcastModifierTrait.key === key
             };
 
             return acc;

styles/less/sheets/actors/character/header.less

@@ -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;
+                height: 3.625rem;
-                width: 60px;
                 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);
+                    }
                 }
             }
         }

styles/less/sheets/actors/character/sidebar.less

@@ -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 {

styles/less/utils/fonts.less

@@ -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";

templates/sheets/actors/character/header.hbs

@@ -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>
+                    <span>{{attribute.label}}</span>
-                    {{#if attribute.tierMarked}}
-                        <i class='fa-solid fa-circle'></i>
-                    {{else}}
-                        <i class='fa-regular fa-circle'></i>
-                    {{/if}}
                 </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>

templates/sheets/actors/character/sidebar.hbs

@@ -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>