fixed minecraft login background showing

PPLBandage · Dec 29, 2024 · 7c8dab0 · 7c8dab0
1 parent 5c2db23
commit 7c8dab0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/src/app/modules/components/MinecraftConnect.tsx b/src/app/modules/components/MinecraftConnect.tsx
@@ -30,7 +30,20 @@ const MinecraftConnect = ({ children, onInput }: MinecraftConnectProps) => {
             </div>
             <CSSTransition
                 in={expanded}
-                timeout={230}
+                timeout={150}
+                classNames={{
+                    enter: style['background-enter'],
+                    enterActive: style['background-enter-active'],
+                    exit: style['background-exit'],
+                    exitActive: style['background-exit-active'],
+                }}
+                unmountOnExit>
+                <div className={style.background} />
+            </CSSTransition>
+
+            <CSSTransition
+                in={expanded}
+                timeout={150}
                 classNames={{
                     enter: style['menu-enter'],
                     enterActive: style['menu-enter-active'],

diff --git a/src/app/styles/minecraftConnect.module.css b/src/app/styles/minecraftConnect.module.css
@@ -1,14 +1,16 @@
 .base {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
+}
 
+.background {
+    position: fixed;
+    inset: 0;
+    z-index: 9000;
     background-color: rgba(0, 0, 0, 0.4);
 }
 
@@ -64,6 +66,24 @@
     transition: opacity 150ms, transform 150ms;
 }
 
+.background-enter {
+    opacity: 0;
+}
+
+.background-enter-active {
+    opacity: 1;
+    transition: opacity 150ms;
+}
+
+.background-exit {
+    opacity: 1;
+}
+
+.background-exit-active {
+    opacity: 0;
+    transition: opacity 150ms;
+}
+
 .code_input {
     background-color: var(--main-card-color);
     border-radius: 10px 0 0 10px;