325 lines
6.6 KiB
Plaintext
325 lines
6.6 KiB
Plaintext
// ============================================================
|
|
// ACTOR SHEET — Character layout, attributes, resources, etc.
|
|
// ============================================================
|
|
|
|
.oathhammer {
|
|
|
|
.actor-img {
|
|
border: 2px solid @color-blue;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.character-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
|
|
// Portrait + right column layout
|
|
.character-pc {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
flex: 1;
|
|
}
|
|
|
|
// Portrait alone on the left, fixed square
|
|
.character-portrait {
|
|
flex-shrink: 0;
|
|
width: @portrait-height;
|
|
|
|
.actor-img {
|
|
width: @portrait-height;
|
|
height: @portrait-height;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
// Right column: stacks name, identity bar, stats band
|
|
.character-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
}
|
|
|
|
// Row 1: character name
|
|
.character-name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-bottom: 1px solid @color-olive;
|
|
padding-bottom: 4px;
|
|
|
|
input {
|
|
flex: 1;
|
|
font-family: @font-primary;
|
|
font-size: @font-size-lg;
|
|
}
|
|
}
|
|
|
|
// Row 2: identity bar (lineage + class + level/xp)
|
|
.character-identity-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
|
|
.identity-slot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 6px;
|
|
border: 1px solid @color-olive;
|
|
border-radius: 3px;
|
|
background: rgba(0,0,0,0.15);
|
|
font-size: @font-size-sm;
|
|
min-width: 6rem;
|
|
min-height: 1.6rem;
|
|
|
|
&.empty {
|
|
opacity: 0.6;
|
|
font-style: italic;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.identity-img {
|
|
width: 18px;
|
|
height: 18px;
|
|
object-fit: cover;
|
|
border-radius: 2px;
|
|
border: none;
|
|
}
|
|
|
|
.identity-name {
|
|
flex: 1;
|
|
font-family: @font-secondary;
|
|
font-size: @font-size-sm;
|
|
}
|
|
|
|
.slot-icon { font-size: @font-size-sm; opacity: 0.6; }
|
|
.slot-placeholder { font-size: @font-size-sm; }
|
|
|
|
a { font-size: @font-size-sm; opacity: 0.7; &:hover { opacity: 1; } }
|
|
}
|
|
|
|
.identity-xp {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
margin-left: auto;
|
|
font-size: @font-size-sm;
|
|
|
|
.xp-label {
|
|
font-family: @font-secondary;
|
|
font-size: @font-size-sm;
|
|
color: @color-olive;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.xp-sep { opacity: 0.6; }
|
|
|
|
input {
|
|
width: 3rem;
|
|
text-align: center;
|
|
font-size: @font-size-sm;
|
|
padding: 1px 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Row 3: unified stats band — resources | attributes | arcane stress
|
|
.character-stats-band {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 6px;
|
|
flex: 1;
|
|
|
|
// Vital resources: Grit / Luck / Defense / Movement
|
|
.character-resources {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
gap: 2px;
|
|
padding: 3px 6px;
|
|
border: 1px solid @color-olive;
|
|
border-radius: 3px;
|
|
background: rgba(0,0,0,0.08);
|
|
|
|
.character-resource {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
white-space: nowrap;
|
|
|
|
div.form-group { display: contents; }
|
|
|
|
input {
|
|
width: 2.4rem;
|
|
text-align: center;
|
|
font-size: @font-size-sm;
|
|
padding: 1px 2px;
|
|
}
|
|
|
|
.res-sep { opacity: 0.5; font-size: @font-size-xs; }
|
|
}
|
|
|
|
.resource-label {
|
|
min-width: 3.8rem;
|
|
font-family: @font-secondary;
|
|
font-size: @font-size-xs;
|
|
color: @color-dark;
|
|
}
|
|
}
|
|
|
|
// Attributes fieldset
|
|
.character-attributes {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
// Arcane stress compact
|
|
.character-arcane-stress {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Attributes grid (6 columns)
|
|
.attributes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 4px;
|
|
}
|
|
|
|
.attribute-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
|
|
label {
|
|
font-family: @font-secondary;
|
|
font-size: @font-size-sm;
|
|
color: @color-dark;
|
|
text-align: center;
|
|
}
|
|
|
|
input {
|
|
width: 2.5rem;
|
|
text-align: center;
|
|
font-size: @font-size-lg;
|
|
}
|
|
}
|
|
|
|
// Currency bar
|
|
.currency-bar {
|
|
margin-top: 4px;
|
|
|
|
.currency-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
flex: 1;
|
|
|
|
input {
|
|
width: 4rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Lineage / Class item slots in Identity tab
|
|
.identity-lineage-class {
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
|
|
.item-slot {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
border: 2px solid @color-gold;
|
|
border-radius: 4px;
|
|
background: rgba(212, 160, 23, 0.08);
|
|
min-height: 40px;
|
|
|
|
&.empty {
|
|
border-style: dashed;
|
|
opacity: 0.7;
|
|
cursor: default;
|
|
|
|
.slot-icon {
|
|
font-size: 1.2rem;
|
|
color: @color-gold;
|
|
}
|
|
.slot-placeholder {
|
|
font-family: @font-body;
|
|
font-style: italic;
|
|
color: @color-gold;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
.item-img {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-fit: contain;
|
|
border: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-name {
|
|
flex: 1;
|
|
font-family: @font-primary;
|
|
font-size: 1rem;
|
|
color: @color-dark;
|
|
}
|
|
|
|
a[data-action] {
|
|
color: @color-gold;
|
|
&:hover { color: @color-blue; }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Biodata
|
|
.biodata-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
// Arcane Stress compact
|
|
.character-arcane-stress {
|
|
.stress-inputs {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
// formInput renders a <div class="form-group"> — flatten it
|
|
div.form-group { display: contents; }
|
|
input {
|
|
width: 2.8rem;
|
|
text-align: center;
|
|
}
|
|
span { opacity: 0.6; }
|
|
}
|
|
|
|
// Defense display
|
|
.defense-display {
|
|
min-width: 3rem;
|
|
max-width: 3rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
}
|