misc: update Browser project.

demo/Ursa.Demo.Browser/wwwroot/app.css

@@ -1,74 +1,58 @@
-:root {
-    --sat: env(safe-area-inset-top);
-    --sar: env(safe-area-inset-right);
-    --sab: env(safe-area-inset-bottom);
-    --sal: env(safe-area-inset-left);
-}
-
-/* HTML styles for the splash screen */
-
-.highlight {
-    color: white;
-    font-size: 2.5rem;
-    display: block;
-}
-
-.purple {
-    color: #8b44ac;
-}
-
-.icon {
-    opacity: 0.05;
-    height: 35%;
-    width: 35%;
+/* HTML styles for the splash screen */
+.avalonia-splash {
     position: absolute;
-    background-repeat: no-repeat;
-    right: 0px;
-    bottom: 0px;
-    margin-right: 3%;
-    margin-bottom: 5%;
-    z-index: 5000;
-    background-position: right bottom;
+    height: 100%;
+    width: 100%;
+    background: white;
+    font-family: 'Outfit', sans-serif;
+    justify-content: center;
+    align-items: center;
+    display: flex;
     pointer-events: none;
 }
 
-#avalonia-splash a {
-    color: whitesmoke;
+/* Light theme styles */
+@media (prefers-color-scheme: light) {
+    .avalonia-splash {
+        background: white;
+    }
+
+    .avalonia-splash h2 {
+        color: #1b2a4e;
+    }
+
+    .avalonia-splash a {
+        color: #0D6EFD;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .avalonia-splash {
+        background: #1b2a4e;
+    }
+
+    .avalonia-splash h2 {
+        color: white;
+    }
+
+    .avalonia-splash a {
+        color: white;
+    }
+}
+
+.avalonia-splash h2 {
+    font-weight: 400;
+    font-size: 1.5rem;
+}
+
+.avalonia-splash a {
     text-decoration: none;
+    font-size: 2.5rem;
+    display: block;   
 }
 
-.center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-
-#avalonia-splash {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    color: whitesmoke;
-    background: #1b2a4e;
-    font-family: 'Nunito', sans-serif;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    justify-content: center;
-    align-items: center;
-}
-
-.splash-close {
-    animation: fadeout 0.25s linear forwards;
-}
-
-@keyframes fadeout {
-    0% {
-        opacity: 100%;
-    }
-
-    100% {
-        opacity: 0;
-        visibility: collapse;
-    }
+.avalonia-splash.splash-close {
+    transition: opacity 200ms, display 200ms;
+    display: none;
+    opacity: 0;
 }