Mastodon 4.0.x UI Tweaks
Table of contents
Changelog
- Add time to font adjustments
- Add way to hide images without alt-text / descriptions
- Added way to hide boosts via css
Tags
Related pages
Big Tweaks
- Compact UI
- https://userstyles.world/style/7065/compact-er-mastodon
- Larger UI
- https://userstyles.world/style/4743/spacious-mastodon
- Blackout Theme
- https://userstyles.world/style/4511/hackers-black-out-beta
Preface
I’ve not hidden the fact I find the latest Mastodon 4.0.x UI a lesson in terrible UX and reduced accessibility. This post is everything I’ve managed to put together to make the latest Mastodon UI more usable. Please borrow whatever you need from the below.
Please note: these tweaks are also valid server CSS tweaks
Resources used to create this setup
[redacted]
I do not have permission to publish names from some humans who helped and some of the humans who helped prefer to be unnamed.
Small Tweaks
Misc
https://github.com/psydwannabe/mastodon-snippets/tree/master/CSS
Hide the e2e fear mongering notice
/* Hide the e2e fear mongering notice */
.follow_requests-unlocked_explanation {
display: none;
}
Underline links
/* Underline links */
a.status-link:not(.mention) {
text-decoration: underline;
}
Adjust fonts
/* Adjust fonts */
.account__header,
.search__input,
.status__content__text,
.status__content,
p,
time,
form {
font-family: "Atkinson Hyperlegible", Atkinson-Hyperlegible, AtkinsonHyperlegible, "Open Dyslexic", Open-Dyslexic, OpenDyslexic, sans-serif;
}
Bring Back Toot!
/* Bring back toot! */
.compose-form__publish-button-wrapper button {
text-indent: -9999px;
line-height: 0;
/* Collapse the original line */
}
.compose-form__publish-button-wrapper button:after {
content: 'Toot!';
text-indent: 0;
display: block;
line-height: initial;
/* New content takes up original line height */
}
a[href="/publish"] {
text-indent: -9999px;
line-height: 0;
}
a[href="/publish"]:after {
content: 'Toot!';
text-indent: 0;
display: block;
line-height: initial;
}
Hide images without alt-text / descriptions
.media-gallery__item-thumbnail > img {
opacity: 0;
}
.media-gallery__item-thumbnail > img[alt] {
opacity: inherit;
}
.media-gallery__item-thumbnail > img:hover {
opacity: inherit;
}
Hide boosts via CSS
@-moz-document url-prefix("https://domain.tld") {
.-repeat .left-side {
display: none;
visibility: hidden;
}
.-repeat .right-side {
display: none;
visibility: hidden;
}
.repeat-info {
display: none;
visibility: hidden;
}
}