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: @background-color-base;
		margin-bottom: 15px;

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

	.ns-special .mw-body {
		background: @background-color-interactive;

		form {
			background: @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 {`
(Almost) no more CSS variables in minerva Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f 2024-06-10 20:52:01 +00:00			`background: @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 {`
(Almost) no more CSS variables in minerva Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f 2024-06-10 20:52:01 +00:00			`background: @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 {`
(Almost) no more CSS variables in minerva Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f 2024-06-10 20:52:01 +00:00			`background: @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			`}`