From e4f6ac690a9d9772c7606643e99a41bbbd0b4164 Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Thu, 15 Dec 2022 22:09:01 +0800
Subject: [PATCH] [opt] custom css

---
 _config.yml                                  | 15 ++++++++++--
 scripts/tags/lib/tabs.js                     |  4 ++--
 source/css/_common/base.styl                 |  4 ++--
 source/css/_common/blockquote.styl           |  4 ++--
 source/css/_common/highlight.styl            | 21 +++++++++--------
 source/css/_custom.styl                      | 24 +++++++++++++-------
 source/css/_defines/func.styl                |  2 +-
 source/css/_defines/theme.styl               |  4 +---
 source/css/_layout/list.styl                 |  1 -
 source/css/_layout/md.styl                   |  8 ++++++-
 source/css/_layout/pages/archives.styl       |  2 +-
 source/css/_layout/partial/related.styl      |  2 +-
 source/css/_layout/sidebar/header.styl       |  2 +-
 source/css/_layout/tag-plugins/checkbox.styl |  7 +++---
 source/css/_layout/tag-plugins/common.styl   |  8 +++----
 source/css/_layout/tag-plugins/copy.styl     |  2 +-
 source/css/_layout/tag-plugins/folders.styl  |  2 +-
 source/css/_layout/tag-plugins/folding.styl  |  8 +++----
 source/css/_layout/tag-plugins/grid.styl     |  5 +++-
 source/css/_layout/tag-plugins/link.styl     |  2 +-
 source/css/_layout/tag-plugins/note.styl     | 17 +++++++-------
 source/css/_layout/tag-plugins/quot.styl     |  3 ++-
 source/css/_layout/tag-plugins/tabs.styl     |  4 ++--
 source/css/_layout/tag-plugins/timeline.styl |  6 +----
 source/css/_layout/tag-plugins/toc.styl      |  2 +-
 source/css/_layout/widgets/search.styl       |  4 ++--
 source/css/_layout/widgets/toc_wiki.styl     |  2 +-
 source/css/_plugins/swiper.styl              | 13 ++++++++---
 source/js/main.js                            |  2 +-
 29 files changed, 104 insertions(+), 76 deletions(-)

diff --git a/_config.yml b/_config.yml
index abcec5e..71f5858 100755
--- a/_config.yml
+++ b/_config.yml
@@ -197,9 +197,10 @@ footer:
 
 ######## Tag Plugins ########
 tag_plugins:
-  # {% note text %}
+  # {% ablock %} / {% note %}
   note:
     default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
+    border: true # true / false
   # {% checkbox %}
   checkbox:
     interactive: false # enable interactive for user
@@ -319,12 +320,22 @@ plugins:
 style:
   darkmode: auto # auto / always / false
   smooth_scroll: true # true / false
-  font-size: 16px
+  font-size:
+    root: 16px
+    body: .9375rem # 15px
+    code: 85% # 14px
+    codeblock: 0.8125rem # 13px
   font-family:
     logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
     body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
     code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
+    codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
   text-align: left
+  border-radius:
+    card: 12px
+    block: 12px
+    button: 8px
+    image: 8px
   color:
     # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
     background: 'hsl(212 16% 98%)' # 浅色背景颜色
diff --git a/scripts/tags/lib/tabs.js b/scripts/tags/lib/tabs.js
index 9f4a03c..0e54197 100644
--- a/scripts/tags/lib/tabs.js
+++ b/scripts/tags/lib/tabs.js
@@ -39,11 +39,11 @@ module.exports = ctx => function(args, content = '') {
     const abbr = tabName + ' ' + ++tabId
     const href = abbr.toLowerCase().split(' ').join('-')
     const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
-    tabNav += `<li class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></li>`
+    tabNav += `<div class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></div>`
     tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`
   })
 
-  tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
+  tabNav = `<div class="nav-tabs">${tabNav}</div>`
   tabContent = `<div class="tab-content">${tabContent}</div>`
 
   var el = ''
diff --git a/source/css/_common/base.styl b/source/css/_common/base.styl
index fd202b6..b63f7d6 100644
--- a/source/css/_common/base.styl
+++ b/source/css/_common/base.styl
@@ -1,6 +1,6 @@
 pre
-  font-family: $ff-code
-  font-size: $fs-code
+  font-family: $ff-codeblock
+  font-size: $fs-codeblock
   tab-size: 4
   -moz-tab-size: 4
   -o-tab-size: 4
diff --git a/source/css/_common/blockquote.styl b/source/css/_common/blockquote.styl
index 81f2837..e76776a 100644
--- a/source/css/_common/blockquote.styl
+++ b/source/css/_common/blockquote.styl
@@ -2,9 +2,9 @@ blockquote
   display: block
   margin-left: 0
   margin-right: 0
-  padding: 0.5rem 0.75rem
+  padding: 0.25rem 0.75rem
   background: var(--block)
   $bd-left = 4px
   border-left: $bd-left solid var(--text-meta)
-  border-radius: $bd-left $border-block $border-block $bd-left
+  border-radius: $bd-left $border-button $border-button $bd-left
   color: var(--text-p2)
\ No newline at end of file
diff --git a/source/css/_common/highlight.styl b/source/css/_common/highlight.styl
index bfc8449..13ed87d 100644
--- a/source/css/_common/highlight.styl
+++ b/source/css/_common/highlight.styl
@@ -4,7 +4,7 @@ code
   font-family: $ff-code
 
 p>code:not([class]),li>code:not([class])
-  font-size: 85%
+  font-size: $fs-code
   background: var(--block)
   padding: .2em
   border-radius: 4px
@@ -16,7 +16,7 @@ p>code:not([class]),li>code:not([class])
   overflow: hidden
   background: var(--block)
   line-height: 1.5
-  font-family: $ff-code
+  font-family: $ff-codeblock
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
     min-width: 180px
@@ -27,15 +27,16 @@ p>code:not([class]),li>code:not([class])
   display: block
   figcaption
     color: var(--text-p2)
-    font-size: $fs-code
-    padding: 4px 0.5rem
-    position: sticky
-    left: 0
-    background: var(--block-hover)
-    border-top-left-radius: "calc(%s - 1px)" % $border-block
-    border-top-right-radius: "calc(%s - 1px)" % $border-block
+    font-size: $fs-codeblock
+    font-weight: 500
+    margin-left: 0.5rem
+    display: inline-block
     span
-      margin-right: 4px
+      padding: 4px 0.5rem
+      display: block
+      border-bottom-left-radius: $border-button
+      border-bottom-right-radius: $border-button
+      background: var(--block-hover)
   >table
     overflow: auto
     display: block
diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index df4fe5b..0013374 100644
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@@ -20,7 +20,8 @@ $color-text = convert(hexo-config('style.color.text'))
 //   font-style: normal
 
 $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
-$ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
+$ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
+$ff-code = $ff-codeblock
 $ff-logo = $ff-body
 
 if hexo-config('style.font-family.body')
@@ -29,12 +30,15 @@ if hexo-config('style.font-family.body')
 if hexo-config('style.font-family.code')
   $ff-code = convert(hexo-config('style.font-family.code'))
 
+if hexo-config('style.font-family.codeblock')
+  $ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
+
 if hexo-config('style.font-family.logo')
   $ff-logo = convert(hexo-config('style.font-family.logo'))
 
 
 // font size
-$fs-root = convert(hexo-config('style.font-size'))
+$fs-root = convert(hexo-config('style.font-size.root'))
 $fs-15 = .9375rem
 $fs-14 = .875rem
 $fs-13 = .8125rem
@@ -46,19 +50,23 @@ $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
 $fs-h5   = $fs-15
 $fs-h6   = $fs-12
-$fs-p    = $fs-15
-$fs-code = $fs-13
+$fs-p    = convert(hexo-config('style.font-size.body'))
+$fs-code = convert(hexo-config('style.font-size.code'))
+$fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
 
-$border-card = 12px
-$border-block = 6px
-$border-image = 6px
+
+$border-card = convert(hexo-config('style.border-radius.card'))
+$border-block = convert(hexo-config('style.border-radius.block'))
+$border-button = convert(hexo-config('style.border-radius.button'))
+$border-image = convert(hexo-config('style.border-radius.image'))
 
 // 可以动态变化的属性
 :root
   --width-left: 288px
   --width-main: 720px
   --gap-l: 16px
-  --gap-p: .75rem // gap for paragraph
+  --gap-p: 1rem // gap for paragraph
+  --gap-p-compact: 0.75rem
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
diff --git a/source/css/_defines/func.styl b/source/css/_defines/func.styl
index b3d8d50..46ac005 100644
--- a/source/css/_defines/func.styl
+++ b/source/css/_defines/func.styl
@@ -83,7 +83,7 @@ scrollbar-codeblock($height = 4px)
   &::-webkit-scrollbar-thumb
     background: transparent
     cursor: pointer
-    border-radius: $border-block
+    border-radius: $border-button
   &:hover
     &::-webkit-scrollbar-thumb
       background: var(--text-meta)
diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl
index bc4af46..56b520a 100644
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@@ -38,7 +38,6 @@ set_text_light()
   --block: hsl($color-block-h, $color-block-s, 95)
   --block-border: hsl($color-block-h, $color-block-s, 90)
   --block-hover: hsl($color-block-h, $color-block-s, 92)
-  --block-lighten: hsl($color-block-h, $color-block-s, 100)
   set_text_dark()
   --theme-bg2: $color-theme
   --theme-link: $color-link
@@ -46,11 +45,10 @@ set_text_light()
 set_darkmode()
   :root
     --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
-    --card: hsl($color-block-h, $color-block-s * 1.5, 24)
+    --card: hsl($color-block-h, $color-block-s * 1.2, 24)
     --block: hsl($color-block-h, $color-block-s, 16)
     --block-border: hsl($color-block-h, $color-block-s, 24)
     --block-hover: hsl($color-block-h, $color-block-s, 20)
-    --block-lighten: hsl($color-block-h, $color-block-s, 32)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black
diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl
index eba1207..bb2f309 100644
--- a/source/css/_layout/list.styl
+++ b/source/css/_layout/list.styl
@@ -55,7 +55,6 @@
 
 .post-list .post-card:hover
   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
-  transform: translateY(-1px)
   img 
     transform: scale(1.02)
     filter: brightness(80%)
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index c872acf..7ef978d 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -60,9 +60,12 @@ h1.article-title
     p,ul,ol
       font-size: $fs-14
       line-height: 1.5
+      code 
+        font-size: inherit
+        padding: 0
   p,blockquote,.tag-plugin,ul,ol,.highlight,table
     *
-      --gap-p: .5rem
+      --gap-p: var(--gap-p-compact)
   p,ul,ol
     margin-top: 'calc(%s - 4px)' % var(--gap-p)
     margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
@@ -71,6 +74,9 @@ h1.article-title
     margin-bottom: var(--gap-p)
   iframe
     display: block
+  ul>li, ol>li
+    margin-top: 4px
+    margin-bottom: 4px
 
 // titles
 .md-text.content
diff --git a/source/css/_layout/pages/archives.styl b/source/css/_layout/pages/archives.styl
index 4408063..10e9c70 100644
--- a/source/css/_layout/pages/archives.styl
+++ b/source/css/_layout/pages/archives.styl
@@ -47,7 +47,7 @@
     &.child
       padding-left: 2rem
     padding: .5em 1rem
-    border-radius: $border-block
+    border-radius: $border-button
     color: var(--text-p2)
     align-items: center
     justify-content: space-between
diff --git a/source/css/_layout/partial/related.styl b/source/css/_layout/partial/related.styl
index 7b7e6ad..98e78ea 100644
--- a/source/css/_layout/partial/related.styl
+++ b/source/css/_layout/partial/related.styl
@@ -14,7 +14,7 @@
 
   a.more
     padding: 0.25rem 0.5rem
-    border-radius: $border-block
+    border-radius: $border-button
     color: var(--text-p1)
 
 article.md-text.content+.related-wrap
diff --git a/source/css/_layout/sidebar/header.styl b/source/css/_layout/sidebar/header.styl
index 642cec2..5643d46 100644
--- a/source/css/_layout/sidebar/header.styl
+++ b/source/css/_layout/sidebar/header.styl
@@ -28,7 +28,7 @@ nav.menu
     text-align: center
     &.active, &:hover
       color: var(--text-p1)
-      background: var(--block-lighten)
+      background: var(--card)
       box-shadow: $boxshadow-button
 
 .l_left .menu a.nav-item
diff --git a/source/css/_layout/tag-plugins/checkbox.styl b/source/css/_layout/tag-plugins/checkbox.styl
index 93e5809..dd56e7a 100644
--- a/source/css/_layout/tag-plugins/checkbox.styl
+++ b/source/css/_layout/tag-plugins/checkbox.styl
@@ -1,8 +1,9 @@
-.md-text .checkbox
+.md-text .tag-plugin.checkbox
   display: flex
+  align-items: center
   font-size: $fs-15
   line-height: 1.2
-  --gap-p: .25rem
+  --gap-p: 'calc(%s / 2)' % var(--gap-p-compact)
   input
     -webkit-appearance: none
     -moz-appearance: none
@@ -20,8 +21,6 @@
     margin-right: 8px
     if hexo-config('tag_plugins.checkbox.interactive') != true
       pointer-events: none
-  span
-    margin-top: 1px
   /* Checkbox */
   input[type=checkbox]
     &:before, &:after
diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl
index 7f1a274..2287cb1 100644
--- a/source/css/_layout/tag-plugins/common.styl
+++ b/source/css/_layout/tag-plugins/common.styl
@@ -16,8 +16,8 @@ set_dynamic_color($theme)
   --theme-bg1: hsl(hue($theme), 90, 90)
   --theme-bg2: hsl(hue($theme), 80, 95)
   --theme-border: hsl(hue($theme), 50, 80)
-  --text-p0: hsl(hue($theme), 60, 16)
-  --text-p1: hsl(hue($theme), 50, 24)
+  --text-p0: hsl(hue($theme), 55, 16)
+  --text-p1: hsl(hue($theme), 55, 20)
   --text-p2: hsl(hue($theme), 90, 24)
 
 .tag-plugin
@@ -72,8 +72,8 @@ set_darkmode_tags()
     --theme-bg1: hsl(hue($theme), 80, 20)
     --theme-bg2: hsl(hue($theme), 16, 16)
     --theme-border: hsl(hue($theme), 50, 24)
-    --text-p0: hsl(hue($theme), 80, 80)
-    --text-p1: hsl(hue($theme), 64, 80)
+    --text-p0: hsl(hue($theme), 100, 85)
+    --text-p1: hsl(hue($theme), 50, 75)
     --text-p2: hsl(hue($theme), 80, 72)
   .tag-plugin.tag
     set_dynamic_color($color-theme)
diff --git a/source/css/_layout/tag-plugins/copy.styl b/source/css/_layout/tag-plugins/copy.styl
index 2c82b4b..61abfdc 100644
--- a/source/css/_layout/tag-plugins/copy.styl
+++ b/source/css/_layout/tag-plugins/copy.styl
@@ -3,7 +3,7 @@
   justify-content: space-between
   box-sizing: border-box
   background: var(--block)
-  border-radius: $border-block
+  border-radius: $border-button
   border: 1px solid var(--block-border)
   overflow: hidden
   width: 320px
diff --git a/source/css/_layout/tag-plugins/folders.styl b/source/css/_layout/tag-plugins/folders.styl
index b1fe7ca..0b52690 100644
--- a/source/css/_layout/tag-plugins/folders.styl
+++ b/source/css/_layout/tag-plugins/folders.styl
@@ -1,7 +1,7 @@
 .tag-plugin.folders
   display: block
   margin: 1rem 0
-  border-radius: $border-block
+  border-radius: $border-button
   font-size: $fs-14
   border: 1px solid var(--theme-border)
   overflow: hidden
diff --git a/source/css/_layout/tag-plugins/folding.styl b/source/css/_layout/tag-plugins/folding.styl
index a8a244c..c87d252 100644
--- a/source/css/_layout/tag-plugins/folding.styl
+++ b/source/css/_layout/tag-plugins/folding.styl
@@ -2,7 +2,7 @@ details.folding
   display: block
   padding: 1rem
   margin: 1rem 0
-  border-radius: $border-block
+  border-radius: $border-button
   font-size: $fs-14
   background: var(--theme-bg2)
   border: 1px solid var(--theme-border)
@@ -10,7 +10,7 @@ details.folding
     cursor: pointer
     padding: .75rem 1rem
     margin: 0 - 1rem
-    border-radius: $border-block
+    border-radius: $border-button
     color: var(--text-p2)
     font-weight: 500
     position: relative
@@ -47,8 +47,8 @@ details.folding[open]
     margin: 0 - 1rem
     margin-top: 0
     background: var(--card)
-    border-bottom-left-radius: 'calc(%s - 1px)' % $border-block
-    border-bottom-right-radius: 'calc(%s - 1px)' % $border-block
+    border-bottom-left-radius: 'calc(%s - 1px)' % $border-button
+    border-bottom-right-radius: 'calc(%s - 1px)' % $border-button
     font-size: $fs-15
     >:first-child
       margin-top: 0
diff --git a/source/css/_layout/tag-plugins/grid.styl b/source/css/_layout/tag-plugins/grid.styl
index 43075eb..ad1338e 100644
--- a/source/css/_layout/tag-plugins/grid.styl
+++ b/source/css/_layout/tag-plugins/grid.styl
@@ -17,7 +17,10 @@
       margin-top: -0.25em
     p:last-child
       margin-bottom: -0.25em
-    
+
+.md-text .tag-plugin.grid
+  margin-top: -0.5rem
+  margin-bottom: -0.5rem 
 
 .tag-plugin.grid
   @media screen and (max-width: $device-tablet)
diff --git a/source/css/_layout/tag-plugins/link.styl b/source/css/_layout/tag-plugins/link.styl
index da02782..eb89e7a 100644
--- a/source/css/_layout/tag-plugins/link.styl
+++ b/source/css/_layout/tag-plugins/link.styl
@@ -18,7 +18,7 @@
   @media screen and (max-width: $device-mobile-375)
     width: 100%
   box-shadow: $boxshadow-card
-  border-radius: $border-block
+  border-radius: $border-button
   trans2: box-shadow transform
   &:hover
     box-shadow: $boxshadow-card-float
diff --git a/source/css/_layout/tag-plugins/note.styl b/source/css/_layout/tag-plugins/note.styl
index 43cdddd..97bd0ef 100644
--- a/source/css/_layout/tag-plugins/note.styl
+++ b/source/css/_layout/tag-plugins/note.styl
@@ -1,26 +1,25 @@
 .md-text .tag-plugin.note
   position: relative
-  margin-top: 1rem
-  margin-bottom: 1rem
-  padding: 0 1rem
+  padding: 0.25rem 1rem
   border-radius: $border-block
   background: var(--theme-bg2)
-  border: 1px solid var(--theme-border)
+  if hexo-config('tag_plugins.note.border') == true
+    border: 1px solid var(--theme-border)
   color: var(--text-p1)
   >.title
     font-size: $fs-15
-    line-height: 1.2
-    margin-top: 1rem
+    line-height: 1.5
+    margin-top: var(--gap-p-compact)
     font-weight: 500
     color: var(--text-p0)
   >.body
     &,p
       font-size: $fs-14
       line-height: 1.5
-    margin-top: .5rem
-    margin-bottom: 1rem
+    margin-top: var(--gap-p-compact)
+    margin-bottom: var(--gap-p-compact)
   >.body:only-child
-    margin: 1rem 0
+    margin: 'calc(%s - 0.25rem)' % var(--gap-p) 0
 
 
 .md-text .tag-plugin.note[color]
diff --git a/source/css/_layout/tag-plugins/quot.styl b/source/css/_layout/tag-plugins/quot.styl
index 3174605..9a5c4e0 100644
--- a/source/css/_layout/tag-plugins/quot.styl
+++ b/source/css/_layout/tag-plugins/quot.styl
@@ -20,7 +20,7 @@
   max-width 400px
   position: relative
 // override
-.tag-plugin.quot
+.md-text.content .tag-plugin.quot
   h1
     font-size: $fs-h1
     font-weight: 900
@@ -30,6 +30,7 @@
   h2,h3,h4,h5,h6
     font-size: $fs-h3
     margin-top: 1em
+    margin-bottom: 0
   p
     font-size: $fs-h4
     color: var(--text-p0)
diff --git a/source/css/_layout/tag-plugins/tabs.styl b/source/css/_layout/tag-plugins/tabs.styl
index 144b331..748e762 100644
--- a/source/css/_layout/tag-plugins/tabs.styl
+++ b/source/css/_layout/tag-plugins/tabs.styl
@@ -16,7 +16,7 @@
       align-self: flex-end
 
 .tag-plugin.tabs
-  ul.nav-tabs
+  .nav-tabs
     display: flex
     align-self: center
     overflow: scroll visible
@@ -36,7 +36,7 @@
       bottom: 0
       left: 0
       border-radius: 2px
-    li.tab
+    .tab
       list-style-type: none
       a
         display: block
diff --git a/source/css/_layout/tag-plugins/timeline.styl b/source/css/_layout/tag-plugins/timeline.styl
index 8cf617c..1455b94 100644
--- a/source/css/_layout/tag-plugins/timeline.styl
+++ b/source/css/_layout/tag-plugins/timeline.styl
@@ -99,15 +99,11 @@
 
 .tag-plugin.timeline .body
   background: var(--card)
-  border-radius: 12px
+  border-radius: $border-card
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
   box-shadow: $boxshadow-block
-  trans2: transform box-shadow
-  &:hover
-    transform: translateY(-1px)
-    box-shadow: $boxshadow-card-float
   p
     font-size: $fs-14
     img  
diff --git a/source/css/_layout/tag-plugins/toc.styl b/source/css/_layout/tag-plugins/toc.styl
index 72cc44c..a2dae79 100644
--- a/source/css/_layout/tag-plugins/toc.styl
+++ b/source/css/_layout/tag-plugins/toc.styl
@@ -1,7 +1,7 @@
 details.toc
   background: var(--block)
   border: 1px solid var(--block-border)
-  border-radius: $border-block
+  border-radius: $border-button
   overflow: hidden
   color: var(--text-p2)
   summary
diff --git a/source/css/_layout/widgets/search.styl b/source/css/_layout/widgets/search.styl
index 5eb80e0..56d17ee 100644
--- a/source/css/_layout/widgets/search.styl
+++ b/source/css/_layout/widgets/search.styl
@@ -16,7 +16,7 @@
     line-height: 1
     box-sizing: border-box
     font-family: $ff-body
-    border-radius: $border-block
+    border-radius: $border-button
     background-color: var(--card)
     color: var(--text-p0)
     border: 1px solid var(--block-border)
@@ -38,7 +38,7 @@
     font-size: $fs-14
     padding: 2rem
     background: var(--block)
-    border-radius: $border-block
+    border-radius: $border-button
 
   #search-result
     ul.search-result-list
diff --git a/source/css/_layout/widgets/toc_wiki.styl b/source/css/_layout/widgets/toc_wiki.styl
index b553e53..ba585bf 100644
--- a/source/css/_layout/widgets/toc_wiki.styl
+++ b/source/css/_layout/widgets/toc_wiki.styl
@@ -5,7 +5,7 @@
 
 // 其它分页链接
 .widget-wrapper.toc.multi .doc-tree
-  border-radius: $border-block
+  border-radius: $border-button
   background: var(--block)
   overflow: hidden
   border: 1px solid var(--block-border)
diff --git a/source/css/_plugins/swiper.styl b/source/css/_plugins/swiper.styl
index 5bff31a..3cdab2a 100644
--- a/source/css/_plugins/swiper.styl
+++ b/source/css/_plugins/swiper.styl
@@ -35,15 +35,22 @@ div.swiper-slide
   max-width: 75%
 
 .swiper-button-prev,.swiper-button-next
-  padding: 1rem 0.5rem
+  padding: 1rem 0.25rem
   margin-top: -2rem !important
-  border-radius: 4px
+  border-radius: 40px
   background: alpha(white, 0.25)
   trans1 background
-  --swiper-theme-color: black !important
+  --swiper-theme-color: var(--text-p0) !important
   &:after
     font-size: 1.2rem !important
     font-weight: 700 !important
+    color: var(--swiper-theme-color)
   &:hover
     background: white !important
     --swiper-theme-color: $color-hover !important
+
+.swiper-button-prev:after
+  transform: translateX(-1px)
+
+.swiper-button-next:after
+  transform: translateX(1px)
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index 0fcec22..00f77e2 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -144,7 +144,7 @@ const init = {
    */
   registerTabsTag: function () {
     // Binding `nav-tabs` & `tab-content` by real time permalink changing.
-    document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
+    document.querySelectorAll('.tabs .nav-tabs .tab').forEach(element => {
       element.addEventListener('click', event => {
         event.preventDefault();
         // Prevent selected tab to select again.