diff options
Diffstat (limited to 'skins/Vector/components/tabs.less')
| -rw-r--r-- | skins/Vector/components/tabs.less | 245 |
1 files changed, 245 insertions, 0 deletions
diff --git a/skins/Vector/components/tabs.less b/skins/Vector/components/tabs.less new file mode 100644 index 00000000..a5647345 --- /dev/null +++ b/skins/Vector/components/tabs.less @@ -0,0 +1,245 @@ +/* +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; + margin-left: -1px; + 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; +} + +/* 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'; |