Chat Related Alerts at Top

[royal perch]

@austere island wanna try this?

[austere island]

yep this works too. btw u missed a few syntax in the import url

[naive pilot]

dear. this doesn't work at all

okay wait

This DOES work.

I tried it with none of my CSS and it works

Okay... fixed it

For whomever this plugin doesn't work

just put it at the top priority, i.e line #1

[round nexus]

Imports have to be at the top of a css file

That’s why

[royal perch]

midnight breaks it because this uses hardcoded widths

[naive pilot]

ooh.

There are other Imports in some css snippets as well

do i copy them to the top?

[naive pilot]

Okay. Just copied... and uhm, I just found out that I was missing out on so many snippets 😭

[round nexus]

https://tenor.com/view/star-trek-darmok-his-eyes-uncovered-jalad-gif-16441088

[naive pilot]

Ohkay...

A bug

If I remove the uh, Import line, it returns to normal.

[royal perch]

fixed width issues, looking into it

[naive pilot]

(line removed)

[naive pilot]

thanks 🤍

[royal perch]

pushed an update, wanna check it out?

[naive pilot]

Sure

Yup fixed ♥️

[royal perch]

hey all! just pushed another change that allows you to update the border-radius of the alerts + an option to make them float (not be forced to the top), the variables are here

:root {
    /* Set to 1 if you want them to float  *\
    |*      Recommended while using        *|
    \*      Midnight/Rounded Themes        */
    --craat-popout: 0; /* Default = 0 */
    /* Change the border radius *\
    \*      for the alerts      */
    --craat-border-radius: 16px; /* default: 16px */
}

[rapid wigeon]

Hello! this is my first time interacting with CSS coders so don't take my words to heart 💔

I believe you're missing a .visual-refresh that spans around the main css code starting from .jumpToPresentBar all the way to the end of the code that prevents --craat-border-radius from being applied to both Mark as Read and Jump to Present chat alerts.

Could be a problem on my end however so I am not entirely confident in my own answer either, probably worth checking it out!

pardon me if I'm not clear enough but this is what I'm referring to visually

[naive pilot]

I am no dev, but the thingy that touches the top is fine for me, might be a theme issue idk

[rapid wigeon]

odd.. I'm also no theme dev but I have miniature experience from tinkering around and reading on attributes on w3schools

even with just that css-snippet applied and nothing else, it still doesn't apply the border-radius properly without adding .visual-refresh to the css

I mean, I suppose for those who do run into issues this could count as future-proofing? unsure.
and weirdly it works on the old discord ui but not on the new one for me unless I add .visual-refresh into the code

[rapid wigeon]

Ok after messing around for like, 1 more minute, it doesn't show any issue with yours as yours is only displaying the new messages alert.

Meanwhile the Jump to Present Alert does not get the border-radius like New Messages Alert does.

So unless New messages alert is there, Jump to Present will not be given the border-radius properly without it unless .visual-refresh {} is added to the css.

[naive pilot]

Let me quickly confirm it

okay... 2 birds in one stone ahh

You are right in your hypothesis

The Jump to present one indeed doesn't connect to the top when its alone

And the 2nd bug I found is that, the font (if that is supposed to be same) is different, and the alignment of the two icons is not the same.

[rapid wigeon]

I believe the 2nd bug you mentioned is from discord's end, because I had observed on the stock discord theme it was also like that, different font, font color.

and the Button mis-alignment is a sub-product of Jump to Present being placed elsewhere + differently sized so.

[naive pilot]

Makes sense

[rapid wigeon]

But personally for me I am unbothered by the font-difference and mis-alignment as they would most likely be a lot more code to fix them.

I've made the fix locally on my end but basically it'd look like this:

  The actual code
}```
example images to show what I really mean

[royal perch]

what is your --craat-popout set as

[royal perch]

obviously, that's how nesting works

[royal perch]

found out why, its a specifity issue

[rapid wigeon]

it's the default value

[odd viper]

why are mine not alligned

[royal perch]

any other theme you are using?

[naive pilot]

#1354756324285743216 message

[naive pilot]

Its normal behaviour

[royal perch]

i have no idea how to properly align it because the view older messages doesnt even show how it is aligned

[vagrant vine]

needs an update, I think!

[royal perch]

any issues?

[vagrant vine]

Wasn't showing up at all yesterday

[royal perch]

wym it wasnt showing up, screenshot because it works perfectly normal for me

[vagrant vine]

I mean the snippet isn't working on my machine unless I update it manually

[royal perch]

it is at the top?

wait how did you add the snippet

[vagrant vine]

quickCSS, pasted at the top of the list.

alright, imports are just stupid

https://tenor.com/view/cat-meme-pee-cat-pee-funny-lmfao-gif-14727908981812019274

[royal perch]

just updated it for the banner for channels that arent added to your channel list

[royal perch]

Added support for summaries

[royal perch]

pushed some minor changes to fix the jump to present button being too big

[sharp isle]

@royal perch Hi, there does not appear to be a chatHeaderBar element any more in the CSS for this snippet to move the "You're viewing older messages" bar to the top of the window. I did make other fixes for my own copy to update all the hashes (due to the Discord CSS change), but just cannot find a way to make the bar move

[royal perch]

omg wait ill check rq

wallahi

@sharp isle what version are you on?

[sharp isle]

latest canary/vencord builds

sec

[royal perch]

i dont see any issues on mine

stable 479793 (83d195e) Host 1.0.9218 x64 (72857) Build Override: N/A Windows 11 64-bit (10.0.26200)
Vencord 6e11973 (Standalone)
Electron 37.6.0
Chromium 138.0.7204.251

[sharp isle]

Vencord 6e11973 (Standalone)
Electron 37.6.0
Chromium 138.0.7204.251```

[royal perch]

maybe thats why, i dont use canary nowadays

ill wait for the change to be stable, but for now, i cant really fix it, i dont want to mess with canary

[sharp isle]

yeah nw, just so it helps, the bar is now here:

you could use canary web but idk how good it is lol

[rapid wigeon]

Adding onto the topic, it seems all the classes in canary got screwed up bad, for context this is how it looks like

Stable although looks normal, I don't know if this is/has been exclusive to canary but if this comes to stable, good lord 😭

[sharp isle]

it is actually intended that the hashes have changed. Discord updated rspack, which handles this hashing and it uses a new format that you can see in your screenshots: all custom CSS selectors have to be updated to support the changed format (it should be easy enough because the first 6 characters in the old selector are the same in the new one -- for the most part: the order is just different now).

it hasn't rolled out to all Stable users yet, some people have said they have it on their non-Canary desktop clients, but you will need to prepare for the change happening at some point 👍

[rapid wigeon]

Ah I see what you mean by the 6 characters not differing from the previous selectors, doesn't look that bad, assuming it doesn't change every following release

This might pose some issues with specifying things but for the most part it looks like it won't be a big deal

[sharp isle]

yeah i don't think it will change more after that, but it will need to be borne in mind. you could use wildcard selectors eg class[*="-theselectornamehere"] but you would need to take care about using them everywhere as it will have a negative impact on performance

[rapid wigeon]

Yeah I've meddled with those before, it'd be impractical to use wildcard selectors but if it's the only option, then hell I guess I'd be willing to tank the performance 😭

I might make a copy of my entire theme to work with this new system early to see if it'd work or not, so I don't have to deal with the headache later

[sharp isle]

I'd definitely recommend that you have two versions of your CSS: one for canary users and one for non-canary users. that way, if shit breaks in Canary, you can fix it for Canary and make sure it works before it goes to Stable 😄

[sharp isle]

An alternative is to go to different parts of the discord client, copy the html of <body> into an online html formatter and just do Ctrl+F to find the selector and copy/paste the new hash that you find, which is what i did for all my selectors in my custom CSS 🤣

[rapid wigeon]

I'll definitely be looking into that, though I don't plan to officially maintain a Canary theme as my theme is personal use so, but it'd definitely be nice having one for cases like these I suppose

[rapid wigeon]

I'll also take a look into that! seems helpful!

[sharp isle]

@late parcel this is also a CSS snippet I use, perhaps you'll find a way to make this one work again and be a hero in my books for it

[rapid wigeon]

I personally discovered in my own usecase that, if I for example, want to modify the userpanel area, I can do something like this:

.visual-refresh {
#app-mount [class^="_5e434"] div[class*="-sidebar"] section[class*="-panels"],
#app-mount [class^="_5e434"] section[class*="-panels"] > [class*="-container"] > [class*="-container"] {
    border-radius: 0;
}

#app-mount [class^="_5e434"] div[class*="-sidebar"] section[class*="-panels"] {

    left: var(--custom-guild-list-width);
    bottom: 0;
    width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px) !important;
    background-color: color-mix(in oklab, var(--background-base-lowest), #000 11%);
}```
this works in my case, although unsure how expensive/cheap it is on performance

Unsure if this is the best place to discuss this but yeah

I cannot use something like [class$="-name"] if there's multiple classes so wildcards are the best thing I can do 💔 , but I am VERY amateur at this so if there's a better way to do it then I have no clue

[rapid wigeon]

Well I guess that discussion was in vain considering discord decided to push the new classnames then revert back to the previous ones for no reason

Canary's still keeping the longer, hashed classnames though so that does make one worry

[royal perch]

ill wait until stable

[rapid wigeon]

Well I guess Classname changes are back to stable, and this isn't even optimal whatsoever so I just resorted to the usual specific class targetting instead, sigh

[rustic oriole]

there seems to be a margin issue between elements/segments

[royal perch]

i dont think i accounted for summaries

and i havent used summaries for a long time

[royal perch]

I highly recommend using https://nspc911.github.io/themes/vencord/ChatRelatedToastsAtTopv2.theme.css, but this should be updated! Any issues, please ping me, thanks!

[rustic oriole]

Semi seems to overlap

(i'm using the new link you sent)

It seams to be intentional that it's transparent (unless i'm stupid)

[royal perch]

i didnt care about the summaries

ill take a look at it if possible

its intended to be used with midnight though, forgot to mention that

[rustic oriole]

Yeah I semi guessed

[royal perch]

why are you using summaries though?

[rustic oriole]

🤷 It's funny sometimes and it's one of those things I turned on at one point and never turned off

I turned it off for the screenshot and I don't care enough to turn it back on

[royal perch]

i dont have the fix at the top of my priority list

[rustic oriole]

That's fine

It doesn't really matter to me

[royal perch]

!remindme 1d perhaps fix maybe idk

[cursive roost]

Alright @royal perch, in 1 day: perhaps fix maybe idk

[cursive roost]

@royal perch, <t:1769230747:R>: perhaps fix maybe idk

[royal perch]

!remindme 3hr

[cursive roost]

Alright @royal perch, in 3 hours: …

[cursive roost]

@royal perch, <t:1769318057:R>: …

[royal perch]

!remindme 10mins i swear

[cursive roost]

Alright @royal perch, in 10 minutes: i swear

@royal perch, <t:1769329435:R>: i swear

[royal perch]

@rustic oriole wait so you want me to fix for v2 or v1?

[rustic oriole]

I could not really care ngl

Either

Both I guess?

[royal perch]

damn

[rustic oriole]

(if it doesn't really matter)

[royal perch]

thanks