MediaWiki:Vector.less/vectorsearch.less: Difference between revisions

// 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);
		}
	}
}

/**
 * codex version of search box (ported from vector-2022)
 */
 
.vector-search-box-vue {
	input.cdx-text-input__input, input.cdx-text-input__input:enabled {
		background: var(--search-box);
		color: var(--text-color);
		padding: 11px 0;
		border: none;
		box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
		border-radius: 0;
	}
	
	input.cdx-text-input__input:enabled::placeholder {
		color: var(--search-placeholder-color);
	}
	
	.cdx-menu {
		background-color: var(--body-light);
		border-color: var(--body-border-dark);
		
		.cdx-menu-item--enabled, .cdx-menu-item--enabled .cdx-menu-item__content {
			color: var(--text-color);
		}
		
		.cdx-icon svg {
			fill: var(--text-color);
		}
		
		.cdx-thumbnail__placeholder, .cdx-thumbnail__image {
			background-color: var(--body-light);
			border-color: var(--body-border-dark);
		}
		
		.cdx-typeahead-search__search-footer__icon {
			color: var(--text-color);
		}
		
		.cdx-menu-item--enabled.cdx-menu-item--highlighted {
			background-color: var(--body-dark);

			&, .cdx-menu-item__content, .cdx-menu-item__text__description {
				color: white;
			}
		}
		
		.cdx-menu-item__text__description {
			color: gray;
		}
	}
	
	.cdx-menu--has-footer .cdx-menu-item:last-of-type:not(:first-of-type) {
		border-color: var(--body-border-dark);
	}
}