From b97e70f1629b2083f74f8e16c33124afb290b454 Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Fri, 20 Dec 2024 23:07:36 +0800 Subject: [PATCH] feat: moved theme switch stylings --- Client/src/Components/ThemeSwitch/index.css | 12 ++++++------ Client/src/index.css | 6 ------ 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/Client/src/Components/ThemeSwitch/index.css b/Client/src/Components/ThemeSwitch/index.css index 2519a0be8..d5db1c1ca 100644 --- a/Client/src/Components/ThemeSwitch/index.css +++ b/Client/src/Components/ThemeSwitch/index.css @@ -27,27 +27,27 @@ @media (prefers-reduced-motion: no-preference) { .sun-and-moon > .sun { - transition: transform 0.5s var(--ease-elastic-3); + transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .sun-and-moon > .sun-beams { transition: - transform 0.5s var(--ease-elastic-4), - opacity 0.5s var(--ease-3); + transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), + opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); } .sun-and-moon .moon > circle { - transition: transform 0.25s var(--ease-out-5); + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @supports (cx: 1) { .sun-and-moon .moon > circle { - transition: cx 0.25s var(--ease-out-5); + transition: cx 0.25s cubic-bezier(0.4, 0, 0.2, 1); } } .theme-dark .sun-and-moon > .sun { - transition-timing-function: var(--ease-3); + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); transition-duration: 0.25s; transform: scale(1.75); } diff --git a/Client/src/index.css b/Client/src/index.css index 093eb4866..173551ba6 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -54,12 +54,6 @@ html { --env-var-shadow-1: 0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03); - - /* ThemeSwitch Component Stylings */ - --ease-elastic-3: cubic-bezier(0.68, -0.55, 0.27, 1.55); - --ease-elastic-4: cubic-bezier(0.68, -0.55, 0.27, 1.55); - --ease-3: cubic-bezier(0.25, 0.1, 0.25, 1); - --ease-out-5: cubic-bezier(0.4, 0, 0.2, 1); } .MuiInputBase-root.Mui-disabled input {