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

a hexo theme minimalism

// 搜索输入框样式
#search-input
  width 100%
  padding 15px 50px 15px 20px
  background rgba(0, 0, 0, 0.5)
  border 2px solid rgba(0, 255, 255, 0.3)
  border-radius 8px
  color #00ffff
  font-size 1.2rem
  transition all 0.3s ease
  
  &:focus
    outline none
    border-color rgba(0, 255, 255, 0.7)
    box-shadow 0 0 15px rgba(0, 255, 255, 0.3)
  
  &::placeholder
    color rgba(0, 255, 255, 0.5)

// 搜索结果容器
#search-results
  display none
  position relative // 从fixed改为relative
  width 100%
  max-width 100%
  max-height calc(100vh - 220px)
  overflow-y auto
  background rgba(0, 0, 0, 0.3)
  backdrop-filter blur(10px)
  border 1px solid rgba(0, 255, 255, 0.1)
  border-radius 8px
  box-shadow 0 0 20px rgba(0, 0, 0, 0.5)
  z-index 1002
  padding 15px
  margin-top 20px // 增加顶部边距，与搜索框保持距离

  &::-webkit-scrollbar
    width 6px
    height 6px

  &::-webkit-scrollbar-thumb
    background rgba(0, 255, 255, 0.3)
    border-radius 3px

  &::-webkit-scrollbar-track
    background rgba(0, 0, 0, 0.2)

// 各种搜索相关组件样式
.search-results-inner
  padding 20px

.search-grid
  display grid
  grid-template-columns repeat(auto-fill, minmax(300px, 1fr))
  gap 20px
  padding 20px

.search-card
  background rgba(255, 255, 255, 0.1)
  border-radius 10px
  padding 20px
  transition all 0.3s ease
  border 1px solid rgba(255, 255, 255, 0.1)

  &:hover
    transform translateY(-5px)
    background rgba(255, 255, 255, 0.15)
    box-shadow 0 5px 15px rgba(0, 0, 0, 0.3)

.card-title
  font-size 1.2em
  margin-bottom 10px
  
  a
    color #00ffff
    text-decoration none
    
    &:hover
      text-decoration underline

.card-excerpt
  color rgba(255, 255, 255, 0.7)
  font-size 0.9em
  margin 10px 0
  line-height 1.6

.card-tags
  margin-top 15px
  display flex
  flex-wrap wrap
  gap 8px

  .tag
    background rgba(0, 255, 255, 0.1)
    color #00ffff
    padding 4px 10px
    border-radius 15px
    font-size 0.8em
    text-decoration none
    transition all 0.3s ease

    &:hover
      background rgba(0, 255, 255, 0.2)

// 搜索结果列表 - 修改网格布局，避免错误嵌套
.search-results-list
  display flex
  flex-wrap wrap
  gap 15px
  padding 5px 0

  @media (max-width: 768px)
    flex-direction column
    gap 10px

// 搜索结果项 - 调整为固定宽度，避免不合适的大小
.search-result-item
  background rgba(255, 255, 255, 0.05)
  border 1px solid rgba(0, 255, 255, 0.1)
  border-radius 8px
  padding 15px
  margin-bottom 15px
  transition all 0.3s ease
  animation fadeInUp 0.5s ease forwards
  opacity 0
  width 100%
  max-width 100%
  box-sizing border-box
  
  // 使用正确的 Stylus for 循环语法
  for i in (1..20)
    &:nth-child({i})
      animation-delay (i * 0.05)s
  
  &:hover
    transform translateY(-5px)
    background rgba(255, 255, 255, 0.1)
    border-color rgba(0, 255, 255, 0.3)
    box-shadow 0 10px 20px rgba(0, 0, 0, 0.2)

// 搜索结果的标题、元数据、摘要和标签样式
.result-title
  font-size 1.2rem
  margin-bottom 10px
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  
  a
    color #00ffff
    text-decoration none
    
    &:hover
      text-decoration underline

.result-meta
  font-size 0.9rem
  color rgba(255, 255, 255, 0.6)
  margin-bottom 10px
  
  .result-date
    display flex
    align-items center
    
    img
      margin-right 5px
      width 16px
      height 16px

.result-excerpt
  font-size 0.95rem
  line-height 1.6
  color rgba(255, 255, 255, 0.7)
  margin 10px 0
  overflow hidden
  display -webkit-box
  -webkit-line-clamp 3
  -webkit-box-orient vertical
  max-height 72px // 限制最大高度，约为3行文字高度
  
  mark
    background-color rgba(0, 255, 255, 0.2)
    color #fff
    padding 0 3px
    border-radius 2px
    
  img
    max-width 100%
    height auto
    max-height 200px
    object-fit cover
    margin 10px 0
    border-radius 6px
    display block

.result-tags
  display flex
  flex-wrap wrap
  gap 8px
  margin-top 10px
  
  .tag
    background rgba(0, 255, 255, 0.1)
    color #00ffff
    padding 3px 8px
    font-size 0.8rem
    border-radius 20px
    text-decoration none
    transition all 0.3s ease
    
    &:hover
      background rgba(0, 255, 255, 0.2)

// 加载动画
.search-loading
  display flex
  flex-direction column
  align-items center
  justify-content center
  padding 30px
  
  .loading-spinner
    display inline-block
    width 40px
    height 40px
    border 4px solid rgba(0, 255, 255, 0.3)
    border-radius 50%
    border-top-color #00ffff
    animation spin 1s linear infinite
    margin-bottom 10px

  .loading-text
    color rgba(0, 255, 255, 0.7)
    font-size 1rem

// 加载中动画
.lds-ring
  display inline-block
  position relative
  width 64px
  height 64px
  margin-bottom 15px

  div
    box-sizing border-box
    display block
    position absolute
    width 51px
    height 51px
    margin 6px
    border 6px solid #00ffff
    border-radius 50%
    animation lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
    border-color #00ffff transparent transparent transparent
  
  div:nth-child(1)
    animation-delay -0.45s
  
  div:nth-child(2)
    animation-delay -0.3s
  
  div:nth-child(3)
    animation-delay -0.15s

// 没有结果
.no-result, .no-results
  color rgba(0, 255, 255, 0.7)
  text-align center
  padding 20px
  font-style italic
  font-size 1.1rem

// 搜索容器
.search-container
  position relative
  z-index 1001
  max-width 900px
  margin 80px auto 0
  padding 0 20px
  
  @media (max-width: 768px)
    margin-top 60px

// 搜索遮罩
.search-overlay
  display none
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0, 0, 0, 0.8)
  z-index 1001

// 搜索模态框，增强磨砂玻璃效果
.search-modal
  display none  // 初始为hidden而不是flex
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  z-index 2000
  // 增强磨砂玻璃效果
  background-color rgba(0, 0, 0, 0.75)
  backdrop-filter blur(15px)
  -webkit-backdrop-filter blur(15px)
  overflow-y auto
  opacity 0
  transition opacity 0.3s ease

  &.active
    display block
    animation fadeIn 0.3s ease
    opacity 1

// 搜索模态框内容
.search-modal-content
  max-width 800px
  width 90%
  margin 80px auto 0
  padding 20px
  // 可选：为内容区域也添加微妙的磨砂玻璃效果
  background rgba(0, 0, 0, 0.6)
  border-radius 12px
  box-shadow 0 5px 30px rgba(0, 0, 0, 0.4)
  border 1px solid rgba(0, 255, 255, 0.15)
  display flex // 添加flex布局
  flex-direction column // 垂直排列子元素
  
  @media (max-width: 768px)
    margin-top 60px
    padding 15px
    width 92%

// 搜索头部
.search-header
  position relative
  margin-bottom 20px
  width 100%

// 搜索表单
.search-form
  display flex
  align-items center
  position relative
  margin-bottom 20px
  width 100%

// 搜索关闭按钮
.search-close, .search-close-btn
  position absolute
  right 15px
  top 50%
  transform translateY(-50%)
  background transparent
  border none
  cursor pointer
  color #00ffff
  padding 5px
  display flex
  align-items center
  justify-content center
  transition all 0.2s ease
  
  &:hover
    color #fff
    transform translateY(-50%) scale(1.1)
  
  svg
    width 20px
    height 20px
    transition transform 0.3s ease
    
    &:hover
      transform rotate(90deg)

// 搜索切换
.search-toggle
  cursor pointer
  display flex
  align-items center
  transition color 0.2s ease
  
  &:hover
    color #00ffff
  
  img
    margin-right 5px

// 搜索按钮
.search-toggle-btn
  background none
  border none
  color #e1e1ff
  font-size 1.25rem
  font-weight 500
  font-family 'Arial', sans-serif
  display flex
  align-items center
  cursor pointer
  padding 0.5rem 1rem
  transition color 0.3s ease
  
  &:hover
    color #fff
  
  img
    width 32px
    height 32px
    vertical-align middle
    margin-right 5px

// 结果内容过渡
.search-results-content
  transition all 0.3s ease

// 错误消息
.error-message
  text-align center
  padding 15px
  color #ff6b6b
  font-size 0.95rem
  background rgba(255, 30, 30, 0.1)
  border-left 3px solid #ff5555
  padding 15px
  margin 10px 0
  border-radius 4px
  
  small
    display block
    margin-top 8px
    opacity 0.8

// 键盘快捷键提示
.search-shortcuts, .search-shortcut-tips
  display flex
  justify-content center
  padding 20px 0
  color rgba(255, 255, 255, 0.5)
  font-size 0.9rem
  text-align center
  margin-top 20px
  
  .shortcut
    display flex
    align-items center
    margin 0 10px
  
  .key
    display inline-block
    background rgba(255, 255, 255, 0.1)
    border-radius 3px
    padding 2px 6px
    margin 0 5px
    font-family monospace

// 搜索结果区域
.search-results
  overflow-y auto
  max-height calc(100vh - 250px) // 减少最大高度，避免溢出视窗
  width 100%
  box-sizing border-box
  padding 5px
  
  &::-webkit-scrollbar
    width 6px
  
  &::-webkit-scrollbar-track
    background rgba(0, 0, 0, 0.3)
  
  &::-webkit-scrollbar-thumb
    background rgba(0, 255, 255, 0.3)
    border-radius 3px

// 搜索统计信息样式
.search-stats
  text-align center
  color rgba(0, 255, 255, 0.7)
  font-size 0.9rem
  margin-top 15px
  padding 5px 0
  border-top 1px dashed rgba(0, 255, 255, 0.2)

// 激活搜索时的body状态
body.search-active
  overflow hidden

// 动画关键帧
@keyframes fadeIn
  from
    opacity 0
  to
    opacity 1

@keyframes fadeInUp
  from
    opacity 0
    transform translateY(20px)
  to
    opacity 1
    transform translateY(0)

@keyframes lds-ring
  0%
    transform rotate(0deg)
  100%
    transform rotate(360deg)

@keyframes spin
  to
    transform rotate(360deg)

// 增强高亮样式
mark
  background rgba(0, 255, 255, 0.25)
  color #ffffff
  padding 0 2px
  border-radius 2px
  box-shadow 0 0 2px rgba(0, 255, 255, 0.4)

// 响应式调整
@media (max-width: 768px)
  .search-results-list
    flex-direction column
  
  #search-input
    padding 12px 15px
    font-size 1rem
  
  .search-close svg
    width 20px
    height 20px
    
  .search-result-item
    width 100%
    margin-bottom 10px
    padding 12px

// 增加额外的媒体查询以优化不同屏幕大小下的显示
@media (min-width: 769px) and (max-width: 1200px)
  .search-result-item
    width 100%