mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 11:17:35 +00:00
4511b94b21
Test by adding .vector-toc-collapsed class to the body We use grid only when supported for grade C browsers. Visual changes: * Slight changes to position of the button and title (movement by a pixel or 2) Bug: T311447 Change-Id: Ib16c7b5b35be66776d013833e29f24f3f5316d9b
101 lines
2 KiB
Plaintext
101 lines
2 KiB
Plaintext
@import '../../common/variables.less';
|
|
|
|
@selector-collapsed-toc-closed: ~'#vector-toc-collapsed-checkbox:not( :checked )';
|
|
|
|
#vector-toc-collapsed-button {
|
|
display: none;
|
|
float: left;
|
|
margin-right: 4px;
|
|
margin-left: -@icon-padding-md;
|
|
// Reduce padding to fit with page title
|
|
padding: 7px 10px 7px 10px;
|
|
// Override background color for when the TOC is overlaps content
|
|
// as a sticky element when the page is scrolled down.
|
|
background-color: @background-color-base;
|
|
|
|
&:hover,
|
|
&:active {
|
|
background-color: @colorGray15;
|
|
}
|
|
}
|
|
|
|
#vector-toc-collapsed-button,
|
|
.sidebar-toc {
|
|
z-index: @z-index-menu;
|
|
}
|
|
|
|
.mixin-collapse-toc-page-title {
|
|
#vector-toc-collapsed-button {
|
|
display: block;
|
|
}
|
|
|
|
.mw-table-of-contents-container {
|
|
position: relative;
|
|
|
|
.vector-layout-legacy & {
|
|
// !important needed to override rules in screen.less
|
|
top: 0 !important; /* stylelint-disable-line declaration-no-important */
|
|
}
|
|
}
|
|
|
|
.sidebar-toc {
|
|
position: absolute;
|
|
top: 44px;
|
|
left: -2px;
|
|
// !important needed to override rules in Sidebar.less
|
|
margin: 0 !important; /* stylelint-disable-line declaration-no-important */
|
|
|
|
// Dropdown styles
|
|
border: @border-width-base @border-style-base @border-color-base;
|
|
|
|
// Remove TOC fade
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@{selector-collapsed-toc-closed} ~ .mw-table-of-contents-container .sidebar-toc {
|
|
// Hide the TOC when the button is not checked
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
.mixin-collapse-toc-page-title();
|
|
|
|
.vector-below-page-title {
|
|
#vector-toc-collapsed-button,
|
|
.sidebar-toc {
|
|
position: fixed;
|
|
}
|
|
|
|
#vector-toc-collapsed-button {
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-toc {
|
|
// TOC button height
|
|
top: 36px;
|
|
left: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
@supports ( display: grid ) {
|
|
.vector-toc-collapsed .vector-layout-grid {
|
|
.mixin-collapse-toc-page-title();
|
|
|
|
.mw-table-of-contents-container {
|
|
grid-area: content;
|
|
}
|
|
|
|
.sidebar-toc {
|
|
left: -@icon-padding-md;
|
|
}
|
|
}
|
|
}
|
|
}
|