source

themes/butterfly/source/css/_page/common.styl

@@ -18,7 +18,7 @@
     padding: 20px 5px
 
   +minWidth2000()
-    max-width: 70%
+    max-width: 60%
 
   & > div:first-child:not(.nc)
     @extend .cardHover

themes/butterfly/source/css/_page/shuoshuo.styl

@@ -76,3 +76,110 @@
 
     &.no-comment
       display: none
+
+.shuoshuo-navigation
+  display: flex
+  justify-content: center
+  align-items: center
+  margin-top: 20px
+  padding: 20px 0
+
+  button
+    display: flex
+    justify-content: center
+    align-items: center
+    width: 2.7em
+    height: 2.7em
+    background-color: var(--btn-bg)
+    color: var(--btn-color)
+    font-size: .9em
+    line-height: 2.5em
+    transition: all .2s ease-in-out
+    addBorderRadius(6)
+
+    &:not(:disabled)
+      @extend .btn-effects
+
+    &:hover:not(:disabled)
+      background-color: var(--btn-hover-color)
+
+    &:disabled
+      background: #f5f5f5
+      color: #ccc
+      opacity: .5
+      cursor: not-allowed
+
+  .shuoshuo-page-info
+    margin: 0 15px
+    color: #858585
+    white-space: nowrap
+    font-size: .9em
+
+  .shuoshuo-page-input
+    margin-right: 12px
+    padding: 0 15px
+    height: 2.7em
+    border: 1px solid var(--btn-bg)
+    background: var(--card-bg)
+    color: #858585
+    text-align: center
+    font-size: .9em
+    transition: all .2s ease-in-out
+    addBorderRadius(6)
+
+    &:focus
+      outline: none
+      border-width: 2px
+
+      &::placeholder
+        color: transparent
+
+    /* 隱藏 number 輸入框的上下箭頭 */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button
+      margin: 0
+      -webkit-appearance: none
+
+    /* Firefox */
+    -moz-appearance: textfield
+
+    /* 當作為頁碼按鈕時的樣式 */
+    &.shuoshuo-page-num
+      min-width: 40px
+      width: 40px
+      border: none
+      background: $light-blue
+      color: var(--white)
+      font-weight: 500
+      cursor: text
+
+      &:focus
+        border: 1px solid $light-blue
+        background: var(--white)
+        color: #333
+
+    /* 超出範圍時的紅色樣式 */
+    &.invalid
+      border-color: #ff4757
+      background-color: #ffeaea
+      color: #ff4757
+      animation: shake .5s ease-in-out
+
+  /* 震動動畫 */
+  @keyframes shake
+    0%,
+    100%
+      transform: translateX(0)
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90%
+      transform: translateX(-2px)
+
+    20%,
+    40%,
+    60%,
+    80%
+      transform: translateX(2px)

themes/butterfly/source/css/_page/tags.styl

@@ -1,27 +1,91 @@
 .tag-cloud
   &-list
+    animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1)
+
+    &:hover a:not(:hover)
+      opacity: .7
+      transform: scale(.98)
+
     a
+      position: relative
       display: inline-block
-      margin: 2px
-      padding: 2px 7px
+      margin: 5px
+      padding: 3px 12px
       line-height: 1.7
-      transition: all .3s
-      addBorderRadius(5)
+      transition: all .3s cubic-bezier(.4, 0, .2, 1)
+      addBorderRadius(7)
+      overflow: hidden
+      color: white
+      transform: translateY(0) scale(1)
+      will-change: transform, background-color, box-shadow
+
+      &::before
+        position: absolute
+        top: 0
+        left: -100%
+        z-index: -1
+        width: 100%
+        height: 100%
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
+        content: ''
+        transition: left .6s cubic-bezier(.4, 0, .2, 1)
 
       &:hover
-        background: var(--btn-bg) !important
-        box-shadow: 2px 2px 6px rgba(0, 0, 0, .2)
+        background: var(--btn-hover-color) !important
+        box-shadow:
+          0 6px 20px rgba(0, 0, 0, .12),
+          0 4px 8px rgba(0, 0, 0, .08),
+          0 0 0 1px rgba(255, 255, 255, .05)
         color: var(--btn-color) !important
+        transform: translateY(-2px) scale(1.02)
+
+        &::before
+          left: 100%
+
+      &:active
+        box-shadow:
+          0 3px 8px rgba(0, 0, 0, .15),
+          0 1px 3px rgba(0, 0, 0, .1)
+        transition: all .15s cubic-bezier(.4, 0, .2, 1)
+        transform: translateY(-1px) scale(.98)
 
       +maxWidth768()
         zoom: .85
 
+        &:hover
+          transform: translateY(-1px) scale(1.01)
+
+        &:active
+          transform: translateY(0) scale(.99)
+
+        &::before
+          display: none
+
   &-title
     font-size: 2.57em
+    animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1)
 
     +maxWidth768()
       font-size: 2em
 
+@keyframes tagsFadeIn
+  from
+    opacity: 0
+    transform: translateY(20px)
+
+  to
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titleSlideIn
+  from
+    opacity: 0
+    transform: translateX(-30px)
+
+  to
+    opacity: 1
+    transform: translateX(0)
+
 .page-title
   & + .tag-cloud-list
     text-align: left