mediawiki-skins-MinervaNeue/resources/skins.minerva.loggedin.styles/styles.less
jdlrobson 2e453edd23 Only load notification icon (bell) CSS for logged in users
* The notification-count style is only needed if you are logged
in. Given a small percentage of our users are logged in, we
load a lot of render blocking css unnecessarily.
* The bell icon is not needed for anonymous users so pull that
out from skins.minerva.icons.images which is loaded for all users
into a module only used by logged in users (skins.minerva.icons.loggedin)
* Simplify the user-button rule - it is overly specific - probably for
historic reasons.

Additional changes:
* Simplify isAuthenticated helper

Change-Id: Ia72e7e45d276e8aac1ff5471bf6158705c7b5f99
2018-04-12 09:27:01 -07:00

74 lines
1.4 KiB
Plaintext

@import 'minerva.variables';
.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 {
@circleSize: 24px;
@borderSize: 2px;
margin: auto;
height: @circleSize;
background: @notificationBackgroundRead;
color: @notificationColorRead;
cursor: pointer;
.circle {
border-radius: 50%;
border: @borderSize solid @notificationColorRead;
margin: auto;
height: @circleSize - @borderSize;
width: @circleSize - @borderSize;
/* 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;
.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;
}
}