mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 16:15:28 +00:00
e1d1de809f
- The collapsible ToC absolute positioning solution has been preserved to be used on no-js mobile resolutions - The collapsible ToC grid based positioning solution has been removed - ToC styles have been refactored and organzied This patch involves HTML changes. In order to avoid additional complexity, this patch disables the collapsible ToC feature for users above the mobile viewport with cached HTML. The ToC continues to be automatically collapsed on mobile viewports for cached HTML users. This patch results in 9 expected visual changes. In order to see them you need to take the following steps: 1. Run `./pixel.js reference` 2. Checkout the following PR in pixel https://github.com/wikimedia/pixel/pull/149 3. Run ./pixel.js test -c 859143 It should look like this: https://jmp.sh/ZVQqDZw7 Bug: T318013 Change-Id: Iea0d73005b91589c58ae38a3a640fa90c18a860d
101 lines
2.6 KiB
Plaintext
101 lines
2.6 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import '../../common/mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import '../layouts/screen.less';
|
|
@import './checkboxHack.less';
|
|
|
|
// Match styles between TOC and fade element to ensure the fade covers the correct area
|
|
// This is expressed in pixels to support different font sizes since our layout is currently
|
|
// expressed in pixels. See T313817.
|
|
// FIXME: Remove .vector-sticky-toc-container selectors after I85aec387f87126a17e760fd9fd10e10572ff3152 has been in prod for 5 days
|
|
.vector-sticky-toc-container .sidebar-toc:after,
|
|
.vector-sticky-toc-container .sidebar-toc,
|
|
#vector-toc-pinned-container .sidebar-toc:after,
|
|
#vector-toc-pinned-container .sidebar-toc,
|
|
.vector-main-menu {
|
|
// T305069 Layout adjustments of sidebar elements
|
|
// Align the left edge of main menu with the main menu button.
|
|
width: @width-sidebar-px;
|
|
|
|
// Align the left edge of main menu with the main menu button icon.
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
width: @width-sidebar-px-wide;
|
|
}
|
|
}
|
|
|
|
.vector-main-menu {
|
|
box-sizing: border-box;
|
|
// Temporary magic number, will be calculated after TOC specs are finalized
|
|
padding: 12px 19px 12px 9px;
|
|
background-image: none;
|
|
background-color: @background-color-secondary--modern;
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
// Makes the sidebar full screen at lower resolutions.
|
|
width: 100%;
|
|
}
|
|
|
|
//FIXME: This media query will be replaced with the pinned menu class in T317897
|
|
@media ( min-width: @min-width-desktop ) {
|
|
// Magic number from the edge of the main menu to the start of the main menu text.
|
|
margin-left: -28px;
|
|
}
|
|
|
|
// Hide sidebar entirely when the checkbox is disabled
|
|
@{selector-main-menu-closed} ~ .vector-main-menu-container & {
|
|
display: none;
|
|
}
|
|
|
|
// Hide #p-navigation label
|
|
#p-navigation .vector-menu-heading {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.vector-main-menu-action {
|
|
// Styles for MainMenuAction template.
|
|
.vector-main-menu-action-item {
|
|
// Align with the portal heading/links
|
|
// `.portal` + `.portal .body`
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
|
|
.vector-main-menu-action-heading {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.vector-main-menu-action-content {
|
|
> * {
|
|
font-size: @font-size-portal-list-item;
|
|
}
|
|
|
|
> a {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// T295555 style overrides for temporary language switch alert (can be removed later ).
|
|
.vector-language-sidebar-alert {
|
|
padding: 0.75em;
|
|
}
|
|
}
|
|
}
|
|
|
|
#mw-sidebar-button {
|
|
&:before {
|
|
/* @embed */
|
|
background-image: url( images/chevronHorizontal-ltr.svg );
|
|
|
|
@{selector-main-menu-closed} ~ .mw-header & {
|
|
/* @embed */
|
|
background-image: url( images/menu.svg );
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|