From 6aff5f8b5a8021c37426cf2a5569c73721c68b25 Mon Sep 17 00:00:00 2001
From: Bruno <72168158+bcostaaa01@users.noreply.github.com>
Date: Fri, 9 Jan 2026 22:57:58 +0100
Subject: [PATCH] feat: add cool and smooth transition when opening the "smart
 search" (the Algolia search bar)

- change the node_modules CSS to improve the styles of the VPNavBarSearch component
---
 .../theme/styles/docsearch-transitions.css    | 135 ++++++++++++++++++
 .vitepress/theme/styles/index.css             |   1 +
 2 files changed, 136 insertions(+)
 create mode 100644 .vitepress/theme/styles/docsearch-transitions.css

diff --git a/.vitepress/theme/styles/docsearch-transitions.css b/.vitepress/theme/styles/docsearch-transitions.css
new file mode 100644
index 0000000000..ee57aa2f13
--- /dev/null
+++ b/.vitepress/theme/styles/docsearch-transitions.css
@@ -0,0 +1,135 @@
+/* Smooth transitions for Algolia DocSearch modal */
+/* Similar to vue-bits style with smooth fade and scale animations */
+
+/* Container overlay fade-in */
+.DocSearch-Container {
+  animation: docsearch-fade-in 0.2s ease-out;
+}
+
+/* Modal scale and fade animation - smooth entrance */
+.DocSearch-Modal {
+  animation: docsearch-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: center center;
+}
+
+/* Backdrop fade-in */
+.DocSearch-Container::before {
+  animation: docsearch-backdrop-fade-in 0.2s ease-out;
+}
+
+/* Keyframe animations */
+@keyframes docsearch-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes docsearch-modal-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes docsearch-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Smooth exit animations (when closing) */
+.DocSearch-Container.DocSearch-Container--Stalled .DocSearch-Modal,
+.DocSearch-Container[aria-hidden="true"] .DocSearch-Modal {
+  animation: docsearch-modal-out 0.2s ease-in forwards;
+}
+
+@keyframes docsearch-modal-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(-8px);
+  }
+}
+
+/* Ensure smooth transitions for search input focus */
+.DocSearch-Input {
+  transition: all 0.2s ease-out;
+}
+
+.DocSearch-Input:focus {
+  transition: all 0.2s ease-out;
+}
+
+/* Smooth transitions for search results */
+.DocSearch-Hits {
+  animation: docsearch-hits-in 0.3s ease-out 0.1s both;
+}
+
+@keyframes docsearch-hits-in {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Individual hit item stagger animation for smooth list appearance */
+.DocSearch-Hit {
+  animation: docsearch-hit-in 0.2s ease-out both;
+}
+
+.DocSearch-Hit:nth-child(1) {
+  animation-delay: 0.05s;
+}
+
+.DocSearch-Hit:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.DocSearch-Hit:nth-child(3) {
+  animation-delay: 0.15s;
+}
+
+.DocSearch-Hit:nth-child(4) {
+  animation-delay: 0.2s;
+}
+
+.DocSearch-Hit:nth-child(5) {
+  animation-delay: 0.25s;
+}
+
+.DocSearch-Hit:nth-child(n+6) {
+  animation-delay: 0.3s;
+}
+
+@keyframes docsearch-hit-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Smooth transition for footer */
+.DocSearch-Footer {
+  animation: docsearch-fade-in 0.3s ease-out 0.2s both;
+}
diff --git a/.vitepress/theme/styles/index.css b/.vitepress/theme/styles/index.css
index 8bd6bb8cfe..0d00406c76 100644
--- a/.vitepress/theme/styles/index.css
+++ b/.vitepress/theme/styles/index.css
@@ -5,3 +5,4 @@
 @import "./utilities.css";
 @import "./style-guide.css";
 @import "./vars.css";
+@import "./docsearch-transitions.css";