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

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

_config.yml

@@ -163,6 +163,10 @@ index_post_content:
   method: 3
   length: 500 # if you set method to 2 or 3, the length need to config
 
+# anchor
+# when you scroll in post, the URL will update according to header id.
+anchor: false
+
 # Post
 # --------------------------------------
 
@@ -215,10 +219,6 @@ photofigcaption: false
 # false: disable pagination
 post_pagination: 1
 
-# anchor
-# when you scroll in post, the URL will update according to header id.
-anchor: false
-
 # Displays outdated notice for a post (文章過期提醒)
 noticeOutdate:
   enable: false
@@ -560,8 +560,8 @@ display_mode: light
 beautify:
   enable: false
   field: post # site/post
-  title-prefix-icon: '\f0c1'
+  title-prefix-icon: # '\f0c1'
-  title-prefix-icon-color: '#F47466'
+  title-prefix-icon-color: # '#F47466'
 
 # Global font settings
 # Don't modify the following settings unless you know how they work (非必要不要修改)

layout/includes/post/reward.pug

@@ -1,5 +1,5 @@
 .post-reward
-  .reward-button.button--animated
+  .reward-button
     i.fas.fa-qrcode
     = ' ' + _p('donate')
   .reward-main

layout/includes/widget/card_author.pug

@@ -23,7 +23,7 @@ if theme.aside.card_author.enable
           .length-num= site.categories.length
 
     if theme.aside.card_author.button.enable
-      a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
+      a#card-info-btn(href=theme.aside.card_author.button.link)
         i(class=theme.aside.card_author.button.icon)
         span=theme.aside.card_author.button.text
   

scripts/tag/button.js

@@ -21,7 +21,7 @@ function btn (args) {
   icon = icon.trim()
   option = option.trim()
 
-  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" 
+  return `<a class="btn-beautify ${option}" href="${urlFor(url)}" 
   title="${text}">${icon.length ? `<i class="${icon}"></i>` : ''}${text.length ? `<span>${text}</span>` : ''}</a>`
 }
 

scripts/tag/hide.js

@@ -28,7 +28,7 @@ function hideInline (args) {
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<span class="hide-inline"><button type="button" class="hide-button button--animated" ${group}>${display}
+  return `<span class="hide-inline"><button type="button" class="hide-button" ${group}>${display}
   </button><span class="hide-content">${content}</span></span>`
 }
 
@@ -43,7 +43,7 @@ function hideBlock (args, content) {
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display}
+  return `<div class="hide-block"><button type="button" class="hide-button" ${group}>${display}
     </button><div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
 }
 

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
+        margin: 4px 0
-        padding-left: 6px
+        padding: 1px 6px
-        border-left: 3px solid transparent
         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)

source/css/_mode/darkmode.styl

@@ -21,6 +21,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --btn-bg: lighten(#121212, 5)
     --text-bg-hover: lighten(#121212, 15)
     --light-grey: alpha(#FFFFFF, .7)
+    --dark-grey: alpha(#FFFFFF, .2)
     --white: alpha(#FFFFFF, .9)
     --text-highlight-color: alpha(#FFFFFF, .9)
     --blockquote-color: alpha(#FFFFFF, .7)
@@ -36,6 +37,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --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)
 
     #web_bg:before,
     #footer:before,

source/css/_mode/readmode.styl

@@ -187,9 +187,6 @@ if hexo-config('readmode')
         background: var(--readmode-light-color) !important
         color: var(--font-color) !important
 
-      .button--animated:before
-        background: var(--readmode-light-color) !important
-
       .note
         border: 2px solid var(--gray)
         border-left-color: var(--gray) !important

source/css/_page/common.styl

@@ -29,7 +29,7 @@
       padding: 36px 14px
 
   & > div:first-child
-    width: 75%
+    width: 74%
     transition: all .3s
 
     +maxWidth900()

source/css/_tags/button.styl

@@ -11,6 +11,9 @@
     color: $btn-color
     line-height: 2
 
+    &:hover
+      background-color: var(--btn-hover-color)
+
     i + span
       margin-left: 6px
 
@@ -39,15 +42,17 @@
       &.{$type}
         background-color: lookup('$tagsP-' + $type + '-color')
 
+        &:hover
+          background-color: var(--btn-hover-color)
+
     &.outline
       border: 1px solid transparent
       border-color: $btn-default-color
       background-color: transparent
       color: $btn-default-color
-      transition: all .3s
 
-      &.button--animated:before
+      &:hover
-        background: $btn-default-color
+        background-color: $btn-default-color
 
       &:hover
         color: white !important
@@ -57,5 +62,5 @@
           border-color: lookup('$tagsP-' + $type + '-color')
           color: lookup('$tagsP-' + $type + '-color')
 
-          &.button--animated:before
+          &:hover
-            background: lookup('$tagsP-' + $type + '-color')
+            background-color: lookup('$tagsP-' + $type + '-color')

source/css/_tags/hide.styl

@@ -7,6 +7,9 @@
     background: $tag-hide-bg
     color: var(--white)
 
+    &:hover
+      background-color: var(--btn-hover-color)
+
     &.open
       display: none
 

source/css/var.styl

@@ -24,8 +24,8 @@ $hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon'
 $hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px
 // page beatutify
 $beautifyEnable = hexo-config('beautify.enable')
-$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
+$title-prefix-icon = $beautifyEnable && hexo-config('beautify.title-prefix-icon') ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
-$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
+$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title-prefix-icon-color') ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
 // Global Variables
 $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
 $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
@@ -39,6 +39,7 @@ $light-blue = $theme-color
 $dark-black = #000000
 $light-grey = #EEEEEE
 $grey = #858585
+$dark-grey = #cacaca
 $white = #FFFFFF
 $whitesmoke = #f5f5f5
 $font-black = #4C4948
@@ -61,13 +62,16 @@ $sidebar-background = #f6f8fa
 $sidebar-width = 300px
 // aside
 $toc-link-color = #666261
-$toc-mobile-width = 300px
+$toc-mobile-width = calc(100% - 80px)
+$toc-mobile-maxWidth = 380px
 $toc-active-color = #fff
 // Button
 $button-color = #fff
 $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
 $button-bg = $theme-color
 $pseudo-hover = $button-hover-color
+// scrollbar
+$scrollbar-color= $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
 // table
 $table-thead-bg = #99a9bf
 // reward

source/js/main.js

@@ -296,7 +296,7 @@ document.addEventListener('DOMContentLoaded', function () {
           }
           $header.classList.add('nav-fixed')
           if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
-            $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
+            $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
           }
         } else {
           if (currentTop === 0) {
@@ -306,7 +306,7 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         if (document.body.scrollHeight <= innerHeight) {
-          $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
+          $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
         }
       }, 200)()
     }
@@ -478,15 +478,16 @@ document.addEventListener('DOMContentLoaded', function () {
       window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
       typeof runMermaid === 'function' && window.runMermaid()
     },
-    showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
+    showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
-      const target = document.getElementById('rightside-config-hide')
+      const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
-      if (window.rightSideIn) {
+      rightsideHideClassList.toggle('show')
-        window.rightSideIn = false
+      if (e.classList.contains('show')) {
-        btf.animateOut(target, 'rightside-item-out 0.5s')
+        rightsideHideClassList.add('status')
-      } else {
+        setTimeout(() => {
-        window.rightSideIn = true
+          rightsideHideClassList.remove('status')
-        btf.animateIn(target, 'rightside-item-in 0.5s')
+        }, 300)
       }
+      e.classList.toggle('show')
     },
     scrollToTop: () => { // Back to top
       btf.scrollToDest(0, 500)
@@ -506,13 +507,13 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   document.getElementById('rightside').addEventListener('click', function (e) {
-    const $target = e.target.id || e.target.parentNode.id
+    const $target = e.target.id ? e.target : e.target.parentNode
-    switch ($target) {
+    switch ($target.id) {
       case 'go-up':
         rightSideFn.scrollToTop()
         break
       case 'rightside_config':
-        rightSideFn.showOrHideBtn()
+        rightSideFn.showOrHideBtn($target)
         break
       case 'mobile-toc-button':
         rightSideFn.runMobileToc()
@@ -534,7 +535,6 @@ document.addEventListener('DOMContentLoaded', function () {
   /**
    * menu
    * 側邊欄sub-menu 展開/收縮
-   * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
    */
   const clickFnOfSubMenu = () => {
     document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
@@ -594,7 +594,7 @@ document.addEventListener('DOMContentLoaded', function () {
   /**
    * table overflow
    */
-  const addTableWrap = function () {
+  const addTableWrap = () => {
     const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
     if ($table.length) {
       $table.forEach(item => {