How can I customize the style of this plugin's search area ?

[listky]

I want the width of this area could be fixed instead of being flex with those search results, by the way, this is a wonderful plugin for vuepress2 ,hope to receive your reply

[ota-meshi]

Can't you customize using CSS? If you can't do it with CSS, you may not be able to customize it.

[listky]

I will try it by using CSS only if I know where it is defined, tks please

[RaniAgus]

I found some SCSS variables (that could be overriden in Styles File) here:

vuepress-plugin-full-text-search2/src/client/SearchBox.vue

Lines 154 to 166 in e6ccfb5

	:global(:root) {
	--search-bg-color: #ffffff;
	--search-accent-color: #3eaf7c;
	--search-accent-text-color: #fff;
	--search-text-color: #2c3e50;
	--search-border-color: #eaecef;
	--search-item-text-color: #5d81a5;
	--search-item-focus-bg-color: #f3f4f5;
	--search-input-width: 8rem;
	--search-result-width: 20rem;
	}

Sadly, page titles' background color doesn't seem to be customizable because it's hardcoded:

vuepress-plugin-full-text-search2/src/client/SearchBox.vue

Line 235 in e6ccfb5

background: #f5f5f5;

[rxliuli]

--search-result-width: 20rem;

This variable doesn't seem to be used?

[ota-meshi]

Welcome PRs to fix it.

[twgh]

在docs\.vuepress\styles\index.scss里添加css代码, 我目前用的是这样的:

:root {
  --search-input-width: 8rem !important;
  --search-result-width: 100% !important;
}

.suggestions {
  position: fixed !important;
  left: 18vw !important;
  top: calc(var(--navbar-line-height) + 7px) !important;
  max-width: 100% !important;
}