MediaWiki:Common.less/notifications.less

// MediaWiki notif popup when saving edits or adding page to watchlist
.mw-notification {
	background-color: var(--body-light);
	border-color: var(--body-border);
	color: var(--text-color);
}

// == Echo ==
// Special:Notifications
// Page toolbar
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
	background: var(--body-main);
}

// secondary dates next to "Today", "Yesterday", etc.
.mw-body-content .mw-echo-ui-datedSubGroupListWidget-title-secondary {
	color: var(--byline-color);
}

// wiki name
.mw-echo-ui-pageNotificationsOptionWidget {
	&.oo-ui-optionWidget-selected {
		background-color: var(--ooui-normal);
		color: var(--ooui-accent);
	}

	// number of notifs
	&-label-count {
		background-color: var(--ooui-normal);
		color: var(--byline-color);

		// number of notifs for selected
		.oo-ui-optionWidget-selected & {
			color: var(--ooui-accent);
		}
	}

	// highlighted wiki name
	&.oo-ui-optionWidget-highlighted {
		background-color: var(--ooui-normal);
		color: var(--text-color);
	}
}

.mw-echo-ui-crossWikiUnreadFilterWidget {
	border-color: var(--body-border);

	// "Pages with unread notifications"
	&-subtitle {
		color: var(--byline-color);
	}
}


// popup and footer
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
	> .oo-ui-popupWidget-popup {
		> .oo-ui-popupWidget-head,
		> .oo-ui-popupWidget-footer {
			border-color: var(--ooui-interface-border);
		}

		// in actuality an ooui button
		> .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
			border-left-color: var(--ooui-normal-border);
		}
	}
}

// Notifications interface
.mw-echo-ui-notificationItemWidget {
	background-color: var(--ooui-normal);
	border-color: var(--ooui-normal-border);

	&:hover,
	&-unread:hover {
		background-color: var(--ooui-normal--hover);
	}

	&:last-child {
		border-bottom-color: var(--ooui-normal-border);
	}

	&-unread {
		background-color: var(--search-box);
	}
}

.mw-echo-ui-crossWikiNotificationItemWidget-group,
.mw-echo-ui-bundleNotificationItemWidget-group {
	background-color: var(--ooui-interface);
}

// unread circle
.mw-echo-ui-toggleReadCircleButtonWidget-circle {
	background-color: var(--ooui-progressive);

	.mw-echo-ui-toggleReadCircleButtonWidget:hover & {
		background-color: var(--ooui-progressive--hover);
	}
}

// read
.mw-echo-ui-toggleReadCircleButtonWidget-circle-unread {
	background-color: var(--ooui-normal);
	border-color: var(--ooui-normal-border);
}

// same text colour for all
.mw-echo-ui-notificationItemWidget-content-message-header,
.mw-echo-ui-notificationItemWidget-content-message-body,
.mw-echo-ui-menuItemWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
.mw-echo-ui-notificationItemWidget-content-actions-timestamp {
	color: var(--ooui-text);
}

.mw-echo-ui-bundleNotificationItemWidget-group {
	background-color: var(--body-main);
}

@notification-background-unseen: var(--wikitable-bg-lighter);
@notification-background-unread: var(--search-box);
@notification-background-read: var(--body-main);

@keyframes unseen-fadeout-to-unread {
	from {
		background-color: @notification-background-unseen;
	}

	to {
		background-color: @notification-background-unread;
	}
}

@keyframes unseen-fadeout-to-read {
	from {
		background-color: @notification-background-unseen;
	}

	to {
		background-color: @notification-background-read;
	}
}