Redesign adversité section: 3 colored cards layout
Replace vertical list with horizontal card layout matching header style: - BLEUE (blue), ROUGE (red), NOIRE (dark) cards with top-colored borders - Gem image 52px with drop-shadow + hover scale - Large numeric counter (Signika font) - Colored -/+ buttons (red minus, green plus) - Modifier fields compact row below cards - Section title with amber letterhead style Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -156,34 +156,35 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sheet-box color-bg-archetype">
|
||||
<div class="sheet-box color-bg-archetype adversite-section">
|
||||
|
||||
<h4 class="item-name-label competence-name">Adversités</h4>
|
||||
<ul class="item-list alternate-list">
|
||||
<h4 class="adversite-section-title">Adversités</h4>
|
||||
<div class="adversite-cards">
|
||||
{{#each system.adversite as |adv key|}}
|
||||
<li class="item flexrow" data-adversite="{{key}}">
|
||||
<a data-action="modifyAdversite" class="plus-minus-button" data-adversite-value="-1">-</a>
|
||||
<div class="icon-adversite-container">
|
||||
<img class="icon-adversite" src="systems/fvtt-mournblade-cyd-2-0/assets/icons/gemme_{{key}}.webp">
|
||||
<div class="adversite-text">{{adv}}</div>
|
||||
<div class="adversite-card adversite-{{key}}" data-adversite="{{key}}">
|
||||
<div class="adversite-card-title">{{upperFirst key}}</div>
|
||||
<img class="adversite-gem" src="systems/fvtt-mournblade-cyd-2-0/assets/icons/gemme_{{key}}.webp">
|
||||
<div class="adversite-value">{{adv}}</div>
|
||||
<div class="adversite-controls">
|
||||
<a data-action="modifyAdversite" class="adv-btn adv-minus" data-adversite-value="-1">−</a>
|
||||
<a data-action="modifyAdversite" class="adv-btn adv-plus" data-adversite-value="1">+</a>
|
||||
</div>
|
||||
<a data-action="modifyAdversite" class="plus-minus-button" data-adversite-value="1">+</a>
|
||||
<div class=""> </div>
|
||||
<div class=""> </div>
|
||||
<div class=""> </div>
|
||||
</li>
|
||||
</div>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{#if isGM}}
|
||||
<div class="flexrow">
|
||||
<span class="item-name-label competence-name item-field-label-long" data-tooltip="Modificateur de Vigueur">Mod. de Vigueur</span>
|
||||
<input type="text" class="item-field-label-short" name="system.sante.vigueurmodifier"
|
||||
value="{{system.sante.vigueurmodifier}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="flexrow">
|
||||
<span class="item-name-label competence-name item-field-label-long" data-tooltip="Modificateur de Seuil de Pouvoir">Mod. de Seuil de Pouvoir</span>
|
||||
<input type="text" class="item-field-label-short" name="system.ame.seuilpouvoirmodifier"
|
||||
value="{{system.ame.seuilpouvoirmodifier}}" data-dtype="Number" />
|
||||
|
||||
{{#if isGM}}
|
||||
<div class="adversite-modifiers">
|
||||
<div class="adversite-modifier-row">
|
||||
<label data-tooltip="Modificateur de Vigueur">Mod. Vigueur</label>
|
||||
<input type="text" name="system.sante.vigueurmodifier"
|
||||
value="{{system.sante.vigueurmodifier}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="adversite-modifier-row">
|
||||
<label data-tooltip="Modificateur de Seuil de Pouvoir">Mod. Seuil Pouvoir</label>
|
||||
<input type="text" name="system.ame.seuilpouvoirmodifier"
|
||||
value="{{system.ame.seuilpouvoirmodifier}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user