mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-26 19:57:31 +00:00
a3cef30154
Moves the page's title above the article toolbar (i.e. tabs) based on the VectorTitleAboveTabs config option. This feature remains off by default, but can be accessed via the query parameter `vectortitleabovetabs`. Removes the Navigation.mustache template since it's just a wrapper for the sidebar + tabs elements, which, with this change, are placed in different locations in the DOM and don't need a common parent element. Bug: T303549 Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
99 lines
2.6 KiB
Plaintext
99 lines
2.6 KiB
Plaintext
@import '../../common/variables.less';
|
||
|
||
.mw-article-toolbar-container {
|
||
.mw-portlet-views {
|
||
display: none;
|
||
|
||
@media ( min-width: @width-breakpoint-tablet ) {
|
||
&:not( .emptyPortlet ) {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vector-more-collapsible-item {
|
||
display: none;
|
||
|
||
@media ( max-width: @width-breakpoint-tablet ) {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
// Make sure pcactions is displayed (even if .emptyPortlet present)
|
||
.vector-has-collapsible-items {
|
||
@media ( max-width: @width-breakpoint-tablet ) {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
// T303549: When page title is above tabs, `.mw-article-toolbar-container` is
|
||
// moved inside `.mw-body` and requires margin between itself and the tagline.
|
||
.mw-body .mw-article-toolbar-container {
|
||
margin-bottom: 1.25em;
|
||
}
|
||
|
||
// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
|
||
.vector-article-toolbar .mw-article-toolbar-container {
|
||
display: flex;
|
||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
||
|
||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||
padding-right: @padding-horizontal-tabs - 1px;
|
||
}
|
||
|
||
.vector-menu-tabs {
|
||
// Account for background-image gradient.
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.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%;
|
||
background-position: right bottom;
|
||
height: 100%;
|
||
}
|
||
|
||
#right-navigation {
|
||
display: flex;
|
||
flex-grow: 1;
|
||
justify-content: end;
|
||
border-bottom: @border-width-base @border-style-base @border-color-content;
|
||
// Layout correction - as it was before introduce of flex box.
|
||
margin-right: -1px;
|
||
|
||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||
margin-right: -@border-base-ems * 3;
|
||
}
|
||
}
|
||
|
||
#left-navigation {
|
||
display: flex;
|
||
border-bottom: @border-width-base @border-style-base @border-color-content;
|
||
|
||
// Layout correction - as it was before introduce of flex box.
|
||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||
margin-left: @border-base-ems * 3;
|
||
}
|
||
}
|
||
|
||
.vector-menu-tabs li {
|
||
margin-top: 1px;
|
||
|
||
&.selected {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Currently when right navigation is empty and sidebar is open no
|
||
// border is shown. This can intentionally be removed at a later date but
|
||
// is preserved to reduce number of UI regressions in current release.
|
||
@media ( max-width: @width-breakpoint-tablet ) {
|
||
#mw-sidebar-checkbox:checked ~ .mw-workspace-container #right-navigation.right-navigation-empty {
|
||
border-bottom: 0;
|
||
}
|
||
}
|