Actor sheet, step 1

This commit is contained in:
2025-05-23 00:26:00 +02:00
parent 06ef26f03c
commit ef9c011186
33 changed files with 1052 additions and 1106 deletions

View File

@@ -57,17 +57,6 @@
flex: none;
}
}
/*.character-dmax-edit {
input {
display: flex;
width: 60px;
font-size: calc(var(--font-size-standard) * 1.4);
align-items: center;
justify-content: center;
padding: 0 5px 0 5px;
text-align: center;
}
}*/
}
.character-right {
@@ -75,17 +64,19 @@
flex-direction: column;
gap: 5px;
.character-spec {
label {
max-width: 6rem;
.character-definition {
.form-group {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.hero-armor {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
input {
max-width: 3rem;
}
label {
max-width: 4rem;
}
input {
min-width: 16rem;
max-width: 16rem;
margin-bottom: auto;
}
}
.character-name {
@@ -110,17 +101,17 @@
min-width: 500px;
}
.character-skills {
.character-stats {
background-color: var(--color-light-1);
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
.character-skill {
.character-stat {
display: flex;
align-items: center;
.icon-skill {
.icon-stat {
width: 24px;
height: 24px;
margin-right: 4px;
@@ -131,98 +122,26 @@
cursor: pointer;
}
.rollable {
min-width: 4.5rem;
max-width: 4.5rem;
min-width: 3.5rem;
max-width: 3.5rem;
}
.char-text {
margin-left: 0.5rem;
}
.d100 {
flex: 0;
max-width: 0.6rem;
}
.form-group {
flex: 0;
padding-left: 5px;
.form-fields {
font-size: 1.1rem;
flex: none;
width: 40px;
}
input {
min-width: 2.5rem;
max-width: 2.5rem;
}
}
}
.character-skill-play {
min-width: 225px;
.character-stats-play {
min-width:120px;
}
.character-skill-edit {
min-width: 225px;
.character-stats-edit {
min-width: 120px;
}
}
.character-biography {
background-color: var(--color-light-1);
prose-mirror.inactive {
min-height: 40px;
}
prose-mirror.active {
min-height: 150px;
}
.field-label {
margin-left: 8px;
}
.rank {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
label {
min-width: 6rem;
}
input {
max-width: 4rem;
}
}
.biodata {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
label {
min-width: 12rem;
}
}
.resources {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
label {
min-width: 8rem;
}
}
.features,
.biodata {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
label {
min-width: 3rem;
}
.feature {
display: flex;
align-items: center;
gap: 4px;
min-width: 18rem;
max-width: 18rem;
}
}
}
.tab.character-skills {
.tab.character-status .main-div {
background-color: var(--color-light-1);
display: grid;
grid-template-columns: 1fr;
@@ -232,11 +151,44 @@
padding-left: 5px;
}
}
.skills {
.counters {
display: flex;
direction: column;
align-items: center;
gap: 4px;
margin-left: 4px;
input {
min-width: 2.5rem;
max-width: 2.5rem;
}
}
.ailments {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
.ailment {
display: flex;
align-items: center;
gap: 4px;
margin-left: 4px;
min-width: 8rem;
max-width: 8rem;
label {
min-width: 5rem;
max-width: 5rem;
}
.item-img {
width: 24px;
height: 24px;
margin: 4px 0 0 0;
}
}
}
.perks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
.skill {
.perk {
display: flex;
align-items: center;
gap: 4px;
@@ -270,7 +222,7 @@
}
}
.tab.character-status {
.tab.character-maleficas .main-div {
background-color: var(--color-light-1);
display: grid;
grid-template-columns: 1fr;
@@ -281,11 +233,11 @@
}
}
.bonds {
.maleficas {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.bond {
.malefica {
display: flex;
align-items: center;
gap: 4px;
@@ -316,11 +268,11 @@
}
}
.motivations {
.rituals {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.motivation {
.ritual {
display: flex;
align-items: center;
gap: 4px;
@@ -343,66 +295,10 @@
}
}
.mentaldisorders {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.mentaldisorder {
display: flex;
align-items: center;
gap: 4px;
min-width: 18rem;
max-width: 18rem;
.controls {
font-size: 0.7rem;
min-width: 1.8rem;
max-width: 1.8rem;
}
.name {
min-width: 14rem;
max-width: 14rem;
}
.cured {
min-width: 5rem;
max-width: 5rem;
}
.item-img {
width: 24px;
height: 24px;
margin: 4px 0 0 0;
}
}
}
.injuries {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.injury {
display: flex;
align-items: center;
gap: 4px;
min-width: 16rem;
max-width: 16rem;
.controls {
font-size: 0.7rem;
min-width: 1.8rem;
max-width: 1.8rem;
}
.name {
min-width: 14rem;
max-width: 14rem;
}
.item-img {
width: 24px;
height: 24px;
margin: 4px 0 0 0;
}
}
}
}
.tab.character-talents {
.tab.character-equipment .main-div {
background-color: var(--color-light-1);
display: grid;
grid-template-columns: 1fr;
@@ -413,176 +309,6 @@
}
}
.talents {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.talent {
display: flex;
align-items: center;
gap: 4px;
min-width: 13rem;
max-width: 13rem;
.rollable:hover,
.rollable:focus {
text-shadow: 0 0 8px var(--color-shadow-primary);
cursor: pointer;
}
.controls {
font-size: 0.7rem;
min-width: 1.8rem;
max-width: 1.8rem;
}
.damage {
min-width: 6rem;
max-width: 6rem;
}
.name {
min-width: 10rem;
max-width: 10rem;
}
.item-img {
width: 24px;
height: 24px;
margin: 4px 0 0 0;
}
}
}
.languages {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.language {
display: flex;
align-items: center;
gap: 4px;
min-width: 13rem;
max-width: 13rem;
.rollable:hover,
.rollable:focus {
text-shadow: 0 0 8px var(--color-shadow-primary);
cursor: pointer;
}
.controls {
font-size: 0.7rem;
min-width: 1.8rem;
max-width: 1.8rem;
}
.damage {
min-width: 6rem;
max-width: 6rem;
}
.name {
min-width: 10rem;
max-width: 10rem;
}
.item-img {
width: 24px;
height: 24px;
margin: 4px 0 0 0;
}
}
}
.psionics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.psionic {
display: flex;
align-items: center;
gap: 4px;
min-width: 13rem;
max-width: 13rem;
.rollable:hover,
.rollable:focus {
text-shadow: 0 0 8px var(--color-shadow-primary);
cursor: pointer;
}
.controls {
font-size: 0.7rem;
min-width: 1.8rem;
max-width: 1.8rem;
}
.damage {
min-width: 6rem;
max-width: 6rem;
}
.name {
min-width: 10rem;
max-width: 10rem;
}
.item-img {
width: 24px;
height: 24px;
margin: 4px 0 0 0;
}
}
}
}
.tab.character-equipment {
background-color: var(--color-light-1);
display: grid;
grid-template-columns: 1fr;
legend {
a {
font-size: calc(var(--font-size-standard) * 1.4);
padding-left: 5px;
}
}
.encumbrance {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
input {
max-width: 4rem;
}
.encumbered {
color: red;
font-weight: bold;
}
}
.implants {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
.implant {
display: flex;
align-items: center;
gap: 4px;
min-width: 13rem;
max-width: 13rem;
.rollable:hover,
.rollable:focus {
text-shadow: 0 0 8px var(--color-shadow-primary);
cursor: pointer;
}
.controls {
font-size: 0.7rem;
min-width: 1.8rem;
max-width: 1.8rem;
}
.damage {
min-width: 6rem;
max-width: 6rem;
}
.name {
min-width: 10rem;
max-width: 10rem;
}
.item-img {
width: 24px;
height: 24px;
margin: 4px 0 0 0;
}
}
}
.weapons {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -618,7 +344,7 @@
}
}
}
.armors {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -689,3 +415,22 @@
min-height: 150px;
}
}
.tab.character-biography .main-div {
background-color: var(--color-light-1);
display: grid;
grid-template-columns: 1fr;
legend {
a {
font-size: calc(var(--font-size-standard) * 1.4);
padding-left: 5px;
}
}
prose-mirror.inactive {
min-height: 40px;
}
prose-mirror.active {
min-height: 150px;
}
}