Foundry/taf
1
0
Fork 0
Code Issues 13 Pull requests Releases 9 Wiki Activity Actions

Improve the hover/focus states for the PlayerSheet and tabs

Browse source
This commit is contained in:
Oliver 2026-04-29 19:48:47 -06:00
parent f64dbcd42f
commit 6e6402445c
3 changed files with 29 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

28
styles/Apps/PlayerSheet.css
View file

@ -54,6 +54,10 @@
text-align: center; text-align: center;
height: 24px; height: 24px;
min-height: unset; min-height: unset;
&:focus {
outline: 1px solid var(--attribute-input-focus-colour);
}
} }
} }
@ -212,10 +216,6 @@
font-size: 1.1rem; font-size: 1.1rem;
} }
input {
width: 50px;
}
input, button { input, button {
border: none; border: none;
background: var(--attribute-input-background); background: var(--attribute-input-background);
@ -224,15 +224,27 @@
height: 24px; height: 24px;
min-height: unset; min-height: unset;
&:focus-visible {
outline: 1px solid var(--attribute-input-focus-colour);
}
&:disabled { &:disabled {
color: var(--attribute-disabled-input-colour); color: var(--attribute-disabled-input-colour);
} }
} }
input {
width: 50px;
&:focus {
outline: 1px solid var(--attribute-input-focus-colour);
}
}
button {
&:active {
background: var(--attribute-button-active-background);
}
&:focus-visible {
outline: 1px solid var(--attribute-input-focus-colour);
}
}
&:last-child:nth-child(odd) { &:last-child:nth-child(odd) {
grid-column: 1 / -1; grid-column: 1 / -1;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;

7
styles/Apps/common.css
View file

@ -24,11 +24,18 @@
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
border: 2px solid transparent; border: 2px solid transparent;
transition: unset;
&:hover { &:hover {
color: var(--tab-button-hover-colour); color: var(--tab-button-hover-colour);
} }
&:focus-visible {
color: var(--tab-button-focus-colour);
border-color: var(--tab-button-focus-colour);
border-radius: 4px;
}
&.active { &.active {
color: var(--tab-button-active-colour); color: var(--tab-button-active-colour);
border-bottom: 2px solid currentColor; border-bottom: 2px solid currentColor;

2
styles/themes/dark.css
View file

@ -17,6 +17,7 @@
--tab-nav-divider-colour: var(--steel-750); --tab-nav-divider-colour: var(--steel-750);
--tab-button-colour: var(--steel-200); --tab-button-colour: var(--steel-200);
--tab-button-focus-colour: var(--steel-200);
--tab-button-hover-colour: var(--steel-100); --tab-button-hover-colour: var(--steel-100);
--tab-button-active-colour: white; --tab-button-active-colour: white;
@ -45,6 +46,7 @@
--attribute-input-background: var(--steel-600); --attribute-input-background: var(--steel-600);
--attribute-input-colour: var(--steel-100); --attribute-input-colour: var(--steel-100);
--attribute-input-focus-colour: var(--zinc-250); --attribute-input-focus-colour: var(--zinc-250);
--attribute-button-active-background: var(--steel-650);
--attribute-disabled-input-colour: var(--steel-350); --attribute-disabled-input-colour: var(--steel-350);
--item-card-background: #1d262f; --item-card-background: #1d262f;