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