hexo-theme-reimu/source/css/_partial/search.styl

A Hakurei Reimu style Hexo theme

.popup
  visibility: hidden
  position: fixed
  top: 10%
  left: 50%
  width: 700px
  max-height: 80%
  margin-left: -350px
  background: var(--color-wrap)
  color: var(--grey-9)
  z-index: 9999
  border-radius: post-radius
  opacity: 0
  transform: scale(0.5)
  transition: 0.3s
  box-shadow: 0 0 10px var(--color-meta-shadow)

  &.show
    visibility: visible
    opacity: 1
    transform: scale(1)

  @media mg-normal
    top: 0
    left: 0
    margin: 0
    width: 100%
    height: 100%
    border-radius: 0
    max-height: 100%

.reimu-popup
  overflow: hidden
  padding: 0

.popup-btn-close
  color: var(--red-1)
  font: 20px bold
  cursor: var(--cursor-pointer) !important
  padding-left: 15px
  transition: 0.3s

  &:hover
    opacity: .8

.reimu-search
  display: flex
  align-items: center
  padding: 8px 15px
  max-height: 50px
  border-bottom: 1px solid #ccc

.reimu-search-input-icon
  display: inline-block
  width: 20px
  font-size: 18px
  vertical-align: middle
  margin-right: 5px

.reimu-search-input
  flex: 1

  input
    width: 100%
    outline: none
    border: none
    background: transparent
    color: var(--grey-9)
    font-size: 16px
    vertical-align: middle
    font-family: font-basic

  input[type=search]::-webkit-search-cancel-button
    -webkit-appearance: none

.reimu-powered
  float: right
  cursor: var(--cursor-default) !important

  img
    display: inline-block
    height: 18px
    vertical-align: middle

.reimu-results
  position: relative
  overflow: auto
  padding: 15px 30px
  box-sizing: border-box
  max-height: calc(100% - 50px)

  @media mq-normal
    min-height: 300px

  hr
    margin: 10px 0

  em
    font-weight: bold
    margin: 0
    padding: 0 2px
    color: var(--red-1)

#reimu-hits
  margin: 10px 0 0 10px

  mark
    background: var(--red-1)
    color: #fff

.reimu-hit-item-link
  display: block
  text-decoration: none
  color: var(--red-2)
  padding: 12px 0 12px 25px
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden

  &:before
    content: ""
    width: 6px
    height: 12px
    background: var(--color-h2-after)
    display: inline-block
    vertical-align: middle
    margin: -2px 11px 0 -25px
    box-shadow: var(--shadow-red-6-shadow)
    opacity: 0.5
    transition: 0.2s

  &:hover:before
    height: 6px
    border-radius: 50%
    opacity: 1

.reimu-pagination
  margin: 10px auto
  border-radius: post-radius
  text-align: center
  color: var(--grey-9)
  overflow: hidden

  a
    padding: 10px 15px
    color: var(--grey-9)
    text-decoration: none
    transition: 0.2s

    &:hover
      background: var(--red-2)
      box-shadow: var(--shadow-red-6-shadow)
      color: #fff

  .pagination-item
    display: inline-block

  .page-number
    display: inline-block
    border-radius: post-radius
    margin: 5px

  .current
    .page-number
      color: #fff
      background: var(--red-1)
      font-weight: bold
      box-shadow: var(--shadow-red-6-shadow)

  .disabled-item
    display: none


.reimu-bg
  position: absolute
  right: 0
  bottom: 0
  z-index: -1
  opacity: .5

#reimu-hits-empty
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap