diff --git a/resources/mixins.less b/resources/mixins.less index 80acd3526..731bad028 100644 --- a/resources/mixins.less +++ b/resources/mixins.less @@ -83,7 +83,7 @@ .citizen-card-hide( bottom @position ); .citizen-card-transition(); - @media ( min-width: @width-breakpoint-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { & when ( @position = left ) { right: unset; } @@ -93,7 +93,7 @@ } } - @media ( min-width: @width-breakpoint-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { right: unset; left: 100%; & when ( @position = left ) { diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less index 9a25ebbc4..b6e554f6e 100644 --- a/resources/skins.citizen.styles/common/common.less +++ b/resources/skins.citizen.styles/common/common.less @@ -145,7 +145,7 @@ video { } } -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .mw-body, .parsoid-body { overflow-x: hidden; // fallback if clip is not supported @@ -153,7 +153,7 @@ video { } } -@media ( min-width: @width-breakpoint-tablet ) { +@media ( min-width: @min-width-breakpoint-tablet ) { // Delay scroll animation won't happen on load // Use it only for larger viewport as it is very costly // on mobile devices diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less index 749ab69a0..9f4b77795 100644 --- a/resources/skins.citizen.styles/common/cssvariables.less +++ b/resources/skins.citizen.styles/common/cssvariables.less @@ -159,7 +159,7 @@ html { --border-color-input--hover: @dark-border-color-input--hover; } -@media ( min-width: @width-breakpoint-tablet ) { +@media ( min-width: @min-width-breakpoint-tablet ) { :root { --font-size-h1: 2rem; --font-size-h2: 1.5rem; @@ -172,7 +172,7 @@ html { } } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { html { --padding-page: @padding-page * 2; --header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )'; diff --git a/resources/skins.citizen.styles/components/Drawer.less b/resources/skins.citizen.styles/components/Drawer.less index 4038876fd..1bcf0b798 100644 --- a/resources/skins.citizen.styles/components/Drawer.less +++ b/resources/skins.citizen.styles/components/Drawer.less @@ -53,7 +53,7 @@ } } -@media ( min-width: @width-breakpoint-tablet ) { +@media ( min-width: @min-width-breakpoint-tablet ) { .citizen-drawer { &__logo img { // Bigger logo @@ -70,7 +70,7 @@ } } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .citizen-drawer { &__header { justify-content: flex-start; diff --git a/resources/skins.citizen.styles/components/Footer.less b/resources/skins.citizen.styles/components/Footer.less index 8c9406826..0ac11551e 100644 --- a/resources/skins.citizen.styles/components/Footer.less +++ b/resources/skins.citizen.styles/components/Footer.less @@ -118,7 +118,7 @@ } } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .citizen-footer { margin-bottom: 0; } diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less index 891ec9f8c..5dd2375c6 100644 --- a/resources/skins.citizen.styles/components/Header.less +++ b/resources/skins.citizen.styles/components/Header.less @@ -153,7 +153,7 @@ } } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .citizen-header { --header-direction: column; top: 0; @@ -172,7 +172,7 @@ } /* Hide header when scroll down on smaller screen sizes */ -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .citizen-header { transition: var( --transition-menu ); transition-property: transform; diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less index cb9eaa90d..f0baf33ce 100644 --- a/resources/skins.citizen.styles/components/Pagetools.less +++ b/resources/skins.citizen.styles/components/Pagetools.less @@ -238,7 +238,7 @@ } // To avoid more menu from overflow in narrow screen -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .page-actions { &__item { position: unset; @@ -251,7 +251,7 @@ } } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .page-actions { > .mw-portlet { li > a { diff --git a/resources/skins.citizen.styles/components/Search.less b/resources/skins.citizen.styles/components/Search.less index 664aefbb0..cba447f8d 100644 --- a/resources/skins.citizen.styles/components/Search.less +++ b/resources/skins.citizen.styles/components/Search.less @@ -118,7 +118,7 @@ } } -@media ( max-width: @width-breakpoint-desktop ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .citizen-search__card { z-index: 1; // So that overlay does not cover card width: auto; diff --git a/resources/skins.citizen.styles/components/StickyHeader.less b/resources/skins.citizen.styles/components/StickyHeader.less index b96ae9ac2..e2783e99f 100644 --- a/resources/skins.citizen.styles/components/StickyHeader.less +++ b/resources/skins.citizen.styles/components/StickyHeader.less @@ -55,7 +55,7 @@ } // Hide sticky header on scroll down on smaller screens -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .citizen-body-header--sticky { .mw-body-header { transition: var( --transition-menu ); @@ -71,7 +71,7 @@ } // Make sticky header more compact if there are less screen estate -@media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) { +@media ( max-width: @max-width-breakpoint-tablet ), ( max-height: 800px ) { .citizen-body-header--sticky { #siteSub { display: none; diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less index e66a150ed..51763b78d 100644 --- a/resources/skins.citizen.styles/components/TableOfContents.less +++ b/resources/skins.citizen.styles/components/TableOfContents.less @@ -224,7 +224,7 @@ } } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .citizen-toc { grid-area: toc; diff --git a/resources/skins.citizen.styles/layout.less b/resources/skins.citizen.styles/layout.less index 0e8d398ec..1b784e94e 100644 --- a/resources/skins.citizen.styles/layout.less +++ b/resources/skins.citizen.styles/layout.less @@ -51,7 +51,7 @@ grid-area: content; } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .citizen-page-container { // Reserve space for header margin-left: var( --header-size ); @@ -70,7 +70,7 @@ } /* Wider page width for certain namespaces */ -@media ( min-width: @width-breakpoint-desktop-wide ) { +@media ( min-width: @min-width-breakpoint-desktop-wide ) { // 1 - Special, 6 - File, 14 - Category .ns { &--1, diff --git a/resources/skins.citizen.styles/skinning/content.media-common.less b/resources/skins.citizen.styles/skinning/content.media-common.less index c1323c5eb..57f82cb3f 100644 --- a/resources/skins.citizen.styles/skinning/content.media-common.less +++ b/resources/skins.citizen.styles/skinning/content.media-common.less @@ -67,7 +67,7 @@ figure[ typeof~='mw:File/Frame' ] { } // Do not float content in mobile view -@media ( min-width: @width-breakpoint-tablet ) { +@media ( min-width: @min-width-breakpoint-tablet ) { figure[ typeof~='mw:File/Thumb' ], figure[ typeof~='mw:File/Frame' ] { > figcaption { diff --git a/resources/skins.citizen.styles/skinning/content.thumbnails-common.less b/resources/skins.citizen.styles/skinning/content.thumbnails-common.less index 199d73aa3..a42edf2d9 100644 --- a/resources/skins.citizen.styles/skinning/content.thumbnails-common.less +++ b/resources/skins.citizen.styles/skinning/content.thumbnails-common.less @@ -51,7 +51,7 @@ div.thumbinner { } // Do not float content in mobile view -@media ( min-width: @width-breakpoint-tablet ) { +@media ( min-width: @min-width-breakpoint-tablet ) { /* @noflip */ div.tright, div.floatright, diff --git a/resources/variables.less b/resources/variables.less index 63648bb04..304bdde4c 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -1,33 +1,41 @@ /* - * Citizen - LESS variables - * https://starcitizen.tools - */ + * Citizen + * + * All LESS variables used in the skin must be defined here + * Use CSS variables from cssvariables.less is preferrable + * Only import this stylesheet when LESS variables is nessecary + * + * Related files: + * - Citizen CSS variables: skins.citizen.styles/common/cssvariables.less + * - Override MW skin default variables: mediawiki.less/mediawiki.skin.variables.less + * +*/ -// Import MediaWiki-supplied mixins -@import 'mediawiki.mixins'; -/* == Breakpoints == */ -/** - * Minimum available screen width at which a device can be considered a mobile device - * Many older feature phones have screens smaller than this value. +/* Imports */ +/* + * MediaWiki mixins + * https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.mixins.less */ -@width-breakpoint-mobile: 320px; - -/** - * Minimum available screen width at which a device can be considered a tablet - * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low - * enough to cover iPad (768px). +@import 'mediawiki.mixins'; +/* + * MediaWiki skin variables + * https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less + * @see T349359 */ -@width-breakpoint-tablet: 720px; +@import 'mediawiki.skin.variables.less'; -/* Minimum available screen width at which a device can be considered a desktop. */ -@width-breakpoint-desktop: 1000px; -/* Wider desktop breakpoint */ -@width-breakpoint-desktop-wide: 1300px; +/* Compatiblity */ +// @since 1.41 +@min-width-breakpoint-mobile: 320px; +@min-width-breakpoint-tablet: 640px; +@min-width-breakpoint-desktop: 1120px; +@min-width-breakpoint-desktop-wide: 1680px; +@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px; +@max-width-breakpoint-tablet: @min-width-breakpoint-desktop - 1px; +@max-width-breakpoint-desktop: @min-width-breakpoint-desktop-wide - 1px; -/* Extra wide desktop breakpoint */ -@width-breakpoint-desktop-extrawide: 2000px; /* == Spacing == */ @space-unit: 1rem; diff --git a/skinStyles/extensions/Capiunto/capiunto.infobox.main.less b/skinStyles/extensions/Capiunto/capiunto.infobox.main.less index 5a465c977..36aa4b9bf 100644 --- a/skinStyles/extensions/Capiunto/capiunto.infobox.main.less +++ b/skinStyles/extensions/Capiunto/capiunto.infobox.main.less @@ -27,7 +27,7 @@ } /* Sync with floatright styles */ - @media ( min-width: @width-breakpoint-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { float: right; margin-left: var( --space-lg ); clear: right; diff --git a/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less b/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less index 1de614152..7fa93ecf0 100644 --- a/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less +++ b/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less @@ -16,7 +16,7 @@ grid-template-columns: 1fr; gap: var( --space-sm ); width: auto; - max-width: @width-breakpoint-tablet; + max-width: @max-width-breakpoint-tablet; padding: var( --space-md ); margin: var( --space-xs ); font-size: 0.875rem; @@ -26,7 +26,7 @@ border-radius: var( --border-radius--large ); box-shadow: var( --box-shadow-dialog ); - @media only screen and ( min-width: @width-breakpoint-desktop ) { + @media only screen and ( min-width: @min-width-breakpoint-desktop ) { right: unset; left: var( --header-size ); } diff --git a/skinStyles/extensions/Echo/ext.echo.ui.less b/skinStyles/extensions/Echo/ext.echo.ui.less index b142c046f..92130ec0a 100644 --- a/skinStyles/extensions/Echo/ext.echo.ui.less +++ b/skinStyles/extensions/Echo/ext.echo.ui.less @@ -27,13 +27,13 @@ } } -@media ( min-width: @width-breakpoint-tablet ) { +@media ( min-width: @min-width-breakpoint-tablet ) { .mw-echo-ui-notificationBadgeButtonPopupWidget-popup { // .citizen-header-card-tablet( right ); } } -@media ( min-width: @width-breakpoint-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .mw-echo-ui-notificationBadgeButtonPopupWidget-popup { bottom: 0 !important; left: var( --header-size ) !important; diff --git a/skinStyles/extensions/MediaSearch/mediasearch.styles.less b/skinStyles/extensions/MediaSearch/mediasearch.styles.less index 76615c429..0688053bd 100644 --- a/skinStyles/extensions/MediaSearch/mediasearch.styles.less +++ b/skinStyles/extensions/MediaSearch/mediasearch.styles.less @@ -769,7 +769,7 @@ border-radius: var( --border-radius--large ); // Responsive handling - @media screen and ( max-width: @width-breakpoint-tablet ) { + @media screen and ( max-width: @max-width-breakpoint-tablet ) { position: fixed; top: unset; bottom: 0; @@ -796,7 +796,7 @@ &__list-wrapper--collapsed { // Responsive handling - @media screen and ( max-width: @width-breakpoint-tablet ) { + @media screen and ( max-width: @max-width-breakpoint-tablet ) { // Since the quickview card is a modal, we don't need the right margin anymore margin-right: 0; } @@ -902,7 +902,7 @@ color: var( --color-base--emphasized ); border-radius: var( --border-radius--small ); - @media screen and ( min-width: @width-breakpoint-tablet ) { + @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: 0.875rem; } @@ -937,7 +937,7 @@ &__namespace { border-radius: var( --border-radius--small ); - @media screen and ( min-width: @width-breakpoint-tablet ) { + @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: 0.875rem; } @@ -966,14 +966,14 @@ } .sdms-search-results-count { - @media screen and ( min-width: @width-breakpoint-tablet ) { + @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: 0.875rem; } } &__clear { &--no-js { - @media screen and ( min-width: @width-breakpoint-tablet ) { + @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: 0.875rem; } } diff --git a/skinStyles/extensions/MultimediaViewer/mmv.less b/skinStyles/extensions/MultimediaViewer/mmv.less index 72b04d41f..4b965046c 100644 --- a/skinStyles/extensions/MultimediaViewer/mmv.less +++ b/skinStyles/extensions/MultimediaViewer/mmv.less @@ -24,7 +24,7 @@ box-shadow: var( --box-shadow-dialog ); // The dialog will always show above the metadata in mobile view - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { top: unset !important; right: 0 !important; bottom: @mmv-height-abovethefold !important; @@ -40,7 +40,7 @@ background-color: var( --color-surface-1 ); // Hide arrow since the dialog is no longer relative - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { display: none; } } @@ -207,7 +207,7 @@ /* mmv.ui.canvas.less */ .mw-mmv-image img { - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { pointer-events: none; // It is frustrating to misclick the image on mobile // So that the image is not clickable on mobile @@ -396,7 +396,7 @@ font-size: 0.875rem; // Icon only button for smaller screen size - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { text-indent: -9999px; &::before { @@ -459,7 +459,7 @@ &.mw-mmv-title-smaller { font-size: 1rem; - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { font-size: 0.875rem; } } @@ -477,7 +477,7 @@ font-size: 0.875rem; color: var( --color-base--subtle ); - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { font-size: 0.8125rem; } @@ -516,7 +516,7 @@ gap: var( --space-lg ); background-color: transparent; - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { grid-template-areas: 'desc desc' 'links links' @@ -552,7 +552,7 @@ li { font-size: 0.875rem; - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { font-size: 0.8125rem; } diff --git a/skinStyles/extensions/Popups/ext.popups.main.less b/skinStyles/extensions/Popups/ext.popups.main.less index b8550e9d4..1db6f385c 100644 --- a/skinStyles/extensions/Popups/ext.popups.main.less +++ b/skinStyles/extensions/Popups/ext.popups.main.less @@ -209,7 +209,7 @@ } // Responsive support -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .mwe-popups { position: fixed; inset: auto 0 0 0 !important; diff --git a/skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less b/skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less index 9508d845c..28a417fc1 100644 --- a/skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less +++ b/skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less @@ -72,7 +72,7 @@ } } -@media all and ( min-width: @width-breakpoint-tablet ) { +@media all and ( min-width: @min-width-breakpoint-tablet ) { .ext-related-articles-card-list { gap: var( --space-sm ); diff --git a/skinStyles/extensions/RelatedArticles/ext.relatedArticles.styles.less b/skinStyles/extensions/RelatedArticles/ext.relatedArticles.styles.less index 620bce33d..21a78d107 100644 --- a/skinStyles/extensions/RelatedArticles/ext.relatedArticles.styles.less +++ b/skinStyles/extensions/RelatedArticles/ext.relatedArticles.styles.less @@ -15,7 +15,7 @@ min-height: 19rem; // relatedarticle needs a min-height to render padding: 0 var( --padding-page ); - @media ( min-width: @width-breakpoint-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { min-height: 7.75rem; } } diff --git a/skinStyles/extensions/Tabber/ext.Tabber.less b/skinStyles/extensions/Tabber/ext.Tabber.less index 93d086d75..0e48c03a6 100644 --- a/skinStyles/extensions/Tabber/ext.Tabber.less +++ b/skinStyles/extensions/Tabber/ext.Tabber.less @@ -52,7 +52,7 @@ } } -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .tabber { ul.tabbernav { flex-wrap: nowrap; diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less index 1037a72ed..d3ad57492 100644 --- a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less +++ b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less @@ -57,7 +57,7 @@ } // Responsive -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .uls-menu { right: var( --padding-page ) !important; left: var( --padding-page ) !important; diff --git a/skinStyles/extensions/UploadWizard/ext.uploadWizard.less b/skinStyles/extensions/UploadWizard/ext.uploadWizard.less index 701623996..0e21a5d00 100644 --- a/skinStyles/extensions/UploadWizard/ext.uploadWizard.less +++ b/skinStyles/extensions/UploadWizard/ext.uploadWizard.less @@ -21,7 +21,7 @@ border-top-color: var( --border-color-base ); border-bottom-color: var( --border-color-base ); - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { padding-left: 0; } } @@ -311,7 +311,7 @@ h3.mwe-upwiz-metadata-title { font-weight: var( --font-weight-semibold ); } -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { #mwe-upwiz-stepdiv-details { /* Single column in limited width */ .mwe-upwiz-data, diff --git a/skinStyles/extensions/WikiHiero/ext.wikihiero.less b/skinStyles/extensions/WikiHiero/ext.wikihiero.less index 1817fbaea..0fcd27247 100644 --- a/skinStyles/extensions/WikiHiero/ext.wikihiero.less +++ b/skinStyles/extensions/WikiHiero/ext.wikihiero.less @@ -54,7 +54,7 @@ &-form { background: var( --color-surface-0 ); - @media screen and ( min-width: @width-breakpoint-tablet ) { + @media screen and ( min-width: @min-width-breakpoint-tablet ) { top: ~'calc( var( --line-height-xs ) * var( --font-size-h3 ) + 2 * var( --space-md ) )'; } } diff --git a/skinStyles/mediawiki/debug/mediawiki.debug.less b/skinStyles/mediawiki/debug/mediawiki.debug.less index d9dbebb62..1ba2a450a 100644 --- a/skinStyles/mediawiki/debug/mediawiki.debug.less +++ b/skinStyles/mediawiki/debug/mediawiki.debug.less @@ -17,7 +17,7 @@ width: -moz-available; margin-bottom: var( --header-size ); - @media ( min-width: @width-breakpoint-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { margin-bottom: 0; // So that it is not hidden by header margin-left: ~'calc( var( --header-size ) + 1px )'; // compensate border @@ -149,7 +149,7 @@ a.mw-debug-panelabel:visited { letter-spacing: 0.05em; } - @media ( min-width: @width-breakpoint-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { // So that it is not hidden by header margin-left: var( --header-size ); } diff --git a/skinStyles/mediawiki/special/mediawiki.special.changeslist.legend.less b/skinStyles/mediawiki/special/mediawiki.special.changeslist.legend.less index e32a47be2..4365d7d3e 100644 --- a/skinStyles/mediawiki/special/mediawiki.special.changeslist.legend.less +++ b/skinStyles/mediawiki/special/mediawiki.special.changeslist.legend.less @@ -38,7 +38,7 @@ margin-left: var( --space-sm ); } - @media ( max-width: @width-breakpoint-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { float: none; margin: 0; } diff --git a/skinStyles/mediawiki/special/mediawiki.special.search.styles.less b/skinStyles/mediawiki/special/mediawiki.special.search.styles.less index dc466beed..7215116c3 100644 --- a/skinStyles/mediawiki/special/mediawiki.special.search.styles.less +++ b/skinStyles/mediawiki/special/mediawiki.special.search.styles.less @@ -167,7 +167,7 @@ } } -@media ( max-width: @width-breakpoint-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { .results-info { display: none; } diff --git a/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less b/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less index eeecf4db8..e660f774b 100644 --- a/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less +++ b/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less @@ -80,7 +80,7 @@ } } -@media ( min-width: @width-breakpoint-tablet ) { +@media ( min-width: @min-width-breakpoint-tablet ) { .mw-body-content > .mw-ui-container { grid-template-areas: 'message message' diff --git a/skinStyles/mediawiki/ui/mediawiki.ui.icon.less b/skinStyles/mediawiki/ui/mediawiki.ui.icon.less index 6c47b7b5f..bc6b7e4f1 100644 --- a/skinStyles/mediawiki/ui/mediawiki.ui.icon.less +++ b/skinStyles/mediawiki/ui/mediawiki.ui.icon.less @@ -24,7 +24,7 @@ } } -@media all and ( min-width: @width-breakpoint-desktop ) { +@media all and ( min-width: @min-width-breakpoint-desktop ) { .mw-ui-icon-with-label-desktop { color: var( --color-base--subtle ) !important;