MediaWiki:Vector.less/vectorsearch.less
Jump to navigation
Jump to search
// 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);
}
}