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-color: '#F47466'
+  title-prefix-icon: # '\f0c1'
+  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
-        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,16 +3,22 @@
   margin-top: 80px
   width: 100%
   text-align: center
+  pointer-events: none
+
+  & > *
+    pointer-events: auto
 
   .reward-button
     display: inline-block
     padding: 4px 24px
     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
-        background: $btn-default-color
+      &:hover
+        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
-            background: lookup('$tagsP-' + $type + '-color')
+          &:hover
+            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