Algolia DocSearch 样式美化

[qianmo2233]

建议配合 VuePress + RecoTheme 黑暗模式 使用效果最佳

QAQ 由于太菜不知道怎么自动适配浅色(深色)模式，这边是基于深色模式下写的，浅色模式下看起来会怪

如果有知道如何适配的，希望能够分享一下

/*
      Algolia DocSearch V3 Style Sheet
      Author: qianmo2233

      建议配合 VuePress + RecoTheme 黑暗模式 使用效果最佳

      QAQ 由于太菜不知道怎么自动适配浅色(深色)模式，这边是基于深色模式下写的，浅色模式下看起来会怪
*/

/* 变量 */
:root {

  /* 主要颜色 */
  --docsearch-primary-color: rgb(84, 104, 255);
  --docsearch-text-color: rgb(148,149,158);
  --docsearch-spacing: 12px;
  --docsearch-icon-stroke-width: 1.4;
  --docsearch-highlight-color: var(--docsearch-primary-color);
  --docsearch-muted-color: rgb(148,149,158);
  --docsearch-container-background: rgba(46,46,46,0);
  --docsearch-logo-color: rgb(140,140,140);

  /* 模态框 */
  --docsearch-modal-width: 560px;
  --docsearch-modal-height: 600px;
  --docsearch-modal-background: rgba(25,25,25,0.5);
  --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgb(85,89,97);

  /* 搜索框 */
  --docsearch-searchbox-height: 56px;
  --docsearch-searchbox-background: rgba(78,78,78,0.2);
  --docsearch-searchbox-focus-background: rgba(78,78,78,0.2);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);

  /* 搜索结果 */
  --docsearch-hit-height: 56px;
  --docsearch-hit-color: rgb(211,211,211);
  --docsearch-hit-active-color: #fff;
  --docsearch-hit-background: #353535;
  --docsearch-hit-shadow: 0 1px 3px 0 rgba(212,217,225,0);

  /* 按键 */
  --docsearch-key-gradient: rgba(124,124,124,0.3);
  --docsearch-key-shadow: inset 0 -2px 0 0 rgba(205,205,230,0), inset 0 0 1px 1px rgba(255,255,255,0), 0 1px 2px 1px rgba(30, 35, 90, 0);

  /* 脚页 */
  --docsearch-footer-height: 44px;
  --docsearch-footer-background: #353535;
  --docsearch-footer-shadow: 0 -1px 0 0 rgba(224,227,232,0), 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
}

/* 搜索按钮 */
.DocSearch-Button {
  cursor:text;
  transform: scale(1);
  min-width: 200px;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.DocSearch-Button :hover {
  transform: scale(1);
}

/* 按键错位修复 */
.DocSearch-Commands-Key {
  padding-top: 2px;
}

/* 模态框背景模糊 */
.DocSearch-Modal {
  backdrop-filter: saturate(150%) blur(20px);
  box-shadow: none;
}

/* 模态框背景模糊 */
.DocSearch-Hit-source {
  margin-bottom: 4px;
  padding-bottom: 6px;
  padding-left: 12px;
  margin-right: -12px;
  margin-left: -12px;
  background: #353535;
}

/* 搜索结果 */
.DocSearch-Hit {
  margin-right: 0;
  transform: scale(1);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.DocSearch-Hit:hover {
  margin-left: -8px;
  margin-right: -8px;
  transform: scale(1);
}

/* 强迫症实在是受不了这个使得不对称的滚动条 */
.DocSearch-Dropdown::-webkit-scrollbar {
  display: none;
}

/* 搜索框 咱就是说能都别挤一起吗 */
.DocSearch-SearchBar {
  margin-bottom: 12px;
}

/* 右侧操作按钮错位修复 & 动画 */
.DocSearch-Hit-action-button > svg {
  margin-top: 2px;
}
.DocSearch-Hit-action {
  transform: scale(1);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

[recoluan]

发正式版之前会进行样式优化的。