Adding skin styles for the changeslist module.

The changeslist module is the list of results on special
pages such as recent changes, watchlist, and parts of action history.

Adds a skin style to special.changeslist module.

Bug: T228419
Change-Id: I324b1f136f5314cb6acdba3155b07136bbde363a

minerva.less/minerva.mixins.less

@@ -36,13 +36,14 @@
 }
 
 .changeslist-row() {
+	font-size: 0.85em;
 	list-style: none;
 	position: relative;
-	min-height: 100px;
+	min-height: 80px;
 	/* !important to override the too-specific rule .content ol li, .content ul li */
 	margin: 0 !important;
+	padding: 12px 0;
 	border-bottom: 1px solid @colorGray14;
-	padding-bottom: 32px;
 }
 
 .changeslist-row-item() {

minerva.less/minerva.variables.less

@@ -27,6 +27,13 @@
 @grayLight: @colorGray12;
 @grayLightest: @colorGray14;
 
+/*
+* FIXME: Use these variables directly from mediawiki-ui-base when available.
+*/
+@wmui-color-green30: #14866d;
+@wmui-color-red30: #b32424;
+@wmui-color-grey30: #a2a9b1;
+
 @skinContentBgColor: #fff;
 
 // Navigation Drawers

skin.json

@@ -185,6 +185,12 @@
 			],
 			"mediawiki.content.json": [
 				"skinStyles/mediawiki.content-json/minerva.less"
+			],
+			"mediawiki.special.changeslist": [
+				"skinStyles/mediawiki.special.changeslist.less"
+			],
+			"mediawiki.special.changeslist.legend": [
+				"skinStyles/mediawiki.special.changeslist.legend.less"
 			]
 		}
 	},

skinStyles/mediawiki.action.history.styles.less

@@ -171,7 +171,6 @@
 		li {
 			min-height: inherit;
 			padding: 12px 0;
-			font-size: 0.85em;
 		}
 
 		li:after {
@@ -214,6 +213,7 @@
 		.mw-changeslist-date {
 			float: left;
 			font-weight: bold;
+			clear: none;
 		}
 
 		// user name

skinStyles/mediawiki.special.changeslist.legend.less

@@ -0,0 +1,8 @@
+/**
+ * Changeslist legends are hidden on Minerva due to their complexity
+ * on mobile displays.
+ */
+
+.mw-changeslist-legend {
+	display: none !important;
+}

skinStyles/mediawiki.special.changeslist.less

@@ -0,0 +1,107 @@
+/**
+ * The "changeslist" module appears on Special pages such
+ * as recent changes, watchlist, and parts of the action history page.
+ */
+
+@import '../minerva.less/minerva.mixins';
+@import '../minerva.less/minerva.variables';
+@import 'mediawiki.ui/mixins.buttons';
+@import 'mediawiki.ui/variables';
+
+ul.special {
+	padding-left: 0 !important; // overriding `.content ul`
+
+	// the following selector are nested due to their
+	// generic names.
+	.mw-title {
+		font-weight: bold;
+	}
+
+	.comment {
+		clear: both;
+		font-style: italic;
+		line-height: 1.4em;
+		padding: 0.5em 0;
+	}
+}
+
+.mw-changeslist-line {
+	.changeslist-row();
+}
+
+.mw-changeslist-line-inner {
+	display: block;
+}
+
+.mw-changeslist-line-inner > * {
+	float: left;
+	margin-right: 0.5em;
+}
+
+.mw-changeslist-line-inner:before,
+.mw-changeslist-line-inner:after {
+	.clearfix();
+}
+
+.mw-changeslist-date,
+.mw-tag-markers {
+	clear: left;
+}
+
+/**
+ * Colored watchlist and recent changes numbers.
+ */
+.mw-plusminus-pos {
+	color: @wmui-color-green30;
+}
+
+.mw-plusminus-neg {
+	color: @wmui-color-red30;
+}
+
+.mw-plusminus-null {
+	color: @wmui-color-grey30;
+}
+
+/*
+ * Bidi-isolate these numbers.
+ * See https://phabricator.wikimedia.org/T93484
+ */
+.mw-plusminus-pos,
+.mw-plusminus-neg,
+.mw-plusminus-null {
+	unicode-bidi: -moz-isolate;
+	unicode-bidi: isolate;
+}
+
+/**
+ * "pill" style tags meant to emulate the OOUI ".oo-ui-tagItemWidget" style.
+ */
+
+.mw-tag-markers {
+	margin: 0 0 0.5em 0;
+}
+
+.mw-tag-marker {
+	// due to the extra space afforded by padding,
+	// we can make the font-size a bit smaller to save space.
+	font-size: @taglineFontSize;
+	display: inline-block;
+	box-sizing: border-box;
+	height: 1.6em;
+	border: 1px solid #a2a9b1;
+	border-radius: 1.6em;
+	line-height: 1.6em;
+	padding: 0 0.6em;
+	vertical-align: middle;
+	white-space: nowrap;
+}
+
+/**
+ * Button style rollback link, visible to admins.
+ */
+.mw-rollback-link {
+	.mw-ui-button();
+	float: right;
+	font-size: @taglineFontSize;
+}