the CSS for the notification system (see at the end of this whine), uses #IDs in the selectors of css rules where it's not needed, and cause difficulties to developers wanting to add a badge.
for all but 2 properties, the rules are exactly the same for #pt-notifications-alert and #pt-notifications-notice. defining these rules without including the #id in the selector would make life easier.
when some (local) user script tries to create a third badge (for instance, This script on hewiki), which adds a "you have unread watchlist items" badge), it cannot use the existing CSS, b/c it is all ID dependent, and is forced to copy the whole shebang ( like here ) . it would be cleaner and nicer if everywhere where the selector looks like so:
#pt-notifications-alert .foo .bar, #pt-notifications-notice .foo .bar
it would simply say
.foo .bar
instead, i.e., avoid specifying the #ID as part of the selector where it does not make a difference.
doing so, will basically leave 4 #ID-dependent rules: one each for the ::before { background-image }, and one each for the ::after {background-color }.
doing so would make it cleaner and nicer (and shorted...), and would also make it easier to add a new badge - only 2 new rules to add, instead of all of them, and save the need to replicate the whole bunch.
current CSS:
#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge { color: transparent; cursor: pointer; display: block; height: 24px; position: relative; text-decoration: none; top: -5px; width: 24px; } #pt-notifications-alert .mw-echo-notifications-badge:hover, #pt-notifications-notice .mw-echo-notifications-badge:hover, #pt-notifications-alert .mw-echo-notifications-badge:active, #pt-notifications-notice .mw-echo-notifications-badge:active, #pt-notifications-alert .mw-echo-notifications-badge:focus, #pt-notifications-notice .mw-echo-notifications-badge:focus { outline: medium none; } #pt-notifications-alert .mw-echo-notifications-badge-dimmed, #pt-notifications-notice .mw-echo-notifications-badge-dimmed { opacity: 0.4; } #pt-notifications-alert .mw-echo-notifications-badge::before, #pt-notifications-notice .mw-echo-notifications-badge::before { background-repeat: no-repeat; content: ""; cursor: pointer; display: inline-block; height: 100%; opacity: 0.8; position: absolute; right: 0; top: 0; width: 100%; } #pt-notifications-alert .mw-echo-notifications-badge::after, #pt-notifications-notice .mw-echo-notifications-badge::after { background-color: #72777d; border: 1px solid #fff; border-radius: 2px; color: #fff; content: attr(data-counter-text); cursor: pointer; display: inline-block; font-size: 0.9em; font-weight: bold; padding: 0 0.3em; position: absolute; right: 55%; top: 9px; } #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after { right: 35%; } #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read { opacity: 0.625; } #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after { visibility: hidden; } #pt-notifications-alert .mw-echo-notifications-badge::before { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); } #pt-notifications-notice .mw-echo-notifications-badge::before { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M3%2013.35l1.8-7.2c.2-.996.81-1.8%201.8-1.8h10.8c.99%200%201.6.867%201.8%201.8l1.8%207.2v4.5c0%20.99-.81%201.8-1.8%201.8H4.8c-.99%200-1.8-.81-1.8-1.8v-4.5zm6.96%201.8h4.08c-.49.557-1.212.9-2.04.9a2.68%202.68%200%200%201-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44%207.2H9.3c0%20.702.246%201.328.66%201.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); } #pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications::after { background-color: #cc3333; } #pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after { background-color: #3366cc; } #p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice { margin-left: 0.4em; margin-top: 0.3em; }
PROPOSED/REQUESTED CSS:
.mw-echo-notifications-badge { color: transparent; cursor: pointer; display: block; height: 24px; position: relative; text-decoration: none; top: -5px; width: 24px; } .mw-echo-notifications-badge:hover, .mw-echo-notifications-badge:active, .mw-echo-notifications-badge:focus { outline: medium none; } .mw-echo-notifications-badge-dimmed { opacity: 0.4; } .mw-echo-notifications-badge::before { background-repeat: no-repeat; content: ""; cursor: pointer; display: inline-block; height: 100%; opacity: 0.8; position: absolute; right: 0; top: 0; width: 100%; } .mw-echo-notifications-badge::after { background-color: #72777d; border: 1px solid #fff; border-radius: 2px; color: #fff; content: attr(data-counter-text); cursor: pointer; display: inline-block; font-size: 0.9em; font-weight: bold; padding: 0 0.3em; position: absolute; right: 55%; top: 9px; } .mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after { right: 35%; } .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read { opacity: 0.625; } .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after { visibility: hidden; } #pt-notifications-alert .mw-echo-notifications-badge::before { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); } #pt-notifications-notice .mw-echo-notifications-badge::before { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M3%2013.35l1.8-7.2c.2-.996.81-1.8%201.8-1.8h10.8c.99%200%201.6.867%201.8%201.8l1.8%207.2v4.5c0%20.99-.81%201.8-1.8%201.8H4.8c-.99%200-1.8-.81-1.8-1.8v-4.5zm6.96%201.8h4.08c-.49.557-1.212.9-2.04.9a2.68%202.68%200%200%201-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44%207.2H9.3c0%20.702.246%201.328.66%201.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); } .mw-echo-notifications-badge.mw-echo-unseen-notifications::after { background-color: #cc3333; } #pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after { background-color: #3366cc; } #p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice { margin-left: 0.4em; margin-top: 0.3em; }
peace.