User stylesheet for Mastodon

userstyles-mastodon.css

/* Visually warn about inaccessible images in feed */
.status img:not([alt]),
.status img[alt=""] {
   border-top: 2em solid red;
}

/* Highlight private toots, toots only mentioned people can see. From https://mastodon.social/@matuzo */
.status__wrapper-direct {
    padding-inline-end: 20px;
}

.status__wrapper-direct::after {
    content: "private";
    background-color: #cbe7f0;
    display: inline-block;
    padding: 0rem 0.2rem;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    writing-mode: vertical-rl;
    height: 100%;
    text-align: center;
}

/* Show profile header image in 16/9 format. From https://mastodon.social/@matuzo  */
.account__header__image {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Hide trending now */
.getting-started__trends {
   display: none;
}

/* Flip the right and left column on desktop. From https://mastodon.social/@matuzo */
.columns-area__panels {
  flex-direction: row-reverse;
}

The writing-mode: sideways-rl didn't work for me in Chrome. I changed it to writing-mode: vertical-rl and everything was fine.

@jensgro Thanks, updated the gist.

@justmarkup the 3em border is a little bit aggressive. I reduced it on my side. And I apply it only on img in <article> (to avoid the border on profile page with the banner for example)

@nicosomb Thanks, updated the gist to only show the border for inaccessible images in a status.

/* Flip the right and left column on desktop */
.columns-area__panels {
  flex-direction: row-reverse;
}

On simple interface, to switch columns (thanks to Manuel)

.columns-area__panels {
    flex-direction: row-reverse;
}

haha too fast @matuzo

haha too fast @matuzo

😁

Cheers @matuzo

I've adapted some of these contributions (thanks @matuzo!) to ease color change with custom properties: https://gist.github.com/nhoizey/870ff8f60c599a51ec25d635983590e8

@nhoizey Nice!

I added this to mine to make the home panel wider and let the others take up the full width:

.columns-area {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr 1fr;
}
.drawer,
.column {
  width: 100% !important;
}

@juanfernandes I think one 1fr is missing, isn't it?

I use it and changed the values to make the main column just 30 % larger than the others: grid-template-columns: 3fr 4fr 3fr 3fr 3fr

@juanfernandes I think one 1fr is missing, isn't it?

I use it and changed the values to make the main column just 30 % larger than the others: grid-template-columns: 3fr 4fr 3fr 3fr 3fr

How many columns do you have on mastadon? I only have 4 🤔

@juanfernandes I have 5