2206
редагувань
MediaWiki:Common.css: відмінності між версіями
search v3 — restrained focus (black border, no shadow), smaller icon, ghost button
Admin (обговорення | внесок) (search input v2 — works on focus too (typeahead)) |
Admin (обговорення | внесок) (search v3 — restrained focus (black border, no shadow), smaller icon, ghost button) |
||
| Рядок 153: | Рядок 153: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
/* | /* Search input — restrained, encyclopedic */ | ||
.vector-search-box .cdx-search-input, | .vector-search-box .cdx-search-input, | ||
.cdx-typeahead-search .cdx-search-input, | .cdx-typeahead-search .cdx-search-input, | ||
| Рядок 160: | Рядок 160: | ||
background: #f4f6fa !important; | background: #f4f6fa !important; | ||
border: 1px solid transparent !important; | border: 1px solid transparent !important; | ||
box-shadow: | box-shadow: none !important; | ||
transition: background 0.2s ease, border-color | transition: background 0.2s ease, border-color 0.2s ease; | ||
overflow: hidden; | overflow: hidden; | ||
padding: 0 !important; | padding: 0 !important; | ||
| Рядок 174: | Рядок 174: | ||
form.cdx-search-input:focus-within { | form.cdx-search-input:focus-within { | ||
background: #ffffff !important; | background: #ffffff !important; | ||
border-color: # | border-color: #1a2240 !important; | ||
box-shadow: | box-shadow: none !important; | ||
} | } | ||
.cdx-search-input .cdx-text-input, | .cdx-search-input .cdx-text-input, | ||
| Рядок 188: | Рядок 188: | ||
box-shadow: none !important; | box-shadow: none !important; | ||
height: 38px !important; | height: 38px !important; | ||
padding: 0 16px 0 | padding: 0 16px 0 36px !important; | ||
font-size: 14px !important; | font-size: 14px !important; | ||
color: #1a2240 !important; | color: #1a2240 !important; | ||
| Рядок 200: | Рядок 200: | ||
.cdx-typeahead-search .cdx-text-input__start-icon { | .cdx-typeahead-search .cdx-text-input__start-icon { | ||
left: 12px !important; | left: 12px !important; | ||
opacity: 0. | opacity: 0.5; | ||
transform: scale(0.8); | |||
transform-origin: left center; | |||
} | } | ||
/* Ghost button — restrained */ | |||
.cdx-search-input .cdx-search-input__end-button, | .cdx-search-input .cdx-search-input__end-button, | ||
.cdx-typeahead-search .cdx-search-input__end-button { | .cdx-typeahead-search .cdx-search-input__end-button { | ||
border-radius: 999px !important; | border-radius: 999px !important; | ||
background: | background: transparent !important; | ||
color: # | color: #4b5d8c !important; | ||
border: none !important; | border: none !important; | ||
padding: 0 | padding: 0 16px !important; | ||
height: 38px !important; | height: 38px !important; | ||
margin: 0 !important; | margin: 0 !important; | ||
font-weight: | font-weight: 500 !important; | ||
font-size: 13px !important; | font-size: 13px !important; | ||
letter-spacing: 0 | letter-spacing: 0; | ||
cursor: pointer; | cursor: pointer; | ||
transition: background 0. | transition: background 0.15s ease, color 0.15s ease; | ||
} | } | ||
.cdx-search-input .cdx-search-input__end-button:hover, | .cdx-search-input .cdx-search-input__end-button:hover, | ||
.cdx-typeahead-search .cdx-search-input__end-button:hover { | .cdx-typeahead-search .cdx-search-input__end-button:hover { | ||
background: # | background: #eef1f7 !important; | ||
color: #1a2240 !important; | |||
} | } | ||