mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-05 20:48:45 +00:00
f36c58db2f
Bug: T331563 Bug: T331168 Change-Id: Ibd5aaa605c45216783a2707b3813e1e7e2c46b9b
171 lines
4.6 KiB
Plaintext
171 lines
4.6 KiB
Plaintext
@import '../../../common/variables.less';
|
|
@import '../../../common/mixins.less';
|
|
|
|
@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
|
|
|
|
// FIXME: Move into .mixin-toc-unpinned() when PageTools feature is enabled everywhere
|
|
.vector-feature-page-tools-enabled .vector-unpinned-container .vector-toc {
|
|
// Adjust TOC spacing when unpinned
|
|
.vector-pinnable-header {
|
|
padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
|
|
}
|
|
|
|
.vector-toc-contents {
|
|
padding-right: @padding-horizontal-dropdown-menu-item;
|
|
padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
|
|
}
|
|
}
|
|
|
|
// TOC dropdown styles
|
|
#vector-toc-collapsed-button,
|
|
.vector-sticky-header-toc,
|
|
.vector-page-titlebar-toc {
|
|
display: none;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
// TOC dropdown toggle styles
|
|
#vector-toc-collapsed-button,
|
|
body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
|
|
@media ( max-width: @max-width-tablet ) {
|
|
// Override the default button styles so the ToC button in the page titlebar is slightly shorter on small viewports
|
|
padding: 7px 12px;
|
|
}
|
|
}
|
|
|
|
// TOC styles when unpinned
|
|
.mixin-toc-unpinned() {
|
|
display: block;
|
|
|
|
> .vector-menu-content {
|
|
// Override default dropdown max width
|
|
max-width: none;
|
|
}
|
|
|
|
// Shared unpinned TOC styles, applies across all unpinned cases (page titlebar, sticky header, floating)
|
|
.vector-toc {
|
|
// T316056 Remove TOC menu fixed width and apply min/max-width
|
|
width: max-content;
|
|
min-width: 200px;
|
|
// Collapsed TOC should be smaller than 85% of the content container (51em) and 75vw
|
|
max-width: ~'min( 0.85 * @{max-width-content-container}, 75vw )'; // min( 51em, 75vw )
|
|
}
|
|
}
|
|
|
|
// TOC styles when below page title
|
|
.mixin-toc-below-page-title {
|
|
position: fixed;
|
|
top: 12px;
|
|
left: 12px;
|
|
margin: 0;
|
|
z-index: @z-index-menu;
|
|
}
|
|
|
|
.vector-feature-page-tools-disabled .vector-unpinned-container .vector-toc {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.client-js {
|
|
@media ( max-width: @max-width-tablet ) {
|
|
//
|
|
// TOC in page titlebar on narrow screens
|
|
//
|
|
.vector-page-titlebar-toc {
|
|
.mixin-toc-unpinned();
|
|
}
|
|
|
|
//
|
|
// TOC in page titlebar on narrow screens below page title
|
|
//
|
|
.vector-below-page-title .vector-page-titlebar-toc {
|
|
.mixin-toc-below-page-title();
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
//
|
|
// TOC in page titlebar
|
|
//
|
|
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ) {
|
|
.vector-page-titlebar-toc {
|
|
.mixin-toc-unpinned();
|
|
}
|
|
}
|
|
|
|
//
|
|
// TOC in page titlebar below page title
|
|
//
|
|
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ).vector-below-page-title {
|
|
.vector-page-titlebar-toc {
|
|
.mixin-toc-below-page-title();
|
|
}
|
|
}
|
|
|
|
//
|
|
// TOC in sticky header
|
|
//
|
|
&.vector-feature-toc-pinned-disabled .vector-sticky-header-visible {
|
|
.vector-sticky-header-toc {
|
|
.mixin-toc-unpinned();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.client-nojs {
|
|
//
|
|
// No-JS TOC in page titlebar
|
|
//
|
|
&.vector-feature-toc-pinned-disabled {
|
|
.vector-page-titlebar-toc {
|
|
.mixin-toc-unpinned();
|
|
}
|
|
}
|
|
|
|
//
|
|
// No-JS TOC in page titlebar on narrow screens for anon users
|
|
//
|
|
@media ( max-width: @max-width-tablet ) {
|
|
// Make the TOC appear in the page titlebar on small viewports
|
|
// even when the TOC location in the DOM is actually in the sidebar
|
|
// This case only happens for no-js anon users.
|
|
&.vector-feature-toc-pinned-enabled {
|
|
#vector-toc-collapsed-button {
|
|
display: block;
|
|
}
|
|
|
|
#vector-toc-pinned-container {
|
|
// Override TOC container's sticky positioning
|
|
position: relative;
|
|
.mixin-toc-unpinned();
|
|
}
|
|
|
|
.vector-toc {
|
|
display: none;
|
|
position: absolute;
|
|
top: 36px; // TOC button height
|
|
// FIXME: Don't use a magic number. This used to be tied to the private variable in core
|
|
// @icon-padding-md so perhaps this needs to make use of the flush classes?
|
|
left: -12px;
|
|
margin-top: @padding-top-content; // 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;
|
|
z-index: @z-index-menu;
|
|
|
|
.vector-pinnable-header,
|
|
.vector-toc-contents {
|
|
// FIXME: Remove !important after PageTools is enabled everywhere currently needed
|
|
// to deal with selector specificity, overrides padding applied in PinnableHeader.less
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
padding-left: @padding-horizontal-dropdown-menu-item !important;
|
|
}
|
|
}
|
|
|
|
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
|
|
// Hide the TOC when the button is not checked
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|