ronilaukkarinen / mastodon-bird-ui

🐘🐦 Mastodon web UI, but strongly inspired by Twitter.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add background-color for compose area

numemac opened this issue · comments

People on Veganism Social like Bird UI, but some have complained about the lack of a background-color for the new post text area.
I think making it a shade lighter or darker, instead of transparent, would be great to indicate where to click.

One complaint:
https://veganism.social/@beforewisdom/110141454410372953

There will always be people who don't like some parts of the UI. I'm kinda fond of the left and right panels "floating around". I've enterntained myself earlier about the idea of the box having some outline, but it's too "boxy" in my taste with any borders or background colors:

image
image

In overall picture there's something that is distracting this way, it jumps to your eyes:
image

It's rather easy to add this to the end of your Custom CSS, if you want it, here:

/* Add background color for the compose form */
/* stylelint-disable-next-line no-duplicate-selectors */
.layout-single-column .compose-form .compose-form__autosuggest-wrapper,
.layout-single-column .compose-form .compose-form__buttons-wrapper {
  background-color: var(--color-mud);
  border-color: var(--color-mud);
  padding-top: 0;
}

/* Fixes to bottom row when there's a background */
.layout-single-column .compose-form .compose-form__buttons-wrapper {
  padding-bottom: calc(var(--gap-default) / 2);
}

But for now I'm not going to add this as default.