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

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

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

source/css/_layout/reward.styl

@@ -3,6 +3,10 @@
   margin-top: 80px
   width: 100%
   text-align: center
+  pointer-events: none
+
+  & > *
+    pointer-events: auto
 
   .reward-button
     display: inline-block
@@ -10,9 +14,11 @@
     background: var(--btn-bg)
     color: var(--btn-color)
     cursor: pointer
-    transition: all .4s
 
   &:hover
+    .reward-button
+      background: var(--btn-hover-color)
+
     & > .reward-main
       display: block
 

source/css/_layout/rightside.styl

@@ -7,7 +7,19 @@
   transition: all .5s
 
   #rightside-config-hide
-    display: none
+    height: 0
+    opacity: 0
+    transition: transform .4s
+    transform: translate(45px, 0)
+
+    &.show
+      height: auto
+      opacity: 1
+      transform: translate(0, 0)
+
+    &.status
+      height: auto
+      opacity: 1
 
   & > div
     & > button,
@@ -35,19 +47,3 @@
   +maxWidth900()
     #hide-aside-btn
       display: none
-
-@keyframes rightside-item-in
-  0%
-    transform: translate(48px, 0)
-
-  100%
-    transform: translate(0, 0)
-
-@keyframes rightside-item-out
-  0%
-    display: block
-    transform: translate(0, 0)
-
-  100%
-    display: none
-    transform: translate(48px, 0)