From ed698752f03582b2b4145c00906093639be81e95 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Wed, 8 May 2024 10:48:46 +0530 Subject: [PATCH] fix fast/light version. fixes #559 --- src/style.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/style.css b/src/style.css index 643f9b4..79824bc 100644 --- a/src/style.css +++ b/src/style.css @@ -1066,11 +1066,14 @@ body > #demo-frame { /* opacity: 0; */ will-change: opacity; background: var(--color-overlay); - backdrop-filter: blur(5px) grayscale(1); transition: opacity var(--duration-modal-overlay-show); will-change: transform; } +body:not(.light-version) .modal { + backdrop-filter: blur(5px) grayscale(1); +} + .modal--no-overlay { background: none; backdrop-filter: none; @@ -1097,10 +1100,11 @@ body > #demo-frame { transition: 0.25s ease; } .modal__content { + --opaque: 68%; background: var(--color-popup); /* fix me */ - background: linear-gradient(45deg, #2d063cad, #3a2b63); + background: linear-gradient(45deg, rgb(45 6 60 / var(--opaque)), #3a2b63); box-shadow: inset 1px -1px 0 0 #ffffff17, 0 20px 31px 0 #0000008a; @@ -1122,6 +1126,9 @@ body > #demo-frame { forwards; /* animation-delay: 150ms; */ } +body.light-version .modal__content { + --opaque: 100%; +} @keyframes anim-modal { to { @@ -1140,10 +1147,7 @@ body > #demo-frame { visibility: visible; } -.is-modal-visible .modal__content { - /* transition-duration: 0.3s; */ - /* transform: translateY(0px) scale(1); */ - /* opacity: 1; */ +body:not(.light-version).is-modal-visible .modal__content { backdrop-filter: blur(3px); } @@ -1158,9 +1162,11 @@ body > #demo-frame { opacity: 0; will-change: opacity; /* background: var(--color-overlay); */ - backdrop-filter: blur(5px) grayscale(1); transition: opacity var(--duration-modal-overlay-show); } +body:not(.light-version) .modal-overlay { + backdrop-filter: blur(5px) grayscale(1); +} /* Make settings modal smaller */