feat(app-general): add glass effect fallback

eficode · Feb 3, 2021 · 7bfd20c · 7bfd20c
1 parent 538445b
commit 7bfd20c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.styled.tsx b/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.styled.tsx
@@ -13,10 +13,14 @@ PanelHeader.displayName = 'PanelHeader';
 
 export const PanelWrapper = styled.div`
   width: 400px;
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.95);
   border-radius: 4px;
-  backdrop-filter: blur(20px);
   cursor: pointer;
+
+  @supports (backdrop-filter: blur(20px)) {
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(20px);
+  }
 `;
 
 PanelWrapper.displayName = 'PanelWrapper';

diff --git a/packages/game-app/src/_shared/components/GlassOverlay/GlassOverlay.styled.tsx b/packages/game-app/src/_shared/components/GlassOverlay/GlassOverlay.styled.tsx
@@ -25,8 +25,12 @@ export const Overlay = styled.div<{ isClosing: boolean; isOpening: boolean }>`
   left: 0;
   bottom: 0;
   z-index: 1000;
-  background-color: rgb(170, 180, 175, 0.4);
-  backdrop-filter: blur(15px);
+  background-color: rgb(170, 180, 175, 0.95);
+
+  @supports (backdrop-filter: blur(15px)) {
+    background-color: rgb(170, 180, 175, 0.4);
+    backdrop-filter: blur(15px);
+  }
 
   ${props =>
     props.isClosing &&

diff --git a/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.styled.tsx b/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.styled.tsx
@@ -1,14 +1,18 @@
 import styled from 'styled-components';
 
 export const CreateGameContainer = styled.div`
-  background-color: rgb(170, 180, 175, 0.4);
-  backdrop-filter: blur(15px);
+  background-color: rgb(170, 180, 175, 0.95);
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  @supports (backdrop-filter: blur(15px)) {
+    background-color: rgb(170, 180, 175, 0.4);
+    backdrop-filter: blur(15px);
+  }
 `;
 
 CreateGameContainer.displayName = 'CreateGameContainer';

diff --git a/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx b/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx
@@ -18,7 +18,7 @@ const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode; isOver: boolea
   backdrop-filter: blur(30px);
   padding: 0px 40px 0 40px;
   box-sizing: border-box;
-  background-color: rgb(170, 180, 175, 0.4);
+  background-color: rgb(170, 180, 175, 0.95);
   display: flex;
   flex-direction: column;
   transition: transform 0.5s, width 0.5s, right 0.5s;
@@ -27,8 +27,7 @@ const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode; isOver: boolea
 
   @supports (backdrop-filter: blur(30px)) {
     background-color: rgb(170, 180, 175, 0.4);
-    -webkit-backdrop-filter: blur(2em);
-    backdrop-filter: blur(2em);
+    backdrop-filter: blur(30px);
   }
 
   ${props =>

diff --git a/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.styled.tsx b/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.styled.tsx
@@ -18,6 +18,7 @@ export const RulesContainer = styled.div`
   margin: auto;
   margin-top: 100px;
   overflow-y: scroll;
+  scrollbar-width: none;
 
   ::-webkit-scrollbar {
     display: none;