diff --git a/src/components/button.css b/src/components/button.css index cb7fe70..5d1e693 100644 --- a/src/components/button.css +++ b/src/components/button.css @@ -25,6 +25,9 @@ a.button { &:focus { outline: none; + & .button__contents { + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9); + } } &:hover { @@ -36,7 +39,6 @@ a.button { } } - &:focus, &:active { & .button__contents { background-color: var(--button-background-focus-color); @@ -48,9 +50,6 @@ a.button { } } - &:active { - } - & .button__contents { box-sizing: border-box; display: flex; diff --git a/src/components/icon-button.css b/src/components/icon-button.css index 3b2ff88..17e4c40 100644 --- a/src/components/icon-button.css +++ b/src/components/icon-button.css @@ -11,8 +11,7 @@ &:focus { outline: none; & .icon-button__contents { - background-color: var(--ui-basic-font-color); - color: white; + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9); } } diff --git a/src/components/preprint-card.css b/src/components/preprint-card.css index d5e802d..ae41f22 100644 --- a/src/components/preprint-card.css +++ b/src/components/preprint-card.css @@ -58,6 +58,7 @@ transition: all 0.1s; overflow: hidden; } + &:focus, &:hover { & .preprint-card__cta-button__contents { background-color: var(--prereview-red); @@ -81,8 +82,7 @@ height: 100%; } } - &:active, - &:focus { + &:active { & .preprint-card__cta-button__contents { background-color: var(--prereview-black); & .preprint-card__count-label { @@ -90,6 +90,12 @@ } } } + &:focus { + & .preprint-card__cta-button__contents { + background-color: var(--prereview-red); + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9); + } + } } & .preprint-card__score-panel { box-sizing: border-box; diff --git a/src/components/welcome-modal.css b/src/components/welcome-modal.css index 51514f3..5359ad2 100644 --- a/src/components/welcome-modal.css +++ b/src/components/welcome-modal.css @@ -77,11 +77,17 @@ white-space: pre; margin-left: var(--lgrd); + &:any-link { text-decoration: none; color: var(--button-foreground-color--primary); } - &:focus, + + &:focus { + outline: none; + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9); + } + &:active { outline: none; background-color: var(--button-background-focus-color--primary);