design changes

Merge pull request #36 from isc30/feature/demo

Author: isc30

demo/WasmHost/App.razor

@@ -1,13 +1,15 @@
 <LazyRouter AppAssembly="@typeof(Program).Assembly">
     <Loading Context="moduleName">
         <LayoutView Layout="@typeof(MainLayout)">
-            <div class="pureCenter full light">
+            <div class="pureCenter full light fadein">
                 <div class="loader light"></div>
             </div>
         </LayoutView>
     </Loading>
     <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <LayoutView Layout="@typeof(MainLayout)">
+            <RouteView RouteData="@routeData" />
+        </LayoutView>
     </Found>
     <NotFound>
         <LayoutView Layout="@typeof(MainLayout)">

demo/WasmHost/Pages/Counter.razor

@@ -1,5 +1,9 @@
 @page "/counter"
 
+    <div class="pureCenter full light fadein">
+        <div class="loader"></div>
+    </div>
+
 <h1>Counter</h1>
 
 <p>Current count: @currentCount</p>

demo/WasmHost/wwwroot/css/global.css

@@ -32,16 +32,16 @@
     top:0; left:0;
     width: 100%;
     height: 100%;
-    background-color: black;
-    color: white;
 }
 
     .full.dark {
-        background-color: black;
+        backdrop-filter: blur(4px);
+        background-color: rgba(0,0,0,0.8);
         color: white;
     }
 
     .full.light {
-        background-color: white;
+        backdrop-filter: blur(4px);
+        background-color: rgba(255,255,255,0.8);
         color: black;
     }

demo/WasmHost/wwwroot/css/loader.css

@@ -5,7 +5,6 @@
     width: 3em;
     height: 3em;
 
-    -webkit-animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite; /* Safari */
     animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite;
 }
 
@@ -17,17 +16,6 @@
         color: white;
     }
 
-/* Safari */
-@-webkit-keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-    }
-}
-
 @keyframes spin {
     0% {
         transform: rotate(0deg);
@@ -37,3 +25,17 @@
         transform: rotate(360deg);
     }
 }
+
+.fadein {
+    animation: fadein ease;
+    animation-duration: 2s;
+}
+
+.fadein.fast {
+    animation-duration: 0.3s;
+}
+
+@keyframes fadein {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}