Fix web splash screen

NightDreamGames · Mar 27, 2024 · 5f7acb3 · 5f7acb3
1 parent 8b1e063
commit 5f7acb3
Showing 1 changed file with 39 additions and 58 deletions.
diff --git a/web/index.html b/web/index.html
@@ -42,33 +42,18 @@
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
 
  <style id="splash-screen-style">
- .flutter-loader {
- z-index: 999999;
- }
-
- #splash {
- position: fixed;
- width: 100%;
+ html {
  height: 100%;
- top: 0px;
- left: 0px;
- z-index: 999998;
- opacity: 1;
- /* animation type and duration */
- transition: opacity 0.25s;
- background-color: #fdfcff;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
  }
 
- #splash.remove {
- /* enable click through when run animation */
- pointer-events: none;
- /* start animation */
- opacity: 0;
+ body {
+ margin: 0;
+ min-height: 100%;
+ background-color: #fdfcff;
+ background-size: 100% 100%;
  }
 
- #splash .center {
+ .center {
  margin: 0;
  position: absolute;
  top: 50%;
@@ -77,87 +62,82 @@
  transform: translate(-50%, -50%);
  }
 
- #splash .contain {
+ .contain {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  }
 
- #splash .stretch {
+ .stretch {
  display: block;
  width: 100%;
  height: 100%;
  }
 
- #splash .cover {
+ .cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
 
- #splash .bottom {
+ .bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  }
 
- #splash .bottomLeft {
+ .bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  }
 
- #splash .bottomRight {
+ .bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
  }
 
  @media (prefers-color-scheme: dark) {
- #splash {
+ body {
  background-color: #1a1c1e;
  }
  }
  </style>
  <script id="splash-screen-script">
  function removeSplashFromWeb() {
- const splashElement = document.getElementById("splash");
- splashElement.classList.add("remove");
- setTimeout(function () {
- splashElement.remove();
- document.getElementById("splash-screen-script")?.remove();
- }, 750 /* animation time + wait rendering and others(500ms) */);
+ document.getElementById("splash")?.remove();
+ document.getElementById("splash-branding")?.remove();
+ document.body.style.background = "transparent";
  }
  </script>
  </head>
  <body>
- <div id="splash">
- <picture>
- <source
- srcset="
- splash/img/light-1x.png 1x,
- splash/img/light-2x.png 2x,
- splash/img/light-3x.png 3x,
- splash/img/light-4x.png 4x
- "
- media="(prefers-color-scheme: light)"
- />
- <source
- srcset="
- splash/img/dark-1x.png 1x,
- splash/img/dark-2x.png 2x,
- splash/img/dark-3x.png 3x,
- splash/img/dark-4x.png 4x
- "
- media="(prefers-color-scheme: dark)"
- />
- <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="" />
- </picture>
- </div>
+ <picture id="splash">
+ <source
+ srcset="
+ splash/img/light-1x.png 1x,
+ splash/img/light-2x.png 2x,
+ splash/img/light-3x.png 3x,
+ splash/img/light-4x.png 4x
+ "
+ media="(prefers-color-scheme: light)"
+ />
+ <source
+ srcset="
+ splash/img/dark-1x.png 1x,
+ splash/img/dark-2x.png 2x,
+ splash/img/dark-3x.png 3x,
+ splash/img/dark-4x.png 4x
+ "
+ media="(prefers-color-scheme: dark)"
+ />
+ <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="" />
+ </picture>
 
  <script>
  window.addEventListener("load", function (ev) {
@@ -176,3 +156,4 @@
  </script>
  </body>
 </html>
+