/* ============================================================
* paperdoll.css — Battle Brothers equipment paperdoll styling
* ============================================================
*
* PROVENANCE (required by README "EVERY line copied from bng-game
* must be documented"):
*
* COPIED VERBATIM FROM bng-game:
* bng-game/webapp/client/inventory/modules/paperdoll_module.css
* (the entire stylesheet below).
*
* WHY THIS PROJECT NEEDS IT:
* This project recreates Battle Brothers' character/inventory screen.
* The paperdoll (the 3-column equipment grid — Accessory/Head/Ammo on
* the small row, Mainhand/Body/Offhand on the big row, plus the
* backpack row) is the hard, fiddly part: exact slot dimensions,
* offsets, frame sprites, all traced from BB's own UI source. bng-game
* already did that port. Re-deriving it from BB source would duplicate
* weeks of work for zero benefit, so we reuse the finished look.
*
* WHAT WAS *NOT* COPIED (and why we don't need it):
* - paperdoll_module.js — bng-game builds this DOM at runtime in JS for
* a live combat screen with drag-drop. This project renders the same
* DOM server-side (Jinja) for a read-only view, so the JS rendering
* is reproduced as a template, not copied. The drag-drop / swap-item
* logic is bng-game combat machinery this project does not have.
* - The BB citations BELOW are bng-game's own (it cites the BB vanilla
* source each value came from). They are kept verbatim because this
* project's BB UI-PORT rule also requires citing the BB origin.
*
* Asset paths (/bb/images/...) are served by this project's own Flask
* routes pointing at the shared bb-data repo (canonical BB assets —
* allowed; NOT a bng-game dependency).
* ============================================================ */
/* BB: ui/screens/character/modules/character_screen_left_panel/character_screen_paperdoll_module.css */
/* BB: ui/controls/paperdoll_item.css */
/* --- outer module ----------------------------------------------------- */
/* Source: paperdoll_module.css L13-22 — .paperdoll-module. Full-width row
* inside the left content column, 1.2rem top-margin to break it off from
* the merc summary above. */
.character-screen-container .paperdoll-module
{
width: 100%;
position: relative;
float: left;
margin-top: 1.2rem;
}
/* --- 3 equipment columns --------------------------------------------- */
/* Source: paperdoll_module.css L25-36 — .equipment-column.
* Three columns split 33% / 34% / 33% across the row, 25.0rem tall to
* fit one small slot + spacer + one big slot. */
.character-screen-container .paperdoll-module .equipment-column
{
width: 33%;
height: 25.0rem;
position: relative;
float: left;
}
.character-screen-container .paperdoll-module .equipment-column.is-middle
{
width: 34%;
}
/* Source: paperdoll_module.css L38-57 — .l-equipment-column. The 7.0rem
* vertical track that holds the slot containers, centred inside the
* 33%-wide outer column. .is-left nudges 0.5rem right of centre,
* .is-right nudges 0.7rem left of the right edge. */
.character-screen-container .paperdoll-module .equipment-column > .l-equipment-column
{
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 7.0rem;
position: absolute;
margin: auto;
}
.character-screen-container .paperdoll-module .l-equipment-column.is-left
{
left: 0.5rem;
}
.character-screen-container .paperdoll-module .l-equipment-column.is-right
{
right: 0.7rem;
}
/* --- slot containers -------------------------------------------------- */
/* Source: paperdoll_module.css L74-84 — .l-slot-container (small). 7.0rem
* square. The slot-frame sprite is rendered by the inner paperdoll-item
* control's image-layer rather than this container's background. */
.character-screen-container .paperdoll-module .l-slot-container
{
width: 7.0rem;
height: 7.0rem;
position: relative;
}
/* Source: paperdoll_module.css L86-94 — .l-slot-container.is-big.
* Doubled height for weapons and body armor. */
.character-screen-container .paperdoll-module .l-slot-container.is-big
{
height: 14.0rem;
}
/* Source: paperdoll_module.css L96-109 — slot vertical-offset variants.
* The first small slot in each column gets a top offset; subsequent
* slots use the in-between offset. */
.character-screen-container .paperdoll-module .l-slot-container.is-top-small-offset
{
margin-top: 1.0rem;
}
.character-screen-container .paperdoll-module .l-slot-container.is-top-big-offset
{
margin-top: 1.8rem;
}
.character-screen-container .paperdoll-module .l-slot-container.is-in-between-offset
{
margin-top: 1.0rem;
}
/* --- backpack row ---------------------------------------------------- */
/* Source: paperdoll_module.css L254-262 — .backpack-row. 7.4rem tall row
* spanning 100% of the paperdoll-module width, 0.5rem above and below. */
.character-screen-container .paperdoll-module .backpack-row
{
width: 100%;
height: 7.4rem;
position: relative;
float: left;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* Source: paperdoll_module.css L264-273 — .l-backpack-row inner track.
* Width / left offset are set by the slot-count modifier classes below. */
.character-screen-container .paperdoll-module .backpack-row .l-backpack-row
{
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 7.4rem;
position: absolute;
}
/* Source: paperdoll_module.css L275-295 — slot-count widths. Two-slot
* layout (default merc) sits at left:9.8rem / width:14.8rem; four-slot
* layout (Bags and Belts perk) sits at left:2.4rem / width:30.4rem. */
.character-screen-container .paperdoll-module .l-backpack-row.has-slot-1
{
width: 7.4rem;
}
.character-screen-container .paperdoll-module .l-backpack-row.has-slot-2
{
width: 14.8rem;
left: 9.8rem;
}
.character-screen-container .paperdoll-module .l-backpack-row.has-slot-3
{
width: 22.6rem;
}
.character-screen-container .paperdoll-module .l-backpack-row.has-slot-4
{
width: 30.4rem;
left: 2.4rem;
}
/* Source: paperdoll_module.css L297-308 — .l-slot-container.is-backpack.
* The slot dimensions are NOT overridden here; BB inherits 7.0rem x 7.0rem
* from the base .l-slot-container rule (L74-84). The 7.4rem
* `inventory_bag_slot.png` background is intentionally larger than the
* slot — `overflow: hidden` clips 0.2rem of decorative frame on each
* side and `background-position: center` keeps the sprite centred. */
.character-screen-container .paperdoll-module .l-slot-container.is-backpack
{
float: left;
margin-left: 0.4rem;
background-image: url("/bb/images/ui/inventory/inventory_bag_slot.png");
background-size: 7.4rem 7.4rem;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.character-screen-container .paperdoll-module .l-slot-container.is-backpack:first-child
{
margin-left: 0;
}
/* --- paperdoll-item control (one per slot) ---------------------------- */
/* Source: ui/controls/paperdoll_item.css L16-23 — .ui-control.paperdoll-item
* base. 7.0rem square, relative-positioned, overflow hidden. */
.ui-control.paperdoll-item
{
width: 7.0rem;
height: 7.0rem;
position: relative;
overflow: hidden;
}
/* Source: paperdoll_item.css L25-28 — big variant doubles the height. */
.ui-control.paperdoll-item.is-big
{
height: 14.0rem;
}
/* Source: paperdoll_item.css L70-81 — image-layer wraps the visible
* artwork (slot-frame sprite when empty, item icon when occupied).
* Bottom inset 0.1rem mirrors BB's vertical nudge inside the slot. */
.ui-control.paperdoll-item > .image-layer
{
top: 0;
left: 0;
right: 0;
bottom: 0.1rem;
position: absolute;
margin: auto;
z-index: 1;
}
/* Source: paperdoll_item.css L88-102 — image-layer's ![]()
. Fills the
* layer; opacity 0.9 mirrors BB's slight dim on slot art. */
.ui-control.paperdoll-item > .image-layer img
{
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
position: absolute;
margin: auto;
opacity: 0.9;
}
/* Source: paperdoll_item.css L104-107 — small variant (used for slot
* art on a big slot, e.g. the empty-mainhand silhouette in a 14rem-tall
* slot). 50% height keeps the small icon centred. */
.ui-control.paperdoll-item > .image-layer img.is-small
{
height: 50%;
}
/* Source: paperdoll_item.css L109-112 — .is-blocked dims to 0.5 (used
* when a slot is unavailable, e.g. the offhand under a 2H weapon). */
.ui-control.paperdoll-item > .image-layer img.is-blocked
{
opacity: 0.5;
}
/* Source: paperdoll_item.css L115-126 — locked-layer wraps the padlock
* icon. Inset 0.4rem from each edge; padlock pinned to the bottom-right. */
.ui-control.paperdoll-item > .locked-layer
{
top: 0.4rem;
left: 0.4rem;
right: 0.4rem;
bottom: 0.4rem;
position: absolute;
margin: auto;
z-index: 2;
pointer-events: none;
}
/* Source: paperdoll_item.css L128-139 — padlock ![]()
. 2.0rem x 2.52rem,
* pinned bottom-right of the locked-layer. */
.ui-control.paperdoll-item > .locked-layer img
{
right: 0;
bottom: 0;
width: 2.0rem;
height: 2.52rem;
position: absolute;
opacity: 0.9;
pointer-events: none;
}
/* Source: paperdoll_item.css L160-183 — amount-layer + label. Numeric
* "current/max" overlay (ammo, throwing weapons) pinned bottom-left. */
.ui-control.paperdoll-item > .amount-layer
{
width: 100%;
height: 100%;
position: absolute;
padding: 0.4rem;
z-index: 3;
}
.ui-control.paperdoll-item > .amount-layer .label
{
left: 0.4rem;
right: 0;
bottom: 0.4rem;
height: 1.2rem;
position: absolute;
text-align: left;
line-height: 1.2rem;
}