diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 054110e410..d8752278fb 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -285,23 +285,28 @@ } } + +@mixin focusable { + outline: 0; + background: lighten($ui-base-color, 4%); + + &.status.status-direct { + background: lighten($ui-base-color, 12%); + + &.muted { + background: transparent; + } + } + + .detailed-status, + .detailed-status__action-bar { + background: lighten($ui-base-color, 8%); + } +} .focusable { - &:focus { - outline: 0; - background: lighten($ui-base-color, 4%); - - &.status.status-direct { - background: lighten($ui-base-color, 12%); - - &.muted { - background: transparent; - } - } - - .detailed-status, - .detailed-status__action-bar { - background: lighten($ui-base-color, 8%); - } + &:focus, + &:hover { + @include focusable; } }