mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 08:35:42 +00:00
6b7197cf95
Bug: T313060 Depends-on: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c Change-Id: I0626f5c8d92836ecac961bbe213ffd8b0f0e2df5
148 lines
3.2 KiB
Plaintext
148 lines
3.2 KiB
Plaintext
@import '../../common/variables.less';
|
|
|
|
@height-collapsed-toc-button: 36px;
|
|
@padding-top-content-px: unit( @padding-top-content * @font-size-browser, px );
|
|
@selector-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
|
|
|
|
#vector-toc-collapsed-button {
|
|
display: none;
|
|
float: left;
|
|
margin-right: 4px;
|
|
margin-left: -@icon-padding-md;
|
|
// Reduce vertical padding to fit with page title
|
|
padding: 7px @icon-padding-md;
|
|
// 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;
|
|
}
|
|
|
|
.ve-active {
|
|
#vector-toc-collapsed-button {
|
|
display: none !important; /* stylelint-disable-line declaration-no-important */
|
|
}
|
|
}
|
|
|
|
// Override button styles for the "move to sidebar/hide" links. Default hide.
|
|
.vector-toc-collapse-button,
|
|
.vector-toc-uncollapse-button {
|
|
display: none;
|
|
border: 0;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
color: @color-primary;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: @color-primary--hover;
|
|
}
|
|
|
|
&:before {
|
|
content: '@{msg-brackets-start}';
|
|
color: @color-base--subtle;
|
|
}
|
|
|
|
&:after {
|
|
content: '@{msg-brackets-end}';
|
|
color: @color-base--subtle;
|
|
}
|
|
}
|
|
|
|
// Applies when TOC is collapsed in it's original DOM location
|
|
// Doesn't apply to the collapsed TOC in the sticky header
|
|
.mixin-toc-collapsed-unmoved() {
|
|
#vector-toc-collapsed-button {
|
|
display: block;
|
|
}
|
|
|
|
.vector-sticky-toc-container {
|
|
position: relative;
|
|
}
|
|
|
|
@{sidebar-toc-selector} {
|
|
display: none;
|
|
position: absolute;
|
|
top: @height-collapsed-toc-button; // TOC button height
|
|
margin: @padding-top-content-px 0 0 0; // Account for padding-top from .mw-body
|
|
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
|
|
border: @border-width-base @border-style-base @border-color-base;
|
|
}
|
|
|
|
@{selector-collapsed-toc-open} ~ @{sidebar-toc-selector} {
|
|
// Hide the TOC when the button is not checked
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.mixin-toc-collapsed-floating() {
|
|
#vector-toc-collapsed-button,
|
|
.sidebar-toc {
|
|
position: fixed;
|
|
}
|
|
|
|
#vector-toc-collapsed-button {
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-toc {
|
|
margin: 0;
|
|
left: 6px;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
// Collapsed to page title on narrow screens
|
|
.mixin-toc-collapsed-unmoved();
|
|
|
|
@{sidebar-toc-selector} {
|
|
left: -@icon-padding-md;
|
|
}
|
|
|
|
// Collapsed to floating icon on narrow screens when below page
|
|
.vector-below-page-title {
|
|
.mixin-toc-collapsed-floating();
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
@supports ( display: grid ) {
|
|
.client-js {
|
|
// Collapsed to page title
|
|
.vector-toc-collapsed {
|
|
.mixin-toc-collapsed-unmoved();
|
|
|
|
.mw-table-of-contents-container {
|
|
grid-area: content;
|
|
}
|
|
|
|
// Collapsed to floating icon
|
|
// when sticky header not visible and below page title
|
|
body:not( .vector-sticky-header-visible ).vector-below-page-title& {
|
|
.mixin-toc-collapsed-floating();
|
|
}
|
|
|
|
.vector-toc-uncollapse-button {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.vector-toc-not-collapsed {
|
|
.vector-toc-collapse-button {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|