wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reduce max-width and adjust margin-left

Browse source 
* The margin-left should only be auto at small resolutions - otherwise on large
monitors it becomes visually separated from the logo
* the margin left should be larger
* and max width should be smaller.

Bug: T261686
Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
This commit is contained in:
jdlrobson 2020-09-03 09:56:36 -07:00 committed by Jdrewniak
parent 8a4e390be4
commit 9b31740514
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
resources/skins.vector.styles/layout-search-header.less
View file

@ -2,8 +2,8 @@
// Assumes various variables defined there.
@min-width-search: unit( 350px / @font-size-browser, em );
@max-width-search: unit( 580px / @font-size-browser, em );
@margin-horizontal-search: unit( 40px / @font-size-browser, em );
@max-width-search: unit( 450px / @font-size-browser, em );
@margin-horizontal-search: unit( 56px / @font-size-browser, em );
// The logo is variable width but typically consists of:
// - a icon (50x50)
@ -38,7 +38,7 @@
margin: 0 0 0 @margin-horizontal-search;
#searchform {
margin-left: auto;
margin-left: 0;
max-width: @max-width-search;
}
}
@ -52,4 +52,13 @@
// Support IE9: This is reset in @support query below if Flexbox is available.
float: right;
}
// At low resolutions the search must be pushed to the right of the screen
// We use @width-comfortable to determine this threshold as we know it's not possible for
// personal tools to be on the same line at this resolution.
@media ( max-width: @width-comfortable ) {
#p-search #searchform {
margin-left: auto;
}
}
}