mastodon't, a pack of css tweaks to make mastodon's ui slightly less bad

mastodont.css

/* mastodon't, a pack of css tweaks to make mastodon slightly less bad */

* {
	/* Disable some ugly animations (e.g., lightbox) */
	transform: none;
	transition: none;
}

textarea:active, input:active, button:active, *:focus {
	/* Make the textbox and buttons indicate being highlighted in some way */
	box-shadow: 0 0 2px 1px #000000, inset 0 0 2px 1px #0000ff ;
}

div.status > div + div + div > div {
	/* fix status interact buttons */
	margin-left: 10px;
	margin-right: 0px;
}

div.status > div + div + div > div > button {
	/* make status interact buttons stand out */
	padding: 0.25em;
	height: 1.5em;
	width: 2em;
	border-radius: 0.3em;
	background: rgba(0,0,0,.2);
}

div.status > div + div + div > div > button:hover, div.status > div + div + div > div > button:focus {
	/* make status buttons indicate when you're about to use them */
	color: white;
	background: rgba(0,0,0,.7);
}

.display-name {
	/* give display name handles some muted color */
	color: rgba(255, 150, 200, .5);
}

.display-name > strong {
	/* give display names themselves more color */
	color: rgb(255, 150, 200);
}

.status__content {
	/* remove the pointer (hand) cursor from the entire status
	   lets the buttons on a status give feedback for when you are
	   about to interact with them */
	cursor: default;
}

.status__content a {
	/* give in-toot links some color */
	color: rgb(100, 150, 255);
}

.status__content a:active, .status__content a:hover, .status__content a:focus {
	/* give in-toot links some highlighting color */
	color: rgb(150, 180, 255);
}

a.mention {
	/* give mentions a displayname-like color within toots */
	color: rgb(200, 150, 255);
}

a.hashtag {
	/* give hashtags some link-like color in toots */
	color: rgb(150, 2000, 255);
}

.status__content__spoiler-link {
	/* invert status links to light-on-dark, make them not ALL UPPERCASE */
	color: #999;
	background: rgba(0, 0, 0, .2);
	text-transform: lowercase;
	font-style: italic;
}

.status__content__spoiler-link:hover, .status__content__spoiler-link:focus {
	/* add some highlight for when interacted with */
	color: #fff;
	background: rgba(0, 0, 0, .5);
}

.compose-form__buttons button {
	/* make the new toot buttons stand out too */
	background: rgba(0, 0, 0, .2);
	border-radius: .3em;
	color: #fff;
	margin-right: .5em;
}

.compose-form__buttons button.active {
	/* make the cw button more obvious when toggled */
	background: rgba(0, 0, 0, .6);
	color: #ff4;
	box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, .6);
}
	
.compose-form__buttons button:hover, .compose-form__buttons button:focus {
	/* make all the buttons stand out when you hover over them */
	background: rgba(0, 0, 0, .4);
	color: #fff;
}