**Collapsible message actions**

[keen mountain]

Small fix for the reaction frecency experiment

[class^=buttonsInner_]:not(:hover)>:is([role=button]:not(
  :has(>svg>[d^="M4 14a2 2 0 1 0 0-4 2 2"]), [class*=dangerous_]
), [class^=separator_]) {
  display: none;
}```
Alternate
```css
[class^=buttonsInner_]:not(:hover,:has([d^="M16.32 14.72a1 1 0 0 1"]))>:is(
  [role=button]:not(:has(>svg>[d^="M4 14a2 2 0 1 0 0-4 2 2"])), [class^=separator_]
) {
  display: none;
}```

[idle yacht]

Yo, I really like this.
Made a small tweak for myself, keeping the reply and emote buttons always visible:

[class^="hoverBarButton_"]:has([d="M2.3 7.3a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.4L5.42 9H11a7 7 0 0 1 7 7v4a1 1 0 1 0 2 0v-4a9 9 0 0 0-9-9H5.41l3.3-3.3a1 1 0 0 0-1.42-1.4l-5 5Z"]),
[class^="hoverBarButton_"]:has([d="M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22ZM6.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm11 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-9.8 1.17a1 1 0 0 1 1.39.27 3.5 3.5 0 0 0 5.82 0 1 1 0 0 1 1.66 1.12 5.5 5.5 0 0 1-9.14 0 1 1 0 0 1 .27-1.4Z"]) {
    order:1;
    display: flex !important;
}

just add this before your css snippet

[keen mountain]

you don't need the full d btw

[idle yacht]

it's better for performance, no?

checking = is faster than ^=, and much faster than *=

[keen mountain]

uhh...
probably?
but probably in nanoseconds or very low milliseconds

[idle yacht]

not a single query, but many do add up noticeably IMO (but I've got 1,900+ lines of QuickCSS and not a particularly powerful computer)

[keen mountain]

true

[keen mountain]

also, i think it should be display: flex

[idle yacht]

D'oh!

thanks

[keen mountain]

found this, and seems like ^= might be more efficient than =?
which would kind of make sense, because if each character is checked individually, when testing ^=, as soon as it matches, it's done, but for = it has to check the whole value?
(not sure what it means by unknown attribute, since that doesn't seem to be something that exists)

[idle yacht]

hmm, I'm not quite sure why you're getting that result. = should be the fastest. I haven't actually looked into how it checks internally, but I'd imagine it compares against a precomputed hash or some sort, instead of rolling character by character.
If a value doesn't immediately match, it can be thrown away instead of continuing the comparison like *=. Here are my results on the same test:

Oh, and "unknown attributes" are just attributes that aren't defined by spec, like href, title, etc

[keen mountain]

yeah checking against a hash or something would probably make sense, but i wonder how it would change when comparing a long attribute value with = vs a shorter one with ^=

[keen mountain]

what's [a] though?

[idle yacht]

it's not anything, hence the "unknown attribute"

kinda a weird example to use because it is a tag lol

[keen mountain]

oh so it's just one that won't have a match?

wait no a custom attribute name

[idle yacht]

yeah

modified the js of the archived page to increase the number of selectors to 20,000 and the DOM to 10,000 divs

added *= selector to the js 😬

this page has a lot of internet archive cruft on it, I'm sure it can be decoupled but I don't have the time at the moment

🤷 browsers have gotten so optimized I'm getting single digit percentage point differences when re-running the test

the real pain point is nesting selectors like *= and has() and not(), etc. I remember has(:hover) being particularly laggy

I'm an idiot, forgot to reset cache on the last test. Here's a more accurate one:

[keen mountain]

Oh the image i sent was probably with cached stuff

[frosty tide]

Why not working?

[glad river]

works_on_my_machine

[keen mountain]

What isnt working?

[frosty tide]

Just doesn't compact all that stuff unless I hover over it.

[keen mountain]

huh

it does the opposite

[keen mountain]

it should be collapsed until you hover over it

[frosty tide]

Yeah whatever. It doesn't do that. It's just there as it always is. I first thought I might have the "Show all message buttons" plugin on but it was off...

[keen mountain]

but it's collapsing when you hover over it?

[frosty tide]

No.

[keen mountain]

oh

try disabling other themes

probably a theme conflict

[frosty tide]

Hmm I have a AMOLED theme on. That's the only one. Could it be that other custom CSS is interfering?

[keen mountain]

do you have other stuff in quickcss?

[frosty tide]

Yeah a good amount.

[keen mountain]

if so, copy that somewhere else to test only this one

[frosty tide]

Will do that when I'm back on my PC.

[keen mountain]

id guess that amoled would just be changing color variables, but try with that of too

[frosty tide]

Yeah. Can I ping you when I got more info?

[keen mountain]

sure, but I might go to bed by then

[keen mountain]

did you try it yet?

[frosty tide]

Nah, didn't get to it. I'll inform you when I did it. I have set myself a reminder.

[frosty tide]

So it looks like this now. Idk what I did but it looks better now.

[keen mountain]

use this

[keen mountain]

@frosty tide ^

[atomic plank]

is it possible to have a smooth transition there?

[keen mountain]

possibly
what kind do you want?

I didn't add it because effort and the message actions don't have a transition to appear so thought it might look out of place

[atomic plank]

like when it expands it smoothly slides out to full width

[keen mountain]

sort of scuffed version:

[class^=buttonsInner_]:hover {
  max-width: 320px
}
[class^=buttonsInner_] {
  max-width: 32px;
  overflow: hidden;
  transition: max-width 0.5s ease;
}```
might be able to figure out how to make it better tomorrow, but it's late now so i sleep

(the main problem right now is that it's the left most thing that's showing instead of the right most)

[atomic plank]

yo nice work nonetheless!

[jovial iron]

I wrote a similar thing to hide the message actions completely, but noticed that if I right click -> add reaction it shows up in the top left of the window instead of next to the message. I'm not skilled enough in css to figure out if/how that can be fixed, got any tips?

[keen mountain]

I think that's unrelated to the css?
I was experiencing that a few days ago or so, but im not anymore
pretty sure it was just a temp discord bug?

[valid reef]

Hello i'm kinda garbage, but i manage to do the next css to clean out the previous code by 3 duotrigintillion

( i'm sure it could be better, but lets hope in myself)

[class^=buttonsInner_] {
  max-width: 34px;
  overflow: hidden;
  transition: max-width 0.3s ease-in;
}
[class^=buttonsInner_] > [role=button] {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

[class^=buttonsInner_] > [role=button]:nth-last-child(1) {
  position: absolute;
  opacity: 1;
  right: 0;
  margin: 2px;
}
[class^=buttonsInner_]:hover {
  max-width: 320px;
}
[class^=buttonsInner_] > [role=button]:nth-last-child(2) {
  margin-right: 28px;
}
[class^=buttonsInner_]:hover > [role=button] {
  opacity: 1;
}

(will try to combine it with Better Message Buttons later (without aria-label))

hope to have good feedback :)

[keen mountain]

nice
why'd you use these margins though?
setting the 34 and 28 to 32 and removing the 2px makes it more like normal
oh I had the old message actions (before the frecency experiment), those margins seem right with the experiment enabled
34 should be 33.37 though i think

also you could use some nesting to clean it up a bit, and you can use :last-child instead of nth-last-child(1)

[keen mountain]

Made a version that doesn't use opacity
the hover color is slightly scuffed because --background-modifier-hover that it normally uses for hover is --primary-500 at 30% opacity
the resulting color from color-mix() is slightly different than opacity sadly
(with opacity: #302e36 with color-mix: #302f37)
new message actions:

[class^=buttonsInner_] {
  max-width: 33.37px;
  overflow: hidden;
  transition: max-width 0.3s ease-in;
  >[role=button]:hover {
    background: color-mix(in srgb, var(--primary-500) 30%, var(--background-nested-floating)) !important;
    
  }

  >[role=button]:last-child {
    position: absolute;
    right: 0;
    border-radius: 8px;
    border: 2.5px solid var(--background-nested-floating);
    border-left: transparent;
    background: var(--background-nested-floating);
  }
  >[role=button]:nth-last-child(2) {
    margin-right: 28px;
  }
}
[class^=buttonsInner_]:hover {
  max-width: 320px;
}```
old message actions:
```css
[class^=buttonsInner_] {
  max-width: 32px;
  overflow: hidden;
  transition: max-width 0.3s ease-in;
  >[role=button]:hover {
    background: color-mix(in srgb, var(--primary-500) 30%, var(--background-primary)) !important;
  }

  >[role=button]:last-child {
    position: absolute;
    right: 0;
    background: var(--background-primary);
  }
  >[role=button]:nth-last-child(2) {
    margin-right: 32px;
  }
}
[class^=buttonsInner_]:hover {
  max-width: 320px;
}```

also thanks. i forgot about :last-child when making the original css snippet, so i improved the original css using that

[keen mountain]

@atomic plank you can use this (or the one i sent below it if you dont like the transparency)

[valid reef]

Will look this tonigh (it's 12am at my place). i'm really bad at css, still learning

I didn't know nesting exist

[valid reef]

The margin 2px is because of the Web site, to be like it

And the margin right is to compensate the button whose got unested

[keen mountain]

yeah i just got confused because i changed an experiment to use the legacy message actions that look like this
but then i realized it was for the new version. that's why i crossed it out

[valid reef]

The value (outside 2px) are completly random btw

Just look good to me, and it was 2am when i did it x)

[keen mountain]

Ah. it is semi new to css (added like a year ago i think).
it can be quite useful
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

[valid reef]

Will look after it when i got back home

Thanks a lot

[atomic plank]

oh nice!

[valid reef]

i did look after :)

but why are you keeping things like opacity: 1 if you don't implement it?

[valid reef]

/*Collapsible message actions by Le Chat De l'Encre*/
:root{
  --chat--cma-box-size: 34px;
  --chat--cma-border-size: 2.5px;
  --chat--cma-transition-duration: 0.3s;
}

[class^=buttonsInner_]:hover {
  max-width: 320px;
  > [role=button] {
    opacity: 1;
  }
}

[class^=buttonsInner_] {
  max-width: var(--chat--cma-box-size);
  overflow: hidden;
  transition: max-width var(--chat--cma-transition-duration) ease-in;

  > [role=button] {
    opacity: 0;
    transition: opacity var(--chat--cma-transition-duration) ease-in;
  }
  >[role=button]:hover { /* Trust the process x) */
    background-color: color-mix(in srgb, var(--primary-500) 30%, var(--background-nested-floating)) !important;
  }
  > [role=button]:nth-last-child(2) {
    margin-right: calc(var(--chat--cma-box-size) - calc(var(--chat--cma-border-size)*2));
  }
  > [role=button]:last-child {
    position: absolute;
    opacity: 1;
    right: 0;
    border-radius: 8px;
    border: var(--chat--cma-border-size) solid var(--background-nested-floating);
    border-left: transparent;
    background-color: var(--background-nested-floating);
  }
}

My final worksheet

i'm keeping opacity cause transition look good for me :)

[keen mountain]

forgot to remove lol

[frosty tide]

Could any of you give me the newest/best CSS that's here?

[frosty tide]

Bump

[keen mountain]

use one of these if you want it to be animated
otherwise use the main one
slideout: #1304647342284214282 message
transparency and slide out: #1304647342284214282 message

[valid reef]

;)

[amber field]

How can I add shift to that

tes

[valid reef]

What do you mean ?

[amber field]

Like with the original css script it will show when you hold shift and you are hovering over a message

And i want to add that to your one

Idk how though

[valid reef]

It's a discord native things

Idk how it work

Ask obsidianninja11 :)

[keen mountain]

by changing the top one to
the :has() checks if the Copy Link button is there

[class^=buttonsInner_]:is(:hover, :has([d^="M16.32 14.72a1 1 0 0 1"])) {
  max-width: 320px;
  > [role=button] {
    opacity: 1;
  }
}

the opacity is a bit buggy with the emoji after letting go of shift though
might be able to be fixed, but don't have time right now and probably not today

[gritty geyser]

wonder if this same hiding could be applied to the toolbar icons in the message box

[keen mountain]

good idea

[class^=textArea_]+[class^=buttons_]:not(:hover)
>div:not(:has(>[class^=emojiButton])) {
  display: none;
}

sadly doesn't work quite as well as message actions

since it changes the width of the text
although maybe i could change it to not do that and just cover the text

[idle yacht]

You could make the buttons overlay vertically instead

I write CSS for exactly that actually a while back

Am on mobile rn though, I can post it tomorrow after work

[gritty geyser]

yeah, with it folding out, covering text shouldn't be an issue... idk how it wpul really be possible though

[keen mountain]

position: absolute; does it

[keen mountain]

i think this is pretty much it

[class^=textArea_] {
  margin-right: 34px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    background-color: color-mix(in oklab, var(--channeltextarea-background) 75%, transparent);
    backdrop-filter: blur(3px);
    border-radius: 8px;
    &:not(:hover)>div:not(:has(>[class^=emojiButton])) {
      display: none;
    }
  }
}

[gritty geyser]

that is a work of art

[keen mountain]

I think it's even better with the send message button
snippet soon™️

[amber field]

Thank you

[keen mountain]

oh could you send this?

i assume you mean something like changing it flex-direction to column/column-reverse

[keen mountain]

and improved snippet that works with send message button @gritty geyser:

[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;
    }
    /* Fix send message button */
    &:not(:hover)>[class^=separator_] {
      margin-left: 0;
      &::before { display: none; }
      button>div { margin-left: 8px; }
    }
  }
}

i'll probably make another post in #🎨-css-snippets for this

[gritty geyser]

ooooh, thats really nice

[valid reef]

Hey

I would try something tonigh

[keen mountain]

what are you going to try?

[valid reef]

I dont know x)

I will see

[keen mountain]

oh lol

[trail gale]

if anyone wants to enable edit for own messages as well

[class^="hoverBarButton_"]:has([d="m13.96 5.46 4.58 4.58a1 1 0 0 0 1.42 0l1.38-1.38a2 2 0 0 0 0-2.82l-3.18-3.18a2 2 0 0 0-2.82 0l-1.38 1.38a1 1 0 0 0 0 1.42ZM2.11 20.16l.73-4.22a3 3 0 0 1 .83-1.61l7.87-7.87a1 1 0 0 1 1.42 0l4.58 4.58a1 1 0 0 1 0 1.42l-7.87 7.87a3 3 0 0 1-1.6.83l-4.23.73a1.5 1.5 0 0 1-1.73-1.73Z"])

add this as well

though i doubt anyone who saw that and added it, will see this

[analog scaffold]

is there any version working with Better Message Buttons currently?
Asking because the main css for the hover one doesn't quite work with BMB for me, I can't click on the big rightmost button (the edit button in that specific case):

[valid reef]

No :(

I've dont get no time for that

But if something else want to make it 😉

Sorry

[keen mountain]

you mean my original css?

it does sort of work with it

oh wait i forgot to read

[keen mountain]

This should work

[class^=buttonsInner_]:not(:hover, :has([d^="M16.32 14.72a1 1 0 0 1"])) {
  visibility: hidden;
  >div[aria-label="Reply"], >div[aria-label="Edit"] {
    visibility: visible;
  }
}

delete the , :has([d^="M16.32 14.72a1 1 0 0 1"]) if you dont want it to also show on pressing shift

[analog scaffold]

this lets me hit reply but not the other buttons on the left now (opposite problem). Very rarely it works but most times it doesn't

You can see it working only 2 times when hovering from the reply button to the others on the left, all the other times it doesn't

[keen mountain]

oh yeah

[keen mountain]

[class^=buttonsInner_]:not(:hover, :has([d^="M16.32 14.72a1 1 0 0 1"]))>:is(
  [role=button]:not(div[aria-label="Reply"], div[aria-label="Edit"], :last-child), [class^=separator_]
) {
  display: none;
}

well probably would want hovering over edit/reply to not uncollapse the other buttons, but it's late so not gonna try that

and it would require reworking the snippet quite a bit

[analog scaffold]

it's ok, like this is already a massive improvement! Thank you so much and sorry for the bother

[keen mountain]

you could also remove the , :last-child if you want it a bit more compact. then it's just a small line on the left

[wanton hornet]

@keen mountain sorry for pinging, can you make an update to this snippet, this has been broken after the visual refresh push (I'm using old ui), the behavior is the actions simply won't show up

[keen mountain]

[class^=buttonsInner_]:not(:hover)>:is(
  [role=button]:not(div:last-of-type), [class^=separator_]
) {
  display: none;
}

[wanton hornet]

Tyvm 🙏

[keen mountain]

discord made an update
here's the fix
alternate version isn't possible anymore

.buttonsInner__5126c:not(:hover)>*:not(:nth-last-child(2)) {
  display: none;
}

[keen mountain]

Here's an almost alternate version (show when holding shift)
The first 3 buttons only show when hovering, but the rest will show on shift

.buttonsInner__5126c:not(:hover)>:is(.separator_f84418~span:not(:nth-last-child(2)), :nth-child(-n+6), .separator_f84418) {
  display: none;
}

[keen mountain]

oh actually that messes up when you can't react

[naive mango]

discord just broke this snippet

[gritty geyser]

just renamed a class:

._5126c0cd07f243a0-buttonsInner:not(:hover)>*:not(:nth-last-child(2)) {
  display: none;
}

working for me
( changed .buttonsInner__5126c → _5126c0cd07f243a0-buttonsInner )