update theme to butterfly

themes/butterfly/source/css/_global/function.styl

@@ -159,7 +159,7 @@ if hexo-config('enter_transitions')
     animation: titleScale 1s
 
   canvas:not(#ribbon-canvas),
-  #web_bg
+  #web_bg.bg-animation
     animation: to_show 4s
 
   #ribbon-canvas

themes/butterfly/source/css/_highlight/highlight.styl

@@ -100,18 +100,23 @@ $code-block
   .highlight-tools
     display: flex
     align-items: center
+    overflow: hidden
     padding: 0 8px
     min-height: 24px
     height: 2.15em
     background: var(--hltools-bg)
     color: var(--hltools-color)
     font-size: $code-font-size
-    overflow: hidden
 
     & > *
-      padding: 5px
+      flex: 0 0 auto
+      margin: 2px
 
     i
+      display: inline-flex
+      justify-content: center
+      align-items: center
+      padding: 5px
       cursor: pointer
       transition: all .3s
 
@@ -127,31 +132,28 @@ $code-block
 
     if !$highlight_macstyle
       & > .macStyle
-        padding: 0
+        margin: 0
 
     .code-lang
-      flex: 1
+      flex: 1 1 auto
+      overflow: hidden
+      padding-right: 10px
       text-transform: uppercase
+      text-overflow: ellipsis
+      white-space: nowrap
       font-weight: bold
       font-size: 1.15em
       user-select: none
       -webkit-user-select: none
-      padding 2px
-
-    .copy-notice
-      padding-right: 2px
-      opacity: 0
-      transition: opacity .4s
 
     if hexo-config('code_blocks.language')
-      .code-lang
-        flex: 1
-    else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
-      & > div:nth-child(2)
-        flex: 1
+      margin-right: auto
+    else if !$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none'
+      & > :nth-child(2)
+        margin-right: auto
     else
-      .macStyle
-        flex: 1
+      & > :nth-child(1)
+        margin-right: auto
 
   .gutter
     user-select: none
@@ -163,17 +165,28 @@ $code-block
     td
       border: none
 
+.copy-notice
+  position: absolute
+  z-index: 99999
+  padding: 2px 6px
+  border-radius: 3px
+  background: var(--hltools-bg)
+  white-space: nowrap
+  font-size: 12px
+  pointer-events: none
+
 if $highlight_macstyle
   .container
     figure.highlight
       margin: 0 0 24px
-      border-radius: 7px
+      border-radius: 8px
       box-shadow: 0 5px 10px 0 $highlight-mac-border
       -webkit-transform: translateZ(0)
 
       .highlight-tools
         .macStyle
           display: flex
+          padding: 3px
 
           & > *
             margin-right: 8px
@@ -231,7 +244,7 @@ if hexo-config('code_blocks.height_limit')
         & ~ pre
           overflow: hidden
           height: unit(hexo-config('code_blocks.height_limit'), px)
-  
+
   @keyframes code-expand-key
     0%
       opacity: .6
@@ -264,8 +277,8 @@ if hexo-config('code_blocks.fullpage')
         & ~ table
           display: block
           overflow: auto
-          height: calc(100vh - 2.15em)
           margin-bottom: 0
+          height: calc(100vh - 2.15em)
 
   @keyframes code-fullpage
     0%,

themes/butterfly/source/css/_mode/darkmode.styl

@@ -130,6 +130,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     // hide-tags
     .hide-button,
+    .toggle-button,
     #post-outdate-notice,
     .error-img,
     .container iframe,
@@ -140,9 +141,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     img:not(.cover)
       if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
-        filter: blur(0) brightness(.8)
+        filter: blur(0) brightness(.88) contrast(.95)
       else
-        filter: brightness(.8)
+        filter: brightness(.88) contrast(.95)
 
     #aside-content .aside-list > .aside-list-item:not(:last-child)
       border-bottom: 1px dashed alpha(#FFFFFF, .1)

themes/butterfly/source/css/_mode/readmode.styl

@@ -42,6 +42,7 @@ if hexo-config('readmode')
       font-size: 16px
       transition: background .3s
       addBorderRadius(8)
+      @extend .btn-effects
 
       +maxWidth768()
         top: initial

themes/butterfly/source/css/_tags/hide.styl

@@ -39,11 +39,26 @@
   border: 1px solid $tag-hide-toggle-bg
   addBorderRadius(5, true)
 
+  & > .toggle-content
+    margin: 30px 24px
+
   & > .toggle-button
     padding: 6px 15px
     background: $tag-hide-toggle-bg
     color: #1F2D3D
+    list-style: none
     cursor: pointer
 
-  & > .toggle-content
-    margin: 30px 24px
+    &::-webkit-details-marker
+      display: none
+
+    &::before
+      @extend .fontawesomeIcon
+      margin-right: 8px
+      content: '\f0d7'
+      transition: transform .3s ease
+      transform: rotate(-90deg)
+      transform-origin: center center
+
+  &[open] summary::before
+    transform: rotate(0)