mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-12-12 16:05:33 +00:00
4ab34ada4f
Essentially: force the badges, when the personal menu is displayed inline, to align correctly with the rest of the line instead of hovering slightly above the line for no apparent reason. This should fix nearly every other skin that doesn't already have its own local fix, as 20px is already pretty well-centered with normal-sized fonts when doing sane things with padding/margins/ line-heights. (Vector is not doing sane things with padding/ margins/line-heights in the personal menu, but hopefully forking Vector went out of vogue ten years ago and people have quit doing this by now, yes?) This may also not be ideal for mobile skins. Breaks Timeless, because I just completely gave up on trying to get this to behave there and put it in its own little timeout box. Oops. Change-Id: I73067bbc3c930ebf20aa492b53a4a5fe4259b607
93 lines
1.8 KiB
Plaintext
93 lines
1.8 KiB
Plaintext
@import '../echo.variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
/* stylelint-disable no-descending-specificity */
|
|
/* We have to include the #pt-notifications selector due to monobook */
|
|
.mw-echo-notifications-badge {
|
|
#pt-notifications-alert &,
|
|
#pt-notifications-notice & {
|
|
position: relative;
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 2px;
|
|
// Hide the text, but keep accessible for screen-readers
|
|
// Later we put the counter back onscreen with a zero text-indent
|
|
top: 0;
|
|
text-indent: -9999px;
|
|
border-radius: @border-radius-base;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
line-height: normal;
|
|
.box-sizing( border-box );
|
|
opacity: 0.87;
|
|
color: transparent;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
&:focus {
|
|
.box-shadow( ~'0 0 0 1px #fff, 0 0 0 3px #36c' );
|
|
opacity: 1;
|
|
|
|
&:after {
|
|
border-color: #36c;
|
|
}
|
|
}
|
|
|
|
// Counter
|
|
&:after {
|
|
position: absolute;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
// Bring it back onscreen
|
|
top: 9px;
|
|
text-indent: 0;
|
|
left: 55%;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
padding: 0 0.3em;
|
|
border: 1px solid #fff;
|
|
border-radius: @border-radius-base;
|
|
background-color: @badge-counter-background-seen;
|
|
content: attr( data-counter-text );
|
|
color: #fff;
|
|
}
|
|
|
|
&-dimmed {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
&.mw-echo-notifications-badge-long-label {
|
|
margin-right: 0.5em;
|
|
|
|
&:after {
|
|
left: 35%;
|
|
}
|
|
}
|
|
|
|
&.mw-echo-notifications-badge-all-read {
|
|
opacity: 0.51;
|
|
|
|
&:after {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.oo-ui-flaggedElement-unseen,
|
|
&.mw-echo-unseen-notifications {
|
|
#pt-notifications-alert &:after {
|
|
background-color: @badge-counter-background-unseen-alert;
|
|
}
|
|
|
|
#pt-notifications-notice &:after {
|
|
background-color: @badge-counter-background-unseen-message;
|
|
}
|
|
}
|
|
}
|
|
/* stylelint-enable no-descending-specificity */
|