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