diff --git a/module/applications/sheets/actors/character.mjs b/module/applications/sheets/actors/character.mjs index 513ad3f3..b20fe513 100644 --- a/module/applications/sheets/actors/character.mjs +++ b/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), - 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; diff --git a/styles/less/sheets/actors/character/header.less b/styles/less/sheets/actors/character/header.less index 31fd4256..ffd01c83 100644 --- a/styles/less/sheets/actors/character/header.less +++ b/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; - 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); + } } } } diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less index b159a8e8..0e6e3d97 100644 --- a/styles/less/sheets/actors/character/sidebar.less +++ b/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 { diff --git a/styles/less/utils/fonts.less b/styles/less/utils/fonts.less index 5c1e597a..d4902508 100755 --- a/styles/less/utils/fonts.less +++ b/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"; diff --git a/templates/sheets/actors/character/header.hbs b/templates/sheets/actors/character/header.hbs index a75b2c2f..1b1c4965 100644 --- a/templates/sheets/actors/character/header.hbs +++ b/templates/sheets/actors/character/header.hbs @@ -125,14 +125,9 @@