source

themes/butterfly/source/css/_search/index.styl

@@ -20,22 +20,174 @@
     border-radius: 0
 
   .search-nav
-    margin: 0 0 14px
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin-bottom: 14px
     color: $search-color
     font-size: 1.4em
     line-height: 1
 
     .search-dialog-title
-      margin-right: 10px
+      margin-right: 4px
+
+    #loading-status
+      &[hidden]
+        display: none !important
 
     .search-close-button
-      float: right
+      flex: 1
       color: $grey
-      transition: color .2s ease-in-out
+      text-align: right
+      transition: all .2s ease
 
       &:hover
         color: $search-color
-  
+
+  .local-search-input,
+  #algolia-search-input
+    margin: 0 auto
+    max-width: 100%
+    width: 100%
+
+    input,
+    .ais-SearchBox-input
+      padding: 5px 14px
+      width: 100%
+      outline: none
+      border: 2px solid $search-color
+      border-radius: 40px
+      background: var(--search-bg)
+      color: var(--search-input-color)
+      -webkit-appearance: none
+
+      &::placeholder
+        color: var(--text-color)
+
+  .search-result-list,
+  .ais-Hits-list
+    overflow-y: overlay
+    margin: 0 -20px
+    padding: 0 22px
+    max-height: calc(80vh - 220px)
+
+    .local-search-hit-item,
+    .ais-Hits-item
+      display: flex
+      align-items: flex-start
+      margin: 3px 0
+      line-height: 1.8
+      transition: all .2s ease-in-out
+
+      &:hover
+        transform: translateY(-1px)
+
+      &:not([value])::before
+        display: none
+
+      &[value]::before
+        display: inline-flex
+        flex-shrink: 0
+        justify-content: center
+        align-items: center
+        margin-right: 6px
+        margin-top: 3px
+        min-width: 24px
+        color: $search-color
+        content: attr(value) '.'
+        font-weight: bold
+        font-style: italic
+        font-size: .9em
+
+      &::marker
+        content: none
+
+      a
+        flex: 1
+        color: var(--search-a-color)
+
+        &:hover
+          color: $search-color
+
+      .search-result-title,
+      .algolia-hits-item-title
+        font-weight: 600
+
+      .search-result,
+      .algolia-hit-item-content
+        margin: 0 0 8px
+        word-break: break-all
+        font-size: .9em
+
+  .ais-Pagination
+    margin: 15px 0 0
+    padding: 0
+    text-align: center
+
+    .ais-Pagination-list
+      display: flex
+      flex-wrap: wrap
+      justify-content: center
+      align-items: center
+      margin: 0
+      padding: 0
+      list-style: none
+      gap: 6px
+
+    .ais-Pagination-item
+      display: flex
+      padding: 0
+
+      &:not(.ais-Pagination-item--selected):not(.ais-Pagination-item--ellipsis):not(.ais-Pagination-item--disabled)
+        .ais-Pagination-link:hover
+          background: var(--btn-hover-color)
+          transform: translateY(-1px)
+
+      .ais-Pagination-link
+        display: inline-flex
+        justify-content: center
+        align-items: center
+        padding: 4px 8px
+        min-width: 28px
+        height: 28px
+        border-radius: 6px
+        background: var(--btn-bg)
+        color: var(--btn-color)
+        transition: all .2s ease
+
+        &.ais-Pagination-link--disabled
+          opacity: .3
+          cursor: not-allowed
+
+        i
+          font-size: 12px
+
+    .ais-Pagination-item--selected
+      .ais-Pagination-link
+        background: $theme-paginator-color
+        font-weight: 600
+        cursor: default
+
+    .ais-Pagination-item--ellipsis
+      .ais-Pagination-link
+        padding: 4px 2px
+        border: none
+        background: transparent
+        color: var(--text-color)
+        cursor: default
+
+        &:hover
+          background: transparent
+          transform: none
+
+    .ais-Pagination-item--disabled
+      .ais-Pagination-link
+        opacity: .4
+
+    +maxWidth768()
+      .ais-Pagination-list
+        gap: 4px
+
   hr
     margin: 15px auto
     @extend .custom-hr
@@ -50,6 +202,38 @@
   display: none
   background: rgba($dark-black, .6)
 
+.search-result-stats,
+.ais-Stats-text
+  margin: 15px 0 0
+  color: var(--text-color)
+  text-align: center
+  font-size: .9em
+
+.search-keyword
+  background: transparent
+  color: $search-keyword-highlight
+  font-weight: 600
+
+.search-loading
+  display: flex
+  justify-content: center
+  align-items: center
+  padding: 20px
+  color: var(--text-color)
+
+  &::before
+    width: 16px
+    height: 16px
+    border: 2px solid var(--text-color)
+    border-top-color: transparent
+    border-radius: 50%
+    content: ''
+    animation: spin 1s linear infinite
+
+@keyframes spin
+  to
+    transform: rotate(360deg)
+
 if hexo-config('search.use') == 'algolia_search'
   @require 'algolia'
 else if hexo-config('search.use') == 'local_search'