mediawiki-skins-Citizen/skinStyles/extensions/Echo/ext.echo.special.less

/*
 * Citizen
 *
 * SkinStyles for Extension:Echo
 * Module: ext.echo.special
 * Version: REL1_35 347c30e
 *
 * Date: 2023-06-29
 */

// Disable sticky header since it collides with Echo sticky header
#citizen-page-header-sticky-sentinel {
	display: none;
}

/* mw.echo.ui.DatedSubGroupListWidget.less */
.mw-echo-ui-subGroupListWidget {
	&-header-row {
		// More aligned
		display: flex;
		align-items: center;

		&-markAllReadButton {
			// Revert responsive font size tweak from Echo
			// As it breaks alignment
			font-size: revert !important;
		}
	}
}

.mw-echo-ui-datedSubGroupListWidget {
	.mw-body-content &-title {
		margin: 0;

		&-primary {
			font-size: var( --font-size-small );
			// Align with Citizen label styles
			color: var( --color-subtle );
			letter-spacing: 0.05em;
		}

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

/* mw.echo.ui.NotificationsInboxWidget.less */
.mw-echo-ui-notificationsInboxWidget {
	max-width: none;

	&-sidebar {
		padding-top: var( --space-sm ); // align with toolbarWrapper
		padding-right: var( --space-lg );
	}

	&-main {
		&-toolbar-top {
			margin-bottom: 0 !important;

			.mw-echo-ui-notificationsInboxWidget-row {
				display: table-row !important;
				// Fix misalign
				text-align: left;
			}
		}

		.mw-echo-ui-notificationItemWidget {
			border-radius: var( --border-radius-base );
		}
	}

	&-toolbarWrapper {
		max-width: ~'calc( 100vw - var(--padding-page) * 2 )';
		height: auto;
		padding: var( --space-sm ) 0;
		// Mimic Citizen sticky header
		margin: 0;
		margin-bottom: var( --space-md );
		overflow-x: auto;
		background-color: var( --color-surface-0 );
		filter: opacity( 0.9 );
		-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
		backdrop-filter: saturate( 50% ) blur( 16px );
		border-bottom: var( --border-width-base ) solid var( --border-color-base );
		box-shadow: none;
	}
}

.mw-echo-ui-notificationsInboxWidget-cell-placeholder,
.mw-echo-ui-notificationsInboxWidget-main-toolbar-settings,
.mw-echo-ui-notificationsInboxWidget-main-toolbar-pagination {
	display: table-cell !important;
}

/* mw.echo.ui.PageNotificationsOptionWidget.less */
.mw-echo-ui-pageNotificationsOptionWidget {
	&.oo-ui-optionWidget {
		padding: var( --space-xs ) var( --space-sm );
		border-radius: var( --border-radius-base );

		&-highlighted {
			color: var( --color-emphasized );
			background-color: var( --color-surface-3 );
		}

		&-selected {
			color: var( --color-progressive );
			background-color: var( --background-color-progressive-subtle );
		}

		&-selected&-highlighted,
		&-pressed&-highlighted {
			color: var( --color-progressive--hover );
			background-color: var( --background-color-progressive-subtle );
		}
	}

	&-label-count {
		color: var( --color-subtle );
		background-color: var( --color-surface-3 );

		.oo-ui-optionWidget-selected & {
			color: var( --color-progressive );
		}
	}
}

/* mw.echo.ui.CrossWikiUnreadFilterWidget.less */
.mw-echo-ui-crossWikiUnreadFilterWidget {
	// HACK: Make it sticky
	position: -webkit-sticky;
	position: sticky;
	top: var( --space-sm );
	padding: var( --space-md );
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-medium );

	&-title {
		font-size: var( --font-size-x-large );
		font-weight: var( --font-weight-semibold );
		color: var( --color-emphasized );
	}

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