🎨-theme-development

[grand surge]

/*テキストチャットのGIFを隠す*/
[class*="sansAttachButton_"] > [class^="buttons_"] > div:has([d^=" M-7,-10 C-8.656999588012695,"]) {
  display: none;
}

[rapid vector]

Thank you all so much!
It's a comfortable discordLife!

[pure cairn]

This doesn't make sense to me

Like... Why not

[worldly moss]

streamer mode enables automatically when you stream.. so..

wouldnt make much sense to enable it unless youre recording

[pure cairn]

another variation of this could be

[class^=channelTextArea_] [class*=sansAttachButton_] [class^=buttons_]:not(:hover) div:not(:last-child) { 
  display: none; 
}```
which hides all buttons except emoji and shows them when you hover it

[woven plover]

What! That's great!

Would you mind PRing that to Disblock?

I've been trying to get rid of the aria-label stuff since it doesn't work on other langs.

[pure cairn]

svg icon selecting should work in every language

[woven plover]

How do you select a specific SVG icon though? For example the sticker picker does not seem to have a unique name or anything in the SVG tag.

[pure cairn]

div:has([d^=" svg path "])

[woven plover]

ohh you paste the full SVG path in there :o

[pure cairn]

not the full path, but a good portion of it should work fine

[woven plover]

This is a good last resort to avoid aria-label.

[pure cairn]

[gusty rose]

Well it begins with it as the selector, note the ^, though yeah I am trying to also avoid using the likes of aria-label really janky when it is also very language specific, i.e. discord may periodically change those labels if a better translation is offered, and those would be broken when specifying specific aria-labels

[woven plover]

y e p

I made the aria-labels case insensitive in the theme to make it at least work when they change the capitalization (which is often apparently) but I will have to replace them entirely to allow other langs.

[clear siren]

I have a similar snippet; show only emoji button unless clicked

.expression-picker-chat-input-button:not(:has([class*=emojiButton_]))
 { display: none; }
[class^=channelTextArea_] [class^=buttons_]:has([aria-expanded="true"]) .expression-picker-chat-input-button
 { display: flex; }

[woven plover]

Does including the _d0696b not break it periodically?

[gusty rose]

I don't believe it does. Though hardcoding it like that can bring its own headaches down the track

[clear siren]

yeah I usually use attribute selectors but this is just something in my quickcss that I'm not sure I'm keeping as it is or what

I might do something different which is why it's kept kinda prototype

updated with proper selector (not optimal but whatever)

[viscid tiger]

need some help finding out if a dm is with a bot or not, this css basically adds an @ symbol before the username and since i can't check for discriminators as both the discriminator and username share the same span text it's hard to figure out other workarounds.

[class^=chatContent_] [class^=messagesWrapper_] [class^=container_] [class*=marginBottom20_]::before {
color: var(--text-muted);
    content: "@";
}```

that is in the start of dms btw.

[clear siren]

so you want to add a @ for users but not bots? or something?

[viscid tiger]

correct

i only want it on users

[clear siren]

using the bot tag on messages or the sidebar with a :has() is the way

[viscid tiger]

how would i check for the userpanel and the chatcontent all in one thing though?

would i need to change chatcontent to the previous element above it?

[pure cairn]

I didn't get where you want to put the @

but I guess something like

[class^=chatContent_] [class^=messagesWrapper_]:not(:has([class*=botTag_])) [class^=container_] [class*=marginBottom20_]::before {
  color: var(--text-muted);
  content: "@";
}```
works

it won't work if it's a brand new DM and there are no messages, but usually bots send messages to you first
so there shouldn't be too many issues

[iron smelt]

i’d just keep it, I think it adds pizzazz

[mortal mantle]

we about to have more color-mix abuse

[plain kelp]

color-mix is the best thing that's happened to css since flexbox

[viscid tiger]

that works well but since the user panel also shows the bot tag how would i make it work with that?

and since the user panel is shown by default i think that would be a great addition as well to continue displaying the @ before the name on the start of dms.

[pure cairn]

[class^=chatContent_]:not(:has([class^=userPanelInner_] [class*=botTag_])) [class^=container_]``` ... Etc

I don't remember if the user panel is a child of chatcontent though

[clear siren]

it's not

[viscid tiger]

nope it isn't

[pure cairn]

Dunno then, I'll check later when I get back to my pc

[pure cairn]

[class^=chat]:not(:has([class^=content] [class^=profilePanel_] [class*=botTag_])) [class^=content] [class^=chatContent_] [class^=messagesWrapper_] [class^=container_] [class*=marginBottom20_]::before {
  color: var(--text-muted);
  content: "@";
}```

there you go

ofc it breaks if you close the profile panel

[mint kiln]

anyone know how can i change a container content?

so instead of showing read all i want it to show checkmark unicode

[torn zinc]

https://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css

[mint kiln]

Epic

hmm it no work
is it because the text im trying to replace is from a plugin?

[clear siren]

no that won't matter

lemme cook

[pure cairn]

isn't it just visibility: hidden and then content: "your checkmark" in the pseudoelement?

[mint kiln]

i manage to make the read all hidden

but not readd the checkmark

✓

idk if its incompat or somth

[clear siren]

.vc-ranb-button > div { font-size:0; }
.vc-ranb-button > div::after { content: "✓"; font-size: 14px;}

[mint kiln]

hes cooked

now how do rotate the content

chatgpt actually helped lmao

[pure cairn]

transform: rotate(90deg)

or whatever amount you want

[plain kelp]

Contrary to common belief, chatgpt isn't terrible at everything

[clear siren]

yeah chatgpt can be a useful tool

[plain kelp]

If you can find it in two seconds on google I give it a 70% chance of getting a correct answer

[mint kiln]

its better

but now it has this huge ass gap

[clear siren]

oh you have some horizontal serverbar thing

[mint kiln]

yeah thats why i wanted the rotate 90 deg

because without it its sideways

[clear siren]

try .vc-ranb-button {width: auto;}

[mint kiln]

nop its acting as its actually sideways

[clear siren]

oh right

[mint kiln]

so width would be height

[pure cairn]

I was about to say "wouldn't that be affected by the font size" and then my goofy aah brain remembered it was set to 0

[clear siren]

what is the css you have for the serverbar

[mint kiln]

element picker cannot pick it

[mint kiln]

https://github.com/DiscordStyles/HorizontalServerList

[clear siren]

[class^=listItem_]:has([class^=guildSeparator_]) {display: none;}
.vc-ranb-button { margin-bottom: 0;}

there is also a gap:10px on the whole server sidebar which also creates spaces

[mint kiln]

yeah

the gap helps a bit

but also destroy the whole bar

[clear siren]

yeah

[mint kiln]

but the snippet you sent worked

now it looks nice

[clear siren]

yeah I figured that would be the easiest solution

[mint kiln]

now for another stupid theme snippet

would it be possible to basically "merge" the friend icon with the online bar

because deleting the icon makes it so you cannot exit dm

so thats important

basically somth like this

[mint kiln]

also apparently removing this icon remove every icon too

so thats neat

[shrewd tree]

anyone got a snippet to make your messages align to the right?? i found some here that use the theme attribute plugin but i cant get them to work

[echo frost]

You definitely could've found it very easily on google like someone said there, but like this

.selector {
  filter: none;
  transition: filter 1s ease;
  &:hover {
    filter: grayscale(1);
  }
}```

the &:hover being inside .class{} is equivalent to .class:hover
https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

and transition is what makes it fade in/out
https://developer.mozilla.org/en-US/docs/Web/CSS/transition

[crystal oar]

thank you 🙏

[vestal field]

🖕 discord

[grand surge]

[class^="channelBottomBarArea_"] > [class^="channelAppLauncher_"] {
  display: none;
}

or

.channelAppLauncher_df39bd {
  display: none;
}

I haven't tried the one below, so the button may disappear on voice channels, etc.

[vestal field]

i don't like to straight up hide things in case people who use my themes need them

[grand surge]

How about moving it to the side?

[vestal field]

i think i'll probably just give it a border connected to the message bar

im too lazy to mess with the position

[grand surge]

.channelBottomBarArea_a7d72e{
    & > .channelTextArea_a7d72e > .scrollableContainer_d0696b{
        border-radius: 8px 0px 0px 8px;
    }
    & > .channelAppLauncher_df39bd{
        margin-left: 0px;
        & > .buttonContainer_df39bd > .button_df39bd{
            border-radius: 0px 8px 8px 0px;
        }
    }
}

Seems odd that the bottom right is not a submit button.

[echo frost]

is that part of visual refresh?

wtf happened
this is even worse looking than before

no css enabled

like wtf is that "white" in the leave vc button

darker is much better at least

[echo frost]

what even makes the activity icon appear?
I almost never see it because i have to right click the upload button to see it

[vestal field]

no clue but its just there always for me now

must be one of their experiments

[echo frost]

yeah ig

[echo frost]

💀

ok i think that glow is only because i just turned it on

[echo frost]

wait this app launcher just replaces your chat with /
that other app launcher is actually kind of cool

but it should be in this context menu

[mint kiln]

ive hit my gpt 4o limit so cant use him rn
can someone help me debug stuff?

.channel_c91bad:nth-child(2) > div,
.channel_c91bad:nth-child(4) > div {
    display: none;
}
/* Ensure the container is relatively positioned to contain the absolutely positioned elements */
.channel_c91bad {
    position: relative;
}

/* Make original elements invisible */
.channel_c91bad:nth-child(2) > div,
.channel_c91bad:nth-child(4) > div {
    visibility: hidden;
}

/* Create and style new buttons */
.channel_c91bad:nth-child(2)::after {
    content: 'Friend'; /* Customize the button text */
    background: var(--background-tertiary);
    color: white; /* Adjust text color as needed */
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: block; /* Ensure the new buttons are block-level */
    position: relative;
    z-index: 10; /* Ensure the buttons are above other elements */
}
.channel_c91bad:nth-child(4)::after {
    content: 'Request    '; /* Customize the button text */
    background: var(--background-tertiary);
    color: white; /* Adjust text color as needed */
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: block; /* Ensure the new buttons are block-level */
    position: relative;
    z-index: 10; /* Ensure the buttons are above other elements */
}

/* Ensure they are side by side */
.channel_c91bad:nth-child(2),
.channel_c91bad:nth-child(4) {
    display: inline-block; /* Display side by side */
}

/* Add margin to the container to avoid overlap */
.channel_c91bad {
    margin-bottom: 0px; /* Adjust based on the height of the buttons */
}```

the button shows up

but i cant click it

Friend is well friend
and request is msg request (i would use the svg icon but idk how)

its a modification of #🎨-css-snippets message but one that fits my horizontal server list more

[grand surge]

I've tried applying CSS.
Request was not displayed.

How do you set up "Privacy & Safety"?

[hazy tinsel]

#theme-support

[mortal mantle]

possible but hacky and unstable

so i dont recommend

[mint kiln]

trying to shift the typing down by 3rem
it works for normal message
but when replying it doesnt

the typing shift up when replying

but i cant separate the normal one and the one when replying

.typing_d7ebeb{
    top: 3.5rem;
}```

idk what else to do

apparently its just

    position: static;
}```

[mint kiln]

i still need help with this one tho

[grand surge]

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8{
    & > .channel_c91bad:nth-child(2){
        width: 50%;
        height: 7%;
        & > .interactive_f5eb4b{
            height: 100%;
            & .avatarWithText_c91bad{
                & > .avatar_f9647d{
                    width: 12px;
                    height: 12px;
                    margin-right: 4px;
                }
                & .name_f9647d{
                    font-size: 12px;
                }
            }
        }
    }
}

How about this?

[mint kiln]

positioning and all that worked
but i still cant click the button

oh wait

i can

just it has to be on the text

well i guess this works if i just scale up the text

now to figure out the positioning

[echo frost]

I don't think the pseudo elements are clickable?

[echo frost]

ok ig they are
try using padding maybe

[mint kiln]

i did something

and now they work

but god what the fuck happened with the rest

    display: flex;
    flex-wrap: wrap; /* This allows multiple lines if there are more than two items */
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2),
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) {
    width: 50%;
    height: 1%; /* Adjusted height */
    display: flex;
    align-items: center; /* Centers content vertically */
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2) > .interactive_f5eb4b,
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) > .interactive_f5eb4b {
    height: 100%;
    display: flex;
    align-items: center;
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2) .avatarWithText_c91bad,
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) .avatarWithText_c91bad {
    display: flex;
    align-items: center;
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2) .name_f9647d,
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) .name_f9647d {
    font-size: 12px;
}```

help me

[echo frost]

can you dm me

i don't have the message request button

[mint kiln]

sent

[echo frost]

what are you trying to do?
it's doing this for me

[grand surge]

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8{
    & > .channel_c91bad:nth-child(2){
        width: 110px;
        height: 7%;
        & > .interactive_f5eb4b{
            height: 100%;
            & > .link_c91bad > .avatarWithText_c91bad{
                color: transparent;
            }
            &::before{
                position: absolute;
                content: "text";
                width: 110px;
                text-align:center;
                font-size: 16px;
                color:var(--channels-default);
                pointer-events: none;
            }
            &:hover::before{
                color: var(--interactive-active);
            }
        }
    }
}

How about this?

[mint kiln]

sec

.channel_c91bad{
    margin-left: 0px;
}

.channel_c91bad:nth-child(1) {
  display: none;
}
.channel_c91bad:nth-child(3) {
  display: none;
}
.privateChannelsHeaderContainer_c47fa9 {
    display: none;
}
.divider_fc4f04 {
    margin-right: 0px;
    margin-left: 0px;
}
.searchBar_f0963d {
    display: none;
}
.titleWrapper_fc4f04 {
    display: none;
}
.avatar_a7d72e{
    display: none;
}
.searchBar_f0963d > button {
  visibility: hidden;
}
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 {
    display: flex;
    flex-wrap: wrap; /* This allows multiple lines if there are more than two items */
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2),
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) {
    width: 50%;
    height: 1%; /* Adjusted height */
    display: flex;
    align-items: center; /* Centers content vertically */
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2) > .interactive_f5eb4b,
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) > .interactive_f5eb4b {
    height: 100%;
    display: flex;
    align-items: center;
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2) .avatarWithText_c91bad,
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) .avatarWithText_c91bad {
    display: flex;
    align-items: center;
}

.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(2) .name_f9647d,
.sidebar_a4d4d9 > .privateChannels_f0963d .content_eed6a8 > .channel_c91bad:nth-child(4) .name_f9647d {
    font-size: 12px;
}```

heres the full css

[mint kiln]

this reverts back to the original issue of

[mint kiln]

this

[mint kiln]

the concept is like this

you might need both of these actually

so that you can see what im trying to do

[mint kiln]

i mean yeah it works but with my very specific css combo it causes chaos

    display: flex;
    flex-wrap: wrap; /* This allows multiple lines if there are more than two items */
}```

something with this

[echo frost]

using this sort of works, but i don't really like using translate for this

[mint kiln]

i guess if it works it works?

[echo frost]

and display: none on shop and nitro menu
and use something like this for it instead of like i think nth-child you had before?
(mostly taken from #1267811367310590063 message, but i also think i used this selector before)

[role="listitem"]:has([href="/store"], [href="/shop"]) {
  display: none
}```

I didn't make selectors for the friends and message request buttons bc just was testing, and i'm tired and gn

[mint kiln]

yeah that works for removing the nitro and shop

[grand surge]

.sidebar_a4d4d9 > .privateChannels_f0963d{
    & > .searchBar_f0963d{
        display: none;
    }
    & .content_eed6a8{
        & > .channel_c91bad:nth-child(2){
            width: 110px;
            height: 7%;
            & > .interactive_f5eb4b{
                height: 100%;
                & > .link_c91bad > .avatarWithText_c91bad{
                    color: transparent;
                }
                &::before{
                    position: absolute;
                    content: "text";
                    width: 110px;
                    text-align:center;
                    font-size: 16px;
                    color:var(--channels-default);
                    pointer-events: none;
                }
                &:hover::before{
                    color: var(--interactive-active);
                }   
            }
        }
        & > :has([href="/store"], [href="/shop"]){
            display: none;
        }
    }
} 

How about this?

Try using only the "Horizontal Server List"

[mint kiln]

i think i already found the solution

soo much tinkering and the code is kinda dirty but it works

nicely working

[mint kiln]

how could i change this to fade into transparent instead of a full solid color?

visual refresh is cool but damn some of the changes is stupid

[clear siren]

what I did was make it scroll away

[class^=sidebar_] [class^=container_]:has([class^=header_]) { position: static; }

also did this to make the image not zoom and took out the weird shadow from the top of it away

[class^=bannerImage_]::before { display: none; }
[class^=bannerImage_] { transform: none !important; }

[pure cairn]

Uhhhh

Do svg icons have some sort of copyright?

[clear siren]

maybe?

[pure cairn]

Platform icons? (youtube, twitter, reddit etc...)

[mint kiln]

nice idea

oh god now it looks bald

[solid ore]

probably, but if youre using them to show a link to their website im sure it falls under some fair use thing

[pure cairn]

hmm, you have a good point

[mint kiln]

think i like what i did here

combined the image not zooming and the server name fading

also shifted up the buttons

    background: linear-gradient(to bottom, black 70%, transparent 100%);
    border-bottom: hidden;
}
#channels > ul > div.container_c29ea9 > div.buttons_c29ea9 > div > button{
    background: transparent;
    transform: translateY(-10px);
}
#channels > ul > div.container_c29ea9 > div.buttons_c29ea9 > button {
    background: transparent;
    transform: translateY(-10px);
}
#channels > ul > div:nth-child(3){
    display: none;
}```
idk who wants this but hey

[pure cairn]

https://tenor.com/view/dh9511dh-head-banging-on-the-wall-gif-13355825

how tf do I use multiple paths for the same border-image

atp I can set a pseudoelement instead of border-image

[shrewd tree]

is there a way to add an options tab to your theme? such as different background images and such

[grand surge]

Does anyone know how to hide this new Activites button? I am already using CSS to hide the rest but now they added this button and there is also empty space between the Activities and the Emojis buttons

[href="/store"], [href='/shop'], button[aria-label="Send a gift"], [for="burst-reaction-toggle-button"], [class*="nowPlayingColumn"], *[aria-label*="sticker"], [aria-label="Help"] { display: none; }

This is what I'm using as CSS now

[shrewd tree]

Also does anyone know how to get rid of that tiny little triangle at the top of the channel list above the server name? ive been trying and cant find it

[clear siren]

not currently maybe in the future (usercss feature is pending)

right now the best way to provide options is using css variables in a :root section the user can copypaste to quickcss and customize there

[bleak gust]

you can disable the experiment

[grand surge]

Where is this setting?

[bleak gust]

Experiments page

You need to enable the plugin to see it

[pure cairn]

enable experiments plugin -> look for "app launcher" -> set to not eligible

[grand surge]

Perfect, it worked, thanks!

[pure cairn]

[pure cairn]

fuck svg's
we go with png's

[solid ore]

cant u merge the 2 paths into 1 using inkscape or smthng

im pretty sure i did that once

[pure cairn]

I have no idea

so I'll just stick to what I know

[pure cairn]

I tried using Inkscape earlier, but couldn't find the option

mf keeps yelling at me

[solid ore]

make sure u select all the paths u wanna merge and then press this

[pure cairn]

it breaks

[solid ore]

oh probly because the triangle is a white triangle rather than an empty triangle, so it just replaces the fill

[pure cairn]

yeah

eh, it's fine
PNGs work

[mint kiln]

how can i inspect the element

if when i click away it disappear

F8 doesnt work while using search func

[pure cairn]

use the f8break plugin

a

fr?

[mint kiln]

ye

[pure cairn]

now that's interesting

[solid ore]

wait i gotchu

[mint kiln]

all i wanted is to overflow: visible; on all these

monafried

[night sedge]

cascading

[pure cairn]

Will take a look later after dinner

Thank you

[mint kiln]

oh shit i cooked

[solid ore]

wait sorry that one was messed up, this one is good

[mint kiln]

add break on: subtree modifier to the element

and it will F8 automatically everytime it changes state

[fossil hatch]

Svgs are my specialty

[night sedge]

do you write svg

[mint kiln]

half the battle is done

[fossil hatch]

I know how to use svg with css

[night sedge]

but do you know how to write svg

[fossil hatch]

Depends what you mean by write svg lol

I use Inkscape

[night sedge]

based

i been using illistrator my whole life for svgs and stuff

[mint kiln]

incase whoever wants to edit these text they are

.option_b0286e, .option_b0286e strong, .option_b0286e span

[night sedge]

hmm

how you change font

nvm got it

[mint kiln]

just change it to any font installed on PC

so its local font instead of hosted ones

[plain kelp]

Why are you fonting every single element

Instead of just changing the font variable

:root {
    --font-primary:  sans-serif;
    --font-display:  sans-serif;
    --font-headline: sans-serif;
    --font-code:     monospace;
}

[night sedge]

[plain kelp]

There's also --font-clan-body and --font-clan-signature, but they seem unimportant

[night sedge]

how can i load up google fonts without havin em installed

[pure cairn]

#🎨-css-snippets message

[night sedge]

nice

[mint kiln]

thisisfine

kms

[mint kiln]

is that whole thing really just to find how many n*n is

[plain kelp]

Could be optimized, but if it works, what's the problem?

[night sedge]

its too fast

[plain kelp]

I mean looks fast enough yeah https://godbolt.org/z/q4f4j1eYn

[night sedge]

the compiler just optimizes it lol

[mint kiln]

i really spent this whole day doing css

[mystic cove]

@solid ore Sorry for pinging, I just noticed your ruleset causes severe performance drop when voice chat is opened

combined with catppuccin (of course it's not yours but still gonna mention) and it's lagging heavily

it could be false positive though, for some reason it lags only in one specific channel, which is very weird it causes issues in any voice channel, especially when resizing them

[solid ore]

which theme

[mystic cove]

HideNitroUpsell

[solid ore]

gimme a sec to get to my pc

[mystic cove]

man it's so weird

combination of both catppuccin and yours is causing problems

[solid ore]

wdym resizing

[mystic cove]

typing as well

I have zero clue if it's local problem, it didn't happen before

Say, have you updated your css recently?

[solid ore]

yes

today

[mystic cove]

that's when I started feeling it, huh

[solid ore]

so when u have vc chat open?

[mystic cove]

yeah and you can clearly tell the performance drop when you resize the chat sidepanel

[mint kiln]

has anyone made a snippet for reverting profile picture to the old size before visual refresh?

i can only manage to get the pfp part working

but the avatar deco doesnt follow it

and somehow changing that manually just never right

[solid ore]

can u send the catpuccin theme so i can try to replicate the issue

[mystic cove]

for reference

[mystic cove]

sure, @import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha-mauve.theme.css");

Oh boy, I think the problem is not caused by vc chat but by voice channel window with members and stuff

but typing in chat also causes freezes and stuff

[solid ore]

by voice channel window with members and stuff
wdym

i cant replicate it

[mystic cove]

I don't know...

but inactive channels don't have that performance drop

only with several people in it or something

no idea why

[solid ore]

honestly idk what it is, i gtg rn i'll have a look again later

thanks for lmk

[clear siren]

I think :root{ --custom-message-avatar-size: 40px !important; } should be enough

not sure if 40px was the size before

[mint kiln]

it was

nice actual sane size for profile pic

[pure cairn]

My submission was ignored

I'll have to make better stuff

[pure cairn]

hm nope, there is still no white here

thank you for trying anyway, appreciated

still wip, but it's already at a good point

might have to rework the code a bit for further customization

[shrewd tree]

asking this again, does no one know how to get rid of that triangle gap above the server name/discussion search?

[plain kelp]

That'd be a border-radius on something

[clear siren]

[class^=sidebar_] { border-radius: 0 !important; } should take care of it

[shrewd tree]

thank you SO MUCH

[pure cairn]

thoughts on this?

[solid ore]

it looks good but the youtube and channel name arent aligned, and have different font weights & sizes

i think the brighter red that u have now is nicer tho

[pure cairn]

[pure cairn]

I switched to the actual youtube red, it's way better than the other one

[pure cairn]

btw you don't want to see the code for this, it's messed up

[pure cairn]

we love manual adjustments

[solid ore]

um.. how do i use this to benchmark nested css? 😅

[echo frost]

put ths css in backticks `

`

that

there

[pure cairn]

hmmm, can I "clip" an element to prevent a part of it from showing?

[echo frost]

wdym?

[pure cairn]

1 sec, I'll send an image

[solid ore]

resolveNestedSelector(css code, node) ?

[pure cairn]

since in Twitch embeds there is always the "- Twitch" part at the end, I wanted to clip it from the element width

[echo frost]

oh wait you replied to that github repo i sent

idk how to use that

[pure cairn]

something like a width: calc(original width - the thing's)

[solid ore]

yeah cus the original one only does the first selector

[echo frost]

but in the message i replied to (which doesn't work with nested selectors), it's

benchmarkSelectors(`css here`)```

after pasting in the snippet

but yeah idk how to use that one

did you download it with npm?

[solid ore]

yeah i (eventually) figured out how to use that one

[solid ore]

no i just define the function in the console every time i use it..

[echo frost]

that won't work?

because it's not a function yet?
misunderstood and also thought we were talking about the github repo

oh wait it doesn't even have the npm install command

[solid ore]

idk what u mean, i define benchmarkSelectors by copypasting the js

[echo frost]

oh im talking about the https://github.com/csstools/postcss-resolve-nested-selector

[solid ore]

oh yeah that one gives errors when i tried to use the js in the example

[echo frost]

yeah i don't think you can just copy and paste it

ig this is what to use for npm?

yeah
https://www.npmjs.com/package/postcss-resolve-nested-selector

[nimble spruce]

can someone test this snippet on Windows 11? It should turn this:

Into this:

But I'm running Win10 and am too lazy to spin up a VM right now lol

div[class*="titleBar_"] {
    height: 0px;
}
div[class*="wordmark_"] {
    display: none;
}
div[class*=winButton_] {
    top: 13px;
    transform: scale(1.6);
    padding-right: 4px;
    right: 4px;
    -webkit-app-region: no-drag !important;
}
div[class*=winButton_]:hover {
    color: var(--currentColor);
    background-color: transparent;
}
/* small hack to avoid https://github.com/electron/electron/issues/1354 */
[class^="winButtonClose_"],
[class^="closeButton_"] {
    -webkit-app-region: no-drag;
}
div[class^="upperContainer_"] {
    -webkit-app-region: drag;
    width: calc(100% - 96px);
}
/* revert offset when sidebar is open */
div[class*="threadSidebarOpen_"] > div > section > div[class^="upperContainer_"] {
    width: 100%;
}

[echo frost]

seems to work

[nimble spruce]

sick, thanks

[solid ore]

can i dm u about this quickly

[echo frost]

um ig?

why dm instead of talk here though

[solid ore]

i j dont wanna spam the chat with me being dumb

[echo frost]

(but i'm dumb too, so i need someone to help me help)

[vestal field]

are you guys trying to benchmark nested selectors

[echo frost]

yeah

[vestal field]

if you figure something out pls let me know

[pure cairn]

f*ck you
unnests your selectors

[solid ore]

unnests your selectors
pls do lol

[pure cairn]

is it that bad?

[solid ore]

i mean it would just make it easier to benchmark

[pure cairn]

well yeah, that one's a given

[solid ore]

thats the only thing id use an unnested version for

[pure cairn]

time to have an unnested version of every theme

surely nothing will go wrong

[echo frost]

pls no

make something that generates an unnested version instead

[pure cairn]

horror

[clear siren]

that certainly is wires

[pure cairn]

can I use max-width alongside width?

max-width: fit-content; width: calc(100% - 30px);
something like this

[echo frost]

i think so?

[echo frost]

did you do that manually?

[pure cairn]

Yeah, and it was horrible

[pure cairn]

I tried but didn't quite work, I'll look at it more tomorrow

[echo frost]

idk how fit-content works

but using max-with and width works i'm pretty sure

[pure cairn]

Yeah, but I must have a dynamic max-width

Because twitch usernames all have different lengths

[stone lintel]

tryna figure out if theres a way to alter this code so the message bubble only include the text thats in the message, but leave out the username and timestamp

rlly shit visual example

[hazy tinsel]

I have a question related to css and this is related to performance but is there a difference in calling like all the children classes rather than just calling it directly?

Like performance wise is it better to get uhhh all the classes to the path you want rather than just calling one specifically

like [class=“class1here”] > second element call here

Idk how to explain it sorry

[simple kiln]

I often use hierarchical way of selecting classes and i don't really recommend it. Simple direct selector would be better.

.class1here {
display: block
}

is better than using this

.parent > .somediv > .class1here {}

but for some cases, you could also use it for specific parent class.

//different style of .menu-item for specific parent class.
.navbar ul .menu-item {
    color: blue;
}

.footer ul .menu-item {
    color: gray;
}

[echo frost]

but use however many classes you need to get a selector that doesn't over select
(like just .class-123 might select more than you think, but doing .class-456>.class-123 might be fine)

(also :has() is pretty good)

[grand surge]

:root {
  --folder-icon-1: "🤓";
  --folder-icon-2: "🥴";
  --folder-icon-3: "🙀";
}


[class*="guilds_"] > [class^="tree_"] > [class^="scroller_"] > div:has([class^="wrapper_"] > [class^="expandedFolderBackground_"]) {
  & > .wrapper_bc7085:nth-of-type(1) {
    --folder-icon: var(--folder-icon-1);
  }
  & > .wrapper_bc7085:nth-of-type(2) {
    --folder-icon: var(--folder-icon-2);
  }
  & > .wrapper_bc7085:nth-of-type(3) {
    --folder-icon: var(--folder-icon-3);
  }

  [aria-owns^="folder-items-"] {
    & > [class^="folderIconWrapper_"] {
      /* フォルダーの背景 Folder Background Color */
      background-color: var(--background-primary) !important;

      /* デフォルトのフォルダーアイコンとサーバーの縮小版アイコンを非表示に Default Folder Icon & Reduced version Server Icon */
      [class^="closedFolderIconWrapper_"],
      [class^="expandedFolderIconWrapper_"] {
        display: none;
      }

      /* フォルダーのアイコン Folder Icon */
      &::after {
        position: absolute;
        content: var(--folder-icon);
        top: 12px;
        left: 8px;
        font-size: 24px;
      }
    }
  }
}

I don't understand why the cat icon appears

Am I doing something wrong?

[echo frost]

this variable doesn't look like it's defined

[grand surge]

It should be possible to define it using ".wrapper_bc7085:nth-of-type(n)"

[echo frost]

oh wait i didn't see that mb

[grand surge]

I read mozilla's ":nth-of-type()" documentation and recognized the following
I think ".wrapper_bc7085:nth-of-type(n)" is calculated using only "wrapper_bc7085".
But it doesn't work.

[echo frost]

is this what you mean?

[grand surge]

I think ":nth-child" is calculated only for a specific element.

[echo frost]

i'm not sure why it isn't working
i haven't ever worked with nth-of-type, but from reading the mdn docs it seems like this should work

also i think it would maybe be a bit cleaner using some nested for the nth-of-types, but it only matters for making the code easier to work with, it won't affect the result

& > .wrapper_bc7085 {
  &:nth-of-type(1) {
    --folder-icon: var(--folder-icon-1);
  }
  &:nth-of-type(2) {
    --folder-icon: var(--folder-icon-2);
  }
  &:nth-of-type(3) {
    --folder-icon: var(--folder-icon-3);
  }
}```

[grand surge]

Thank you

[hazy tinsel]

[class="border_ba4b17 speaking_ba4b17"] {
    height: 1000px!important;
    width: 1000px!important;
    background-color: green;
    color:green;
    opacity:0.5
}

[class="border_db83a2 speaking_db83a2"] {
    height: 80px!important;
    width: 80px!important;
    background-color: green;
    color:green;
    opacity:0.5
}

[class="userAvatar_ac3629 avatar_d80634 avatarSmall_d80634 avatarSpeaking_d80634"] {
    height: 30px!important;
    width: 30px!important;
    background-color: green;
    background: transparent;
    color:green;
    opacity:0.5
}```

makes it easier to see who's speaking in call by adding a green bg

[plain kelp]

Why are you doing selectors like that

[pure cairn]

Why are you using attribute selectors with plain class names?

[deft niche]

- use attribute selectors
- useless attribute selectors

[plain kelp]

Doesn't watch to match things with additional classes or reordered? Or probably just has no idea what they're doing

[pure cairn]

I bet on the 2nd one

[deft niche]

I bet on a 3rd option that will shock everyone and go down in history

[pure cairn]

Reminds me of when I first started writing stuff

[hazy tinsel]

I just don’t know really

[pure cairn]

"it was revealed to me in a dream"

[hazy tinsel]

Attribute selectors okay thank s

[deft niche]

God came to me and said "go forth and attribute selector"

[plain kelp]

Dreams are somehow even less reliable than chatgpt

[pure cairn]

Attribute selectors? Yeah I sure hope they do

[hazy tinsel]

Can someone show me an example of how it should properly be done

[deft niche]

Doubt

[pure cairn]

Sure

[deft niche]

[class*="userAvatar_]
or
.userAvatar_ac3629

[pure cairn]

And for multiple classes, use separate selectors

[hazy tinsel]

performance wise is there a major difference in this change or

i do see the point you're making

[plain kelp]

Class selectors are faster than attribute selectors, but probably not by a margin you'll ever notice

[class*=] selectors have the benefit that they don't break every month

[grand surge]

I'm a newbie too, but this site was helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[pure cairn]

ugh, why does discord always have to break something when they add new stuff

[mortal mantle]

and you gotta be really specific when doing attr selectors otherwise something funny is gonna happen

[mint kiln]

i learnt that the hard way thisisfine

[solid ore]

@mystic cove can you try this one
https://raw.githubusercontent.com/tom22k/discord-css/main/Themes/HideNitroUpsellPerformance.css
i removed the heaviest part which only affects 1 rare thing

but tbh it wasnt even that intensive, there was only one selector above 0.1 ms at 0.13 ms, granted that did jump to 0.4 ms in that vc but its still not that much

[mystic cove]

🤷 dunno why it done that, but that made it unusable especially when I type

lemme try

[solid ore]

meanwhile that catpuccin theme has 64 selectors over 0.1 ms

[clear siren]

if a snippet causes perf issues it's not necessarily due to selector parsing taking time

[solid ore]

oh

then what would it be

/how would ik what to fix

[plain kelp]

Selector parsing is a non-issue

They're parsed once when loaded and then that's done

[solid ore]

oh

then i have no clue what the issue is

[mystic cove]

the problem still persists. I have 0 clue what does it

lemme disable everything but it

okay without it it's running fine

Now I enable catppuccin (which, I probably needs an update maybe)

Okay I've noticed that resizing whole window does the same performance drop (it does not without themes)

I've noticed it takes a lot of time to recalculate styles, less time with catppuccin of and very little with nothing

it happens when I resize, so here is that, what it takes long to calculate is beyond me

[clear siren]

what cpu do you have

[solid ore]

its not like the styles are doing anything crazy, its mostly display nones and pointer event nones

maybe theres too many pseudo elements(?)

[clear siren]

the only selectors I can quickly see that might need recalculating when resizing window might be these

those will have to check a bunch of elements in channellist

[mystic cove]

i5-10400F

I'd say it's not the worst CPU

but it def start struggling when one of those enabled

I will copy these lists and will try to disable server shop and progress bar

[solid ore]

idk if theres anything more i can do with the progress bar selector, the server shop one can be a bit better but only as good as the progress bar one

[mystic cove]

doesn't seem to be ¯_(ツ)_/¯

[mint kiln]

how do i fix this

i mustve fucked something

[hazy tinsel]

having issues with mutual friends right now and the issue seems to be caused from this idk how to traceback the issue but i know it's from one of my plugins

basically it fixes the issue im having im able to message, and add them but i can't escape the avatar viewer

jusst completely bugged its some kind of frame placement

and if i removed that then i can't click out of the user profile

[grand surge]

[class^="layerContainer_"] > [class^="backdrop_"] {
    opacity: 0;
}

Does this work?

[hazy tinsel]

none of the buttons are clickable with that

it's some kind of frame disrupting my clicking actions and idk the source of it

[class^="layerContainer_"] > [class^="backdrop_"] {
     display: none!important;
}```

this is the only fix as of rn for it everything works except for when i click on someones avatar, i'm stuck in that menu even if i left click

[solid ore]

@mystic cove can u try this one^ again? i removed the pseudoelements instead since theyre the most heavily styled things

[mint kiln]

anyone know?

[mystic cove]

Still doing that

I believe you can make CSS profiling, lemme see if I can do it

[mint kiln]

Idk who wants this but

    display:none;
}```

removes this stupid notification

[plain kelp]

You know just .notice_c02a8d would be enough, right?

[vestal field]

lmfao

[fiery stirrup]

say, how do you change the icons (the theme i used to get the old icons broke today, i'm trying to fix it myself)

[plain kelp]

Check how that theme does it, and do something similar

[fiery stirrup]

ah k

think i know why the icons broke

it's because of the new update add the activities

[pure cairn]

Yeah

The theme I was using broke as well

[mint kiln]

incase something broke

id rather be very specific

[mint kiln]

so no one knows how to fix this?

cri

[plain kelp]

Your selector is super fragile

The class name will break when they reroll hashes

That thing will break if they change like, anything on the site whatsoever

[mint kiln]

cringe

[fiery stirrup]

I say the update that pushed this shit broke some stuff

[pure cairn]

I noticed

Half of my category snippet broke

[fiery stirrup]

luckily nothing else broke

i think

[pure cairn]

[mint kiln]

thanking god i havent gotten that experiment

just force disable it on discord experiment

[fiery stirrup]

I'm trying to revert it tho

[pure cairn]

It's coming soon, dw

[fiery stirrup]

yeah but, i don't know the name

of it

[pure cairn]

Just

[class^=channelAppLauncher_] {
  display:none
}

[fiery stirrup]

oh

thanks

[pure cairn]

Otherwise set the "app launcher - desktop" experiment to not eligible

[fiery stirrup]

didn't work

[mint kiln]

yeah

[pure cairn]

Well that simply hides the app launcher button

It's not reverting anything

[pure cairn]

And neither will this

Cuz the icon classes are still there

[fiery stirrup]

ughhhh

[solid ore]

does anyone know what the yellow thing on the right is? padding and margin are already set to 0

[pure cairn]

Check the 2nd tab in devtools

I don't remember the name

Basically where you can see borders, paddings, margins etc

[solid ore]

hmm

[fiery stirrup]

I'm pretty sure it's only this tab right htere

that's the only things that are broken

[pure cairn]

Yeah

They probably changed some stuff around there

Also because of the incoming redesign

[fiery stirrup]

?

[solid ore]

it says its padding but all the values are 0

[fiery stirrup]

i thought the redesign that was in the survey wasn't coming for a long time

[pure cairn]

#🎨-css-snippets message
#🎨-css-snippets message

[fiery stirrup]

is this a different redesign

[pure cairn]

Odd

[fiery stirrup]

Staring a phone

hopefully oldcord gets updated when this drops, i do NOT want to deal with the new ui lol

[mint kiln]

why the fuck did this show up again

[fiery stirrup]

anyways, maybe that changed the icon names?

[mint kiln]

  display: none
}```
did they break this

[solid ore]

just do [href="/store"] and [href="/shop"]

[pure cairn]

Why not just

Yeah I was about to write that

[mint kiln]

its from #🎨-css-snippets

[solid ore]

that doesnt mean u cant change it

[pure cairn]

Doesn't matter

Extra code is redundant

[mint kiln]

i was just following

[pure cairn]

[href="/store"] and [href="/shop"] is enough

[mint kiln]

i still dont understand css fully other than selector

[fiery stirrup]

does anyone know the internal icon file names

[pure cairn]

Yeah

They're all fucking icon_hdhdhsjsbsjsbshs

[fiery stirrup]

did they change it

Oh

[pure cairn]

Easiest way to select icons is through svg paths

[fiery stirrup]

?

does this have any relation

[pure cairn]

#🎨-theme-development message

[pure cairn]

Yop

[fiery stirrup]

ah

how do i use svg paths

i don't know how to code that much srry

[pure cairn]

oh yeah, they changed the class for the buttons at the bottom to .button_adca65

[plain kelp]

You copypaste them from somewhere else mostly

[fiery stirrup]

oh ok

now all i need to is to fix the icon theme...

say how do i replace icons again

i give up i can't read code

[supple lodge]

Hi, sorry that I can't help you..but I'd like to know the font you are using here please :)

[solid ore]

wtf

[mint kiln]

Comic Sans MS

[mint kiln]

    --font-primary: 'Comic Sans MS', sans-serif;
    --font-display: 'Comic Sans MS', sans-serif;
    --font-headline: 'Comic Sans MS', sans-serif;
    --font-code: 'Monospace', monospace;
}```

Although i changed a lot for the font spacing

Hence why most of it looks soo tightly packed

[solid ore]

okay i'll try having another look some other time, in the meantime this is the link u can use from right before it started causing issues
https://raw.githubusercontent.com/tom22k/discord-css/bdd753dcfc88d3164b1d09fa9627f79bfd66405a/Themes/HideNitroUpsellV2.css

[supple lodge]

thanks! Also, how did you change the spacing etc?

[mint kiln]

I forgot but most of them are just removing spscing

Im not on my pc to check which unholy things i did

[supple lodge]

alright, thanks anyway i'll try

[severe robin]

is it possible to disable specific avatar decorations with css while not killing performance accidently

people who use the free avatar decorations like this is so annoying i cant even see their pfp

[pure cairn]

https://tenor.com/view/perchance-per-chance-perhaps-family-guy-sonic-subway-gif-11023442278282486542

[severe robin]

visibility: hidden'ing it wont cause that much of issue or should i make a different approach

[pure cairn]

You could use this (no idea if it needs updating)
#🎨-css-snippets message

[severe robin]

mm

still making selected ones not show is a better solution for me so

ill probably do that and test the performance

[pure cairn]

#🎨-css-snippets message

[severe robin]

last time i visibility: hidden'd something my rams was 3 gig+ because of it

[pure cairn]

Use this, adding the selected decorations instead of the clown one

[severe robin]

do i have to use avatar decoration links or

[pure cairn]

Yes

[severe robin]

can i select them with css selectors

[pure cairn]

[src^="add decoration link here"] {
  img[class*="avatar"]& {
    display: none;
  }
} 

To add more decorations to the blacklist, copy the first element and separate them with commas

[severe robin]

i had enough braincells to figure out that but ty 🙏

[pure cairn]

Np

I was missing some quotes, fixed

[severe robin]

is there a github repo containing the links

nvm imma just research

[pure cairn]

Open devtools

Select the element you want to hide

Look for the asset link

Absolute win

[severe robin]

sry to ping but causes issues

i mean it works but gives a error indicator + makes the snippets after that not work

added a "}" at end i didnt see it sry

im too blind i guess

[fossil hatch]

Uh

I don't think that & is meant to be there

[glass junco]

can anyone help me get this things class? it's rlly hard to find and ctrl+shift+c only works if inpect is focused

[clear siren]

what thing

[glass junco]

forgot to send the img

mb

it's the thing that appears after you hover a timestamp it's impossible to select

[solid ore]

it is

[clear siren]

the issue with those are that there are many hover popup things that pretty much share the same classes etc

[glass junco]

well that's fine i want all tooltips anyways

i just couldnt select it even in browser

[clear siren]

protip: use f8break plugin

[glass junco]

what does that do?

:0

[clear siren]

it freezes discord allowing you to inspect things that only show up on hover or something

for popups you still have to find them in the dom tree though in the layercontainers because inspect button doesn't see them due to no pointer-events I'm guessing

[glass junco]

oh alr thx :D

[fossil adder]

This is some of the most cursed CSS I've ever done I think.

ul[aria-label="Channels"]:has( > div:nth-child(2 of [class^="sectionDivider"])) {
    & div:nth-child(1 of [class^="sectionDivider"]) ~
    :not(
        ul[aria-label="Channels"] >
        div:nth-child(2 of [class^="sectionDivider"])
    ):not(
        ul[aria-label="Channels"] >
        div:nth-child(2 of [class^="sectionDivider"]) ~
        *
    ) {
        display: none;
    }
    & div:nth-child(1 of [class^="sectionDivider"]) {
        display: none;
    }
}

[clear siren]

wtf is :nth-child(2 of [class^="sectionDivider"])

never seen that before

oh that is a thing now?

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#using_of_selector

[fossil adder]

It's a very funny way of checking if an element has 2 or more divs with a [class^="whatever"] property.

This snippet should hide the "suggested" section.

[fossil hatch]

Pro tip, don't use a has with a nest

[clear siren]

that's actually very neat

[fossil hatch]

Universal selector

[fossil adder]

It's very shaky since it doesn't actually know anything about the "suggested" section, it just assumes that whatever is between the first and second divider is that.

[glass junco]

is there a way to do something like background-opacity?

or alpha

[fossil hatch]

Can I coin the term for nested css :has() bomb?

[fossil adder]

Go on.

[fossil hatch]

Thanks

[clear siren]

not really, what are you trying to do

[glass junco]

change the background opacity of roles

[fossil adder]

Also I don't think I nest :has anywhere there?

[fossil hatch]

You can do opacity or background/background-color with rgba

[fossil adder]

Sorry it's 3 AM I barely function.

[fossil hatch]

The first line

[clear siren]

yeah but to keep the original color it's much trickier

[glass junco]

that would conflict with it's children and also rgba would overwrite it's original color

[clear siren]

do you have colored backgrounds on roles

[glass junco]

also good news! i found out the class for all interactables :3 (all buttons)
.app_a01fb1 button

[glass junco]

yes

[fossil adder]

Can you elaborate on why, then.

[clear siren]

is it done with a theme/snippet because they're not colored by default

[fossil hatch]

Idk how to explain

[glass junco]

not to my knowledge considering i made this theme

[fossil hatch]

Cause I don't know the terminology

When you nest into a :has() selector, you're writing a new :has() selector for each child in that nest or whatever

So that can quickly get out of hand

For example my snippet which has like 50 :has() selectors in scss, that equates to 250 :has() selectors in css

Because of how I nested

[fossil adder]

Oh, you mean like that.

[fossil hatch]

Yeah

[fossil adder]

Hmm, the output of that is 2 :has which is I think the minimum you can achieve this with. But I'll keep that in mind yea I've noticed sometimes it just explodes.

Good to look inside of the actually processed CSS from time to time.

[fossil hatch]

Definitely yeah

[fossil adder]

Wait nvm you can just , the second part instead of & I think.

Still makes it two though so.

[glass junco]

it looks like this (you can see my problem with the opacity Lol)

[clear siren]

do they show up like that with no themes/quickcss

[glass junco]

oddly enough no, i tried searching through my theme but i cant see anything that changes roles at all

would you like the css file to look at it maybe?

[clear siren]

sure

[glass junco]

just put it here or dm?

[clear siren]

put it here

[clear siren]

yeah it's part of clearvision

[glass junco]

really? do you know of a way to change it at all?

[clear siren]

yeah

[class^=roleCircle_]::before { opacity: .2 !important; }

turn that opacity up

oh needs !important

[glass junco]

that seemingly did actually nothing

[clear siren]

really

[native topaz]

is it possible to change href tags with css?

[glass junco]

that is after the change

i set it to 1

WAIT

NOPE

[native topaz]

like wrapping an after element with an anchor tag or using some fancy property?

[glass junco]

USER ERROR I OVERWROTE IT

[clear siren]

what is it you're trying to do

[fossil hatch]

From what you're describing, no

[glass junco]

,,,so i've learned that one is a bad thing, maybe i can darken it?? i'll try that

[fossil hatch]

You can't change html using css

[glass junco]

in a literal sense

[native topaz]

adding a button here that will redirect me to a server that is in a folder (i cant take the server out of the folder cause then, i have to scroll to see all my folders which is a mild inconvinience

[clear siren]

yeah not possible

[native topaz]

thats what i thought, just wanted to see if there was something i overlooked

[clear siren]

you could try playing with filter on those, or for white roles specifically you can override the color

in the case of the roles here the rolecircle has background-color: rgb(196, 201, 206); so you could make an exception for those but any color value that isn't an exact match you'd need to keep adding exceptions for..

so a filter might work better

[glass junco]

oh wait that is fucky

[clear siren]

I use this to brighten names just to give you an idea https://github.com/nvhhr/discordcss/blob/main/snippets/namebrightener.theme.css

[glass junco]

the roledot is OVER the text

so what i wanted is actually just impossible

unless you can change it's z layer with css

[clear siren]

you can

[glass junco]

really? :0

[clear siren]

[class^=roleName_] {position: relative;}

[glass junco]

ur a lifesaver, with a few edits and testing i managed to get it looking great :D

[supple lodge]

anyone got a snippet for the avatars when people are typing in the channel list, kinda like the first pic, but for the chat typing? (for the typing indicator on the second pic) Thank you

[clear siren]

you mean to show avatars there? there's a plugin for that

[digital pier]

yep, enable the F8Break plugin if you haven't yet, open devtools and hover over a message, press F8 and then you can select the element

[glass junco]

if anyone ever just wants to remove the nitro button in it's entirety, you cant just use its list uuid since it changes all the time, so just use this, because fuck marketing :>

a.link_c91bad[data-list-item-id*="nitro"] {
  display: none !important;
}

[grand surge]

Is there a list of CSS "custom properties" that are changed by this plugin?
https://github.com/Vendicated/Vencord/tree/main/src/plugins/clientTheme

Resolved.

[glass junco]

Lol

[grand surge]

I am trying to make it easier to understand accounts that are logged in.
Is there a way to override Discord's CSS custom properties with CSS?

Is it only possible to override properties individually as follows?

#app-mount {
  &:has([class^="avatarWrapper_"] > [aria-label^="a2e1d3857de6128b2c833a35dc1c30e0"]) {
    & .bg_d4b6c5 {
      background-color: red;
    }
  }
}

To be more specific, I would like to rewrite "--primary-100" in "https://discord.com/assets/12633.b083a624c2b12626188a.css".

[native topaz]

you can use the !important selector to accomplish this. for your use case, you would add :root { --primary-100: red !important. you can change the root selector to be whatever the variable belongs to (it usually will belong to the root element) as well as changing the property (red in this example) to whatever is desired.

[grand surge]

Like this?

#app-mount {
  &:has([class^="avatarWrapper_"] > [aria-label^="a2e1d3857de6128b2c833a35dc1c30e0"]) {
    :root {
      --background-tertiary: red !important;
    }
  }
}

[vestal field]

you dont need any selectors outside of root

[grand surge]

Is it possible to change custom properties for each logged in account without using a selector?

What I am trying to do is thus.
To change the theme for each account that is logged in.

For this purpose, I would like to change custom properties, such as background color, for each logged-in account.

[pure cairn]

My bad, I forgot to close the first selector with a } at the end

The tragedy of writing css on mobile

[pure cairn]

It is

[echo frost]

yes
you'd use :has() with the avatar here
probably using the aria label ([aria-label^=obsidianninja11] for my username)

and use variables

so something like:

/* my main account */
:root:has([class^=panels_] [class*=avatar_][aria-label^=obsidianninja11]) {
  /* vars here */
  --background-var-1: #112233;
  --background-var-2: #223344;
}
/* my alt account */
:root:has([class^=panels_] [class*=avatar_][aria-label^=obsidianhydar]) {
  /* vars here */
  --background-var-1: #556677;
  --background-var-2: #667788;
}```

(except use the actual vars)

[grand surge]

It worked.
Thank you!

[pure cairn]

Either aria-label or the id in the avatar

If you want to avoid aria-labels

But I don't think that one is causing issues with different languages

[echo frost]

well this aria-label won't change with language

and i only found the id in the avatar image which is a bit annoying

this just seemed better

[pure cairn]

[grand surge]

I think it causes problems in streamer mode.

[pure cairn]

Possibly

[grand surge]

I tried it and it didn't give me any problems.

[pure cairn]

Then everything is fine

[echo frost]

but ig if you do change your username, you could use

:root:has([class^=panels_] [class*=avatar_][src*="/683171006717755446/"]) {
  /* vars here */
  --background-var-1: #112233;
  --background-var-2: #223344;
}```

well you could use `[src^="https://cdn.discordapp.com/avatars/683171006717755446/"`, ig, but just `*=/userid/` would be fine too

with the 683... being user id

[grand surge]

I'm going to try to make it look like this

:root {
  --custom-background-color-1: red;
  &:has([class^="panels_"] [class*="avatar_"][aria-label^="a2e1d3857de6128b2c833a35dc1c30e0"]) {
    --background-tertiary: color-mix(in srgb, var(--custom-background-color-1) 50%, black 50%);
  }
}

[echo frost]

oh for your username it might be shorter to use userid lmao

[pure cairn]

Huh

Oh lol, that's true

[mystic cove]

it still lags

could it be some discord update

Did I forget it lagged before?

By the way, this froze my discord until profiling ended, so I cannot check what took so long

[solid ore]

i think there was one recently so yeah probly that then

[mint kiln]

anyone knows why custom titlebar makes discord non-double click able

you know when you double click something it full screens

yeah it doesnt

[plain kelp]

Because custom titlebars always neglect to implement half the standard functionality

One of many reasons why custom titlebars universally suck

[mint kiln]

https://tenor.com/view/nijika-ijichi-bocchi-the-rock-cry-i-like-turtles-gif-27256659

so what could i change

or is it just impossible to do with a custom titlebar

[teal cave]

works on my machine.jpg

[mint kiln]

anything i can "change"?

[plain kelp]

Certainly not with css

[mint kiln]

so its not on css side

?

[plain kelp]

Css does not control functionality, no

[mint kiln]

so how can i possibly "fix" this?

[plain kelp]

Angry letter probably

[mint kiln]

cri

[grand surge]

I don't understand why the color changes when the same color is specified for the background color.
Is there any way to fix it?

It also changed when I hovered.

[plain kelp]

Well, where are those variables changed?

[grand surge]

The friend tab variable has been changed in my CSS

Online tabs are modified with the following CSS
https://discord.com/assets/12633.8ed2be6ef1a73fdf550b.css

[mint kiln]

    padding-bottom: 0px;
}
.visual-refresh .markup_f8f345 {
    line-height: 1rem;
}
.zalgo_f9f2ca .messageContent_f9f2ca {
    overflow: visible;
}
.subtitle_d8bfb3, .name_d8bfb3{
    overflow: visible;
}
.visual-refresh .form_a7d72e {
    position: relative; 
}
.base_d7ebeb {
    position: absolute;
    transform:translateY(10px);
    transition: all 0.5s fade-in-out;
}
.visual-refresh .container_ee69e0{
    margin-bottom: 0px;
}
.invite_f61cb8 {
    top: 2px;
}
.search_a46bef .DraftEditor-root .public-DraftEditor-content {
    overflow: visible;
}
.visual-refresh .search_a46bef .DraftEditor-root{
    top: 4.5px;
    line-height: 20px;
}
.option_b0286e, .option_b0286e strong, .option_b0286e span {
    overflow: visible;
}

these are the unholy spacing i used

to achieve these word salad

oh yeah these are mostly for if you use visual refresh

i hate the spacing on visual refresh

oh hey i managed to fix it while also making it bigger

.messagesPopoutWrap_ac90a2

the actual fix is just position: fixed;

[mint kiln]

https://cdn.discordapp.com/attachments/485204327800242177/1270706306793078805/ceXpLEn2ZWpc9CcacbsPE821T.mp4?ex=66b4acf8&is=66b35b78&hm=b30ce426d0776c3be499de653058234d92ed962e0295be652bc16db5033342a9&

i did something

i cant figure out how to make it close using the animation

[grand surge]

[class*=guilds_] {
    transition: width 0.5s ease, padding 0.5s ease;
  &:not(:hover) {
    padding-left: 10px;
    width: 0px;
  }
}

how can i actually make this so when someone DM's me it pops up once and closes back
or at least having an indicator when i receive a dm

basically i need to trigger something when someone send's me a unread dm

[mint kiln]

i cooked something

full invite banner

    height: unset;
}```

its just that lol

the rest is personal taste for the margin and spacing

[stray dune]

is there a way to use two custom fonts at once, like one for headings and one for texts/messages something of the sort using css snippets

[mint kiln]

you can rule each element you want to use a different font to

font-family: "Webdings Regular:
}
.zalgo_f9f2ca .messageContent_f9f2ca {
    font-family: Edwardian Script ITC Regular;
}```

Heres a proof of concept

wingdings for username and Edwardian Script ITC Regular for message content

    --font-primary: 'FONTNAME', sans-serif;
    --font-display: 'FONTNAME', sans-serif;
    --font-headline: 'FONTNAME', sans-serif;
    --font-clan-body: 'FONTNAME', sans-serif;
    --font-clan-signature: 'FONTNAME', sans-serif;
    --font-code: 'Monospace', monospace;
}

Use that for the overall font
and overwrite it using unique rule for each element you want to replace the font for

is there a way to make this a "hover to show"?

[stray dune]

thank you!

[pure cairn]

hover what to show what

[supple lodge]

didnt know it existed, thank you

[mint kiln]

Hover on like a pulltab looking thing to reveal the Spotify player

Rather than it just being there always

If possible make it a button click to reveal and hide

[pure cairn]

Sounds doable

I'll cook something up later

[mint kiln]

the thing already has a built in hover to reveal for the control button

maybe combine both so it reveals at same time?

[simple kiln]

works with mobile

[mint kiln]

oh hey i did it

#vc-spotify-progress-bar,
#vc-spotify-player > div.vc-spotify-button-row {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#vc-spotify-player:hover #vc-spotify-info-wrapper,
#vc-spotify-player:hover #vc-spotify-progress-bar,
#vc-spotify-player:hover > div.vc-spotify-button-row {
    opacity: 1;
    transform: translateY(-20px);
}

.theme-dark #vc-spotify-player {
    background: unset;
    height: 5px;
    position: relative;
    transform: translatey(20px);
}

.theme-dark #vc-spotify-player::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-11px);
    width: 20px; /* Adjust width */
    height: 20px; /* Adjust height */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l-10 10h7v10h6v-10h7z' fill='%23ffffff' /%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    opacity: 1; /* Initial opacity */
    transition: opacity 0.3s ease; /* Transition effect */
}

.theme-dark #vc-spotify-player:hover::before {
    opacity: 0; /* Fade out on hover */
    transform: translateY(100px);
}
.theme-dark #vc-spotify-player:hover {
    height: 100px;
}
.visual-refresh .container_b2ca13{
    height: 50px;
}```

very much a terrible job but it works™️

Im planning to make it says "🎶Spotify now playing: [SONGNAME]" but

.

[mint kiln]

cant do this with css

well

that works .

[pure cairn]

Why not just using a regular Spotify icon for it?

[mint kiln]

is it a svg?

i want it so it spans the whole bar rather than just a tiny icon so it feels "full"

[pure cairn]

I bet you could find the svg icon for it online

Rather easily, actually

[mint kiln]

i would like to see someone try this on their discord

does it work without my specific discord theme

i wonder if theres a way to skip this confirmation screen (yes i can just shift click it but) with css
or is this a plugin thing?

[copper flame]

is this the ui refresh?

[worldly moss]

css cant remove functionality

only visual stuff

[mint kiln]

.

[mint kiln]

#🎨-css-snippets message
its their own "redesign"

[simple kiln]

no?

[plain kelp]

Css can certainly remove the popup

But not in a way that works in a way you'd like

[solid ore]

it would hide it but everything would act as if u still had it there so itd be buggy

[mint kiln]

Can someone try this on their discord pls :3

[solid ore]

i can do it when im home if no one else has by then

[plush radish]

is there some way i can theme pinned dms better (with colors) without resorting to this chaos? or should I make a feature request for more classes for pinned dms?

[plain kelp]

Maybe you can use currentcolor

[plush radish]

doesn't work as the entire channel list for DMs is one huge <ul> element (each channel being an <li> and each title for a category being an <h2> element) and the color is only applied to the titles of the pins, not the channels themselves.

[plain kelp]

Oh okay

Yeah in that case the available solutions are either hardcode the colors you care about, or PR the plugin to set a css variable

[plush radish]

Setting the color property on the <li> element doesn't have any consequences (yet?), as it is just a wrapper for a <div> which in turn sets the color. So yea that'll be good if it were set. Then for theming I could use color-mix() to mix the current color to be more transparent and i guess that's gonna be it.
On the other hand, is there something against adding an extra class to all pinned dms (and for each "first pin" and "last pin" of a category an additional class)?

[tender hedge]

trying to improve the refresh theme

how do i make this scroll correctly so the bottom items scroll above the menu

[upper shoal]

Sorry but what theme is this?

[tender hedge]

discords refresh theme

just added blur to the user panel

[upper shoal]

If you don't mind, could you share the link?

[tender hedge]

its an experiment

[upper shoal]

Oh

[tender hedge]

called something something refresh

[upper shoal]

No idea, how do I enable it lol

I do have experiments enabled.

[tender hedge]

just look up refresh in the experiments thing

[upper shoal]

Oh got it, thanks.

[tender hedge]

if you also want the darker color enable it in appearance settings

[upper shoal]

Alr, thanks again!

[tender hedge]

np

[upper shoal]

This one lags for me for some reason no idea why.

Is that because I added it as quick css or something?

[tender hedge]

might be

could also just be unoptimized css

or alot of blur elements

wich could also cause lag

[mint kiln]

anyone know how i can swap GIF and Sticker?

my muscle memory somehow thinks that GIF is after Emoji not Sticker

or was that the case?

chatGPT 4o the goat

.expression-picker-chat-input-button {
    display: flex;
}
/* Swap the elements by changing their order */
.buttonContainer_d0696b:nth-of-type(3) {
    order:4;
}
.buttonContainer_d0696b:nth-of-type(4) {
    order:3;
}
.buttonContainer_d0696b:nth-of-type(5) {
    order:5;
}```

you will need to change the nth number to fit your chat bar

[solid ore]

it works if thats what u wanted to know

[mint kiln]

no funny looking behaviour?

or like wrong coloring

[solid ore]

nope

[mint kiln]

since i might or might not hardcoded it to have black background

[solid ore]

might be better to select the svg path with a :has instead

[mint kiln]

true but this is just full gpt stuff lol

so the human optimization or fixup isnt there

and it works for me so eh i dont mind

[solid ore]

yeah but u can include it if you want other ppl to use it

[pure cairn]

This won't work if people don't have the InsertTimestamp and Translate plugins enabled

[mint kiln]

yeah

i think for that it would be change 3 to 1 and 4 to 2

5 to 3

[smoky belfry]

is there an easy way to get the screen width and height, like are there stored in a var or smth ?

[plain kelp]

You mean like the vw and vh units?

[smoky belfry]

idk what are those ? i know there's px i know there's em, but i never heard of those vw and vh

[plain kelp]

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

[smoky belfry]

also actually it's less the width of the screen that i want and rather the width of the element above

also vh / vw are percentage and not pixel counts

i need one which is pixel count

[plain kelp]

There's container queries too, and of course the % unit

[smoky belfry]

mmmmh reading about container query but seems like pain, interesting, but can't see how i would use it
and the % unit is not px
ig my crappy solution will work for now

[plain kelp]

What do you need px for

[clear siren]

https://xyproblem.info/

[mint kiln]

.theme-dark #vc-spotify-player:hover {
    height: 120px;
}```

anyone know why this specific element doesnt want to animate?

or rather

how can i set the height to 120px while it animate easing

    animation: spotifuckoff 0.5s ease-in-out forwards;
}
@keyframes spotifuckoff {
    from {
        height: 0px;
    }
    to {
        height: 120px;
    }
}```

well that was easy

not the smoothest but it works
(if you know how to make it smoother pls tell)

idk if this is #🎨-css-snippets worthy but eh

[crystal oar]

how would I add character variants to css?

[chrome oracle]

Is there a better way to go about this CSS? Whether injecting as SVG data, .png from URL, or ,svg from URL, the icons seem to be a bit pixilated, especially when using Discord when zoomed out. This didn't happen when making the plugin version of this (which I scraped because of DOM manipulation being required)

for context if not obvious enough, I'm trying to customize default status icons to different ones

[supple jacinth]

https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings

Inter is great btw

[echo frost]

I think it's pixelated because it seems to be using a png as the mask
I'm not entirely sure how masks work. maybe you can use an svg as a mask, and that would probably fix it

[chrome oracle]

I tried using an SVG mask for some of them, it didn't seem to make a difference

[echo frost]

the offline one doesn't look pixelated to me

which is one you're using an svg mask for

[chrome oracle]

I'm zoomed out on Discord and it appears to be pixilated for me

[echo frost]

but it isn't like that with the plugin?

because that seems like rounding error type stuff

[chrome oracle]

it looks perfect with the plugin

[echo frost]

does it do it by modifying the masks or some other way

[chrome oracle]

it does 2 things, edits the defined mask in the icon element and edits the already defined mask, depending on specific elements in cases

but even cases where it was editing the icon element to have a mask, just like this CSS is doing, it would be perfectly fine

[fossil hatch]

Any anchor https://developer.mozilla.org/en-US/docs/Web/CSS/anchor enjoyers?

[plain kelp]

Not me

[worldly moss]

firefox so bad

doesnt support half of the cool stuff

[supple jacinth]

it’s even worse than webkit nowadays

[dusty thicket]

dumb question since i might either be searching for the wrong words in here, but i can't find a way to move the search bar somewhere else since i am using a import to reverse the server list and members and its just like this covering the channel name i am currently on :d i'm too new to css still and i've only managed to edit and fix certain areas not having colors, i have not messed with moving certain elements yet since i don't know where to start with that lol

[plain kelp]

No the channel is about running away with your forbidden lover now

[dusty thicket]

oh is it? cant relate

mine left me without saying anything

[smoky belfry]

how can i do conditional assignement in CSS ?
my goal is to have --custom-user-profile-width-full-size: be min-content or 600px whichever is the biggest

nvm i'm a F smooth brain all i have to do is use min-width

[dusty thicket]

i just took the reverse import and modified it, fixed it now

[solid ore]

kinda off topic but is the visual refresh confirmed to happen to everyone eventually, or are they testing to see if ppl like it?