golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Refactor: Revert to previous ordering 

In I23f18fc5f078da3331cad540bbaf533d348f2108 layout was pulled out
into a separate file and we changed the ordering of our CSS.

This was done with the thinking that media print queries would be
mixed with media screen.

After discussions with Volker, I have been convinced this was a
mistake.

media queries of the same type can be nested so the @media screen
is removed from layout.less and the media query in index.less will
be used instead.

Change-Id: I3aab00c9bcc734ea1ba5a9cf242c6e36ac1cc076
This commit is contained in:
jdlrobson 2020-04-27 11:38:14 -07:00 committed by Jdlrobson
parent 7ccb3a0fe1
commit 95c80c4efe
3 changed files with 61 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@
/* Vector screen styles */
@media screen {
@import 'common.less';
@import 'legacy/layout.less';
@import 'PersonalMenu.less';
@import 'SearchBox.less';
@import 'VectorTabs.less';
@ -16,6 +17,5 @@
@import 'externalLinks.less';
}
@import 'legacy/layout.less';
@import 'watchstar-ie8.less';
@import 'print.less';

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

@ -3,6 +3,7 @@
/* Vector screen styles */
@media screen {
@import 'common.less';
@import 'legacy/layout.less';
@import 'PersonalMenu.less';
@import 'SearchBox.less';
@import 'VectorTabs.less';
@ -15,6 +16,5 @@
@import 'externalLinks.less';
}
@import 'legacy/layout.less';
@import 'watchstar-ie8.less';
@import 'print.less';

120
resources/skins.vector.styles/legacy/layout.less
View File

@ -3,81 +3,79 @@
@import 'mediawiki.mixins.less';
@media screen {
.mw-body,
#mw-data-after-content {
margin-left: 10em;
}
.mw-body,
#mw-data-after-content {
margin-left: 10em;
}
.mw-indicators {
float: right;
z-index: @z-index-indicators;
}
.mw-indicators {
float: right;
z-index: @z-index-indicators;
}
.mw-body-content {
position: relative;
z-index: @z-index-base;
}
.mw-body-content {
position: relative;
z-index: @z-index-base;
}
/* Head */
#mw-page-base {
height: 5em;
}
/* Head */
#mw-page-base {
height: 5em;
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
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;
}
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
position: absolute;
top: -9999px;
}
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
#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;
}
/* 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;
}
#right-navigation {
float: right;
margin-top: 2.5em;
}
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0;
}
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0;
}
#footer, /* FIXME: Remove 2 weeks after deployment. */
.mw-footer {
margin-left: 10em;
margin-top: 0;
}
#footer, /* FIXME: Remove 2 weeks after deployment. */
.mw-footer {
margin-left: 10em;
margin-top: 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 ) {
@media ( min-width: 982px ) {
.mw-body,
#mw-head-base,
#left-navigation,