Compare commits
5 Commits
master
...
wmf/1.39.0
Author | SHA1 | Date |
---|---|---|
|
8a5962a2c7 | |
|
fe3382ea74 | |
|
66bcb6c2df | |
|
9864380758 | |
|
d931ca99ed |
|
@ -45,7 +45,9 @@
|
||||||
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="vector-sitenotice-container">
|
||||||
<div id="siteNotice">{{{html-site-notice}}}</div>
|
<div id="siteNotice">{{{html-site-notice}}}</div>
|
||||||
|
</div>
|
||||||
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
|
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
|
||||||
{{>TableOfContentsContainer}}
|
{{>TableOfContentsContainer}}
|
||||||
<div class="mw-content-container">
|
<div class="mw-content-container">
|
||||||
|
|
|
@ -137,6 +137,9 @@
|
||||||
// Sidebar
|
// Sidebar
|
||||||
@width-sidebar-px: 220px;
|
@width-sidebar-px: 220px;
|
||||||
@width-sidebar-px-wide: 244px;
|
@width-sidebar-px-wide: 244px;
|
||||||
|
// 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
|
||||||
|
|
||||||
// TOC
|
// TOC
|
||||||
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';
|
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';
|
||||||
|
|
|
@ -4,10 +4,23 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import 'mediawiki.skin.defaults.less';
|
@import 'mediawiki.skin.defaults.less';
|
||||||
@import '../mediawiki.less/mediawiki.skin.variables.less';
|
|
||||||
|
|
||||||
// Set pre July 2022 colors for links (T213778).
|
// Set pre July 2022 colors for links (T213778).
|
||||||
@color-link: #0645ad;
|
@color-link: #0645ad;
|
||||||
@color-link--visited: #0b0080;
|
@color-link--visited: #0b0080;
|
||||||
|
@color-link--active: #faa700;
|
||||||
@color-link-new: #ba0000;
|
@color-link-new: #ba0000;
|
||||||
@color-link-new--visited: #a55858;
|
@color-link-new--visited: #a55858;
|
||||||
|
|
||||||
|
// Note these colors are different from Vector 2022 for historic reasons:
|
||||||
|
@color-link-external: #36b;
|
||||||
|
@color-link-external--visited: #636;
|
||||||
|
@color-link-external--active: #b63;
|
||||||
|
|
||||||
|
// Body content uses the user setting in browser / the system default sans-serif font:
|
||||||
|
// Arial on Windows, Roboto on Android.
|
||||||
|
// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
|
||||||
|
@font-family-sans: sans-serif;
|
||||||
|
|
||||||
|
// Matches WikimediaUI Base and Codex, OOUI/wikimedia
|
||||||
|
@border-radius-base: 2px;
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
.mw-footer-container {
|
||||||
|
padding-top: 50px;
|
||||||
|
padding-bottom: 82px;
|
||||||
|
}
|
|
@ -12,6 +12,7 @@
|
||||||
.mw-header {
|
.mw-header {
|
||||||
// A min-height is set to account for projects where no icon is set.
|
// A min-height is set to account for projects where no icon is set.
|
||||||
min-height: @height-logo-icon;
|
min-height: @height-logo-icon;
|
||||||
|
padding: 8px 0;
|
||||||
// Vertical centering of header elements (IE>=11), requires Flexbox.
|
// Vertical centering of header elements (IE>=11), requires Flexbox.
|
||||||
.flex-display();
|
.flex-display();
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
|
@ -3,13 +3,6 @@
|
||||||
@import '../layouts/screen.less';
|
@import '../layouts/screen.less';
|
||||||
@import './checkboxHack.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
|
|
||||||
// Default spacing separating the sidebar TOC from the main menu or viewport.
|
|
||||||
@margin-top-sidebar-toc: 1.5em;
|
|
||||||
|
|
||||||
// Update styling to account for TOC.
|
|
||||||
.mw-sidebar,
|
.mw-sidebar,
|
||||||
.sidebar-toc,
|
.sidebar-toc,
|
||||||
.sidebar-toc:after {
|
.sidebar-toc:after {
|
||||||
|
@ -28,9 +21,6 @@
|
||||||
.sidebar-toc,
|
.sidebar-toc,
|
||||||
.sidebar-toc:after {
|
.sidebar-toc:after {
|
||||||
margin-left: -@margin-start-sidebar-content;
|
margin-left: -@margin-start-sidebar-content;
|
||||||
// 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;
|
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop-wide ) {
|
@media ( min-width: @min-width-desktop-wide ) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
@ -44,11 +34,6 @@
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: @background-color-secondary--modern;
|
background-color: @background-color-secondary--modern;
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop ) {
|
|
||||||
// Prevent grid row gap from affecting TOC spacing when main menu is open
|
|
||||||
margin-bottom: -@grid-row-gap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media ( max-width: @max-width-tablet ) {
|
@media ( max-width: @max-width-tablet ) {
|
||||||
// Makes the sidebar full screen at lower resolutions.
|
// Makes the sidebar full screen at lower resolutions.
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -9,8 +9,26 @@
|
||||||
@sidebar-toc-left-padding: ~'calc( 15px + @{margin-start-sidebar-content} )';
|
@sidebar-toc-left-padding: ~'calc( 15px + @{margin-start-sidebar-content} )';
|
||||||
@toc-subsection-toggle-icon-size: 1.834em;
|
@toc-subsection-toggle-icon-size: 1.834em;
|
||||||
|
|
||||||
|
.mw-table-of-contents-container {
|
||||||
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
// Needed for Grid-based layout
|
||||||
|
align-self: start;
|
||||||
|
|
||||||
|
// Needed to align TOC with bottom of title
|
||||||
|
// 1.5em from .mw-table-of-contents-container + 1.5em from .sidebar-toc = 3em
|
||||||
|
@media ( min-width: @min-width-desktop ) {
|
||||||
|
body:not(.vector-toc-collapsed) @{selector-main-menu-closed} ~ & {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-toc {
|
.sidebar-toc {
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
|
// Default spacing separating the sidebar TOC from the main menu or viewport.
|
||||||
|
margin-top: 1.5em;
|
||||||
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
|
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
|
@ -2,9 +2,7 @@
|
||||||
// Grid layout
|
// Grid layout
|
||||||
//
|
//
|
||||||
|
|
||||||
@height-header: 66px;
|
|
||||||
@width-gutter: 20px;
|
@width-gutter: 20px;
|
||||||
@padding-top-footer: 50px;
|
|
||||||
|
|
||||||
// Makes a column span entire page
|
// Makes a column span entire page
|
||||||
.mixin-column-full-width() {
|
.mixin-column-full-width() {
|
||||||
|
@ -42,39 +40,26 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-footer-container {
|
|
||||||
padding-top: @padding-top-footer;
|
|
||||||
padding-bottom: 82px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media ( max-width: @max-width-tablet ) {
|
|
||||||
.mw-header {
|
|
||||||
// Match header styles applied by grid-template-rows and row-gap
|
|
||||||
// when grid is disabled on lower resolutions
|
|
||||||
height: @height-header;
|
|
||||||
margin-bottom: @grid-row-gap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop ) {
|
@media ( min-width: @min-width-desktop ) {
|
||||||
.mw-page-container-inner {
|
.mw-page-container-inner {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-template: ~'@{height-header} min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
|
grid-template: ~'min-content min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
|
||||||
grid-template-areas: 'header header header'
|
grid-template-areas: 'header header header'
|
||||||
'sitebanner sitebanner sitebanner'
|
'sitenotice sitenotice sitenotice'
|
||||||
'sidebar gutter content'
|
'sidebar gutter content'
|
||||||
'toc gutter content'
|
'toc gutter content'
|
||||||
'footer footer footer';
|
'footer footer footer';
|
||||||
row-gap: @grid-row-gap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-body {
|
.mw-body {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#siteNotice {
|
// FIXME: Remove selector after I39959f43f20880e83bef945a7535d58cfe0b6412 has been in prod for a week
|
||||||
grid-area: sitebanner;
|
.mw-page-container-inner > #siteNotice,
|
||||||
|
.vector-sitenotice-container {
|
||||||
|
grid-area: sitenotice;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-table-of-contents-container {
|
.mw-table-of-contents-container {
|
||||||
|
@ -102,7 +87,6 @@
|
||||||
|
|
||||||
.mw-footer-container {
|
.mw-footer-container {
|
||||||
grid-area: footer;
|
grid-area: footer;
|
||||||
padding-top: @padding-top-footer - @grid-row-gap;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -72,7 +72,8 @@ body {
|
||||||
z-index: @z-index-indicators;
|
z-index: @z-index-indicators;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-body-header {
|
.mw-body-header,
|
||||||
|
.mw-body-subheader {
|
||||||
.mixin-clearfix();
|
.mixin-clearfix();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,6 +81,11 @@ body {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#siteNotice {
|
||||||
|
// Override core styles to ensure sufficient spacing between page content and main menu
|
||||||
|
margin: @grid-row-gap 0 !important; /* stylelint-disable-line declaration-no-important */
|
||||||
|
}
|
||||||
|
|
||||||
.vector-body {
|
.vector-body {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: @z-index-base;
|
z-index: @z-index-base;
|
||||||
|
@ -112,14 +118,6 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-table-of-contents-container {
|
|
||||||
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
// Needed for Grid-based layout
|
|
||||||
align-self: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parsoid-body {
|
.parsoid-body {
|
||||||
padding: @padding-content;
|
padding: @padding-content;
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
@import './components/LanguageButton.less';
|
@import './components/LanguageButton.less';
|
||||||
@import './components/UserLinks.less';
|
@import './components/UserLinks.less';
|
||||||
@import './components/Header.less';
|
@import './components/Header.less';
|
||||||
|
@import './components/Footer.less';
|
||||||
@import './components/MenuDropdown.less';
|
@import './components/MenuDropdown.less';
|
||||||
@import './components/MenuTabs.less';
|
@import './components/MenuTabs.less';
|
||||||
@import './components/MenuPortal.less';
|
@import './components/MenuPortal.less';
|
||||||
|
|
Loading…
Reference in New Issue