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:
+37
-1
@@ -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,
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user