From a0c303bc4c341c30be5f3d1bd882fda3fe5e075f Mon Sep 17 00:00:00 2001
From: wangshunnn <wangshunnn@gmail.com>
Date: Fri, 17 Jan 2025 14:50:39 +0800
Subject: [PATCH] docs: update consfig & style

---
 docs-vitepress/.vitepress/config.ts           | 98 +++++++++++++------
 .../.vitepress/theme/components/CodeList.vue  |  2 +-
 .../theme/components/MobileSwiper.vue         |  9 +-
 .../theme/components/MobileView.vue           | 62 ++++++------
 .../.vitepress/theme/components/Navbar.vue    |  5 +-
 .../.vitepress/theme/components/Swiper.vue    |  6 +-
 .../.vitepress/theme/components/SwiperImg.vue |  2 +-
 .../theme/global-components/Content.vue       | 14 +--
 .../.vitepress/theme/styles/index.css         | 27 +++++
 docs-vitepress/api/ApiIndex.vue               | 55 ++---------
 10 files changed, 154 insertions(+), 126 deletions(-)

diff --git a/docs-vitepress/.vitepress/config.ts b/docs-vitepress/.vitepress/config.ts
index a3870bc392..a33b3513f7 100644
--- a/docs-vitepress/.vitepress/config.ts
+++ b/docs-vitepress/.vitepress/config.ts
@@ -207,6 +207,55 @@ const sidebar = {
     ],
 }
 
+const algoliaTranslations = {
+    button: {
+        buttonText: "搜索",
+    },
+    modal: {
+        searchBox: {
+            resetButtonTitle: "清除查询条件",
+            resetButtonAriaLabel: "清除查询条件",
+            cancelButtonText: "取消",
+            cancelButtonAriaLabel: "取消",
+        },
+        startScreen: {
+            recentSearchesTitle: "搜索历史",
+            noRecentSearchesText: "没有搜索历史",
+            saveRecentSearchButtonTitle: "保存到搜索历史",
+            removeRecentSearchButtonTitle: "从搜索历史中移除",
+            favoriteSearchesTitle: "收藏",
+            removeFavoriteSearchButtonTitle: "从收藏中移除",
+        },
+        errorScreen: {
+            titleText: "无法获取结果",
+            helpText: "你可能需要检查你的网络连接",
+        },
+        footer: {
+            selectText: "选择",
+            navigateText: "切换",
+            closeText: "关闭",
+            searchByText: "搜索供应商",
+        },
+        noResultsScreen: {
+            noResultsText: "无法找到相关结果",
+            suggestedQueryText: "你可以尝试查询",
+            reportMissingResultsText: "你认为这个查询应该有结果？",
+            reportMissingResultsLinkText: "向我们反馈",
+        },
+    },
+}
+
+const i18n = {
+    search: '搜索',
+    menu: '菜单',
+    toc: '本页目录',
+    returnToTop: '返回顶部',
+    appearance: '外观',
+    previous: '前一篇',
+    next: '下一篇',
+    pageNotFound: '页面未找到',
+}
+
 const ogUrl = "https://mpxjs.cn/"
 const ogImage = `${ogUrl}logo.png`
 const title = "Mpx 框架"
@@ -256,24 +305,6 @@ export default withPwa(
                 short_name: "Mpx",
                 description,
                 theme_color: "#ffffff",
-                // icons: [
-                //     {
-                //         src: 'pwa-192x192.png',
-                //         sizes: '192x192',
-                //         type: 'image/png',
-                //     },
-                //     {
-                //         src: 'pwa-512x512.png',
-                //         sizes: '512x512',
-                //         type: 'image/png',
-                //     },
-                //     {
-                //         src: 'pwa-512x512.png',
-                //         sizes: '512x512',
-                //         type: 'image/png',
-                //         purpose: 'any maskable',
-                //     },
-                // ],
             },
             workbox: {
                 globPatterns: ["**/*.{css,js,html,svg,png,ico,txt,woff2}"],
@@ -292,21 +323,9 @@ export default withPwa(
                 apiKey: "a34809e24ae1eb13ca3afc255d0a0cef",
                 indexName: "mpxjs",
                 placeholder: "搜索文档",
-                translations: {
-                    button: {
-                        buttonText: "搜索",
-                    },
-                },
+                translations: algoliaTranslations,
             },
             logo: "/favicon.ico",
-            docFooter: {
-                prev: "上一页",
-                next: "下一页",
-            },
-            outline: {
-                level: [2, 3],
-                label: "本页目录",
-            },
             socialLinks: [
                 { icon: "github", link: "https://github.com/didi/mpx" },
             ],
@@ -338,7 +357,24 @@ export default withPwa(
                     target: "_blank",
                 },
             ],
+            outline: {
+                level: [2, 3],
+                label: "本页目录",
+            },
             sidebar,
+            darkModeSwitchLabel: "外观",
+            sidebarMenuLabel: "菜单",
+            returnToTopLabel: "返回顶部",
+            langMenuLabel: "语言",
+            notFound: {
+                title: "页面未找到",
+                linkText: "返回首页",
+                quote: "😩 抱歉，迷路了～"
+            },
+            docFooter: {
+                prev: "上一页",
+                next: "下一页",
+            },
         },
         // @ts-ignore
         chainWebpack: (config) => {
diff --git a/docs-vitepress/.vitepress/theme/components/CodeList.vue b/docs-vitepress/.vitepress/theme/components/CodeList.vue
index ac50a20d70..9d13f6c604 100644
--- a/docs-vitepress/.vitepress/theme/components/CodeList.vue
+++ b/docs-vitepress/.vitepress/theme/components/CodeList.vue
@@ -9,7 +9,7 @@
           </transition>
         </div>
       </popover> -->
-      <img width="150" height="170" :src="item.code" alt="code" loading="lazy" />
+      <img width="150" style="height: 170px;" :src="item.code" alt="code" loading="lazy" />
     </div>
   </div>
 </template>
diff --git a/docs-vitepress/.vitepress/theme/components/MobileSwiper.vue b/docs-vitepress/.vitepress/theme/components/MobileSwiper.vue
index 3d7c7ac4b0..7ec8c9eb3b 100644
--- a/docs-vitepress/.vitepress/theme/components/MobileSwiper.vue
+++ b/docs-vitepress/.vitepress/theme/components/MobileSwiper.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="swiper-container" ref="container" :style="getStyle">
-    <div class="swiper" :style="getMode" ref="wrapper" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
+    <div class="swiper" ref="wrapper" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
       <div
         ref="list"
         class="swiper-list"
@@ -59,9 +59,6 @@ export default {
     getStyle () {
       return `height: ${this.height}px;`
     },
-    getMode () {
-      return this.isMove ? 'transition: transform 0s;' : 'transition: transform 0.3s;'
-    },
     getWidth () {
       return `width: ${this.offsetWidth}px;`
     }
@@ -149,6 +146,7 @@ export default {
       const moveX = touch.clientX - this.touchInfo.clientX
       const distance = this.current * this.offsetWidth  - moveX
       wrapper.style.transform = `translateX(${-distance}px)`
+      wrapper.style.transition = 'transform 0s'
       this.touchInfo.moveX = moveX
     },
     handleEnd () {
@@ -174,6 +172,7 @@ export default {
         }
       }
       const wrapper = this.$refs.wrapper
+      wrapper.style.transition = 'transform 0.3s'
       switch (nextPage) {
         case 0:
           wrapper.style.transform = `translateX(${-this.current * this.offsetWidth}px)`
@@ -209,7 +208,7 @@ export default {
   white-space nowrap
   transform translateX(0)
   display inline-block
-  // transition transform 0.3s
+  transition transform 0.3s
 .swiper-list
   width 100%
   // height 132px
diff --git a/docs-vitepress/.vitepress/theme/components/MobileView.vue b/docs-vitepress/.vitepress/theme/components/MobileView.vue
index 9b2b1ea667..a691f844e0 100644
--- a/docs-vitepress/.vitepress/theme/components/MobileView.vue
+++ b/docs-vitepress/.vitepress/theme/components/MobileView.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="m-banner-wrapper">
     <div class="m-banner">
-      <div class="m-title">{{ $page.frontmatter.heroText }}</div>
+      <div class="m-title">{{ $frontmatter.heroText }}</div>
       <div class="m-subtitle">
-        {{ $page.frontmatter.tagline }}
+        {{ $frontmatter.tagline }}
       </div>
 
       <div class="m-banner-btn-wrapper">
         <button class="m-banner-btn m-banner-btn-enter">
-          <a style="font-size: 15px;" :href="$page.frontmatter.actionLink">
-            {{ $page.frontmatter.actionText }}
+          <a style="font-size: 15px;" :href="$frontmatter.actionLink">
+            {{ $frontmatter.actionText }}
           </a>
         </button>
         <div class="m-banner-btn m-banner-btn-jump">
-          <a class="white-link" :href="$page.frontmatter.githubLink">
-            {{ $page.frontmatter.githubText }}
+          <a class="white-link" :href="$frontmatter.githubLink">
+            {{ $frontmatter.githubText }}
           </a>
         </div>
       </div>
@@ -24,7 +24,7 @@
     <div class="m-advantages">
       <li
         class="m-advan-section"
-        v-for="(item, index) in $page.frontmatter.features"
+        v-for="(item, index) in $frontmatter.features"
         :key="index"
       >
         <img
@@ -32,14 +32,14 @@
           :src="item.micon"
           loading="lazy"
           width="34"
-          height="34"
+          style="height: 34px;"
         />
         <p class="m-advan-section-title">{{ item.title }}</p>
       </li>
     </div>
 
     <div class="mdemo-wrapper">
-      <div class="mdemo-title">{{ $page.frontmatter.threeSection.title }}</div>
+      <div class="mdemo-title">{{ $frontmatter.threeSection.title }}</div>
       <p class="mdemo-subtitle">
         扫码体验Mpx版本的
         <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
@@ -48,58 +48,58 @@
         进入查看。
       </p>
       <!-- <a class="mdemo-btn" href="/">
-        {{ $page.frontmatter.threeSection.actionText }}
+        {{ $frontmatter.threeSection.actionText }}
       </a> -->
       <div class="mdemo-icon-wrapper">
         <div style="margin: 0 6px;" v-for="(item, index) in mvcList" :key="index">
-          <img width="130" height="150" :src="item.code" alt="code" loading="lazy" />
+          <img width="130" style="height: 150px;" :src="item.code" alt="code" loading="lazy" />
         </div>
       </div>
     </div>
 
     <div class="m-feature-wrapper">
       <div class="m-feature-title">
-        {{ $page.frontmatter.fourSection.title }}
+        {{ $frontmatter.fourSection.title }}
       </div>
       <div class="m-feature-subtitle">
-        {{ $page.frontmatter.fourSection.details }}
+        {{ $frontmatter.fourSection.details }}
       </div>
-      <a class="m-feature-btn" :href="$page.frontmatter.fourSection.actionLink">
-        {{ $page.frontmatter.fourSection.actionText }}
+      <a class="m-feature-btn" :href="$frontmatter.fourSection.actionLink">
+        {{ $frontmatter.fourSection.actionText }}
       </a>
       <img
         class="m-feature-pic"
         width="100%"
-        height="309px"
-        :src="$page.frontmatter.fourSection.mimg"
+        style="height: 309px;"
+        :src="$frontmatter.fourSection.mimg"
         alt="platform"
         loading="lazy"
       />
 
       <div class="m-feature-title">
-        {{ $page.frontmatter.fiveSection.title }}
+        {{ $frontmatter.fiveSection.title }}
       </div>
       <div class="m-feature-subtitle">
-        {{ $page.frontmatter.fiveSection.details }}
+        {{ $frontmatter.fiveSection.details }}
       </div>
-      <a class="m-feature-btn" :href="$page.frontmatter.fourSection.actionLink">
-        {{ $page.frontmatter.fiveSection.actionText }}
+      <a class="m-feature-btn" :href="$frontmatter.fourSection.actionLink">
+        {{ $frontmatter.fiveSection.actionText }}
       </a>
       <img
         class="m-feature-pic"
         width="100%"
-        height="309px"
-        :src="$page.frontmatter.fiveSection.mimg"
+        style="height: 309px;"
+        :src="$frontmatter.fiveSection.mimg"
         alt="platform"
         loading="lazy"
       />
     </div>
 
     <div class="m-util-wrapper">
-      <div class="m-util-title">{{$page.frontmatter.sixSection.title}}</div>
+      <div class="m-util-title">{{$frontmatter.sixSection.title}}</div>
       <ul class="row six-section__row" v-for="(item, index) in list" :key="index">
         <a :href="item.actionLink" class="six-section__item six-section__step">
-          <img class="six-section__icon" :src="item.icon" alt="svg" loading="lazy" width="50" height="50" />
+          <img class="six-section__icon" :src="item.icon" alt="svg" loading="lazy" width="50" style="height: 50px;" />
           <div class="six-section__list">
             <div class="six-section__bold">{{item.title}}</div>
             <div class="six-section__subtitle">{{item.details}}</div>
@@ -109,11 +109,11 @@
     </div>
 
     <div class="m-example-wrapper">
-      <div class="m-example-title">{{$page.frontmatter.sevenSection.title}}</div>
+      <div class="m-example-title">{{$frontmatter.sevenSection.title}}</div>
         <div class="m-example-phone">
           <img
               width="318"
-              height="318"
+              style="height: 318px;"
               src="https://dpubstatic.udache.com/static/dpubimg/xxjYvzgJdt/y_bg_phone.png"
               alt="phone"/>
           <div class="m-example-img-contain">
@@ -155,10 +155,10 @@ export default {
   },
   computed: {
     list () {
-      return this.$page.frontmatter.sixSection.details
+      return this.$frontmatter.sixSection.details
     },
     multiList () {
-      const list = this.$page.frontmatter.sevenSection.details
+      const list = this.$frontmatter.sevenSection.details
       const result = []
       let temp = []
       for (let i = 0; i < list.length; i++) {
@@ -172,11 +172,11 @@ export default {
       return result
     },
     mvcList() {
-      const list = this.$page.frontmatter.threeSection.list
+      const list = this.$frontmatter.threeSection.list
       return list
     },
     dataList () {
-      const list = this.$page.frontmatter.sevenSection.details
+      const list = this.$frontmatter.sevenSection.details
       return list
     }
   },
diff --git a/docs-vitepress/.vitepress/theme/components/Navbar.vue b/docs-vitepress/.vitepress/theme/components/Navbar.vue
index 67e13ff6a3..637dbe241e 100644
--- a/docs-vitepress/.vitepress/theme/components/Navbar.vue
+++ b/docs-vitepress/.vitepress/theme/components/Navbar.vue
@@ -2,12 +2,12 @@
   <header class="header">
     <div class="header-menu" v-if="smallMode">
       <a href="/">
-        <img style="vertical-align: middle;" height="20" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png" alt="logo">
+        <img style="vertical-align: middle;height: 20px;" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png" alt="logo">
       </a>
       <div style="display: flex; align-items: center;">
         <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
         <span class="header-menu-icon">
-          <img @click="toggleSidebar" height="14" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png" alt="menu">
+          <img @click="toggleSidebar" style="height: 14px;" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png" alt="menu">
         </span>
       </div>
     </div>
@@ -147,6 +147,7 @@ export default {
 
 .header-menu {
   width: 100%;
+  height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/docs-vitepress/.vitepress/theme/components/Swiper.vue b/docs-vitepress/.vitepress/theme/components/Swiper.vue
index a48e1347ce..5c0f381148 100644
--- a/docs-vitepress/.vitepress/theme/components/Swiper.vue
+++ b/docs-vitepress/.vitepress/theme/components/Swiper.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="swiper-container">
     <div class="swiper-button">
-      <img :class="leftButtonDisabled" class="swiper-img" @click="handlePrev" src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" height="50" alt="left" loading="lazy" />
+      <img :class="leftButtonDisabled" class="swiper-img" @click="handlePrev" src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" style="height: 50px;" alt="left" loading="lazy" />
     </div>
     <div class="swiper" ref="wrapper">
       <div
@@ -13,14 +13,14 @@
         @transitionend="handleEnd">
         <div class="swiper-item">
           <div>
-            <div><img width="80" height="80" :src="item.img" alt="二维码" loading="lazy" /></div>
+            <div><img width="80" style="height: 80px;" :src="item.img" alt="二维码" loading="lazy" /></div>
             <div>{{item.title}}</div>
           </div>
         </div>
       </div>
     </div>
     <div class="swiper-button">
-      <img :class="rightButtonDisabled" class="swiper-img" @click="handleNext" src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" height="50" alt="right" loading="lazy" />
+      <img :class="rightButtonDisabled" class="swiper-img" @click="handleNext" src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" style="height: 50px;" alt="right" loading="lazy" />
     </div>
   </div>
 </template>
diff --git a/docs-vitepress/.vitepress/theme/components/SwiperImg.vue b/docs-vitepress/.vitepress/theme/components/SwiperImg.vue
index c2409843d3..319a44930d 100644
--- a/docs-vitepress/.vitepress/theme/components/SwiperImg.vue
+++ b/docs-vitepress/.vitepress/theme/components/SwiperImg.vue
@@ -2,7 +2,7 @@
   <div class="swiper-img">
     <div class="swiper-img__list" :style="getStyle">
       <div class="swiper-img__wrap" v-for="(item, index) in dataList" :key="index">
-        <img width="188" height="410" :src="item.demo" alt="img" loading="lazy" />
+        <img width="188" style="height: 410px;" :src="item.demo" alt="img" loading="lazy" />
       </div>
     </div>
   </div>
diff --git a/docs-vitepress/.vitepress/theme/global-components/Content.vue b/docs-vitepress/.vitepress/theme/global-components/Content.vue
index d56897d0db..67644b55df 100644
--- a/docs-vitepress/.vitepress/theme/global-components/Content.vue
+++ b/docs-vitepress/.vitepress/theme/global-components/Content.vue
@@ -30,7 +30,7 @@
     <section class="two-section">
       <ul class="row">
         <li class="two-section__item" v-for="(item, index) in $frontmatter.features" :key="index">
-          <img :src="item.icon" alt="svg" loading="lazy" width="80" height="80" />
+          <img :src="item.icon" alt="svg" loading="lazy" width="80" style="height: 80px;" />
           <p class="two-section__title">{{item.title}}</p>
           <p class="two-section__desc">{{item.details}}</p>
           <div class="two-section__line"></div>
@@ -46,7 +46,7 @@
             <div class="three-section__phone">
               <img
                   width="410"
-                  height="712"
+                  style="height: 712px;"
                   src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png"
                   alt="phone"
                   loading="lazy" />
@@ -68,7 +68,7 @@
             <span class="dot-inner" style="background: #fff; margin: 0 auto;"></span>
             <p class="white-text title">{{$frontmatter.threeSection.title}}</p>
             <p class="white-text desc">
-              <!-- {{$page.frontmatter.threeSection.details}} -->
+              <!-- {{$frontmatter.threeSection.details}} -->
               扫码体验Mpx版本的
               <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
               在各个小程序平台和web中的一致表现 ，更多示例项目可点击
@@ -77,8 +77,8 @@
             </p>
           </div>
           <!-- <button class="three-section__btn btn">
-            <a :href="$page.frontmatter.threeSection.actionLink" class="blue-link">
-              {{$page.frontmatter.threeSection.actionText}}
+            <a :href="$frontmatter.threeSection.actionLink" class="blue-link">
+              {{$frontmatter.threeSection.actionText}}
             </a>
           </button> -->
           <code-list :dataList="mvcList"></code-list>
@@ -160,7 +160,7 @@
           <li v-for="(item, index) in current" :key="index">
             <a :href="item.actionLink" class="six-section__item six-section__step">
               <div class="six-section__icon">
-                <img :src="item.icon" alt="svg" loading="lazy" width="50" height="50" />
+                <img :src="item.icon" alt="svg" loading="lazy" width="50" style="height: 50px;" />
               </div>
               <div class="six-section__list">
                 <div class="six-section__bold">{{item.title}}</div>
@@ -188,7 +188,7 @@
           <div class="seven-section_phone">
             <img
               width="213"
-              height="433"
+              style="height: 433px;"
               src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png"
               alt="phone"
               loading="lazy" />
diff --git a/docs-vitepress/.vitepress/theme/styles/index.css b/docs-vitepress/.vitepress/theme/styles/index.css
index 5f94ccf351..009d77f95f 100644
--- a/docs-vitepress/.vitepress/theme/styles/index.css
+++ b/docs-vitepress/.vitepress/theme/styles/index.css
@@ -35,6 +35,12 @@
     }
 }
 
+.VPNavBarAppearance {
+    .VPSwitch:hover {
+        border: 1px solid var(--vt-c-brand) !important;
+    }
+}
+
 .VPNavBarMenuLink:hover {
     color: var(--vt-c-brand-highlight) !important;
 }
@@ -44,6 +50,12 @@
     border-bottom: 1px solid var(--vt-c-brand);
 }
 
+.VPLocalNavOutlineDropdown {
+    .top-link {
+        color: var(--vt-c-brand) !important;
+    }
+}
+
 .VPSidebarItem.is-link {
     .item .link {
         .text {
@@ -72,6 +84,17 @@
     }
 }
 
+.VPContent {
+    .link {
+        border: 1px solid var(--vt-c-brand);
+        color: var(--vt-c-brand);
+    }
+    .link:hover {
+        border: 1px solid var(--vt-c-brand);
+        color: var(--vt-c-brand-highlight);
+    }
+}
+
 .DocSearch-Button {
     background-color: transparent;
 }
@@ -111,6 +134,10 @@
     .DocSearch-Prefill {
         color: var(--vt-c-brand);
     }
+
+    .DocSearch-Cancel {
+        color: var(--vt-c-brand);
+    }
 }
 
 .pager-link .title {
diff --git a/docs-vitepress/api/ApiIndex.vue b/docs-vitepress/api/ApiIndex.vue
index 2a4c8b11b5..0411de58be 100644
--- a/docs-vitepress/api/ApiIndex.vue
+++ b/docs-vitepress/api/ApiIndex.vue
@@ -983,52 +983,17 @@ export default {
   max-width: 1024px;
   margin: 0px auto;
   padding: 64px 32px;
-}
-
-.vp-doc {
-  a{
-    text-decoration: none;
-  }
-
-  h1,
-  h2,
-  h3 {
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  h1,
-  h2 {
-    letter-spacing: -0.02em;
-  }
-
-  h1 {
-    font-size: 38px;
-  }
 
   ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  h2 {
-    font-size: 24px;
-    color: var(--vp-c-text-1);
-    margin: 36px 0;
-    transition: color 0.5s;
-    padding-top: 36px;
-    border-top: 1px solid var(--vt-c-divider-light);
-    border-bottom: none;
+    list-style: none !important;
+    padding: 0 !important;
   }
 
   h3 {
-    letter-spacing: -0.01em;
-    color: var(--vt-c-brand);
-    font-size: 18px;
-    margin-top: 0;
-    margin-bottom: 1em;
-    transition: color 0.5s;
+    color: var(--vt-c-brand) !important;
+    font-size: 18px !important;
+    margin-top: 0 !important;
+    transition: color 0.5s !important;
   }
 }
 
@@ -1074,13 +1039,13 @@ export default {
 }
 
 .api-filter input {
-  border: 1px solid var(--vt-c-divider);
-  border-radius: 8px;
-  padding: 6px 12px;
+  border: 1px solid var(--vt-c-divider) !important;
+  border-radius: 8px !important;
+  padding: 6px 12px !important;
 }
 
 #api-filter:focus {
-  box-shadow: 0 0 4pt #00d47499;
+  box-shadow: 0 0 4pt #00d47499 !important;
 }
 
 .no-match {