diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx index 0416df5d4..fd66310e8 100644 --- a/app/javascript/mastodon/components/dropdown_menu.jsx +++ b/app/javascript/mastodon/components/dropdown_menu.jsx @@ -297,7 +297,7 @@ export default class Dropdown extends PureComponent { onKeyPress: this.handleKeyPress, }) : ( - - {this.props.account.get('acct')} + + {username}
- - @{this.props.account.get('acct')} - + + + @{username} + + - + + +
-
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index ff00c797c..234c703f2 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -161,13 +161,20 @@ body { } } +a { + &:focus { + border-radius: 4px; + outline: $ui-button-icon-focus-outline; + } + + &:focus:not(:focus-visible) { + outline: none; + } +} + button { font-family: inherit; cursor: pointer; - - &:focus { - outline: none; - } } .app-holder { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index beff07daa..d08cb2803 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -74,6 +74,10 @@ background-color: $ui-button-focus-background-color; } + &:focus { + outline: $ui-button-icon-focus-outline; + } + &--destructive { &:active, &:focus, @@ -98,16 +102,6 @@ transition: none; } - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - &.button-secondary { color: $ui-button-secondary-color; background: transparent; @@ -197,7 +191,7 @@ border-radius: 4px; background: transparent; cursor: pointer; - transition: all 100ms ease-in; + transition: all 100ms ease-out; transition-property: background-color, color; text-decoration: none; @@ -209,14 +203,12 @@ &:hover, &:active, &:focus { - color: lighten($action-button-color, 7%); - background-color: rgba($action-button-color, 0.15); - transition: all 200ms ease-out; - transition-property: background-color, color; + color: lighten($action-button-color, 20%); + background-color: $ui-button-icon-hover-background-color; } &:focus { - background-color: rgba($action-button-color, 0.3); + outline: $ui-button-icon-focus-outline; } &.disabled { @@ -225,20 +217,6 @@ cursor: default; } - &.active { - color: $highlight-text-color; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - &.inverted { color: $lighter-text-color; @@ -246,11 +224,11 @@ &:active, &:focus { color: darken($lighter-text-color, 7%); - background-color: rgba($lighter-text-color, 0.15); + background-color: $ui-button-icon-hover-background-color; } &:focus { - background-color: rgba($lighter-text-color, 0.3); + outline: $ui-button-icon-focus-outline; } &.disabled { @@ -305,7 +283,6 @@ font-size: 11px; padding: 0 3px; line-height: 27px; - outline: 0; transition: all 100ms ease-in; transition-property: background-color, color; @@ -313,13 +290,13 @@ &:active, &:focus { color: darken($lighter-text-color, 7%); - background-color: rgba($lighter-text-color, 0.15); + background-color: $ui-button-icon-hover-background-color; transition: all 200ms ease-out; transition-property: background-color, color; } &:focus { - background-color: rgba($lighter-text-color, 0.3); + outline: $ui-button-icon-focus-outline; } &.disabled { @@ -331,16 +308,6 @@ &.active { color: $highlight-text-color; } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } } body > [data-popper-placement] { @@ -728,7 +695,6 @@ body > [data-popper-placement] { flex: 0 0 auto; .compose-form__publish-button-wrapper { - overflow: hidden; padding-top: 15px; } } @@ -1929,13 +1895,6 @@ a.account__display-name { .navigation-bar__actions { position: relative; - .icon-button.close { - position: absolute; - pointer-events: none; - transform: scale(0, 1) translate(-100%, 0); - opacity: 0; - } - .compose__action-bar .icon-button { pointer-events: auto; transform: scale(1, 1) translate(0, 0); @@ -1945,19 +1904,21 @@ a.account__display-name { } .navigation-bar__profile { + display: flex; + flex-direction: column; flex: 1 1 auto; line-height: 20px; - overflow: hidden; } .navigation-bar__profile-account { - display: block; + display: inline; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .navigation-bar__profile-edit { + display: inline; color: inherit; text-decoration: none; } @@ -4740,11 +4701,6 @@ a.status-card.compact:hover { outline: 0; cursor: pointer; - &:active, - &:focus { - outline: 0 !important; - } - img { filter: grayscale(100%); opacity: 0.8; @@ -4760,6 +4716,13 @@ a.status-card.compact:hover { img { opacity: 1; filter: none; + border-radius: 100%; + } + } + + &:focus { + img { + outline: $ui-button-icon-focus-outline; } } } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 68db9d5fc..e89dd5d3a 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -5,6 +5,7 @@ $red-600: #b7253d !default; // Deep Carmine $red-500: #df405a !default; // Cerise $blurple-600: #563acc; // Iris $blurple-500: #6364ff; // Brand purple +$blurple-400: #7477fd; // Medium slate blue $blurple-300: #858afa; // Faded Blue $grey-600: #4e4c5a; // Trout $grey-100: #dadaf3; // Topaz @@ -56,6 +57,9 @@ $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-hover-background-color: rgba(140, 141, 255, 40%) !default; + // Variables for texts $primary-text-color: $white !default; $darker-text-color: $ui-primary-color !default;