Refactor header: card-based layout with colored stat cards
- Replace flat ul/li header with .header-banner + .header-stat-cards - 5 colored stat cards: LOI (amber), CHAOS (red), BONNE AVENTURE (green), VIGUEUR (maroon), ÂME (navy) - Profile image: 90px with golden border + hover glow - Character name: large serif font (CentaurMT) with transparent bg - Fix overflow: visible on .stat-card to prevent select dropdown clipping - Fix label colors: dark (#1a1008) instead of white for readability - VIGUEUR big value: Signika/sans-serif font (avoids CentaurMT 1/I confusion) - Consistent font sizes and alignment across all stat fields Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -2,88 +2,112 @@
|
||||
|
||||
{{!-- Sheet Header --}}
|
||||
<header class="sheet-header">
|
||||
<div class="header-fields background-sheet-header">
|
||||
<div class="flexrow">
|
||||
<img class="profile-img" src="{{actor.img}}" data-action="editImage" title="{{actor.name}}" />
|
||||
<div class="flexcol">
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
|
||||
<div class="flexrow">
|
||||
|
||||
<ul class="item-list alternate-list">
|
||||
{{!-- Bannière : image + nom + bouton --}}
|
||||
<div class="header-banner">
|
||||
<img class="profile-img" src="{{actor.img}}" data-action="editImage" title="{{actor.name}}" />
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Nom du personnage" /></h1>
|
||||
<button type="button" class="sheet-mode-toggle" data-action="toggleSheet"
|
||||
data-tooltip="{{#if isEditMode}}Mode Visualisation{{else}}Mode Édition{{/if}}">
|
||||
<i class="{{#if isEditMode}}fas fa-eye{{else}}fas fa-edit{{/if}}"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<li class="item flexrow ">
|
||||
<h4 class="item-name-label competence-name item-field-label-short" {{#if (gt system.balance.loi system.balance.chaos)}}style="color: red;"{{/if}}>Loi</h4>
|
||||
<label class="item-name-label competence-name item-field-label-short">Niveau</label>
|
||||
<input type="text" class="padd-right status-small-label color-class-common item-field-label-short"
|
||||
name="system.balance.loi" value="{{system.balance.loi}}" data-dtype="Number" />
|
||||
<label class="item-name-label competence-name item-field-label-short">Points</label>
|
||||
<select class="status-small-label color-class-common item-field-label-short" type="text"
|
||||
name="system.balance.pointsloi" value="{{system.balance.pointsloi}}" data-dtype="Number">
|
||||
{{selectOptions config.listeNiveauSkill selected=system.balance.pointsloi}}
|
||||
</select>
|
||||
<label class="item-name-label competence-name item-field-label-medium">Aspect {{system.balance.aspect}}</label>
|
||||
</li>
|
||||
{{!-- Cartes de statistiques --}}
|
||||
<div class="header-stat-cards">
|
||||
|
||||
<li class="item flexrow ">
|
||||
<h4 class="item-name-label competence-name item-field-label-short" {{#if (gt system.balance.chaos system.balance.loi)}}style="color: red;"{{/if}}>Chaos</h4>
|
||||
<label class="item-name-label competence-name item-field-label-short">Niveau</label>
|
||||
<input type="text" class="padd-right status-small-label color-class-common item-field-label-short"
|
||||
name="system.balance.chaos" value="{{system.balance.chaos}}" data-dtype="Number" />
|
||||
<label class="item-name-label competence-name item-field-label-short">Points</label>
|
||||
<select class="status-small-label color-class-common item-field-label-short" type="text"
|
||||
name="system.balance.pointschaos" value="{{system.balance.pointschaos}}" data-dtype="Number">
|
||||
{{selectOptions config.listeNiveauSkill selected=system.balance.pointschaos}}
|
||||
</select>
|
||||
<label class="item-name-label competence-name item-field-label-medium">Marge {{system.balance.marge}}</label>
|
||||
</li>
|
||||
{{!-- LOI --}}
|
||||
<div class="stat-card card-loi{{#if (gt system.balance.loi system.balance.chaos)}} dominant{{/if}}">
|
||||
<div class="stat-card-title">⚖ Loi</div>
|
||||
<div class="stat-card-content">
|
||||
<div class="stat-field">
|
||||
<label>Niv.</label>
|
||||
<input type="text" name="system.balance.loi" value="{{system.balance.loi}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="stat-field">
|
||||
<label>Pts</label>
|
||||
<select name="system.balance.pointsloi">
|
||||
{{selectOptions config.listeNiveauSkill selected=system.balance.pointsloi}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="stat-derived">Aspect : {{system.balance.aspect}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li class="item flexrow ">
|
||||
<h4 class="item-name-label competence-name item-field-label-short" data-tooltip="Bonne Aventure">BA</h4>
|
||||
<label class="item-name-label competence-name item-field-label-short">Base</label>
|
||||
<input type="text" class="padd-right status-small-label color-class-common item-field-label-short"
|
||||
name="system.bonneaventure.base" value="{{system.bonneaventure.base}}" data-dtype="Number" />
|
||||
<label class="item-name-label competence-name item-field-label-short">Actuelle</label>
|
||||
<input type="text" class="padd-right status-small-label color-class-common item-field-label-short"
|
||||
name="system.bonneaventure.actuelle" value="{{system.bonneaventure.actuelle}}" data-dtype="Number" />
|
||||
<h4 class="item-name-label competence-name item-field-label-short">Eclat</h4>
|
||||
<input type="text" class="padd-right status-small-label color-class-common item-field-label-short"
|
||||
name="system.eclat.value" value="{{system.eclat.value}}" data-dtype="Number" />
|
||||
</li>
|
||||
{{!-- CHAOS --}}
|
||||
<div class="stat-card card-chaos{{#if (gt system.balance.chaos system.balance.loi)}} dominant{{/if}}">
|
||||
<div class="stat-card-title">☯ Chaos</div>
|
||||
<div class="stat-card-content">
|
||||
<div class="stat-field">
|
||||
<label>Niv.</label>
|
||||
<input type="text" name="system.balance.chaos" value="{{system.balance.chaos}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="stat-field">
|
||||
<label>Pts</label>
|
||||
<select name="system.balance.pointschaos">
|
||||
{{selectOptions config.listeNiveauSkill selected=system.balance.pointschaos}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="stat-derived">Marge : {{system.balance.marge}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li class="item flexrow">
|
||||
<h4 class="item-name-label competence-name item-field-label-short">Vigueur</h4>
|
||||
<input disabled class="padd-right status-small-label color-class-common item-field-label-short"
|
||||
type="text" name="system.sante.vigueur" value="{{system.sante.vigueur}}" data-dtype="Number" />
|
||||
<h4 class="item-name-label competence-name item-field-label-short">Etat</h4>
|
||||
<select class="liste-etat status-small-label color-class-common item-field-label-medium" type="text" name="system.sante.etat"
|
||||
value="{{system.sante.etat}}" data-dtype="Number">
|
||||
{{selectOptions combativiteList selected=system.sante.etat valueAttr="value" nameAttr="value" labelAttr="label"}}
|
||||
</select>
|
||||
</li>
|
||||
|
||||
<li class="item flexrow">
|
||||
<h4 class="item-name-label competence-name item-field-label-short" data-tooltip="Seuil de Pouvoir">Pouvoir</h4>
|
||||
<input disabled class="padd-right status-small-label color-class-common item-field-label-short"
|
||||
type="text" name="system.ame.seuilpouvoir" value="{{system.ame.seuilpouvoir}}" data-dtype="Number" />
|
||||
<h4 class="item-name-label competence-name item-field-label-short">Âme</h4>
|
||||
<select class="liste-etat status-small-label color-class-common item-field-label-medium" type="text" name="system.ame.etat"
|
||||
value="{{system.ame.etat}}" data-dtype="Number">
|
||||
{{selectOptions ameList selected=system.ame.etat valueAttr="value" nameAttr="value" labelAttr="label"}}
|
||||
</select>
|
||||
<h4 class="item-name-label competence-name item-field-label-short">Max</h4>
|
||||
<select class="liste-etat status-small-label color-class-common item-field-label-short" type="text" name="system.ame.max"
|
||||
value="{{system.ame.max}}" data-dtype="Number">
|
||||
{{selectOptions ameMaxList selected=system.ame.max valueAttr="value" nameAttr="value" labelAttr="label"}}
|
||||
</select>
|
||||
<button type="button" class="sheet-mode-toggle" data-action="toggleSheet" data-tooltip="{{#if isEditMode}}Mode Visualisation{{else}}Mode Édition{{/if}}">
|
||||
<i class="{{#if isEditMode}}fas fa-eye{{else}}fas fa-edit{{/if}}"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
{{!-- BONNE AVENTURE --}}
|
||||
<div class="stat-card card-ba">
|
||||
<div class="stat-card-title">★ Bonne Aventure</div>
|
||||
<div class="stat-card-content">
|
||||
<div class="stat-field">
|
||||
<label>Base</label>
|
||||
<input type="text" name="system.bonneaventure.base" value="{{system.bonneaventure.base}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="stat-field">
|
||||
<label>Act.</label>
|
||||
<input type="text" name="system.bonneaventure.actuelle" value="{{system.bonneaventure.actuelle}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="stat-field">
|
||||
<label>Éclat</label>
|
||||
<input type="text" name="system.eclat.value" value="{{system.eclat.value}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{!-- VIGUEUR --}}
|
||||
<div class="stat-card card-vigueur">
|
||||
<div class="stat-card-title">♥ Vigueur</div>
|
||||
<div class="stat-card-content">
|
||||
<div class="stat-field stat-field-center">
|
||||
<span class="stat-big-value">{{system.sante.vigueur}}</span>
|
||||
</div>
|
||||
<div class="stat-field">
|
||||
<label>État</label>
|
||||
<select name="system.sante.etat">
|
||||
{{selectOptions combativiteList selected=system.sante.etat valueAttr="value" nameAttr="value" labelAttr="label"}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{!-- ÂME --}}
|
||||
<div class="stat-card card-ame">
|
||||
<div class="stat-card-title">✦ Âme <span class="stat-sub">(Seuil {{system.ame.seuilpouvoir}})</span></div>
|
||||
<div class="stat-card-content">
|
||||
<div class="stat-field">
|
||||
<label>État</label>
|
||||
<select name="system.ame.etat">
|
||||
{{selectOptions ameList selected=system.ame.etat valueAttr="value" nameAttr="value" labelAttr="label"}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="stat-field">
|
||||
<label>Max</label>
|
||||
<select name="system.ame.max">
|
||||
{{selectOptions ameMaxList selected=system.ame.max valueAttr="value" nameAttr="value" labelAttr="label"}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
{{!-- Sheet Tab Navigation --}}
|
||||
|
||||
Reference in New Issue
Block a user