/* * Citizen * * SkinStyles for Extension:Echo * Module: ext.echo.styles.badge * Version: REL1_35 347c30e * * Date: 2021-08-11 */ .mw-echo-notifications-badge { #pt-notifications-alert &, #pt-notifications-notice & { top: 0; width: var( --size-button--header ); height: var( --size-button--header ); box-sizing: content-box; border-radius: var( --border-radius--small ); margin: 0; background-position: center; background-repeat: no-repeat; background-size: var( --size-icon--header ); opacity: var( --opacity-icon-base ); &:hover { opacity: var( --opacity-icon-base--hover ); } &:active { opacity: var( --opacity-icon-base--active ); } &:focus { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var( --color-primary ); opacity: var( --opacity-icon-base--active ); &:after { border-color: var( --color-primary ); } } &:after { top: 0; border-color: var( --color-destructive ); border-radius: 100px; background-color: var( --color-destructive ); font-size: 0.65rem; } &-dimmed { opacity: var( --opacity-icon-base--disabled ); } &.mw-echo-notifications-badge-all-read { opacity: var( --opacity-icon-base ); &:hover { opacity: var( --opacity-icon-base--hover ); } &:active { opacity: var( --opacity-icon-base--active ); } } } &.oo-ui-flaggedElement-unseen, &.mw-echo-unseen-notifications { #pt-notifications-alert &:after { background-color: var( --color-destructive ); } #pt-notifications-notice &:after { background-color: var( --color-destructive ); } } } // Add quiet background hover states #pt-notifications-alert, #pt-notifications-notice { z-index: 1; // fix background clipping border-radius: var( --border-radius--small ); &:hover { background-color: var( --background-color-quiet--hover ); } &:active { background-color: var( --background-color-quiet--active ); } } // Dark mode icon .skin-citizen-dark { #pt-notifications-alert, #pt-notifications-notice { .mw-echo-notifications-badge { filter: invert( 1 ) hue-rotate( 180deg ); // Re-invert indicator color &:after { filter: invert( 1 ) hue-rotate( 180deg ); } } } }