hexo-theme-shoka/source/css/_common/components/third-party/search.styl

#search {
  position: fixed;
  background: linear-gradient(-225deg,var(--color-cyan-light) 0,var(--color-pink-light) 100%);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  z-index: $zindex-4;
  display: none;

  >.inner {
    border-radius: 0;
    height: 100%;
    margin: 0 auto;
    width: 43.75rem;
    text-shadow: none;

    +mobile() {
      width: 100%;
    }
    .icon,
    .close-btn {
      color: var(--grey-5);
      font-size: 1.125rem;
      padding: 0 .625rem;
    }

    .close-btn {
      cursor: pointer;

      &:hover i {
        color: var(--grey-7);
      }
    }

    .header {
      display: flex;
      background: var(--grey-1-a5);
      border-radius: 3rem;
      padding: .5rem 1.5rem;
      margin-bottom: 1.25rem;
      border: .0625rem solid var(--grey-5);
      font-size: $font-size-large;
      align-items: center;
    }

    .search-input-container {
      flex-grow: 1;

      form {
        padding: .125rem;
      }
    }

    .search-input {
      background: transparent;
      border: 0;
      outline: 0;
      width: 100%;

      &::-webkit-search-cancel-button {
        display: none;
      }
    }
  }


  .results {
    height: calc(100% - 6.25rem);
    padding: 1.875rem 1.875rem .3125rem;
    border-radius: .3125rem;

    background: var(--grey-1-a7) url(../images/search.png) no-repeat bottom right;

    color: var(--text-color);

    .inner {
      position: relative;
      height: 100%;
      overflow: hidden;
    }

    hr {
      margin: .625rem 0;
    }
  }

}


.algolia-powered {
  float: right;
  background: url('../images/algolia_logo.svg') no-repeat;
  display: inline-block;
  height: 1.125rem;
  width: 4.25rem;
  margin: .5rem auto;
}


#search-hits {
  overflow-y: scroll;
  height: calc(100% - 8.125rem);

  ol {
    padding: 0;
  }

  .item {
    margin: .9375rem 0;

    a {
      border-bottom: .0625rem dashed var(--grey-4);
      display: block;
      the-transition();
    }

    span {
      font-size: 70%;
      display: block;

      i {
        color: var(--grey-4);
        margin: 0 .3125rem;
      }
    }
  }

}


#search-pagination {
  ul {
    padding: 0rem;
    margin: 1.25rem 0;
  }
  .pagination {
    opacity: 1;
    padding: 0;
  }

  .pagination-item {
    display: inline-block;
  }

  .page-number {
    the-transition();
  }

  .current .page-number {
    @extend .pagination .page-number.current;
    cursor: default;
  }

  .disabled-item {
    color: var(--grey-4);
    cursor: default;

    .page-number:hover {
      color: var(--grey-4);
      background: none;
      box-shadow: none;
    }

  }
}