style: update loading background to cover full viewport using dynamic units

This commit is contained in:
jxxghp
2026-05-10 22:58:02 +08:00
parent 17a343392c
commit eec1f2d7b3
+9 -3
View File
@@ -92,6 +92,11 @@
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin /> <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<style> <style>
html,
body {
background: var(--initial-loader-bg, #fff);
}
#app { #app {
min-block-size: 100%; min-block-size: 100%;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@@ -100,11 +105,12 @@
#loading-bg { #loading-bg {
position: fixed; position: fixed;
inset: 0;
z-index: 99999; z-index: 99999;
display: block; display: block;
background: var(--initial-loader-bg, #fff); background: var(--initial-loader-bg, #fff);
block-size: 100vh; min-block-size: 100vh;
inline-size: 100vw; min-block-size: 100dvh;
transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
} }
@@ -359,4 +365,4 @@
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>