mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-24 07:54:13 +00:00
ea856105f2
In c86a1a5cf, the structure of the badge was changed, and the hack for
hiding the screenreader text in the badge was updated accordingly.
However, the Monobook styles were not updated, and this caused the badge
icons to be positioned off-screen.
Update the Monobook styles for the new badge structure, and use a
different hack for hiding the screenreader text because the one used for
other skins doesn't work in Monobook.
Bug: T226503
Change-Id: I190d2719addfbe50a7108193848bf23eef54bccf
92 lines
1.8 KiB
Plaintext
92 lines
1.8 KiB
Plaintext
@import '../echo.variables';
|
|
@import 'mediawiki.mixins';
|
|
|
|
/* 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: -5px;
|
|
text-indent: -9999px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
line-height: normal;
|
|
.box-sizing( border-box );
|
|
opacity: 0.87;
|
|
|
|
&: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: 2px;
|
|
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 */
|