From 9593a8c55954b966c7a632caa93cc5743ec309bb Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Mon, 19 Jul 2021 17:29:41 +0800
Subject: [PATCH] feat: refine search styles

---
 assets/styles/global.styl | 74 ++++-----------------------------------
 assets/styles/post.styl   |  7 ++--
 components/OneMenu.vue    |  5 +++
 nuxt.config.js            |  2 +-
 one/templates/page.etpl   |  4 +--
 5 files changed, 17 insertions(+), 75 deletions(-)

diff --git a/assets/styles/global.styl b/assets/styles/global.styl
index ee43b89..e2a9a4d 100644
--- a/assets/styles/global.styl
+++ b/assets/styles/global.styl
@@ -1,16 +1,20 @@
+$primary = #0052cc
+
 // only enable on Retina displays
 @media screen and (min-resolution 2dppx)
   html
     -webkit-font-smoothing antialiased
     -moz-osx-font-smoothing grayscale
 
-
-
 *
 *::before
 *::after
   box-sizing border-box
 
+:root
+  --docsearch-primary-color $primary !important
+  --docsearch-searchbox-shadow inset 0 0 0 2px $primary !important
+
 html
   font-weight 400
   color #333
@@ -35,69 +39,3 @@ a:focus
 
 main
   line-height 1.5
-
-menu
-  margin 0
-  padding 0
-
-.menu-item
-  list-style none
-  line-height 1
-
-.menu-link
-  display block
-  position relative
-  text-decoration none
-  cursor default
-
-  a&
-    cursor pointer
-
-  &::after
-    content ""
-    position absolute
-    bottom 2px
-    left 50%
-    width 0
-    height 2px
-    transition width 0.2s, left 0.2s
-
-  a&:focus::after
-  a&:hover::after
-    width 100%
-    left 0
-
-.algolia-autocomplete
-  .algolia-docsearch-suggestion--title:last-child
-    margin-bottom 0
-
-  .ds-dropdown-menu
-    &
-    & [class^=ds-dataset-]
-      border-radius 3px
-
-    &::before
-      width 10px
-      height 10px
-      top -4px
-
-    .ds-suggestion.ds-cursor .algolia-docsearch-suggestion
-      &.suggestion-layout-simple
-      &:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content
-        background-color #f8f8f8
-
-  .algolia-docsearch-suggestion--category-header
-    font-size 14px
-
-  .algolia-docsearch-suggestion--subcategory-column
-    font-size 12px
-    overflow hidden
-    white-space nowrap
-    text-overflow ellipsis
-
-  .algolia-docsearch-suggestion--highlight
-    color #fff
-    background-color #111
-
-  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight
-    box-shadow inset 0 -2px 0 0 #111
diff --git a/assets/styles/post.styl b/assets/styles/post.styl
index 8ea4623..8e30533 100644
--- a/assets/styles/post.styl
+++ b/assets/styles/post.styl
@@ -132,14 +132,14 @@ margin-y($top, $bottom = $top)
   a:visited
     &:not([class^="veui-"])
       text-decoration none
-      color #3998fc
+      color #0052cc
       transition color 0.2s
 
       &:hover
-        color #3389e3
+        color #06f
 
       &:active
-        color #2e7aca
+        color #0046ad
 
   code
     padding 2px 4px
@@ -227,6 +227,7 @@ margin-y($top, $bottom = $top)
 
   pre
     border 1px solid #eee
+    border-radius 4px
     padding 30px
     background-color #f9f9f9
     white-space pre
diff --git a/components/OneMenu.vue b/components/OneMenu.vue
index 944aed3..e34e2e6 100644
--- a/components/OneMenu.vue
+++ b/components/OneMenu.vue
@@ -132,6 +132,11 @@ export default {
     .veui-menu-tree
       overflow auto
 
+  ::v-deep .DocSearch
+    margin 0
+    border-radius 6px
+    font inherit
+
   h2
     display flex
     align-items center
diff --git a/nuxt.config.js b/nuxt.config.js
index e333a65..be64c50 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -39,7 +39,7 @@ module.exports = {
     css: false
   },
 
-  css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl'],
+  css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl', '@/assets/styles/post.styl'],
 
   plugins: [
     { src: '~plugins/i18n.js' },
diff --git a/one/templates/page.etpl b/one/templates/page.etpl
index 54c5177..2ba4a23 100644
--- a/one/templates/page.etpl
+++ b/one/templates/page.etpl
@@ -25,6 +25,4 @@ export default {<!-- if: ${layout} -->
 <!-- /if -->
   mixins: [htmlAttrs]
 }
-</script><!-- /else --><!-- if: ${style} -->
-
-<style lang="stylus" src="@/assets/styles/post.styl" scoped></style><!-- /if -->
+</script><!-- /else -->