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

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

@media all and ( min-width: @min-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
styles: Replace deprecated breakpoints The values have slightly changed: - Tablet breakpoint is decreased by 80px, pushing lesser devices into a mobile only experience but should make barely a difference to vast majority of our users. - Biggest difference is in `min-width-breakpoint-desktop`, which is increased by 120px in comparison to `@width-breakpoint-desktop: 1000px` Also removing one out-dated feature phone clause. TECHNICAL CHANGES: * The previous breakpoint was tied to the maximum content width. The previous maximum content width is preserved, and several media queries are adjusted to make use of it. * The header (logo) is not optimized for 640px-720px. For now a temporary fix is but in place which will be investigated as part of T366859 VISUAL CHANGES: * 6 visual changes which improve alignment in language and visual editor overlay and diffs (where wikidiff2 is not installed) Bug: T349793 Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779 Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac 2023-11-07 09:03:29 +00:00			`@media all and ( min-width: @min-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			`}`