Mastodon Display Name Fix

mastodon_userstyle.css

/*
Userstyle for the the Mastodon web application

De-emphasizes the display name in favor of the
actual @username on , i.e.

┌──────────────────────────────┐
│ ┌─────┐                      │
│ │ pfp │ @username@server     │  larger font
│ │     │ Display Name         │  smaller font
│ └─────┘                      │
│  Post content...             │
└──────────────────────────────┘

tested on Mastodon versions 4.0.2 - 4.2.3 in dark mode
running on Firefox with the Stylus Add-on 
https://addons.mozilla.org/en-US/firefox/addon/styl-us/
*/

.detailed-status__display-name .display-name,
.status__display-name .display-name {
    display: flex;
    flex-direction: column-reverse;
}
.detailed-status__display-name .custom-emoji,
.status__display-name .custom-emoji {
    display: none;
}
.detailed-status__display-name .display-name .display-name__html,
.status__display-name .display-name .display-name__html {
    color: #9a9a9a;
    font-weight: normal;
    font-size: .9rem;
}
.detailed-status__display-name .display-name__account,
.status__display-name .display-name__account {
    color: #fff;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.detailed-status__display-name .display-name__account:hover,
.status__display-name .display-name__account:hover {
    text-decoration: underline;
}
.detailed-status__display-name:hover .display-name__html,
.status__display-name:hover .display-name__html {
    text-decoration: none;
    cursor: default;
}
.status__display-name .emojione {
    display: none;
}
.muted .emojione {
    opacity: 1;
}
.muted .status__avatar {
    opacity: 1;
}
.muted .status__content,
.muted .status__content p,
.muted .status__display-name strong,
.muted .poll {
    color: inherit;
}
.muted .status__content a {
    color: #329de4;
}
.status__prepend,
.notification__message {
    font-weight: normal;
    font-size: .9rem;
    color: #9a9a9a;
}
.status__prepend .status__display-name,
.notification__display-name {
    font-size: 1px;
    letter-spacing: -1px;
}
.notification__display-name::after {
    content: '@' attr(title);
    font-weight: normal;
    letter-spacing: normal;
    font-size: .9rem;
}
.status__prepend .status__display-name::after {
    content: attr(href);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: normal;
    text-indent: -0.4rem;
    overflow: hidden;
    color: #9a9a9a;
}