Remove yellow border from wiki search text box when unfocused and added styling when focused. #11132
Conversation
…tle box shadow, to enhance user interaction.
resources/css/bem/wiki-search.less
Outdated
| border: @_border-size solid @osu-colour-b6; | ||
|
|
||
| &:focus-within { | ||
| box-shadow: 0 0 10px @osu-colour-orange-1; | ||
| border: @_border-size solid @osu-colour-orange-1 |
There was a problem hiding this comment.
the style doesn't quite match with beatmap search box (wrong border size, rounding, and colour). Also the colour should use page hue css variable, not actual orange.
There was a problem hiding this comment.
I have adjusted the border size and the rounding of the border. Do we prefer the thinner border? I've also changed the color to match the other elements on the page instead of the color of wiki-notice. In order to keep the code consistent I'm still using the pre-defined colors from colors.less.
resources/css/bem/wiki-search.less
Outdated
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| padding: 13px @_gutter; | ||
| font-size: @font-size--wiki-search; | ||
| background-color: @osu-colour-b6; | ||
|
|
||
| border: @_border-size solid @osu-colour-orange-1; | ||
| border: 1px solid @osu-colour-b6; |
There was a problem hiding this comment.
update @_border-size instead otherwise the suggestion box would have wrong alignment
also don't use @osu-colour- anymore. New codes should always use the css variable. Adding more lines that need update isn't helping.
resources/css/bem/wiki-search.less
Outdated
| border: 1px solid @osu-colour-b6; | ||
|
|
||
| &:focus-within { | ||
| box-shadow: 0 0 10px @osu-colour-h2; |
There was a problem hiding this comment.
matching the colour with beatmap search would be preferred but I'll probably refactor the search box later anyway so it's probably fine for now (if not a bit weird when it changes again later)
|
@danielmyren still interested in finishing this PR? |
This pull request addresses issue #10238
Changes Made: