rope/guildhall
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Combat stats grid pinned under the slot details; damage type on the equipped weapon

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 15:45:33 +01:00
parent 8f44557076
commit 50f069b069
5 changed files with 52 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

18
static/styles.css
View file

@ -485,10 +485,7 @@ button.sheet-skill:hover { background: var(--panel-2); }
.doll-slot .hands { position: absolute; top: 2px; right: 2px; font-size: 9px; padding: 0 3px; }
.doll-slot.small { width: 40px; height: 40px; cursor: default; }
.doll-slot.small .gi { width: 26px; height: 26px; }
.doll-side { display: grid; gap: 12px; min-width: 0; }
.doll-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; align-items: center; }
.doll-stats b { justify-self: end; }
.doll-stats .gi { width: 14px; height: 14px; }
.doll-side { min-width: 0; }
.worn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.worn-head > span:nth-child(2) { display: grid; }
.worn-head .ico .gi { width: 22px; height: 22px; }
@ -541,3 +538,16 @@ button.sheet-skill:hover { background: var(--panel-2); }
.bar.mini.foe > span { background: var(--bad); }
.pill { padding: 3px 10px 3px 3px; }
.pill .dmg { border-radius: 50%; }
/* The doll's side: slot details on top, combat stats pinned to the bottom */
.doll-wrap { align-items: stretch; }
.doll-side { display: flex; flex-direction: column; gap: 12px; }
.doll-slot-info { display: grid; gap: 10px; }
.combat-stats { margin-top: auto; display: grid; gap: 4px; }
.slot-type { position: absolute; bottom: -4px; left: -4px; }
.slot-type .dmg { width: 16px; height: 16px; background: var(--panel); border-radius: 4px; }
.doll-slot .slot-type .gi { width: 11px; height: 11px; }
.doll { align-self: start; }
.doll-slot-info { min-height: 200px; align-content: start; }
.swap-grid { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 6px 0; scrollbar-width: thin; }
.doll-slot.swap { flex: none; }