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

Change Zebra module to match current Vector styles

Browse source 
Changes the skins.vector.zebra.styles module to match
the current Vector 2022 styles.

**Visual changes**
(All pertaining to zebra.vector.zebra.styles)
- There are no grey backgrounds
- Context boxes with white backgrounds and drop-shadows
  are removed
- Page-tools sidebar width is the same as TOC sidebar width
- Content container is narrowed from 960px to 948px to prevent
  shifting content when pinning TOC or main menu.

Bug: T347638
Change-Id: If6e1ef21f076f6a9f0f8cafb2d745a7c13afb471
This commit is contained in:
Jan Drewniak 2023-10-30 11:22:46 -04:00 committed by Jdlrobson
parent cb9bf63924
commit cedf6d9438
5 changed files with 49 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/skins.vector.zebra.styles/components/StickyHeader.less
View file

@ -18,6 +18,7 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: @border-width-base @border-style-base @border-color-content-box;
//
// Layout
@ -146,7 +147,7 @@
}
.vector-sticky-pinned-container {
top: ~'calc( @{height-header} + @{grid-row-gap})';
top: @height-header;
}
// - T289817 `.mw-sticky-header-element` provides an API for template developers

12
resources/skins.vector.zebra.styles/layouts/grid.less
View file

@ -34,6 +34,17 @@
&.vector-feature-page-tools-pinned-enabled .vector-column-end {
width: @width-column-desktop;
}
// Align the sidebar menus with the bottom-border of the
// toolbar (below the page title) by pushing down the sidebar content
// by the hieght of the page title (font-size+padding) + 1px border.
// NOTE: This alignment happens to work (when the title is on a single line)
// but could be broken by line-height.
.vector-column-start,
.vector-column-end {
margin-top: ~'calc(@{font-size-heading-1} + @{margin-top-pre-content})';
border-top: 1px solid transparent;
}
}
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
@ -69,6 +80,7 @@
grid-template-areas:
'siteNotice'
'pageContent'
'columnStart'
'footer';
// Horizontally center content when single column

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

@ -9,22 +9,6 @@
// 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-breakpoint-desktop ) {
html& {
--padding-horizontal-content: @padding-horizontal-content-box-wide;
}
}
&html {
scroll-padding-top: @scroll-padding-top;
}
@ -39,6 +23,11 @@ body {
direction: ltr;
}
.mw-body {
// T315261 Remove horizontal padding, rely on .mw-page-container padding instead
padding: @padding-content;
}
.mw-body .firstHeading {
word-wrap: break-word;
margin-bottom: 0;
@ -69,8 +58,8 @@ body {
display: block;
position: absolute;
bottom: 0;
left: var( --padding-horizontal-content );
right: var( --padding-horizontal-content );
left: 0;
right: 0;
height: 1px;
background-color: @border-color-base;
}
@ -93,44 +82,9 @@ body {
float: right;
}
/**
* Style main content column to appear as a single box.
* We cannot use a wrapper to create the border around these elements because
* the Page Tools menu sits between the toolbar and content body and appears as a visually
* distinct box when it's pinned (i.e. a wrapper element would wrap Page Tools as well).
*/
.vector-page-titlebar,
.vector-page-toolbar,
.vector-body {
.mixin-vector-content-box();
padding-left: var( --padding-horizontal-content );
padding-right: var( --padding-horizontal-content );
}
.vector-page-titlebar {
padding-top: var( --padding-vertical-content );
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
border-bottom-style: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.vector-page-toolbar {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
border-top-style: none;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
border-bottom-style: none;
border-radius: 0;
}
.vector-body {
position: relative;
z-index: @z-index-base;
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 */
border-top-style: none;
}
#siteSub {
@ -141,8 +95,7 @@ body {
// are rendered.
#contentSub:not( :empty ),
#contentSub2 {
font-size: 84%;
line-height: 1.2em;
font-size: unit( @font-size-small, rem );
color: @color-subtle;
width: auto;
// Visually separate #contentSub and #contentSub2 (T315639)
@ -165,14 +118,33 @@ body {
// Use non-zero padding to disable margin collapse.
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)
padding-top: 0.05px;
padding-left: @padding-horizontal-page-container;
padding-right: @padding-horizontal-page-container;
background-color: @background-color-page-container;
}
@media ( min-width: @min-width-breakpoint-desktop ) {
.mw-page-container,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
padding-left: @padding-horizontal-page-container-desktop;
padding-right: @padding-horizontal-page-container-desktop;
}
}
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
.mw-page-container,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
padding-left: @padding-horizontal-page-container-desktop-wide;
padding-right: @padding-horizontal-page-container-desktop-wide;
}
}
.vector-header-container {
width: 100%;
display: flex;
justify-content: center;
background-color: @background-color-page-container;
border-bottom: @border-width-base @border-style-base @border-color-content-box;
}
.vector-header-container .mw-header,
@ -180,6 +152,7 @@ body {
width: 100%;
// A min-height is set to account for projects where no icon is set.
min-height: @height-header;
background-color: @background-color-page-container;
.mixin-vector-page-container-sizing();
}

31
resources/skins.vector.zebra.styles/mixins.less
View file

@ -21,17 +21,15 @@
&::after {
content: '';
background: url( ../skins.vector.styles/images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-browser, rem );
height: unit( 16 / @font-size-browser, rem );
width: unit( 12 / @font-size-browser, rem );
height: unit( 12 / @font-size-browser, rem );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: -1px;
margin-left: 7px;
}
}
.mixin-vector-content-box() {
background-color: @background-color-base;
border: @border-width-base @border-style-base @border-color-content-box;
border-radius: @border-radius-content-box;
}
.mixin-vector-dropdown-menu() {
@ -65,29 +63,6 @@
}
}
.mixin-page-container() {
max-width: @max-width-page-container;
// Set a min-width to make explicit we do not support anything below this threshold.
// For devices too small, they should be more useable with horizontal scrolling.
// e.g. Portrait on an iPad
min-width: @min-width-supported;
margin: 0 auto;
padding-left: @padding-horizontal-page-container;
padding-right: @padding-horizontal-page-container;
background-color: @background-color-page-container;
box-sizing: border-box;
@media ( min-width: @min-width-breakpoint-desktop ) {
padding-left: @padding-horizontal-page-container-desktop;
padding-right: @padding-horizontal-page-container-desktop;
}
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
padding-left: @padding-horizontal-page-container-desktop-wide;
padding-right: @padding-horizontal-page-container-desktop-wide;
}
}
.mixin-vector-scrollable-with-fade() {
overflow-y: auto;

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

@ -152,8 +152,8 @@
//
// Layout
//
@max-width-page-container: unit( 1596px / @font-size-browser, em ); // T305069 - 99.75em @ 16
@max-width-content-container: unit( 1040px / @font-size-browser, rem ); // T335155
@max-width-page-container: unit( 1596px / @font-size-browser, rem ); // T305069 - 99.75rem @ 16
@max-width-content-container: unit( 948px / @font-size-browser, rem ); // T335155
@padding-horizontal-page-container: unit( 24px / @font-size-browser, rem );
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, rem );
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, rem );