ee124af202
- Create npc-body.hbs as combined body template with all sections - Simplify PARTS to header + body instead of individual sections - Add flex layout and custom scrollbar CSS for sheet-body - Preload npc-body.hbs template in vagabond.mjs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
3135 lines
73 KiB
SCSS
3135 lines
73 KiB
SCSS
// Vagabond RPG - Actor Sheet Styles
|
|
// ==================================
|
|
|
|
// Base actor sheet styles
|
|
.vagabond.sheet.actor {
|
|
min-width: 600px;
|
|
min-height: 500px;
|
|
|
|
// ==========================================
|
|
// HEADER - Three Column Layout
|
|
// ==========================================
|
|
.sheet-header {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: $spacing-4;
|
|
padding: $spacing-4;
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: 2px solid var(--color-border);
|
|
|
|
// Left column - Portrait
|
|
.header-left {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.profile-img {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
border: none; // Remove border, container provides it
|
|
border-radius: $radius-md;
|
|
cursor: pointer;
|
|
transition: opacity $transition-fast;
|
|
|
|
&:hover {
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Center column - Name and details
|
|
.header-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
min-width: 200px;
|
|
|
|
.actor-name {
|
|
margin: 0;
|
|
|
|
input {
|
|
@include input-base;
|
|
width: 100%;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-xl;
|
|
font-weight: $font-weight-bold;
|
|
padding: $spacing-2;
|
|
}
|
|
}
|
|
|
|
.header-fields {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-2;
|
|
|
|
.header-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
|
|
label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
span {
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
input {
|
|
@include input-base;
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-sm;
|
|
|
|
&[type="number"] {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Right column - Resources
|
|
.header-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-3;
|
|
min-width: 200px;
|
|
max-width: 250px;
|
|
}
|
|
}
|
|
|
|
// ==========================================
|
|
// RESOURCE BARS (HP, Mana)
|
|
// ==========================================
|
|
.resource-bars {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.resource-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
|
|
> label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.bar-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
// The meter container
|
|
.bar-container {
|
|
flex: 1;
|
|
position: relative;
|
|
height: 28px;
|
|
background-color: var(--color-bg-secondary) er;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15);
|
|
|
|
// The fill bar
|
|
.bar-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
border-radius: $radius-md 0 0 $radius-md;
|
|
transition: width $transition-base;
|
|
}
|
|
|
|
// Values overlay - backdrop pill for legibility
|
|
.bar-values {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-1 $spacing-2;
|
|
background: var(--color-bar-values-bg);
|
|
border-radius: $radius-full;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
|
|
input {
|
|
width: 32px;
|
|
padding: 2px 4px;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
background: var(--color-bar-input-bg);
|
|
border: 1px solid var(--color-border-light);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-primary);
|
|
|
|
&:focus {
|
|
background: var(--color-bg-input);
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
color: var(--color-text-secondary);
|
|
font-size: $font-size-sm;
|
|
}
|
|
|
|
.max {
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Resource +/- buttons
|
|
.resource-buttons {
|
|
display: flex;
|
|
gap: $spacing-1;
|
|
|
|
button {
|
|
@include button-base;
|
|
@include flex-center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text-primary);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--color-bg-secondary);
|
|
border-color: var(--color-accent-primary);
|
|
color: var(--color-accent-primary);
|
|
}
|
|
|
|
i {
|
|
font-size: 10px;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
// HP-specific colors
|
|
&.hp {
|
|
.bar-fill {
|
|
background: linear-gradient(to bottom, var(--color-danger), #6b0000);
|
|
}
|
|
|
|
&.healthy .bar-fill {
|
|
background: linear-gradient(to bottom, var(--color-success), #1f3f1b);
|
|
}
|
|
|
|
&.warning .bar-fill {
|
|
background: linear-gradient(to bottom, var(--color-warning), #9a7009);
|
|
}
|
|
|
|
&.critical .bar-fill {
|
|
background: linear-gradient(to bottom, var(--color-danger), #580000);
|
|
}
|
|
}
|
|
|
|
// Mana-specific colors
|
|
&.mana {
|
|
.bar-fill {
|
|
background: linear-gradient(to bottom, var(--color-info), #1f3838);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================
|
|
// SECONDARY RESOURCES (Luck, Fatigue, etc.)
|
|
// ==========================================
|
|
.secondary-resources {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.resource {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
font-size: $font-size-sm;
|
|
|
|
label {
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-secondary);
|
|
margin-right: auto;
|
|
}
|
|
|
|
.value {
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.separator {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.max {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.unit {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
input {
|
|
width: 36px;
|
|
padding: $spacing-1;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
background: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
// Danger state for fatigue
|
|
&.danger {
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-color: var(--color-danger);
|
|
|
|
label,
|
|
.value {
|
|
color: var(--color-danger);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================
|
|
// STATUS BAR - Active Status Conditions
|
|
// ==========================================
|
|
.status-bar {
|
|
padding: $spacing-2 $spacing-4;
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
.status-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.status-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: var(--color-badge-status);
|
|
border: 1px solid var(--color-danger);
|
|
border-radius: $radius-full;
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: rgba(139, 0, 0, 0.25);
|
|
border-color: var(--color-danger);
|
|
|
|
.status-remove {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.status-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-name {
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-remove {
|
|
@include flex-center;
|
|
width: 18px;
|
|
height: 18px;
|
|
padding: 0;
|
|
margin-left: $spacing-1;
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: $radius-full;
|
|
color: var(--color-danger);
|
|
opacity: 0.6;
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-danger);
|
|
color: white;
|
|
opacity: 1;
|
|
}
|
|
|
|
i {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================
|
|
// CHARACTER SHEET SPECIFIC
|
|
// ==========================================
|
|
.vagabond.sheet.actor.character {
|
|
// ----------------------------------------
|
|
// Tab Content Area
|
|
// ----------------------------------------
|
|
.tab-content {
|
|
padding: $spacing-4;
|
|
background-color: var(--color-bg-primary);
|
|
overflow-y: auto;
|
|
@include custom-scrollbar;
|
|
|
|
// Enable container queries for responsive layout based on sheet width
|
|
container-type: inline-size;
|
|
container-name: sheet-content;
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Section Headers
|
|
// ----------------------------------------
|
|
.section-header {
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
margin: 0 0 $spacing-3 0;
|
|
padding-bottom: $spacing-2;
|
|
border-bottom: 2px solid var(--color-border);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.subsection-header {
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-secondary);
|
|
margin: $spacing-3 0 $spacing-2 0;
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Main Tab Layout
|
|
// ----------------------------------------
|
|
.main-tab {
|
|
.main-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: $spacing-4;
|
|
|
|
// Responsive: stack vertically on narrow container
|
|
@container sheet-content (max-width: #{$breakpoint-narrow}) {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto auto auto;
|
|
|
|
.stats-column {
|
|
order: 1;
|
|
}
|
|
.center-column {
|
|
order: 2;
|
|
}
|
|
.attacks-column {
|
|
order: 3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Stats Column (Left)
|
|
// ----------------------------------------
|
|
.stats-column {
|
|
min-width: 120px;
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.stat-block {
|
|
@include flex-column;
|
|
align-items: center;
|
|
padding: $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
|
|
.stat-label {
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: $spacing-1;
|
|
}
|
|
|
|
.stat-value {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-2xl;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-primary);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive: horizontal stats on narrow container
|
|
@container sheet-content (max-width: #{$breakpoint-narrow}) {
|
|
min-width: 0;
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: $spacing-1;
|
|
}
|
|
|
|
.stat-block {
|
|
padding: $spacing-1;
|
|
|
|
.stat-value {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: $font-size-xl;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Center Column (Saves & Skills)
|
|
// ----------------------------------------
|
|
.center-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-4;
|
|
}
|
|
|
|
// Saves Section
|
|
.saves-section {
|
|
.saves-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.save-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-2 $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-secondary);
|
|
border-color: var(--color-accent-primary);
|
|
|
|
.roll-icon {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.save-label {
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.save-stats {
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-secondary);
|
|
margin-right: auto;
|
|
}
|
|
|
|
.save-difficulty {
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
min-width: 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
.roll-icon {
|
|
color: var(--color-text-muted);
|
|
transition: color $transition-fast;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Skills Section
|
|
.skills-section {
|
|
.skills-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.skill-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-secondary);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
&.trained {
|
|
background-color: rgba(45, 90, 39, 0.1);
|
|
border-color: rgba(45, 90, 39, 0.3);
|
|
|
|
.skill-trained-toggle {
|
|
color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
}
|
|
}
|
|
|
|
.skill-trained-toggle {
|
|
@include flex-center;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
border-color: var(--color-accent-primary);
|
|
color: var(--color-accent-primary);
|
|
}
|
|
|
|
i {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
.skill-name {
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
flex: 1;
|
|
}
|
|
|
|
.skill-stat {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.skill-difficulty {
|
|
font-family: $font-family-header;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
min-width: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.skill-crit {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-warning);
|
|
|
|
i {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.skill-roll-btn {
|
|
@include flex-center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: color $transition-fast;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Attacks Column (Right)
|
|
// ----------------------------------------
|
|
.attacks-column {
|
|
min-width: 180px;
|
|
|
|
.attack-skills-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
// Responsive: horizontal attacks on narrow container
|
|
@container sheet-content (max-width: #{$breakpoint-narrow}) {
|
|
min-width: 0;
|
|
|
|
.attack-skills-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-2;
|
|
}
|
|
}
|
|
|
|
.attack-skill-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-secondary);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
&.trained {
|
|
background-color: rgba(45, 90, 39, 0.1);
|
|
border-color: rgba(45, 90, 39, 0.3);
|
|
|
|
.attack-trained-toggle {
|
|
color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
}
|
|
}
|
|
|
|
.attack-trained-toggle {
|
|
@include flex-center;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
border-color: var(--color-accent-primary);
|
|
color: var(--color-accent-primary);
|
|
}
|
|
|
|
i {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
.attack-name {
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
flex: 1;
|
|
}
|
|
|
|
.attack-stat {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.attack-difficulty {
|
|
font-family: $font-family-header;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
min-width: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.attack-crit {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-warning);
|
|
|
|
i {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.attack-roll-btn {
|
|
@include flex-center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: color $transition-fast;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Equipped Weapons List
|
|
.weapon-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.weapon-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-2;
|
|
border-bottom: 1px solid var(--color-border)-light;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.weapon-name {
|
|
flex: 1;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.weapon-damage {
|
|
font-family: $font-family-mono;
|
|
font-size: $font-size-sm;
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.weapon-roll {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-accent-highlight);
|
|
border-color: var(--color-accent-primary);
|
|
color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Inventory Tab Layout
|
|
// ----------------------------------------
|
|
.inventory-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-4;
|
|
}
|
|
|
|
// Inventory Header (Slots & Wealth) - Inline row
|
|
.inventory-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-4;
|
|
padding-bottom: $spacing-3;
|
|
margin-bottom: $spacing-2;
|
|
border-bottom: 2px solid var(--color-border);
|
|
flex-wrap: nowrap;
|
|
|
|
.header-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
|
|
label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.stat-value {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 2px;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
|
|
.current {
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.separator {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.max {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
|
|
input {
|
|
width: 60px;
|
|
padding: $spacing-1 $spacing-2;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
// Item slots takes remaining space to push currencies right
|
|
&.item-slots {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
margin-right: auto;
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.overburdened-warning {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
&.overburdened .current {
|
|
color: var(--color-danger);
|
|
}
|
|
}
|
|
|
|
// Currency-specific label colors
|
|
&.gold label {
|
|
color: #b8860b;
|
|
}
|
|
|
|
&.silver label {
|
|
color: #707070;
|
|
}
|
|
|
|
&.copper label {
|
|
color: #8b4513;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Inventory Sections (Weapons, Armor, Equipment)
|
|
.inventory-section {
|
|
.section-header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.section-header {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-create {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Item Lists
|
|
.item-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-2 $spacing-3;
|
|
border-bottom: 1px solid var(--color-border)-light;
|
|
transition: background-color $transition-fast;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
&.empty {
|
|
justify-content: center;
|
|
padding: $spacing-4;
|
|
font-style: italic;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
// Item thumbnail
|
|
.item-img {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-fit: cover;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-sm;
|
|
background-color: var(--color-bg-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// Item name (clickable to edit)
|
|
.item-name {
|
|
flex: 1;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: color $transition-fast;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// Item stats (damage, armor, quantity)
|
|
.item-damage,
|
|
.item-armor-value {
|
|
font-family: $font-family-mono;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-semibold;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.item-armor-value {
|
|
background-color: rgba(47, 79, 79, 0.1);
|
|
color: var(--color-info);
|
|
}
|
|
|
|
.item-quantity {
|
|
font-family: $font-family-mono;
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-secondary);
|
|
min-width: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-slots {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Item control buttons
|
|
.item-equipped,
|
|
.item-delete {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
flex-shrink: 0;
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
|
|
.item-equipped {
|
|
&:hover {
|
|
background-color: rgba(45, 90, 39, 0.1);
|
|
border-color: var(--color-success);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.item-delete {
|
|
&:hover {
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive inventory layout
|
|
@container sheet-content (max-width: 500px) {
|
|
.inventory-header {
|
|
flex-wrap: wrap;
|
|
|
|
.header-stat.item-slots {
|
|
flex-basis: 100%;
|
|
margin-bottom: $spacing-2;
|
|
}
|
|
}
|
|
|
|
.item-row {
|
|
flex-wrap: wrap;
|
|
|
|
.item-name {
|
|
flex-basis: calc(100% - 50px);
|
|
order: 1;
|
|
}
|
|
|
|
.item-img {
|
|
order: 0;
|
|
}
|
|
|
|
.item-damage,
|
|
.item-armor-value,
|
|
.item-quantity,
|
|
.item-slots {
|
|
order: 2;
|
|
}
|
|
|
|
.item-equipped,
|
|
.item-delete {
|
|
order: 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Abilities Tab Layout
|
|
// ----------------------------------------
|
|
.abilities-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-4;
|
|
}
|
|
|
|
.abilities-section {
|
|
.section-header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.section-header {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-create {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ancestry Block
|
|
.ancestry-block {
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
overflow: hidden;
|
|
|
|
.ancestry-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-3;
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: 1px solid var(--color-border)-light;
|
|
|
|
.ancestry-img {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: cover;
|
|
border: 2px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
.ancestry-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
|
|
.ancestry-name {
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.ancestry-being-type,
|
|
.ancestry-size {
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ancestry-being-type::after {
|
|
content: " · ";
|
|
}
|
|
}
|
|
}
|
|
|
|
.ancestry-traits {
|
|
padding: $spacing-3;
|
|
|
|
.trait {
|
|
padding: $spacing-2 0;
|
|
border-bottom: 1px solid var(--color-border)-light;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-relaxed;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
&:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
strong {
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ability Lists (Features & Perks)
|
|
.ability-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.ability-item {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: auto auto;
|
|
gap: $spacing-2;
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
transition: background-color $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
&.empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: $spacing-4;
|
|
font-style: italic;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.ability-img {
|
|
grid-row: span 2;
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
.ability-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
|
|
.ability-name {
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.ability-source,
|
|
.ability-prereqs {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ability-prereqs {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.ability-description {
|
|
grid-column: 2 / -1;
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-secondary);
|
|
line-height: $line-height-normal;
|
|
|
|
// Style inline HTML from descriptions
|
|
p {
|
|
margin: 0 0 $spacing-2 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-delete {
|
|
grid-row: 1;
|
|
grid-column: 3;
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Active Effects
|
|
.effects-group {
|
|
margin-bottom: $spacing-3;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.effect-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
}
|
|
|
|
.effect-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-2 $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
|
|
.effect-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
object-fit: cover;
|
|
border-radius: $radius-sm;
|
|
}
|
|
|
|
.effect-name {
|
|
flex: 1;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.effect-duration {
|
|
font-size: $font-size-xs;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: rgba(184, 134, 11, 0.15);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.effect-source {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-muted);
|
|
}
|
|
}
|
|
|
|
// Responsive abilities layout
|
|
@container sheet-content (max-width: 500px) {
|
|
.ability-item {
|
|
grid-template-columns: auto 1fr;
|
|
|
|
.ability-description {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.item-delete {
|
|
position: absolute;
|
|
top: $spacing-2;
|
|
right: $spacing-2;
|
|
}
|
|
}
|
|
|
|
.ancestry-block .ancestry-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
|
|
.ancestry-info {
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Magic Tab Layout
|
|
// ----------------------------------------
|
|
.magic-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-4;
|
|
}
|
|
|
|
// Magic Header (Mana & Focus)
|
|
.magic-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: $spacing-4;
|
|
padding-bottom: $spacing-3;
|
|
margin-bottom: $spacing-2;
|
|
border-bottom: 2px solid var(--color-border);
|
|
}
|
|
|
|
// Mana Display - matches inventory item-slots format
|
|
.mana-display {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
margin-right: auto;
|
|
|
|
> label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.mana-values {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 2px;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
|
|
input {
|
|
width: 40px;
|
|
padding: 2px 4px;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-sm;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.max {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
|
|
.casting-max {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
margin-left: $spacing-3;
|
|
padding-left: $spacing-3;
|
|
border-left: 1px solid var(--color-border)-light;
|
|
font-size: $font-size-sm;
|
|
|
|
.label {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.value {
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-info);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Focus Display
|
|
.focus-display {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
padding: $spacing-3;
|
|
background-color: rgba(184, 134, 11, 0.1);
|
|
border: 1px solid rgba(184, 134, 11, 0.3);
|
|
border-radius: $radius-md;
|
|
|
|
h3 {
|
|
margin: 0 0 $spacing-2 0;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-warning);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.focus-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
}
|
|
|
|
.focus-item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border-radius: $radius-sm;
|
|
|
|
.focus-spell {
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.focus-target {
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.focus-cost {
|
|
font-size: $font-size-xs;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: rgba(47, 79, 79, 0.1);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-info);
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Spells Section
|
|
.spells-section {
|
|
.section-header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.section-header {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-create {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Spell List
|
|
.spell-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.spell-item {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto auto;
|
|
gap: $spacing-3;
|
|
align-items: center;
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-primary);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
&.empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: $spacing-4;
|
|
font-style: italic;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.spell-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
.spell-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
|
|
.spell-name {
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.spell-type {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-secondary);
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
.spell-details {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
|
|
.spell-damage {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-radius: $radius-sm;
|
|
font-family: $font-family-mono;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-danger);
|
|
|
|
i {
|
|
font-size: $font-size-xs;
|
|
}
|
|
}
|
|
|
|
.spell-effect {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: rgba(47, 79, 79, 0.1);
|
|
border-radius: $radius-sm;
|
|
font-size: $font-size-sm;
|
|
color: var(--color-info);
|
|
cursor: help;
|
|
|
|
i {
|
|
font-size: $font-size-xs;
|
|
}
|
|
}
|
|
}
|
|
|
|
.spell-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
|
|
.spell-cast {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-2 $spacing-3;
|
|
background-color: var(--color-info);
|
|
border: none;
|
|
border-radius: $radius-md;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-semibold;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: #1f3838;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
|
|
.item-delete {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Casting Reference
|
|
.casting-reference {
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-md;
|
|
|
|
> h3 {
|
|
margin: 0 0 $spacing-3 0;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding-bottom: $spacing-2;
|
|
border-bottom: 1px solid var(--color-border)-light;
|
|
}
|
|
|
|
.reference-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-4;
|
|
}
|
|
|
|
.reference-section {
|
|
h4 {
|
|
margin: 0 0 $spacing-2 0;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
|
|
li {
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-secondary);
|
|
line-height: $line-height-normal;
|
|
|
|
strong {
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive magic layout
|
|
@container sheet-content (max-width: 500px) {
|
|
.magic-header {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.spell-item {
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto auto;
|
|
|
|
.spell-img {
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.spell-details {
|
|
grid-column: 2;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.spell-actions {
|
|
grid-column: 1 / -1;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.casting-reference .reference-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Biography Tab Layout
|
|
// ----------------------------------------
|
|
.biography-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-4;
|
|
}
|
|
|
|
.biography-section {
|
|
// Hide languages section - not yet implemented
|
|
&.languages {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Character Details (Size, Being Type)
|
|
.details-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-3;
|
|
|
|
.detail-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
|
|
label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
select {
|
|
@include input-base;
|
|
padding: $spacing-2;
|
|
font-size: $font-size-base;
|
|
cursor: pointer;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Senses Section
|
|
.senses-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: $spacing-3;
|
|
|
|
.sense-field {
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
padding: $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-primary);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
accent-color: var(--color-accent-primary);
|
|
|
|
&:checked + span,
|
|
&:checked ~ span {
|
|
color: var(--color-accent-primary);
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Style when checkbox is checked
|
|
&:has(input:checked) label {
|
|
background-color: rgba(45, 90, 39, 0.1);
|
|
border-color: rgba(45, 90, 39, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Movement Section (same pattern as Senses)
|
|
.movement-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: $spacing-3;
|
|
|
|
.movement-field {
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
padding: $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-primary);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
accent-color: var(--color-accent-primary);
|
|
|
|
&:checked + span,
|
|
&:checked ~ span {
|
|
color: var(--color-accent-primary);
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Style when checkbox is checked
|
|
&:has(input:checked) label {
|
|
background-color: rgba(45, 90, 39, 0.1);
|
|
border-color: rgba(45, 90, 39, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Biography & Notes Text Areas
|
|
.biography-text,
|
|
.notes {
|
|
.editor-container {
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
overflow: hidden;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
min-height: 150px;
|
|
padding: $spacing-3;
|
|
font-family: $font-family-body;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-relaxed;
|
|
color: var(--color-text-primary);
|
|
background-color: transparent;
|
|
border: none;
|
|
resize: vertical;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Biography gets more height
|
|
.biography-text textarea {
|
|
min-height: 200px;
|
|
}
|
|
|
|
// Responsive biography layout
|
|
@container sheet-content (max-width: 500px) {
|
|
.details-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.senses-grid,
|
|
.movement-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================
|
|
// NPC/MONSTER SHEET SPECIFIC
|
|
// ==========================================
|
|
.vagabond.sheet.actor.npc {
|
|
min-width: 450px;
|
|
min-height: 500px;
|
|
|
|
// Form is a flex column to allow scrollable body
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
// Header wrapper stays fixed at top
|
|
.header-wrapper {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// NPC Header
|
|
// ----------------------------------------
|
|
.npc-header {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: $spacing-3;
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: 2px solid var(--color-border);
|
|
|
|
.header-portrait {
|
|
.profile-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
object-fit: cover;
|
|
border: 2px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
cursor: pointer;
|
|
transition: border-color $transition-fast;
|
|
|
|
&:hover {
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
|
|
.actor-name {
|
|
margin: 0;
|
|
|
|
input {
|
|
width: 100%;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-xl;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid transparent;
|
|
padding: $spacing-1 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-bottom-color: var(--color-border);
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: $spacing-2;
|
|
|
|
.stat-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-sm;
|
|
min-width: 50px;
|
|
|
|
label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
input {
|
|
width: 40px;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
color: var(--color-text-primary);
|
|
background: transparent;
|
|
border: none;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background-color: white;
|
|
border-radius: $radius-sm;
|
|
}
|
|
}
|
|
|
|
&.morale {
|
|
flex-direction: row;
|
|
gap: $spacing-2;
|
|
padding: $spacing-1 $spacing-2;
|
|
|
|
label {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.morale-roll {
|
|
@include flex-center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--color-accent-primary);
|
|
border-color: var(--color-accent-primary);
|
|
color: white;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-xs;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-hp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
min-width: 120px;
|
|
|
|
.hp-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
|
|
> label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.bar-container {
|
|
position: relative;
|
|
height: 32px;
|
|
background-color: var(--color-bg-input);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
overflow: hidden;
|
|
|
|
.bar-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, var(--color-success), #1f3f1b);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.bar-values {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
z-index: 1;
|
|
|
|
input {
|
|
width: 36px;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
color: var(--color-text-primary);
|
|
background: transparent;
|
|
border: none;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background-color: rgba(white, 0.8);
|
|
border-radius: $radius-sm;
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
color: var(--color-text-secondary);
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// HP state colors
|
|
&.half .bar-fill {
|
|
background: linear-gradient(to bottom, var(--color-warning), #9a7009);
|
|
}
|
|
|
|
&.dead .bar-fill {
|
|
background: linear-gradient(to bottom, var(--color-danger), #6b0000);
|
|
}
|
|
}
|
|
|
|
.morale-broken {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-1 $spacing-2;
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border: 1px solid rgba(139, 0, 0, 0.3);
|
|
border-radius: $radius-sm;
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-danger);
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// NPC Body / Content
|
|
// ----------------------------------------
|
|
.sheet-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-3;
|
|
padding: $spacing-3;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
min-height: 0;
|
|
@include custom-scrollbar;
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// NPC Stats Section
|
|
// ----------------------------------------
|
|
.npc-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-3;
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: $spacing-3;
|
|
}
|
|
|
|
.stat-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-1;
|
|
|
|
> label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-text-secondary);
|
|
|
|
// Rollable labels (e.g., Appearing)
|
|
&.rollable {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
cursor: pointer;
|
|
transition: color $transition-fast;
|
|
|
|
&:hover {
|
|
color: var(--color-accent-primary);
|
|
|
|
i {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-muted);
|
|
transition: color $transition-fast;
|
|
}
|
|
}
|
|
}
|
|
|
|
select,
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
@include input-base;
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-sm;
|
|
}
|
|
|
|
.zone-hint {
|
|
margin: 0;
|
|
font-size: $font-size-xs;
|
|
font-style: italic;
|
|
color: var(--color-text-muted);
|
|
line-height: $line-height-tight;
|
|
}
|
|
}
|
|
|
|
.stat-group.speed {
|
|
.speed-value {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
|
|
input {
|
|
width: 50px;
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-semibold;
|
|
text-align: center;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background-color: white;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-muted);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Movement Section (uses same styling as biography movement-grid)
|
|
.biography-section.movement {
|
|
padding: $spacing-2 0;
|
|
border-top: 1px solid var(--color-border)-light;
|
|
|
|
.section-header {
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-secondary);
|
|
margin: 0 0 $spacing-2 0;
|
|
padding: 0;
|
|
border: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.movement-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.movement-field label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
padding: $spacing-2;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-bg-primary);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
accent-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.movement-field:has(input:checked) label {
|
|
background-color: rgba(45, 90, 39, 0.1);
|
|
border-color: rgba(45, 90, 39, 0.3);
|
|
}
|
|
}
|
|
|
|
.stat-group.type {
|
|
.type-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin-bottom: $spacing-2;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Senses Row
|
|
.senses-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding-top: $spacing-2;
|
|
border-top: 1px solid var(--color-border)-light;
|
|
|
|
> label {
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.sense-tag {
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-medium;
|
|
color: var(--color-info);
|
|
background-color: rgba(47, 79, 79, 0.1);
|
|
border: 1px solid rgba(47, 79, 79, 0.3);
|
|
border-radius: $radius-sm;
|
|
}
|
|
}
|
|
|
|
// Damage Modifiers
|
|
.damage-modifiers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
padding-top: $spacing-2;
|
|
border-top: 1px solid var(--color-border)-light;
|
|
|
|
.modifier-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
|
|
> label {
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-secondary);
|
|
min-width: 80px;
|
|
}
|
|
|
|
.modifier-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: $spacing-1;
|
|
}
|
|
|
|
.modifier-tag {
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-medium;
|
|
border-radius: $radius-sm;
|
|
text-transform: capitalize;
|
|
|
|
&.immune {
|
|
color: #1a2929;
|
|
background-color: rgba(47, 79, 79, 0.15);
|
|
border: 1px solid rgba(47, 79, 79, 0.3);
|
|
}
|
|
|
|
&.resist {
|
|
color: #163015;
|
|
background-color: rgba(45, 90, 39, 0.15);
|
|
border: 1px solid rgba(45, 90, 39, 0.3);
|
|
}
|
|
|
|
&.weak {
|
|
color: #6b0000;
|
|
background-color: rgba(139, 0, 0, 0.15);
|
|
border: 1px solid rgba(139, 0, 0, 0.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// NPC Actions Section
|
|
// ----------------------------------------
|
|
.npc-actions {
|
|
.section-header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.section-header {
|
|
margin: 0;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.action-add {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.action-item {
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
|
|
&.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-4;
|
|
|
|
p {
|
|
margin: 0;
|
|
font-style: italic;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-2 $spacing-3;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.action-name {
|
|
flex: 1;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid transparent;
|
|
padding: $spacing-1 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-bottom-color: var(--color-border);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.action-controls {
|
|
display: flex;
|
|
gap: $spacing-1;
|
|
|
|
button {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&.action-roll:hover {
|
|
background-color: var(--color-accent-primary);
|
|
border-color: var(--color-accent-primary);
|
|
color: white;
|
|
}
|
|
|
|
&.action-delete:hover {
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
gap: $spacing-2;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.action-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
|
|
label {
|
|
font-size: $font-size-xs;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
input,
|
|
select {
|
|
@include input-base;
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-description {
|
|
textarea {
|
|
width: 100%;
|
|
min-height: 60px;
|
|
padding: $spacing-2;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-relaxed;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
resize: vertical;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// NPC Abilities Section
|
|
// ----------------------------------------
|
|
.npc-abilities {
|
|
.section-header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.section-header {
|
|
margin: 0;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.ability-add {
|
|
@include flex-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ability-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
}
|
|
|
|
.ability-item {
|
|
padding: $spacing-3;
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
|
|
&.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
padding: $spacing-4;
|
|
|
|
p {
|
|
margin: 0;
|
|
font-style: italic;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
padding: $spacing-2 $spacing-3;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
font-size: $font-size-sm;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ability-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
margin-bottom: $spacing-2;
|
|
|
|
.ability-name {
|
|
flex: 1;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-semibold;
|
|
color: var(--color-text-primary);
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid transparent;
|
|
padding: $spacing-1 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-bottom-color: var(--color-border);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.ability-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-2;
|
|
|
|
.ability-passive {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-1;
|
|
font-size: $font-size-xs;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
|
|
input[type="checkbox"] {
|
|
width: 14px;
|
|
height: 14px;
|
|
cursor: pointer;
|
|
accent-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.ability-delete {
|
|
@include flex-center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
|
|
&:hover {
|
|
background-color: rgba(139, 0, 0, 0.1);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-xs;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ability-description {
|
|
textarea {
|
|
width: 100%;
|
|
min-height: 60px;
|
|
padding: $spacing-2;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-relaxed;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border)-light;
|
|
border-radius: $radius-sm;
|
|
resize: vertical;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// NPC Notes Section
|
|
// ----------------------------------------
|
|
.npc-notes {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-3;
|
|
|
|
.notes-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-2;
|
|
|
|
.section-header {
|
|
margin: 0;
|
|
font-family: $font-family-header;
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-bold;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.editor-container {
|
|
flex: 1;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
min-height: 100px;
|
|
height: 100%;
|
|
padding: $spacing-2;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-relaxed;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-md;
|
|
resize: vertical;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent-primary);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Responsive NPC Layout
|
|
// ----------------------------------------
|
|
@media (max-width: 550px) {
|
|
.npc-header {
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto auto;
|
|
|
|
.header-portrait {
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.header-hp {
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
.npc-notes {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.npc-actions .action-item .action-details {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
}
|