mediawiki-skins-MinervaNeue/resources/skins.minerva.loggedin.styles/styles.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

69 lines
1.4 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
.minerva-icon.minerva-icon--bellOutline-base20 {
.cdx-mixin-css-icon( @cdx-icon-bell-outline, @color-subtle);
}
//
// Technical debt relating to Minerva mobile having a single
// Echo icon rather than 2.
//
//
// Difference 1) Never show count for seen notifications
.mw-mf .mw-echo-notification-badge-nojs::after {
content: none;
}
//
// Difference 2) Replace bell icon with a red circle
//
.mw-mf .mw-echo-unseen-notifications {
margin: auto;
background: @background-color-interactive;
color: @color-subtle;
cursor: pointer;
/* FIXME: Mimics the Codex icon mixin. This should be replaced when T376497 is resolved. */
.minerva-icon--circle {
border-radius: @border-radius-circle;
border: @border-width-thick @border-style-base #54595d;
margin: auto;
height: @icon-size-medium;
width: @icon-size-medium;
background: @background-color-destructive;
border-color: @border-color-destructive;
-webkit-mask-image: none;
mask-image: none;
&::before {
content: none;
}
}
&::after {
color: @color-inverted;
content: attr( data-counter-text );
position: absolute;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
letter-spacing: -0.5px;
padding: 0;
border: 0;
// T342907
background-color: transparent !important;
}
&:hover {
text-decoration: none;
}
}