Visual Refresh Seamless Chat Bar

[pure reef]

thanks a lot!! i was looking for exactly something like this. but i have a request. is it possible to add jump to present bar on the same line along with typing and slowmode indicator like it used to be, maybe in the middle or raplacing either of typing/slowmode indicator when it's not there?

[steel mortar]

This is really nice! Thank you!

I've noticed a quirk, while there's someone typing or slowmode enabled the text box has a border which is nice because the content of the main window doesn't get behind. But when there's no slowmode or someone typing, that border disappears and the content of the main window gets behind the chat bar.

[limber radish]

this snippet seems to mess with padding on the left right and bottom of the chat box

I have this custom css to bring the chat box down to align with the user box:

.visual-refresh {
  form > div[class^="channelBottomBarArea_"] {
    --custom-chat-input-margin-bottom: 6px;
  }
}

which looks like image1

when i add this snippet it shifts the box up and also makes the padding on the left and right much larger shown in image2

[flint fractal]

Hello, tyvm!
I have problem, but only with theme midnight is there any way to fix it?

[scarlet hornet]

the pills are hard coded so you need to tweak around some values, wait for some time before i set some variables to be available for change (sane goes to @limber radish

[scarlet hornet]

can you send me the theme file? i dont seem to experience that issue

[scarlet hornet]

the quirk is as such so you can see the messages that would otherwise be blocked when a lot of people are talking

[scarlet hornet]

i have added a variable that can be changed

[flint fractal]

sure

[scarlet hornet]

i think i know why, midnight handles padding much differently than VSCB

looking into it, gimme some time

@flint fractal just set --flipped-chatbar inside midnight to off, it should work then

[woeful wigeon]

lmao

[scarlet hornet]

yeah you handle the chat bar yourself

[flint fractal]

tyvm <3

[rocky pelican]

How can one change the colour of the boxes to match the Crimson Moon Nitro theme?

[rocky pelican]

oh and how can i change the distance between the chat box and the latest message? it's a bit too close for my taste xd

[wraith hill]

you can remove (or change) "+ 10px" from this part, higher number is closer to the chat box

or for my screen i removed the calc() entirely and replaced it with 910px to keep the chat from moving up whenever the typing or slowmode indicator comes up

but that has the downside of making the chat bar cover messages if you type more than one row

[rocky pelican]

Thanks

[wraith hill]

np

[scarlet hornet]

oh uhh, i have no idea on that @woeful wigeon do you know what to do?

ive gotten that issue before in unrefreshed SCB

[unborn needle]

do you know how to fix the spacing

before

after

it really throws me off for some reason

it goes lower with the snippet on

[scarlet hornet]

its cus of custom chat margins, ill see

[scarlet hornet]

@unborn needle just pushed an update, wanna check it out?

[fast zenith]

ok am i insane or it's slighly misaligned

[scarlet hornet]

blud hasnt answered me

[unborn needle]

Sure in a minute, I'm eating breakfast now

[scarlet hornet]

i wanna kms

[unborn needle]

I could use krita and see when I'm done eating breakfast

[fast zenith]

lmao and yea btw how to force "update" (getting the new snippet from the import thing)

[fast zenith]

this one

[scarlet hornet]

reload discord

[fast zenith]

ok

[fast zenith]

ok it's fixed now

[scarlet hornet]

you piece of shit, thats it you are dying today there was nothing wrong with it

[fast zenith]

it works on compact tho

the default and spacious one doesn't

[scarlet hornet]

yeah because i havent accounted for these people

[fast zenith]

these people
damn

[fast zenith]

anyway how to even detect that with css, is there a variable for it

[scarlet hornet]

i have no fucing clue

[nova peak]

im not entirely sure if this breaks anything else, but i managed to fix this by adding this

.visual-refresh .base_b88801 {
  height: 0px;
}
.typingDots_b88801, .cooldownText_b21699 {
  margin-bottom: 22px;
}

[steel mortar]

That makes the last message be behind the typing indicator and can't be read. What I was trying to do is make the darker background a bit taller, so the messages doesn't get behind in the sides

I mean it's not a big deal tho

ocd shit

[scarlet hornet]

i had to make it like that so you can actually see the message without it going behind the chat bar

[steel mortar]

I have expanded the chat bar on the sides so it's less noticeable now

[scarlet hornet]

@steel mortar i just pushed an update that completely nukes that darker background, wana test it out?

[steel mortar]

sure

let me disable my theme one sec

It's still there when someone is typing or slowmode on

But when no one is typing or slowmode everything gets behind

I would revert it, it was nicer before

[scarlet hornet]

i need to see how to fix that

[nova peak]

Do you have some other css interfering? Looked fine for me

I also have some spacing for the last message to be a bit further away from the chat bar in my personal css so that may be why actually

[steel mortar]

Not that I know of

[nova peak]

Could you try the snippet and what I sent without any other css enabled?

I’m away from my pc but I’ll check again when I’m back

[scarlet hornet]

@steel mortar pushed another update, wanna try that out?

[steel mortar]

It's perfect now when no one is typing, but when typing or slowmode the background height is higher than before

This is when no one types, looks perfect

[scarlet hornet]

i legit cant do anything about that, i would have to do more :has selectors

it also affects readability of messages, because another person's message can be hidden by the typing indicator

^ only affected if you are viewing the most recent message

[solid zodiac]

Uhm, just wanted to ask if this is a feature or a bug

(Rounded corners, when no slowmode or reply popup is there)

(Boxy corners when there is a popup)

If its a bug, would be nice if this is fixed

[stoic atlas]

if you are using midnight, set --flipped-chatbar to off

[scarlet hornet]

any other themes that you are using? because it looks like so

[solid zodiac]

I believe I am not using any theme, except the discord Onyx theme? Or whatever the name for the "new" amoled* theme is

[stoic atlas]

must be a snippet conflict then, refresh your discord with ctrl+R to make sure you have the latest version of all snippets, and disable things 1v1 to find the culprit

[solid zodiac]

okie

[solid zodiac]

Okay....

Wow

So the snippet, this snippet is supposed to be an extension of, conflicts with it 💀

The Aligned Chatbar of Refractor conflicts with the Seamless Chatbar

.visual-refresh {
    --custom-channel-textarea-text-area-height: 56px;
    .form_f75fb0 {
        display: flex;
        flex-direction: column;
        padding: 0 8px 8px 8px;
    }
    .channelTextArea_f75fb0 {
        margin-bottom: 0;
    }
    .base_b88801 {
        position: static;
        order: -1;
        padding: 0 8px;
        background-color: var(--chat-background-default);
        transition: border-color .2s ease;
        border: 1px solid var(--border-faint);
        border-bottom: none;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    .stackedBars__74017 {
        transition: border-color .2s ease;
        border-color: var(--border-faint) !important;
    }
    .form_f75fb0:has(.base_b88801) {
        .channelTextArea_f75fb0 {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
        .stackedBars__74017 {
            border-radius: 0;
        }
    }
    .form_f75fb0:has(.channelTextArea__74017:focus-within) {
        .base_b88801 {
            border-color: var(--border-subtle);
        }
        .stackedBars__74017 {
            border-color: var(--border-subtle) !important;
        }
    }
}

With and without Aligned Chatbar

https://cdn.discordapp.com/attachments/1248848993421889572/1351276214433616022/image0.gif

[stoic atlas]

try this, very quick fix, I probably missed something

/*aligned chatbar*/
.visual-refresh {
    --custom-channel-textarea-text-area-height: 56px;
    .form_f75fb0 {
        display: flex;
        flex-direction: column;
        padding: 0 8px 8px 8px;
    }
    .channelTextArea_f75fb0 {
        margin-bottom: 0;
    }
    .base_b88801 {
        position: static;
        order: -1;
        padding: 0px;
        background-color: var(--chat-background-default);
        transition: border-color .2s ease;
        border: 1px solid var(--border-faint);
        border-bottom: none;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    .stackedBars__74017 {
        transition: border-color .2s ease;
        border-color: var(--border-faint) !important;
    }
    .form_f75fb0:has(.base_b88801) {
        .channelTextArea_f75fb0 {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
    }
    .form_f75fb0:has(.channelTextArea__74017:focus-within) {
        .base_b88801 {
            border-color: var(--border-subtle);
        }
        .stackedBars__74017 {
            border-color: var(--border-subtle) !important;
        }
    }
}```

[scarlet hornet]

extension of, but isnt actually supported

i used it as a base

[solid zodiac]

An improvement, but not a fix, The slowmode is now aligned perfectly to the right whereas previously it wasnt, though the corners are still boxy 💔

[solid zodiac]

Really??

So how am I supposed to have an aligned chatbar....

[scarlet hornet]

use seamless chat bar, padding set to 8px

[solid zodiac]

Okay let me try

Before (with aligned chatbar)

After (without aligned chatbar)

definitely not aligned... a shame they are incompatible together 💔

and yes, padding is at 8, and i am not on compact nor spacious

[scarlet hornet]

wym by aligned, you want the height to be the same?

[solid zodiac]

yes

[scarlet hornet]

just pushed an update for broken :has() selectors resulting in broken seamlessness of radius

[arctic nest]

would it be possible to integrate this into this snippet?

#🎨-css-snippets message

[scarlet hornet]

hAve you tried setting padding to 8px?

[arctic nest]

yes

[scarlet hornet]

yeah people complaining that height isnt the same

[arctic nest]

lol

i'll just use both snippets for now

[scarlet hornet]

dont think it would work tho

[arctic nest]

it works

[covert tusk]

any way to have it not move the chat up when it appears?

this is great, except for that one little bit

[scarlet hornet]

nope, its how discord works xd

would need an extra :has selector

[covert tusk]

rip

no way to like, add padding by default, and then disappear it when that element appears?

[scarlet hornet]

i need to see, some people also complained about it, will need to add another toggle for it

[glad violet]

@covert tusk @scarlet hornet I've made reply and slowmode bars have absolute position and fine tuned margins so that they don't overlap with messages and scrollbar. Also I fixed border radius in chat box. I also wanted to make a transition when typing bar appears with no slowmode (or vice versa), but the whole thing gets deleted from hierarchy when neither is active, so transition doesn't work. Anyway, here is my version (sorry for two parts, message too long):

/* Chatbar alignment */
.visual-refresh .form_f75fb0 {
    --custom-channel-textarea-text-area-height: 60px;
    display: flex;
    flex-direction: column;
    padding: 0px 8px 8px 8px !important;
    /* Normal chatbar */
    .channelTextArea_f75fb0 {
        margin: 0px 1px 0px 1px;
        /* reply bar */
        .stackedBars__74017 {
            border-bottom-color: transparent !important;
            background-color: var(--chat-background-default);
        }
        .scrollableContainer__74017 {
            /* Radius of inner element should be smaller by padding amount */
            border-radius: calc(var(--radius-sm) - 1px) !important;
        }
    }

    /* slowmode bar + typing indicator */
    .base_b88801 {
        border-color: transparent !important;
        position: absolute;
        top: -25px;
        right: 17px;
        order: -1;
        background: transparent !important;
        background-image: transparent !important;
        border: 1px solid var(--border-faint);
        border-bottom: none;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        .typing_b88801 {
            border-color: transparent !important;
        }
        .typingDots_b88801,
        .cooldownText_b21699 {
            background: var(--channeltextarea-background);
            height: 24px;
            padding-right: 8px;
            padding-left: 8px;
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            border: 1px solid var(--chat-background-default) !important;
            border-bottom-color: transparent !important;
            /* because they dont have the same position */
            &.typingDots_b88801 {
                transform: translateX(0px);
                &:not(:has(span > strong)) {
                    display: none !important;
                }
            }
            &.cooldownText_b21699 {
                transform: translateY(1px);
            }
        }
    }
    .channelAttachmentArea_b77158 {
        background-color: var(--chat-background-default);
    }
}

New look:

[covert tusk]

that's quiet neat, thanks, though it seems like without some extra padding at the bottom, the typing indicators cover up the messages for me

and if I do add that, they still cover up some messages when scrolled up

rather than having "reserved" space

(what I did:) css .scrollerInner__36d07 { padding-bottom: 20px !important; }

[glad violet]

Yeah, it covers messages only if u scroll up. I removed the "reserved" space, because it annoyed me when it obscured messages while scrolled up

[covert tusk]

I see

yeah I guess that makes sense, the empty space when scrolled all the way down is already not great

[glad violet]

You can just increase this to add top padding

[covert tusk]

I tried

didn't work

ah, seems it does

but that's... useless

it just adds space between the typing indicator and the chatbox, still covering up the messages

[glad violet]

oh I see ahaha

then margin at the same place. This works

[covert tusk]

yeah, that works

I think by now I got used to the messages moving up when someone's typing though

the permanent empty space at the bottom is kinda a no-go

[glad violet]

Whatever works for you :), I guess it's down to personal preference. If you want, I can return that behaviour with my other fixes as a separate version

[glad violet]

A got annoyed by chat jumping up and down and tried to make a transition of typing indicator appearing and disappearing, but as I said earlier, when neither indicators are active the whole element gets deleted, therefore transition can't be seen

[covert tusk]

I don't think I noticed a lot of difference other than this

One thing that did bother me in the original but not enough to look into it, is that when the chatbox is selected, there's a faint highlight border around it

the indicators don't seem to have any borders

actually, it seems on stock discord, there's always a border around input box, when you click on it, it gets brighter

on my theme it's only visible when you have it highlighted it's so faint that I never noticed but it is there

[glad violet]

i noticed I didn't include this in my snipper, but I had it in my css 🙂 I had it on 15px on screenshot

[scarlet hornet]

the point of this theme was to make it seamless, make it look as if the chat bar is a single element
tweak it however you like

[scarlet hornet]

hi, just pushed an update for it as a toggle, you can enable it by setting --rscb-no-jump-chat to 1 in :root

[covert tusk]

okie lemme try

ah, same thing basically

more convenient though so thanks

[digital surge]

hey guys for some reason this covers the chat and stuff any ideas?

nvm I just had the chat alignment thing over the normal one

[digital surge]

anyone knows how to hide this? it shows when writing a long message

[inland steeple]

made a slight modification to so that when slow mode is enabled, the chat isnt covered by that annoying bar.

Just paste this into the css console and it will work.

    :has(+ .formWithLoadedChatInput_f75fb0 > .typing_b88801)
  )
  /*change the "25px" to make the chat behind the "is typing" and "slowmode" indicators go visually higher*/
  .scrollerContent__36d07 {
  padding-bottom:  25px;
  }
 .visual-refresh .form_f75fb0 {
    margin-top: -29px;
}```

Before: u can see the embed left of the slowmode being covered by that bar
After: The bar is gone

[scarlet hornet]

set --rscb-clip-chat-through-typing-bar to 1

[inland steeple]

Just tried it. all it did was nudge my chat up by a few pixels, making it worse

[scarlet hornet]

wait, just fixed it, should take a while

[inland steeple]

oh, got u

[scarlet hornet]

ok its pushed, wanna check it?

[inland steeple]

it still pushes the chat up when someone types or if slow mode is enabled.. i think im having some trouble with the nudge setting? but the bar is gone at least

[scarlet hornet]

issue is that I don't really want to add another :has selector

[inland steeple]

oh no the nudge works as it should .. but then when its off the chat is a good few pixels higher constantly

[scarlet hornet]

i gues ill have to use the :has selector

[inland steeple]

im probably just gonna also include .visual-refresh .form_f75fb0 { margin-top: -24px; } to push it back down to the place i like it

the "is typing" indicator covers a bit of the messages, but i dont mind that. could always make the -29px lower to push it up a bit more

[scarlet hornet]

kinda pissed that a combination selector like < to go up the dom doesnt exist

[inland steeple]

-24px puts it in a place without covering messages and also doesnt push the chat too far up.

[scarlet hornet]

that's literally what im using

the height of that thing is 24.67

[inland steeple]

LMAO

[scarlet hornet]

element selector shows the height and width of the hovered element

[inland steeple]

thats true yeah

i set it to -23.33px so that it leaves a pixel of gap perfect margins

speaking of. whats with the .67 pixels? why not make it 25 or 24

[scarlet hornet]

idk ask discord

[scarlet hornet]

leaves 1.33px

[inland steeple]

[strange ledge]

The parent selector exists

Don't use pixel values. Use em or rem

[scarlet hornet]

are you sure?

[strange ledge]

I really thought there was but I guess not

You can use the has selector if you know what the parent element is

[scarlet hornet]

thats what i thought. :has() selector is painful to the performance

there is no previous sibling element selector, there is no parent element selector

[strange ledge]

I might have been thinking of JavaScript which does have a parent selector on a node

[scarlet hornet]

that goes into #📜-js-snippets

[karmic anvil]

can we have as a floating item rather than attached to message box? i think that would be way cooler

[scarlet hornet]

make your own edits, im not stopping you

[karmic anvil]

i would if i knew how

[inland steeple]

you can go in the @import url, copy the entire thing and paste it in the css window. this way u can fiddle around with the code, see what does what and then u can figure out how to move that element slightly higher by a few pixels
and then u can figure out also how to fix the bottom corners to look round.

and dont worry about messing anything up, nothing you do in the css window will be permanent and u can always just remove the code and start again from the @import url

[karmic anvil]

did it

    --rscb-chat-box-padding: 8px;
    --rscb-no-jump-chat: 0;
    --rscb-clip-chat-through-typing-bar: 1;
  }
  
  .visual-refresh .form_f75fb0 {
    display: flex;
    flex-direction: column;
    padding: 0px var(--rscb-chat-box-padding) var(--rscb-chat-box-padding)
      var(--rscb-chat-box-padding) !important;
    /* Normal chatbar */
    .channelTextArea_f75fb0 {
      margin-bottom: -2px;
      /* reply bar */
      .stackedBars__74017 {
        border-bottom-color: transparent !important;
        background-color: var(--chat-background-default);
      }
    }
    /* slowmode bar + typing indicator */
    .base_b88801 {
      border-color: transparent !important;
      position: static;
      order: -1;
      background: transparent !important;
      background-image: transparent !important;
      border: 1px solid var(--border-faint);
      border-bottom: none;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      .typing_b88801 {
        border-color: transparent !important;
      }
      .typingDots_b88801,
      .cooldownText_b21699 {
        background-color: var(--chat-background-default);
        height: 24px;
        padding-right: 8px;
        padding-left: 8px;
        border-radius: 8px;
        border: 1px solid var(--border-faint) !important;
        border-bottom-color: transparent !important;
        /* because they dont have the same position */
        &.typingDots_b88801 {
          transform: translateY(-5px);
          &:not(:has(span > strong)) {
            display: none !important;
          }
        }
        &.cooldownText_b21699 {
          transform: translateY(-10px);
          margin-top: 10px;
        }
      }
    }
    .channelAttachmentArea_b77158 {
      background-color: var(--chat-background-default);
    }
  }
  
  .messagesWrapper__36d07:not(
      :has(+ .formWithLoadedChatInput_f75fb0 > .typing_b88801)
    )
    .scrollerContent__36d07 {
    padding-bottom: calc(var(--rscb-no-jump-chat) * 25px);
  }
  .scrollerInner__36d07 {
    padding-bottom: calc(var(--rscb-clip-chat-through-typing-bar) * 25px);
  }
  .scroller__36d07 {
    margin-bottom: calc(var(--rscb-clip-chat-through-typing-bar) * (0px - 25px));
  }

i have no idea what these do

[scarlet hornet]

--no-jump-chat is for the chat to stop jumping up and down when someone starts/stops typing
--clip-chat-through-typing-bar lets there be no empty space at the bar when someone starts typing

[karmic anvil]

oh nice

how do you like my code?

[scarlet hornet]

I'll need to check the diff, i dont see any differences

and it doesnt help that I'm on mobile now

[karmic anvil]

ok

[inland steeple]

what i do, is i remove stuff and see what changes if it changes what i expect it to change, then i alter it accordingly

[karmic anvil]

this isnt big deal but i saw it instantly and i cant unsee it

[karmic anvil]

thats what i did lmao

[arctic nest]

anyone else notice the nice border around the typing and slowmode indicators are gone now?

[scarlet hornet]

kinda a pain in the ass to actually fix it

[arctic nest]

wahhgone

[digital surge]

chat bar is huge when in an app's dm

[scarlet hornet]

cant do anything

[digital surge]

what about this is there a way to make the combo thing higher or maybe below the chat box?
-# sometimes it's on the left too

[scarlet hornet]

why would you ever use party mode

[digital surge]

for fun

[scarlet hornet]

i wont support it

[digital surge]

ok

[wraith cave]

how would i make it so that the typing is next to the slowmode?

[karmic anvil]

why do you even answer us when ur lazy to support anything

[scarlet hornet]

to say i wont support it

[karmic anvil]

nice

[scarlet hornet]

might look into it, but this snippet was originally made for myself

[shadow sedge]

unless I'm stupid, it's not working

almost forgot the picture lol

[shadow sedge]

I'm stupid

[pure reef]

how to get rid of the rounded borders from chat box forever

i'm this close to achieving perfection

[pure reef]

got it

    .channelTextArea_f75fb0 {
        border-radius: 0px;
    }
}```

[karmic anvil]

@scarlet hornet can you publish this for me and tag me for credit pwis, it works perfect for me

[scarlet hornet]

i still havent checked the diff lmao

[karmic anvil]

i know, and it's time

[scarlet hornet]

checking it rn thru termux

what exactly did you mean by it floating?

do you have a screenshot of it

[scarlet hornet]

nope that goes agaknst the point of this snippet

you could maybe ask mods to give you snippet devs so you can reply to the original post to add as a extension of sorts

[karmic anvil]

ok

[strange ledge]

FINALLY

there is an experiment to make this default behavior

no more css needed

it looks like this now

[thorn plover]

just updated and it seems like there's a shadow cast on the messages from the typing indicator now. seems to go away when I remove this snippet but not 100% sure it's the cause

[scarlet hornet]

yeah im not sure how to solve it

because the bg gets brought up with it

[digital surge]

why is it like this
it wasn't like this before

[scarlet hornet]

huh weird

i cant replicate it at all

what did you set the variables to?

[digital surge]

I don't remember editing them at all

but I can send you the snippet

/*Visual Refresh Seamless Chat Bar*/
:root {
    /* change padding of the bar */
     --rscb-chat-box-padding: 8px; /* default is 8px for alignment */
    /* Whether you want the chat to not move up and down when someone starts typing */
    --rscb-no-jump-chat: 1;
}
/*Visual Refresh Seamless Chat Bar*/

isn't this the snippet?

[scarlet hornet]

yep

[digital surge]

so ?

[wicked flame]

discord probably updated the css

[scarlet hornet]

@digital surge got the issue after updating discord, will look into it asap

fixed it, for some fucking reason, discord added an extra flex rule

[last plank]

discord made a change and this is now the default 😂

[fast zenith]

it's because it's now discord default

thanks for this plugin while it last 🫡

[scarlet hornet]

wait holy shit is it a discord experiment or something?

[last plank]

i dont have any experiments enabled but still has it

you dont have it?

it's just perfectly aligned now

and the typing animation is moved to the top

[scarlet hornet]

very cool

[scarlet hornet]

made some quick changes to the snippet to properly support the new fuckass changes, but i had to remove --no-jump-chat because i couldnt get it to work :/

[zenith scaffold]

uhh

[cedar sapphire]

As you see discussed above, discord now has it aligned by default now so it should look fine after removing the CSS for it

[scarlet hornet]

thought i pushed the change for it, lemme check

[karmic anvil]

how can i bring back the round plus icon?

and can i skip chat lift for slowmode?

[zenith scaffold]

also one thing

it isn't really perfectly aligned for me

tbh

(yes the plus icon got fixed for me for some reason)

also what happened to the scrollbar

[lilac marten]

ye the old css used to move the typing indicator to the bottom of the chat bar hope we can have that back

[zenith scaffold]

i feel like making a css that merges a bunch of the css snippets posted here into an "ui refresh" refresh

[scarlet hornet]

okay i need to turn off midnight for this, ill check what im doing

it got fixed because i pushed a variable change

[noble folio]

hey, did you ever find a solution to this?

[noble folio]

nevermind, fixed! it was:

{
  display: none !important;
}```

[zenith scaffold]

btw is it possible to make it more consistent with https://discord.com/channels/1015060230222131221/1407445386737483856

[scarlet hornet]

temporary hiatus rn, ill do a refactor when i come back