mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-12-01 02:46:46 +00:00
91cd3b3b98
Colours were previously defined only in the monobook- and vector-specific styles, but with the same styles in each, and appear to work consistently accross all tested skins (modern, timeless, cologneblue, anisa, hassomecolours...). Given the UX importance of these colours, better to apply them as the default for all skins and leave it to any others for which this doesn't work to resolve any issues on their end. bug: T181142 Change-Id: Idc22881d6c51aa12adc9a053ce08adfdf0fad2b0
111 lines
2.2 KiB
Plaintext
111 lines
2.2 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 icons back onscreen with an opposite offset
|
|
top: -@badge-offscreen-offset - 5px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
line-height: normal;
|
|
.box-sizing( border-box );
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
outline: 0;
|
|
-moz-outline-style: 0;
|
|
}
|
|
|
|
&-dimmed {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
// Background icon
|
|
&:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
opacity: 0.87;
|
|
content: '';
|
|
background-repeat: no-repeat;
|
|
// Bring it back onscreen
|
|
top: @badge-offscreen-offset;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
// Counter
|
|
&:after {
|
|
position: absolute;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
// Bring it back onscreen
|
|
top: @badge-offscreen-offset + 9px;
|
|
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;
|
|
}
|
|
|
|
&.mw-echo-notifications-badge-long-label {
|
|
margin-right: 0.5em;
|
|
|
|
&:after {
|
|
left: 35%;
|
|
}
|
|
}
|
|
|
|
&.mw-echo-notifications-badge-all-read {
|
|
&:before {
|
|
opacity: 0.51;
|
|
}
|
|
|
|
&:after {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
#pt-notifications-alert & {
|
|
&:before {
|
|
/* @embed */
|
|
background-image: url( ../icons/bell.svg );
|
|
}
|
|
}
|
|
|
|
#pt-notifications-notice & {
|
|
&:before {
|
|
/* @embed */
|
|
background-image: url( ../icons/tray.svg );
|
|
}
|
|
}
|
|
|
|
&.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 */
|