mediawiki-skins-MinervaNeue/skinStyles/ext.echo.styles.badge.less
Jon Robson ca232770db Strengthen CSS selectors for Minerva Echo icons
The .minerva-icon rule sets a transparent PNG. If rules are loaded
before (as in the case of Echo) they get overriden. Make these rules
more specific so they do not apply.

Bug: T376491
Change-Id: Ia5399fa500df69b0a0d34931e30d961fe62a2124
2024-10-07 18:16:40 +00:00

56 lines
1.3 KiB
Plaintext

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