// ============================================================ // ITEM LIST — Used in actor sheet tabs (weapons, spells, etc.) // ============================================================ .oathhammer { .item-list { list-style: none; margin: 0; padding: 0; } // Header row shared by all lists .item-list-header { display: grid; align-items: center; gap: 4px; padding: 2px 4px 3px; border-bottom: 1px solid @color-olive; margin-bottom: 2px; font-family: @font-secondary; font-size: @font-size-xs; color: @color-blue; span { text-align: center; } .col-name { text-align: left; } } // Data row .item-entry { display: grid; align-items: center; gap: 4px; padding: 2px 4px; border-bottom: 1px solid @color-olive-faint; &:hover { background-color: @color-blue-hover; } .item-img { width: @item-img-size; height: @item-img-size; border: 1px solid @color-olive; border-radius: 2px; object-fit: cover; align-self: center; justify-self: center; flex-shrink: 0; } .item-name { font-family: @font-body; font-size: @font-size-base; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .item-detail { font-size: @font-size-xs; color: @color-dark; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-group { font-size: @font-size-xs; color: @color-dark; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-magic { text-align: center; font-size: @font-size-xs; color: #8e44ad; } .item-type { font-size: @font-size-xs; color: @color-blue; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-equipped { display: flex; align-items: center; justify-content: center; input[type="checkbox"] { width: 0.95rem; height: 0.95rem; cursor: pointer; margin: 0; } } .item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; a { .transition-opacity(); font-size: @font-size-sm; &:hover { color: @color-blue; } } } } // ── Per-list grid templates ────────────────────────────── // Format: [img] [name] [detail cols...] [equipped?] [actions] .item-list--weapon { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 4.5rem 3.5rem 2rem 1.5rem 1.8rem 9rem; } } // Settlement inventory: simpler lists (no equip slot, no qty) .item-list--weapons { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 6rem 4rem; } } .item-list--armor { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 3.5rem 2.5rem 3.5rem 1.5rem 1.8rem 5.5rem; } } .item-list--armors { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 6rem 4rem; } } .item-list--ammo { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 4rem 3.5rem; } } .item-list--spell { .item-list-header, .item-entry { // img | name | DV | Tradition | Range | Duration | SpellSave | actions grid-template-columns: @item-img-size 1fr 2.5rem 5.5rem 3.5rem 4.5rem 3.5rem 5rem; } } .item-list--miracle { .item-list-header, .item-entry { // img | name | DivineTradition | actions grid-template-columns: @item-img-size 1fr 6rem 5rem; } } .miracles-blocked { opacity: 0.45; pointer-events: none; } .item-list--equipment { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 5rem 3rem 3.5rem; } } .item-list--magic-item { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 5rem 3.5rem; } } .item-list--condition { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 5.5rem 3.5rem; } } .item-list--trait { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 6rem 6rem 3.5rem; } } .item-list--oath { .item-list-header, .item-entry { grid-template-columns: @item-img-size 12rem 1fr 3.5rem 3.5rem; } } // ── NPC-specific grid variants ─────────────────────────────── // NPC Skill list: [color emoji] [name] [pool] [threshold] [roll btn] [actions] .item-list--npc-skill { .item-list-header, .item-entry { grid-template-columns: 1.8rem 1fr 3.5rem 3.5rem 2rem 4.5rem; } } // NPC Weapon list: [img] [name] [damage] [AP] [actions incl attack+dmg+edit+del] .item-list--npc-weapon { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 3.5rem 2.5rem 7rem; } } // NPC Trait list: [img] [name] [type badge] [actions] .item-list--npc-trait { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 6rem 3.5rem; } } // NPC Armor list: [img] [name] [AV] [penalty] [actions] .item-list--npc-armor { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 3rem 3rem 3.5rem; } } // NPC Equipment list: [img] [name] [actions] .item-list--npc-equip { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 3.5rem; } } // NPC Attack list: [img] [name] [damage] [AP] [actions: roll+edit+del] .item-list--npc-attack { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 7rem 3rem 6rem; } } .item-usage { font-size: @font-size-xs; color: @color-dark; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-violated { text-align: center; font-size: @font-size-sm; i.fa-circle-xmark { color: #c0392b; } i.fa-circle-check { color: #27ae60; } } .oath--violated { background-color: fade(#c0392b, 8%); .item-name { color: #c0392b; } } .no-items { color: @color-olive; font-style: italic; font-size: @font-size-xs; padding: 4px; } .create-btn { margin-left: 6px; color: @color-blue; .transition-opacity(); } } // Miracle blocked banner on the Magic tab .miracle-blocked-banner { display: flex; align-items: center; gap: 6px; background: fade(#c0392b, 10%); border: 1px solid fade(#c0392b, 45%); border-radius: 4px; padding: 4px 10px; margin-bottom: 4px; color: #c0392b; font-size: @font-size-xs; font-weight: bold; span { flex: 1; } a { color: @color-dark; font-weight: normal; font-size: @font-size-sm; .transition-opacity(); white-space: nowrap; i { color: @color-gold; } } } // Slots counter on the Combat tab .slots-counter { display: flex; gap: 6px; padding: 2px 6px 4px; .slots-label { font-size: @font-size-xs; font-weight: bold; color: @color-dark; text-transform: uppercase; letter-spacing: 0.03em; } .slots-value { font-size: @font-size-xs; font-weight: bold; color: @color-dark; background: fade(@color-gold, 15%); border: 1px solid fade(@color-gold, 40%); border-radius: 4px; padding: 1px 8px; min-width: 3.5rem; text-align: center; &.slots-over { color: #c0392b; background: fade(#c0392b, 10%); border-color: fade(#c0392b, 40%); } } } // ── Regiment list (settlement garrison tab) ────────────────────────────────── .oathhammer { .item-list--regiment { .item-list-header, .item-entry { grid-template-columns: @item-img-size 1fr 4rem 5rem 4rem 4.5rem; } } }