Add header for game list (#3)

Co-authored-by: Maxime Adler <madler@sqli.com>
Reviewed-on: #3

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

@@ -1,97 +1,51 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');
 
-html, body {
+:root {
+    --background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
+    --violet: #A380D1;
+    --violet-selected: #8266a7;
+    --red: #FF5E51;
+    --yellow: #FFC107;
+    --green: #43F8C0;
+    --light-grey: #5C5C5E;
+    --black: rgba(44, 43, 46, 0.8);
+    --white: #fff;
+    --semi-black: rgba(0, 0, 0, 0.5);
+    --line-black: rgba(0, 0, 0, 0.2);
+    --small-radius: 4px;
+    --big-radius: 10px;
+    --radius: 6px;
+    --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+}
+
+html {
+    font-family: 'Noto Sans', sans-serif;
+    font-size: 12px;
+    color: var(--white)
+}
+
+html, body, #app {
     margin: 0;
     padding: 0;
     height: 100%;
-
-    font-family: 'Noto Sans', sans-serif;
-}
-
-body {
-    background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
-    overflow: hidden
-}
-
-html::before,
-body::before,
-body::after {
-    content: "";
-    position: absolute;
-    border-radius: 100%;
-}
-
-html::before {
-    /*Green orb*/
-    position: absolute;
-    width: 80vh;
-    height: 80vh;
-    top: -20vh;
-    background: #315941;
-    filter: blur(30vh);
-    z-index: -999;
-}
-
-body::before {
-    /*Blue orb*/
-    position: absolute;
-    width: 80vw;
-    height: 80vw;
-    left: 10vw;
-    top: 50vh;
-    background: #3A4156;
-    filter: blur(30vh);
-    z-index: -999;
-}
-
-body::after {
-    /*Reb orb*/
-    position: absolute;
-    width: 100vh;
-    height: 100vh;
-    left: 60vw;
-    top: -30vh;
-    background: #593533;
-    filter: blur(30vh);
-    z-index: -999;
-}
-
-h1:focus {
-    outline: none;
-}
-
-a, .btn-link {
-    color: #0071c1;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.content {
-    padding-top: 1.1rem;
+    overflow: hidden;
 }
 
 .valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
+    border: 2px solid var(--green);
 }
 
 .invalid {
-    outline: 1px solid red;
+    border: 2px solid var(--red) !important;
 }
 
 .validation-message {
-    color: red;
+    color: var(--red);
 }
 
 #blazor-error-ui {
     color-scheme: light only;
+    color: #000;
     background: lightyellow;
     bottom: 0;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
@@ -144,6 +98,7 @@ a, .btn-link {
         }
 
 .loading-progress-text {
+    color: #000;
     position: absolute;
     text-align: center;
     font-weight: bold;
@@ -165,4 +120,19 @@ code {
 
 .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
     text-align: start;
+}
+
+:focus-visible {
+    outline: none;
+}
+
+@keyframes fade-in {
+    0% {opacity: 0}
+    100% {opacity: 1}
+}
+
+@keyframes loading {
+    to {
+        transform: rotate(360deg);
+    }
 }