valine & scrollbar

_config.yml

@@ -11,6 +11,9 @@ info:
 ############################### Style ###############################
 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
+    color:  '#2196f3'
   navbar:
     height: 64px
     width: auto # auto, max
@@ -66,19 +69,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
 
 
 
@@ -455,7 +458,7 @@ comments:
   valine:
     appId: # your appId
     appKey: # your appKey
-    js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.4/js/valine.js
+    # js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.4/js/valine.js
     path: # All pages use the same path (share the same comments data)
     meta: nick,mail,link #valine comment header info
     placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )

source/css/_base/index.styl

@@ -37,6 +37,11 @@ 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

source/css/_defines/func.styl

@@ -34,3 +34,17 @@ disable-user-select()
   -ms-user-select: none
   -webkit-user-select: none
   user-select: none
+
+scrollbar($w = 4px, $c = mix($color-p, $color-card, 70))
+  &::-webkit-scrollbar
+    height: $w
+    width: $w
+  &::-webkit-scrollbar-track-piece
+    background: transparent
+  &::-webkit-scrollbar-thumb
+    background: alpha($c, .5)
+    cursor: pointer
+    border-radius: 2px
+    trans()
+    &:hover
+      background: $c

source/css/_third-party/valine.styl

@@ -25,23 +25,28 @@
             &:focus
               border-bottom: 1px solid $color-theme
 
+        .vemojis,.vpreview
+          justify-content: space-between
+          background: $color-block
+          border-radius: $border-codeblock
+          scrollbar()
+          i
+            width: auto
+            height: 36px
+            padding: 0
+            margin: 8px 8px 0 8px
+            #emoji,.emoji
+              height: 24px
+              margin-top: 6px
+              background: transparent
         .vedit
-          .vemojis,.vpreview
-            justify-content: space-between
-            background: $color-block
-            border-radius: $border-codeblock
-            i
-              width: auto
-              height: 36px
-              padding: 0
-              margin: 8px 8px 0 8px
-              #emoji
-                height: 24px
-                margin-top: 6px
-                background: transparent
-        .vedit .vctrl span
-          padding: 0
-          margin: 10px
+          .vctrl span
+            padding: 0
+            margin: 10px
+          svg
+            fill: $color-p
+            &.actived
+              fill: $color-theme
 
       button
         border: none
@@ -65,7 +70,7 @@
       pre code
         border: none
 
-      a, .vemoji-btn, .vpreview-btn
+      a
         color: $color-link
         trans()
         &:hover
@@ -106,15 +111,11 @@
           &:after
             background: alpha($color-block, .9)
             color: $color-text
-        .vh:hover
-          >.vmeta>.vat
-            opacity: 1
       .vmeta
         .vat
           font-weight: bold
           color: $color-link
           trans()
-          opacity: 0
           &:hover
             color: $color-hover
             text-decoration: underline
@@ -126,7 +127,7 @@
       p
         color: $color-text
     p
-      #emoji
+      #emoji,.emoji
         display: inline
         max-height: 28px
         background: transparent