fix: blur bg

benjypng · Jun 30, 2024 · c23b7ab · c23b7ab
1 parent 6962d74
commit c23b7ab
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
+}