mastodon-bird-ui

Blasphemy! Yes, I know, but I just had to do this. I wanted to see if it's possible to get Mastodon default user interface to resemble Twitter, but be a lot better than it ever was.

Please note that this started as a personal experiment for fun, but then got more serious.

See my original Mastodon post.
Read the blog post: The day I decided to build my own "Twitter".

Why would anyone want Mastodon to look like Twitter?

Because you can? Let's face it, we're kinda used to it, Mastodon already resembles the birdsite. Twitter UI is not bad, it's just that it's not for everyone. Twitter (in my opinion) made some bad choices with the new UI for example with the typography, so in a sense I wanted to see if I could make Mastodon look like Twitter, but better.

This is why I have defaulted Mastodon deep purple colors in this "theme", if you will. If you really want the vanilla birdsite-look, please modify the colors yourself. Or go to the hellsite if you really love it so much.

Live demo on mementomori.social

More screenshots: Dark version on mobile, Light version on mobile, Dark version on desktop, Dark version desktop profile view, Light version on desktop, Twitter colors on desktop (outdated).

Features

As this is CSS-only, they are not really "features" but more like aesthetic changes.

Respects the profile Site theme setting and sets dark/light based on this alone
Missing alt text indicators (faded with "Alt text missing" text in the center)
Subtle deep purple ribbon in the right corner for private messages
CSS variables for everything
Threaded replies (limited, see issue #4)
Avatars on the left in feed view
Unified transparent backgrounds
Dark patterns for dropdowns and other pop overs like emoji picker
Tinted deep purple, subtle beautiness
Action bar in the bottom on mobile
Micro-interaction in the like/favourite icon (see more about this)
Circling boost animation
Support for RTL languages
Hide lists by default, show them on hover
Carefully polished UI with hand picked/designed icons based on open source versions of Iconoir, Ionicons and Feather

Installation for Mastodon instance admins

Copy the contents of style.css
Install it as CSS to your assets (add it to your build process to app/javascript/styles and rebuild assets) or (preferred) use Custom CSS in the Appearance settings in your instance (https://yourinstance/admin/settings/appearance):

Installation for regular users, contributing and testing

Install live-css-editor (or any other extension that allows you to inject CSS into web pages) or use Unite for macOS
Get style.css from this repo
Open extension and paste the CSS into the editor
Click 📌-icon so the styles will be remembered for the domain or if you want just to use it as needed, activate styles from the extension's popup

Other tweaks and customizations

While Mastodon Bird UI works perfectly fine out of the box, there are some things you might want to modify to make it look even better.

Twitter-like link previews

If you like bigger link previews, please implement this.

Status bar color on Android PWA

Edit this line and recompile assets with yarn build:production.

Hide translate link for multiple languages

If you're a polyglot like me, you can hide the translate link on other languages than default by adding this at the end of the Custom CSS (this example is for people who understand Finnish and German):

.status__content__text[lang="de"].translate ~ .status__content__read-more-button,
.status__content__text[lang="fi"].translate ~ .status__content__read-more-button {
  display: none;
}

Thread lines

There is currently no proper thread support in replies on Mastodon core. There's an issue about it that I have commented. You should also see the discussion on issue #4.

Implement this. Tested and online at mementomori.social). This changes the HTML structure so that creating threaded lines is possible.
Enable Mastodon Bird UI 1.3.8 or later
It works!

Micro-interactions

There are two micro-interaction animations in this UI, both are inspired by the Twitter's original UI animation.

Twitter likes	Twitter fave star (2015)

If you like the heart, just remove everything between Star animation micro-interactions start (depends on the heart icon above) and Star animation micro-interactions end.

Goals

CSS only. This means some pseudos and modern CSS hacks. The intent is to have the code base as simple and extendable as possible. The styles should be easily modifiable. Ready-made code works when placed in Custom CSS box in {yourinstance.social/admin/settings/appearance}
Single-column layout only. This experiment is not meant for advanced layout.