treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Fix toggle button color for light (and dark/default) theme 

Port 268856d5d9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main-rebase-security-fix
Erik Uden 2024-03-13 12:45:20 +01:00 committed by Claire
parent 48134bcd10
commit e1b64151a2
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/flavours/glitch/styles/components.scss
View File

@ -3586,7 +3586,7 @@ $ui-header-height: 55px;
height: 20px; height: 20px;
padding: 0; padding: 0;
border-radius: 10px; border-radius: 10px;
background-color: #626982; background-color: $ui-primary-color;
} }
.react-toggle--focus { .react-toggle--focus {
@ -3609,7 +3609,7 @@ $ui-header-height: 55px;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background-color: $primary-text-color; background-color: $ui-button-color;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
transition-property: border-color, left; transition-property: border-color, left;
@ -3620,6 +3620,15 @@ $ui-header-height: 55px;
border-color: $ui-highlight-color; border-color: $ui-highlight-color;
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: darken($ui-primary-color, 5%);
}
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
.react-toggle-track {
background: lighten($ui-highlight-color, 5%);
}
.switch-to-advanced { .switch-to-advanced {
color: $light-text-color; color: $light-text-color;
background-color: $ui-base-color; background-color: $ui-base-color;

4
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
View File

@ -263,11 +263,11 @@ html {
} }
.react-toggle-track { .react-toggle-track {
background: $ui-secondary-color; background: $ui-primary-color;
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: darken($ui-secondary-color, 10%); background: lighten($ui-primary-color, 10%);
} }
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)