Transitions

web/index.html

@@ -14,7 +14,7 @@
     <meta name="msapplication-navbutton-color" content="#317f6f" />
     <meta name="apple-mobile-web-app-status-bar-style" content="#317f6f" />
     <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png" sizes="180x180" />
-    <link rel="mask-icon" href="/static/images/mask-icon.svg" color="#317f6f" />
+    <link rel="mask-icon" href="/static/images/ntfy-mask.svg" color="#317f6f" />
 
     <!-- Favicon, see favicon.io -->
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
@@ -54,7 +54,7 @@
         background-color: #f5f5f5;
       }
 
-      html.ntfy-dark {
+      html.dark {
         background-color: #212121;
       }
 
@@ -71,11 +71,11 @@
         transition: opacity 0.1s ease-out;
       }
 
-      html.ntfy-dark #splash {
+      html.dark #splash {
         background-color: #212121;
       }
 
-      #splash.ntfy-splash-hidden {
+      #splash.splash-hidden {
         opacity: 0;
         pointer-events: none;
       }
@@ -84,10 +84,10 @@
         width: 112px;
         height: 112px;
         /* Gently pulse while loading; src/app/splash.js stops this and fades the logo out. */
-        animation: ntfy-splash-pulse 1.4s ease-in-out infinite;
+        animation: splash-pulse 1.4s ease-in-out infinite;
       }
 
-      @keyframes ntfy-splash-pulse {
+      @keyframes splash-pulse {
         0%,
         100% {
           opacity: 1;
@@ -117,7 +117,7 @@
           var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
           var dark = stored === "dark" || ((!stored || stored === "system") && prefersDark);
           if (dark) {
-            document.documentElement.classList.add("ntfy-dark");
+            document.documentElement.classList.add("dark");
           }
         } catch (e) {
           /* localStorage/matchMedia unavailable -- fall back to the default light splash */
@@ -135,7 +135,7 @@
     <!-- Static splash, removed by src/app/splash.js once the app is ready. The logo is a same-origin
      SVG precached by the service worker, so it paints right after the (instant) background. -->
     <div id="splash" aria-hidden="true">
-      <img src="/static/images/main_list_icon.svg" alt="" />
+      <img src="/static/images/ntfy-splash.svg" alt="" />
     </div>
     <div id="root"></div>
     <script src="/config.js"></script>