mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-29 18:05:19 +00:00
e12fe1dbb0
Bug: T291895 Depends-On: Ie86a5b59fbf93a400796a4cac3724207830092b5 Change-Id: I194a11316e8ac68319f41c6a79b2c9cd081a4b66
67 lines
1.7 KiB
Plaintext
67 lines
1.7 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
.mw-logo {
|
|
.flex-display();
|
|
// If icon is not configured, ensure that the logo still takes up available
|
|
// space allocated by layout.
|
|
height: 100%;
|
|
// Center vertically.
|
|
align-items: center;
|
|
}
|
|
|
|
.mw-logo-icon {
|
|
// For browsers which do not support flexbox we float left.
|
|
// This will be ignored in flexbox browsers.
|
|
float: left;
|
|
margin-right: 10px;
|
|
// Hide mobile icon at lower resolutions and defer to wordmark
|
|
display: none;
|
|
@size-mw-logo-icon: unit( 50 / @font-size-browser, em );
|
|
width: @size-mw-logo-icon;
|
|
height: @size-mw-logo-icon;
|
|
|
|
@media ( min-width: @width-breakpoint-tablet ) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.mw-logo-container {
|
|
// For browsers which do not support flexbox we float left.
|
|
// This will be ignored in flexbox browsers.
|
|
// The two children `div`s will lay out in a row.
|
|
float: left;
|
|
// At mobile resolutions restrict logo to 120px to optimize for a 340px display (@min-width-supported)
|
|
// (based on https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide)
|
|
// This accounts for up to 5 icons
|
|
// (Echo notifications x 2, search, hamburger and personal menu)
|
|
// where the icons have 44px each (44x5 = 220px)
|
|
max-width: 120px;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
@media ( min-width: @width-breakpoint-tablet ) {
|
|
max-width: none;
|
|
|
|
img {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Note for 3rd parties where no wgLogos['wordmark'] is defined
|
|
// the site title is not clipped. We may need to revisit this later
|
|
// for projects with long site titles.
|
|
.mw-logo-wordmark {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mw-logo-tagline {
|
|
// For browsers which do not support flexbox.
|
|
display: block;
|
|
margin: 5px auto 0;
|
|
}
|