mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 16:15:28 +00:00
3c0559a71d
Consolidates the CSS responsible for styling chevrons into one implementation. This removes the need for custom padding and background positioning for the following components: - "more" menu - user menu - watchstar - language button - languge button in sticky header Instead of absolutely positioning the chevron on these components, the parent label element is set to `display: inline-flex` so that the chevron is vertically aligned and given enough space by default. The watchstar, although not a chevron, is also given the `display: inline-flex` treatment so that it can be aligned with other elements in the toolbar. This new implementation requires splitting the watchstar component into legacy and modern due to a quirk in Firefox that causes a bug with the watchstar in legacy Vector. NOTE: This change causes visual changes due to the difference in centering the chevrons via flexbox vs percentage positions. Bug: T308344, T310838 Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
121 lines
3.1 KiB
Plaintext
121 lines
3.1 KiB
Plaintext
@import '../../common/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 */
|
||
.vector-menu-tabs-legacy {
|
||
// 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 */
|
||
.vector-menu-heading {
|
||
display: none;
|
||
}
|
||
|
||
ul {
|
||
float: left;
|
||
height: 100%;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
li {
|
||
// Tab fade background: Fade inside from light grey to white.
|
||
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: @padding-horizontal-tabs;
|
||
padding-right: @padding-horizontal-tabs;
|
||
font-size: @font-size-tabs;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.new {
|
||
a,
|
||
a:visited {
|
||
color: @color-link-new;
|
||
}
|
||
}
|
||
|
||
.selected {
|
||
// Overwrite above in browsers that support `rgba()`.
|
||
background: rgba( 255, 255, 255, 1 );
|
||
|
||
a,
|
||
a:visited {
|
||
color: @color-link-selected;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
a {
|
||
background-position: right bottom;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Tab Separators
|
||
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
|
||
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
|
||
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
|
||
// #mw-head rule is legacy Vector only.
|
||
.vector-menu-tabs,
|
||
.vector-menu-tabs a,
|
||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||
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%;
|
||
}
|
||
|
||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||
background-position: right bottom;
|
||
}
|
||
|
||
.vector-menu-dropdown-noicon {
|
||
.vector-menu-heading {
|
||
// `padding-top` needs to scale with font-size.
|
||
padding-top: 1.25em;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
font-size: @font-size-tabs;
|
||
font-weight: normal;
|
||
}
|
||
|
||
// Add focus state to legacy menu dropdown buttons (i.e. p-variants, p-cactions)
|
||
.vector-menu-checkbox:focus + .vector-menu-heading {
|
||
// Simulate browser focus ring
|
||
outline: dotted 1px; // Firefox style
|
||
outline: auto -webkit-focus-ring-color; // Webkit style
|
||
}
|
||
}
|