fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-23 01:25:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix toggle button color for light (and dark/default) theme (#29553)

Browse source
This commit is contained in:
Erik Uden 2024-03-13 12:45:20 +01:00 committed by GitHub
parent b43eaa4517
commit 268856d5d9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/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)

13
app/javascript/styles/mastodon/components.scss
View file

@ -3369,7 +3369,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 {
@ -3392,7 +3392,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;
@ -3403,6 +3403,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;