ext.echo.styles.badge.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

ext.echo.styles.badge.less
View Options

	/* stylelint-disable selector-max-id */
	@import 'mediawiki.skin.variables.less';

	/**
	* Mixin based on Vector mixin
	* https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/skinStyles/ext.echo.styles.badge.less
	* Used in desktop version of Minerva.
	*/
	.mixin-notification-badge() {
	position: relative;

	// When 99+ allow counter so spill outside icon
	&.cdx-button {
	overflow: visible;
	}

	&::after {
	position: absolute;
	left: 55%;
	top: 43%;
	font-size: 0.75rem;
	padding: 0.25rem;
	border: 1px solid #fff;
	border-radius: @border-radius-base;
	background-color: #72777d;
	content: attr( data-counter-text );
	color: #fff;
	}

	// The number of notifications shouldn't show if there are none.
	&[ data-counter-num='0' ]::after {
	content: none;
	}
	}

	.minerva-icon.minerva-icon--bell {
	.cdx-mixin-css-icon( @cdx-icon-bell, @color-subtle);
	}

	.minerva-icon.minerva-icon--tray {
	.cdx-mixin-css-icon( @cdx-icon-tray, @color-subtle);
	}

	.mw-echo-notification-badge-nojs {
	.mixin-notification-badge();
	}

	// Special colors for unseen notifications (Applies to desktop Minerva)
	#pt-notifications-alert.mw-echo-unseen-notifications::after {
	background-color: @color-destructive;
	}

	#pt-notifications-notice.mw-echo-unseen-notifications::after {
	background-color: @color-progressive;
	}