mediawiki-skins-Vector/components/tabs.less
Florian 620dec451b More-menu needs to overlap indicators
Indicators potentially can be overlap the area for the menu overlay,
which then overlaps it. Avoid it by raise the z-index for div.menu,
too.

Bug: T89410
Change-Id: Ie505d29a27aba2e8be5d5b13209442ec6daebcd9
2015-07-16 18:40:22 +00:00

247 lines
4.7 KiB
Plaintext

/*
Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
*/
/* Navigation Labels */
div.vectorTabs h3 {
display: none;
}
/* Namespaces and Views */
div.vectorTabs {
/* @noflip */
float: left;
height: 2.5em;
.background-image('images/tab-break.png');
background-position: bottom left;
background-repeat: no-repeat;
padding-left: 1px;
ul {
/* @noflip */
float: left;
height: 100%;
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
.background-image('images/tab-break.png');
background-position: right bottom;
background-repeat: no-repeat;
li {
/* @noflip */
float: left;
line-height: 1.125em;
/* For IE6, overridden later to display:block by modern browsers */
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
background-color: #f3f3f3;
.background-image('images/tab-normal-fade.png');
background-position: bottom left;
background-repeat: repeat-x;
white-space: nowrap;
}
/* IGNORED BY IE6 which doesn't support child selector */
> li {
display: block;
}
}
li {
&.new {
a,
a:visited{
color: #a55858;
}
}
&.selected {
.background-image('images/tab-current-fade.png');
a,
a:visited{
color: #333;
text-decoration: none;
}
}
&.icon {
a {
background-position: bottom right;
background-repeat: no-repeat;
}
}
a {
/* For IE6, overridden later to display:block by modern browsers */
display: inline-block;
height: 1.9em;
padding-left: 0.5em;
padding-right: 0.5em;
color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
/* Ignored by IE6 which doesn't support child selector */
> a {
display: block;
}
}
span {
display: inline-block;
.background-image('images/tab-break.png');
background-position: bottom right;
background-repeat: no-repeat;
a {
/* For IE6, overridden later to display:block by modern browsers */
display: inline-block;
padding-top: 1.25em;
}
/* Ignored by IE6 which doesn't support child selector */
> a {
/* @noflip */
float: left;
display: block;
}
}
}
/* Variants and Actions */
div.vectorMenu {
/* @noflip */
direction: ltr;
/* @noflip */
float: left;
cursor: pointer;
position: relative;
}
body.rtl div.vectorMenu {
/* @noflip */
direction: rtl;
}
div#mw-head div.vectorMenu h3 {
/* @noflip */
float: left;
.background-image('images/tab-break.png');
background-repeat: no-repeat;
background-position: bottom right;
font-size: 1em;
height: 2.5em;
// This effectively moves the "background border" outside of the element to act like a real
// border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
padding-right: 1px;
margin-right: -1px;
}
div.vectorMenu h3 span {
display: block;
font-size: 0.8em;
padding-left: 0.7em;
padding-top: 1.375em;
margin-right: 20px;
font-weight: normal;
color: @menu-main-heading-color;
}
div.vectorMenu h3 a {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 2.5em;
.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
background-position: 100% 70%;
background-repeat: no-repeat;
.transition(background-position 250ms);
}
div.vectorMenu.menuForceShow h3 a {
background-position: 100% 100%;
}
div.vectorMenuFocus h3 a {
.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
}
div.vectorMenu div.menu {
// Match the width of the dropdown "heading" (the tab)
min-width: 100%;
position: absolute;
top: 2.5em;
left: -1px;
background-color: white;
border: solid 1px silver;
border-top-width: 0;
clear: both;
text-align: left;
display: none;
// overlap indicators (which has z-index 1, too)
z-index: 1;
}
/* Enable forcing showing of the menu for accessibility */
div.vectorMenu:hover div.menu,
div.vectorMenu.menuForceShow div.menu {
display: block;
}
div.vectorMenu ul {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 0;
text-align: left;
}
/* Fixes old versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link {
min-width: 5em;
}
/* Returns things back to normal in modern versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link,
x:default {
min-width: 0;
}
div.vectorMenu li {
padding: 0;
margin: 0;
text-align: left;
line-height: 1em;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorMenu li a {
display: inline-block;
padding: 0.5em;
white-space: nowrap;
color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
/* IGNORED BY IE6 */
div.vectorMenu li > a {
display: block;
}
div.vectorMenu li.selected a,
div.vectorMenu li.selected a:visited {
color: #333;
text-decoration: none;
}
@import 'watchstar.less';