Update the styling of the actor sheet

This commit is contained in:
Oliver 2026-04-29 00:15:52 -06:00
parent 1cb9adfe33
commit f64dbcd42f
7 changed files with 137 additions and 25 deletions

View file

@ -1,7 +1,6 @@
.taf.PlayerSheet {
.sheet-header, fieldset, .content {
border-radius: 8px;
border: 1px solid rebeccapurple;
> .window-content {
background: var(--actor-sheet-background);
}
.sheet-header {
@ -9,19 +8,36 @@
flex-direction: row;
align-items: center;
gap: 0.5rem;
padding: 4px;
padding: 0.5rem;
margin: -0.5rem -0.5rem 0;
color: var(--actor-sheet-header-colour);
background: var(--actor-sheet-header-background);
border-bottom: 1px solid var(--actor-sheet-divider-colour);
img {
border-radius: 4px;
}
input {
color: var(--actor-sheet-header-input-colour);
background: var(--actor-sheet-header-input-background);
}
}
.attributes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
gap: 0.5rem;
justify-content: space-evenly;
gap: 0.25rem;
fieldset {
color: var(--attribute-colour);
background: var(--attribute-background);
border-radius: 6px;
border: none;
padding: 6px;
}
}
.attr-range {
@ -33,7 +49,11 @@
margin: 0 auto;
> input {
color: var(--attribute-colour);
background: var(--attribute-input-background);
text-align: center;
height: 24px;
min-height: unset;
}
}
@ -197,12 +217,19 @@
}
input, button {
background: var(--item-card-header-input-background);
color: var(--item-card-header-input-colour);
border: none;
background: var(--attribute-input-background);
color: var(--attribute-input-colour);
text-align: center;
height: 24px;
min-height: unset;
&:focus-visible {
outline: 1px solid var(--attribute-input-focus-colour);
}
&:disabled {
color: var(--item-card-header-disabled-input-colour);
color: var(--attribute-disabled-input-colour);
}
}
@ -219,6 +246,7 @@
}
.content {
border-radius: 6px;
flex-grow: 1;
overflow: hidden;
--table-row-color-odd: var(--table-header-bg-color);