Mention/Replying Gradient Highlight

[autumn fable]

looks seriously great, just wondering if it's possible to always correct itself by using the default background color? (I'm greedy and my CSS list is huge)

[calm swan]

Looks nice

[rose dove]

wdym correct itself? in what way?

[autumn fable]

the color :')

I just really want to use the import so my css list is a lil shorter

[rose dove]

u could technically open a github repos of your own with the modified CSS

and import that?

[autumn fable]

https://tenor.com/view/boy-falling-to-his-knees-gif-8063694406439049394

fair nuff

[rose dove]

idk how u could keep the import otherwise tbh

[rose dove]

ty btw

[mystic tide]

This snippet seems to works for me, you just have to edit some color values to make it fit your theme

.mentioned__5126c::after {
    background-image: linear-gradient(to right, #ba6d14, #393a41) !important;
}
.replying__5126c::after {
    background-image: linear-gradient(to right, #3a48a3, #393a41) !important;
}
.backgroundFlash__5126c[data-flash="true"]::after {
    background-image: linear-gradient(to right, #3a48a3, #393a41) !important;
}
.backgroundFlash__5126c[data-flash="false"]::after {
    background-image: linear-gradient(to right, #3a48a3, #393a41) !important;
}``` (i don't know css)

[peak wren]

It should be quite easy to make it obey your theme colors using variables

[rose dove]

prbly, i just dont know the variable names for theme colors

[twin phoenix]

betterdiscord docs but should still apply (probably)

https://docs.betterdiscord.app/themes/introduction/environment#discord-s-variables

[graceful apex]

.mentioned__5126c::after {
  opacity: 1;
  background-image: linear-gradient(to right, var(--background-mentioned), var(--background-base-lower));
}

.replying__5126c::after {
  opacity: 1;
  background-image: linear-gradient(to right, var(--background-message-highlight), var(--background-base-lower));
}

add this under the import to use the corresponding variables

[autumn fable]

[sinful patio]

Is there a way to make the gradient go from color to transparent? I think it'd be background-image: #colorhere, rgba(????); but I don't know the exact way to do it. And how to adjust how fast it fades?

This is really cool though, I love this. I hate the ping color in most themes so being able to make it exactly how I like is awesome.

[rose dove]

I'll try changing this, if it works well, ill apply it to the GitHub

[peak wren]

it's really easy to find them
just open devtools and go to the variable it uses for the background

also btw, this gets rid of the hover color for replied msgs
don't think I tested mentioned msgs, but probably there too

all you need is to change the 4 variables

[rose dove]

safe to say, this works well, but the color to the left is barely visible, which is why i made it brighter in the first place

ill just change the right side's value to the variable

[graceful apex]

You should be able to do some color mixing to increase the opacity

[rose dove]

possible, but wut's the point? if its gonna look almost the same

@autumn fable @peak wren @mystic tide i updated the github to have the right side of the gradient be able to adjust to your theme's background color

[sinful patio]

After a lot of fiddling around, I have this:background-image: linear-gradient(to right, #321414 1%, rgba(0,0,0,0) 50%, rgba(0,0,0,0)); (adjust the #321414 for your preferred initial color or variable, and the 1% and 50% for how fast you want the gradient to fade to transparent, I've got it at a very fast fade)

THANK YOU, Burning Stone, for the initial setup and dom for the customization bit to make this work!

[graceful apex]

I mean tbh the opacity is a separate tweak from the gradient

[rose dove]

this is with 1 opacity, the default color is just not vibrant enough

but u can do it on your end, if u feel like it

[rose dove]

headpat2

[unique forge]

how to change this line color?

[twin phoenix]

this is controlled by the --info-warning-foreground variable
i dont know where this is used, so ill give you two options

possibly recolors other things:

:root {
  --info-warning-foreground: #000000;
}

only recolors the line:

.mentioned__5126c:before {
  background: #000000;
}

replace the #000000 with your color of choice

[unique forge]

thank you, both of them work and it does not matter where to write them.

[spiral estuary]

found something broken

[burnt iron]

(built off of this)
isn't this all you need?

(its going to-left to line things up nicely heh)

[graceful apex]

i guess so, I just ripped the selectors from the raw file quickly

[burnt iron]

(oh also idk if that message class check is needed- just felt smart to add SLIGHTLY more insurance it doesnt hit unintended elements)

[graceful apex]

wonder if you could apply this same gradient for when you hover a message

.message__5126c:hover {
    background: linear-gradient(
        to left,
        transparent,
        var(--background-message-hover)
    ) !important;
}

[rose dove]

did u add anything beyond the GitHub import?

[spiral estuary]

nah

probly has smth to do with the message markdown as theres also ones where it aint fricked

[rose dove]

I'm pretty sure adding more ::after's beyond the github import can do strange things cuz it adds elements instead of editing them

correct me if I'm wrong

[rose dove]

this prbly works, I just didn't do it cuz it was originally meant for personal use

I just posted it for fun

[graceful apex]

oh this is just for generic hovers as like an addon to the replies and mentions

like the gray hover

[rose dove]

yeah I know wut u mean
I just didn't implement it cuz I didn't care enough, as it was for my personal use

[glad trench]

it appears over the wallpaper and not fade completely

can I make it fade sooner or something like that?

[rose dove]

i think u can change the right side of the gradient to be transparent

[glad trench]

yes I want to do that but how

[rose dove]

@glad trench i think this person did it with this

[glad trench]

it's perfect but I'd like to use it with the normal colors of discord

if you can just send me the hex codes that'd be great

@rose dove

[rose dove]

u want this faded default orange @glad trench ?

[glad trench]

yeah

and dw I already got it just forgot to tell ya

gonna post it rn

/*Mention/Replying Gradient Highlight Colors*/
.mentioned__5126c::after {
  opacity: 1;
  background-image: linear-gradient(to right, #2a1b0b 1%, rgba(0,0,0,0) 50%, rgba(0,0,0,0));
}
.replying__5126c::after {
  opacity: 1;
  background-image: linear-gradient(to right, #171b37 1%, rgba(0,0,0,0) 50%, rgba(0,0,0,0));
}
/*Mention/Replying Gradient Highlight Colors*/

[peak wren]

I think an approach like this might be a bit better, but for some reason the gradient isn't being smooth
but this'll use theme colors

:root {
  --mrg-fade-color: var(--background-base-lower);
  --mrg-fade-percent: 50%;
}
.message__5126c.mentioned__5126c {
  background-image: linear-gradient(to right, var(--background-mentioned) var(--mrg-fade-percent, 50%), var(--mrg-fade-color, transparent)) !important;
  &:hover {
    background-image: linear-gradient(to right, var(--background-mentioned-hover) var(--mrg-fade-percent, 50%), var(--mrg-fade-color, transparent)) !important;
  }
}
.message__5126c:is(.highlighted__5126c, .replying__5126c) {
  background-image: linear-gradient(to right, var(--background-message-highlight) var(--mrg-fade-percent, 50%), var(--mrg-fade-color, transparent)) !important;
  &:hover {
    background-image: linear-gradient(to right, var(--brand-10a) var(--mrg-fade-percent, 50%), var(--mrg-fade-color, transparent)) !important;
  }
}

[rose dove]

i avoided the --background-mentioned type of variables on purpose cuz its not vibrant enough for my taste
u can change it on your end

[peak wren]

well then you could use other variables instead

like the variables background-mentioned is defined by

[graceful apex]

yeah cuz your opacity is .2 😭

[rose dove]

@graceful apex

[graceful apex]

oh i guess

im using the midnight theme so its more visible for me

[rose dove]

I committed a change in background flash part of the code to attempt to fix a bug where discord jumps to a random message way up high on chat updates (new messages), it causes Discord to re-render the whole thing if the animation is active

which causes the random jump

should work now, on my end it does, if it still happens i might changes again

[burnt iron]

thoughts on this absolue chaos ?

wait- already realizing that :has message was from a point where it wasnt checking for message__ lol

[rose dove]

are u trying to make the hover gradient too?

🤔

[burnt iron]

yea ig

[queen torrent]

is this possible to make this highlight gradient too?

[rose dove]

my import does

[rose dove]

i fixed a bug where the background flash highlight would override the mentioned highlight

by changing the name of the actual class being used for the flash
its not backgroundFlash__5126c but its actually flash__03436

[queen torrent]

now it works thanks

[rose dove]

👌

[glad trench]

why is it like this when it should be like this

both message are from the same person in the same channel and I took both screenshots without changing anything at all

[calm swan]

Does one message have a thread and the other doesn’t?

[glad trench]

yeah

[calm swan]

Yeah I noticed that too

[glad trench]

is there any solution for it?

[rose dove]

nothing in my code changes depending on thread

I have no clue why this happens to you, not even sure if it's a thing on my end too

first thing I'd check is, if u remove my import, does the default highlight still appear in offset like that

[glad trench]

it appears like this

[rose dove]

that's without my import, right

if so, smth else is screwing that up

[glad trench]

I think that line of the thread is acting like a border that's what's making the issue

[rose dove]

not sure if it's a discord thing or a custom theme thing on your end

[rose dove]

i fixed it

found the issue

uploading to github soon

[rose dove]

uploaded the fix now, should be fine on your end as well

[glad trench]

it's both good and bad

also sorry for not replying earlier I wasn't at home

rn the thread thing is fixed

but it broke the opacity thing we did before

[glad trench]

this one

[rose dove]

remove the ::after from that code block

the 2 instances of the ::after

[glad trench]

yes now it works great

[rose dove]

AnisThumbsUp

[glad trench]

can you add this to the gradients too?
it's the editing highlight

[spiral estuary]

seems it also does this

[rose dove]

that should already be fixed

did u add any code on top?

[spiral estuary]

nah

[rose dove]

u only have the import?

[spiral estuary]

Yeah

[rose dove]

when does it happen?
does it happen when u hover over it? or wut

[spiral estuary]

nah just slight display issue

[rose dove]

cuz it doesnt happen on my end

[spiral estuary]

huh

not sure might’ve been some glitch

[rose dove]

cant rly help u if u dont provide me some details
can u show me your QuickCSS Editor?

cuz from wut ive dealt with this issue, the problem is using the ::after in the code

ive already removed all ::after's

[spiral estuary]

@import url("https://raw.githubusercontent.com/BurningStoneDiscord/DiscordHighlightGradient/refs/heads/main/MentionReplyingFancyGradient.css");

.mentioned__5126c::after {
    background-image: linear-gradient(to right, #ba6d14, #393a41) !important;
}
.replying__5126c::after {
    background-image: linear-gradient(to right, #3a48a3, #393a41) !important;
}
.backgroundFlash__5126c[data-flash="true"] {
    background-image: linear-gradient(to right, #3a48a3, #393a41) !important;
}
.backgroundFlash__5126c[data-flash="false"] {
    background-image: linear-gradient(to right, #3a48a3, #393a41) !important;
}

[rose dove]

see

u have ::after's

i knew it wasnt just my import

u added on top of it

remove the ::after's

    background-image: linear-gradient(to right, #ba6d14, #393a41) !important;
}```
it should just be like this

[spiral estuary]

did so and uhh

[rose dove]

yeah u gotta control the opacity in the color codes

i use the RGBA format for that

has an opacity variable

if ur having trouble, just remove everything past my import

i already set up some nice colors by default

[spiral estuary]

whats the settings you use

[rose dove]

the code is in the link that the import uses

u can see there

[spiral estuary]

aight fixed it now its back to normal

[rose dove]

AnisThumbsUp

[glad trench]

anyway to add this to the gradient thing

this appears when you jump to a message from a reply

[glad trench]

this one too please

[rose dove]

I applied a fix to the github because the latest discord update broke the gradient when hovering

[rose dove]

I applied a fix for today's discord update as well that changed all the CSS class names

[hot quiver]

It seems like I cant change the colors

[hot quiver]

Any idea why changing colors when puttin the raw code without import in custom css doesnt change the colors?

[rose dove]

u must be doing smth wrong

show me what you're trying to change

[hot quiver]

Mainly the rgb values

The orange ones

So the default discord color

[rose dove]

the orange color i applied in the script is actually a custom one
a brighter one, cuz discord's orange is barely visible imo

u should be able to change it

[hot quiver]

Well yea I change it to red with the color slider

But it keeps the orange

[rose dove]

again, u must be doing smth wrong

when u use the color slider, does it change the value in the code itself?

[hot quiver]

Yes

It changes to 255, 0, 0, 0.2

[rose dove]

are u using both the import AND the raw code at the same time?

[hot quiver]

I tried with both I believe

[rose dove]

only use the raw code

do not use the import if u want a custom color

[hot quiver]

ah ye that worked, but that small stripe on the side, can that be changed?

Oh found it

[rose dove]

im pretty sure the class name for that is
._5126c0cd07f243a0-mentioned::before

[hot quiver]

Yap

    background: rgba(255, 0, 0, 0.3)
}```

[rose dove]

should work yeah

[hot quiver]

It is

[rose dove]

anisthumbsup

[untold crown]

@rose dove Do you happen to have the old version still? Discord reverted the classes again

[peak wren]

try using this regex replace #🎨-theme-development message

[untold crown]

that worked, thanks!

[rose dove]

I'll update the github