MediaWiki:Vector.less/vectorsearch.less: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
(base cp from rsw) |
No edit summary |
||
Line 91: | Line 91: | ||
color: var(--text-color); |
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: var(--dark-text-color); |
|||
} |
|||
} |
|||
.cdx-menu-item__text__description { |
|||
color: var(--byline-color); |
|||
} |
|||
} |
|||
.cdx-menu--has-footer .cdx-menu-item:last-of-type:not(:first-of-type) { |
|||
border-color: var(--body-border-dark); |
|||
} |
} |
||
} |
} |
Revision as of 17:53, 7 August 2024
// 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: var(--dark-text-color);
}
}
.cdx-menu-item__text__description {
color: var(--byline-color);
}
}
.cdx-menu--has-footer .cdx-menu-item:last-of-type:not(:first-of-type) {
border-color: var(--body-border-dark);
}
}