scrollbar & valine

_config.yml

@@ -13,6 +13,7 @@ style:
   max_width: 1080px # Sum of body width and sidebar width (This limit will be exceeded when the device width is greater than 2000px, reaching 75% of the total width)
   scrollbar:
     size:  8px
+    border: 1px
     color:  '#2196f3'
   navbar:
     height: 64px
@@ -69,19 +70,19 @@ style:
     #   url: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts/Monaco/Monaco.ttf
     #   weight: normal
     #   style: normal
-  color:
-    site: '#21232F' # Website background color
-    site_inner: '#fff' # Text color inside the website background
-    card: '#444' # Card background color
-    text: '#fff' # The color of the text on the card.
-    theme: '#ff9800' # Main color
-    link: '#1BCDFC' # Link color
-    hover: '#ff5722' # Link highlight color
-    inner: '#333' # Text color inside the button
-    block: '#555' # Block color
-    inlinecode: yellow # Inline code color
-    codeblock: '#555' # Codeblock color
-    p: '#ccc' # Paragraph color
+  # color:
+  #   site: '#21232F' # Website background color
+  #   site_inner: '#fff' # Text color inside the website background
+  #   card: '#444' # Card background color
+  #   text: '#fff' # The color of the text on the card.
+  #   theme: '#ff9800' # Main color
+  #   link: '#1BCDFC' # Link color
+  #   hover: '#ff5722' # Link highlight color
+  #   inner: '#333' # Text color inside the button
+  #   block: '#555' # Block color
+  #   inlinecode: yellow # Inline code color
+  #   codeblock: '#555' # Codeblock color
+  #   p: '#ccc' # Paragraph color
 
 
 

source/css/_base/index.styl

@@ -15,15 +15,12 @@ html
   -ms-text-size-adjust: 100%
   text-rendering: optimizelegibility
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
-  // >
-  //   ::-webkit-scrollbar
-  //     width: 8px
-  //     height: 8px
-  //   ::-webkit-scrollbar-thumb
-  //     background: $color-theme
-  //     border-radius: 2px
-  //   ::-webkit-scrollbar-track
-  //     background: transparent
+  >
+    if hexo-config('style.scrollbar.size')
+      if hexo-config('style.scrollbar.color')
+        scrollbar(convert(hexo-config('style.scrollbar.size')), convert(hexo-config('style.scrollbar.border')) || 0px, convert(hexo-config('style.scrollbar.color')))
+      else
+        scrollbar(convert(hexo-config('style.scrollbar.size')), convert(hexo-config('style.scrollbar.border')) || 0px)
 
 body
   background-color: $color-site
@@ -37,23 +34,6 @@ body
       left: 0
 
 
-if hexo-config('style.scrollbar.size')
-  if hexo-config('style.scrollbar.color')
-    scrollbar(convert(hexo-config('style.scrollbar.size')), convert(hexo-config('style.scrollbar.color')))
-  else
-    scrollbar(convert(hexo-config('style.scrollbar.size')))
-// *::-webkit-scrollbar
-//   height: 2px
-//   width: 8px
-// *::-webkit-scrollbar-track-piece
-//   background: transparent
-// *::-webkit-scrollbar-thumb
-//   background: alpha($color-text, .3)
-//   cursor: pointer
-//   trans()
-//   &:hover
-//     background: alpha($color-text, .6)
-
 
 ::-moz-selection {
   background: $color-selection

source/css/_defines/func.styl

@@ -35,7 +35,7 @@ disable-user-select()
   -webkit-user-select: none
   user-select: none
 
-scrollbar($w = 4px, $c = mix($color-p, $color-card, 70))
+scrollbar($w = 4px, $b = 2px, $c = mix($color-p, $color-card, 70))
   &::-webkit-scrollbar
     height: $w
     width: $w
@@ -44,7 +44,6 @@ scrollbar($w = 4px, $c = mix($color-p, $color-card, 70))
   &::-webkit-scrollbar-thumb
     background: alpha($c, .5)
     cursor: pointer
-    border-radius: 2px
-    trans()
+    border-radius: $b
     &:hover
-      background: $c
+      background: alpha($c, 1)

source/css/_highlight/index.styl

@@ -22,6 +22,7 @@
 
 
   >table
+    scrollbar()
     overflow: auto
     display: block
     td,th
@@ -115,20 +116,6 @@
         content: ""
 
 
-  // &::-webkit-scrollbar
-  //   height: $border-line
-  //   width: $border-line
-  // &::-webkit-scrollbar-track-piece
-  //   background: transparent
-  // &::-webkit-scrollbar-thumb
-  //   background: alpha($color-text, .3)
-  //   cursor: pointer
-  //   border-radius: $border-codeblock
-  //   trans()
-  //   &:hover
-  //     background: alpha($color-text, .6)
-
-
 
 
 $hl-keyword = #9c27b0

source/css/_third-party/valine.styl

@@ -105,6 +105,10 @@
           border-left: none
         .vh
           border-bottom: 1px dashed alpha($color-text, .1)
+        .vimg
+          border: 1px solid white
+          padding: 0
+          background: $color-codeblock
         .vcontent.expand
           &:before
             background: linear-gradient(180deg, alpha($color-card, .9), alpha($color-block, .9));

source/js/valine.js

@@ -970,7 +970,7 @@
                 header: [],
                 hr: [],
                 i: [],
-                img: ["src", "alt", "title", "width", "height"],
+                img: ["src", "id", "alt", "title", "width", "height"],
                 ins: ["datetime"],
                 li: [],
                 mark: [],