mediawiki-skins-MinervaNeue/skinStyles/mobile.special.mobileoptions.styles/minerva.less

@import '../../minerva.less/minerva.variables.less';

@media all and ( min-width: @width-breakpoint-tablet ) {
	.ns-special .pre-content {
		background: var( --background-color-base );
		margin-bottom: 15px;

		.tagline,
		h1 {
			margin: 0 @margin-content;
		}
	}

	.ns-special .mw-body {
		background: var( --background-color-interactive );

		form {
			background: var( --background-color-base );
		}
	}
}
Dev: Prep for storybook * Remove ambiguity in imports - say the file extension 'less' for all instances of variables and mixins. * Separate toast styles from drawer styles so they can be imported separately * associate header-action selector with its parent (.overlay-header) not parent's parent (.overlay) so it can be imported and rendered without the Overlay. Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c 2019-08-08 20:01:03 +00:00			`@import '../../minerva.less/minerva.variables.less';`
Optimise Special:MobileOptions for tablet display Bug: T180095 Change-Id: I0ef0ce914a360848f8f66b39c40588f3fa04647c 2017-12-01 18:52:02 +00:00
Fix LESS error, restore notifications and settings T140804 dropped the support for deviceTabletWidth in core (https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/451648/9/includes/DefaultSettings.php) This causes errors in these skinStyle files which are presumably not being checked with CI. Update these usages to use width-breakpoint-tablet instead Bug: T202021 Change-Id: Ie804f24275c99c939687d59cca9d62204fd74518 2018-08-15 19:10:51 +00:00			`@media all and ( min-width: @width-breakpoint-tablet ) {`
Optimise Special:MobileOptions for tablet display Bug: T180095 Change-Id: I0ef0ce914a360848f8f66b39c40588f3fa04647c 2017-12-01 18:52:02 +00:00			`.ns-special .pre-content {`
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff 2024-02-01 17:33:08 +00:00			`background: var( --background-color-base );`
[Bug] Special:MobileOptions heading padding should be consistent This simplifies commit 17a3b5b6b0fab97391c690b3a3cb538793215ad5 The top or bottom margins of contained elements will always collapse together (per http://seifi.org/css/understanding-taming-collapsing-margins-in-css.html) What we actually want is a margin bottom in tablet mode for Special:MobileOptions and a padding bottom for taglines that only exists if the tagline is not empty Bug: T202557 Change-Id: I741f08d2dec04f94b7c233a04a3fca7a065520f8 2018-11-13 22:12:39 +00:00			`margin-bottom: 15px;`

Optimise Special:MobileOptions for tablet display Bug: T180095 Change-Id: I0ef0ce914a360848f8f66b39c40588f3fa04647c 2017-12-01 18:52:02 +00:00			`.tagline,`
			`h1 {`
Convert Less variable names from camelCase to snake-case Converts all Less variable names from CamelCase to snake-case per the MediaWiki coding conventions. Removes the following unused Less variables, mostly related to icons, since those were converted to Codex: - @icon-touch-area-sm - @icon-touch-area-md - @min-size-icon (replaced with @size-icon-medium) - @icon-glyph-size-sm - @icon-size-sm - @icon-padding-sm - @icon-glyph-size-md - @icon-size-md - @margin-icon-md-labelled Bug: T350581 Change-Id: I1b16e77942d9bea20dcc5636a63d64aa2325a173 2024-01-31 15:06:56 +00:00			`margin: 0 @margin-content;`
Optimise Special:MobileOptions for tablet display Bug: T180095 Change-Id: I0ef0ce914a360848f8f66b39c40588f3fa04647c 2017-12-01 18:52:02 +00:00			`}`
			`}`
[Bug] Special:MobileOptions heading padding should be consistent This simplifies commit 17a3b5b6b0fab97391c690b3a3cb538793215ad5 The top or bottom margins of contained elements will always collapse together (per http://seifi.org/css/understanding-taming-collapsing-margins-in-css.html) What we actually want is a margin bottom in tablet mode for Special:MobileOptions and a padding bottom for taglines that only exists if the tagline is not empty Bug: T202557 Change-Id: I741f08d2dec04f94b7c233a04a3fca7a065520f8 2018-11-13 22:12:39 +00:00
Replace `#content` selector by `.mw-body` Has been replaced in other skins, `.mw-body` is exclusively used on `#content`. Change-Id: I56ca92a683a2f9f4181e7708a312e691448ce230 2019-11-26 05:34:22 +00:00			`.ns-special .mw-body {`
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff 2024-02-01 17:33:08 +00:00			`background: var( --background-color-interactive );`
[Bug] Special:MobileOptions heading padding should be consistent This simplifies commit 17a3b5b6b0fab97391c690b3a3cb538793215ad5 The top or bottom margins of contained elements will always collapse together (per http://seifi.org/css/understanding-taming-collapsing-margins-in-css.html) What we actually want is a margin bottom in tablet mode for Special:MobileOptions and a padding bottom for taglines that only exists if the tagline is not empty Bug: T202557 Change-Id: I741f08d2dec04f94b7c233a04a3fca7a065520f8 2018-11-13 22:12:39 +00:00
			`form {`
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff 2024-02-01 17:33:08 +00:00			`background: var( --background-color-base );`
[Bug] Special:MobileOptions heading padding should be consistent This simplifies commit 17a3b5b6b0fab97391c690b3a3cb538793215ad5 The top or bottom margins of contained elements will always collapse together (per http://seifi.org/css/understanding-taming-collapsing-margins-in-css.html) What we actually want is a margin bottom in tablet mode for Special:MobileOptions and a padding bottom for taglines that only exists if the tagline is not empty Bug: T202557 Change-Id: I741f08d2dec04f94b7c233a04a3fca7a065520f8 2018-11-13 22:12:39 +00:00			`}`
			`}`
Optimise Special:MobileOptions for tablet display Bug: T180095 Change-Id: I0ef0ce914a360848f8f66b39c40588f3fa04647c 2017-12-01 18:52:02 +00:00			`}`