slide animation

scripts/generate-sw.mjs

@@ -13,7 +13,6 @@ const { count, size, warnings } = await generateSW({
     'icon-192x192.png',
     'icon-512x512.png',
     'site.webmanifest',
-    'styles.css',
     'push-handlers.js',
   ],
   // Hand-written Web Push handlers (public/push-handlers.js) are pulled into

src/app/routes/__root.tsx

@@ -31,6 +31,7 @@ import { getRootMeta } from "@/lib/i18n/meta";
 import FullScreenLoader from "@/components/full-screen-loader";
 import { CHROME_COLORS } from "@/lib/mantine/theme-colors";
 import mantineCssUrl from '@mantine/core/styles.css?url'
+import appStylesUrl from '../styles.css?url'
 import mantineDatesCssUrl from '@mantine/dates/styles.css?url'
 import mantineCarouselCssUrl from '@mantine/carousel/styles.css?url'
 import mantineTiptapCssUrl from '@mantine/tiptap/styles.css?url'
@@ -101,6 +102,7 @@ export const Route = createRootRouteWithContext<{
         },
         { rel: "manifest", href: "/site.webmanifest" },
         { rel: "icon", href: "/favicon.ico" },
+        { rel: 'stylesheet', href: appStylesUrl },
         { rel: 'stylesheet', href: mantineCssUrl },
         { rel: 'stylesheet', href: mantineCarouselCssUrl },
         { rel: 'stylesheet', href: mantineDatesCssUrl },
@@ -243,7 +245,6 @@ function RootDocument({ children }: { children: React.ReactNode }) {
               'try{var d=document.documentElement,t=localStorage.getItem("flxn-theme");if(t&&t!=="default"){d.setAttribute("data-theme",t);}var s=localStorage.getItem("flxn-theme-scheme");if(s){d.setAttribute("data-mantine-color-scheme",s);}var f=JSON.parse(localStorage.getItem("flxn-theme-fonts")||"[]");for(var i=0;i<f.length;i++){var l=document.createElement("link");l.rel="stylesheet";l.href=f[i];l.setAttribute("data-flxn-theme-font",t||"default");document.head.appendChild(l);}}catch(e){}',
           }}
         />
-        <link rel="stylesheet" href="/styles.css" />
       </head>
       <body
         style={{

src/app/styles.css

@@ -55,20 +55,16 @@ textarea,
   pointer-events: none;
 }
 
-/* Theme texture overlays (scanlines, rays, grain) paint ABOVE all content; a
+/* theme overlays must be this element, not body::before, or they blink off
-   real element with its own transition group keeps them on top and static
+   during transitions */
-   mid-transition — a body::before overlay sinks into the root snapshot and
-   blinks off the content for the duration of every transition. */
 .flxn-theme-overlay {
   position: fixed;
   pointer-events: none;
   view-transition-name: theme-overlay;
 }
 
-/* Root (wallpaper + tab bar) is identical across routes — swap it instantly
+/* pinned states, not 0ms durations: Safari skips zero-duration VT animations
-   instead of crossfading; Safari's plus-lighter blend of the pair dims the
+   and blends both snapshots */
-   whole backdrop mid-fade. Same explicit-state treatment for the header and
-   theme overlay. */
 ::view-transition-old(root),
 ::view-transition-old(app-header),
 ::view-transition-old(theme-overlay) {
@@ -96,10 +92,6 @@ textarea,
   mix-blend-mode: normal;
 }
 
-/* content pushes edge-to-edge over the static theme background; panes stay
-   transparent so the background never appears to move. The header is not in
-   these rules on purpose: it crossfades in place (its own group's default) —
-   sliding its chrome reads as a band appearing on continuous-bg themes */
 html[data-nav-direction="forward"]::view-transition-old(page) {
   animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-out-left;
 }
@@ -113,8 +105,6 @@ html[data-nav-direction="back"]::view-transition-new(page) {
   animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-in-left;
 }
 
-/* a header appearing or disappearing rides with its page instead of popping;
-   opacity overrides the pinned instant-swap defaults above */
 html[data-nav-direction="forward"][data-header-vt="exit"]::view-transition-old(app-header) {
   animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-out-left;
   opacity: 1;