// ============================================================ // PARTY ACTOR SHEET // ============================================================ .oathhammer .party-main { .party-header { display: flex; flex-direction: row; gap: 8px; align-items: stretch; } .party-portrait-wrap { flex-shrink: 0; .party-portrait { width: 94px; height: 110px; object-fit: cover; object-position: center top; border: 2px solid fade(@color-dark, 40%); border-radius: 4px; cursor: pointer; } } .party-header-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; .character-name { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid @color-olive; padding-bottom: 4px; input, span { flex: 1; min-width: 0; font-family: @font-primary; font-size: @font-size-lg; } > .control { flex-shrink: 0; } } } .party-header-fieldset { border: none; padding: 0; margin: 0; } // ── Treasury ─────────────────────────────────────────────── .party-treasury { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 1px solid @color-olive; border-radius: 3px; background: rgba(0,0,0,0.08); flex-wrap: wrap; .party-treasury-label { font-family: @font-secondary; font-size: @font-size-sm; font-weight: bold; color: @color-dark; white-space: nowrap; min-width: 4rem; } .party-currency { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 7rem; .currency-label { font-family: @font-secondary; font-size: @font-size-xs; font-weight: bold; color: @color-dark; white-space: nowrap; min-width: 1.8rem; } .currency-stepper { display: flex; align-items: center; gap: 2px; input { width: 3.5rem; text-align: center; font-size: @font-size-sm; padding: 1px 2px; } .currency-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; font-size: 0.85rem; font-weight: bold; line-height: 1; border: 1px solid @color-olive; border-radius: 3px; background: @color-olive-faint; color: @color-dark; cursor: pointer; user-select: none; flex-shrink: 0; &:hover { background: @color-gold; border-color: @color-gold; } } } } .party-currency-gp .currency-label { color: darken(@color-gold, 15%); } .party-currency-sp .currency-label { color: #888; } .party-currency-cp .currency-label { color: #aa6633; } } .party-slots { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-family: @font-secondary; font-size: @font-size-sm; .party-slots-label { font-weight: bold; color: @color-olive; margin-right: 0.3rem; text-transform: uppercase; font-size: @font-size-xs; letter-spacing: 0.04em; } .party-slots-current { font-weight: bold; min-width: 1.8rem; text-align: right; } .party-slots-sep { color: @color-olive; } .party-slots-max { width: 3.5rem; text-align: center; font-family: @font-secondary; font-size: @font-size-sm; } } } // ── Member list ──────────────────────────────────────────────── .oathhammer .item-list--party-member { .item-list-header, .item-entry { // order# | img | name | lineage | grit | light | actions grid-template-columns: 1.8rem @item-img-size 1fr 7rem 5rem 3rem 5.5rem; } .party-member-order { font-family: @font-secondary; font-size: @font-size-xs; font-weight: bold; color: @color-olive; text-align: center; align-self: center; } .item-detail--center { text-align: center; a { color: @color-dark; } .fa-faded { opacity: 0.2; } } } // ── Loot list ────────────────────────────────────────────────── .oathhammer .item-list--party-loot { .item-list-header, .item-entry { // img | name | type | qty | actions grid-template-columns: @item-img-size 1fr 6rem 5.5rem 5rem; } .item-qty { display: flex; align-items: center; gap: 3px; font-size: @font-size-sm; span { min-width: 1.5rem; text-align: center; } .qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; font-size: 0.8rem; font-weight: bold; line-height: 1; border: 1px solid @color-olive; border-radius: 2px; background: @color-olive-faint; cursor: pointer; user-select: none; &:hover { background: @color-gold; border-color: @color-gold; } } } }