mediawiki-skins-MinervaNeue/resources/skins.minerva.loggedin.styles/styles.less
Jon Robson 028ab69a8b Echo icon should reflect seen status
Bug: T310358
Change-Id: I681a2540979ceeca677e576fca2efd91e1b80e15
2022-12-13 16:21:50 -08:00

78 lines
1.6 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
.user-button {
// Make sure count is positioned correctly in relation to bell icon
position: relative;
// can't use display:none class as icons must have a label to retain height
.label {
visibility: hidden;
}
&.loading span {
display: none;
}
}
// FIXME: Belongs in Echo extension.
.notification-count {
display: inline-block;
margin: auto;
background: @notificationBackgroundRead;
color: @notificationColorRead;
cursor: pointer;
.circle {
border-radius: 50%;
border: 2px solid @notificationColorRead;
margin: auto;
height: @icon-size-md;
width: @icon-size-md;
/* stylelint-disable declaration-block-no-duplicate-properties */
// Center the text number inside the circle
display: block; // Fallback for old iOS
text-align: center; // Fallback for old iOS
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
/* stylelint-enable declaration-block-no-duplicate-properties */
span {
font-weight: bold;
font-size: 13px;
line-height: 1;
letter-spacing: -0.5px;
}
}
&.notification-count {
padding: @icon-padding-md;
}
&.notification-unseen {
color: @notificationColorUnread;
.circle {
background: @notificationBackgroundUnread;
border-color: @notificationBackgroundUnread;
}
}
// FIXME: There must be a better way of doing this
&.max {
right: 0.2em;
width: 2em;
height: 2em;
line-height: 2em;
font-size: 0.7em;
}
&:hover {
text-decoration: none;
}
}