chore: add patching, change fonts

2025-07-04 15:36:50 +02:00 · 2025-07-04 15:36:50 +02:00 · 804378e404
commit 804378e404
parent c63b42cae3
11 changed files with 222 additions and 164 deletions
--- a/bun.lock
+++ b/bun.lock
@ -6,6 +6,8 @@
      "dependencies": {
        "@better-fetch/fetch": "^1.1.18",
        "@elron/svelte-audio-store": "1.0.0",
+        "@fontsource/sora": "^5.2.6",
+        "@fontsource/space-mono": "^5.2.8",
        "@number-flow/svelte": "^0.3.9",
        "@tailwindcss/typography": "0.5.16",
        "@tauri-apps/api": "2.6.0",
@ -118,6 +120,10 @@

    "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],

+    "@fontsource/sora": ["@fontsource/sora@5.2.6", "", {}, "sha512-OPknOmn82HIJg32UGg9iEjEVFdC+xOZBqrmQNUgsem6hFwBBrqXnTwIpro7leq/uFRdupkN42hc0JJKH20j22w=="],
+
+    "@fontsource/space-mono": ["@fontsource/space-mono@5.2.8", "", {}, "sha512-25X0fg1+kxxLes9/c6AozhrrAuBW1uLaOL584IRg4DZxVxNOMzcS3mHS1UtmsyTwtU2HpiIt9Kv23Q+7xQO+hg=="],
+
    "@internationalized/date": ["@internationalized/date@3.8.2", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA=="],

    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
--- a/package.json
+++ b/package.json
@ -18,6 +18,8 @@
  "dependencies": {
    "@better-fetch/fetch": "^1.1.18",
    "@elron/svelte-audio-store": "1.0.0",
+    "@fontsource/sora": "^5.2.6",
+    "@fontsource/space-mono": "^5.2.8",
    "@number-flow/svelte": "^0.3.9",
    "@tailwindcss/typography": "0.5.16",
    "@tauri-apps/api": "2.6.0",
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@ -1085,6 +1085,7 @@ version = "0.1.0"
 dependencies = [
 "hardware-id",
 "md5",
+ "open",
 "reqwest",
 "serde",
 "serde_json",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -34,6 +34,7 @@ winapi = { version = "0.3", features = ["winuser"] }
 reqwest = { version = "0.12.22", features = ["json", "stream"] }
 md5 = "0.8.0"
 tokio = { version = "1.46.0", features = ["full"] }
+open = "5.3.2"

 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-single-instance = "2.3.0"
--- a/src/lib/osuUtil.ts
+++ b/src/lib/osuUtil.ts
@ -70,7 +70,7 @@ export const getSkin = async (folder: string) => {
 };

 export const runUpdater = async (folder: string) => await invoke('run_osu_updater', { folder });
-export const runOsu = async (folder: string) => await invoke('run_osu', { folder });
+export const runOsu = async (folder: string, patch: boolean) => await invoke('run_osu', { folder, patch });

 export const getEZPPLauncherUpdateFiles = async (folder: string) => {
  const result = await invoke('get_ezpp_launcher_update_files', { folder, updateUrl });
--- a/src/lib/userSettings.ts
+++ b/src/lib/userSettings.ts
@ -7,6 +7,7 @@ export const customCursor = writable<boolean>(false);
 export const cursorSmoothening = writable<boolean>(false);
 export const cursorSmoothness = writable<number>(180);
 export const reduceAnimations = writable<boolean>(false);
+export const patch = writable<boolean>(true);

 export const osuInstallationPath = writable<string>('');

--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -1,4 +1,5 @@
 import { createAudioStore } from '@elron/svelte-audio-store';
+import { invoke } from '@tauri-apps/api/core';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';

@ -93,3 +94,7 @@ export const formatBytes = (bytes: number, decimals = 2) => {

  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`;
 };
+
+export const openURL = async (url: string) => {
+  await invoke('open_url_in_browser', { url });
+};
--- a/src/pages/Launch.svelte
+++ b/src/pages/Launch.svelte
@ -40,6 +40,7 @@
    formatBytes,
    formatTimeReadable,
    numberHumanReadable,
+    openURL,
    releaseStreamToReadable,
  } from '@/utils';
  import { fade, scale } from 'svelte/transition';
@ -49,6 +50,7 @@
    cursorSmoothening,
    customCursor,
    osuInstallationPath,
+    patch,
    preferredMode,
    preferredType,
    reduceAnimations,
@ -86,6 +88,7 @@
    setUserConfigValues,
  } from '@/osuUtil';
  import { getCurrentWindow } from '@tauri-apps/api/window';
+  import { Heart } from 'radix-icons-svelte';

  let selectedTab = $state('home');
  let progress = $state(-1);
@ -296,7 +299,7 @@
      await replaceUIFiles(osuPath, false);
      await new Promise((res) => setTimeout(res, 1000));
      await getCurrentWindow().hide();
-      await runOsu(osuPath);
+      await runOsu(osuPath, true);
      launchInfo = 'Cleaning up...';
      await getCurrentWindow().show();
      await new Promise((res) => setTimeout(res, 1000));
@ -776,98 +779,113 @@
        <div class="flex flex-row items-center gap-3 font-semibold text-xl px-3 pt-3">
          <Settings2 /> EZPPLauncher Settings
        </div>
-        <div
-          class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6"
-        >
-          <div class="flex flex-col">
-            <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
-            <div class="text-muted-foreground text-xs">
-              Enable a custom cursor in the Launcher like in the lazer build of osu!
+        <div>
+          <div
+            class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 pt-4 pb-1 px-6"
+          >
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-custom-cursor">Patching</Label>
+              <div class="text-muted-foreground text-xs">Shows misses in Relax and Autopilot</div>
+            </div>
+            <Checkbox
+              id="setting-custom-cursor"
+              checked={$patch}
+              onCheckedChange={async (e) => {
+                patch.set(e);
+                $userSettings.save();
+              }}
+              class="flex items-center justify-center w-5 h-5"
+            ></Checkbox>
+
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
+              <div class="text-muted-foreground text-xs">
+                Enable a custom cursor in the Launcher like in the lazer build of osu!
+              </div>
+            </div>
+            <Checkbox
+              id="setting-custom-cursor"
+              checked={$customCursor}
+              onCheckedChange={async (e) => {
+                if (!e) {
+                  cursorSmoothening.set(false);
+                }
+                customCursor.set(e);
+
+                $userSettings.save();
+              }}
+              class="flex items-center justify-center w-5 h-5"
+            ></Checkbox>
+
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-cursor-smoothening">Cursor Smoothening</Label>
+              <div class="text-muted-foreground text-xs">
+                Makes the custom cursor movement smoother.
+              </div>
+            </div>
+            <Checkbox
+              id="setting-cursor-smoothening"
+              checked={$cursorSmoothening}
+              onCheckedChange={async (e) => {
+                if (!$customCursor) return;
+                cursorSmoothening.set(e);
+                $userSettings.save();
+              }}
+              disabled={!$customCursor}
+              class="flex items-center justify-center w-5 h-5"
+            ></Checkbox>
+
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-cursor-smoothening">Reduce Animations</Label>
+              <div class="text-muted-foreground text-xs">
+                Disables some animations in the Launcher to improve performance on low-end devices.
+              </div>
+            </div>
+            <Checkbox
+              id="setting-cursor-smoothening"
+              checked={$reduceAnimations}
+              onCheckedChange={async (e) => {
+                reduceAnimations.set(e);
+                $userSettings.save();
+              }}
+              disabled={!$customCursor}
+              class="flex items-center justify-center w-5 h-5"
+            ></Checkbox>
+          </div>
+          <div
+            class="grid grid-cols-[0.7fr_auto] gap-y-5 items-center border-theme-800 pl-6 pr-5 pb-4"
+          >
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-custom-cursor">osu! installation path</Label>
+              <div class="text-muted-foreground text-xs">The path to your osu! installation.</div>
+            </div>
+            <div class="flex flex-row w-full">
+              <Input
+                class="mt-4 w-full bg-theme-950 border-theme-800 border-r-0 rounded-r-none"
+                type="text"
+                value={$osuInstallationPath}
+                placeholder="Path to osu! installation"
+                readonly
+              />
+              <Button
+                class="mt-4 bg-theme-950 border-theme-800 rounded-l-none"
+                variant="outline"
+                onclick={browse_osu_installation}>Browse</Button
+              >
            </div>
          </div>
-          <Checkbox
-            id="setting-custom-cursor"
-            checked={$customCursor}
-            onCheckedChange={async (e) => {
-              if (!e) {
-                cursorSmoothening.set(false);
-              }
-              customCursor.set(e);
-
-              $userSettings.save();
-            }}
-            class="flex items-center justify-center w-5 h-5"
-          ></Checkbox>
-
-          <div class="flex flex-col">
-            <Label class="text-sm" for="setting-cursor-smoothening">Cursor Smoothening</Label>
-            <div class="text-muted-foreground text-xs">
-              Makes the custom cursor movement smoother.
-            </div>
-          </div>
-          <Checkbox
-            id="setting-cursor-smoothening"
-            checked={$cursorSmoothening}
-            onCheckedChange={async (e) => {
-              if (!$customCursor) return;
-              cursorSmoothening.set(e);
-              $userSettings.save();
-            }}
-            disabled={!$customCursor}
-            class="flex items-center justify-center w-5 h-5"
-          ></Checkbox>
-
-          <div class="flex flex-col">
-            <Label class="text-sm" for="setting-cursor-smoothening">Reduce Animations</Label>
-            <div class="text-muted-foreground text-xs">
-              Disables some animations in the Launcher to improve performance on low-end devices.
-            </div>
-          </div>
-          <Checkbox
-            id="setting-cursor-smoothening"
-            checked={$reduceAnimations}
-            onCheckedChange={async (e) => {
-              reduceAnimations.set(e);
-              $userSettings.save();
-            }}
-            disabled={!$customCursor}
-            class="flex items-center justify-center w-5 h-5"
-          ></Checkbox>
        </div>
      </div>
-      <div
-        class="bg-theme-900/90 flex flex-col justify-center gap-3 border border-theme-800/90 rounded-lg"
-        in:scale={{
-          duration: $reduceAnimations ? 0 : 400,
-          delay: $reduceAnimations ? 0 : 50,
-          start: 0.98,
-        }}
-      >
-        <div class="flex flex-row items-center gap-3 font-semibold text-xl px-3 pt-3">
-          <Settings2 /> osu! Settings
-        </div>
-        <div
-          class="grid grid-cols-[0.7fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6"
+      <div class="mt-auto mx-auto flex flex-row items-center gap-2">
+        <Button
+          variant="link"
+          class="font-semibold font-mono text-sm text-theme-100/70"
+          onclick={() => openURL('https://ez-pp.farm/u/1001')}
        >
-          <div class="flex flex-col">
-            <Label class="text-sm" for="setting-custom-cursor">osu! installation path</Label>
-            <div class="text-muted-foreground text-xs">The path to your osu! installation.</div>
-          </div>
-          <div class="flex flex-row w-full">
-            <Input
-              class="mt-4 w-full bg-theme-950 border-theme-800 border-r-0 rounded-r-none"
-              type="text"
-              value={$osuInstallationPath}
-              placeholder="Path to osu! installation"
-              readonly
-            />
-            <Button
-              class="mt-4 bg-theme-950 border-theme-800 rounded-l-none"
-              variant="outline"
-              onclick={browse_osu_installation}>Browse</Button
-            >
-          </div>
-        </div>
+          made with
+          <Heart class="text-red-600 animate-pulse" />
+          by horizoncode
+        </Button>
      </div>
    {/if}
  </div>
--- a/src/pages/SetupWizard.svelte
+++ b/src/pages/SetupWizard.svelte
@ -12,6 +12,7 @@
    cursorSmoothening,
    customCursor,
    osuInstallationPath,
+    patch,
    reduceAnimations,
    userSettings,
  } from '@/userSettings';
@ -250,6 +251,20 @@
          <div
            class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6"
          >
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-custom-cursor">Patching</Label>
+              <div class="text-muted-foreground text-xs">Shows misses in Relax and Autopilot</div>
+            </div>
+            <Checkbox
+              id="setting-custom-cursor"
+              checked={$patch}
+              onCheckedChange={async (e) => {
+                patch.set(e);
+                $userSettings.save();
+              }}
+              class="flex items-center justify-center w-5 h-5"
+            ></Checkbox>
+
            <div class="flex flex-col">
              <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
              <div class="text-muted-foreground text-xs">
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -8,12 +8,17 @@
    cursorSmoothening,
    customCursor,
    osuInstallationPath,
+    patch,
    reduceAnimations,
    userSettings,
  } from '@/userSettings';
  import { Buffer } from 'buffer';
  import { Toaster } from '@/components/ui/sonner';
  import { userAuth } from '@/userAuthentication';
+
+  import '@fontsource/sora';
+  import '@fontsource/space-mono';
+
  let { children } = $props();

  function disableReload() {
@ -72,16 +77,19 @@
    $userAuth.init();

    currentLoadingInfo.set('Loading config...');
+    const config_patching = $userSettings.value('patching');
    const config_custom_cursor = $userSettings.value('custom_cursor');
    const config_cursor_smoothening = $userSettings.value('cursor_smoothening');
    const config_reduce_animations = $userSettings.value('reduce_animations');
    const config_osu_installation_path = $userSettings.value('osu_installation_path');

+    patch.set(config_patching.get(true));
    customCursor.set(config_custom_cursor.get(true));
    cursorSmoothening.set(config_cursor_smoothening.get(true));
    reduceAnimations.set(config_reduce_animations.get(false));
    osuInstallationPath.set(config_osu_installation_path.get(''));

+    patch.subscribe((val) => config_patching.set(val));
    customCursor.subscribe((val) => config_custom_cursor.set(val));
    cursorSmoothening.subscribe((val) => config_cursor_smoothening.set(val));
    reduceAnimations.subscribe((val) => config_reduce_animations.set(val));
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,117 +1,118 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
-import type { Config } from "tailwindcss";
-import tailwindcssAnimate from "tailwindcss-animate";
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';

 const config: Config = {
-  darkMode: "class",
-  content: ["./src/**/*.{html,js,svelte,ts}"],
-  safelist: ["dark"],
+  darkMode: 'class',
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  safelist: ['dark'],
  theme: {
    container: {
      center: true,
-      padding: "2rem",
+      padding: '2rem',
      screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        theme: {
-          DEFAULT: "#181825",
-          50: "#E9E9F1",
-          100: "#DBDBE8",
-          200: "#BFBFD6",
-          300: "#A4A4C4",
-          400: "#8888B2",
-          500: "#6C6CA0",
-          600: "#575786",
-          700: "#45456B",
-          800: "#33334F",
-          900: "#212133",
-          950: "#181825",
+          DEFAULT: '#181825',
+          50: '#E9E9F1',
+          100: '#DBDBE8',
+          200: '#BFBFD6',
+          300: '#A4A4C4',
+          400: '#8888B2',
+          500: '#6C6CA0',
+          600: '#575786',
+          700: '#45456B',
+          800: '#33334F',
+          900: '#212133',
+          950: '#181825',
        },
-        border: "hsl(var(--border) / <alpha-value>)",
-        input: "hsl(var(--input) / <alpha-value>)",
-        ring: "hsl(var(--ring) / <alpha-value>)",
-        background: "hsl(var(--background) / <alpha-value>)",
-        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        border: 'hsl(var(--border) / <alpha-value>)',
+        input: 'hsl(var(--input) / <alpha-value>)',
+        ring: 'hsl(var(--ring) / <alpha-value>)',
+        background: 'hsl(var(--background) / <alpha-value>)',
+        foreground: 'hsl(var(--foreground) / <alpha-value>)',
        primary: {
-          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-          50: "#FEFDFF",
-          100: "#FAF6FE",
-          200: "#F2E9FC",
-          300: "#E9DBFA",
-          400: "#E1CEF9",
-          500: "#D9C0F7",
-          600: "#C6A0F3",
-          700: "#B381EF",
-          800: "#A061EB",
-          900: "#8D41E7",
-          950: "#8331E5",
-          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+          50: '#FEFDFF',
+          100: '#FAF6FE',
+          200: '#F2E9FC',
+          300: '#E9DBFA',
+          400: '#E1CEF9',
+          500: '#D9C0F7',
+          600: '#C6A0F3',
+          700: '#B381EF',
+          800: '#A061EB',
+          900: '#8D41E7',
+          950: '#8331E5',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
        },
        secondary: {
-          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
        },
        destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
        },
        muted: {
-          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
        },
        accent: {
-          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
        },
        popover: {
-          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
+          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
        },
        card: {
-          DEFAULT: "hsl(var(--card) / <alpha-value>)",
-          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
        },
        sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
        },
      },
      borderRadius: {
-        xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
-        sans: [...fontFamily.sans],
+        sans: ['"Sora"', ...fontFamily.sans],
+        mono: ['"Space Mono"', ...fontFamily.mono],
      },
      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--bits-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--bits-accordion-content-height)' },
        },
-        "accordion-up": {
-          from: { height: "var(--bits-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--bits-accordion-content-height)' },
+          to: { height: '0' },
        },
-        "caret-blink": {
-          "0%,70%,100%": { opacity: "1" },
-          "20%,50%": { opacity: "0" },
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' },
        },
      },
      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
      },
    },
  },