diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index a77f8425d..6714b2426 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -164,7 +164,7 @@ body { a { &:focus { border-radius: 4px; - outline: $ui-button-icon-focus-outline; + outline: $ui-button-focus-outline; } &:focus:not(:focus-visible) { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 7fe7a0041..76928ba1f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3283,6 +3283,8 @@ $ui-header-height: 55px; text-decoration: none; overflow: hidden; white-space: nowrap; + border: 0; + border-left: 4px solid transparent; &:hover, &:focus, @@ -3294,6 +3296,11 @@ $ui-header-height: 55px; outline: 0; } + &:focus-visible { + border-color: $ui-button-focus-outline-color; + border-radius: 0; + } + &--transparent { background: transparent; color: $ui-secondary-color; @@ -3958,7 +3965,7 @@ a.status-card { } &:focus-visible { - outline: $ui-button-icon-focus-outline; + outline: $ui-button-focus-outline; } &.active { diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 073bb16e5..611c8bb5d 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -43,6 +43,8 @@ $ui-highlight-color: $classic-highlight-color !default; $ui-button-color: $white !default; $ui-button-background-color: $blurple-500 !default; $ui-button-focus-background-color: $blurple-600 !default; +$ui-button-focus-outline-color: $blurple-400 !default; +$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default; $ui-button-secondary-color: $grey-100 !default; $ui-button-secondary-border-color: $grey-100 !default; @@ -57,7 +59,7 @@ $ui-button-tertiary-focus-color: $white !default; $ui-button-destructive-background-color: $red-500 !default; $ui-button-destructive-focus-background-color: $red-600 !default; -$ui-button-icon-focus-outline: solid 2px $blurple-400 !default; +$ui-button-icon-focus-outline: $ui-button-focus-outline !default; $ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default; // Variables for texts