monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] change focus ui for keyboard only input 

Port 59478a1b46 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Trevor Wolf 2023-07-21 21:20:14 +10:00 committed by Claire
parent a7bad8f45c
commit c1e28c8913
6 changed files with 37 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/flavours/glitch/styles/basics.scss
View File

@ -161,13 +161,20 @@ body {
} }
} }
a {
&:focus {
border-radius: 4px;
outline: $ui-button-icon-focus-outline;
}
&:focus:not(:focus-visible) {
outline: none;
}
}
button { button {
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
&:focus {
outline: none;
}
} }
.app-holder { .app-holder {

1
app/javascript/flavours/glitch/styles/components/compose_form.scss
View File

@ -581,7 +581,6 @@
column-gap: 5px; column-gap: 5px;
.compose-form__publish-button-wrapper { .compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 10px; padding-top: 10px;
button { button {

3
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@ -129,9 +129,10 @@
} }
.navigation-bar__profile { .navigation-bar__profile {
display: flex;
flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
margin-inline-start: 8px; margin-inline-start: 8px;
overflow: hidden;
} }
.drawer--results { .drawer--results {

12
app/javascript/flavours/glitch/styles/components/emoji.scss
View File

@ -79,11 +79,6 @@
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
&:active,
&:focus {
outline: 0 !important;
}
img { img {
filter: grayscale(100%); filter: grayscale(100%);
opacity: 0.8; opacity: 0.8;
@ -99,6 +94,13 @@
img { img {
opacity: 1; opacity: 1;
filter: none; filter: none;
border-radius: 100%;
}
}
&:focus {
img {
outline: $ui-button-icon-focus-outline;
} }
} }
} }

45
app/javascript/flavours/glitch/styles/components/misc.scss
View File

@ -77,6 +77,10 @@
background-color: $ui-button-focus-background-color; background-color: $ui-button-focus-background-color;
} }
&:focus {
outline: $ui-button-icon-focus-outline;
}
&--destructive { &--destructive {
&:active, &:active,
&:focus, &:focus,
@ -198,14 +202,12 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($action-button-color, 7%); color: lighten($action-button-color, 20%);
background-color: rgba($action-button-color, 0.15); background-color: $ui-button-icon-hover-background-color;
transition: all 200ms ease-out;
transition-property: background-color, color;
} }
&:focus { &:focus-visible {
background-color: rgba($action-button-color, 0.3); outline: $ui-button-icon-focus-outline;
} }
&.disabled { &.disabled {
@ -227,16 +229,6 @@
transition: none; transition: none;
} }
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.inverted { &.inverted {
color: $lighter-text-color; color: $lighter-text-color;
@ -244,11 +236,11 @@
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15); background-color: $ui-button-icon-hover-background-color;
} }
&:focus { &:focus-visible {
background-color: rgba($lighter-text-color, 0.3); outline: $ui-button-icon-focus-outline;
} }
&.disabled { &.disabled {
@ -301,7 +293,6 @@
cursor: pointer; cursor: pointer;
padding: 0 3px; padding: 0 3px;
white-space: nowrap; white-space: nowrap;
outline: 0;
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color; transition-property: background-color, color;
@ -309,13 +300,13 @@
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); 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: all 200ms ease-out;
transition-property: background-color, color; transition-property: background-color, color;
} }
&:focus { &:focus {
background-color: rgba($lighter-text-color, 0.3); outline: $ui-button-icon-focus-outline;
} }
&.disabled { &.disabled {
@ -327,16 +318,6 @@
&.active { &.active {
color: $highlight-text-color; color: $highlight-text-color;
} }
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
} }
body > [data-popper-placement] { body > [data-popper-placement] {

4
app/javascript/flavours/glitch/styles/variables.scss
View File

@ -5,6 +5,7 @@ $red-600: #b7253d !default; // Deep Carmine
$red-500: #df405a !default; // Cerise $red-500: #df405a !default; // Cerise
$blurple-600: #563acc; // Iris $blurple-600: #563acc; // Iris
$blurple-500: #6364ff; // Brand purple $blurple-500: #6364ff; // Brand purple
$blurple-400: #7477fd; // Medium slate blue
$blurple-300: #858afa; // Faded Blue $blurple-300: #858afa; // Faded Blue
$grey-600: #4e4c5a; // Trout $grey-600: #4e4c5a; // Trout
$grey-100: #dadaf3; // Topaz $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-background-color: $red-500 !default;
$ui-button-destructive-focus-background-color: $red-600 !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 // Variables for texts
$primary-text-color: $white !default; $primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default; $darker-text-color: $ui-primary-color !default;