// ============================================================ // ITEM SHEETS — Shared item sheet layout (all item types) // ============================================================ .oathhammer .item-sheet-common { overflow: auto; padding: 10px 20px; // Inner margin so content clears the parchment border font-family: @font-body; // Calibri — standard text per design_rules.md font-size: @font-size-base; .sheet-background(); .header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 2px solid @color-blue; // Item name input — decorative title font input[name="name"] { font-family: @font-primary; // Sherwood — decorative title } } .item-img { height: @item-sheet-img; width: @item-sheet-img; border: 2px solid @color-olive; border-radius: 4px; cursor: pointer; object-fit: cover; } // Override Foundry dark-theme input/select backgrounds for parchment look input:not([type="checkbox"]), select { height: 1.5rem; background-color: @color-input-bg; border-color: @color-blue; color: @color-dark; } // Checkboxes: natural size, no custom background input[type="checkbox"] { width: auto; height: auto; background-color: transparent; border-color: @color-blue; } input[name="name"] { height: 2.5rem; font-family: @font-primary; font-size: @font-size-xl; font-weight: bold; border: none; border-bottom: 2px solid @color-blue; background: transparent; } label { font-family: @font-secondary; font-size: @font-size-base; color: @color-dark; } .form-group { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-bottom: 4px; & > label { flex: 0 0 8rem; // Fixed label width, no grow/shrink font-family: @font-secondary; font-size: @font-size-base; color: @color-dark; } .form-fields { flex: 1; min-width: 0; input:not([type="checkbox"]), select { width: 100%; box-sizing: border-box; } } } .align-top { flex: 1; min-width: 0; align-self: flex-start; padding: 0 0.3rem; } .shift-right { margin-left: 2rem; } fieldset { margin-top: 6px; border-color: @color-olive; border-radius: 4px; } legend { font-family: @font-secondary; font-size: @font-size-lg; font-weight: bold; color: @color-blue; } // ── Enchantment fieldset ───────────────────────────────────── .enchantment-fieldset { .enchant-cursed-label { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 8px; font-family: @font-secondary; font-size: @font-size-base; color: @color-dark; white-space: nowrap; input[type="checkbox"] { margin: 0; } } } // ── Class proficiency checkboxes ──────────────────────────── .proficiency-section { display: flex; gap: 8px; margin-top: 8px; .proficiency-fieldset { flex: 1; } .proficiency-checkboxes { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 2px; } .proficiency-option { display: flex; align-items: center; gap: 4px; font-family: @font-body; font-size: @font-size-base; color: @color-dark; cursor: pointer; white-space: nowrap; input[type="checkbox"] { width: auto; height: auto; accent-color: @color-blue; } } } } // SkillNPC sheet — vertical stack layout .oathhammer .skillnpc-sheet { .skillnpc-stats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; .form-group > label { flex: 0 0 9rem; } } } // NpcAttack sheet — vertical stack layout (mirrors skillnpc) .oathhammer .npcattack-sheet { .npcattack-stats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; .form-group > label { flex: 0 0 9rem; } } } // Regiment sheet .oathhammer .regiment-sheet { display: flex; flex-direction: column; gap: 6px; .regiment-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; .form-group > label { flex: 0 0 6rem; } } .regiment-armor-fields { display: flex; gap: 4px; input[type="number"] { width: 3rem; } } .regiment-skill-row, .regiment-attack-row, .regiment-trait-row { display: grid; gap: 4px; margin-bottom: 2px; align-items: center; input, select { font-size: @font-size-sm; padding: 1px 3px; } a.item-delete { text-align: center; color: @color-dark; opacity: 0.4; &:hover { color: #c0392b; opacity: 1; } } } .regiment-skill-header, .regiment-attack-header { font-weight: bold; font-size: @font-size-xs; color: @color-dark; opacity: 0.6; text-transform: uppercase; } .regiment-skill-row { grid-template-columns: 1fr 3rem 6rem 1.5rem; } .regiment-attack-row { grid-template-columns: 1fr 3.5rem 6rem 3rem 1fr 1.5rem; } .regiment-trait-row { grid-template-columns: 1fr 2fr 1.5rem; } }