Actor sheet, WIP

This commit is contained in:
2026-03-07 22:47:29 +01:00
parent c6f7a9e966
commit 8f7f0169e4
27 changed files with 835 additions and 381 deletions

View File

@@ -41,9 +41,15 @@
.character-resource {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 4px;
margin-bottom: 2px;
// formInput renders a <div class="form-group"> — flatten it so it doesn't break flex row
div.form-group {
display: contents;
}
input {
min-width: 2.5rem;
max-width: 2.5rem;

View File

@@ -29,7 +29,7 @@
// Global dialog styling
.application.dialog.oathhammer {
font-family: @font-primary;
font-family: @font-body;
font-size: @font-size-base;
.sheet-background();
}
@@ -37,11 +37,12 @@
// Shared actor content base
.oathhammer .character-content,
.oathhammer .npc-content {
font-family: @font-primary;
font-family: @font-body; // Calibri — standard text per design_rules.md
font-size: @font-size-base;
color: var(--color-dark-1);
.sheet-background();
overflow: auto;
padding: 10px 20px; // Inner margin so content clears the parchment border
nav.tabs [data-tab] {
color: @color-olive;
@@ -63,9 +64,10 @@
color: @color-dark;
}
// Character/NPC name — decorative title font
input[name="name"] {
height: 2.5rem;
font-family: @font-secondary;
font-family: @font-primary; // Sherwood — decorative title
font-size: @font-size-xl;
font-weight: bold;
border: none;
@@ -80,7 +82,7 @@
}
legend {
font-family: @font-secondary;
font-family: @font-secondary; // BlueDragon — section headers
font-size: @font-size-lg;
font-weight: bold;
letter-spacing: 1px;
@@ -88,7 +90,7 @@
}
label {
font-family: @font-secondary;
font-family: @font-secondary; // BlueDragon — UI labels
font-size: @font-size-base;
color: @color-dark;
}
@@ -98,3 +100,58 @@
.oathhammer .tab {
padding: 4px;
}
// ============================================================
// SKILLS TAB
// ============================================================
.oathhammer .skills-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
.skills-group {
margin: 0;
legend .attr-rank {
font-family: @font-body;
font-size: @font-size-sm;
color: @color-olive;
}
}
.skills-header,
.skill-row {
display: grid;
grid-template-columns: 1fr 3rem 3rem;
align-items: center;
gap: 4px;
}
.skills-header {
font-family: @font-secondary;
font-size: @font-size-sm;
font-weight: bold;
color: @color-blue;
border-bottom: 1px solid @color-olive;
margin-bottom: 2px;
padding-bottom: 2px;
}
.skill-row {
margin-bottom: 2px;
label.skill-name-col {
font-size: @font-size-sm;
}
.skill-rank-col input {
text-align: center;
}
.skill-total {
text-align: center;
font-weight: bold;
color: @color-blue;
}
}
}

View File

@@ -4,7 +4,8 @@
.oathhammer .item-sheet-common {
overflow: auto;
font-family: @font-primary;
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();
@@ -15,6 +16,11 @@
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 {
@@ -26,33 +32,70 @@
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: 1;
flex-direction: row;
align-items: center;
gap: 4px;
margin-bottom: 2px;
gap: 6px;
margin-bottom: 4px;
label {
& > label {
flex: 0 0 8rem; // Fixed label width, no grow/shrink
font-family: @font-secondary;
font-size: @font-size-base;
min-width: @label-min-width;
max-width: @label-min-width;
color: @color-dark;
}
select,
input {
text-align: left;
min-width: @input-min-width;
max-width: @input-max-width;
.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.2rem;
min-width: 260px;
padding: 0 0.3rem;
}
.shift-right {

View File

@@ -8,16 +8,18 @@
@font-body: "Calibri", "Segoe UI", sans-serif;
@font-size-base: 0.82rem;
// Colors
@color-blue: #1a4a7a;
@color-olive: #5a5a2a;
// Colors — from design_rules.md (CMYK converted to RGB)
// Blue: CMYK(94, 42, 9, 50) → rgb(8, 74, 116)
// Olive: CMYK(26, 28, 64, 56) → rgb(83, 81, 40)
@color-blue: #084a74;
@color-olive: #535128;
@color-gold: #c8a84b;
@color-dark: #2a1a0a;
@color-paper: #f5ead0;
// Derived
@color-olive-faint: rgba(90, 90, 42, 0.2);
@color-blue-hover: rgba(26, 74, 122, 0.08);
// Derived — using LESS fade() to keep colors in sync with variables
@color-olive-faint: fade(@color-olive, 20%);
@color-blue-hover: fade(@color-blue, 8%);
@color-input-bg: rgba(255, 255, 255, 0.3);
@color-disabled-bg: rgba(0, 0, 0, 0.08);