mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 17:28:04 +00:00
100 lines
2.2 KiB
Plaintext
100 lines
2.2 KiB
Plaintext
@import '../../common/variables.less';
|
|
|
|
@selector-collapsed-toc-button-checked: ~'#vector-toc-collapsed-checkbox:checked';
|
|
|
|
#vector-toc-collapsed-button {
|
|
display: none;
|
|
}
|
|
|
|
@media ( max-width: @width-breakpoint-desktop ) {
|
|
#vector-toc-collapsed-button,
|
|
.sidebar-toc {
|
|
z-index: @z-index-menu;
|
|
}
|
|
|
|
#vector-toc-collapsed-button {
|
|
display: block;
|
|
float: left;
|
|
margin-right: 4px;
|
|
margin-left: -10px;
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
.mw-table-of-contents-container {
|
|
position: relative;
|
|
// Reset styles used by sticky TOC
|
|
top: 0;
|
|
}
|
|
|
|
.sidebar-toc {
|
|
position: absolute;
|
|
top: 44px;
|
|
left: -2px;
|
|
// !important needed to override rules in Sidebar.less
|
|
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
|
|
|
|
// Dropdown styles
|
|
background-color: @color-base--inverted;
|
|
border: @border-width-base @border-style-base @border-color-base;
|
|
|
|
// Remove TOC fade
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@{selector-collapsed-toc-button-checked} ~ .mw-table-of-contents-container .sidebar-toc {
|
|
// Unhide the TOC when the button is checked
|
|
display: block;
|
|
}
|
|
|
|
.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: @width-breakpoint-tablet ) and ( max-width: @width-breakpoint-desktop ) {
|
|
body:not( .vector-below-page-title ) @{selector-checkbox-hack} .sidebar-toc {
|
|
// Adjust TOC for when the main menu is open, which pushes the page title to the right
|
|
left: 22px;
|
|
}
|
|
|
|
@{selector-collapsed-toc-button-checked} {
|
|
// Apply float styles to the TOC and main menu to ensure the absolute positioned TOC
|
|
// can remain in the correct location even when the main menu is open
|
|
& ~ .mw-table-of-contents-container {
|
|
clear: none;
|
|
float: left;
|
|
}
|
|
|
|
& ~ #mw-navigation .mw-sidebar {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|