MediaWiki:Vector.less/vectorsearch.less

:root {
	// use --text-color (#000)
	--searchbutton-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8z'/%3E%3C/svg%3E");
}

/**
 * codex version of search box (ported from vector-2022)
 */

.vector-search-box {
	font-size: 0.8125em; // 12px, default is .8em
	min-width: unset; // is 20em, guarantees tab overflow in <720px
	max-width: 20em; // vector legacy thing
	margin: 0;
	
	form {
		margin: 0;
	}
	
	.cdx-search-input__end-button.cdx-button {
		top: 1px;
		right: 1px;
		background-image: var(--searchbutton-icon);
	}
}

.vector-search-box-vue {
	input.cdx-text-input__input, input.cdx-text-input__input:enabled {
		background: var(--search-box);
		color: var(--text-color);
		padding: 7px 2.15384615em 7px 0;
		border: none;
		box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
		border-radius: 0;
		height: 2.5rem;
	}
	
	.cdx-text-input__input::placeholder {
		opacity: 1;
	}
	
	.cdx-menu {
		background-color: var(--body-light);
		border-color: var(--body-border);
		
		.cdx-menu-item--enabled, .cdx-menu-item--enabled .cdx-menu-item__content {
			color: var(--text-color);
		}
		
		.cdx-thumbnail__placeholder, .cdx-thumbnail__image {
			background-color: var(--body-light);
			border-color: var(--body-border);
		}
		
		.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: var(--text-color);
			}
		}
		
		.cdx-menu-item__text__description {
			color: var(--byline-color);
		}
	}
	
	.cdx-search-input--has-end-button {
		background: none;
		border: none;
		
		.cdx-search-input__input-wrapper {
			margin: 0; // is -1px, to hide parent border
		}
	}
	
	.cdx-menu--has-footer .cdx-menu-item:last-of-type:not(:first-of-type) {
		border-color: var(--body-border);
	}
}