@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; border-radius: 2px; text-indent: -9999px; 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 */