wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "[Zebra] Adjust content padding"

Browse source
This commit is contained in:
jenkins-bot 2023-05-02 19:27:08 +00:00 committed by Gerrit Code Review
parent c7001374ff 760f9e5f41
commit a0387c54f0
2 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
resources/skins.vector.zebra.styles/layouts/screen.less
View file

@ -9,6 +9,22 @@
// see T259331.
@padding-content: @padding-top-content 0 1.5em;
/**
* Padding for the page content column gets smaller at narrow screen widths.
* NOTE: This selector represents the HTML element because :root is unavailable due to how
* the file is wrapped in an html selector in the skins.vector.zebra.styles/skin.less file.
*/
html& {
--padding-vertical-content: @padding-vertical-content-box;
--padding-horizontal-content: @padding-horizontal-content-box;
}
@media ( min-width: @min-width-desktop ) {
html& {
--padding-horizontal-content: @padding-horizontal-content-box-wide;
}
}
&html {
scroll-padding-top: @scroll-padding-top;
}
@ -55,8 +71,8 @@ body {
display: block;
position: absolute;
bottom: 0;
left: @padding-horizontal-content-box;
right: @padding-horizontal-content-box;
left: var( --padding-horizontal-content );
right: var( --padding-horizontal-content );
height: 1px;
background-color: @border-color-base;
}
@ -66,6 +82,12 @@ body {
// Contain the floating .mw-indicators, but don't use clearfix because of browser inconsistencies
// when combining 'clear' and 'margin-top' (T325391)
overflow: hidden;
// Margin is only applied to indicators inside `.vector-body-before-content` since they can
// also appear next to the page title, where margin is not needed.
.mw-indicators {
margin-top: @margin-top-pre-content;
}
}
// Language button at bottom of content.
@ -83,12 +105,12 @@ body {
.vector-page-toolbar,
.vector-body {
.mixin-vector-content-box();
padding-left: 50px;
padding-right: 50px;
padding-left: var( --padding-horizontal-content );
padding-right: var( --padding-horizontal-content );
}
.vector-page-titlebar {
padding-top: 30px;
padding-top: var( --padding-vertical-content );
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
border-bottom-style: none;
border-bottom-right-radius: 0;
@ -106,7 +128,7 @@ body {
.vector-body {
position: relative;
z-index: @z-index-base;
padding-bottom: 50px;
padding-bottom: var( --padding-vertical-content );
border-top-right-radius: 0;
border-top-left-radius: 0;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
@ -114,7 +136,7 @@ body {
}
#siteSub {
margin-top: 8px; // T311564
margin-top: @margin-top-pre-content; // T311564
}
// Styles only applied to non-empty #contentSub to avoid extra margins when both #contentSub and #contentSub2
@ -126,7 +148,7 @@ body {
color: @color-subtle;
width: auto;
// Visually separate #contentSub and #contentSub2 (T315639)
margin: 8px 0 0;
margin: @margin-top-pre-content 0 0;
}
.parsoid-body {
@ -155,7 +177,7 @@ body {
display: flex;
justify-content: center;
background-color: @background-color-page-container;
border-bottom: @border-width-base @border-style-base #eaecf0;
border-bottom: @border-width-base @border-style-base @border-color-content-box;
}
.vector-header-container .mw-header,

20
resources/skins.vector.zebra.styles/variables.less
View file

@ -96,6 +96,17 @@
@padding-top-tabs: 12px;
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;
// Content boxes
@border-radius-content-box: 4px;
@border-color-content-box: @background-color-interactive;
// Content padding
@padding-vertical-content-box: @spacing-150;
@padding-horizontal-content-box: @spacing-150;
// content box changes *horizontal* padding at wide resolutions
@padding-horizontal-content-box-wide: @spacing-300;
// Content box shadow
@box-shadow-content-box: @box-shadow-drop-medium;
// Dropdowns & menus
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
@padding-horizontal-dropdown-menu: 20px;
@ -103,12 +114,6 @@
@padding-vertical-dropdown-menu-item: 6px;
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
// Content boxes
@border-radius-content-box: 4px;
@border-color-content-box: #ececec;
@padding-vertical-content-box: 30px;
@padding-horizontal-content-box: 50px;
// Scroll Indicator
@height-scroll-indicator: 30px;
// The amount of space that should be between the bottom of the viewport and the
@ -134,6 +139,9 @@
// Language button
@height-button-lang: unit( 32 / @font-size-browser, em );
// Pre-content
@margin-top-pre-content: 8px;
// Header
// T245190 T296321 For sticky header, set an explicit height. This is needed for scroll padding
// and for other sticky elements on the page. Setting the height in relative units enables