Actor sheet, WIP
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user