From e1b64151a2e81f9dcb77c44e82b68ef7e075ba96 Mon Sep 17 00:00:00 2001 From: Erik Uden Date: Wed, 13 Mar 2024 12:45:20 +0100 Subject: [PATCH] [Glitch] Fix toggle button color for light (and dark/default) theme Port 268856d5d9f72f003a08a53c7d094ed4df7c16bc to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/components.scss | 13 +++++++++++-- .../flavours/glitch/styles/mastodon-light/diff.scss | 4 ++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 0a446447f6..5c0d721aab 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -3586,7 +3586,7 @@ $ui-header-height: 55px; height: 20px; padding: 0; border-radius: 10px; - background-color: #626982; + background-color: $ui-primary-color; } .react-toggle--focus { @@ -3609,7 +3609,7 @@ $ui-header-height: 55px; width: 16px; height: 16px; border-radius: 50%; - background-color: $primary-text-color; + background-color: $ui-button-color; box-sizing: border-box; transition: all 0.25s ease; transition-property: border-color, left; @@ -3620,6 +3620,15 @@ $ui-header-height: 55px; 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 { color: $light-text-color; background-color: $ui-base-color; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 0ab1c8f871..50cd0aded5 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -263,11 +263,11 @@ html { } .react-toggle-track { - background: $ui-secondary-color; + background: $ui-primary-color; } .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)