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;
height: 24px;
min-height: unset;
&:focus {
outline: 1px solid var(--attribute-input-focus-colour);
}
}
}
@ -212,10 +216,6 @@
font-size: 1.1rem;
}
input {
width: 50px;
}
input, button {
border: none;
background: var(--attribute-input-background);
@ -224,15 +224,27 @@
height: 24px;
min-height: unset;
&:focus-visible {
outline: 1px solid var(--attribute-input-focus-colour);
}
&:disabled {
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) {
grid-column: 1 / -1;
border-radius: 0 0 6px 6px;

7
styles/Apps/common.css
View file

@ -24,11 +24,18 @@
background: transparent;
border-radius: 0;
border: 2px solid transparent;
transition: unset;
&:hover {
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 {
color: var(--tab-button-active-colour);
border-bottom: 2px solid currentColor;