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; } }