Rework style and loading

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor

@@ -3,10 +3,4 @@
 
 <div class="page">
     @Body
-</div>
-
-<div class="background">
-    <span class="orb red"></span>
-    <span class="orb blue"></span>
-    <span class="orb green"></span>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -2,47 +2,4 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-}
-
-.orb {
-    position: absolute;
-    border-radius: 100%;
-    z-index: var(--index-orb);
-}
-
-.green {
-    width: 80vh;
-    height: 80vh;
-    top: -20vh;
-    background: #315941;
-    filter: blur(30vh);
-}
-
-.blue {
-    width: 80vw;
-    height: 80vw;
-    left: 10vw;
-    top: 50vh;
-    background: #3A4156;
-    filter: blur(30vh);
-}
-
-.red {
-    width: 100vh;
-    height: 100vh;
-    left: 60vw;
-    top: -40vh;
-    background: #593533;
-    filter: blur(30vh);
-}
-
-.background {
-    height: 100vh;
-    width: 100vw;
-    background: var(--background);
-    position: fixed;
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    z-index: var(--index-background);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor.css

@@ -96,16 +96,4 @@
     .tags, .storage {
         display: none;
     }
-}
-
-@keyframes loading {
-    0% {
-        background: rgb(255, 255, 255, 0.05);
-    }
-    50% {
-        background: rgb(255, 255, 255, 0.2);
-    }
-    100% {
-        background: rgb(255, 255, 255, 0.05);
-    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.css

@@ -50,6 +50,6 @@
     border-radius: 50%;
     border: 3px solid rgba(0, 0, 0, 0.2);
     border-top-color: var(--white);
-    animation: loading 1s linear infinite;
+    animation: spin 1s linear infinite;
     justify-self: center;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css

@@ -54,16 +54,3 @@
     fill: var(--yellow);
 }
 
-@keyframes loading {
-    0% {
-        background: rgb(255, 255, 255, 0.05);
-    }
-
-    50% {
-        background: rgb(255, 255, 255, 0.2);
-    }
-
-    100% {
-        background: rgb(255, 255, 255, 0.05);
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css

@@ -19,13 +19,3 @@
     height: 60px;
     animation: spin 1s linear infinite;
 }
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css

@@ -22,8 +22,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    animation-name: fade-in;
-    animation-duration: 0.2s;
 }
 
 .line {

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -81,65 +81,21 @@ html, body, #app {
         content: "An error has occurred."
     }
 
-.loading-progress {
+#loading-progress {
-    position: relative;
+    display: flex;
-    display: block;
+    width: 100vw;
-    width: 8rem;
+    height: 100vh;
-    height: 8rem;
+    justify-content: center;
-    margin: 20vh auto 1rem auto;
+    align-items: center;
+    animation: loading-background 4s linear infinite;
 }
 
-    .loading-progress circle {
+    #loading-progress > #loading-icon {
-        fill: none;
+        max-width: 200px;
-        stroke: #e0e0e0;
+        max-height: 200px;
-        stroke-width: 0.6rem;
+        animation: loading-icon 4s ease-in-out infinite;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
     }
 
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
-
-.loading-progress-text {
-    color: #000;
-    position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
-}
-
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
-
-code {
-    color: #c02d76;
-}
-
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
-    color: var(--bs-secondary-color);
-    text-align: end;
-}
-
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
-    text-align: start;
-}
-
-:focus-visible {
-    outline: none;
-}
-
-.expand-col-2 {
-    grid-column: 1 / 3;
-}
-
-.expand-row-2 {
-    grid-row: 1 / 3;
-}
-
 .body-sm {
     color: #ccc
 }
@@ -158,14 +114,55 @@ code {
     text-decoration: none;
 }
 
+@keyframes loading-background {
+    0% {
+        background: rgb(0, 0, 0, 0.2);
+    }
 
-@keyframes fade-in {
+    50% {
-    0% {opacity: 0}
+        background: rgb(0, 0, 0, 0.3);
-    100% {opacity: 1}
+    }
+
+    100% {
+        background: rgb(0, 0, 0, 0.2);
+    }
+}
+
+
+@keyframes loading-icon {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.95);
+    }
+
+    100% {
+        transform: scale(1);
+    }
 }
 
 @keyframes loading {
-    to {
+    0% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+
+    50% {
+        background: rgb(255, 255, 255, 0.2);
+    }
+
+    100% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
         transform: rotate(360deg);
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/background.css

@@ -0,0 +1,42 @@
+.orb {
+    position: absolute;
+    border-radius: 100%;
+    z-index: var(--index-orb);
+}
+
+.green {
+    width: 80vh;
+    height: 80vh;
+    top: -20vh;
+    background: #315941;
+    filter: blur(30vh);
+}
+
+.blue {
+    width: 80vw;
+    height: 80vw;
+    left: 10vw;
+    top: 50vh;
+    background: #3A4156;
+    filter: blur(30vh);
+}
+
+.red {
+    width: 100vh;
+    height: 100vh;
+    left: 60vw;
+    top: -40vh;
+    background: #593533;
+    filter: blur(30vh);
+}
+
+#background {
+    height: 100vh;
+    width: 100vw;
+    background: var(--background);
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    z-index: var(--index-background);
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html

@@ -7,17 +7,23 @@
     <title>Game Ideas</title>
     <base href="/" />
     <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/background.css" />
     <link rel="icon" type="image/png" href="icon.png" />
     <link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />
 </head>
 
 <body>
     <div id="app">
-        <svg class="loading-progress">
+    </div>
-            <circle r="40%" cx="50%" cy="50%" />
+
-            <circle r="40%" cx="50%" cy="50%" />
+    <div id="loading-progress">
-        </svg>
+        <img src="icon.png" alt="" id="loading-icon">
-        <div class="loading-progress-text"></div>
+    </div>
+
+    <div id="background">
+        <span class="orb red"></span>
+        <span class="orb blue"></span>
+        <span class="orb green"></span>
     </div>
 
     <div id="blazor-error-ui">
@@ -25,6 +31,7 @@
         <a href="." class="reload">Reload</a>
         <span class="dismiss">🗙</span>
     </div>
+
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
     <script src="Pages/Games/Components/GameCreationForm.razor.js"></script>