diff --git a/styles/Apps/PlayerSheet.css b/styles/Apps/PlayerSheet.css index 3e7f281..3442d76 100644 --- a/styles/Apps/PlayerSheet.css +++ b/styles/Apps/PlayerSheet.css @@ -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; diff --git a/styles/Apps/common.css b/styles/Apps/common.css index 7e7b5ac..49f4197 100644 --- a/styles/Apps/common.css +++ b/styles/Apps/common.css @@ -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; diff --git a/styles/themes/dark.css b/styles/themes/dark.css index 96990a8..97cf099 100644 --- a/styles/themes/dark.css +++ b/styles/themes/dark.css @@ -17,6 +17,7 @@ --tab-nav-divider-colour: var(--steel-750); --tab-button-colour: var(--steel-200); + --tab-button-focus-colour: var(--steel-200); --tab-button-hover-colour: var(--steel-100); --tab-button-active-colour: white; @@ -45,6 +46,7 @@ --attribute-input-background: var(--steel-600); --attribute-input-colour: var(--steel-100); --attribute-input-focus-colour: var(--zinc-250); + --attribute-button-active-background: var(--steel-650); --attribute-disabled-input-colour: var(--steel-350); --item-card-background: #1d262f;