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

Changelog

2023-01-02
Add time to font adjustments
2022-12-11
Add way to hide images without alt-text / descriptions
2022-12-10
Added way to hide boosts via css
2022-11-24
Initial Post

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 */
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;
	}
}

Stylus browser Plugin Required

Opinion  Tech 

See also