5

About

This script implements the suggestion from user1306322 to Add an immediately visible indication that a user is a staff member or an employee of SE, which was the original request that led to New Staff and Mod Labels on site metas and Meta Stack Exchange

Screenshot

It turns this: enter image description here

into this: enter image description here on front pages and on posts.

Note: The script excludes user profiles.

Platform

Should work with any user script manager with any of the major browsers.
Tested using TamperMonkey with Opera.

Contact

For any bug, please post here. Comments are fine too.

Code

JavaScript using jQuery

// ==UserScript==
// @name         Stack Moderators & Staff
// @namespace    scratte-fiddlings
// @version      0.5
// @description  Indicate less that a user is moderator or staff
// @author       Scratte (https://stackoverflow.com/users/12695027)
// @include      https://meta.stackoverflow.com*
// @exclude      https://meta.stackoverflow.com/users*
// @include      https://meta.stackexchange.com*
// @exclude      https://meta.stackexchange.com/users*
// @icon         https://www.google.com/s2/favicons?domain=stackexchange.com
// @grant        none
// ==/UserScript==

(function(win, doc) {
    'use strict';

    doc.addEventListener('readystatechange', () => {
        swap();
    });

    $(doc) // needed to include comments using "Show X more comments"
        .ajaxComplete((event, request, settings) => {
            swap();
         });

    function swap() {
        doc.querySelectorAll(".s-badge__moderator")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "♦";
                         element.style.fontSize = "125%";
                         element.style.color = "#0077cc";
                         element.previousElementSibling?.classList.add("mr2");
                });

        doc.querySelectorAll(".s-badge__staff")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "";
                         element.title = "Stack Exchange Inc Employee";
                         element.append(Svg.LogoGlyphXxs().get(0));
                         element.style.color = "var(--orange-400)";
                });
    }

})(window, document);

Sites

It is set to work on Meta Stack Overflow and Meta Stack Exchange. But it can easily be expanded to any other meta site by adding two lines to the user script header:

// @include      https://meta.<siteurl>*
// @exclude      https://meta.<siteurl>/users*

Example for Super User:

// @include      https://meta.superuser.com*
// @exclude      https://meta.superuser.com/users*

You must log in to answer this question.

Browse other questions tagged .