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:
parent
29ed3780da
commit
89fd9b3c40
3 changed files with 54 additions and 29 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue