mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 08:05:51 +00:00
55bb37f2ab
Move feature classes to HTML element - this is significant for anonymous as placing the classes on the body tag breaks the browser's ability to parse the article concurrently with the stylesheet download, because inline scripts are spec'ed to be able to see document.styleSheets. Changes: * Feature classes are moved from BODY tag to HTML tag * For now disable localStorage storage until we've worked out the storage mechanism in core. Bug: T321498 Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
85 lines
3.6 KiB
Plaintext
85 lines
3.6 KiB
Plaintext
@import '../../common/variables.less';
|
|
|
|
.mw-table-of-contents-container {
|
|
// Needed for Grid-based layout
|
|
align-self: start;
|
|
height: 100%;
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
#mw-panel-toc {
|
|
.vector-toc-pinned & {
|
|
// Support: Chrome
|
|
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).
|
|
// NOTE: This property has an effect similar to 'overflow: hidden', and will prevent elements
|
|
// inside of the panel from being rendered outside of its bounding box, even when they would
|
|
// be positioned there using absolute positioning, negative margin, transforms, etc.
|
|
// That's why the negative margins have to be applied here, instead of on #vector-toc.
|
|
contain: paint;
|
|
}
|
|
|
|
// FIXME: `.vector-feature-page-tools-disabled.vector-toc-pinned` can be removed when cached HTML no longer an issue.
|
|
.vector-feature-page-tools-disabled .vector-toc-pinned &,
|
|
.vector-feature-page-tools-disabled.vector-toc-pinned & {
|
|
// Align the left edge of the TOC text with the main menu button icon.
|
|
margin-left: -27px;
|
|
}
|
|
|
|
// FIXME: `.vector-feature-page-tools-enabled.vector-toc-pinned` can be removed when cached HTML no longer an issue.
|
|
.vector-feature-page-tools-enabled .vector-toc-pinned &,
|
|
.vector-feature-page-tools-enabled.vector-toc-pinned & {
|
|
// Align the left edge of the TOC text with the page container
|
|
margin-left: -@spacing-subsection-toggle;
|
|
}
|
|
}
|
|
|
|
#vector-toc-pinned-container {
|
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
position: sticky;
|
|
top: 0;
|
|
|
|
.vector-toc-pinned & {
|
|
// Default spacing separating the sidebar TOC from the main menu or viewport.
|
|
// Need to use padding in order for the spacing to apply when sticky
|
|
padding-top: 1.5em;
|
|
}
|
|
|
|
// FIXME: .vector-feature-page-tools-disabled.vector-toc-pinned can be removed when cached HTML no longer an issue.
|
|
.vector-feature-page-tools-disabled .vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &,
|
|
.vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container & {
|
|
// Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
// FIXME: .vector-feature-page-tools-enabled.vector-toc-pinned can be removed when cached HTML no longer an issue.
|
|
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-toc-pinned &,
|
|
.vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & {
|
|
// Align TOC with bottom of title when main menu is not pinned but the TOC is
|
|
margin-top: @margin-top-pinned-toc;
|
|
}
|
|
|
|
.vector-feature-page-tools-enabled & .vector-toc {
|
|
padding-left: @spacing-subsection-toggle;
|
|
padding-right: @padding-horizontal-dropdown-menu-item;
|
|
// Add extra padding for the fade scrollable indicator, which is 30px tall
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
// T302076: Add fade scrollable indicator when TOC is in sidebar
|
|
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
|
|
.vector-toc-pinned & .vector-toc:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: @height-toc-scroll-indicator;
|
|
background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
|
|
background-repeat: no-repeat;
|
|
background-position: -@scrollbar-offset-toc-scroll-indicator; // T311436 Hacky way to prevent the fade from covering the scrollbar
|
|
pointer-events: none; // Make the link below the fade clickable
|
|
}
|
|
}
|
|
}
|