some user css to make default-ish mastodon ui less terrible

better-mastodon-ui.css

/*
	this is some user css you can add to stylebot or whatever your user-css-allowing extension is,
	or your mastodon instance itself if you want

	sample image of most changes:
	general ui:      https://icosahedron.website/@Xkeeper/100765176052010274
	media uploader:  https://icosahedron.website/@Xkeeper/100765236260841467
	pinned posts:    https://icosahedron.website/@Xkeeper/100787770095983939

	--------------------------------------------------------------------------------------

	features:

	- attempts to disable most animations, well beyond the ui's "less animations" setting
		- MAY cause issues, as some parts of the ui require this to work (/why/)

	- turns tombstones into a tired and ancient meme
		- tombstones are the "Filtered" boxes where filtered posts go
		- uncomment the part that says "display: none" to just hide them instead
		- (may also make them a little smaller; UI will act weird if a timeline is mostly filtered)

	- removes forced-capitalization everywhere
		- "TOOT" now "Toot", "SHOW MORE/HIDE MORE" just "Show more/Hide more"
		- Please get off the internet, grandpa

	- makes the cw input box always visible, adds heading saying "subject / content warning"
		- removes placeholder text (can't change it via css, rip)
		- functionality works even without the button; adding text = cw enabled, leaving blank = off

	- makes the under-composer buttons better
		- "single icon, flat" -> "button-like, full width, has text explaining it"
		- distinctive visual effects for hovering, focusing, and toggling them
		- removed "cw" button since no longer useful (see first change)
		- "direct message" privacy mode has blue text to indicate it is fundamentally different
		- default privacy level has slightly gray text to indicate it's the default
			- makes changes in privacy level a bit more obvious
			- this part *requires* you to change the css below to whatever you use as the default
			- the font for the button is hardcoded, because :gargron: made that button work different
			- worst and clunkiest part of this entire ui i s2g

	- makes the media uploader interface better
		- controls always visible
		- controls now turn white when active/focused so you can see where your cursor is
		- image desc. field always visible, has padding / border to be very obvious
		- image desc. field has red placeholder if the description is left blank

	- avatars in timelines now have a dark background
		- makes it a little more obvious if someone's using a fully transparent png or whatever

	- pinned posts/toots in user profiles in the ui are more distinctive
		- pinned posts have darker background
		- pinned posts have a border on the bottom and top
		- "Pinned Toot" header stands out visually, has bold text

	--------------------------------------------------------------------------------------

	the contents of this particular gist are released under the terms of the MIT license:
	https://opensource.org/licenses/MIT (pretend i pasted it here)
	(do whatever the heck you want to with it, just link back here, basically)

	--------------------------------------------------------------------------------------

	with love, xkeeper / @xkeepah / @[email protected] 
	feedback, comments, and whatever else welcome
*/

/*
	This will probably do things you don't want, sorry!
	Look for some other Pro Tips in the comments for how to make it better for you.
*/
* {
	/* Fuck animations */
	animation: none ;
	/* Fuck LARGE CAPITAL LETTERS */
	text-transform: none ;
	/* Fuck more animations */
	transition-property: none ;
	
	/*
	Unfortunately things like "transform" have to be allowed because
	things like the image switcher require it :(
	*/
}

.account__avatar {
	/* Give all avatars a dark background so clever people who
	upload a blank PNG don't look like they have a missing avatar */
	background-color: rgba(0, 0, 0, .5);
}

.status__wrapper--filtered {
	/* uncomment this to hide the "Filtered" tombstones
	You might ask yourself, "why is this required when they're lit. useless"
	answer: gartgremel
	*/
	/*display: none;*/
}

/*
you can delete all of this until the next note if you want to remove tombstones
this is all for a goofy joke
*/
.status__wrapper--filtered span {
	display: block;
	margin-top: -1.5em;
	text-indent: -9999px;
}

.status__wrapper--filtered span::after {
	content: 'peperony and chease';
	display: block;
	text-indent: 0px;
}
/*
stop removing here though, the rest is the ui fix shit
*/


/* Make the buttons look like, you know, BUTTONS */
.compose-form__buttons {
	display: block;
}

/* Wow! Actual depth! It's like I'm back in windows XP! */
.compose-form__buttons button {
	width: 100%;
	text-align: left;
	padding: 0 .2em 0 .5em;
	background: #ccc;
	color: black;
	font-size: 100%;
	margin-bottom: 0.3em;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: -5px -5px 20px -12px inset black, 5px 5px 20px -5px inset white;
}

.compose-form__buttons button:after {
	padding: 0 0 0 .5em;
}

/* Make buttons like the 'Hide media behind warning' ones that are toggles look toggled when active */
.compose-form__buttons button.active {
	background: #888;
	box-shadow: -5px -5px 15px -7px inset white, 5px 5px 15px -5px inset black;
}

/* Make shit that has been hovered over / has focus stand out so you can tell wheretf your cursor is */
.compose-form__buttons button:focus, .compose-form__buttons button:hover {
	background: #aaa;
	box-shadow: -5px -5px 15px -7px inset black, 5px 5px 15px 0px inset white;
}

/* Give toggled buttons a slightly different 'hover/focus' state so they're still visibly different */
.compose-form__buttons button.active:focus, .compose-form__buttons button.active:hover {
	background: #999;
	box-shadow: -5px -5px 15px -9px inset white, 5px 5px 15px -7px inset black;
}

/* You can make this say whatever, it's the upload button */
.compose-form__upload-button-icon:after {
	content: 'Attach images or media';
}

/* Similarly, this is the 'hide media' eyeball button
Note that you don't need to press this if you fill out the subject/cw field,
it will automatically be turned on when posted by the software itself */
.compose-form__sensitive-button__icon:after {
	content: 'Hide media behind warning';
}

/* Post privacy is different in that the only way to tell what it is is the actual class of the icon inside of it, so we have to do a whole bunch of awful bullshit to make it work */
.privacy-dropdown__value-icon, .privacy-dropdown__value-icon button {
	width: 100% ;
}

.privacy-dropdown__value-icon i {
	width: 100%;
	text-align: left;
	padding-left: 0.2em;
}

/* Replace with your favorite font! Because we're hijacking the italic^Wicon element we can't rely on "inherit" :(
*/
.privacy-dropdown__value-icon i:after {
	font-family: Comic Sans MS;
	padding: 0 0 0 0.85em;
	width: 100%;
}

/* Public (visible to everyone + broadcast to local/federated timelines) */
.privacy-dropdown__value-icon i.fa-globe:after {
	content: 'Public';
}

/* Private (visible only to followers) */
.privacy-dropdown__value-icon i.fa-lock:after {
	content: 'Private - Followers only';
}

/* Direct message (sent only to accounts mentioned in the message)
It is slightly blue here to make it stand out more when chosen
*/
.privacy-dropdown__value-icon i.fa-envelope:after {
	content: 'Direct Message';
	color: #22a;
}

/* Unlisted (visible, but not posted to local/federated timelines)
The opacity here is to make it faded out, so that you can tell at-a-glance
if your privacy level is not the default, either from your own action
or from replying to someone else's (more restricted) status

Move the opacity: line to whichever level you use as the default
*/
.privacy-dropdown__value-icon i.fa-unlock-alt:after {
	content: 'Unlisted';
	opacity: 0.5;
}

/* Make the cw input field always visible */
.spoiler-input {
	display: block;
	opacity: 1;
	height: auto;
	margin-bottom: 1em;
}

/* Give it a good title and explanation, because... */
.spoiler-input:before {
	display: block;
	margin-bottom: 0.3em;
	content: 'Subject / Content Warning:';
}

/* ...we're hiding the "Write your warning here" message, since it's not really useful now
I wanted to replace it with something useful like "pol / health / food, etc." to make it an
actual placeholder, but that's not possible with just CSS */
.spoiler-input input::placeholder {
	opacity: 0;
}

/* Delete the now useless CW button. Filling in a subject/cw will automatically turn it on anyway */
button[aria-controls="cw-spoiler-input"] {
	display: none;
}

/* Always show the image options, not just when hovering, and make the background solid but still transparent instead of a gradient */
.compose-form__upload__actions, .compose-form__upload-description {
	opacity: 1;
	background: rgba(0,0,0,.6);
}

/* Give the text a nice outline so it's more visible against bright images */
.compose-form__upload__actions *, .compose-form__upload-description * {
	opacity: 1;
	text-shadow: -1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

/* Make the options visibly active when hovered or focused so that you can tell where your cursor is (when tabbing around); adds a lighter background and makes the text white. on icosahedron.website they're normally green-ish, you may have to adjust this on your instance */
.compose-form__upload__actions *:focus, .compose-form__upload__actions *:hover, .compose-form__upload-description *:active, .compose-form__upload-description *:focus,.compose-form__upload-description input:hover, .compose-form__upload-description input:focus {
	opacity: 1;
	text-shadow: -1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	background: rgba(255, 255, 255, .3);
	color: white;
}

/* Give the description field some breathing room and make it stand out more so it's more visible. Kind of ironic that you have to do this to a field that's supposed to help people with bad vision but welcome to modern ui design */
.compose-form__upload-description input {
	background: black;
	margin: -0.2em;
	border: 1px solid #888;
	padding: 0.2em;
}

/* Make the "Write a description here" placeholder white on dim red to say "Hey, uh, you should really put something here" */
.compose-form__upload-description input::placeholder {
	color: white;
	background: rgba(255, 0, 0, .5);
}


/* Make pinned posts on profiles visually stand out from other posts by giving them a border and a different background, and making the header bold and obvious */
.status__prepend {
	margin-left: 0;
	text-align: center;
	font-weight: bold;
	background: rgba(0, 0, 0, .25);
	border-top: 3px solid #555;
	/* bug: the pin icon is shoved off to the left and invisible. don't care, WONT_FIX */
}

.status__prepend + .status {
	background: rgba(0, 0, 0, .5);
	border-bottom: 3px solid #888;
}