Fixed full-screen loader behavior and other minor UI fixes.

vuelessjs · Oct 16, 2024 · b076c2b · b076c2b
1 parent 57ea34d
commit b076c2b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 8 deletions.
diff --git a/src/.storybook/index.css b/src/.storybook/index.css
@@ -14,6 +14,7 @@ body {
 .light .sbdocs .sbdocs-content > h1,
 .light .sbdocs .sbdocs-content > h2,
 .light .sbdocs .sbdocs-content > h3,
+.light .sbdocs .sbdocs-content > .sb-anchor > h3,
 .light .sbdocs .sbdocs-content > p,
 .light .sbdocs .sbdocs-content > table th,
 .light .sbdocs .sbdocs-content > table td {
@@ -23,6 +24,7 @@ body {
 .dark .sbdocs .sbdocs-content > h1,
 .dark .sbdocs .sbdocs-content > h2,
 .dark .sbdocs .sbdocs-content > h3,
+.dark .sbdocs .sbdocs-content > .sb-anchor > h3,
 .dark .sbdocs .sbdocs-content > p,
 .dark .sbdocs .sbdocs-content > table th,
 .dark .sbdocs .sbdocs-content > table td {

diff --git a/src/.storybook/manager-head.html b/src/.storybook/manager-head.html
@@ -5,13 +5,78 @@
 <link rel="shortcut icon" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.ico">
 <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.svg" />
 
+<!--
+Custom dark mode related vueless loader.
+-->
+<div id="sb-vueless-loader">
+  <img
+    class="sb-vueless-loader-img-dark"
+    src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg"
+    alt="Vueless UI"
+    width="250" />
+
+  <img
+    class="sb-vueless-loader-img-light"
+    src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg"
+    alt="Vueless UI"
+    width="250" />
+</div>
+
 <style>
   /* -------------------- Prevent showing users default storybook theme styles -------------------- */
 
-  body {
+  body.dark {
+    background: #111827;
+  }
+
+  #root {
     visibility: hidden;
   }
 
+  #sb-vueless-loader {
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    background: inherit;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+  }
+
+  .light #sb-vueless-loader {
+    background: #f1f5f9;
+  }
+
+  .dark #sb-vueless-loader {
+    background: #111827;
+  }
+
+  .sb-vueless-loader-img-dark,
+  .sb-vueless-loader-img-light {
+    display: none;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .light .sb-vueless-loader-img-light {
+    display: block;
+  }
+
+  .dark .sb-vueless-loader-img-dark {
+    display: block;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: .5;
+    }
+  }
+
   /* -------------------- Storybook config tooltip -------------------- */
 
   div[data-testid="tooltip"] {
@@ -73,15 +138,11 @@
 <script>
   /* This trick prevents showing users default storybook theme */
   (() => {
-    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const theme = prefersDarkScheme ? 'dark' : 'light';
-
-    document.documentElement.classList.add(theme);
-
     window.onload = function() {
       setTimeout(() => {
-        document.body.style.visibility = 'visible';
-      }, 500);
+        document.getElementById("root").style.visibility = 'visible';
+        document.getElementById("sb-vueless-loader").style.display = 'none';
+      }, 1000);
     };
   })();
 </script>