Merge pull request #1817 from didi/feat-docs-vitepress

docs: update styles
didi · Jan 16, 2025 · d04870a · d04870a
2 parents c13cbb5 + dbbb031
commit d04870a
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 42 deletions.
diff --git a/docs-vitepress/.vitepress/config.ts b/docs-vitepress/.vitepress/config.ts
@@ -292,6 +292,11 @@ export default withPwa(
                 apiKey: "a34809e24ae1eb13ca3afc255d0a0cef",
                 indexName: "mpxjs",
                 placeholder: "搜索文档",
+                translations: {
+                    button: {
+                        buttonText: "搜索",
+                    },
+                },
             },
             logo: "/favicon.ico",
             docFooter: {

diff --git a/docs-vitepress/.vitepress/theme/styles/index.css b/docs-vitepress/.vitepress/theme/styles/index.css
@@ -3,14 +3,124 @@
     --vt-c-text-code: #476582;
     --vt-c-green-light: #42d392;
     --vt-c-green-lighter: #35eb9a;
+    --vt-c-green-dark: #33a06f;
+    --vt-c-green-darker: #155f3e;
+    --vt-c-text-2: rgba(60, 60, 60, 0.7);
     --vt-c-text-3: rgba(60, 60, 60, 0.33);
     --vt-c-divider: rgba(60, 60, 60, 0.29);
     --vt-c-divider-light: rgba(60, 60, 60, 0.12);
+    --vt-c-brand-highlight: var(--vt-c-brand-dark);
+    --vt-c-brand: var(--vt-c-green);
+    --vt-c-brand-dark: var(--vt-c-green-dark);
+    --vt-c-brand-light: var(--vt-c-green-light);
+    --vt-c-brand-dark: var(--vt-c-green-dark);
 }
 
 .dark {
     --vt-c-text-code: #aac8e4;
-    --vt-c-text-3: rgba(235, 235, 235, .38);
-    --vt-c-divider: rgba(84, 84, 84, .65);
-    --vt-c-divider-light: rgba(84, 84, 84, .48);
-}
+    --vt-c-text-2: rgba(235, 235, 235, 0.6);
+    --vt-c-text-3: rgba(235, 235, 235, 0.38);
+    --vt-c-divider: rgba(84, 84, 84, 0.65);
+    --vt-c-divider-light: rgba(84, 84, 84, 0.48);
+    --vt-c-brand-highlight: var(--vt-c-brand-light);
+}
+
+.vp-doc {
+    a {
+        text-decoration: none;
+        color: var(--vt-c-brand);
+    }
+    a:hover {
+        color: var(--vt-c-brand-highlight);
+    }
+}
+
+.VPNavBarMenuLink:hover {
+    color: var(--vt-c-brand-highlight) !important;
+}
+
+.VPNavBarMenuLink.active {
+    color: var(--vt-c-brand) !important;
+    border-bottom: 1px solid var(--vt-c-brand);
+}
+
+.VPSidebarItem.is-link {
+    .item .link {
+        .text {
+            color: var(--vt-c-text-2);
+            font-weight: 500;
+        }
+    }
+    .item .link:hover {
+        .text {
+            color: var(--vt-c-text-1) !important;
+        }
+    }
+}
+
+.VPSidebarItem.is-link.is-active {
+    .item .link .text {
+        color: var(--vt-c-brand) !important;
+        font-weight: 600;
+    }
+}
+
+.VPDocAside {
+    .outline-marker {
+        height: 20px;
+        background-color: var(--vt-c-brand);
+    }
+}
+
+.DocSearch-Button {
+    background-color: transparent;
+}
+
+.DocSearch-Button:hover {
+    background-color: transparent;
+    border-color: var(--vt-c-brand-highlight);
+}
+
+.DocSearch-Modal {
+    .DocSearch-Form {
+        border: 1px solid var(--vt-c-brand);
+
+        .DocSearch-MagnifierLabel {
+            color: var(--vt-c-brand);
+        }
+    }
+
+    .DocSearch-Hit-source {
+        color: var(--vt-c-brand);
+    }
+
+    .DocSearch-Hit[aria-selected="true"] {
+        a {
+            background-color: var(--vt-c-brand);
+        }
+
+        .DocSearch-Hit-title {
+            color: #fff;
+        }
+    }
+
+    .DocSearch-Hits mark {
+        color: var(--vt-c-brand);
+    }
+
+    .DocSearch-Prefill {
+        color: var(--vt-c-brand);
+    }
+}
+
+.pager-link .title {
+    color: var(--vt-c-brand) !important;
+}
+
+.pager-link:hover {
+    border: 1px solid var(--vt-c-brand) !important;
+
+    .title {
+        color: var(--vt-c-brand-highlight) !important;
+    }
+}
diff --git a/docs-vitepress/api/ApiIndex.vue b/docs-vitepress/api/ApiIndex.vue
@@ -984,49 +984,52 @@ export default {
   margin: 0px auto;
   padding: 64px 32px;
 }
-a{
-  text-decoration: none;
-}
 
-h1,
-h2,
-h3 {
-  font-weight: 600;
-  line-height: 1;
-}
+.vp-doc {
+  a{
+    text-decoration: none;
+  }
 
-h1,
-h2 {
-  letter-spacing: -0.02em;
-}
+  h1,
+  h2,
+  h3 {
+    font-weight: 600;
+    line-height: 1;
+  }
 
-h1 {
-  font-size: 38px;
-}
+  h1,
+  h2 {
+    letter-spacing: -0.02em;
+  }
 
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  h1 {
+    font-size: 38px;
+  }
 
-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;
-}
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 
-h3 {
-  letter-spacing: -0.01em;
-  color: var(--vt-c-green);
-  font-size: 18px;
-  margin-top: 0;
-  margin-bottom: 1em;
-  transition: color 0.5s;
+  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;
+  }
+
+  h3 {
+    letter-spacing: -0.01em;
+    color: var(--vt-c-brand);
+    font-size: 18px;
+    margin-top: 0;
+    margin-bottom: 1em;
+    transition: color 0.5s;
+  }
 }
 
 .api-section {
@@ -1039,10 +1042,11 @@ h3 {
   line-height: 2;
   color: var(--vt-c-text-code);
   transition: color 0.5s;
+  text-decoration: none;
 }
 
 .api-groups a:hover {
-  color: var(--vt-c-green);
+  color: var(--vt-c-brand);
   transition: none;
 }