mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-17 20:52:14 +00:00
703903daac
Going into the new version of Vector, we'll want to rewrite the layout rules entirely and decouple the sidebar from the logo. To prepare for this we will move the layout file into a legacy folder. We also separate Sidebar styles needed for the legacy mode from the old mode. This will allow us to make changes to the header in new Vector without having to touch or test the legacy codebase via a new file layout.less and using the existing sidebar code. Bug: T246170 Change-Id: Ieb4f8f2b2f0e4f48d76a210ab30acd08e3e83bcb
103 lines
1.8 KiB
Plaintext
103 lines
1.8 KiB
Plaintext
// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
|
// The rules here should only define the layout, not color or typography.
|
|
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
@media screen {
|
|
.mw-body,
|
|
#mw-data-after-content {
|
|
margin-left: 10em;
|
|
}
|
|
|
|
.mw-indicators {
|
|
float: right;
|
|
z-index: @z-index-indicators;
|
|
}
|
|
|
|
.mw-body-content {
|
|
position: relative;
|
|
z-index: @z-index-base;
|
|
}
|
|
|
|
/* Head */
|
|
#mw-page-base {
|
|
height: 5em;
|
|
}
|
|
|
|
#mw-head-base {
|
|
margin-top: -5em;
|
|
margin-left: 10em;
|
|
height: 5em;
|
|
}
|
|
|
|
/* Hide, but keep accessible for screen-readers */
|
|
#mw-navigation h2 {
|
|
position: absolute;
|
|
top: -9999px;
|
|
}
|
|
|
|
#mw-head {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Navigation Containers */
|
|
#left-navigation {
|
|
float: left;
|
|
margin-left: 10em;
|
|
margin-top: 2.5em;
|
|
/* When right nav would overlap left nav, it's placed below it
|
|
(normal CSS floats behavior). This rule ensures that no empty space
|
|
is shown between them due to right nav's margin-top. Page layout
|
|
is still broken, but at least the nav overlaps only the page title
|
|
instead of half the content. */
|
|
margin-bottom: -2.5em;
|
|
}
|
|
|
|
#right-navigation {
|
|
float: right;
|
|
margin-top: 2.5em;
|
|
}
|
|
|
|
#mw-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 10em;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
/* Vector screen styles for high definition displays. These rules cross the above components and are
|
|
grouped together here only for the sake of the media query common to each. */
|
|
@media screen and ( min-width: 982px ) {
|
|
.mw-body,
|
|
#mw-head-base,
|
|
#left-navigation,
|
|
#mw-data-after-content,
|
|
#footer {
|
|
margin-left: 11em;
|
|
}
|
|
|
|
.mw-body {
|
|
padding: 1.25em 1.5em 1.5em 1.5em;
|
|
}
|
|
|
|
#footer {
|
|
padding: 1.25em;
|
|
}
|
|
|
|
#mw-panel {
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
#p-search {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#p-personal {
|
|
right: 1em;
|
|
}
|
|
}
|