mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-14 09:54:45 +00:00
73e87fdc08
uses the CSS :last-child selector to align the last item in the header with the edge of the container. This is usually the notification icon in "normal" mode and the user menu icon in AMC mode. Bug: T229440 Change-Id: I4430f5659093f76896e2b86e076526a0b51d9630
73 lines
1.4 KiB
Plaintext
73 lines
1.4 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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
}
|
|
|
|
&.notification-unseen {
|
|
color: @notificationColorUnread;
|
|
padding: @icon-padding-md;
|
|
|
|
.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;
|
|
}
|
|
}
|