mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-22 12:42:43 +00:00
476ac6962f
Bug: T375903 Bug: T375901 Depends-on: I52c1dde47fb46bba7cd62d0fa28cba2c77b0c9e6 Change-Id: I48b439f6e6f573172f3d334c1816cf84be675b24
64 lines
1.6 KiB
Plaintext
64 lines
1.6 KiB
Plaintext
.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: @min-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: @min-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;
|
|
}
|