From c23b7abca47bb7b77f5ee3a2925c97df3861ac70 Mon Sep 17 00:00:00 2001
From: Benjy <ben@pngs.cc>
Date: Sun, 30 Jun 2024 15:35:40 +0800
Subject: [PATCH] fix: blur bg

---
 package.json                         | 3 ++-
 src/features/go-to-date/GotoDate.tsx | 2 +-
 src/output.css                       | 6 ++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index bab5f2e..963146c 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   "scripts": {
     "dev": "npx vite",
     "build": "npx tsc && npx vite build",
-    "preview": "npx vite preview"
+    "preview": "npx vite preview",
+    "build:css": "npx tailwindcss -i ./src/tailwind.css -o ./src/output.css"
   },
   "release": {
     "branches": [
diff --git a/src/features/go-to-date/GotoDate.tsx b/src/features/go-to-date/GotoDate.tsx
index a414073..1ea9641 100644
--- a/src/features/go-to-date/GotoDate.tsx
+++ b/src/features/go-to-date/GotoDate.tsx
@@ -42,7 +42,7 @@ export const GotoDate = () => {
   }
 
   return (
-    <div className="search-container p-3 w-full flex justify-center content-center h-screen">
+    <div className="search-container p-3 w-full flex justify-center content-center h-screen backdrop-blur-md">
       <input
         className="search-field rounded-lg w-[70%] h-12 text-gray-700 py-1 px-2 caret-black-800 border-2 border-black m-auto"
         autoFocus
diff --git a/src/output.css b/src/output.css
index 6ee36dc..1d7bb93 100644
--- a/src/output.css
+++ b/src/output.css
@@ -621,3 +621,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
+
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}