source

themes/butterfly/source/css/_layout/aside.styl

@@ -60,6 +60,7 @@
       text-align: center
       line-height: 2.4
       addBorderRadius(7)
+      @extend .btn-effects
 
       &:hover
         background-color: var(--btn-hover-color)
@@ -180,6 +181,11 @@
     .card-category-list
       &.child
         padding: 0 0 0 16px
+        overflow: hidden
+        max-height: 0
+        opacity: 0
+        visibility: hidden
+        transition: max-height .3s ease, opacity .3s ease
 
       > .parent
         > a
@@ -188,7 +194,9 @@
               transform: rotate(-90deg)
 
             & + .child
-              display: block
+              max-height: 1000px
+              opacity: 1
+              visibility: visible
 
           .card-category-list
             &-name
@@ -207,7 +215,9 @@
 
         if hexo-config('aside.card_categories.expand') == false
           > .child
-            display: none
+            max-height: 0
+            opacity: 0
+            visibility: hidden
 
   .card-webinfo
     .webinfo

themes/butterfly/source/css/_layout/loading.styl

@@ -1,45 +1,95 @@
-if hexo-config('preloader')
+if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
   .loading-bg
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    background: #f0f0f2;
-    z-index: 1001;
-    opacity: 1;
-    transition: .3s;
+    position: fixed
+    z-index: 1000
+    width: 50%
+    height: 100%
+    background-color: var(--preloader-bg)
 
   #loading-box
-    .loading-img
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      margin: auto;
-      border: 4px solid #f0f0f2;
-      animation-duration: .3s;
-      animation-name: loadingAction;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-    .loading-image-dot
-      width: 30px;
-      height: 30px;
-      background: #6bdf8f;
-      position: absolute;
-      border-radius: 50%;
-      border: 6px solid #fff;
-      top: 50%;
-      left: 50%;
-      transform: translate(18px, 24px);
+    .loading-left-bg
+      @extend .loading-bg
+
+    .loading-right-bg
+      @extend .loading-bg
+      right: 0
+
+    .spinner-box
+      position: fixed
+      z-index: 1001
+      display: flex
+      justify-content: center
+      align-items: center
+      width: 100%
+      height: 100vh
+
+      .configure-border-1
+        position: absolute
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: #ffab91
+        animation: configure-clockwise 3s ease-in-out 0s infinite alternate
+
+      .configure-border-2
+        left: -115px
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: rgb(63, 249, 220)
+        transform: rotate(45deg)
+        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
+
+      .loading-word
+        position: absolute
+        color: var(--preloader-color)
+        font-size: 16px
+
+      .configure-core
+        width: 100%
+        height: 100%
+        background-color: var(--preloader-bg)
+
     &.loaded
-      .loading-bg
-        opacity: 0;
-        z-index: -1000;
+      .loading-left-bg
+        transition: all .5s
+        transform: translate(-100%, 0)
 
-  @keyframes loadingAction
-    0% {
-        opacity: 1;
-    }
+      .loading-right-bg
+        transition: all .5s
+        transform: translate(100%, 0)
 
-    100% {
-        opacity: .4;
-    }
+      .spinner-box
+        display: none
+
+  @keyframes configure-clockwise
+    0%
+      transform: rotate(0)
+
+    25%
+      transform: rotate(90deg)
+
+    50%
+      transform: rotate(180deg)
+
+    75%
+      transform: rotate(270deg)
+
+    100%
+      transform: rotate(360deg)
+
+  @keyframes configure-xclockwise
+    0%
+      transform: rotate(45deg)
+
+    25%
+      transform: rotate(-45deg)
+
+    50%
+      transform: rotate(-135deg)
+
+    75%
+      transform: rotate(-225deg)
+
+    100%
+      transform: rotate(-315deg)

themes/butterfly/source/css/_layout/reward.styl

@@ -15,9 +15,12 @@
     color: var(--btn-color)
     cursor: pointer
     addBorderRadius()
+    @extend .btn-effects
+    @extend .btn-effects-large
 
     i
       margin-right: 5px
+      vertical-align: baseline
 
   &:hover
     .reward-button
@@ -28,7 +31,7 @@
 
   .reward-main
     position: absolute
-    bottom: 40px
+    bottom: 50px
     left: 0
     z-index: 100
     display: none