Skill pages: potion and tool side by side with swaps; happenings as red and green banners with a fix button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 16:04:50 +01:00
parent 29ed3780da
commit 89fd9b3c40
3 changed files with 54 additions and 29 deletions

View file

@ -555,3 +555,19 @@ button.sheet-skill:hover { background: var(--panel-2); }
.doll-slot.starving { border-color: rgba(226, 100, 92, .7); background: rgba(226, 100, 92, .12); }
.doll-slot.starving .gi { opacity: .9; }
@media (max-width: 520px) { .doll-col { justify-items: center; } }
/* A skill's potion and tool, side by side */
.gear-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; }
.gear-row .panel { margin: 0; }
.gear-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.gear-card > .doll-slot { cursor: default; flex: none; }
.gear-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.gear-card .swap-grid { margin-left: auto; }
/* Happenings that touch this skill */
.happening-banner { margin-bottom: 14px; align-items: center; }
.happening-banner .banner-ico { font-size: 30px; }
.happening-banner b { font-size: 15px; }
.banner.good { border-color: rgba(95, 174, 90, .55); background: rgba(95, 174, 90, .08); }
.happening-banner { flex-wrap: wrap; }
.happening-banner .grow { min-width: min(260px, 70%); }
.happening-banner > .btn { margin-left: auto; }