css fixes

.vitepress/config.mts

@@ -58,7 +58,12 @@ export default defineConfig({
 
   themeConfig: {
     search: {
-      provider: 'local'
+      provider: 'local',
+      // options: {
+      //   appId: 'DHC900L06Z',
+      //   apiKey: '31c0bbd55f94c659a48a53a671bb8971',
+      //   indexName: 'fabric'
+      // }
     },
 
     logo: "/icon.png",

.vitepress/theme/style.css

@@ -70,6 +70,44 @@
   --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--vp-c-bg-alt);
+}
+
+.VPNavBar:not(.top):not(.has-sidebar) {
+  border-bottom: none !important;
+  animation: nav-box-shadow 200ms ease-out forwards;
+}
+
+.VPNavBar.top:not(.has-sidebar) {
+  animation: nav-box-shadow-fade-out 200ms ease-out forwards;
+}
+
+@keyframes nav-box-shadow {
+  100% {
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
+  }
+}
+
+@keyframes nav-box-shadow-fade-out {
+  0% {
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
+  }
+  100% {
+    box-shadow: none;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 10px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */
@@ -152,20 +190,43 @@ p > img {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
 }
 
-button,
 .VPButton,
 .custom-block,
 div[class*="language-"],
 .VPTeamMembersItem,
 .pager-link,
-.VPFeature {
+.VPFeature,
+.VPLocalSearchBox > .shell {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
 }
 
+.VPLocalSearchBox > .backdrop {
+  backdrop-filter: blur(5px);
+}
+
 .pager-link {
   background-color: var(--vp-c-bg-alt);
 }
 
 .VPFooter {
   border-top: none !important;
 }
+
+.VPLocalSearchBox > .backdrop {
+  opacity: 0;
+  animation: show 200ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+}
+
+.VPLocalSearchBox > .shell {
+  animation: show 400ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+  opacity: 0;
+  transform: rotateX(-90deg);
+  transform-origin: top center;
+}
+
+@keyframes show {
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}