MediaWiki:Vector.less/vectorsearch.less

// search bar
.vector-search-box-inner {
	background: var(--search-box);
	height: 2.5em; // 40px
	margin-top: 0;
	box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
}

// search text
.vector-search-box-input {
	color: var(--text-color);
	height: 100%;
	border: none;
	background: none;
	padding-left: .75em;

	&::placeholder {
		color: var(--text-color);
		opacity: 0.67; // same as icon
	}

	.vector-search-box-inner:hover &,
	&:focus,
	.vector-search-box-inner:hover &:focus {
		border: none;
		box-shadow: none;
	}
}

:root {
	// use --text-color (#000)
	--searchbutton-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M11.29 11.71l-4-4'/%3E%3Ccircle cx='5' cy='5' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

// magnifying glass
.searchButton[name='go'] {
	background: no-repeat center var(--searchbutton-icon);
	// opacity: 0.67; this is inherited from default css
}

.vector-search-box {
	margin: 0;

	form {
		margin-top: 0;
	}
}

// search suggestions dropdown
.suggestions {
	
	// class for each entry
	&-results {
		background-color: var(--body-light);
		border-color: var(--body-border);
	}
	
	// class for text inside entries
	&-result {
		color: var(--text-color);
	}

	a.mw-searchSuggest-link,
	a.mw-searchSuggest-link:hover,
	a.mw-searchSuggest-link:active,
	a.mw-searchSuggest-link:focus {
		color: var(--text-color);
	}

	&-special {
		background-color: var(--body-light);
		border-color: var(--body-border);

		// "Search for pages containing"
		& .special-label {
			color: var(--byline-color);
		}

		& .special-query {
			color: var(--text-color);
		}
	}

	// hover over entry
	&-result-current {
		background-color: var(--body-mid);
		color: var(--text-color);
		
		& .special-label,
		& .special-query {
			color: var(--text-color);
		}
	}
}