Items : layout homogène basé sur le modèle Anomalie
- Mixins LESS partagés (item-body, item-section, item-section-title, item-editor-wrap) - anomaly-body/section utilisent désormais ces mixins - Templates equipment/weapon/armure redessinés avec .item-body + .item-section - Fond crème, titre orange-left-border, wrap blanc ProseMirror sur tous les items Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -2,8 +2,53 @@
|
||||
|
||||
// ─── Item sheets shared ───────────────────────────────────────────────────────
|
||||
|
||||
// ── Mixins : corps de fiche homogène ──────────────────────────────────────────
|
||||
.item-body-mixin() {
|
||||
background: var(--cel-cream, #f0e8d4);
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 370px;
|
||||
}
|
||||
.item-section-mixin() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.item-section-title-mixin() {
|
||||
font-family: var(--cel-font-title);
|
||||
font-size: 0.78em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--cel-green-dark, #0c4c0c);
|
||||
background: linear-gradient(to right, rgba(12,76,12,0.12), transparent);
|
||||
border-left: 3px solid var(--cel-orange, #e07b00);
|
||||
padding: 2px 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.item-editor-wrap-mixin() {
|
||||
background: white;
|
||||
border: 1px solid rgba(122,92,32,0.3);
|
||||
border-radius: 3px;
|
||||
min-height: 60px;
|
||||
padding: 4px 6px;
|
||||
color: #1a1209;
|
||||
font-size: 0.88em;
|
||||
line-height: 1.5;
|
||||
.editor-content, .prosemirror { color: #1a1209; background: transparent; }
|
||||
p { margin: 0 0 4px 0; color: #1a1209; }
|
||||
}
|
||||
|
||||
.fvtt-celestopol.item {
|
||||
|
||||
// Classes partagées entre tous les types d'items
|
||||
.item-body { .item-body-mixin(); }
|
||||
.item-section { .item-section-mixin(); }
|
||||
.item-section-title { .item-section-title-mixin(); }
|
||||
.item-editor-wrap { .item-editor-wrap-mixin(); }
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -280,53 +325,16 @@
|
||||
}
|
||||
|
||||
// Corps principal sans onglets
|
||||
.anomaly-body {
|
||||
background: var(--cel-cream, #f0e8d4);
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 370px;
|
||||
}
|
||||
.anomaly-body { .item-body-mixin(); }
|
||||
.anomaly-section { .item-section-mixin(); }
|
||||
|
||||
.anomaly-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.anomaly-section-title {
|
||||
font-family: var(--cel-font-title);
|
||||
font-size: 0.78em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--cel-green-dark, #0c4c0c);
|
||||
background: linear-gradient(to right, rgba(12,76,12,0.12), transparent);
|
||||
border-left: 3px solid var(--cel-orange, #e07b00);
|
||||
padding: 2px 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.anomaly-editor-wrap {
|
||||
background: white;
|
||||
border: 1px solid rgba(122,92,32,0.3);
|
||||
border-radius: 3px;
|
||||
min-height: 60px;
|
||||
padding: 4px 6px;
|
||||
color: #1a1209;
|
||||
font-size: 0.88em;
|
||||
line-height: 1.5;
|
||||
|
||||
// ProseMirror reset
|
||||
.editor-content, .prosemirror { color: #1a1209; background: transparent; }
|
||||
p { margin: 0 0 4px 0; color: #1a1209; }
|
||||
}
|
||||
.anomaly-section-title { .item-section-title-mixin(); }
|
||||
.anomaly-editor-wrap { .item-editor-wrap-mixin(); }
|
||||
}
|
||||
}
|
||||
|
||||
// Equipment-specific
|
||||
&.equipment {
|
||||
padding: 0 10px 10px;
|
||||
.equipment-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -337,7 +345,6 @@
|
||||
|
||||
// Weapon-specific
|
||||
&.weapon {
|
||||
padding: 0 10px 10px;
|
||||
.weapon-meta {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -358,7 +365,6 @@
|
||||
border: 1px solid var(--cel-orange);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
margin: 8px 0;
|
||||
.damage-label { font-size: 0.72em; text-transform: uppercase; color: var(--cel-orange-light); letter-spacing: 0.05em; }
|
||||
.damage-value { font-family: var(--cel-font-title); font-size: 1.6em; font-weight: bold; color: var(--cel-orange); min-width: 28px; text-align: center; }
|
||||
.damage-hint { font-size: 0.78em; color: var(--cel-cream); font-style: italic; }
|
||||
@@ -367,7 +373,6 @@
|
||||
|
||||
// Armure-specific
|
||||
&.armure {
|
||||
padding: 0 10px 10px;
|
||||
.armure-stats {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
@@ -8,32 +8,37 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="armure-stats">
|
||||
<div class="armure-stat-box">
|
||||
<label>{{localize "CELESTOPOL.Armure.protection"}}</label>
|
||||
<div class="armure-stat-value">
|
||||
{{#if isEditable}}
|
||||
<input type="number" name="system.protection" value="{{system.protection}}" min="1" max="2">
|
||||
{{else}}
|
||||
<span>{{system.protection}}</span>
|
||||
{{/if}}
|
||||
<div class="item-body">
|
||||
<div class="armure-stats">
|
||||
<div class="armure-stat-box">
|
||||
<label>{{localize "CELESTOPOL.Armure.protection"}}</label>
|
||||
<div class="armure-stat-value">
|
||||
{{#if isEditable}}
|
||||
<input type="number" name="system.protection" value="{{system.protection}}" min="1" max="2">
|
||||
{{else}}
|
||||
<span>{{system.protection}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="armure-stat-hint">{{localize "CELESTOPOL.Armure.protectionHint"}}</div>
|
||||
</div>
|
||||
<div class="armure-stat-hint">{{localize "CELESTOPOL.Armure.protectionHint"}}</div>
|
||||
</div>
|
||||
<div class="armure-stat-box">
|
||||
<label>{{localize "CELESTOPOL.Armure.malus"}}</label>
|
||||
<div class="armure-stat-value">
|
||||
{{#if isEditable}}
|
||||
<input type="number" name="system.malus" value="{{system.malus}}" min="0" max="2">
|
||||
{{else}}
|
||||
<span>{{system.malus}}</span>
|
||||
{{/if}}
|
||||
<div class="armure-stat-box">
|
||||
<label>{{localize "CELESTOPOL.Armure.malus"}}</label>
|
||||
<div class="armure-stat-value">
|
||||
{{#if isEditable}}
|
||||
<input type="number" name="system.malus" value="{{system.malus}}" min="0" max="2">
|
||||
{{else}}
|
||||
<span>{{system.malus}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="armure-stat-hint">{{localize "CELESTOPOL.Armure.malusHint"}}</div>
|
||||
</div>
|
||||
<div class="armure-stat-hint">{{localize "CELESTOPOL.Armure.malusHint"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group description-group">
|
||||
{{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
|
||||
<div class="item-section">
|
||||
<div class="item-section-title">{{localize "CELESTOPOL.Actor.description"}}</div>
|
||||
<div class="item-editor-wrap">
|
||||
{{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,12 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="form-group description-group">
|
||||
{{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
|
||||
<div class="item-body">
|
||||
<div class="item-section">
|
||||
<div class="item-section-title">{{localize "CELESTOPOL.Actor.description"}}</div>
|
||||
<div class="item-editor-wrap">
|
||||
{{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,13 +40,18 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="weapon-damage-badge">
|
||||
<span class="damage-label">{{localize "CELESTOPOL.Weapon.degats"}}</span>
|
||||
<span class="damage-value">{{system.degats}}</span>
|
||||
<span class="damage-hint">{{localize (lookup (lookup damageTypes system.degats) "hint")}}</span>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="weapon-damage-badge">
|
||||
<span class="damage-label">{{localize "CELESTOPOL.Weapon.degats"}}</span>
|
||||
<span class="damage-value">{{system.degats}}</span>
|
||||
<span class="damage-hint">{{localize (lookup (lookup damageTypes system.degats) "hint")}}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group description-group">
|
||||
{{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
|
||||
<div class="item-section">
|
||||
<div class="item-section-title">{{localize "CELESTOPOL.Actor.description"}}</div>
|
||||
<div class="item-editor-wrap">
|
||||
{{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user