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

Merge "[Refactor] Prepare existing styles for zebra module"

Browse source
This commit is contained in:
jenkins-bot 2023-04-19 21:12:40 +00:00 committed by Gerrit Code Review
parent 7407c48274 da92ecf7cc
commit 4faa1028c8
10 changed files with 111 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
resources/common/mixins.less
View file

@ -67,3 +67,26 @@
pointer-events: none; // Make the link below the fade clickable
}
}
.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-desktop ) {
padding-left: @padding-horizontal-page-container-desktop;
padding-right: @padding-horizontal-page-container-desktop;
}
@media ( min-width: @min-width-desktop-wide ) {
padding-left: @padding-horizontal-page-container-desktop-wide;
padding-right: @padding-horizontal-page-container-desktop-wide;
}
}

4
resources/common/variables.less
View file

@ -12,6 +12,10 @@
@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px
@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.
@min-width-supported: unit( 500px / @font-size-browser, em );
// Sizing calculation primitives.
@font-size-root: 100%;
@font-size-browser: 16; // Assumed browser default of `16px`

1
resources/skins.vector.styles/components/MainMenu.less
View file

@ -1,7 +1,6 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@import '../layouts/screen.less';
// Ensure there is only 1 main menu landmark at anytime
.vector-feature-main-menu-pinned-enabled .vector-header-start .vector-main-menu-landmark,

3
resources/skins.vector.styles/components/PageTitlebar.less
View file

@ -2,7 +2,8 @@
.vector-page-titlebar {
display: flex;
// Enabled bottom border via ::after element for Zebra update.
flex-wrap: wrap;
// Ensure language button or indicators are positioned to the right even when the title is hidden
justify-content: flex-end;
// Use box-shadow instead of border to allow border collapsing between titlebar and toolbar

48
resources/skins.vector.styles/components/PageTools.less
View file

@ -19,32 +19,30 @@
}
}
.vector-page-tools {
#vector-page-tools-pinned-container & {
width: 140px;
// Match spacing of TOC and main menu
margin-left: @padding-horizontal-dropdown-menu-item;
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
overflow-y: auto;
box-sizing: border-box;
padding-top: @padding-top-pinned-element;
// Add fade indicator.
.mixin-vector-scroll-indicator();
}
#vector-page-tools-pinned-container .vector-page-tools {
width: 140px;
// Match spacing of TOC and main menu
margin-left: @padding-horizontal-dropdown-menu-item;
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
overflow-y: auto;
box-sizing: border-box;
padding-top: @padding-top-pinned-element;
// Add fade indicator.
.mixin-vector-scroll-indicator();
}
// Ensure collapsible items are visible on lower resolutions
.vector-more-collapsible-item {
display: block;
// Ensure collapsible items are visible on lower resolutions
.vector-page-tools .vector-more-collapsible-item {
display: block;
@media ( min-width: @min-width-tablet ) {
display: none;
}
}
// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present)
.vector-has-collapsible-items {
@media ( max-width: @max-width-mobile ) {
display: block;
}
@media ( min-width: @min-width-tablet ) {
display: none;
}
}
// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present)
.vector-page-tools .vector-has-collapsible-items {
@media ( max-width: @max-width-mobile ) {
display: block;
}
}

8
resources/skins.vector.styles/layouts/preZebra.less
View file

@ -1,9 +1,11 @@
@import '../../common/mixins.less';
.vector-header-container {
.mixin-page-container();
}
.vector-feature-limited-width-disabled& {
max-width: none;
}
&.vector-feature-limited-width-disabled .vector-header-container {
max-width: none;
}
.vector-sticky-header-container {

54
resources/skins.vector.styles/layouts/screen.less
View file

@ -14,12 +14,6 @@
// see T259331.
@padding-content: @padding-top-content 0 1.5em;
// Breakpoints
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.
@min-width-supported: unit( 500px / @font-size-browser, em );
html {
scroll-padding-top: @scroll-padding-top;
}
@ -109,30 +103,6 @@ body {
padding: @padding-content;
}
.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;
// Use non-zero padding to disable margin collapse.
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)
padding: 0.05px @padding-horizontal-page-container;
background-color: @background-color-page-container;
box-sizing: border-box;
@media ( min-width: @min-width-desktop ) {
padding-left: @padding-horizontal-page-container-desktop;
padding-right: @padding-horizontal-page-container-desktop;
}
@media ( min-width: @min-width-desktop-wide ) {
padding-left: @padding-horizontal-page-container-desktop-wide;
padding-right: @padding-horizontal-page-container-desktop-wide;
}
}
// Container logic.
.mw-page-container {
// Setting position and z-index is important as it allows overlays appended to the body tag
@ -143,15 +113,11 @@ body {
// Fill the viewport even if the content height is small. This also helps
// mitigate a long sidebar overflowing the page container (T257518).
min-height: 100%;
// 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-bottom: 0.05px;
.mixin-page-container();
.vector-feature-limited-width-disabled & {
max-width: none;
}
}
.skin--responsive .mw-page-container {
min-width: auto;
}
.vector-header-container {
@ -163,14 +129,10 @@ body {
}
}
.vector-feature-zebra-design-disabled {
@import 'preZebra.less';
.vector-feature-limited-width-disabled .mw-page-container {
max-width: none;
}
.vector-feature-zebra-design-enabled {
@import 'zebra.less';
.skin--responsive .mw-page-container {
min-width: auto;
}
@import 'grid.less';
@import 'toc/pinned.less';
@import 'toc/unpinned.less';

56
resources/skins.vector.styles/layouts/toc/pinned.less
View file

@ -8,43 +8,41 @@
}
@media ( min-width: @min-width-desktop ) {
#mw-panel-toc {
.vector-feature-toc-pinned-enabled & {
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).
// NOTE: This property has an effect similar to 'overflow: hidden', and will prevent elements
// inside of the panel from being rendered outside of its bounding box, even when they would
// be positioned there using absolute positioning, negative margin, transforms, etc.
// That's why the negative margins have to be applied here, instead of on #vector-toc.
contain: paint;
// Align the left edge of the TOC text with the page container
margin-left: -@spacing-subsection-toggle;
}
.vector-feature-toc-pinned-enabled #mw-panel-toc {
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).
// NOTE: This property has an effect similar to 'overflow: hidden', and will prevent elements
// inside of the panel from being rendered outside of its bounding box, even when they would
// be positioned there using absolute positioning, negative margin, transforms, etc.
// That's why the negative margins have to be applied here, instead of on #vector-toc.
contain: paint;
// Align the left edge of the TOC text with the page container
margin-left: -@spacing-subsection-toggle;
}
#vector-toc-pinned-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
}
.vector-feature-toc-pinned-enabled & {
// Default spacing separating the sidebar TOC from the main menu.
margin-top: 1.5em;
}
.vector-feature-toc-pinned-enabled #vector-toc-pinned-container {
// Default spacing separating the sidebar TOC from the main menu.
margin-top: 1.5em;
}
.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled & {
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;
}
.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container {
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
.vector-toc {
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
padding-top: @padding-top-pinned-element;
padding-left: @spacing-subsection-toggle;
padding-right: @padding-horizontal-dropdown-menu-item;
.mixin-vector-scroll-indicator();
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
#vector-toc-pinned-container .vector-toc {
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
padding-top: @padding-top-pinned-element;
padding-left: @spacing-subsection-toggle;
padding-right: @padding-horizontal-dropdown-menu-item;
.mixin-vector-scroll-indicator();
}
}

23
resources/skins.vector.styles/layouts/zebra.less
View file

@ -7,26 +7,11 @@
.mw-header,
.vector-sticky-header {
max-width: @max-width-page-container;
padding-left: @padding-horizontal-page-container;
padding-right: @padding-horizontal-page-container;
box-sizing: border-box;
@media ( min-width: @min-width-desktop ) {
padding-left: @padding-horizontal-page-container-desktop;
padding-right: @padding-horizontal-page-container-desktop;
}
@media ( min-width: @min-width-desktop-wide ) {
padding-left: @padding-horizontal-page-container-desktop-wide;
padding-right: @padding-horizontal-page-container-desktop-wide;
}
.mixin-page-container();
}
}
&.vector-feature-limited-width-disabled .vector-header-container {
.mw-header,
.vector-sticky-header {
max-width: none;
}
&.vector-feature-limited-width-disabled .vector-header-container .mw-header,
&.vector-feature-limited-width-disabled .vector-header-container .vector-sticky-header {
max-width: none;
}

16
resources/skins.vector.styles/skin.less
View file

@ -3,12 +3,26 @@
* See '../common/common.less' for common screen and print Vector stylesheets.
*/
@import '../common/variables.less';
@import 'mediawiki.mixins.less';
@import '../common/variables.less';
@import '../common/mixins.less';
@media screen {
.vector-feature-zebra-design-disabled {
@import './layouts/preZebra.less';
}
.vector-feature-zebra-design-enabled {
@import './layouts/zebra.less';
}
}
@media screen {
// Layouts
@import './layouts/screen.less';
@import './layouts/grid.less';
@import './layouts/toc/pinned.less';
@import './layouts/toc/unpinned.less';
// Components
@import './components/SearchBoxLoader.less';