Wiki/MediaWiki:Citizen.css
More actions
/* Citizen Skin Custom Search */
.citizen-header__search {
max-width: 600px;
}
.citizen-search-box__form {
display: flex;
align-items: center;
background: var(--background-color-base, #fff);
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: 4px;
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
}
.citizen-search-box__form:focus-within {
border-color: var(--color-primary, #3366cc);
box-shadow: 0 0 0 1px var(--color-primary, #3366cc);
}
.citizen-search-box__input {
flex: 1;
padding: 10px 120px 10px 40px !important;
border: none !important;
background: transparent !important;
font-size: 14px !important;
}
.citizen-search-box__input:focus {
outline: none !important;
}
.citizen-search-box__icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
opacity: 0.5;
}
.citizen-search-box__button,
#searchButton {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: var(--color-primary, #3366cc) !important;
color: #fff !important;
border: none !important;
padding: 8px 20px !important;
font-size: 14px !important;
border-radius: 3px !important;
cursor: pointer !important;
transition: background 0.2s !important;
}
.citizen-search-box__button:hover,
#searchButton:hover {
background: var(--color-primary--hover, #2952a3) !important;
}
/* Search suggestions */
.citizen-typeahead,
.suggestions {
margin-top: 4px !important;
background: var(--background-color-base, #fff) !important;
border: 1px solid var(--border-color-base, #a2a9b1) !important;
border-radius: 4px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.citizen-typeahead__item,
.suggestions .suggestions-result {
padding: 12px 16px !important;
border-bottom: 1px solid var(--border-color-subtle, #eaecf0) !important;
transition: background 0.15s !important;
}
.citizen-typeahead__item:hover,
.suggestions .suggestions-result:hover {
background: var(--background-color-neutral-subtle, #f8f9fa) !important;
}
.citizen-typeahead__item:last-child,
.suggestions .suggestions-result:last-child {
border-bottom: none !important;
}