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

Layout is separated from "common" CSS

Browse source 
This unblocks work on the header which will rewrite the layout
code.

This corresponds to a 0.06kb increase in CSS size, which is zero
after gzipping.

Bug: T249073
Change-Id: I23f18fc5f078da3331cad540bbaf533d348f2108
This commit is contained in:
jdlrobson 2020-04-14 10:46:11 -07:00
parent dd85a00f65
commit 835862fffc
6 changed files with 104 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/skins.vector.styles/Sidebar.less
View file

@ -17,10 +17,6 @@
/* Panel */
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0;
font-size: @font-size-nav-main;
/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */

47
resources/skins.vector.styles/common.less
View file

@ -33,11 +33,6 @@ body {
direction: ltr;
}
.mw-body,
#mw-data-after-content {
margin-left: 10em;
}
.mw-body {
/* Border on top, left, and bottom side */
border: @border-width-base @border-style-base @border-color-content;
@ -81,11 +76,9 @@ body {
}
.mw-indicators {
float: right;
font-size: @font-size-base;
line-height: @line-height-base;
position: relative;
z-index: @z-index-indicators;
}
.mw-indicator {
@ -94,13 +87,11 @@ body {
}
.mw-body-content {
position: relative;
font-size: @font-size-base;
// Support IE 9-11, Trident cuts values 2 digits after decimal point.
// `calc` enables to set correct calculation in place again. See T102364.
font-size: calc( 1em ~'*' unit( @font-size-base ) );
line-height: @line-height-base;
z-index: @z-index-base;
p {
margin: 0.5em 0;
@ -179,43 +170,5 @@ pre,
/* Head */
#mw-page-base {
background-position: bottom left;
height: 5em;
.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
}
#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;
}

31
resources/skins.vector.styles/hd.less
View file

@ -1,31 +0,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;
}
}

2
resources/skins.vector.styles/index.less
View file

@ -15,6 +15,6 @@
@import 'externalLinks.less';
}
@import 'layout.less';
@import 'watchstar-ie8.less';
@import 'hd.less';
@import 'print.less';

102
resources/skins.vector.styles/layout.less Normal file
View file

@ -0,0 +1,102 @@
// 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;
}
}

2
resources/skins.vector.styles/legacy.less
View file

@ -14,6 +14,6 @@
@import 'externalLinks.less';
}
@import 'layout.less';
@import 'watchstar-ie8.less';
@import 'hd.less';
@import 'print.less';