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

A Simple Clean Theme for Hexo with user-friendly Navigation System.

.search-post
  border-top 2px dashed #bbb;
  margin: 0.8rem 0;
  .search-post-title 
    padding: 1.44rem 1rem;
    font-size: 2.08rem;
    .title
      margin-right: 1.12rem
    a.tag
      text-decoration: underline;
      font-size: 0.9em;
      color: var(--text-secondary-color);
      &:hover
        color: var(--link-hover-color);

  span.search-key-word 
    color: var(--link-hover-color);
    font-weight: bold;
  
  .search-post-tags 
    padding: 0 1.92rem;
    margin-bottom: 1.6rem;
  
  .search-post-content ul 
    margin: 1em 0;
    padding-inline-start: 30px;
    list-style-type: square;
    margin-top: 0;


.search-shadow 
  transition: all .2s ease;

.search-shadow.active 
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #00000012;

.search-box 
  display: none;

.search-box.active 
  display: block;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

.search-container 
  display: none;

.active .search-container 
  display: block;
  width: 70%;
  margin: 72px auto 0;
  padding: 1em .5em 1em 1em;
  background-color: var(--background-color);
  border-radius: 2px;
  box-shadow: 0px 1px 4px var(--search-container-shadow-color);

.active.mobile .search-container 
  width: calc(100% - 20px);

.active .search-container-inner 
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;


.header-inner
  .search 
    position: relative;
    float: right;
    margin-right: 1.5em;
    line-height: 57px;
    input 
      background-color: var(--header-search-input-background);
      border: none;
      border-radius: 2px;
      padding: 10px 35px 10px 35px;
      font-size: 1.6rem;
      color: var(--text-color);
      vertical-align: middle;
      &:focus 
        outline: none;
  .mobile-search 
    display: inline-block;
    float: right;
    input[type="text"]
      display: none;
      vertical-align: middle;
      background-color: var(--header-search-input-background);
      border: none;
      border-radius: 2px;
      padding: 10px 35px 10px 35px;
      font-size: 1.6rem;
      color: var(--text-color);
      width: 100%;
      &:focus
        outline: none;
    .mobile-search-icon:hover 
      cursor: pointer;
  &.mobile-search-active 
    .header-title,
    .iconfont.icon-menu1
      display: none;
    .mobile-search
      display: inline-block;
      position: relative;
      line-height: 45px;
      margin-bottom: 5px
      width: 100%;
      input[type="text"]
        display: inline-block;
      .mobile-search-icon 
        position: absolute;
        left: 13px;
        top: 3px;
        color: var(--text-secondary-color)

.search-icon 
  position: absolute;
  left: 13px;
  top: 4px;
  color: var(--text-secondary-color)

.search-close-icon 
  display: none;

.header-input-shadow .search .search-close-icon,
.mobile-search-active .mobile-search .search-close-icon 
  display: inline;
  position: absolute;
  right: 7px;
  top: 4px;
  color: var(--text-secondary-color)
  cursor: pointer;
  &::before 
    padding: 6px 5px 5px 5px;
    border-radius: 50%;
    transition: all .2s ease;
  &:hover::before
    background: var(--header-search-close-btn-hover);

@media only screen and (min-width: 770px)
  .header-inner .blog-title
    .iconfont.icon-search.mobile-search-icon
      display: none;

@media only screen and (max-width: 769px)
  .active .search-container 
    margin: 60px auto 0;
  .header-inner
    .blog-title
      .iconfont.icon-search.mobile-search-icon
        display: inline;
        color: var(--navbar-color);
    .search
      display: none;
      float: none;
      margin-right: 0;
      input
        width: 100%;