2206
редагувань
MediaWiki:Common.css: відмінності між версіями
search input v2 — works on focus too (typeahead)
Admin (обговорення | внесок) (modern search input — pill, soft fill, focus glow) |
Admin (обговорення | внесок) (search input v2 — works on focus too (typeahead)) |
||
| Рядок 154: | Рядок 154: | ||
} | } | ||
/* Modern search input — pill shape, soft fill, focus glow */ | /* Modern search input — pill shape, soft fill, focus glow */ | ||
.vector-search-box .cdx-search-input, | |||
.cdx-typeahead-search .cdx-search-input, | |||
form.cdx-search-input { | |||
border-radius: 999px !important; | border-radius: 999px !important; | ||
background: #f4f6fa !important; | background: #f4f6fa !important; | ||
| Рядок 163: | Рядок 165: | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
.vector-search-box .cdx-search-input:hover, | |||
.cdx-typeahead-search .cdx-search-input:hover, | |||
form.cdx-search-input:hover { | |||
background: #eef1f7 !important; | background: #eef1f7 !important; | ||
} | } | ||
.vector-search-box .cdx-search-input:focus-within, | |||
.cdx-typeahead-search .cdx-search-input:focus-within, | |||
form.cdx-search-input:focus-within { | |||
background: #ffffff !important; | background: #ffffff !important; | ||
border-color: #4b78d6 !important; | border-color: #4b78d6 !important; | ||
box-shadow: 0 0 0 3px rgba(75, 120, 214, 0.15); | box-shadow: 0 0 0 3px rgba(75, 120, 214, 0.15); | ||
} | } | ||
.cdx-search-input .cdx-text-input, | |||
.cdx-typeahead-search .cdx-text-input { | |||
border: none !important; | border: none !important; | ||
background: transparent !important; | background: transparent !important; | ||
} | } | ||
.cdx-search-input .cdx-text-input__input, | |||
.cdx-typeahead-search .cdx-text-input__input { | |||
background: transparent !important; | background: transparent !important; | ||
border: none !important; | border: none !important; | ||
| Рядок 184: | Рядок 192: | ||
color: #1a2240 !important; | color: #1a2240 !important; | ||
} | } | ||
.cdx-search-input .cdx-text-input__input::placeholder, | |||
.cdx-typeahead-search .cdx-text-input__input::placeholder { | |||
color: #8b95ad !important; | color: #8b95ad !important; | ||
font-weight: 400; | font-weight: 400; | ||
} | } | ||
.cdx-search-input .cdx-text-input__start-icon, | |||
.cdx-typeahead-search .cdx-text-input__start-icon { | |||
left: 12px !important; | left: 12px !important; | ||
opacity: 0.55; | opacity: 0.55; | ||
} | } | ||
.cdx-search-input .cdx-search-input__end-button, | |||
.cdx-typeahead-search .cdx-search-input__end-button { | |||
border-radius: 999px !important; | border-radius: 999px !important; | ||
background: #1a2240 !important; | background: #1a2240 !important; | ||
| Рядок 206: | Рядок 217: | ||
transition: background 0.2s ease; | transition: background 0.2s ease; | ||
} | } | ||
.cdx-search-input .cdx-search-input__end-button:hover, | |||
.cdx-typeahead-search .cdx-search-input__end-button:hover { | |||
background: #2a3360 !important; | background: #2a3360 !important; | ||
} | |||
/* Typeahead suggestions dropdown */ | |||
.cdx-typeahead-search .cdx-menu { | |||
border-radius: 14px !important; | |||
border: 1px solid #e3e7ef !important; | |||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important; | |||
margin-top: 6px !important; | |||
overflow: hidden; | |||
} | |||
.cdx-typeahead-search .cdx-menu-item:hover, | |||
.cdx-typeahead-search .cdx-menu-item--highlighted { | |||
background: #f4f6fa !important; | |||
} | } | ||