Fix creature sheet: complete TECHNIQUE tab + copper theme

- Fix tabGroups 'stats'→'principal' (tab content was invisible)
- Add 'creature' CSS class to distinguish from personnage sheet
- New header layout: stat cards (Ressources, Vigueur, Combat)
- Rewrite creature template with full TECHNIQUE tab content:
  * Attributes with icons and level dropdowns (0-35)
  * Vitesse input
  * Santé section (Vigueur seuil)
  * Actions de combat (Initiative, Monté/Déf. totale, Assommer,
    Coup bas, Immobiliser, Repousser, Désengager)
  * Adversités section (reuses personnage CSS classes)
- Copper/orange CSS theme for .creature class overrides
- Add .stat-derived-value CSS for non-editable derived stats

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-04-03 09:35:12 +02:00
parent f0969c9eb4
commit b255a628fe
4 changed files with 254 additions and 236 deletions

View File

@@ -298,6 +298,22 @@
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 1px;
}
// Valeur dérivée affichée comme texte (non-éditable)
.stat-derived-value {
flex: 1;
min-width: 0;
height: 20px;
line-height: 20px;
font-size: 0.82rem;
font-weight: 700;
font-family: "Signika", "Arial Narrow", sans-serif;
font-variant-numeric: lining-nums tabular-nums;
color: #f0dfc0;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
display: block;
}
}
}
}
@@ -1334,16 +1350,8 @@
}
// PNJ Sheet - Orange/Copper theme for visual distinction
.fvtt-mournblade-cyd-2-0.actor.pnj-sheet {
// Variant background pour PNJs - teinte orange/cuivre
.background-sheet-header-creature {
background: linear-gradient(135deg, rgba(80, 40, 0, 0.15) 0%, rgba(100, 50, 0, 0.1) 100%);
border: 2px solid rgba(205, 127, 50, 0.5);
border-radius: 4px;
padding: 0;
}
// Creature Sheet - Orange/Copper theme for visual distinction
.fvtt-mournblade-cyd-2-0.actor.creature {
// Légère teinte orange/cuivre pour les sections
.sheet-box {
@@ -1352,40 +1360,49 @@
}
}
// Header simplifié pour PNJs
.sheet-header {
flex: 0 0 auto !important;
padding: 0;
}
// Header stat cards - copper accent
.stat-card {
border-color: rgba(180, 100, 20, 0.5);
border-top-color: rgba(205, 127, 50, 0.8);
.profile-img {
width: 80px;
height: 80px;
border-radius: 8px;
border: 2px solid rgba(205, 127, 50, 0.6);
object-fit: cover;
cursor: pointer;
flex-shrink: 0;
.stat-card-title {
color: #cd7f32;
border-bottom-color: rgba(180, 100, 20, 0.3);
}
}
// Tabs avec teinte orange/cuivre
nav.tabs {
.item.active {
nav.tabs .item {
&.active {
border-bottom-color: rgba(205, 127, 50, 0.8);
color: #cd7f32;
}
&:hover:not(.active) {
color: #d4a060;
}
}
// Section titles avec teinte orange/cuivre
.section-title {
color: #b8734d;
border-bottom-color: rgba(205, 127, 50, 0.3);
border-left-color: rgba(205, 127, 50, 0.8);
}
// Items headers
.items-title-bg {
background: linear-gradient(135deg, rgba(80, 40, 0, 0.15) 0%, rgba(100, 50, 0, 0.1) 100%);
border-bottom: 1px solid rgba(205, 127, 50, 0.3);
.items-title-text {
color: #cd7f32;
}
}
// Adversité — copper accent overrides
.adversite-section {
.adversite-section-title {
color: #cd7f32;
}
}
}