mediawiki-skins-Vector/components/navigation.less
Bartosz Dziewoński 16e16eb075 Don't use JavaScript to style first sidebar portlet
We were adding a .first CSS class to the portlet from JavaScript
instead of just using a smarter selector, which caused the incorrectly
styled portlet to visibly flash sometimes.

This was only useful for IE 6 (even IE 7 supports the sibling selector
'+', which we can use here), and we don't serve JavaScript to it
anymore. It would be neater to use ':first-of-type', but that's not as
widely supported.

Bug: T89542
Change-Id: I1904b3899c43bca52a6c996b8ce08c8bdf764aa0
2015-02-15 00:43:55 +00:00

146 lines
2.7 KiB
Plaintext

@import "mediawiki.mixins";
@import "personalMenu";
@import "search";
@import "tabs";
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
position: absolute;
top: -9999px;
}
/* Head */
#mw-page-base {
height: 5em;
background-position: bottom left;
background-repeat: repeat-x;
/* This image is only a fallback (for IE 6-9), so we do not @embed it. */
background-image: url('images/page-fade.png');
.vertical-gradient(@body-background-color, @menu-background-color, 50%, 100%);
background-color: @body-background-color;
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em;
}
div#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
h3 {
margin: 0;
padding: 0;
}
}
/* 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;
/* IE 6 double-margin bug fix */
display: inline;
}
#right-navigation {
float: right;
margin-top: 2.5em;
}
/* Logo */
#p-logo {
position: absolute;
top: -160px;
left: 0;
width: 10em;
height: 160px;
a {
display: block;
width: 10em;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
text-decoration: none;
}
}
/* Panel */
div#mw-panel {
font-size: @menu-main-font-size;
position: absolute;
top: 160px;
padding-top: 1em;
width: 10em;
left: 0;
div.portal {
margin: 0 0.6em 0 0.7em;
padding: 0.25em 0;
direction: ltr;
background-position: top left;
background-repeat: no-repeat;
.background-image('images/portal-break.png');
h3 {
font-size: @menu-main-heading-font-size;
color: @menu-main-heading-color;
font-weight: normal;
margin: 0;
padding: @menu-main-heading-padding;
cursor: default;
border: none;
}
div.body {
margin: @menu-main-body-margin;
padding-top: 0;
ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: @menu-main-body-padding;
li {
line-height: 1.125em;
margin: 0;
padding: 0.25em 0;
font-size: @menu-main-body-font-size;
word-wrap: break-word;
a {
color: @menu-main-body-link-color;
&:visited {
color: @menu-main-body-link-visited-color;
}
}
}
}
}
}
/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
#p-logo + div.portal {
background-image: none;
margin-top: 0;
h3 {
display: none;
}
div.body {
margin-left: 0.5em;
}
}
}