Chat Bar Context Menu | libVencore | Page 1

humble cloak Oct 28, 2025, 2:43 PM

#

how the actual fuck dav

onyx canyon Oct 28, 2025, 2:44 PM

#

i be messing around

quasi dragon Oct 28, 2025, 2:45 PM

#

you are jesus christ

#

🙏 🙏 🙏

supple wave Oct 28, 2025, 2:45 PM

#

i wanted to do something like this with the user panel buttons but it was beyond me

humble cloak Oct 28, 2025, 2:46 PM

#

now add an @media value to make this only appear when the window i ssmall enough

onyx canyon Oct 28, 2025, 2:46 PM

#

True

white temple Oct 28, 2025, 6:07 PM

#

this is really cool

#

is there a way to exclude some of the buttons from this? like for example leave the emoji button on the chat bar

onyx canyon Oct 28, 2025, 6:08 PM

#

i had originally wanted to make this with the emoji button still in the bar but that'd require a much more complicated setup

#

not saying it's impossible but it's more just a very tedious setup that would need completely different styling

white temple Oct 28, 2025, 6:12 PM

#

yeah cause rn it modifies the existing container right

#

I see that's a shame

onyx canyon Oct 28, 2025, 6:15 PM

#

if i could've set it up cleanly i would've definitely done that though

brittle drum Oct 28, 2025, 8:10 PM

#

wow this is surprisingly only a little bit cursed

#

and not very laggy for having 3 :has()

#

Would it be doable to make clicking the 3 dots when the menu is already open close it?

junior laurel Oct 28, 2025, 8:55 PM

#

brittle drum Would it be doable to make clicking the 3 dots when the menu is already open clo...

would need js

#

my version

/*Textarea Patches*/
.form_f75fb0 {
  z-index: 0;
}
.base_b88801 {
  z-index: -1;
}
.channelTextArea_f75fb0 .scrollableContainer__74017 {
  overflow: visible;
}
.channelTextArea_f75fb0 .textArea__74017 {
  grid-area: textArea;
  height: unset !important;
  > div {
    max-height: 144px;
    overflow: hidden scroll;
    &::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
      background-clip: padding-box;
      border: 4px solid transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: hsl(var(--primary-800-hsl)/.6);
      border-radius: 8px;
    }
  }
}

/* Context Menu (sichtbar bei Hover) */
.channelTextArea_f75fb0:hover .buttons__74017 {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transition-delay: 0s;
}

.channelTextArea_f75fb0 .buttons__74017 {
  position: absolute;
  background: var(--background-surface-high);
  background-color: color-mix(var(--background-surface-high) 80%, transparent 20%);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: var(--shadow-high);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: fit-content;
  gap: 4px;
  min-width: 180px;
  visibility: hidden;
  opacity: 0;
  padding: 6px;
  top: unset;
  bottom: calc(100% - 18px);
  right: 12px;
  z-index: 10;
  > div {
    width: 100%;
  }
}

.custom-theme-background .channelTextArea_f75fb0 .buttons__74017 {
  border-color: var(--border-strong);
}

/* Context Buttons */
.buttonContainer_e6e74f {
  width: 100%;
  background: none !important;
}

.channelTextArea_f75fb0 .button__74017,
.button_e6e74f {
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--header-primary);
  justify-content: left;
  flex: 1 1 auto;
  padding: 6px;
  transition: background .2s ease;
  &:hover {
    background: var(--background-mod-subtle);
  }
  &:after {
    content: none !important;
  }

  .lottieIcon__5eb9b,
  .iconContainer_c0c49a {
    width: 20px !important;
    height: 20px !important;
  }

  .spriteContainer__04eed {
    --custom-emoji-sprite-size: 20px !important;
  }

  .spriteGreyscale__04eed {
    background-color: currentColor;
  }
}

exotic belfry Oct 29, 2025, 8:24 PM

#

white temple is there a way to exclude some of the buttons from this? like for example leave ...

THIS ! .

quasi dragon Oct 29, 2025, 8:48 PM

#

use ctrl e/g/s

#

@white temple @exotic belfry

white temple Oct 29, 2025, 8:49 PM

#

I like having buttons

exotic belfry Oct 29, 2025, 8:49 PM

#

Yoooooooo, thx for the tip man, didn't know that

white temple Oct 29, 2025, 8:49 PM

#

this doesn't solve the ui issue

exotic belfry Oct 29, 2025, 8:49 PM

#

white temple I like having buttons

Same, but shortcuts are great too to know

white temple Oct 29, 2025, 8:49 PM

#

sure sure

obsidian kernel Nov 2, 2025, 9:10 PM

#

Is there a valid reason max-height: 144px; is used on the text area?
It messes with your text box if you go to send a large amount of text

I've attached pics of with the line and without

onyx canyon Nov 3, 2025, 1:36 AM

#

scrollbar moved to the chat area so the context menu can be viewed outside of the textbox

#

if you don't do that this happens

#

you can just change the max-height to something else

#

like 50vh or something idk

obsidian kernel Nov 4, 2025, 9:17 AM

#

Thanks, mine stayed ontop but assume a plugin / theme was messing with this to make it more beneficial

onyx canyon Nov 5, 2025, 6:51 PM

#

Well if there’s no max height set on something then the chat bar will eventually start pushing everything out of view

#

And you can’t have a visible overflow and scroll on the same element so the next best thing is applying the scroller to the text area

copper roost Dec 6, 2025, 11:42 AM

#

pls lmk how to hide the send gift option

copper roost Dec 6, 2025, 12:42 PM

#

junior laurel my version ```css /*Textarea Patches*/ .form_f75fb0 { z-index: 0; } .base_b888...

small silly oversight

#

the pop up hides the x button in replies

coarse nimbus Dec 6, 2025, 1:17 PM

#

copper roost pls lmk how to hide the send gift option

I use

/* Send a gift button in the chatbox */
.button__74017.button__24af7[aria-label="Send a gift"] {
  display: none !important;
}

which is probably not the best since it uses hardcoded button classes. You could change the selector to div[aria-label="Send a gift"] {, but I don't know if that won't pick up some false positives

copper roost Dec 6, 2025, 4:16 PM

#

ah okok thx

junior laurel Dec 8, 2025, 5:25 AM

#

copper roost small silly oversight

Just click very close to the side; the X button is larger than the button menu.

copper roost Dec 8, 2025, 5:26 AM

#

junior laurel Just click very close to the side; the X button is larger than the button menu.

It's difficult to do

#

Can you position the pop up a bit below or the x button a bit up during replies?

junior laurel Dec 8, 2025, 5:27 AM

#

To be honest, it doesn't bother me.

copper roost Dec 8, 2025, 5:27 AM

#

Alright then 👍

junior laurel Dec 8, 2025, 5:27 AM

#

copper roost Can you position the pop up a bit below or the x button a bit up during replies?

You can generally move the popup.

copper roost Dec 8, 2025, 5:28 AM

#

Huh... How?

#

I'd like to do it if you lmk how to do it

junior laurel Dec 8, 2025, 5:30 AM

#


/* Context Menu */
.channelTextArea_f75fb0:hover .buttons__74017 {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transition-delay: 0s;
}

.channelTextArea_f75fb0 .buttons__74017 {
  position: absolute;
  background: var(--background-surface-high);
  background-color: color-mix(var(--background-surface-high) 80%, transparent 20%);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: var(--shadow-high);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: fit-content;
  gap: 4px;
  min-width: 180px;
  visibility: hidden;
  opacity: 0;
  padding: 6px;
  top: unset;
<------------ here ------------->
  bottom: calc(100% - 18px);
  right: 12px; 
<----------------------->
  z-index: 10;
  > div {
    width: 100%;
  }
}

brittle drum Dec 8, 2025, 5:31 AM

#

copper roost the pop up hides the x button in replies

You could just make it so it only shows when hovering over the textbox not the reply thing

/* Context Menu (sichtbar bei Hover) */
.channelTextArea_f75fb0>.scrollableContainer__74017:hover .buttons__74017 {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transition-delay: 0s;
}

#

so replace this part

junior laurel Dec 8, 2025, 5:32 AM

#

Another possibility

#

Even better than mine

copper roost Dec 8, 2025, 5:33 AM

#

ah I see

copper roost Dec 8, 2025, 5:33 AM

#

brittle drum You could just make it so it only shows when hovering over the textbox not the r...

thank you both blobcatcozy

brittle drum Dec 8, 2025, 5:33 AM

#

junior laurel my version ```css /*Textarea Patches*/ .form_f75fb0 { z-index: 0; } .base_b888...

also just not looked at what this does
it's nice

copper roost Dec 8, 2025, 5:33 AM

#

yep

#

I like it too

gentle edge Dec 10, 2025, 9:48 PM

#

anyone had an issue where the snippet works but u cant see the 3 dots?

#

i checked to see if it was something in my theme colliding with it by disabling my theme and using quick css but it still just makes the button disappear

#

junior laurel Dec 10, 2025, 9:53 PM

#

weird thing

quasi dragon Dec 10, 2025, 11:38 PM

#

gentle edge i checked to see if it was something in my theme colliding with it by disabling ...

it stopped working for me too

junior laurel Dec 10, 2025, 11:41 PM

#

CurrentColor is probably not working correctly.

onyx canyon Dec 10, 2025, 11:58 PM

#

Most likely scenario

#

I’ll have to check it out

junior laurel Dec 13, 2025, 8:07 AM

#

It's broken here too now. I was able to overwrite the Discord own colors with a fixed color, but I have no idea how to do the others.

gentle edge Dec 13, 2025, 12:29 PM

#

junior laurel It's broken here too now. I was able to overwrite the Discord own colors with a ...

out of curiosity what’s the latency for?

junior laurel Dec 13, 2025, 12:32 PM

#

gentle edge out of curiosity what’s the latency for?

It shows how long it took to load the messages for this channel.

#

But I don't know, it's not my plugin.

brisk iris Dec 13, 2025, 6:00 PM

#

I have fixed this for now.

📎 message.txt

junior laurel Dec 13, 2025, 11:58 PM

#

Umm, what have I done?

#

Fixed Version from me

/*Textarea Patches*/
.form_f75fb0 {
  z-index: 0;
}
.base_b88801 {
  z-index: -1;
}
.channelTextArea_f75fb0 .scrollableContainer__74017 {
  overflow: visible;
}
.channelTextArea_f75fb0 .textArea__74017 {
  grid-area: textArea;
  height: unset !important;
> div {
    max-height: 144px;
    overflow: hidden scroll;
    &::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
      background-clip: padding-box;
      border: 4px solid transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: hsl(var(--primary-800-hsl)/.6);
      border-radius: 8px;
    }
  }
}

/* Context Menu (sichtbar bei Hover) */
.channelTextArea_f75fb0>.scrollableContainer__74017:hover .buttons__74017 {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transition-delay: 0s;
}

.channelTextArea_f75fb0 .buttons__74017 {
  position: absolute;
  background: var(--background-surface-high);
  background-color: color-mix(var(--background-surface-high) 80%, transparent 20%);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: var(--shadow-high);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: fit-content;
  gap: 4px;
  min-width: 180px;
  visibility: hidden;
  opacity: 0;
  padding: 6px;
  top: unset;
  bottom: calc(100% - 18px);
  right: 12px;
  z-index: 10;
> div {
    width: 100%;
  }
}

.custom-theme-background .channelTextArea_f75fb0 .buttons__74017 {
  border-color: var(--border-strong);
}

/* Context Buttons */
.buttonContainer_e6e74f {
  width: 100%;
  background: none !important;
}
.custom-theme-background .channelTextArea_f75fb0 .buttons__74017 {
  border-color: var(--border-strong);
}

.channelTextArea_f75fb0 .button__74017, .button_e6e74f {
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--text-subtle);
  justify-content: left;
  flex: 1 1 auto;
  padding: 8px;
  transition: none;
  &:hover {
    background: var(--background-mod-subtle);
  }
  .lottieIcon__5eb9b, .iconContainer_c0c49a {
    width: 24px !important;
    height: 24px !important;
  }
  .spriteContainer__04eed {
    --custom-emoji-sprite-size: 24px !important;
  }
  .spriteGreyscale__04eed {
    background-color: var(--text-subtle);
  }
}```

onyx canyon Dec 16, 2025, 2:29 PM

#

this should be using the new color variables now

gentle edge Dec 16, 2025, 3:01 PM

#

onyx canyon this should be using the new color variables now

not working at all now

#

tried it in a theme file and in quick css

onyx canyon Dec 16, 2025, 3:04 PM

#

stable client can't use it yet, only ptb and canary

gentle edge Dec 16, 2025, 8:39 PM

#

onyx canyon stable client can't use it yet, only ptb and canary

ah ok

broken jungle Dec 17, 2025, 12:27 PM

#

Is there a way to remove the bar between the "Open sticker picker" and "Apps" options in the context menu?

junior laurel Dec 17, 2025, 2:14 PM

#

Many CSS things are no longer working for me.

#

and it's absolutely terrifying to use.

brittle drum Dec 17, 2025, 2:39 PM

#

junior laurel Many CSS things are no longer working for me.

#1450155350941630495 message

prisma nacelle Dec 19, 2025, 11:10 AM

#

this causes you to be unable to cl,ick on the chatbar to move the text cursor or highlight text

grizzled plover Jan 10, 2026, 12:51 AM

#

is there any way to close the menu after opening it? Maybe create an invisible div encasing the button, menu, and surrounding area that has a hover trigger so the menu gets hidden after moving the cursor off?

brittle drum Jan 10, 2026, 7:23 AM

#

grizzled plover is there *any* way to close the menu after opening it? Maybe create an invisible...

you can't create a div with css

terse breach Jan 16, 2026, 3:41 PM

#

everything is on fire and sucks...
yea dont work for me

sweet nymph Jan 26, 2026, 1:03 AM

#

will this snippet be updated?

junior laurel Jan 26, 2026, 1:23 AM

#

Not by me

#

I can only try it

junior laurel Jan 26, 2026, 10:40 PM

#

/*Textarea Patches*/
.form_f75fb0 {
    z-index: 0;
}

.base_b88801 {
    z-index: -1;
}

.channelTextArea_f75fb0 .scrollableContainer__74017 {
    overflow: visible;
}

.channelTextArea_f75fb0 .textArea__74017 {
    grid-area: textArea;
    height: unset !important;

    >div {
        max-height: 144px;
        overflow: hidden scroll;

        &::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            background-clip: padding-box;
            border: 4px solid transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: hsl(var(--primary-800-hsl)/.6);
            border-radius: 8px;
        }
    }
}

/* Context Menu (sichtbar bei Hover) */
.channelTextArea_f75fb0>.scrollableContainer__74017:hover .buttons__74017 {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transition-delay: 0s;
}

.channelTextArea_f75fb0 .buttons__74017 {
    position: absolute;
    background: var(--background-surface-high);
    background-color: color-mix(var(--background-surface-high) 80%, transparent 20%);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: var(--shadow-high);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    height: fit-content;
    gap: 4px;
    min-width: 180px;
    visibility: hidden;
    opacity: 0;
    padding: 6px;
    top: unset;
    bottom: calc(100% - 18px);
    right: 12px;
    z-index: 10;

    >div {
        width: 100%;
    }
}

.custom-theme-background .channelTextArea_f75fb0 .buttons__74017 {
    border-color: var(--border-strong);
}

/* Context Buttons */
.buttonContainer_e6e74f {
    width: 100%;
    background: none !important;
}

.custom-theme-background .channelTextArea_f75fb0 .buttons__74017 {
    border-color: var(--border-strong);
}

.channelTextArea_f75fb0 .button__74017,
.button_e6e74f {
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--text-subtle);
    justify-content: left;
    flex: 1 1 auto;
    padding: 8px;
    transition: none;

    &:hover {
        background: var(--background-mod-subtle);
    }

    .lottieIcon__5eb9b,
    .iconContainer_c0c49a {
        width: 24px !important;
        height: 24px !important;
    }

    .spriteContainer__04eed {
        --custom-emoji-sprite-size: 24px !important;
    }

    .spriteGreyscale__04eed {
        background-color: var(--text-subtle);
    }
}```

terse breach Jan 28, 2026, 1:10 PM

#

welll, it aint perfect but it does the job lol

terse breach Jan 28, 2026, 1:25 PM

#

i... placed the original back in after fiddling with others for a while n now it just works... I LITERALLY TRIED THE SAME THING EARLIER i cant......

#Chat Bar Context Menu