feat: toc 間隔調整, 直接子元素增加豎線辨識 closed #723

fix: 修復 toc 在小設備上顯示出屏幕外的 bug
fix: 修復在打賞按鈕周圍也會觸發打賞彈窗的 bug
fix: Waline 最近評論的時間只顯示 "剛剛" 的問題 (以docker的方式執行) #730
fix: 修復點擊右下角顯示按鈕時,按鈕沒有出現的 bug
remove: 移除 button 的 hover 效果

source/css/_global/index.styl

@@ -21,6 +21,7 @@
   --btn-bg: $button-bg
   --text-bg-hover: rgba($text-bg-hover, .7)
   --light-grey: $light-grey
+  --dark-grey: $dark-grey
   --white: $white
   --text-highlight-color: $text-highlight-color
   --blockquote-color: $blockquote-color
@@ -33,6 +34,7 @@
   --timeline-border-color: $timeline-border-color
   --pseudo-hover: $pseudo-hover
   --headline-presudo: #a0a0a0
+  --scrollbar-color: $scrollbar-color
 
 body
   position: relative
@@ -52,7 +54,7 @@ body
   height: 8px
 
 *::-webkit-scrollbar-thumb
-  background: var(--btn-bg)
+  background: var(--scrollbar-color)
 
 *::-webkit-scrollbar-track
   background-color: transparent
@@ -176,29 +178,6 @@ if $site-name-font
 .pull-right
   float: right
 
-.button--animated
-  position: relative
-  z-index: 1
-  transition: color 1s
-
-  &:before
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    z-index: -1
-    background: var(--btn-hover-color)
-    content: ''
-    transition: transform .5s ease-out
-    transform: scaleX(0)
-    transform-origin: 0 50%
-
-  &:hover
-    &:before
-      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
-      transform: scaleX(1)
-
 img
   &[src=''],
   &:not([src])

source/css/_layout/aside.styl

@@ -1,5 +1,5 @@
 #aside-content
-  width: 25%
+  width: 26%
 
   +minWidth900()
     if hexo-config('aside.position') == 'right'
@@ -79,6 +79,9 @@
       text-align: center
       line-height: 2.4
 
+      &:hover
+        background-color: var(--btn-hover-color)
+
       span
         padding-left: 10px
 
@@ -243,6 +246,7 @@
       right: -100%
       bottom: 30px
       z-index: 100
+      max-width: $toc-mobile-maxWidth
       max-height: calc(100% - 60px)
       width: $toc-mobile-width
       opacity: 0
@@ -257,14 +261,22 @@
       font-size: 140%
 
     .toc-content
-      clear: both
       overflow-y: scroll
       overflow-y: overlay
+      margin: 0 -24px
       max-height: calc(100vh - 120px)
 
       +maxWidth900()
         max-height: calc(100vh - 140px)
 
+      & > .toc
+        margin: 0 20px
+
+        & > .toc-item > .toc-child
+          margin-left: 10px
+          padding-left: 10px
+          border-left: 1px solid var(--dark-grey)
+
       &:not(.is-expand)
         .toc-child
           display: none
@@ -286,18 +298,19 @@
 
       ol
         margin: 0
-        padding-left: 15px
+        padding-left: 18px
 
       .toc-link
         display: block
-        padding-right: 8px
-        padding-left: 6px
-        border-left: 3px solid transparent
+        margin: 4px 0
+        padding: 1px 6px
         color: var(--toc-link-color)
         transition: all .2s ease-in-out
 
+        &:hover
+          color: $theme-color
+
         &.active
-          border-left-color: darken($theme-toc-color, 20%)
           background: $theme-toc-color
           color: $toc-active-color
 

source/css/_layout/head.styl

@@ -304,6 +304,7 @@
         background-color: var(--sidebar-bg)
         box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
         animation: sub_menus .3s .1s ease both
+        border-radius: 5px
 
         &:before
           position: absolute
@@ -319,9 +320,13 @@
           &:hover
             background: var(--text-bg-hover)
 
+          &:first-child
+            border-radius: 5px 5px 0 0
+          &:last-child
+            border-radius: 0 0 5px 5px
           a
             display: inline-block
-            padding: 6px 14px
+            padding: 8px 16px
             width: 100%
             color: var(--font-color) !important
             text-shadow: none !important