ydoc/examples/init/_site/ydoc/ydoc-plugin-search/search.css

基于 Markdown 的静态站点生成工具

.m-search {
  position: absolute;
  right: .64rem;
  top: .32rem;
  transform: translateY(-50%);
  z-index: 9999;
}
.m-search-result {
  display: none;
  position: absolute;
  width: 100vw;
  width: calc(100vw - 32px);
  right: -.48rem;
  top: .48rem;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.m-search .highlight {
  font-weight: bold;
  color: #1890ff;
}
.m-search .icon {
  font-family: ydoc;
  position: absolute;
  left: 16px;
  top: 16px;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
.m-search .input {
  width: 72px;
  border: none;
  outline: none;
  height: 32px;
  line-height: 32px;
  padding: 0 .08rem 0 .32rem;
  font-size: 14px;
  border-radius: 4px;
  transition: all .2s ease-in-out;
}
.m-search .input:focus {
  width: 160px;
  background-color: #f7f7f7;
}
.m-search .empty {
  padding: .32rem .24rem;
  text-align: center;
}
.m-search .headline {
  padding: .08rem;
  background-color: #1890ff;
  color: #fff;
  font-weight: bold;
}
.m-search .row {
  display: flex;
  margin: .08rem 0;
}
.m-search .subtitle {
  flex: 0 0 25%;
  text-align: right;
  padding: .04rem .08rem;
  background-color: #fff;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.m-search .subtitle:hover {
  background-color: #f7f7f7;
}
.m-search .content {
  flex: 1;
  font-weight: bold;
  border-left: 1px solid rgba(3, 17, 31, 0.14);
  padding: 0;
  padding-right: .08rem;
}
.m-search .caption {
  padding: .04rem 0;
  padding-left: 0.08rem;
  background-color: #fff;
  cursor: pointer;
  transition: all .2s ease-in-out;
  display: flex;
  flex-direction: column;
}
.m-search .caption:hover {
  background-color: #f7f7f7;
}
.m-search .caption.active {
  background-color: #f7f7f7;
}
.m-search .caption .desc {
  font-weight: normal;
}

/* 宽度小于 600px 时搜索结果横贯屏幕宽度 */
@media screen and (min-width: 600px) {
  .m-search-result {
    position: absolute;
    right: 0;
    width: 4rem;
  }
  .m-search .input:focus {
    width: 180px;
  }
}

/* PC 端不显示 nav 按钮 因此更靠右侧 */
@media screen and (min-width: 960px) {
  .m-search {
    right: .24rem;
  }
  .m-search .input:focus {
    width: 200px;
  }
}