mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 00:25:40 +00:00
2d9585c8e3
Visual changes: * Changes to table of contents text alignment and padding Bug: T312156 Change-Id: Icfde60d053a786054de6608f2ed4f0b1b5b5b252
151 lines
4.1 KiB
Plaintext
151 lines
4.1 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import '../layouts/screen.less';
|
|
@import './checkboxHack.less';
|
|
|
|
// T305069 Layout adjustments of sidebar elements:
|
|
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
|
|
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
|
// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
|
|
@margin-top-sidebar-toc_title_inline: 3.5em;
|
|
// Default spacing separating the sidebar TOC from the main menu or viewport.
|
|
@margin-top-sidebar-toc: 1.5em;
|
|
|
|
.mw-sidebar {
|
|
box-sizing: border-box;
|
|
|
|
// Hide #p-navigation label
|
|
#p-navigation .vector-menu-heading {
|
|
display: none;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Update styling to account for TOC.
|
|
.mw-sidebar,
|
|
.sidebar-toc,
|
|
.sidebar-toc:after {
|
|
// Match styles between TOC and fade element to ensure the fade covers the correct area
|
|
width: @width-sidebar;
|
|
margin-left: 0;
|
|
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
width: @width-sidebar-wide;
|
|
margin-left: @margin-start-sidebar-content;
|
|
}
|
|
}
|
|
|
|
.sidebar-toc,
|
|
.sidebar-toc:after {
|
|
margin-left: -@margin-start-sidebar-content;
|
|
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.vector-layout-grid {
|
|
@media ( min-width: @min-width-desktop ) {
|
|
.mw-sidebar {
|
|
// Prevent grid row gap from affecting TOC spacing when main menu is open
|
|
margin-bottom: -@grid-row-gap;
|
|
}
|
|
}
|
|
|
|
.sidebar-toc {
|
|
// Use margin-top to align TOC rather than grid row gap
|
|
// Applies when the TOC sticky and when the main menu is both open and closed.
|
|
margin-top: @margin-top-sidebar-toc;
|
|
}
|
|
}
|
|
|
|
.vector-layout-legacy {
|
|
.sidebar-toc {
|
|
// Main menu is closed
|
|
margin-top: @margin-top-sidebar-toc_title_inline;
|
|
}
|
|
|
|
@{selector-workspace-container-sidebar-open} .sidebar-toc {
|
|
// Main menu is open
|
|
margin-top: @margin-top-sidebar-toc;
|
|
}
|
|
|
|
.vector-sticky-header-visible & .sidebar-toc {
|
|
// Sticky header is visible
|
|
margin-top: @margin-top-sidebar-toc;
|
|
}
|
|
}
|
|
|
|
.mw-sidebar-action {
|
|
// Align with the portal heading/links
|
|
// `.portal` + `.portal .body`
|
|
margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
|
|
|
|
// Styles for SidebarAction template.
|
|
.mw-sidebar-action-item {
|
|
h3.mw-sidebar-action-heading {
|
|
display: block;
|
|
background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% @border-width-base;
|
|
color: @color-base--subtle;
|
|
margin: 0.75em 0;
|
|
border: 0;
|
|
padding: 0.3em 0;
|
|
font-size: @font-size-nav-main-heading;
|
|
font-weight: normal;
|
|
cursor: default;
|
|
}
|
|
|
|
.mw-sidebar-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 {
|
|
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
|
opacity: 0.67;
|
|
/* @embed */
|
|
background-image: url( images/chevronHorizontal-ltr.svg );
|
|
|
|
#mw-sidebar-checkbox:not( :checked ) ~ .mw-header & {
|
|
/* @embed */
|
|
background-image: url( images/menu.svg );
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
|
// checkbox input for the menu panel.
|
|
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
|
|
// Turn off presentation so that screen readers get the same effect as visually hiding.
|
|
// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
|
|
// instead to avoid hidden rendering.
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|