🎨-theme-development

[plain kelp]

Not "for every .client-theme-warning, color every descendant"

So for selector performance, you want to avoid :has, composite selectors where the final one is overly broad, and to a lesser degree attribute selectors

[elfin torrent]

Did you try to take an existing theme and recolor it with your colors?

[stiff moat]

I’ve done that before yeah, only issue is I’m not sure what to recolour to what

[half crystal]

who changed the donate banner
it looks so pretty and i love it

[pure cairn]

It's a recent addition

Changes based off contribution/donation

[crimson skiff]

for the :has selector causing issues, can it be slightly mitigated with descendant (>) or sibling (+) selectors?

[plain kelp]

No, :has cannot be emulated by other means

[pure cairn]

So I guess all we can do is find workarounds

[plain kelp]

Sometimes you can write a completely different selector that matches what you want

I've never needed any :has for my css, but I don't do anything particularly sophisticated

[elfin torrent]

Dm me a theme and I'll recolor it for you.

[half crystal]

mmmmmmm

[crimson skiff]

i mean if a DOM like

<div class="element-one">
  <div class="element-two"></div>
</div>
``` were to exist, instead of 
```css
.element-one:has(.element-two)
``` can we use
```css
.element-one:has(> .element-two)
``` to be less performance tanking?

[plain kelp]

Yeah that'd probably be faster

[crimson skiff]

okay, thats what im using lol so i shouldnt have issues with previous snippets

[pure cairn]

Wait, what's the difference here though?

Why the descendant selector ?

[plain kelp]

Because then it only needs to look at direct descendants to see whether it maches

Rather than traversing the entire subtree

[pure cairn]

Now I'm curious to see if it does anything in my snippets

[tepid fractal]

I went in here for 2 seconds and I now have new knowledge. ffs D:<

[rocky quarry]

for some reason my theme got really laggy after the new update?

any ideas why

[pure cairn]

You will read https://discord.com/channels/1015060230222131221/1335031334426644561

[rocky quarry]

oh shit just needed an update

i have an issue with my titlebar now im not sure how to fix though

if i type anything longer than one line it disappears and doesnt come back

[lunar hamlet]

swapMicDeafen.css: Lines 1-10

/**
* @name Swap Mic and Deafen Icon
* @author krystalskullofficial, vending.machine
* @version 1.5
* @description erm... title sums it up pretty good
*/

[class*=panels_] :is(button[aria-label="Deafen"], button[aria-label="Disable Game Activity"], button[aria-label="Enable Game Activity"]) {
    order: -1;
}

[elfin torrent]

what is the selector of this border thing?

".embedWrapper_b7e1cb .embedFlexGrow_b7e1cb .embedFull__623de .embed__623de .markup__75297 .justifyAuto__623de" doesnt work for me

[indigo mica]

how do i remove the yellow without removing the red? they have the same class....

[crimson skiff]

[aria-label="Message Actions"] > div {
    > [aria-label^="Click to react with"],
    > [class^=separator] {
        display: none;
    }
}
``` who cares about classes, just use aria label ![blobcatcozy](https://cdn.discordapp.com/emojis/1026533070955872337.webp?size=128 "blobcatcozy")

[indigo mica]

clever

thanks

[vestal field]

amazing

[echo frost]

wtf is that song name

[iron smelt]

schizophrenia?

nvm

i see what your talking about

[hoary pollen]

just curious, is anybody working on a reversal of visual refresh that isnt tied to the experiment? bcs knowing discord they're gonna nuke it as soon as possible

[echo frost]

like to convert the visual refresh back to the current ui with css??

[hoary pollen]

yeah basically

[echo frost]

not that i know of

i might make one to fix the server icons in folders since those look bad

but for the most part, i don't mind visual refresh

[hoary pollen]

damn
i might try that then but itd be fucking rough lmao

i hate it bcs it completely screws up the theme i was using

[echo frost]

well making it look more like the current one with css won't fix your theme

also it'll probably still be a while since it releases

[hoary pollen]

yeah fair enough
however, pettiness

[vestal field]

someone will definitely try

[iron smelt]

Next theme

Midnight, System24, Pre-Refresh?

[vestal field]

hell naw that sounds painful asf to make

[exotic lance]

Does someone have a visual refresh status bubble css where you can see the full thing without hovering over it? Bc I think I might be tripping and missing something

[echo frost]

This could cover badges
If you remove the [role=tooltip] it'll make extra space if you don't want that

[role=tooltip] .inner_ab8609>div {
  max-height: unset !important;
  -webkit-line-clamp: 9;
}

also it's the same as without visual refresh

[exotic lance]

Whattt... maybe Im crashing out bc Ive been working on this theme for 6 hours () so I couldnt figure it out but thanks

Oh and while youre here, whats the class for the background of this:

[echo frost]

can't you look for it yourself?

[exotic lance]

When i try f8 break, it doesnt stay

But like i said, i could be tripping

[echo frost]

oh f8 isn't even working for me

[exotic lance]

Felt. I keep having to reopen my devtools

[echo frost]

paste this into console

setTimeout(()=>{debugger},3000)

it'll do the f8 break thing after 3 seconds

[exotic lance]

Oh i'll keep that in mind

[echo frost]

well you should be able to get the class using it

[exotic lance]

[elfin torrent]

someone knowing the selector if the waveform?

.waveform_a8e78{
    color: var(--brand-560) !important;
}

isnt doing anyting. i want to change the color of the darker part..

[plain kelp]

That's probably a svg, isn't it?

Try fill: ...

[elfin torrent]

ill try. thanks
its my first time dealing with css :D

doesnt work for me

this is the selector

[pure cairn]

It's a canvas, try using background instead of color

[elfin torrent]

i think i am using the wrong selector

[pure cairn]

Where even is that, I've never seen it

[elfin torrent]

audios

[pure cairn]

I see

[true bloom]

does,

body{background:url('https://jpg_image')rgba(0,0,0,0);background-size: cover;}```

no longer work?

I'm fixing the dynamic objects into transparent but I still can't see the background anywhere, only in the reload screen before all the UI loads up (it shows the old version that I remember)

My only theory is that I got picked for some labs crap on the new UI design

[half crystal]

Welcome to visual refresh, where everything is fucked

[crimson skiff]

real

[smoky fog]

holycow

[plain kelp]

Very appropriately sized snail!

[atomic plank]

Is disblock origin not hiding the gift button for anyone else?

[drifting arrow]

why tf is discord icon looks like minecraft now

[echo frost]

doesn't really look like minecraft

[distant nebula]

WTF

DISCORD IS TURNING TO MINECRAFT

[echo frost]

still looks normal to me

[pure cairn]

That looks good though

[bleak gust]

why are they killing the "Your place to talk" art style

😭

i saw the redesigned activity privacy page a while ago and thought it looked out of place

[smoky fog]

oh nice hopefully it apply to all icons in the future

[drifting arrow]

what are wumpus doing?

[drifting arrow]

yes, they changed icons to minecraft

[mild shell]

hi.any compact themes you guys recommend?

[drifting arrow]

looks like comic sans but bad

[pure cairn]

I hereby rename it "tragic sans"

[half crystal]

Its visual refresh

[elfin torrent]

i have this now too, wtf

what and why is this?

ok found it --custom-live-activity-status-emoji-size wasnt set. i setted it to 15px. idk whats the default size for that xd

okay thanks :D

[iron smelt]

14px was the old size

but yeah

[errant zenith]

oh came here to post a solution but i see its been found lol

[edgy sentinel]

are u sure this isnt just a theme

[half crystal]

trust me, its visual refresh

[elfin torrent]

I kinda like these icons

[iron smelt]

Bruh

[distant nebula]

what if u put a minecraft font instead of these minecraft icons

[craggy tiger]

anyone have anything to round channel names

*bubble-ify

[bleak gust]

did this really happen

[drifting arrow]

its not a theme its discord

[copper flame]

they look to be in the clan tag icon style

horror

[craggy tiger]

any way to keep this from happening

[vestal field]

yeah, don't have a broken theme

[craggy tiger]

its the chat bubbles

[gleaming meteor]

Theme conflict

[vestal field]

desktop refresh is actually easier to theme in a lot of places
i went from 1300 lines to 800

[craggy tiger]

this is the theme btw

[indigo mica]

how do i put the channel name up here? im not sure how to do something like that without js

[vestal field]

need js

though i guess you could steal the normal channel name and move it

[indigo mica]

please elaborate

[vestal field]

like the normal channel name

you could probably move it to the top somehow

but then it would be missing in its normal spot

[indigo mica]

hmm

thats a sacrifice im willing to make

how do you "move" it though

[vestal field]

position fixed or absolute probably

[indigo mica]

makes sense

hmmm. but now it goes away if i collapse it

ah, i can move the one in the channel description

eh

yeah this works well ```css
[class^="titleWrapper"]>h1 {
position: fixed !important;
left:65%;
top: 0px;
font-family: "ubuntu";
}

[tiny lion]

Is it just me doing something wrong or QuickCSS can't target the popout window that views a channel separately?
(The popout window can be opened here)

Example snippet

main[class^="chatContent"] {
    background-color: darkcyan;
}```

[half crystal]

I FUCKING INSPECTED THE QUICKCSS EDITOR 😭

[mortal mantle]

[crimson skiff]

yeah, its normal?

you can inspect the loading screen as well

[echo frost]

it doesn't get injected into popout windows

[ornate zodiac]

any way to replace the text

[crimson skiff]

probably wouldnt recommend the double underscores because discord could have done a mistype and added extra underscore

also refact0r's midnight theme does it in a different way instead of using svg, just uses ::after content

[echo frost]

yes, the snippet in the message you replied to does that
(although i'd probably recommend using the non future proofed one)

[snow monolith]

The second _ is part of the hash, which can and will change when classes are reshuffled

[tiny lion]

Sad

[clear siren]

society if we could rice quickcss window

[plain kelp]

Gaudy and impractical and with too many rounded corners, yep

[clear siren]

lol

[echo frost]

btw is the popout from this experiment?

oh ok now it's working after restarting discord

that's a pretty nice experiment

[tiny lion]

Yeah! Iirc it might have been that experiment, i enabled it a long time ago

It's a shame we can't inject CSS to it, i was hoping to have all of the extra buttons well organised in the popout as well

[bleak gust]

one day you might be able to

[tiny lion]

👀

[half crystal]

Quickcssquickcss

QuickerCSS

[half crystal]

yeah, and its really easy to select only the popup if you wanna fix some styling as it just uses .popout__0bd4a

[snow monolith]

I mean... you can if you're dedicated enough

monaco is sort of horrible to deal with tho so I wouldn't recommend -- not worth it

[chilly quail]

from experience\

making a text editor in web is hard

making a syntax highlighted text editor in web shouldnt be possible

thank you for coming to my ted talk

i made a WYSIWYG editor for one company, that absolutely couldnt use any other available editor because of licensing and privacy laws

IT WAS FUCKIGN HELL

it is NOT easy

[snow monolith]

Yeah it’s quite horrible

[half crystal]

may i present javascript

[chilly quail]

what do you think i used

lol

[clear siren]

I mean yeah but would be neat if you could just do it normally

[craggy tiger]

how do i change this so the message actions move to the right (rn they are just above every message i send)

[echo frost]

like you want them to move over the member list?

i did make this if that's sort of what you're wanting #🎨-css-snippets message

[craggy tiger]

nvm i fixed it

there was a line of code below that 1

making the actions appear on my own messages

was anoying

this was the code btw

[echo frost]

what is it even doing?

also why do you have #app-mount

do you use right aligned messages of your own?

[craggy tiger]

its a chat bubbles thing i found in #🎨-css-snippets

i like it

it was making the like forward reply and stuf actions appear on top of every message i sent

(could bearly see my own msgs)

think i said sum abt it before

[craggy tiger]

there we r

[half crystal]

Ddex4, msgs stolen from someone I forget
They used app-mount for some god-forsaken reason, should really remove it

[half crystal]

i have defeated god

[chilly quail]

holy blade out here gonna make a mobile responsive version of discord before vencord gets a mobile app

XD

[half crystal]

im talking about transparency and being resizable, but hey that gives me an idea

[chilly quail]

unfortunately we still dont have extensions on mobile, so cant install vencord and....

this gives me an idea

[half crystal]

the vencord apk:

[chilly quail]

@edgy sentinel ship webPWA, we'll get vencord on mobile via PWA on phone

https://cdn.discordapp.com/emojis/1207393766458007562.webp?size=48&name=kekwolf

NOOOOOO

[edgy sentinel]

? https://github.com/Vencord/Vendroid

[chilly quail]

kiwi browser died 22 days ago, was about to go test if vencord extension works

[chilly quail]

oh god, please, minimal effort

[edgy sentinel]

i think we fixed that

[chilly quail]

damn, not a solid argument for PWA then, outside of webviews being utter garbage

oh but ms edge canary for mobile has extensions

IDEA LIVES ON

[edgy sentinel]

there's also a fork https://github.com/nin0-dev/VendroidEnhanced

LOL the thumbnail 😭

[burnt maple]

the firefox in question:

[chilly quail]

actual yt clickbait thumbnain XD

[chilly quail]

bruh ff is useless, not only does ven no longer support ff because of their dogshit approval system, firefox doesnt support PWA

and many of the APIs that i used to unshittify discord on web

[burnt maple]

firefox supports PWA

VE is the least bad way to use vendroid

[chilly quail]

no

no it doesnt

there's a 3rd party extension which offers partial installability, but its in no way close to what PWAs offer

[burnt maple]

? explain my several piracy site PWAs

[chilly quail]

those are shortcuts

not pwas

[burnt maple]

they open separately but ok

[chilly quail]

cool

thats a shortcut not a pwa

safari and ff dont support pwas

[crimson skiff]

ok what just triggered it

[ornate zodiac]

That’s just for removing everything no?

[echo frost]

that allows you to replace the image

oh also remove the block with a comment above saying display
that hides the explore button

VE

[echo frost]

seems like it's just VE

ve

[echo frost]

ok caps doesn't matter

[lost plume]

vh e ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

[cloud jolt]

Eval (e, $)

Evaluate javascript code

Usage

veval <code>

[crimson skiff]

vh ve

[cloud jolt]

Eval (e, $)

Evaluate javascript code

Usage

veval <code>

[burnt maple]

thats vhelp which looks for commands ig

[chilly quail]

man i wish i knew sooner that translate3d doesnt cause paint updates and is fully gpu accelerated and async

you can have js dictated position and transform updates, without any paint updates happening

[kind mortar]

Anyone know if it's possible to make custom CSS to add client side clan tags?

[pure cairn]

Sounds like a pain

Maybe, but a plugin would be better

[echo frost]

that seems very doable

[iron smelt]

thats not a bad idea for a plugin

Vns make a bd for it too

[cloud jolt]

👉 #🏥-vencord-support-🏥

[iron smelt]

bruh

typo

*can

[echo frost]

what's a bd

only thing I can think of is better discord?

[kind mortar]

Ah OK, it'd be cool to have it now they are removing the clan tags, any idea where I would start making one for it?

[echo frost]

wait they're removing clan tags?

[kind mortar]

Yeah

In a few weeks I think

[iron smelt]

db

i swear

[echo frost]

database?

[iron smelt]

might be

still up in the air

[iron smelt]

yeah

ClanDB

recreate the clans badge thing

make DB so other people can see yours and yall can share

ofc normal rules would still apply

[echo frost]

so sort of like that avatar decoration plugin?

I think

[pure cairn]

Similar to Decor, USRBG and UserPFP ig

[iron smelt]

yeah

Id say decor more tho

Cause you could make preset like decor has

[half crystal]

Or assign it to servers, just like standard clans

[iron smelt]

that too would work

[half crystal]

Additionally, you could upload custom clan tag images instead of just using discord's pixel ones

[iron smelt]

Could probably add more, but they would have to fill the style with the existing Discord ones

cant make it just any image

would look werid

[supple lodge]

did anyone do a theme to fully hide the messages from "Ignored"/"Blocked" people? ty

[velvet pawn]

theyll probably extend to other servers

[velvet pawn]

vp noblockedmessages

[cloud jolt]

NoBlockedMessages

Hides all blocked/ignored messages from chat completely

Authors

rushii, Samu, jamesbt365

[iron smelt]

One can hope, but if they dont its a solid idea for a pluger

[supple lodge]

tyy

[drifting arrow]

is it just me or did they steal sketch discords theme font

i wonder

[distant nebula]

they stoled it...

[distant nebula]

idk how did they managed to copy sketch discord's homework and they changed the W just a little bit

ok then

[drifting arrow]

they copied sketch discord's homework

look at the font

the 7 doesn't have a line through it

[distant nebula]

OH

DID THEY COPIED OUR HOMEWORK?

[drifting arrow]

yes...

[distant nebula]

then who copied first

[drifting arrow]

we don't know...

[distant nebula]

can i see the difference?

[drifting arrow]

ok lemme compare it

[pine needle]

Does adding a transition effect like

    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    will-change: transform, opacity;

cause lag in Vencord? or anything else i should know hehe thank you for feedback.

[clear siren]

depends on what you're transitioning and when, but pretty much everything will contribute to lag more or less

[half crystal]

replace both instances of the.rabbit.disabler with your username,
and 💗 HELP with whatever clan tab but emoji you want

.memberInner__5d473:has(> .avatar__91a9d > [aria-label^="the.rabbit.disabler"]) .nameAndDecorators__91a9d::after {
  content: "💗 HELP";                      display: inline-block;padding: 1px 4px;max-height: 18px !important;background: var(--bg-mod-strong);border-radius: 4px;vertical-align: middle;background-color: var(--bg-mod-strong);color: var(--text-normal);font-family: var(--font-primary);font-size: 12px;font-weight: 600;line-height: 16px !important;width: fit-content;}
  div[aria-label="the.rabbit.disabler"] .tags__63ed3::after {
  content: "💗 HELP";                      display: inline-block;padding: 2px 4px;vertical-align: middle;color: var(--text-normal);font-family: var(--font-primary);font-size: 12px;font-weight: 600;line-height: 16px !important;width: fit-content;height: 22px;border: 1px solid var(--border-faint);border-radius: var(--radius-xs);box-sizing: border-box;border-color: var(--profile-body-border-color);
}

this looks neater in the quickcss editor, trust me

[pure cairn]

Insane

[echo frost]

i'd rather use discord id's than usernames

[echo frost]

not much

[crimson skiff]

dude its so stupid, why is it that when i see it in the quick css editor, it looks formatted, but the moment i copy it and paste it somewhere, it just decides to be compacted and i have to format again with prettier

[echo frost]

i'm pretty sure they just formatted it weird in this case

[crimson skiff]

no i swear

[half crystal]

you cant in the memberlist

[echo frost]

you could use discord id in the avatar

avatar url

also your css isnt working for me

i don't see .nameAndDecorators__91a9d or .tags__63ed3 anywhere

[half crystal]

visual-refresh syndrome

[echo frost]

ah that's for referesh?

[half crystal]

idfk

[echo frost]

do you use refresh?

I don't

[half crystal]

yes, i use ddex4

[echo frost]

what is that

is that a theme?

[half crystal]

my theme

but this should work on non-visual refresh. you probably didnt enter a thing right

[echo frost]

you're not high up in member list, so i was basing it on in chat

i assumed it works in chat?

but ctrl+f didn't work for either of those classes

WAIT

oops caps

i had members list colklapsed...

so the nameAndDecorators class does exist, but i still can't find the .tags__...

ve

[echo frost]

Ok made some only partially scuffed selectors to get it to mostly work

[id^=chat-messages-]:is(
  [data-author-id="1017176847865352332"]
) [id^=message-username-]::after,
[data-list-item-id^=members-] .avatar__91a9d:has(img:is(
  [src*="/1017176847865352332"]
))+div>div>.name__91a9d::after {
  margin-left: 4px;
  padding: 0px 4px;
  height: 17px !important;
  border-radius: 4px;
  content: "💗 HELP";
  display: inline-block;
  background-color: var(--bg-mod-strong);
  color: var(--text-normal);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px !important;
  /* background: var(--bg-mod-strong); */
  /* vertical-align: middle; */
  /* font-family: var(--font-primary); */
  /* width: fit-content; */
}```

user id is for venbot btw

kinda scuffed on members list right now

but don't feel like fixing

[half crystal]

In the profile
I forgot chat

[echo frost]

ah I didn't think about in there

[drifting arrow]

@distant nebula in roblox, the font is not by us.

so its someone else

[tiny wing]

Anyone got a reverse order of this chatbox please

[stray dune]

flip your monitor

should do the job

[vestal field]

follow this guide but set it to treatment 3 instead of 0

[kind mortar]

Ah thanks!

[kind mortar]

Here is some more CSS to make it appear in messages

/* New CSS for messages */
.message__5126c:has(.avatar_c19a55[src*="YOUR_USER_ID"]) .headerText_c19a55::after {
  content: "💗 HELP";
  display: inline-block;
  padding: 1px 4px;
  max-height: 18px !important;
  background: var(--bg-mod-strong);
  border-radius: 4px;
  /* Remove vertical-align: top or any other vertical-align property here */
  background-color: var(--bg-mod-strong);
  color: var(--text-normal);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px !important;
  width: fit-content;
  margin-left: 5px; /* Add some spacing */
  position: relative;  /* Crucial:  Allows top positioning */
  top: -2px;         /* Adjust this value to move it up (negative) or down (positive) */
}

[true bloom]

Anyone have the css to disable the nitro upsell button on the home page?

[true bloom]

/* Hide Gift Button */.container_c0c49a, .iconContainer_c0c49a {display: none;} ```

[echo frost]

I think the selector i made would be a bit more efficient

it doesn't have a :has()

[id^=chat-messages-]:is(
  [data-author-id="1017176847865352332"]
) [id^=message-username-]::after```

could use classes instead of id^= for even more efficiency

[kind mortar]

Ah OK thanks! I don't really know much about CSS, I just quickly put it together with Gemini

[echo frost]

but :has() is usually really bad for performance

[kind mortar]

Ah good to know

[cunning vortex]

Would it be possible for anyone to recreate this theme? It looks really cool
i found it in this thread https://winclassic.net/thread/753/discord-classic-msn-theme

[pine needle]

.memberInner__5d473:has(> .avatar__91a9d > [aria-label^="your_username"]) .nameAndDecorators__91a9d::after,
[id^=chat-messages-][data-author-id="your_user_ID"] [id^=message-username-]::after {
  content: "🔫 PEW";
  display: inline-block;
  padding: 1px 4px;
  max-height: 18px;
  background-color: var(--bg-mod-strong);
  border-radius: 4px;
  color: var(--text-normal);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  width: fit-content;
  margin-left: 5px;
  position: relative;
  top: -2px;
}

end up like this i dont know

[atomic plank]

Anyone know the class name for this new thing? It's really annoying

I wanna just make it poof out of existence

[echo frost]

can you not find it?

[atomic plank]

I'm not very good at finding class names, and it already disappeared because someone sent a message there to make the new vanish for me :P

[echo frost]

it should be pretty easy to find

ah

well try using inspect element next time you see it

[atomic plank]

I think this is it?

[echo frost]

try expanding it

that class is probably used for other things too

[atomic plank]

ah like this?

[class*="newChannel__599fa"] {
    display: none;
}
``` indeed appears to get rid of it

[crimson skiff]

if you want it just use the class and not future proof it, you can just use

.newChannel__599fa {
  display: none;
}
``` for future proof reasons, you can use
```css
[class*="newChannel_"] {
  display: none;
}

[iron smelt]

make sure newChannel isnt broadly used so you don’t accidentally break something

It shouldn’t be

but still

[crimson skiff]

lets use descendant selectors then

[iron smelt]

[crimson skiff]

if you want it to not break, you can use descendant selectors, totally will not have performance issues whatsoever at all

[iron smelt]

make sure to use :has() any chance you can get
/j

[atomic plank]

What's the difference between what I did and what you did with using .newChannel__599fa instead?

[crimson skiff]

you didnt need to add an attribute selector when you are using the literal class. its just extra and slightly performance demanding (ive never felt it, but its an unspoken rule here iirc)

[atomic plank]

ah

Honestly in terms of things breaking my theme already uses so many class names that I just auto update the names using that online tool thingy

[crimson skiff]

try to minimize attributes selectors unless you really have to, or are posting snippets into #🎨-css-snippets

[atomic plank]

At some point I want to completely overhaul my theme anyway

[crimson skiff]

just saying, it's up to your preferences, i can (or we can) give you suggestions

[atomic plank]

yeah

[rose orchid]

how do i

do anything

with css

[vestal field]

google it

[rose orchid]

its fine i figured it out anyway

spent at least 20 minutes in this server trying to get anybody to help me and all i had to do was copy the IMAGE LINK

and not the link

[vestal field]

lmao

[echo frost]

* {
  display: none !important;
}```

[iron smelt]

https://tenor.com/view/catgirl-true-fact-checked-fact-checked-by-real-catgirls-real-catgirls-gif-6150500953193565843

[vestal field]

this might be the most disgusting snippet ever created

[echo frost]

yeah it uses tabs instead of spaces

[vestal field]

blame the quickcss editor..

[echo frost]

it uses spaces for me

[vestal field]

huh

oh theres an command to convert indentation to spaces

idk if it stays that way though

[echo frost]

turn this on

[vestal field]

ah

[pure cairn]

Ew, maths

[vestal field]

svgs cause weird scaling problems so you have to calculate like 6 ratios

[pure cairn]

Ngl that is impressive

[burnt maple]

is there anyone with css to hide nitro profile backgrounds and avatar decorations?

i like to not be blinded and to be able to see profile pictures

[echo frost]

i assume you mean this by nitro profile backgrounds?

actually you probably mean the colored background, not the banner

I think i've seen some snippets to hide avatar decorations in #🎨-css-snippets

[burnt maple]

ye

i tried looking at it once but ive only done css with good codebases and my head exploded

[half crystal]

Best description of discord's css I've ever heard

[echo frost]

well it's only a "bad codebase" because we're not using the codebase in css, we're using the compiled program

[half crystal]

The colored background is literally just vars, so it's infinitely futureproof

[echo frost]

idk if that's the best way of putting it, but i think it's probably good enough

[burnt maple]

you ever do CSS with obsidian?

shit has labeled class names.

[echo frost]

the notetaking thing software?

[burnt maple]

and divs that make sense

i havent found a hacky shitfix yet.

[burnt maple]

yeah

[echo frost]

i've never used it :(

[burnt maple]

you should. CSS dream

[echo frost]

but obsidian is meant for being modded

discord is not

[burnt maple]

and discords codebase sucks anyway
i doubt they ship discord bad on purpose
the shitfixes abound

thatd be funny though

their obfuscation is making it shitter so all those freaky client mod users have to become gods to modify

#🎨-css-snippets message

stole this and did

img[class*="avatar"][src^="https://cdn.discordapp.com/avatar-decoration-presets/"] {
    display: none;
}

and theres

vp noprofilethemes

[cloud jolt]

NoProfileThemes

Completely removes Nitro profile themes from everyone but yourself

Authors

TheKodeToad

[half crystal]

I have a stupid amount of dumb knowledge in css

Purely because of discord

I know no html or js

[clear siren]

I also know how to do stupidly complicated things in css but barely know html and no js

[pure cairn]

why not just

img[class^=avatarDecoration_] {
  display: none;
}```

[clear siren]

#🎨-css-snippets message

that's what I've been using

[dusty tusk]

Heyo, I did this:

.footer__214dc{
  display: none;
}```
to yeet the discovery button, however the notifications are now still displayed as if the button was there
Could someone help aligning them again?

[burnt maple]

'cause i didnt open the inspector

ultra lazy

[echo frost]

#🎨-css-snippets message

[iron smelt]

[echo frost]

I can't escape the colon three 😭

[burnt maple]

colonthree3

[echo frost]

😭

[dusty tusk]

thanks

[hallow robin]

Are there any websites, that can show and provide me with a alot of themes?

[crimson skiff]

https://betterdiscord.app/themes

[iron smelt]

Rate the theme

[echo frost]

amazing

what is it

[iron smelt]

* { display: inline-block; }

[vestal field]

incredible

[iron smelt]

What have i (while stalking refact0r’s server) just found https://github.com/Metro420yt/class-update

Wonder if it actually works…?

[supple lodge]

I personally need to change some manually, but for the most part it works

[manic vault]

Hey guys, i'm struggling trying to make a custom embed css, can someone help me?

basically, i want to make the embed border look like this

i know that theres a way to make with ::before, but i cannot get the color from embed because discord uses style="border-left-color" to change the color of the embed

theres a way that i can get the color of the embed and use on background-color on ::before or something else?

[half crystal]

if it aint a var, nope.

[vestal field]

you can set a border on the embed and it will inherit the same color

then just do like width 0 or something with a border radius

idk if that would work

[smoky belfry]

in term of the performance for the CSS is it better to be more or less detailed ?
idk exactly how it work, but i'm trying to find if i should try to specify more at the risk of it breaking more often or not

also how do you do the css inside of css thing ? like the nested CSS

cause currently my user area redesign css looks like this and i could nest it, but again, idk if it's really better

[class^=panels] > [class^=container] /* User area redesign */
{
    height: unset !important; /* Height being dynamic is fine */
}

[class^=panels] > [class^=container] > [class^=content] /* User area redesign */
{
    align-items: unset !important; /* Don't need that */
    padding: 6px 8px !important; /* Let those boxes breathe */
    flex-direction: column-reverse !important; /* instead of going one next to the other, go stacked */
    gap: 2px !important; /* Again let them breathe */
}

[class^=content] > [class^=avatarWrapper] /* Change the user box */
{
    margin-right: unset !important; /* Useless */
    margin-left: unset !important; /* Useless */
    padding-left: 4px !important; /* Make it slightly bigger for consistency with the right side */
}

[class^=content] > [class^=avatarWrapper] ~ [class*=buttons] /* Change the quick settings */
{
    justify-content: space-evenly !important; /* Let them breathe */
}

[pure cairn]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

TL;DR

parent {
  & (can be omitted) children { ... }
}```

[smoky belfry]

oh i thought it was a custom css kind of thing
not a vanilla stuff

[chilly quail]

it used to be

not as of recent tho

which means not old browsers dont support it

[pure cairn]

I believe all browsers have nesting support as of now

[smoky belfry]

ok this shit is hella confusing

[pure cairn]

which is not the case for discord anyway

[iron smelt]

hop on w3schools
/j, they are just what i prefer
https://www.w3schools.com/cssref/sel_nesting.php

[pure cairn]

[class^=panels] > [class^=container] { /* User area redesign */
  height: unset !important; /* Height being dynamic is fine */

  & > [class^=content] { /* User area redesign */
    align-items: unset !important; /* Don't need that */
    padding: 6px 8px !important; /* Let those boxes breathe */
    flex-direction: column-reverse !important; /* instead of going one next to the other, go stacked */
    gap: 2px !important; /* Again let them breathe */
  }
}

[class^=content] > [class^=avatarWrapper] { /* Change the user box */
  margin-right: unset !important; /* Useless */
  margin-left: unset !important; /* Useless */
  padding-left: 4px !important; /* Make it slightly bigger for consistency with the right side */

  & ~ [class*=buttons] { /* Change the quick settings */
    justify-content: space-evenly !important; /* Let them breathe */
  }
}```

[smoky belfry]

ok so it'll look smth like this nested right ?

[class^=panels] > [class^=container] /* User area redesign */
{
    height: unset !important; /* Height being dynamic is fine */
    > [class^=content] /* User area redesign */
    {
        align-items: unset !important; /* Don't need that */
        padding: 6px 8px !important; /* Let those boxes breathe */
        flex-direction: column-reverse !important; /* Instead of going one next to the other, go stacked */
        gap: 2px !important; /* Again let them breathe */
        > [class^=avatarWrapper]/* Change the user box */
        {
            margin-right: unset !important; /* Useless */
            margin-left: unset !important; /* Useless */
            padding-left: 4px !important; /* Make it slightly bigger for consistency with the right side */
            ~ [class*=buttons] /* Change the quick settings */
            {
                justify-content: space-evenly !important; /* Let them breathe */
            }
        }
    }
}

[pure cairn]

right click
hide

[pure cairn]

oh right, it's the same content

then yeah, that works

[iron smelt]

its also in the advanced section of the settings

[smoky belfry]

yeah ok pretty much what i have done

i don't get why they tell to use the & symbol if it's useless

[pure cairn]

you have to use them for other selectors

like pseudos

[smoky belfry]

for what

[pure cairn]

::before ::after

[smoky belfry]

i have so much to discover

[smoky belfry]

i don't use that, problem solved

[pure cairn]

discord does

[smoky belfry]

it does break syntax highlighting tho

[pure cairn]

it's not broken

it used to be, before they updated monaco (the quickcss editor thingy)

it's just how nesting is highlighted

[smoky belfry]

it's broken, shit is fully white instead of colosed inside of []

[pure cairn]

it's not broken

[smoky belfry]

no matter if it's voluntary or not, it's broken

it's a bad decision if it is one

[pure cairn]

this was from back when it was actually broken

[burnt maple]

nested syntax highlighting is husk

get used to it

[smoky belfry]

this is not syntax highlighting
this is code completion

[pure cairn]

whar

[smoky belfry]

i said syntax highlighting is broken, not code completion

[vestal field]

selectors are evaluated right to left, so you wanna make the rightmost selector as detailed/fast as possible

in general more detail is better but if you just keep stacking parent selectors in the middle or on the left then its not really going to change much

[smoky belfry]

syntax highlighting = what color, shape, etc you give to the text
code completion = suggestion about the code and completion about it
actually i see what you mean as here it's the squiggles, but the issue is bad understanding of the code by the LSP, not how the LSP choose to color or format it

[smoky belfry]

i see

so technically ideally i'd replace my star buttons in here

[pure cairn]

gotcha

[iron smelt]

doing Css in OpenAsar Config is brazy

[pure cairn]

Ikr?

It wasn't even my screenshot tbh, I just took it from the channel as an example

[smoky belfry]

in the case of the nested CSS, is there a step where a parser flatten it and then it gets evaluated like normal, or it does match the exterior then match the inside inside for optimization purposes with a virtual HTML tree shit or smth ?

[pure cairn]

From when monaco didn't like nesting and :has() selectors

[vestal field]

i think so, idk

[iron smelt]

Plus doesnt openasar use an old version of monaco and thats why it happens… even tho the css does work, the program just doesn’t like it

[iron smelt]

yeah thats right

didnt see that message

[smoky belfry]

tbh for now i don't find a lot of use for very advanced selectors, simple children and sibling relationship is enough generally

[pure cairn]

I guess, never used openasar, as I said it's a screenshot I found

[smoky belfry]

there's only a single place where i use ::has()

[pure cairn]

That's one hell of a selector for just the gift button

[iron smelt]

openasar is nice, just stuff like the css config and other stuff is desperate need of an update

[smoky belfry]

i used to use it, but stopped when i noticed that some stuff was just broken like activities and i like watch together

[smoky belfry]

i don't like to rely on svg matching because it's unreadable
also for some reason the gift button use different HTML tree than all the other chatbar buttons, almost like if it was different on purpose to be easy to remove... (there might be a conspiracy there)

[vestal field]

i think the gift button is the only button in that list so you could just do something with button type

[smoky belfry]

well yes but no
look how i have 2 rules

[vestal field]

or the aria-haspopup, i dont think thats based on language

[pure cairn]

We need an svg parser inside the quickcss editor

[smoky belfry]

1st one is button type
2nd one isn't cause somehow the event gift button is different than the regular one
almost like if discord had spagetthi code

[vestal field]

oh

still it seems like you could find a way to do it without has

[smoky belfry]

eeeeh if it's not based on language, maybe i could use that
i'll take a look at it

[pure cairn]

Discord does indeed have spaghetti code

[vestal field]

also why are your commas at the start of the line 😭

[smoky belfry]

also it's weird how we only have next relationship

[pure cairn]

It shouldn't

[smoky belfry]

easy to comment out single like, i just add /* in front of it

big brain

[pure cairn]

Why not putting it between ] and /* though?

[smoky belfry]

like you can do > for children and + for next sibling, but you cannot say < parent or - previous sibling, you need to do has children or next sibling

[smoky belfry]

wdym ?

it makes it ass for mass editing

here i can multi select at the start of the line

[vestal field]

yeah because css was not originally intended to do that
like you're supposed to just create a new class or id and select it lol

those are just hacks that somehow got added

[pure cairn]

[class1], /*comment*/
[class2], /*comment*/
etc...

Unless you're insane and go for
[class1] /*comment*/,
[class2] /*comment*/
kek

[vestal field]

oh i see what u mean

[smoky belfry]

just like people got backreferences in regex
like it's due to those people that most regex engines are forced to use a trash way to work

[vestal field]

i do this actually, because i'm used to typing the comment directly after

[pure cairn]

Scary

[vestal field]

also because its slightly easier to convert a listed selector to its own thing, you just delete the comma and type a bracket

[smoky belfry]

yeah but then how do you comment nicely
at the start of the line ?
but then if you comment the last line, it breaks, because the before last line got a , at the end

[vestal field]

personally i just cut the entire line lol

[smoky belfry]

i don't cut when i'm in the process of editing

[vestal field]

but i can understand

[pure cairn]

I just ctrl + c ctrl + v a previous comment and edit it

[smoky belfry]

nah

even when i'm during editing i want my thing to keep working

so that i can see live what happen

and not jump from works to not works to works again, etc

help the brain visualize differences

[vestal field]

also if you use comma at the end, its not too difficult to comment

[pure cairn]

Why should it break if I comment the last line?

I'm confused

[smoky belfry]

since i go from state 1 to state 2 without intermediary state

[vestal field]

.background_e681d1 /* settings nitro tab selected */,
just delete the last */ and then ctrl + /

same applies to comma directly after the selector

[smoky belfry]

look this works nicely because syntax is valid

[class^=characterCount] > [class^=root] /* Hide bs nitro message length when short */
,[class^=characterCount] > [class^=flairContainer] /* Hide message length to work around */
/*,[class^=entryPointButtonContainer] /* Disable commands button in DMs */
{
    display: none !important; /* Prevent display */
}

this doesn't work because syntax is invalid

[class^=characterCount] > [class^=root], /* Hide bs nitro message length when short */
[class^=characterCount] > [class^=flairContainer], /* Hide message length to work around */
/*[class^=entryPointButtonContainer] /* Disable commands button in DMs */
{
    display: none !important; /* Prevent display */
}

because you have

[...],{...}

[pure cairn]

Yes it does (?)

[smoky belfry]

it doesn't, it's invalid syntax, try it

[pure cairn]

I'm on phone and all I can see is a misplaced comment

Which makes it invalid

[smoky belfry]

after a comme a selector is expected

[smoky belfry]

where is a misplaced comment ?

you can have a /* inside of a comment

the problem is the comma

not the comment

[pure cairn]

Ok, I see what you mean

[vestal field]

i mean typing /* at the start of the line works for both comma at the start and directly after the selector, no?

[smoky belfry]

this is a valid comment

/*/**/

[pure cairn]

By having the comma at the start of the line it's easier to wrap it inside a comment

[smoky belfry]

no for the exact reason i shop

[smoky belfry]

yep, it allow to keep valid syntax due to no trailing comma

[vestal field]

/*,.selector /* valid comment */
/*.selector, /* valid comment */
/*.selector /* will error due to comma */,

[smoky belfry]

second code block from here with text replaced by ellipsis
comma is after selector
last selector is commented
there is a trailing comma before the property block

[...] > [...], /*...*/
[...] > [...], /*...*/
/*[...] /*...*/
{
    ...
}

[vestal field]

oh

i see

so u cant comment the last one that way

[smoky belfry]

yes

[vestal field]

makes sense

[smoky belfry]

i found the best slution to handle edge cases

i don't like it that much, it seemed cursed at 1st, but it just makes sense when you use it

you can even see some of my legacy code in my screenshot that doesn't yet use that trick

[pure cairn]

Yeah now that I get the point it makes sense

[smoky belfry]

because if it doesn't break, don't touch it

[crimson skiff]

same lol, i learnt more from themeing discord than making my site

[mortal mantle]

did they fix the user panel again

used to look something like this for me

[grand surge]

given the visual refresh, there's no wya to move the inbox down where it was using just css, is there?

[clear siren]

you can but not super cleanly

[grand surge]

wdym cleanly

i'd paste 100 lines to get rid of this

😭

[clear siren]

margins and/or position:relative trickery

[grand surge]

wouldn't position: relative implode the minute you resize the window

[clear siren]

can move anything with those but can be janky

no

[grand surge]

stupid discord

[round coral]

does anyone know how to make this menu rounded?

pls ping if replying

[distant spindle]

If you mean like this then,

/* Rounded Context Menu and embeds */
.menu_c1e9c4, .colorDefault_c1e9c4 { 
    border-radius: 15px; 
}
#app-mount .embedFull__623de {
    border: 3px solid;
    border-radius: 15px;
}```

Snippet came from #🎨-css-snippets btw, try looking in there next time

[round coral]

oh thank you so much. i recall having a snippet for this but i thought it was from the bd server.

[distant spindle]

Glad i could help

[forest furnace]

hey, is there any way to make the vc chat feature open like a normal channel? i've been trying to write some css that did this for FOREVER and i can't get anything to work

[bleak gust]

you cant do it perfectly without a plugin as far as I can tell

[forest furnace]

unfortunate

actually nvm it doesn't work on reload

[sour storm]

this bit here seems to have shat the bed somehow

used to just work and now it looks like this

[sullen rock]

hello

can someone help me with the installer

[sour storm]

wdym

[cloud jolt]

👉 #🏥-vencord-support-🏥

(Auto-response invoked by @pure cairn)

[half crystal]

Yeah discord changed the panel somehow, fucking up shit

[sour storm]

😔

[crimson skiff]

its likely a softx issue you have to wait for gibbu to fix it

[sour storm]

damn

[true bloom]

Did CSS just break or something?

I've got e.g.

/** Spotify Player / Popup **/ .theme-dark #vc-spotify-player{background:transparent!important;}```
the class is correct but it doesn't inject?

I applied the css via OpenASAR and it works fine but not the default Vencord toggle

Not sure what changed in the last 3 days

(I think I might be in the wrong channel tbh, more of a support question )

[crimson skiff]

i really wanna make a snippet, but idk what snippet to make

[plain kelp]

Ooer theme

[smoky belfry]

make one that render discord upside down so australians can use Vencord too

[crimson skiff]

ight bet

[echo frost]

what doing it on html instead of app thing work with popups?

[smoky belfry]

that's not good tho, not what i said
i said upside down not rotated 180 degrees
i want a mirror translation 🙂

[echo frost]

upside down is rotated 180 degrees not mirrored

but I think you can do it with scaleY: -1; or something?

[crimson skiff]

are ya happy now

[smoky belfry]

ah me say wrong speak engrish hard

[smoky belfry]

yeah thanks very cool

tho it doesn't work on everything

[crimson skiff]

thats what i said

i cant get popup stuff to work

[echo frost]

oh doing it on html still doesn't fix the tooltips

it needs to change the top: [amount]px to bottom

[smoky belfry]

best i have for now
html,[class^=layerContainer],[class^=drawerSizingWrapper]{transform:scaleY(-1)!important;}

doesn't include tooltips

[echo frost]

ew
are these from an experiment

oh yep
it's this

[iron smelt]

I like them

They look nice

[bleak gust]

I disagree

They should've made it the actual icons of the game or streaming service

[vestal field]

the idea is fine but the icons themselves are mid

they also shouldn't be green

they should be the same color as the text

[echo frost]

yeah the green is the main problem

[iron smelt]

Can agree about the green, and maybe the music icon should be something else… but other than that, I actually like them

[smoky fog]

so, activity status colour Css coming up? :p

[crimson skiff]

maybe 👀

[smoky belfry]

stupid question, but is there a way in CSS to detect if the user is on normal or on canary and to enable a different block

[bleak gust]

Probably not. Would this be a good feature for ThemeAttributes?

[smoky belfry]

idk it's just that today, i have a snippet that works only on stable and not on canary
but if i make it in a way that works on both, then i end up with it being anormal on stable
so if i could conditionally enable CSS i could make it work on both platform

also by denesting merged i could avoid duplication, but still the root would be annoying
technically i just thought about it, but i could do not has child content... mmmmm

actually i can do that and conditionally
sometimes all you need is to rethink the problem

duplication go trash
this is very cool actually
i didn't think it'd work, but i mean it makes sense that it does

[smoky fog]

yes please. suggested *

[distant nebula]

W theme

[drifting arrow]

WAIT

DID THEY SUPPORT GREEK?

did they

added the greek support?

[distant nebula]

yes

[drifting arrow]

do u know what font is this

[distant nebula]

handwriting text

[drifting arrow]

why the lamdba in handwriting text font flipped y?

[distant nebula]

yes its because the flipped Y

[drifting arrow]

how many language did they supported on this font?

[distant nebula]

latin extended, cyrillic and greek

[subtle sedge]

is there any CSS that runs a css code when screensharing or streamer mode enabled

[echo frost]

you'd (probably) need to use :has() which is very bad for performance normally

[iron smelt]

[echo frost]

?

[echo frost]

what do you want to do?

[iron smelt]

:has() will kill your discord

[echo frost]

yes

[subtle sedge]

is there no alternatives 😭

i tried this and i noticed it was trash

[echo frost]

not really, but depending on how you use :has(), it has more of a performance impact

tried what?

[subtle sedge]

hiding icons when streamer mode was enabled

it worked but fucked my performance bad

[echo frost]

what icons do you want to hide

[subtle sedge]

just some regular ones

all i used has() for was detecting the streamer mode class

[echo frost]

specifically
can you just send the css you used?

[crimson skiff]

like? specify pls

[subtle sedge]

body:has(.colorStreamerMode__6e2b9) [data-list-id="guildsnav"] {
  [class^="icon__6e9f8"] {
    display: none;
  }
}

body:not(:has(.colorStreamerMode__6e2b9)) [data-list-id="guildsnav"] [class^="icon__6e9f8"] {
  display: icon;
}

[subtle sedge]

@echo frost @crimson skiff

[echo frost]

yeah there's a much better way to do that

also doing it like this wonty work if you press the x

[subtle sedge]

ik

i dont know any other way

[echo frost]

yeah i don't think there is

[clear siren]

any day now https://github.com/Vendicated/Vencord/pull/2696

[subtle sedge]

whats ur way ?

[echo frost]

also use .icon__6e9f8 instead of class^=

what does display: icon even do

[subtle sedge]

brings back the icons

[echo frost]

what icons?

[subtle sedge]

guild

[echo frost]

display: icon isn't valid css

This should be quite a bit better

.guilds_c48ade:has(+div>.colorStreamerMode__6e2b9) .icon__6e9f8 {
  display: icon;
}

[echo frost]

^

[subtle sedge]

the first part is the same?

[echo frost]

?

no it isn't

[subtle sedge]

no i meant

[echo frost]

but it selects the same elements

[subtle sedge]

is that

body:has(.colorStreamerMode__6e2b9) [data-list-id="guildsnav"] {
  [class^="icon__6e9f8"] {
    display: none;
  }
}

.guilds_c48ade:has(+div>.colorStreamerMode__6e2b9) .icon__6e9f8 {
  display: icon;
}

this how its like now

it works

but still lags my discord

wait

forgot

[echo frost]

wait wtf is the second part of your snippet

please explain in detail what you're trying to do

[subtle sedge]

the one you sent

[echo frost]

oh

[subtle sedge]

unhide and hide the icons when streamer mode is on

i see u put has

[echo frost]

do this

.guilds_c48ade:has(+div>.colorStreamerMode__6e2b9) .icon__6e9f8 {
  display: none;
}

so you want to hide the server icons

[subtle sedge]

no, all of them

guildsnav

i thought u put guildsnav in it

[echo frost]

???

[subtle sedge]

the server list

[echo frost]

.guilds_c48ade is the parent element of guildsnav

and allows it to be a bit more efficient

[subtle sedge]

ohhh alright

[echo frost]

but this is what you're wanting?

(when streamer mode is enabled)

[subtle sedge]

yea

doesnt lag now

thanks

[echo frost]

do you want nicer looking censored server icons?

[subtle sedge]

sure

would be great

[echo frost]

also made it work with folder icons

.guilds_c48ade:has(+div>.colorStreamerMode__6e2b9) :is(.icon__6e9f8, .icon_f34534, .acronym__6e9f8) {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%2329282f'/%3E%3Ctext xmlns='http://www.w3.org/2000/svg' x='50%25' y='50%25' fill='%23dbdee1' dominant-baseline='middle' text-anchor='middle' style='font-size: 48px'%3E-%3C/text%3E%3C/svg%3E");
}

doesn't censor ones with text icons though
added it

but wouldn't be too hard to add that

[echo frost]

oh it was even easier than i thought

[iron smelt]

Z

OS

[echo frost]

yep

i'm gonna get doxxed now

[echo frost]

@subtle sedge

[subtle sedge]

nice

thanks

[echo frost]

do you also want it w hille streaming?

[subtle sedge]

sure

[echo frost]

also ther reason this is so much more inefficient is because :has() makes it search (pretty much) all of the elements under body when used like that, but for mine, it only looks at the couple children of a sibling of an element

i think streaming would be quite a bit harder and less efficient

but i did make a streaming detection once

idk if i can find it though

[subtle sedge]

i see

[echo frost]

ok found what i was thinking of i think
not quite streaming detection, and very inefficient

[subtle sedge]

its good

streamer mode works well

[echo frost]

that detects these vc icons and then puts them by the server

[subtle sedge]

looks cool

u should post in css snips

[echo frost]

i wouldn't recommend using it, because i'm sure it causes a ton of lag, and isn't very useful

[subtle sedge]

oh

it doesnt use has()?

[echo frost]

(and it's incredibly cursed)

but that's actually more reason to post it

yes it does use :has()

and not very efficient :has()'s

[clear siren]

[subtle sedge]

the curse of :has()

[echo frost]

it needs the multiple ampersands for the right specificity (:

[vestal field]

so far i've managed to not use a single :has() in midnight refresh

i shall reach peak performance

[iron smelt]

I already know how to do peak performance

[half crystal]

I would say "how the fuck"
But then again my theme is using weird shit to mess with padding and stuff whereas yours really isn't so

[echo frost]

i feel like :has() is usually only needed when doing scuffed things

(that's why a lot of my css has it)

[crimson skiff]

i think you know what nesting is right?

[plain kelp]

Nesting is syntax sugar and is largely unrelated to :has

[echo frost]

yes
why?

[burnt maple]

problem with :has() is that conditional CSS is so addictive

[plain kelp]

Unless it's something absolutely trivial I'd just patch it to add a class if the condition is met

[smoky belfry]

is it really that bad ?

[plain kelp]

Traversing the whole tree over and over is pretty expensive

Not only does :has take time to evaluate, but it also requires the selector to reevaluate any time anything changes

[smoky belfry]

i see

[echo frost]

it's much better when using like :has(>.direct-child-or-something) though i think

i always try to use > or + or something when using has

[tardy flower]

I'm curious if it's feesable to use CSS to make the "ShowMeYourName" plugin text above/below the display/friend name
I'm not in particular asking anyone to do it for me, but if you feel like it cool
just didn't want to put in extra effort if it's for sure impossible

or maybe rather ask the dev to build that feature in idk

[smoky belfry]

oh ok good, i'm always using it in that case

[smoky belfry]

if you have the themeattributes plugin, i think it add useful data

[half crystal]

as in show the username above/below the display name?
thats 100% possible

[crimson skiff]

thats also what i do

[supple tartan]

guys, I'm changing the color of --background-primary and almost all elements that use the variable change color, but some elements refuse to do so, and still grab the value from discord css. why is that?

[echo frost]

what'd you mean by this?

[crimson skiff]

i didn't look at the increase in specifity and thought you can merge with nesting

[echo frost]

it already uses nesting

maybe too much nesting

that was from a while ago when i liked making my css as complicated as possible

[half crystal]

Are you using !important ?

[supple tartan]

nope, should I use it on the variable?

[half crystal]

Yes

[supple tartan]

well that doesn't seem to work, that header should have the same color as the div below (yellow circle)

[chilly quail]

you need to set it to body iirc

not root

[vestal field]

no im pretty sure you can use root for all color variables

[vestal field]

inspect it, it might be using a different color variable

[clear siren]

check computed styles and you'll see exactly what rule is taking effect

[proven sigil]

I'm trying to hide the Activities section on a private server (seen below)
I made a snippet that works but messes up every other server that doesn't have activities
is there a simple check i'm missing in the quickcss to make sure css only applies to servers I want? (or plugin I missed?)
My current check is very janky and breaks very easily

div[role="list"][aria-label="Members"] > :nth-child(2) {
    visibility: hidden;
    height: 0;
    padding: 0;
}

I repeat this for every part I want to hide (so nth-child 2, 3, 4, and 5)

this is how it looks on this sever due to the lack of a server check

[pine needle]

/* Remove Activity Members List */
div[aria-label*="Members"] > div > div[role="listitem"] {
    display: none;
}

im using this

[proven sigil]

that's great it reduces just down to this one line without breaking everything
so this works because the activity divs are the only ones with the role "listitem"?

[vestal field]

so peak

@property --small-user-panel {
    syntax: 'on | off';
    inherits: false;
    initial-value: off;
}

@container root style(--small-user-panel: on) {
    .visual-refresh {
        .base_c48ade {
            grid-template-areas:
                'titleBar titleBar titleBar'
                'guildsList notice notice'
                'guildsList channelsList page'
                'guildsList userPanel page';
        }
    }
}

[supple tartan]

@vestal field @clear siren thanks, finally your suggestions led me to a solution. I just had to add .theme-dark and now variables are recognized everywhere

[vestal field]

oh yeah

forgot about that lol

[clear siren]

I've also been planning on using custom props and containers but haven't found a good use yet (and been procrastinating on theming partly because even my actuallybasicbackground makes my vesktop lag like hell)

theming discord is just no fun anymore 😭

[glacial citrus]

does someone have the list of things that cause lag in css now

i need to fixup my quickcss

[vestal field]

everything

[glacial citrus]

yea, thats what im experiencing 😭

[vestal field]

transitions, backdrop blur, and bad selectors (:has(), [*=], *]

[glacial citrus]

wait, whats the third selector

whats *]

[vestal field]

oh just like using *

actually thats not that bad

but if you have something before it then it kinda gets weird

[glacial citrus]

ah

is :is laggy?

[crimson skiff]

isn't :is just extra specified attributes?

[glacial citrus]

im not that good at css 😭

[vestal field]

i dont think :is and :where are bad for performance

:is is kinda just a shortcut for having a list of nested selectors i think

[glacial citrus]

i wonder how bad something like this is

it doesnt even work anymore 😭

[echo frost]

and :where() is like is, but it doesn't add specificity

so like :where(.class) {} will select the same element ass .class {}, but the :where() one will have 0 specificity but normal .class one will have 1?

yeah

[glacial citrus]

weird unminified class name

[echo frost]

huh

[vestal field]

[echo frost]

oh .app-launcher-entrypoint?

i was looking at the element you had highlighted

[fading escarp]

lowkey it would be interesting if someone was to make a theme with macos type dockbar for server list

like tabs v2

[crimson skiff]

like how? show first 5 servers/folders then hover makes it expand?

and Horizontal Server List exists btw

[fading escarp]

yesh

yeah*

[glacial citrus]

@tall lion bringing this here because its more relevant

from what i can tell, this will break pindms

it also removes message requests

[tall lion]

Reducing 8 to 7 stops is breaking pindms (the top label/dropdown of the top category was getting removed.)

I haven't tested message requests, I think I'll need to have another look at the CSS to try and find something that the stuff I want to remove has in-common, although as far as I can remember there's almost nothing.

[tall lion]

My css selectors are getting smarter... I don't know if this breaks message requests though:

ul[aria-label="Direct Messages"]> *:has(~ [class^="sectionDivider"]):not([class^="friend"]){
    background-color: red;
}

[half crystal]

note that :has is slow and fucky
i suggest, just selecting sectionDivider outright

[tall lion]

The point is that I want everything before the section dividers but not the friends icon, so I'm using ~ for "has .... sibling anywhere after it"

[half crystal]

just select the elements outright

[tall lion]

The problem is that they don't have unique classes as far as I can tell. I'll see if i can do it individually though. Might be a ton of duplication but it's not an issue

[plain kelp]

Make a patch

[half crystal]

[href="/store"]
[href="/shop"]
[style="height: 8px;"]

[plain kelp]

Or do your styling on foo and undo it in bar ~ foo

[tall lion]

Didn't know I could select by hfref that's huge

[glacial citrus]

this is what i ended up making

ul[aria-label="Direct Messages"]>:is(
    div[class^=container__], 
    div[class^=friendsButtonContainer]+li+li,
    div[class^=friendsButtonContainer]+li+li+li 
    ) {
    display: none;
}

[tall lion]

Modified it to work for me...

ul[aria-label="Direct Messages"]>:is(
    div[class^=container__], 
    div[class^=friendsButtonContainer]+li,
    div[class^=friendsButtonContainer]+li+li, 
    div[class^=friendsButtonContainer]~div[class^="section"],
    ) {
    display: none;
}

Your version didn't get rid of the nitro button for me

[glacial citrus]

huh, could you send a ss of your sidebar

[tall lion]

This is with/without the css

[glacial citrus]

do you not have message requests, even without the css

[tall lion]

I think it's because in my settings I allow anyone to message me? (I am yet to be burned by it so i like being open to chat)

[glacial citrus]

ah

[tall lion]

These are my settings:

[glacial citrus]

weird

you prob havent gotten one thats gone to requests yet

because you have them enabled

[tall lion]

Can you DM me to see if it will go to requests? Then I can see if we can protect "message requests" somehow

[glacial citrus]

i dont think it will

i sent one

[tall lion]

It went there

[glacial citrus]

oh

neat

[tall lion]

Now shop shows up instead because message requests is directly under friends

ul[aria-label="Direct Messages"]>*:is(
    :has(a[href="/store"]),
    :has(a[href="/shop"]),
    div[class^="container"],
    div[class^="section"]

) {
    background-color: red;
}

This is what I'm settling on. Yes it has has and apparently that's terribe for performance but it's kinda the only way to select exactly what you need.

[glacial citrus]

I'm pretty sure it can be done with only one has

[glacial citrus]

Also *is seems terrible

[iron smelt]

Add the discriminator back?

[worldly moss]

waste of space

[iron smelt]

dear God, what would we ever do with that 35x16

[minor raft]

https://x.com/nitzukai/status/1890490553386639673?s=46 this would go hard as a theme

nitzu 🫧 (@nitzukai) on X

Discord as a native OS X Mountain Lion app

Discord - 2012 Concept

X · Feb 14, 2025, 7:57 PM

[crimson skiff]

discord can use it far worse than we can

[crimson skiff]

usually nth child isnt good for sections that can always change, like the dms section

[iron smelt]

i will put ad

[crimson skiff]

i think discord will do the same

[iron smelt]

Honestly, It would actually be the perfect place to put someone’s guild tag if they had one

[supple tartan]

so.. can div[class*="container_"] cause more lag than div[class^="container_"]?
context: I spent two months remaking my theme to make it more performant (basically removing all the :has() and by that, changing the design I had in mind) and now that everything is selected via[class*="container_"] it lags again

[vestal field]

yes

[bleak gust]

YES

[vestal field]

looks like a lot of work

[crimson skiff]

can anyone check my seamlesschatbar whether the jump to present bar isnt taking the width of the chat bar?

[pine needle]

refresh
before - after.

[crimson skiff]

i assume you are using my snippet? if so no, it doesnt support visual refresh

[steep wigeon]

opinionz plez

(yes i made oneko green)

[tall lodge]

pls send me the theme link

[distant spindle]

I think he made it

[steep wigeon]

greeen

very green

too green? i dont think so

[supple tartan]

thanks, I hope this fixes the lag once and for all 😭

[half crystal]

the original version of my DDEX4 ran at like 1fps no matter what device you were on
that was like 900 lines
ddex4 has now been re-coded to reduce lag and now at 1.8k lines
runs like a charm
yeah, css lag is important

[distant spindle]

I mixed up, its this
https://github.com/nanoqoi/vencord-theme

i think

[supple tartan]

lol, any tip to achieve this? bc I made that change and it still has the same lag. my selectors look like this:

[half crystal]

1. dont use futureproof selectors unless if you are making a small snippet (which you are not lol).
2. dont do div[...]. CSS works right-to-left, so this adds exra shit to the engine to look for.
3. in general, dont use too much specificity, as this adds exra shit to the engine to look for.

[supple tartan]

thanks, btw the first one killed me so, does this mean that every few months I would have to update the whole theme?

[half crystal]

yup. dont worry, theres a class updater

[supple tartan]

and how does this work?

[iron smelt]

https://syndishanx.github.io/Website/Update_Classes.html

[supple tartan]

woah

thanks

for a moment I was thinking about giving up 🤧

[vestal field]

.activityPanel_c48ade {
    display: none;
}```

[vestal field]

backdrop-filter is so jank...

[stark epoch]

Hey does anyone have an example of how i would target the sidebar added by Better folders plugin?

a theme im using isnt fully compatible im trying to tweak it and move the second bar down.

[crimson skiff]

#1326506110345023538 message

[stark epoch]

ok so almost works as im using a different horizontal server list than the horizontal server list theme

https://betterdiscord.app/theme/WizardUI

trying to tweak this one

[crimson skiff]

that is VERY different and I'll probably never add support to it

[stark epoch]

yeah...

why i was hop[ing i could target it myhself to patch it manually