mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 11:17:35 +00:00
565011c5c4
The Vector skin's responsive mode originally used 768px as a hardcoded value for the media query set up in skin.json. I attempted to switch to the @deviceWidthTablet global Less variable provided by MediaWiki inside skin.json, but this would not work under any circumstances. Evidently, ResourceLoader does not compile Less, so it just ignores the media query if it contains a Less variable. I was forced to leave the media query within skin.json blank and hard-code it into responsive.less. When using the @deviceWidthTablet variable inside responsive.less, it worked fine. Obviously this is not ideal, as I am bypassing ResourceLoader, but I have no other choice. See this comment (T124994#2864136) for details. Bug: T124994 Change-Id: I28565e5ba88be41dcd9cb38fc09cffe29d263e06
111 lines
1.9 KiB
Plaintext
111 lines
1.9 KiB
Plaintext
/*
|
|
The styles below essentially place the navigation menu below the content,
|
|
instead of to the side of it. They also hide the logo, as there's no space
|
|
left for it.
|
|
*/
|
|
|
|
@media screen and ( max-width: @deviceWidthTablet ) {
|
|
div#mw-head {
|
|
position: static !important; /* stylelint-disable-line declaration-no-important */
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
/* Move the panel to the bottom and display it as in-line lists */
|
|
div#mw-navigation {
|
|
div#mw-panel {
|
|
display: table;
|
|
position: static;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
font-size: 150%;
|
|
|
|
.portal {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide the logo and tabs */
|
|
div#p-logo {
|
|
display: none;
|
|
}
|
|
|
|
/* Rearrange various page elements to fill the now-available space */
|
|
body div#footer {
|
|
margin-left: 0;
|
|
padding-top: 0;
|
|
|
|
/* don't need these in the footer either... */
|
|
li#footer-info-lastmod,
|
|
li#footer-info-viewcount {
|
|
display: none;
|
|
}
|
|
}
|
|
div#p-personal {
|
|
display: table;
|
|
position: relative;
|
|
width: 100%;
|
|
top: inherit;
|
|
left: inherit;
|
|
right: inherit;
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
div#right-navigation {
|
|
position: absolute;
|
|
top: inherit;
|
|
right: 0;
|
|
margin-top: 0;
|
|
float: none;
|
|
}
|
|
div#left-navigation {
|
|
position: absolute;
|
|
top: inherit;
|
|
margin: 0;
|
|
display: block;
|
|
float: none;
|
|
}
|
|
div#p-namespaces,
|
|
div#p-views,
|
|
div#p-variants {
|
|
position: relative;
|
|
top: 2.5em;
|
|
}
|
|
div#p-namespaces {
|
|
padding-left: 0;
|
|
}
|
|
div#p-cactions {
|
|
top: 2.5em;
|
|
float: right;
|
|
}
|
|
div#p-search {
|
|
float: none;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100vw;
|
|
margin: 0;
|
|
}
|
|
div#simpleSearch {
|
|
margin: 0 3em;
|
|
width: 80vw;
|
|
padding: 0;
|
|
}
|
|
div.vectorMenu div.menu {
|
|
left: inherit;
|
|
right: -1px;
|
|
}
|
|
div#content {
|
|
/* Hide the 1px blue border on the left side */
|
|
border-left: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|