Fix NPC dossier layout: move block below header, proper responsive grid

- templates/actor/creature-sheet.html: moved dossier section out of the header into the sheet body so it no longer squashes the stat/HP area; switched inner grid to new sla-creature-dossier-grid class; Snapshot field now spans full width with sla-creature-dossier-wide
- css/mosh.css: added sla-creature-dossier-grid (3-col responsive grid collapsing to 2-col at 900px, 1-col at 640px); labels get display:block + bottom margin; inputs get width:100% and box-sizing; added sla-creature-dossier-wide span-3 helper; fixed dossier margin
This commit is contained in:
2026-04-15 17:20:34 +01:00
parent 2758be6096
commit 9269348bf4
2 changed files with 77 additions and 41 deletions
+37 -1
View File
@@ -3018,17 +3018,24 @@ p {
}
.mosh .sla-creature-dossier {
margin: 10px 0 14px;
margin: 10px 12px 14px;
padding: 12px;
border-radius: 14px;
background: rgba(14, 20, 28, 0.82);
border: 1px solid rgba(118, 164, 206, 0.18);
}
.mosh .sla-creature-dossier-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.mosh .sla-creature-dossier .resource {
padding: 6px 8px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
min-width: 0;
}
.mosh .sla-creature-dossier .resource-label {
@@ -3036,11 +3043,40 @@ p {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
display: block;
margin-bottom: 4px;
}
.mosh .sla-creature-dossier input {
min-height: 32px;
border-radius: 10px;
width: 100%;
font-size: 0.9rem;
box-sizing: border-box;
}
.mosh .sla-creature-dossier-wide {
grid-column: span 3;
}
@media (max-width: 900px) {
.mosh .sla-creature-dossier-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mosh .sla-creature-dossier-wide {
grid-column: span 2;
}
}
@media (max-width: 640px) {
.mosh .sla-creature-dossier-grid {
grid-template-columns: 1fr;
}
.mosh .sla-creature-dossier-wide {
grid-column: span 1;
}
}
.mosh .headerinputtext,
+40 -40
View File
@@ -4,46 +4,6 @@
<header class="creature-header-grid">
<!-- Creature NAME -->
<input name="name" class="noborder creaturename" style="grid-area:'name';" type="text" value="{{name}}" placeholder="{{ localize 'Mosh.Name' }}" />
<section class="sla-creature-dossier">
<div class="grid grid-3col" style="gap: 8px;">
<div class="resource">
<label class="resource-label">Role</label>
<input type="text" name="system.slaNpc.role.value" value="{{system.slaNpc.role.value}}" />
</div>
<div class="resource">
<label class="resource-label">Archetype</label>
<input type="text" name="system.slaNpc.archetype.value" value="{{system.slaNpc.archetype.value}}" />
</div>
<div class="resource">
<label class="resource-label">Species</label>
<input type="text" name="system.slaNpc.species.value" value="{{system.slaNpc.species.value}}" />
</div>
<div class="resource">
<label class="resource-label">Affiliation</label>
<input type="text" name="system.slaNpc.affiliation.value" value="{{system.slaNpc.affiliation.value}}" />
</div>
<div class="resource">
<label class="resource-label">Department / Cell</label>
<input type="text" name="system.slaNpc.department.value" value="{{system.slaNpc.department.value}}" />
</div>
<div class="resource">
<label class="resource-label">Sector</label>
<input type="text" name="system.slaNpc.sector.value" value="{{system.slaNpc.sector.value}}" />
</div>
<div class="resource">
<label class="resource-label">Disposition</label>
<input type="text" name="system.slaNpc.disposition.value" value="{{system.slaNpc.disposition.value}}" />
</div>
<div class="resource">
<label class="resource-label">Threat</label>
<input type="text" name="system.slaNpc.threat.value" value="{{system.slaNpc.threat.value}}" />
</div>
<div class="resource">
<label class="resource-label">Snapshot</label>
<input type="text" name="system.slaNpc.summary.value" value="{{system.slaNpc.summary.value}}" />
</div>
</div>
</section>
<div class="creature-header">
{{#if system.stats.combat.enabled}}
<!-- Combat -->
@@ -137,6 +97,46 @@
</div>
<div class="whiteline"></div>
</header>
<section class="sla-creature-dossier">
<div class="sla-creature-dossier-grid">
<div class="resource">
<label class="resource-label">Role</label>
<input type="text" name="system.slaNpc.role.value" value="{{system.slaNpc.role.value}}" />
</div>
<div class="resource">
<label class="resource-label">Archetype</label>
<input type="text" name="system.slaNpc.archetype.value" value="{{system.slaNpc.archetype.value}}" />
</div>
<div class="resource">
<label class="resource-label">Species</label>
<input type="text" name="system.slaNpc.species.value" value="{{system.slaNpc.species.value}}" />
</div>
<div class="resource">
<label class="resource-label">Affiliation</label>
<input type="text" name="system.slaNpc.affiliation.value" value="{{system.slaNpc.affiliation.value}}" />
</div>
<div class="resource">
<label class="resource-label">Department / Cell</label>
<input type="text" name="system.slaNpc.department.value" value="{{system.slaNpc.department.value}}" />
</div>
<div class="resource">
<label class="resource-label">Sector</label>
<input type="text" name="system.slaNpc.sector.value" value="{{system.slaNpc.sector.value}}" />
</div>
<div class="resource">
<label class="resource-label">Disposition</label>
<input type="text" name="system.slaNpc.disposition.value" value="{{system.slaNpc.disposition.value}}" />
</div>
<div class="resource">
<label class="resource-label">Threat</label>
<input type="text" name="system.slaNpc.threat.value" value="{{system.slaNpc.threat.value}}" />
</div>
<div class="resource sla-creature-dossier-wide">
<label class="resource-label">Snapshot</label>
<input type="text" name="system.slaNpc.summary.value" value="{{system.slaNpc.summary.value}}" />
</div>
</div>
</section>
<div class="creature-description-grid">
<div class="creaturedescription">
<div class="grid grid-3col">