added glass morphism css to layout and homepage

Stephen-Gordon · Feb 12, 2024 · 0128c8c · 0128c8c
1 parent d3c5bf6
commit 0128c8c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/src/app/components/Layouts/SheetLayout.tsx b/src/app/components/Layouts/SheetLayout.tsx
@@ -25,7 +25,7 @@ const SheetLayout = ({ children }) => {
           className='blurios'
           style={{
             backgroundColor: 'rgba(16, 16, 18, 0.7)',
-            backdropFilter: 'blur(10px) saturate(150%)',
+            backdropFilter: 'blur(10px) saturate(1000%)',
           }}
         >
           {/*  <Sheet.Header></Sheet.Header> */}

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
@@ -18,7 +18,7 @@ export default function Page() {
   const dispatch = useDispatch();
   return (
     <div id='render'>
-      <div className='p-4 pt-40'>
+      <div className='blurios p-4 pt-40'>
         <div className='items-center text-center text-5xl'>
           <Balance />
         </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -316,7 +316,16 @@ export default function RootLayout({
               <QueryClientProvider client={queryClient}>
                 <div>{auth}</div>
                 <div>{transactionmodal}</div>
-                <main className='bg-dark h-screen w-screen text-gray-300'>
+                <div className='items absolute -z-50 flex h-screen w-screen content-center items-center justify-center '>
+                  <div className='bg-purple h-1/2 w-1/2 rounded-full'></div>
+                </div>
+                <main
+                  style={{
+                    backgroundColor: 'rgba(16, 16, 18, 0.9)',
+                    backdropFilter: 'blur(100px) saturate(1000%)',
+                  }}
+                  className='blurios bg-dark/90 h-screen w-screen text-gray-300'
+                >
                   {children}
                 </main>
               </QueryClientProvider>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -3,9 +3,9 @@
 @tailwind utilities;
 
 .blurios {
-  -webkit-backdrop-filter: blur(20px) saturate(150%); /* Add this line first, it fixes blur for Safari and adds saturation */
-
-  backdrop-filter: blur(5px); /* This line activates blur*/
+  -webkit-backdrop-filter: blur(20px) saturate(1000%); /* Add this line first, it fixes blur for Safari and adds saturation */
+  background-color: 'rgba(16, 16, 18, 0.9)';
+  backdrop-filter: blur(20px); /* This line activates blur*/
 }
 
 :root {