**Collapsible chat actions**

[spring coyote]

Seems like something changed slightly, so updated the original post with the new css, but here's the old css if anyone needs
only changes are *= for textArea_ so it works with sidebar threads (forgot that before oops)
and changes to the send message button fix (i think the html for this changed or maybe i'm insane)

[class^=chat_] [class^=textArea_] {
  margin-right: 24px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    background-color: hsl(var(--primary-560-hsl) / 0.5);
    backdrop-filter: blur(3px);
    border-radius: 8px;
    &:not(:hover)>:not(:last-child) {
      display: none;
    }
    /* Send message button fix */
    &:not(:hover)>[class^=separator_] {
      margin-left: 0;
      &::before { display: none; }
      button>div { margin-left: 8px; }
    }
  }
}

[clever patio]

Still not working in threads.

[spring coyote]

it is for me
make sure you're using the new css
can you send a ss

only the emoji icon shows in sidebar threads btw (and send message button if you have it enabled)

[safe stratus]

Omg im stupid this is the wrong thread, End me. Sorry Obisidian.

[spring coyote]

lol
which snippet is making you lag?

[safe stratus]

It's not this one, it's Seamless Chat Bar by nsg. x) Not anything by you don't worry.

[stone wolf]

Best snippet ever (i am not joking)

[spring coyote]

ty

[manic zealot]

👀

Is there a new version?

[stone wolf]

Wdym?

"old" version still working

[stone wolf]

Try to turn all your themes off

[manic zealot]

What is that keyboard plugin?

[stone wolf]

Its unnoficial plugin

Ahhh

No

Vc silenttyping

[stone wolf]

Just silent typing

[spring coyote]

probably a theme conflict
does it work if you disable your other themes

[nimble fox]

would appreciate if can fix it after the new update broke it

thx <3

[spring coyote]

Do you have the visual refresh?

I don't have it yet

It's still an experiment for me

[delicate wharf]

/*#region Collapse the chat buttons except when hovering */
[class^=chat_] [class*=textArea_] {
  margin-right: 32px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    &:not(:hover)>:not(:has(>[class^=emojiButton] )) {
      display: none;
    }
    &:not(:hover)>[class^=container_] button>div {
      margin-left: 8px;
    }
    >:has(> [class*=emojiButton_]) {
        order: 99;
    }
    >:has(> .app-launcher-entrypoint) {
        order: -1;
    }
  }
}
/*#endregion */

just some changes I did to have the emoji button at the end, and not the game thing

[spring coyote]

oh i do have it in browser, but i'm still able to turn it off with the experiment

[spring coyote]

It seems to be working even with the visual refresh?
It's just the wrong color
change --primary-560-hsl to --neutral-81

[burnt crater]

that doesn't seem to work for me for whatever reason, it collapses it but it also makes every button disappear except for the emoji button and the apps button

it also somehow makes my discord lag like crazy

ok even with it disabled it lags and doesn't work so clearly the problem is not that css, nevermind

lowkey going insane trying to find all the css snippets that broke and/or make my discord lag ngl

[spring coyote]

:has() is pretty laggy

[burnt crater]

ok I've been doing some cleanup re-adding slowly each css snippet one by one and searching for fixes for the ones that don't work, and the one I previously mentioned not working does indeed work
I'll try to figure out which other snippet was making it freak out

[pure igloo]

also wtf quick css has scss/Sass syntax support?

didnt know tha

[spring coyote]

it does?

[visual prawn]

doesnt work for me it just makes every button disappear with nothing to hover over

[delicate wharf]

No I think it's just that the new CSS supports that

It's not scss nor less

[spring coyote]

oh they probably meant nested css

[delicate wharf]

Try to debug it yourself, it works for me, I post that if ppl want to play with it, but I won't fix everyone's CSS

[delicate wharf]

Yea that

[visual prawn]

thats fair

tryna fix it and i can only tell its from the display: none;

[spring coyote]

does it work if you disable all your other themes?

[visual prawn]

i managed to sort it out its all good now

[visual prawn]

do u mind if i dm u about something rq regarding giving u credit

[spring coyote]

i updated the snippet in the main post for visual refresh
here's the legacy version for archival purposes:
-# (you can delete the send message button fix if you don't use it)
~~```css
[class^=chat_] [class*=textArea_] {
margin-right: 24px;
+[class^=buttons_] {
position: absolute;
right: 0;
background-color: hsl(var(--primary-560-hsl) / 0.5);
backdrop-filter: blur(3px);
border-radius: 8px;
&:not(:hover)>:not(:last-child) {
display: none;
}
/* Send message button fix */
&:not(:hover)>[class^=container_] button>div {
margin-left: 8px;
}
}
}

[noble roost]

how do i show the send message button?

[spring coyote]

right click chat bar to bring up this menu

it also can be enabled from accessibility settings

[noble roost]

thx

[stone wolf]

/*collapse chat actions*/
[class^=chat_] [class*=textArea_] {
  margin-right: 24px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    background-color: transparent;
    /*backdrop-filter: blur(3px);*/
    border-radius: 8px;
    &:not(:hover)>:not(:last-child) {
      display: none;
    }
    /* Send message button fix */
    &:not(:hover)>[class^=container_] button>div {
      margin-left: 8px;

    }
    &:hover {
      /*max-height: 45px;*/
      backdrop-filter: blur(3px);
      background-color: hsl(var(--neutral-81) / 0.5);
    }
  }
}```

my version (for transparent themes with transparent chatbox)

[spring coyote]

oh wait the background on my version is broken and is just transparent. didn't even notice.
I kinda like fully transparent better than 50% opacity

[spring coyote]

Wait are you using an outdated version?

I added a bit of a shadow that I think looks good
I also improved the background (it's fully transparent in this message and screenshots, but you can adjust the 0% in the color-mix)

[class^=chat_] [class*=textArea_] {
  margin-right: 32px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    background-color: color-mix(in oklab, var(--chat-background-default) 0%, transparent);
    backdrop-filter: blur(3px);
    border-radius: 8px 0 0 8px;
    &:hover {
      box-shadow: 0 0 8px #0003;
    }
    &:not(:hover)>:not(:last-child) {
      display: none;
    }
  }
}

[spring coyote]

is that with this css?

[stone wolf]

Yeah

[spring coyote]

wait what
that background should be fully transparent

try changing background-color to background-color: transparent

[stone wolf]

Didnt help

[spring coyote]

try removing the box-shadow then?

[stone wolf]

Same

[spring coyote]

try setting background-color to transparent !important

[stone wolf]

Thats the reason why I did this

[stone wolf]

Same

[spring coyote]

oh maybe try removing the backdrop-filter

[stone wolf]

Same

I tried everything I could think of

[spring coyote]

what happens if you remove the snippet entirely

[stone wolf]

The dark part will be gone

[spring coyote]

what theme are you using

[stone wolf]

Midnight

[spring coyote]

how's it still collapsed

[stone wolf]

I accidentally put my old snippet back, but if I remove it everything stays the same

Without snippet

[spring coyote]

try removing the background-color, backdrop-filter, and box-shadow

without those, there's nothing that could possibly change the color

[spring coyote]

and this one works right?

[stone wolf]

Yes

[stone wolf]

Same

[stone wolf]

Thats why I still dont know whats wrong

[spring coyote]

ok now try removing every line until the background is normal lol

[stone wolf]

You can check it out for yourself

It worked. I dont know how I couldnt do it before

[class^=chat_] [class*=textArea_] {
  margin-right: 32px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    }
    &:not(:hover)>:not(:last-child) {
      display: none;
    }
  }
}```

[spring coyote]

ok it's caused by the blur

oh

not the blur, but just by having backdrop-filter defined

[spring coyote]

this still has the background when you're hovering right?

[spring coyote]

the solution is just to remove the backdrop-filter line from here

but then it's fully transparent and doesn't cover the text very well

[spring coyote]

here's a proper fix for midnight @stone wolf

.channelTextArea_f75fb0 {
  backdrop-filter: none !important;
  &::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: inherit;
    backdrop-filter: var(--panel-backdrop-filter);
  }
}
[class^=chat_] [class^=textArea_] {
  margin-right: 32px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    backdrop-filter: blur(3px) !important;

    border-radius: 8px 0 0 8px;
    &:hover {
      box-shadow: 0 0 8px #0003;
    }
    &:not(:hover)>:not(:last-child) {
      display: none;
    }
  }
}

[stone wolf]

Thanks you

[spring coyote]

(the blur works in it)

[spring coyote]

it's a problem with the emoji theme

can you send it?

wait you're in the wrong thread

this is for collapsible chat actions not the message actions

and there's two different snippets for message actions

[hazy oyster]

Hey @spring coyote, is the original message updated and the newest version or is it somewhere in this thread?

[spring coyote]

it's updated or has a link to the message in the thread

[hazy oyster]

❓

[spring coyote]

just look at the original message

[hazy oyster]

So that's the newest version? The original?

[spring coyote]

fun fact, you can edit messages

[hazy oyster]

Yeah I know. Just wanted to know if you did that or not. Some people are just too stupid to do it.

[spring coyote]

you can easily find out by hovering over the (edited) text

[hazy oyster]

You got me with that one. Sorry mate, apparently I am too stupid here...

[burnt crater]

Welp, the new discord update broke it. Using the thing to update classes didn't fix it sadly

[burnt crater]

neither the original one nor that modification (to keep the emoji button) work anymore unfortunately

[spring coyote]

oh wtf this still uses attribute selectors

[spring coyote]

This is the version I use

._740174f3d6a2c8fe-textArea {
  margin-right: 32px;
  +._740174f3d6a2c8fe-buttons {
    position: absolute;
    right: 0;
    background-color: color(from var(--background-gradient-highest,var(--background-base-low)) srgb r g b / 20%);
    backdrop-filter: blur(3px);
    border-radius: 8px 0 0 8px;
    &:hover {
      box-shadow: 0 0 8px #0003;
      padding-left: var(--space-8);
    }
    &:not(:hover)>:not(:last-child) {
      display: none;
    }
  }
}

[burnt crater]

hmmm for whatever reason this completely hides them for me but forever
doesn't come back when typing nor hovering nor anything

maybe it interferes with some of the other custom css I use for the chat icons?
The one by nyncral that only showed the emoji icon used to work for me right until today

[limpid onyx]

this kinda fixed it for me, it collapses as usual but instead of showing just the emoji icon it shows the games/app icon

[spring coyote]

I think the last-child is the apps button
Maybe you have that hidden?

[spring coyote]

you were probably using this then #1329057978850086962 message

[delicate wharf]

ye 90% of my css broke with last update....

[delicate wharf]

._740174f3d6a2c8fe-textArea {
  margin-right: 32px;
  +._740174f3d6a2c8fe-buttons {
    position: absolute;
    right: 0;
    backdrop-filter: blur(1px);
    &:not(:hover)>:not(:has(>[class*=emojiButton] )) {
      display: none;
    }
    &:not(:hover)>[class^=container_] button>div {
      margin-left: 8px;
    }
  }
}

here

[tidal grove]

didn't this use the send button before?

[spring coyote]

it uses the right most button

what nyncral sent is a modified version

that I wouldn't recommend using

[tidal grove]

ah, well i found a part of an older one and put them together

[spring coyote]

use this one

I forgot I didn't actually update the original message, just sent that here

[tidal grove]

that's very nice

i like the little popout thing

[manic zealot]

You can send it to my mom as well. I need it too.

[tidal grove]

what?

[manic zealot]

didn't this use the send button before?
this w

[tidal grove]

i'm still not getting it

[manic zealot]

I have enabled the message send button, but what’s showing for me is the emoji picker

[tidal grove]

use this one
#1329057978850086962 message

[manic zealot]

oh~ tks!

Goto sleep w

My time zone is UTC+8.

[spring coyote]

Like I said a couple messages above, use this #1329057978850086962 message

oh oops Logan already said that

[dense depot]

you can replace class*=emojiButton with class*=aa63abf63dbd9cce-buttonContainer

or use the one from OP (&:not(:hover)>:not(:last-child))

[burnt crater]

thank you so much, this worked!

[pulsar pelican]

this one works if you have the send button enabled, it looks like the images attached

[spring coyote]

yeah, it should also work if you don't though
Also, I updated the original message with that

[dense depot]

gg discord changed everything again

/* Collapsible chat actions */
/* ._740174f3d6a2c8fe-textArea { */
.textArea__74017 {
  margin-right: 32px;
  /* +._740174f3d6a2c8fe-buttons {*/ 
  +.buttons__74017 { 
    position: absolute;
    right: 0;
    background-color: color(from var(--background-gradient-highest,var(--background-base-low)) srgb r g b / 20%);
    backdrop-filter: blur(3px);
    border-radius: 8px 0 0 8px;
    &:hover {
      box-shadow: 0 0 8px #0003;
      padding-left: var(--space-8);
    }
    &:not(:hover)>:not(:last-child) {
      display: none;
    }
  }
}
/* --- */

[spring coyote]

yeah thanks
i need to put all my snippets on github so i don't forget to update the message

[burnt crater]

hmmm this one (just like the one from Obsidian) completely and permanently hides all the icons for me, only the one by nyncral (#1329057978850086962 message) used to work properly
I wonder if it's because it interferes with the custom css for the emoji button and/or the ones to hide the gift and app buttons...

[dense depot]

oh I should have mentioned the one I posted is meant for if you have send button enabled

it should work otherwise but I guess it doesn't

[burnt crater]

ah, that explains it, I don't have the send button enabled

[dense depot]

last bit of the snippet is supposed to just unhide whatever the rightmost button is so I'm not sure why it doesn't work here

actually I just tested it now and it works without send button and uses the Apps button instaed

[burnt crater]

hmmm
maybe it's because the rightmost button for me is the custom emoji one

because I hid the apps button

[dense depot]

lol that's probably why

try reenabling the apps button and see

[burnt crater]

yep

unfortunately yes lol

[dense depot]

pretty sure you can rearrange the icons using css

hell if i remember how

[burnt crater]

I was hiding it with
/* Hide apps button */ div[aria-label|="Apps"]{ display:none; }

ok I fixed it by frankensteining your code with nyncral's

I changed
&:not(:hover)>:not(:last-child) {
to
&:not(:hover)>:not(:has(>[class*=emojiButton] )) {

[dense depot]

I'm gonna be honest half the reason I even have the send button enabled is for this snippet

[spring coyote]

my snippet (and the one missingno sent which is the same but with the updated classes) hides all but the rightmost button
you probably have another snippet hiding the right most button (it's usually the apps button by default)

[spring coyote]

no. it uses the rightmost button

[spring coyote]

has is usually quite bad for performance

[spring coyote]

if emoji is always the second to last button, you can do :nth-last-child(2) instead of :last-child

[burnt crater]

Yeah, I was noticing the lag
I'll try the second to last child change that you suggested, thank you!

[burnt crater]

this worked perfectly and it's a lot smoother, thanks again

[burnt crater]

idk who else might need this, but I also managed to move them all closer with each other by adding another line below the border radius one, so it went from
border-radius: 8px 0 0 8px;
to
border-radius: 8px 0 0 8px; gap: 0px !important;

-# now I just need to find a way to also reduce the padding between threads/notification settings/pinned messages/show member list...

[pulsar marten]

i think a recent update has caused these current snippets to not work, im trying to get every default button except for the emoji button to be hidden

wait nvm i just tried one of the other ones sent here that actually is even better than just the emoji button

though actually it would be cool if it was just the emoji button and my vencord buttons would collapse because the gif and sticker buttons are redundant and the app and gift buttons ill probably never use, i just dont know like the names of them so that i can disable them in quickcss

[spring coyote]

.

oh

[spring coyote]

see the conversation above your msg

[pulsar marten]

oh mb

ok so i can just do div[aria-label|="[button name]"]{ display:none; } but i don't know where to find the names for the gif, gift, and sticker buttons. "Gif" "GIF" "GIFs" "Gift" "Nitro" and "Stickers" didnt work, but i figured out how to anhiliate the apps button using the stuff above

oh nvm i found them on google

[spring coyote]

don't think there's gonna be a hyphen after the button name, just = will work in the attribute selector

and to find the names, open devtools with ctrl+shift+i, then press inspect element (in the top left of devtools) and hover over the element, then you can see the aria label and stuff

[lucid obsidian]

I found that on my client the buttons very frequently displayed on top of the text so it was kinda unreadable, so I did a quick & dirty way to set the background color, by adding it after line 15 (after right: 0)

    background-color: #222327ee;

I'm sure there's a way to actually retrieve the correct color variable instead of hardcoding but I couldn't find it quickly, so I'll leave it to the experts

[spring coyote]

it already uses the proper variable

[spring coyote]

are you using the updated snippet? #🎨-css-snippets message

if that still doesn't have a background, add your hex where i point the arrow

it should look like this