hexo-theme-wang/source/css/paginator.styl

a hexo theme minimalism

.paginator {
  display: flex
  justify-content: center
  padding: 30px 0
  
  .page-number, .extend {  // 匹配Hexo生成的类名
    min-width: 45px
    height: 45px
    margin: 0 5px
    display: flex
    align-items: center
    justify-content: center
    background: rgba(255, 255, 255, 0.1)
    border: 1px solid rgba(255, 255, 255, 0.2)
    border-radius: 8px
    color: #00ffff
    text-decoration: none
    transition: all 0.3s ease
    font-size: 1.1em
    
    &:hover {
      background: rgba(255, 255, 255, 0.2)
      color: #66ffff
      transform: translateY(-2px)
      box-shadow: 0 4px 12px rgba(0,0,0,0.12)
    }
    
    &.current {  // 当前页样式
      background: rgba(255, 255, 255, 0.25)
      color: #ffffff
      font-weight: bold
      border-color: rgba(255, 255, 255, 0.3)
      box-shadow: 0 2px 8px rgba(0,0,0,0.15)
      
      &:hover {
        transform: none
      }
    }
  }
  
  .space {  // 省略号样式
    padding: 0 10px
    color: #ffffff
    display: flex
    align-items: center
  }
  
  .extend {  // 上一页下一页按钮样式
    font-weight: bold
    min-width: 60px  // 稍微加宽
    
    &.prev {
      margin-right: 10px
    }
    
    &.next {
      margin-left: 10px
    }
  }
  
  // 包装器样式
  nav {
    background: rgba(255, 255, 255, 0.05)
    padding: 10px
    border-radius: 12px
    box-shadow: 0 2px 8px rgba(0,0,0,0.08)
    display: flex
    align-items: center
    gap: 5px
  }
}