mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-10-01 06:07:24 +00:00
f2695a5bf3
Some LESS parsers will get confused with the lack of file extension. It's better to be explicit and in alignment with recent change in core I379334d7729e587a2a00. It was already weirdly mixed in this repo with some imports featuring extension and some not. Change-Id: If5065cf9e30289de9b4fd33315bd65b75959ecb7
247 lines
6 KiB
Plaintext
247 lines
6 KiB
Plaintext
@import '../variables.less';
|
||
@import 'mediawiki.mixins.less';
|
||
|
||
/**
|
||
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
||
*/
|
||
|
||
/* Namespaces and Views */
|
||
.vectorTabs {
|
||
// Tab separator: Outer start border (left in LTR) of tab row.
|
||
background-position: left bottom;
|
||
float: left;
|
||
height: 2.5em;
|
||
padding-left: @border-width-base;
|
||
|
||
/* Navigation Labels */
|
||
h3 {
|
||
display: none;
|
||
}
|
||
|
||
ul {
|
||
float: left;
|
||
height: 100%;
|
||
list-style: none none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
li {
|
||
// Tab fade background: Fade inside from light grey to white.
|
||
background-image: url( images/tab-normal-fade.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
|
||
background-image: linear-gradient( to top, @border-color-content--tabs-inactive 0, #e8f2f8 1px, #fff 100% ); // Support: Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
|
||
background-position: left bottom;
|
||
background-repeat: repeat-x;
|
||
float: left;
|
||
display: block;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: @line-height-nav;
|
||
white-space: nowrap;
|
||
|
||
a {
|
||
// Tab separator: Border between tabs and outer right border.
|
||
background-position: right bottom;
|
||
color: @color-link;
|
||
.box-sizing( border-box );
|
||
display: block;
|
||
float: left;
|
||
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||
position: relative;
|
||
padding-top: 1.25em;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
font-size: @font-size-tabs;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.new {
|
||
a,
|
||
a:visited {
|
||
color: @color-link-new;
|
||
}
|
||
}
|
||
|
||
.selected {
|
||
// Replace tab fade with flat color (matching top of would-be fade).
|
||
background-image: url( images/tab-current-fade.png );
|
||
// Overwrite above in browsers that support `rgba()`.
|
||
background: rgba( 255, 255, 255, 1 ); // stylelint-disable-line declaration-block-no-shorthand-property-overrides
|
||
|
||
a,
|
||
a:visited {
|
||
color: @color-link-selected;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
a {
|
||
background-position: right bottom;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Variants and Actions */
|
||
.vectorMenu {
|
||
direction: ltr;
|
||
float: left;
|
||
cursor: pointer;
|
||
position: relative;
|
||
line-height: 1.125em;
|
||
|
||
h3 {
|
||
color: @color-nav-subtle;
|
||
position: relative;
|
||
display: block;
|
||
.box-sizing( border-box );
|
||
// `padding-top` needs to scale with font-size.
|
||
padding-top: 1.25em;
|
||
padding-left: 8px;
|
||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||
font-size: @font-size-tabs;
|
||
font-weight: normal;
|
||
|
||
&:after {
|
||
content: '';
|
||
.background-image-svg( 'images/arrow-down.svg', 'images/arrow-down.png' );
|
||
background-position: 100% 50%;
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
top: unit( 10 / @font-size-tabs / @font-size-browser, em );
|
||
right: 8px;
|
||
bottom: 0;
|
||
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
||
// Modify the color of the image from the default #222 to approx. #444 to match the text.
|
||
opacity: 0.85;
|
||
}
|
||
|
||
&:hover,
|
||
&:focus {
|
||
color: @color-base;
|
||
|
||
&:after {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu {
|
||
background-color: @background-color-base;
|
||
list-style: none none;
|
||
// Match the width of the dropdown "heading" (the tab)
|
||
min-width: 100%;
|
||
position: absolute;
|
||
top: 2.5em;
|
||
left: -@border-width-base;
|
||
margin: 0;
|
||
border: @border-width-base @border-style-base @border-color-base;
|
||
border-top-width: 0;
|
||
padding: 0;
|
||
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
||
text-align: left;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
.transition( opacity 100ms );
|
||
// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
|
||
z-index: 2;
|
||
}
|
||
|
||
&:hover .menu {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
|
||
// Support: IE8
|
||
.vectorMenuCheckbox:checked ~ .menu {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
li {
|
||
padding: 0;
|
||
margin: 0;
|
||
text-align: left;
|
||
line-height: 1em;
|
||
|
||
a {
|
||
color: @color-link;
|
||
display: block;
|
||
padding: 0.625em;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
font-size: @font-size-tabs;
|
||
}
|
||
}
|
||
|
||
.selected a,
|
||
.selected a:visited {
|
||
color: @color-link-selected;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
#mw-head .vectorMenu h3 {
|
||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||
background-position: right bottom;
|
||
float: left;
|
||
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||
margin: 0 -@border-width-base 0 0;
|
||
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
|
||
// act like a real border. It is necessary for `.vectorMenu .menu` dropdown to align well.
|
||
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
|
||
// `padding-left` in `.vectorMenu h3 a`
|
||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||
}
|
||
|
||
// Tab Separators
|
||
// `.vectorTabs`: Outer start border (left in LTR) of tab row.
|
||
// `.vectorTabs a`: Border between tabs and outer end (right in LTR) border.
|
||
// `#mw-head .vectorMenu h3`: // Outer end (right in LTR) border of "Actions" menu.
|
||
.vectorTabs,
|
||
.vectorTabs a,
|
||
#mw-head .vectorMenu h3 {
|
||
background-image: url( images/tab-separator.png );
|
||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||
background-repeat: no-repeat;
|
||
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
|
||
background-size: @border-width-base 100%;
|
||
}
|
||
|
||
// Invisible checkbox covering the dropdown menu handle
|
||
.vectorMenuCheckbox {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
opacity: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
// Hide the checkbox completely in browsers that don't support :checked
|
||
display: none;
|
||
|
||
:not( :checked ) > & {
|
||
// When the browser supports :checked, display it
|
||
display: block;
|
||
}
|
||
|
||
&:checked + h3 span:after {
|
||
transform: scaleY( -1 );
|
||
}
|
||
|
||
&:focus + h3 {
|
||
// Simulate browser focus ring
|
||
outline: dotted 1px; // Firefox style
|
||
outline: auto -webkit-focus-ring-color; // Webkit style
|
||
}
|
||
}
|
||
|
||
@import 'watchstar.less';
|