mediawiki-skins-Citizen/skinStyles/mediawiki/special/mediawiki.special.changeslist.less

/*
 * Citizen
 *
 * SkinStyles for Special:RecentChanges and Watchlist
 * Module: mediawiki.special.changeslist
 * Version: 1.39.0
 *
 * Date: 2023-05-29
*/

@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';

/* default.less */
.mw-plusminus {
	&-pos {
		color: var( --color-success );
	}

	&-neg {
		color: var( --color-destructive );
	}

	&-null {
		color: var( --color-subtle );
	}
}

.mw-changeslist {
	h4 {
		z-index: @z-index-above-content; // Needed to cover the timeline dots
		padding: var( --space-sm ) 0;
		margin-bottom: 0;
		font-size: var( --font-size-x-small );
		font-weight: var( --font-weight-normal );
		color: var( --color-subtle );
		letter-spacing: 0.05em;
	}

	&-line {
		/* Disable timeline dot for nested changeline */
		.mw-changeslist-line::before {
			content: none;
		}

		&-inner {
			color: var( --color-subtle );
		}

		/* Add nested indent line */
		> td:first-child {
			position: relative;

			&::before {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 5px;
				width: 2px;
				content: '';
				background: var( --border-color-base );
			}
		}
	}

	&-separator {
		color: var( --color-subtle );
	}
}

.cloptions {
	padding: 0;
	margin: 0;
	border: 0;

	> legend {
		display: none; // Eh it is difficult to style legend
	}

	&:not( .oo-ui-widget ) {
		padding: var( --space-md );
		font-size: var( --font-size-small );
		background: var( --color-surface-2 );
		border-radius: var( --border-radius-medium );
	}
}

.client-js {
	.mw-recentchanges-toplinks {
		padding-left: 0;
	}

	.mw-recentchanges-toplinks:not( .mw-recentchanges-toplinks-collapsed ) {
		padding: 0; /* Shift padding to button only */
		margin-bottom: 16px; /* Same margin between rcfilter and saved filter */
		border-color: var( --border-color-base );
		border-radius: var( --border-radius-base );

		/* Extend button to full width */
		.oo-ui-buttonElement-frameless.oo-ui-labelElement:first-child {
			display: block;
			background: var( --color-surface-2 );
			border-top-left-radius: var( --border-radius-base );
			border-top-right-radius: var( --border-radius-base );

			.oo-ui-buttonElement-button {
				display: block;
			}

			.oo-ui-indicatorElement-indicator {
				right: 6px !important;
			}
		}
	}
}

.mw-recentchanges-toplinks {
	.oo-ui-buttonElement-frameless.oo-ui-labelElement:first-child {
		margin: 0;
	}
}

/*
 * Only apply stick header style on the special pages
 * Sometimes wiki transclude those pages and these styles will break regular pages
 */
.ns-special {
	.mw-changeslist h4 {
		.citizen-sticky-header( false, false );
	}
}

/*
 * Make changelist looks like a timeline
 * And also sync different history lists into the same styles
 */
.mw-changeslist,
.mw-contributions-list {
	position: relative;
	font-size: var( --font-size-small );

	/* Timeline line */
	&::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: ~'calc( var( --border-width-thick ) + 1px )';
		width: var( --border-width-thick );
		content: '';
		background: var( --border-color-base );
	}
}

.mw-changeslist ul,
.mw-contributions-list {
	margin: 0 !important;
	list-style: none;
}

.mw-changeslist-line,
.mw-contributions-list li {
	padding: var( --space-sm ) var( --space-xs ) !important;
	margin: 0 0 0 16px !important;
	color: var( --color-subtle );
	border-radius: var( --border-radius-base );

	&:hover {
		background-color: var( --background-color-button-quiet--hover );

		&::before {
			background-color: var( --color-emphasized );
		}
	}

	/* Timeline dot */
	&::before {
		position: absolute;
		left: 0;
		display: block;
		width: 8px;
		height: 8px;
		margin-top: 7px;
		content: '';
		background-color: var( --color-subtle );
		border-radius: 100%;
		outline: 4px solid var( --color-surface-0 );
	}

	.comment {
		color: var( --color-base ); // Make comment more readable
	}
}

.mw-pager-navigation-bar {
	margin: var( --space-md ) 0;
	color: var( --color-subtle );
}