zelo72
/
mastodon
mirror of https://github.com/mastodon/mastodon
2
2
Fork 1
Code Issues 10 Releases Wiki Activity

change column link to add a better keyboard focus indicator (#26278)

This commit is contained in:
Trevor Wolf 2023-08-03 03:33:41 +10:00 committed by GitHub
parent e258b4cb64
commit 6308dca76a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/styles/mastodon/basics.scss
View File

@ -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) {

9
app/javascript/styles/mastodon/components.scss
View File

@ -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 {

4
app/javascript/styles/mastodon/variables.scss
View File

@ -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