rubiline
/
Glitch-Shrike
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix focus and hover styles in web UI 

Port cfd50f30bb to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
shrike
Eugen Rochko 2023-07-23 17:55:13 +02:00 committed by Claire
parent 7565a328d0
commit cc363629be
4 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -346,7 +346,6 @@ $ui-header-height: 55px;
position: relative; position: relative;
z-index: 2; z-index: 2;
outline: 0; outline: 0;
overflow: hidden;
& > button { & > button {
display: flex; display: flex;
@ -363,6 +362,10 @@ $ui-header-height: 55px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
flex: 1; flex: 1;
&:focus-visible {
outline: $ui-button-icon-focus-outline;
}
} }
& > .column-header__back-button { & > .column-header__back-button {
@ -427,6 +430,10 @@ $ui-header-height: 55px;
font-size: 16px; font-size: 16px;
padding: 0 15px; padding: 0 15px;
&:last-child {
border-start-end-radius: 4px;
}
&:hover { &:hover {
color: lighten($darker-text-color, 7%); color: lighten($darker-text-color, 7%);
} }

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

@ -526,7 +526,7 @@
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
border-radius: 4px; border-radius: 4px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: var(--dropdown-shadow);
background: $simple-background-color; background: $simple-background-color;
overflow: hidden; overflow: hidden;
transform-origin: 50% 0; transform-origin: 50% 0;
@ -603,7 +603,7 @@
.language-dropdown { .language-dropdown {
&__dropdown { &__dropdown {
background: $simple-background-color; background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: var(--dropdown-shadow);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;

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

@ -14,7 +14,7 @@
.emoji-picker-dropdown__menu { .emoji-picker-dropdown__menu {
background: $simple-background-color; background: $simple-background-color;
position: relative; position: relative;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); box-shadow: var(--dropdown-shadow);
border-radius: 4px; border-radius: 4px;
margin-top: 5px; margin-top: 5px;
z-index: 2; z-index: 2;
@ -98,7 +98,7 @@
} }
} }
&:focus { &:focus-visible {
img { img {
outline: $ui-button-icon-focus-outline; outline: $ui-button-icon-focus-outline;
} }

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

@ -202,8 +202,8 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($action-button-color, 20%); color: lighten($action-button-color, 7%);
background-color: $ui-button-icon-hover-background-color; background-color: rgba($action-button-color, 0.15);
} }
&:focus-visible { &:focus-visible {
@ -236,7 +236,7 @@
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: $ui-button-icon-hover-background-color; background-color: rgba($lighter-text-color, 0.15);
} }
&:focus-visible { &:focus-visible {
@ -251,6 +251,13 @@
&.active { &.active {
color: $highlight-text-color; color: $highlight-text-color;
&:hover,
&:active,
&:focus {
color: $highlight-text-color;
background-color: transparent;
}
&.disabled { &.disabled {
color: lighten($highlight-text-color, 13%); color: lighten($highlight-text-color, 13%);
} }
@ -293,16 +300,12 @@
cursor: pointer; cursor: pointer;
padding: 0 3px; padding: 0 3px;
white-space: nowrap; white-space: nowrap;
transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: $ui-button-icon-hover-background-color; background-color: rgba($lighter-text-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
} }
&:focus { &:focus {
@ -317,6 +320,13 @@
&.active { &.active {
color: $highlight-text-color; color: $highlight-text-color;
&:hover,
&:active,
&:focus {
color: $highlight-text-color;
background-color: transparent;
}
} }
} }
@ -561,7 +571,7 @@ body > [data-popper-placement] {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
&:focus { &:focus-visible {
outline: 1px dotted; outline: 1px dotted;
} }