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

Character sheet: equipment grid on a warrior outline, slot details, compact tools

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 15:03:22 +01:00
parent a40b837541
commit 812813c455
4 changed files with 110 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

28
static/styles.css
View file

@ -470,3 +470,31 @@ button.sheet-skill:hover { background: var(--panel-2); }
.stat-grid .gstat.muted { font-weight: 500; }
.hands { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #d6b48a;
border: 1px solid rgba(214, 180, 138, .5); border-radius: 4px; padding: 0 4px; }
/* Paper doll: a compact slot grid on a warrior's outline, details beside it */
.doll-wrap { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.doll { position: relative; display: grid; grid-template-columns: repeat(3, 52px); gap: 8px; padding: 6px; }
.doll-figure { position: absolute; inset: -4px; display: grid; place-items: center; opacity: .09; pointer-events: none; }
.doll-figure .gi { width: 100%; height: 100%; }
.doll-slot { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center;
background: var(--panel-2); border: 1px solid var(--line); padding: 0; cursor: pointer; color: inherit; }
.doll-slot .gi { width: 34px; height: 34px; }
.doll-slot.empty .gi { width: 26px; height: 26px; opacity: .35; }
.doll-slot.future { background: transparent; border-style: dashed; opacity: .45; cursor: default; }
.doll-slot.future .gi { opacity: .3; }
.doll-slot.ghost > .gi { opacity: .3; }
.doll-slot.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.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 > span:first-child { grid-column: 1 / -1; margin-bottom: 2px; }
.doll-stats b { justify-self: end; }
.doll-stats .gi { width: 14px; height: 14px; }
.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; }
.worn-head .btn { margin-left: auto; }
.tool-slots { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .doll-wrap { grid-template-columns: 1fr; justify-items: center; } .doll-side { width: 100%; } }