feat: 美化 firefox 瀏覽器滾動條

fix: Utterances 評論區在多個頁面顯示的是同一個評論區
fix: 修復評論配置爲 Livere 和 Facebook Comments 時，最新評論模塊仍然顯示的 bug
improvement: blueimp_md5 CDN 可配置
improvement: timeline 優化
improvement: css優化
improvement: 友情鏈接優化

source/css/_global/index.styl

@@ -30,8 +30,6 @@
   --toc-link-color: $toc-link-color
   --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
   --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
-  --timeline-bg: $timeline-content-bg
-  --timeline-border-color: $timeline-border-color
   --pseudo-hover: $pseudo-hover
   --headline-presudo: #a0a0a0
   --scrollbar-color: $scrollbar-color
@@ -49,6 +47,7 @@ body
   if !hexo-config('copy.enable')
     user-select: none
 
+// scrollbar - chrome/safari
 *::-webkit-scrollbar
   width: 8px
   height: 8px
@@ -59,6 +58,11 @@ body
 *::-webkit-scrollbar-track
   background-color: transparent
 
+// scrollbar - firefox
+*
+  scrollbar-width: thin
+  scrollbar-color: var(--scrollbar-color) transparent
+
 input::placeholder
   color: var(--font-color)
 

source/css/_highlight/highlight/diff.styl

@@ -1,5 +1,7 @@
 figure.highlight
   table
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
     &::-webkit-scrollbar-thumb
       background: var(--hlscrollbar-bg)
 

source/css/_highlight/prismjs/index.styl

@@ -6,6 +6,8 @@ if $highlight_theme != false
 
 #article-container
   pre[class*='language-']
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
     &::-webkit-scrollbar-thumb
       background: var(--hlscrollbar-bg)
 

source/css/_layout/aside.styl

@@ -173,9 +173,9 @@
   .card-archives ul.card-archive-list > .card-archive-list-item,
   .card-categories ul.card-category-list > .card-category-list-item
     a
-      display: inline-block
+      display: flex
+      flex-direction: row
       padding: 3px 10px
-      width: 100%
       color: var(--font-color)
       transition: all .4s
 
@@ -185,15 +185,9 @@
 
       span
         @extend .limit-one-line
-        display: inline-block
-        vertical-align: bottom
 
         &:first-child
-          width: 80%
-
-        &:last-child
-          width: 20%
-          text-align: right
+          flex: 1
 
   .card-categories
     .card-category-list
@@ -269,8 +263,8 @@
       +maxWidth900()
         max-height: calc(100vh - 140px)
 
-      & > .toc
-        margin: 0 20px
+      & > *
+        margin: 0 20px !important
 
         & > .toc-item > .toc-child
           margin-left: 10px

source/css/_layout/pagination.styl

@@ -57,13 +57,15 @@
   & > .recent-posts
     .pagination
       & > *
-        @extend .cardHover
         display: inline-block
         margin: 0 6px
         width: w = 2.5em
         height: w
         line-height: w
 
+      & > *:not(.space)
+        @extend .cardHover
+
         &:hover
           background: var(--btn-hover-color)
           color: var(--btn-color)

source/css/_mode/darkmode.styl

@@ -36,8 +36,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --hlnumber-color: alpha(#FFFFFF, .4)
     --hlscrollbar-bg: lighten(#121212, 5)
     --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
-    --timeline-bg: lighten(#121212, 5)
     --scrollbar-color: lighten(#121212, 5)
+    --timeline-bg: lighten(#121212, 5)
 
     #web_bg:before,
     #footer:before,

source/css/_mode/readmode.styl

@@ -11,8 +11,6 @@ if hexo-config('readmode')
     --exit-btn-bg: #C0C0C0
     --exit-btn-color: #fff
     --exit-btn-hover: darken(#C0C0C0, 20)
-    --timeline-bg: none
-    --timeline-border-color: none
     --pseudo-hover: none
 
   [data-theme='dark']

source/css/_tags/button.styl

@@ -7,10 +7,14 @@
     display: inline-block
     margin: 0 4px 6px
     padding: 0 15px
-    background-color: $btn-default-color
+    background-color: var(--btn-beautify-color, $btn-default-color)
     color: $btn-color
     line-height: 2
 
+    for $type in $color-types
+      &.{$type}
+        --btn-beautify-color: lookup('$tagsP-' + $type + '-color')
+
     &:hover
       background-color: var(--btn-hover-color)
 
@@ -38,29 +42,14 @@
     &:hover
       text-decoration: none
 
-    for $type in $tagsP-types
-      &.{$type}
-        background-color: lookup('$tagsP-' + $type + '-color')
-
-        &:hover
-          background-color: var(--btn-hover-color)
-
     &.outline
       border: 1px solid transparent
-      border-color: $btn-default-color
+      border-color: var(--btn-beautify-color, $btn-default-color)
       background-color: transparent
-      color: $btn-default-color
+      color: var(--btn-beautify-color, $btn-default-color)
 
       &:hover
-        background-color: $btn-default-color
+        background-color: var(--btn-beautify-color, $btn-default-color)
 
       &:hover
         color: white !important
-
-      for $type in $tagsP-types
-        &.{$type}
-          border-color: lookup('$tagsP-' + $type + '-color')
-          color: lookup('$tagsP-' + $type + '-color')
-
-          &:hover
-            background-color: lookup('$tagsP-' + $type + '-color')

source/css/_tags/label.styl

@@ -6,6 +6,6 @@
   &.default
     background-color: $btn-default-color
 
-  for $type in $tagsP-types
+  for $type in $color-types
     &.{$type}
       background-color: lookup('$tagsP-' + $type + '-color')

source/css/_tags/note.styl

@@ -16,7 +16,7 @@
     left: .8em
     font-size: larger
 
-  for $type in $tagsP-types
+  for $type in $color-types
     &.{$type}
       &:not(.disabled)
         border-left-color: lookup('$tagsP-' + $type + '-color') !important

source/css/_tags/timeline.styl

@@ -1,8 +1,13 @@
 #article-container
   .timeline
-    margin: 0 0 20px
+    margin: 0 0 20px 10px
     padding: 14px 20px 5px
-    border-left: 2px solid var(--timeline-border-color)
+    border-left: 2px solid var(--timeline-color, $theme-color)
+
+    for $type in $color-types
+      &.{$type}
+        --timeline-color: lookup('$tagsP-' + $type + '-color')
+        --timeline-bg: s('rgba(%s,%s,%s, 0.2)', red(lookup('$tagsP-' + $type + '-color')), green(lookup('$tagsP-' + $type + '-color')), blue(lookup('$tagsP-' + $type + '-color')))
 
     .timeline-item
       margin: 0 0 15px
@@ -10,7 +15,7 @@
       &:hover
         .item-circle
           &:before
-            border: 3px solid var(--pseudo-hover)
+            border-color: var(--timeline-color, $theme-color)
 
       &.headline
         .timeline-item-title
@@ -21,7 +26,12 @@
 
             &:before
               left: -28px
-              border: 4px solid var(--pseudo-hover)
+              border: 4px solid var(--timeline-color, $theme-color)
+
+        &:hover
+          .item-circle
+            &:before
+              border-color: var(--pseudo-hover)
 
       .timeline-item-title
         position: relative
@@ -33,7 +43,7 @@
           left: -27px
           width: 6px
           height: 6px
-          border: 3px solid var(--timeline-border-color)
+          border: 3px solid var(--pseudo-hover)
           border-radius: 50%
           background: var(--card-bg)
           content: ''
@@ -46,9 +56,9 @@
 
       .timeline-item-content
         position: relative
-        padding: 12px 10px
+        padding: 12px 15px
         border-radius: 8px
-        background: var(--timeline-bg)
+        background: var(--timeline-bg, lighten($theme-color, 85%))
         font-size: .93em
 
         & > :last-child

source/css/var.styl

@@ -162,7 +162,7 @@ $note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($l
 $note-modern-danger-text = #a94442
 $note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
 // Tag Plugins - Button/note
-$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
+$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
 $btn-color = #fff
 $btn-default-color = #777
 $tagsP-blue-color = #428bca
@@ -179,7 +179,5 @@ $tab-button-hover-bg = darken($tab-border-color, 8)
 $tab-active-border-color = $theme-color
 $tab-button-active-bg = $card-bg
 $tab-to-top-color = #99a9bf
-
-// timeline
-$timeline-content-bg = #f6f6f6
-$timeline-border-color = $theme-color
+// Tag Plugins - timeline
+$timeline-default-color = $theme-color