source

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)