fddd97d926
- PlayerCard: read-only portrait, name, class, level, XP (the sidebar holds the editors for this data) - PreparedSpells: growable slot list; a vacant slot has a free-text input and '+' to fill it, an occupied slot shows name/level/ description and '×' to empty it; '+ слот' appends a vacant slot - Attunements: three slots, free-text entry and per-slot clear - rows are plain functions called from For's let(...) children — component tags are not allowed directly inside them (view macro) - Field<...> conversions for the Subfield prop types, state-in-key keys so changed rows re-render (same convention as sidebar pips) - SCSS: _character.scss with card, slot rows, buttons (mixins)
113 lines
2.0 KiB
SCSS
113 lines
2.0 KiB
SCSS
@use 'mixins';
|
|
|
|
.character-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 10px 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.player-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
|
|
img {
|
|
width: 92px;
|
|
height: 92px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 0 2px crimson;
|
|
}
|
|
|
|
.player-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.player-name {
|
|
font-size: 1.5em;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.player-class, .player-level, .player-xp {
|
|
font-weight: 300;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.prepared-spells, .attunements {
|
|
h6 {
|
|
text-transform: lowercase;
|
|
font-size: 1.1em;
|
|
margin: 0 0 10px;
|
|
font-weight: 900;
|
|
&::first-letter {
|
|
text-decoration: underline crimson;
|
|
}
|
|
}
|
|
|
|
.prepared-slot, .attunement-slot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 4px 0;
|
|
|
|
input {
|
|
flex: 1;
|
|
max-width: 340px;
|
|
border: none;
|
|
color: white;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
padding: 3px 8px;
|
|
|
|
&:focus {
|
|
outline: 1px solid crimson;
|
|
}
|
|
}
|
|
|
|
button {
|
|
@include mixins.button;
|
|
width: 34px;
|
|
height: 30px;
|
|
border: 0;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.prepared-slot {
|
|
&.occupied {
|
|
.spell-name {
|
|
font-weight: 900;
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
.spell-level, .spell-desc {
|
|
font-weight: 300;
|
|
opacity: 0.75;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.spell-level {
|
|
min-width: 44px;
|
|
}
|
|
}
|
|
|
|
.attuned-item {
|
|
font-weight: 900;
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
.prepared-spells {
|
|
.add-slot {
|
|
@include mixins.button;
|
|
margin-top: 10px;
|
|
border: 0;
|
|
padding: 3px 14px;
|
|
}
|
|
}
|