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;
z-index: 2;
outline: 0;
overflow: hidden;
& > button {
display: flex;
@ -363,6 +362,10 @@ $ui-header-height: 55px;
overflow: hidden;
white-space: nowrap;
flex: 1;
&:focus-visible {
outline: $ui-button-icon-focus-outline;
}
}
& > .column-header__back-button {
@ -427,6 +430,10 @@ $ui-header-height: 55px;
font-size: 16px;
padding: 0 15px;
&:last-child {
border-start-end-radius: 4px;
}
&:hover {
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 {
border-radius: 4px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
box-shadow: var(--dropdown-shadow);
background: $simple-background-color;
overflow: hidden;
transform-origin: 50% 0;
@ -603,7 +603,7 @@
.language-dropdown {
&__dropdown {
background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
box-shadow: var(--dropdown-shadow);
border-radius: 4px;
overflow: hidden;
z-index: 2;

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

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

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

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