Issues with Glitch-Soc theming

[Michael Potts]

I certainly know this is not a bug with your CSS, as your project targets the vanilla/standard Mastodon theming, but I figured I would create this to see if you have any pointers and for others who may be encountering the same issue.

For those unfamiliar, Glitch-Soc is a fork of Mastodon that introduces some additional functionality. It's pretty popular and is used on a number of instances With regards to the mastodon-bird-ui CSS, the additional functionality that's causing issues is Glitch-Soc's Theming System.

The only issue I have encountered (so far) is the tiling of the profile picture. I have done some initial digging into the issue and would happily settle on removing the circle-style profile picture if that fixed the issue, but I haven't been able to do that yet.

The glitch theme certainly introduces other changes that make mastodon-bird-ui do some unexpected things, but it does seem to handle itself reasonably well and I haven't seen any visual issues.

@ronilaukkarinen, if you can point me to where the circle profile picture stuff is and/or any thoughts on it's interaction with glitch-soc, I would appreciate it!

[Roni Laukkarinen]

Thanks for the issue and thanks for trying out Mastodon Bird UI!

Yeah, there are class changes and other structural changes in glitch-soc and it's a completely separate project so for now I'm not going to support it. However, since you asked for help, let me help real quick.

First, add .layout-single-column .account__header__bar under /* Panels and things that should be transparent */ to get the profile top bar transparent. On glitch-soc the profile picture is a div with background instead of img like on vanilla, so you should look for /* Avatars */ and replace it like this (it needs !important because glitch-soc forces the inline styles 90px x 90px on avatars):

/* Avatars */
.layout-single-column .account__header__bar .avatar .account__avatar,
.layout-single-column .account-card__title__avatar .account__avatar,
.layout-single-column .account-card__title__avatar img,
.layout-single-column .account__avatar > img,
.layout-single-column .column > .scrollable .status__avatar img {
  background-repeat: no-repeat;

  /* Need to override inline styles */
  /* stylelint-disable-next-line */
  background-size: cover !important;
  border: 0;
  border-radius: 50%;
  box-shadow: rgb(255 255 255 / 0.03) 0 0 2px inset;
}

...and voilà!

However, only the top header styles are not enough, there are lots of other styles to cover as you can see here, many things are off in the posts:

While it might be possible to support both vanilla and glitch-soc at the same time (nothing is impossible if you know CSS like I do heh), I currently have no time to support ecosystems I don't use myself. Hence, I'm going to close this issue. But I hope this gives you and others head start who want to use Mastodon Bird UI with glitch-soc. 👍 ❤️

[Michael Potts]

Thank you so much for the input and help.

I wish I knew CSS more than the basic hacky stuff I do! I would love to take a stab at creating an actual theme out of this, so a user can 'opt out' and go back to the original Mastodon look-and-feel, but my brain seems to turn to gelatin as I dig into it more (I am an infra/server/systems person at heart 😅)

Based on other themes¹ that support both userscripts and full install, it should be possible but I gotta wrap my head around how.

I might also see if I can create a 'lite' version in the meanwhile that removes much of the fit-and-finish (that I am sure you put a considerable amount of effort into) but keeps the major bird-ui aesthetic components.

I was going to put up a beers/beverages bounty if you (or someone else) ends up figuring out how to make it into a theme, but I went to see if you had any projects I could sponsor and daang you certainly do have a ton of irons in the fire! 🤣

Thanks so much for your response and all you do!

Footnotes

1. https://github.com/trwnh/mastomods#instructions-for-admins ↩

[Lastorder]

https://github.com/Lastorder-DC/glitch-bird-ui

Lots of things still broken and WIP but now at lease UI aligns well.

[Alex Hall]

https://github.com/Lastorder-DC/glitch-bird-ui

Lots of things still broken and WIP but now at lease UI aligns well.

Looks like a great start, just needs to be synced with upstream + updated to fix some layout issues in the notifications tab....

[Alex Hall]

https://github.com/Lastorder-DC/glitch-bird-ui

Lots of things still broken and WIP but now at lease UI aligns well.

Looks like more work has been done with this fork of @Lastorder-DC's code:
https://github.com/TheEssem/glitch-bird-ui/