Can you customize the position of the chat box?

[Andre601]

I saw that in the appearance settings, that you can add some own CSS to extend Revolt's look to your needs.

Now I was wondering, what I could add to make the text box appear a bit further up than it currently is (Add some padding). I like the general look of channels so far, but having the text box at the very bottom without any padding feels... off, so I would like to change this.

If this is good enough could it also be seen as feedback/suggestion to improve the textbox position and overall padding of things.

[brecert]

Unfortunately, css class names aren't stable yet revoltchat/revite#149, so this may break very quickly :(

/* ChatBox, Upload Area, Typing Indicator */
.bUIDMF, .duKdcg, .foELCG {
    margin-top: -0.25rem;
    margin-bottom: 0.75rem;
    margin-inline: 0.75rem;
    border-radius: var(--border-radius);
}

/* Typing Indicator */
.foELCG {
    display: grid;
    place-items: center;
    padding: 0.25em;
    background: var(--secondary-background);
}

.foELCG > div {
    position: unset;
    height: unset;
    margin: unset;
    background: unset;
}

[Andre601]

Yeah... It seems to already be broken because applying it did not change a thing

[brecert]

That may have been my fault, I was on a development build when I made that. oops.
Hopefully this one should work for the current build.

/* ChatBox, Upload Area, Typing Indicator, Reply Bar, Scroll Down Message */
.dneKvo, .jVIclB, .fSNDey, .ohaep, .dFtsAb {
    margin-top: -0.25rem;
    margin-bottom: 0.75rem;
    margin-inline: 0.95rem;
    border-radius: var(--border-radius);
}

/* Typing Indicator */
.fSNDey {
    display: grid;
    place-items: center;
    background: var(--secondary-background);
}

.fSNDey > div {
    margin: unset;
    height: unset;
    position: unset;
    background: unset;
}

.fSNDey > div:not(:empty) {
    padding: 0.25rem;
}

[Andre601]

Yes, that one does the trick. Thank you.
I hope naming will be consistent in a future update so that this won't break that easily in future updates 😅

[brecert]

I forgot to include styling for the reply bar too, just updated the css to add that.