🎨-theme-development

[austere hamlet]

gotta love wacky selectors

[simple kiln]

here's what i did.

[class*="sidebar-"]:has(nav[aria-label*="(server)"]) [class*="scroller-"] > ul[aria-label="Channels"] > li:has([aria-label*="(category)"]):has([class*="collapsed"]) ~ li:has([class*="modeUnread-"]) {
    display: none;
}

it just that whenever the above category was collapsed, it will hide also the unread channels below.. but yours was better...

thanks..

nevermind. i thought it work.. whenever the above cateegory is collapsed the below unmuted category unread channels willalso affected.,

[toxic yew]

screenshot

[simple kiln]

my bad, i thought i already applied your snippet... lol

it was my css all this time..

[simple kiln]

lol. i don't know what i'm saying now but it just doesn't really work the way i want.

[toxic yew]

ye i realized now it only select the first one

[simple kiln]

i collapsed all categories then i select the first category,. all unread channel below are also affected..

the cause of it must be the ~ selector because it select all siblings below

[grand surge]

is it possible to make specific words and/or characters have a different css

(ping reply)

[safe python]

depends but probably not

what do you want to highlight with css

[grand surge]

a specific word with one set of css

and all characters in a specific range of code points with another set of css

[toxic yew]

.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-YUSmu3:not(.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-YUSmu3),
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-YUSmu3:not(.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-YUSmu3),
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-YUSmu3:not(.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR))~.containerDefault-YUSmu3)
{ display:none }

now probably wont break for server < 7 category ig that is enough

[mortal mantle]

https://cdn.discordapp.com/emojis/1133504974777757726.webp?size=48

[simple kiln]

[true mica]

oh my god what the fuck

[turbid cave]

most sane CSS selector

[simple kiln]

~ selector is so hard to stop affecting other siblings that you dont want to select..

i ask chagpt to achieve the same behavior of javascript code,.. and it says it's impossible to do it..

<ul>
  <li class="category" data-expanded="true">category 1</li>
  <li class="channel">pc-room</li>
  <li class="channel">animals</li>
  <li class="channel">things</li>
  <li class="channel"><a>human development</a></li>
  <li class="category" data-expanded="false">category 2</li>
  <li class="channel">pc-room</li>
  <li class="channel">animals</li>
  <li class="channel">things</li>
  <li class="channel"><a>human development</a></li>
  <li class="category" data-expanded="true">category 3</li>
  <li class="channel">prison</li>
  <li class="channel">jailbreak</li>
  <li class="channel">paradise</li>
  <li class="channel">gaming</li>
  <li class="channel"><a>devs</a></li>
  <li class="channel"><a>milk</a></li>
</ul>

<script>
// Get all the <li> elements with class="category"
const categoryElements = document.querySelectorAll("li.category[data-expanded='false']");

const filteredChannels = [];

// Iterate over each category element
for (let i = 0; i < categoryElements.length; i++) {
  const categoryElement = categoryElements[i];
  
  // Get the next sibling element of the category element
  let nextElement = categoryElement.nextElementSibling;
  
  // Keep adding the next sibling elements with class="channel" to the filteredChannels array
  // Exclude the channel element if it contains an <a> tag
  while (nextElement && nextElement.classList.contains("channel") && !nextElement.querySelector("a")) {
      filteredChannels.push(nextElement);
      nextElement = nextElement.nextElementSibling;
  }
}

// Log the filtered channels
filteredChannels.forEach(function(channel) {
  console.log(channel.textContent); 
/* result:
pc-room
animals
things
*/
});
</script>

on pure css..

[toxic yew]

did u try it

the horror thing i sent above

[true mica]

chatgpt

[simple kiln]

yes,. it's work

here with 10 categories, when I select the 1st category the 10th category works like i want it to be..

[toxic yew]

ye i said <7 is just worst case
like 7 and u open 2,4,6, the 7th will not hide

[simple kiln]

https://github.com/lazuee/css-snippets/blob/main/discord/snippets/hide-channels-of-category.css

[neon matrix]

[mortal mantle]

Am I missing any other discord brand/primary variable, apart from primary-hsl-XXX, primary-XXX, brand-hsl-XXX, brand-XXX, brand-experiment-XXX (XXX are numbers)

[quaint lake]

since apparently no post snipper in css snippets for me ig ill just put it here (to be fair this is pretty shit)

My small user profile cleanup (yes I am new to css stuff so this is the best i have done so far) just removes the "message user box" bc its dumb and the note box for yourself as well as de rounding
https://atvaster.github.io/Misc/Discord/UserPopout/import.css

also https://atvaster.github.io/Misc/Discord/NoVideo/import.css
simple snippet to not doxx yourself on accident (made with help of F53)
(YES I KNOW ITS ONE LINE BUT SHUT UP OK ITS NICE)

[fading wigeon]

is there a way to debug css performance issues

[true mica]

not really

[fading wigeon]

guhhhhhhhhh

im working on a theme but it lags everytime i type

[true mica]

most of the lag is from badly written selectors

the other part of the lag is just a skill issue

[fading wigeon]

well im not hardcoding class names

its just annoying that somehow my current theme doesnt lag but my new one does

im just blaming sass which is a real shame

[oblique night]

The following hides the server boost button, but I don't understand why #guild-header-popout > div > .separator-2I32lJ:nth-child(2) is needed

/*  Server boost button */
#guild-header-popout-premium-subscribe,
#guild-header-popout > div > .separator-2I32lJ:nth-child(2) {
    display: none !important;
}```

[fading wigeon]

cause you'll end up with two separators and looks ugly

[oblique night]

it works find with just #guild-header-popout-premium-subscribe tho

oh

ok

mb

[true mica]

wait no

even that doesn't work

[fading wigeon]

oh wait i have two separators cause of fucking guild profiles

[oblique night]

how do I fix it?

[fading wigeon]

fix what

[oblique night]

nvm, I fixed it

how do I hide the mark unread? figured it out; I didn't know how to freeze the page

[true mica]

just don't use aria label

[oblique night]

I can't find any feasible way to do it without it

[rugged echo]

I think you can, but its easier with aria label (still don't use it if you are making a theme)

also what is that < > button?

[rugged echo]

oh, I see

[celest ridge]

Yes there is

I would tell u but I'm on mobile

But I had to do it once for spotimbed

I'm on mobile so I can't check but

It's like some devtools option to analyze css performance in more detail

And then u can check per selector stats on "recalculate style" tasks in the profiler

U just gotta figure out how to reproduce a lag spike and then record it, for me it was when I tabbed back into discord

[fading wigeon]

yeah mines easily reproducable

https://toaster.sh/i/2sz40bqu.png

im assuming this

[celest ridge]

Yea

That looks about right

[celest ridge]

Oh so true lol

[fading wigeon]

i cant figure out how to get it to tell me whats causing it tho

it just says recalculate style

but doesnt say what selector

[celest ridge]

When I click it what info is at the bottom

U

[fading wigeon]

https://toaster.sh/i/wuiimae2.png

[celest ridge]

Can u uncrop

[fading wigeon]

https://toaster.sh/i/037wxj8b.png

[celest ridge]

Oh guh wth

Is this on vesktop

[fading wigeon]

no

[celest ridge]

Web ?

[fading wigeon]

no

[celest ridge]

Can u try then cus that chrome old

I think it's like

[fading wigeon]

vencord doesnt have a live sass compiler does it

[celest ridge]

A tab

Nop

I think it's supposed to be here

OH WAIT

I remember

It's Microsoft edge

Do it in Microsoft edge

[fading wigeon]

guhhhhhh

[celest ridge]

Troll

[fading wigeon]

yeah this is taking way longer to profile now

Error code: STATUS_ACCESS_VIOLATION

epic thanks edge

https://toaster.sh/i/ynltgvy3.png

yeah that makes sense

[delicate tusk]

does anyone know how to make vencord for roblox?

[fading wigeon]

wrong channel but also roblox doesnt use webpack

and modding the game itself is out of the question

its already a cat and mouse game with injectors as is

[digital pier]

what does that even mean

[fading wigeon]

ok css problems solved

:has() moment

[celest ridge]

True

Based

[celest ridge]

Did the devtools help or did u trial and error

[fading wigeon]

devtools helped

[edgy sentinel]

what was the bad selector

[fading wigeon]

container- has base- when i couldve just done baseLayer- > container-

[oblique night]

is there any better way to hide "Hypesquad" in settings? I'm using css .item-2GWPIy:nth-child(40) {display: none;}

[edgy sentinel]

that won't work consistently

consider just not hiding it

[mortal mantle]

nth-child (40)

wtf

[teal cave]

Is there a way to fade the ends of a spoiler broken up over multiple lines?

[clear siren]

rate my css (wip)

[teal cave]

looks coo

[celest ridge]

what are u doing for the pattern

[teal cave]

.spoilerContent-32CqO- {
  border-radius: 999px;
  border: 2px solid red;
  box-decoration-break: slice;
}
.spoilerContent-32CqO-.hidden-2lQZ5q {
  background: repeating-linear-gradient(-45deg, red, red 2px, black 2px, black 5px);
}```

[celest ridge]

a repeating gradient?

m

||asdfgahjsdgfkajhsdfg sdkajhf gaksdjhfg askdjhfg ksadjhfgkasdjhfgkasjdhfgkasdjhfgkasdjhfgaksdjfhga skdjhfgkas djhfgaksd jgkasjdh fgkasdjh fgaksdjhf gaskdjhf gaskdjh fgasdkjh fgasdkjh fgkasjdh fg asdfgahjsdgfkajhsdfg sdkajhf gaksdjhfg askdjhfg ksadjhfgkasdjhfgkasjdhfgkasdjhfgkasdjhfgaksdjfhga skdjhfgkas djhfgaksd jgkasjdh fgkasdjh fgaksdjhf gaskdjhf gaskdjh fgasdkjh fgasdkjh fgkasjdh fg asdfgahjsdgfkajhsdfg sdkajhf gaksdjhfg askdjhfg ksadjhfgkasdjhfgkasjdhfgkasdjhfgkasdjhfgaksdjfhga skdjhfgkas djhfgaksd jgkasjdh fgkasdjh fgaksdjhf gaskdjhf gaskdjh fgasdkjh fgasdkjh fgkasjdh fg||

wait are u asking like

i assumed u were asking smth else but let me see if this is what u meant

[teal cave]

like this, so all the broken ends are faded

[celest ridge]

oh all the ends except for the real ends

[teal cave]

ye

[celest ridge]

probably not

[teal cave]

thanks for looking tho

[celest ridge]

ye np i try

ed

@fading wigeon mm im on desktop now and i think this prob works too

SIKE

chrome is so bad

[oblique night]

is this good for removing the "Account Removal" section in My Account?

.disableButton-3BR0Vj,
.button-ejjZWC.lookOutlined-3RTC7c,
.colorStandard-1Xxp1s.size14-k_3Hy4.description-foE_WP.formText-2UzJT0.description-3KXNo8,
.h5-2feg8J.eyebrow-2wJAoF.defaultMarginh5-3THN2O,
.divider-3nqZNm.marginTop40-Q4o1tS:nth-child(4), 
{display:none;}```

[edgy sentinel]

why would you want to remove it?

.marginTop40-Q4o1tS:has(.disableButton-3BR0Vj) {
  display: none;
}

this will work but why in the world would you want it gone

[balmy torrent]

so you have to use discord i suppose

(you want to leave it so badly)

[leaden valve]

@oblique night
For you question in support

  .unreadRelevant-2f-VSK, .item-2LIpTv {
    display: none;
}

[leaden valve]

@short frigate
For your question in support:

.downloadHoverButtonIcon-16xasX {
    display: none;
}

[short frigate]

what about

/* Hide the fucking useless download button */
[aria-label="Download"] {
display: none;
}

[leaden valve]

that also works

[mortal mantle]

Try not to use aria-label if possible

[short frigate]

why?

[mortal mantle]

It is localized to only English

[short frigate]

i only want to use for my self so..

[little agate]

you can use it if you want

[vast delta]

just add every possible aria label for every language

[little agate]

leaves div behind, you just removed the svg

[vast delta]

send screen what you wanna hide ill do it for you, silly svg remover

[little agate]

silly silly

[leaden valve]

ive been using that personally. Just removed the icon so i still have a button to press.

But it’s tiny

[little agate]

thats probably not what they wanted

[short frigate]

you don't even need that button
just open the link

[little agate]

this will work fine

[leaden valve]

Yea, forgot that the button was still there tbh

Today is not my day

[leaden valve]

Easier with the button because my editor usually send things to me over discord

[safe python]

devilbro moment

[edgy sentinel]

which download button

[little agate]

this, i use a:has([class="downloadHoverButtonIcon-16xasX"]) {display: none;} personally

[mortal mantle]

Me when everything needs to be hidden

[little agate]

for realsies

[safe python]

who needs messages

[mortal mantle]

I can resume css development from today on

now that the hardest test is dons

[glad urchin]

• {
  display: none;
  }

i wonder if it possible to remove most of discord's css to optimize it further?

[mortal mantle]

Discord uses too many color variables

it's such a pain to work them out

[vast delta]

just steal them from some theme like clearvision

[vast delta]

imagine a plugin that lets you deactivate specific parts of standard css/that deactivates css that gets overwritten

there are some super laggy transitions that are just overwritten but still calculated and it makes my heart bleed (i know thats where the blood is supposed to be)

[glad urchin]

only thing i wish is the lazy loading like RecyclerView in android

not sure if react has it or something similar can be done with css

[vast delta]

imagine discord one day becomes an actual application and not just electron bs ._.

[mortal mantle]

No I would not like to hear that name any longer in my life

[vast delta]

why? xd

[mortal mantle]

It was the reason why I uninstalled Better discord

[vast delta]

that has nothing to do with each other? huh?

[safe python]

they have no reason to

[vast delta]

they could make more performant ai features #ceoapproval

maybe with an actual program, the report feature would do SOMETHING

[vast delta]

anyone know how to select this in the console when you hover a server?

[clear siren]

I find it useful to have the f8break plugin

[vast delta]

f8 break, incredible idea, thank you

[summer crater]

put this in console setTimeout(() => {debugger;}, 3000) this will pause 3s after you ran it so you can keep your cursor over it

[edgy sentinel]

f8break yeah

https://vencord.dev/plugins/F8Break

[vast delta]

stern's worked fine, thank you though

as a reward, here you can hide the people speaking thing when hovering servers

[mortal mantle]

Are you still developing a theme

[vast delta]

eh, more into snippets right now

[summer crater]

speaking of themes, this is crazy https://github.com/maenDisease/Steam

[vast delta]

damn

thats actually crazy

what kind of nolife has time for that lol

i mean, it takes me hours to do little things, that would take me like months

i would love to see a big picture mode version of that

[mortal mantle]

Bro lost all of his sanity into that theme

[edgy sentinel]

why do people put so much effort into making the ugliest gimmick themes

[vast delta]

DONT HATE ON SHIGGYCORD

[edgy sentinel]

the steam ui looks so bad 😭

[mortal mantle]

Just proves how capable css is capable of

Well actually SCSS

[edgy sentinel]

css ye

[safe python]

facebookcord when

[mortal mantle]

I put effort in my work because otherwise I would be doom scrolling to death

[mortal mantle]

Already made

[safe python]

https://cdn.discordapp.com/emojis/1054091826233098345.webp?size=48

[mortal mantle]

By daibolulait

[vast delta]

someone make minecraftcord, you have to explore a minecraft cave and find the server you wanna talk in

[mortal mantle]

I'm just perfecting my own baby

[vast delta]

if someone pings you, a creeper explodes behind you

[mortal mantle]

[vast delta]

is it in theory possible to 3d render in css?

[mortal mantle]

This is just me having some interest in programming for the first time in my life

[vast delta]

(ignoring the obvious performance limitations)

[vast delta]

i never felt like actually doing something because its all so hard and boring to learn but css is soo easy to pick up

[mortal mantle]

Well, at least it is something beneficial to learn

It could be a motivation for me to learn front end

[vast delta]

the only thing i ever get mad at when in css is discords devs being stupid, not the language itself being stupid

[vast delta]

(insert joke that breaks rule 3 here)

[mortal mantle]

Nuh uh bad silent

[vast delta]

oh im still called silent

boom

[mortal mantle]

uncoolesding

[vast delta]

Am overly inferior (Aoi)

[mortal mantle]

https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=48

[vast delta]

i need a long darker background for testing if two things line up, sorry for this incredibly inconvenient message that will totally not be deleted in like 5 minutes because im already done looking at it, also, i think this is enough typing its already two full lines in my message box

dammit it doesnt go further

what do you think about pizza aoi? (i need it to scroll up because its in the center of the screen)

[cedar cairn]

what in the actual goddamn everloving fuck

[mortal mantle]

pizza is nice, but only if it's not frozen

[vast delta]

i mean, who eats frozen pizza?

[mortal mantle]

Students

[vast delta]

bro its like 20 minutes of lightly attended oven time, why not?

[mortal mantle]

But do you have the time to make the entire pizza from scratch

[vast delta]

oh you mean pizza you store frozen

i thought you were talking about cold pizza, which is disgusting

[mortal mantle]

yeah ....

Who eats cold pizza

[vast delta]

just put it in the microwave if you didnt finish it last evening, BUT DONT EAT IT COLD

[mortal mantle]

Microwave eww

[vast delta]

its quick at least

me in grandma mode checking if scaling works correctly

[mortal mantle]

Why does your discord look so weird

Are you using it on a phone

[vast delta]

no?

[mortal mantle]

the aspect ratio just doesn't feel right for me ...

[celest ridge]

yes

you can even cull backfaces '

[vast delta]

how to select every child of a type, for example every .svg inside child A, even if it is a multiple grandchild?

[celest ridge]

probably easier to work with quads than tris tho with css but that would be better for minecraft

[vast delta]

i think i actually saw that in the description of some property and immediately deleted it from my quickcss because i was too scared

[celest ridge]

i used it for a game

its lit

a svg

[vast delta]

wat why does this work

[celest ridge]

thats what its supposed to do

[vast delta]

hm, interesting, thank you

[celest ridge]

if u wanna look at more selector operators

[vast delta]

NO PLEASE

i dont wanna read another page about css things

[celest ridge]

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

[vast delta]

NOOOOOOOOOOOOOOOOOOOOOOOO

[celest ridge]

and if ur bad at reading

https://flukeout.github.io/

[vast delta]

i will kill you

[mortal mantle]

So mean .........

[vast delta]

you go eat your frozen pizza

[mortal mantle]

😭😭😭

[devout umbra]

probably out of scope for this server, but what is a good way to make your own component library using unocss? (tailwindcss alternative) apply rules? shortcuts in config? custom components for a given framework?

[gilded cloak]

No, but I know for sure unocss is based so good luck

[oblique night]

is there any css to hide the rules channel of every discord server? asking for a friend

[clear siren]

.containerDefault-YUSmu3:has([aria-label^="rules"]){display: none}

should hide all channels that start with 'rules'

[vast delta]

only works for discord on english though

[clear siren]

does the 'rules' channel name change on different languages?

[true mica]

no

[slim pond]

I forgor I had this

[oblique night]

any way to do it by this icon? some places call the rules channle something different like in the ss below

[edgy sentinel]

why would you hide the rules channel

[clear siren]

.containerDefault-YUSmu3:has(path[d^="M33 34.58"]) { display: none} will use the icon

[mortal mantle]

But why hide it ....

[clear siren]

that is a good question

[mortal mantle]

At this point I might hide the entire channel list for them

[oblique night]

why not go a step further and do this

*{display:none;}```

[mortal mantle]

very funny

[oblique night]

is it possible to move this to the account details grid?

[mortal mantle]

Try it yourself

[glad urchin]

padding and margin my beloved

[oblique night]

idk how to move elements to .fieldList-in8WkP

[oblique night]

ok

[cedar cairn]

simply absolute position it there 🔥

[oblique night]

how do I add the background thing in

[glad urchin]

margin, padding and height 🔥🔥

[oblique night]

of what

[glad urchin]

of the background

i think height will do

[oblique night]

this is what happens when I change height

[cedar cairn]

you could just fake it by removing the border radius (and whatever padding you added) from the bottom of the grid container, and making the button's container's background the same color

and adding border radius to the bottom of the button

[oblique night]

i can't follow what u said

this is the best I could do

[cedar cairn]

i mean that more or less looks like what i was going for so

[simple kiln]

any reason why category channel and button channel "channels & roles" have different font style or just feels different... Although, they have the same font-size and font-family..

[mortal mantle]

Discord's classic shitcode

[simple kiln]

... :<

[fading wigeon]

because its structured differently than the rest of the channel items

[modest pewter]

anybody know how to pause theme animations when tabbed out

[alpine cove]

try .app-focused

[modest pewter]

yeah friend solved it

i think it was root:within-focus

and then the anims

[fluid meadow]

can someone please help improve this CSS so it also hides the popup text in the full profiles view? #🏥-vencord-support-🏥 message

[digital pier]

copypaste but replace .pronouns-blah with .pronouns-RGQpyK ig

[fluid meadow]

thanks

[celest ridge]

:root:focus-within is so fire

[teal cave]

github new site is pretty when opening minified css, shit blows up your whole computer

[mortal mantle]

@mortal mantle I wonder if pinging myself works

good, automod message now themed

[clear siren]

my theme is slowly taking shape

styling all the little things and dialogs and stuff will take ages though and bloat the css tenfold at least..

[mortal mantle]

Looks great

[clear siren]

and I have no idea how to make the userlist presentable

[mortal mantle]

I haven't done much to it tbh

[clear siren]

not bad

when I get my discord to a good enough state I'm gonna make my firefox, spotify and steam css match up

[mortal mantle]

I don't care about modding the other things tbh

[clear siren]

I've riced firefox since forever, spotify recently and now steam's new ui is all css too so why not

[mortal mantle]

i have spicetify on spotify and catppuchin on firefox

but like I don't mod the css files within

rather pick an already available theme

[clear siren]

I've always preferred to do my own css tbh

[modest pewter]

real

[rugged echo]

that looks good

I like the message bubbles, or whatever is that called

[teal cave]

I used to make userstyles before this, and reddit themes back when old.reddit.com was the only reddit

[clear siren]

yeah I started with userstyles too

still do make small modifications to sites I frequent

[mortal mantle]

i love message bubbles

[clear siren]

this is the part about the bubbles I like that didn't show in the previous shot

[mortal mantle]

yeah you will have to fix that

[clear siren]

fix what

[mortal mantle]

groupstart messages and non-groupstart messages are different

wait

[clear siren]

that's the point

[mortal mantle]

are you doing it on purpose

[clear siren]

yes

[mortal mantle]

real

[slim pond]

:root {
    --primary-800-hsl: 220 calc(var(--saturation-factor, 1)*7%) 7.2%;
    --primary-730-hsl: 220 calc(var(--saturation-factor, 1)*7%) 18%;
    --primary-700-hsl: 220 calc(var(--saturation-factor, 1)*7%) 18%;
    --primary-660-hsl: 225 calc(var(--saturation-factor, 1)*7%) 25.6%;
    --primary-645-hsl: 227 calc(var(--saturation-factor, 1)*7%) 21%;
    --primary-630-hsl: 225 calc(var(--saturation-factor, 1)*7%) 23%;
    --primary-600-hsl: 227 calc(var(--saturation-factor, 1)*7%) 26%;
    --primary-560-hsl: 227 calc(var(--saturation-factor, 1)*7%) 29.6%;
    --primary-530-hsl: 227 calc(var(--saturation-factor, 1)*7%) 33.2%;
    --primary-500-hsl: 227 calc(var(--saturation-factor, 1)*7%) 36.8%;
}
```the most offputting dark theme

if you can even call it that

[little agate]

i want to steal some peoples themes

i cannot find ones i like

[mortal mantle]

just don't use a theme

[little agate]

i havent for ages but random fixation

meow

[mortal mantle]

meao

[oblique night]

is there any way to make this disappear after 3 sec of not hovering over it? (floating folders plugin)

[celest ridge]

probably not with css

i assume thats like a tooltip popup and if it gets removed from the DOM you have no control over that with css

[oblique night]

is it possible to make the copy user ID occur when I click my username instead of when I click the 3 dots and then that button?

[celest ridge]

wow i love deobfuscating javascript

this is SO FUIN

[celest ridge]

oh they added an off switch

how nice of them

[alpine cove]

vns #🧩-plugin-development

[cloud jolt]

👉 #🧩-plugin-development

[alpine cove]

bad vap !!!!

[celest ridge]

oh why am i here

LMAO

[alpine cove]

sentenced to #🏥-vencord-support-🏥

[spark veldt]

I should add this channel to my favorites. Lots of theme stuff going on in here as well. Me likey

[mortal mantle]

Riddim Go to sleep

[spark veldt]

Nah

[vast delta]

You can make the button invisible, the same size as the name and move it over so when you click on the name you actually click the button

[oblique night]

how do I allow hover showing the Active Developer tooltip, but prevent a click from opening the link? pointer events stops both

[safe python]

don't think it's possible

with just css

[timid dragon]

so, any of you guys know any css that I can use to resize member list and channel list?

[mortal mantle]

.members-3WRCEx, .sidebar-1tnWFu {
    resize: horizontal;
    max-width: 240px;
    min-width: 120px;
}

[timid dragon]

tysm

[timid dragon]

sorry, I can't seem to make this work, maybe i'm making something wrong or it's a bug. I'm trying to use QuickCSS on Vesktop.

[mortal mantle]

Resize means you can resize it to however size you want

There's a white icon at the bottom right of the container that lets you do so

[timid dragon]

thank you so much man, or ma'am, idk which one

but would be better if you move the resize to the left, instead of the right corner

[timid dragon]

and maybe extend the members name size

so they wouldn't cut off

[grand surge]

Hello, are there any specific resources you would recommend for getting started cresting Vencord themes?

[mortal mantle]

increase the max-wdith to a larger number

240px is the default discord's width so I just set to that

[timid dragon]

i put 300px in max width

[foggy zealot]

i generally just:

• find something i don't like the look of
• mess around with the devtools until it looks nice
• copy & paste my rules into the css
• repeat until good
  not sure if that'll work for like a complete theme (my theme's just default light with some small changes to make it look better)

[timid dragon]

hello, any plugins that make you send audios in vesktop? replugged has this type of plugin, dunno if vencord too

[teal cave]

This is the theme dev channel, not for plugin questions (ask in #🏥-vencord-support-🏥)

[edgy sentinel]

can you link the replugged plugin

[timid dragon]

sorry, missclick

[timid dragon]

gonna do that in the #🏥-vencord-support-🏥

[grand surge]

Can you give the css that stops all the badges from doing both?

[magic stream]

can i use discord variables in my css plugin files?

[harsh solstice]

Yea

[runic lake]

im going insane with 0 knowlege i rewirte in some weird why the snipped form here https://discord.com/channels/1015060230222131221/1136186920389582858

this are my results so far:

big fail one (for the meme)

and this how it looks so far and yes i used gpt to learn how something works like (how a function can handle Something as a example) also i try to used https://www.w3schools.com/css/ to write the code damm and i easy wiped 8h of life

[grand surge]

just changed the font to Andika and for some reason these things appeared in the settings

[grand surge]

like the scrollbar

not the entire vencord thing

that's 'cause of vencord obviously

[toxic yew]

.headerText-10ez_d {
    overflow: hidden;
}

[grand surge]

oh thx!

yea that worked

[true mica]

well yeah that alone wont do it

thats just a piece of the puzzle

you’d need to add what needs to meet this condition (image tag probably) and tell it to hide it

give me a min

i was a bit wrong, but here's the one that works:

/* Hide a user's avatar */
img[src*=d7884d89728f276c023fa37c710bc7e1] {
    display: none;
}```

[edgy sentinel]

you can also replace it with a different image if u want

img[src*="e96a60ba110a355275b59f4d9974bcae"] {
content: url("https://cdn.discordapp.com/avatars/343383572805058560/1ac28adc29dd678f0d6653e2ed90ae2e.png?size=1024&width=0&height=307");
}

[celest ridge]

This is crazy

[alpine cove]

ven everyone

img[class|="avatar"] {
    content: url("https://cdn.discordapp.com/avatars/343383572805058560/1ac28adc29dd678f0d6653e2ed90ae2e.webp?size=1024");
}

i saved it with nvim and nowi t doesnt go away

[mortal mantle]

this is better

.username-3_PJ5r {
    font-size: 0;
}
.username-3_PJ5r::after {
    content: "watervee 🪀";
    font-size: 16px;
    color: rgb(221, 120, 120);
}

is there a way to change all the status emojis into Ven's one

[halcyon anchor]

that's why it's named vencord

[rugged echo]

now make everyone shiggy

[halcyon anchor]

there's a snippet for that

[edgy sentinel]

.pictureInPictureWindow-3ms5Zy {
    resize: both;
}

@coral hare

[digital pier]

that’s so cursed

[edgy sentinel]

.pictureInPictureVideo-2puO2Q {
    min-width: 17.8em;
    min-height: 10em;
    resize: both;
}

its so cursed but works

[vast delta]

haven't tested, on my phone rn

[tidal moth]

this snippet fucked up my discord so bad i had to restart disc to remove it

i say this with respect

[rugged echo]

you forgot a ; and it has : in width, but if you fix that, it works

[glad urchin]

how do i change the size of these pills? there was something here but it got removed

[mortal mantle]

.pill-1NRFie

[glad urchin]

that does work for now, only need to set border radius
im not sure about for changing height, since it needs !important and changes every other height

[mortal mantle]

.pill-1NRFie, .wrapper-z5ab_q:not(:last-child) {
      height: 40px !important;
    border-radius: 0;
      align-items: center;
    width: 3px;
    margin-left: 4px;
    background-color: var(--background-modifier-accent);
}
.wrapper-z5ab_q:last-child {
    width: 3px;
    align-items: center;
    border-radius: 0;
    height: 40px !important;
}
.item-2LIpTv {
      max-height: 40px;
    background-color: color-mix(in srgb, cyan 50%, transparent);
    border-radius: 0;
}
.item-2LIpTv[style="opacity: 1; height: 40px; transform: none;"] {
    background-color: cyan;
}

here's what i currently have for the pills

[glad urchin]

👍

[glad urchin]

/* || SERVER ICONS || */
[class*=listItem-] [class*=wrapper-2PSQCG],
[class*=listItem-] [class*=wrapper-] > svg > foreignObject
{
    mask: none !important;
    border-radius: 0px;
}

/* || FOLDER AND ICONS || */
[class*=wrapper-38slSD] > div > div > [class*=wrapper-2PSQCG] > svg > foreignObject > div > div,
[class*=wrapper-38slSD] > div > div > [class*=wrapper-2PSQCG] > svg > foreignObject > div > div > div > div
{
    mask: none !important;
    border-radius: 0px;
}

/* || SERVER UNREAD PILL || */
[class*=listItem-] > div > span
{
    border-radius: 0px;
}

/* || CHANNELS || */
[class*=containerDefault-YUSmu3] > div > [class*=unread-]{
    border-radius: 0px;
}
[class*=link-1_kTxV],
[class*=linkTop-1W1aK6] > div,
[class*=linkTop-1W1aK6] > [class*=children-]
{
    border-radius: 0px;
}

/* sidebar top , boost progress*/
.sidebar-1tnWFu {
    border-radius: 0px !important;
}
.progressBar-2yl2pi {
    border-radius: 0px;
}

[class*=linkTop-1W1aK6] > [class*=children-] > div > [class*=wrapper-] {
    /* border: 2px solid green; */
    border-radius: 0px;
}
[class*=linkTop-1W1aK6] > [class*=children-] > div > [class*=wrapper-] > [class*=total] {
    padding-left: 4px;
}
[class*=linkTop-1W1aK6] > [class*=children-] > div > [class*=wrapper-] > span::after {
    display: none;
}

[class*=container-YkUktl] > [class*=avatarWrapper-1B9FTW],
[class*=container-YkUktl] > div > button
{
    border-radius: 0px;
}

/* || TOOLTIPS || */
[class*=layerContainer-2lfOPe] [class*=disabledPointerEvents-cGr1My] [class*=tooltip-] {
    border-radius: 0px !important;
}

/* || POPUP || */
[id*=popout_] > div,
[class*=menu],
[class*=menu] [class*=focused]
{
    border-radius: 0px;
}

/* || CHANNELS LOADING PLACEHOLDER || */
[class*=wrapper-3HVHpV] > div > div > div > div,
[class*=wrapper-3HVHpV] > div > div > div,
[class*=wrapper-3HVHpV] > div > div > h3 > div
{
    border-radius: 0px !important;
}

so far

is there a way to change the scrollbar

[mortal mantle]

try to avoid selectors like these

they will affect performance

[safe python]

thats like everything bad you can do in a selector 😭

[glad urchin]

then how

[mortal mantle]

what are you trying to achieve with those selectors

[glad urchin]

trying to find the folder, then find wrapper class then find div

[clear siren]

I'm never worried about performance because even with those it's probably negligible but those selectors are just all kinds of weird

[mortal mantle]

.guilds-2JjMmN {
    width: 64px;
}
.listItem-3SmSlK, .wrapper-38slSD, .svg-2ifYOU, .blobContainer-ikKyFs, .listItem-3SmSlK>.wrapper-z5ab_q+div:not([class]), .wrapper-2PSQCG, .svg-2ifYOU>foreignObject {
      width: 64px;
      mask: none !important;
}
.listItem-3SmSlK:not(:has(.guildSeparator-a4uisj)), .wrapper-2PSQCG, .svg-2ifYOU>foreignObject {
      height: 40px;
}
.expandedFolderBackground-1kSAf6 {
     width: calc(64px - 24px);
      border-radius: min(24px, 0);
}
.svg-2ifYOU>foreignObject {
      transform: translateX(calc(((64px*-1)/2) + 50%));
}
.wrapper-3kah-n, .folder-241Joy, .circleIconButton-1VxDrg {
      margin-left: 12px;
      width: calc(64px - 24px);
      justify-content: start;
    border-radius: 0 !important;
      height: 40px;
}
.wrapper-3kah-n img, .folderIconWrapper-1oRIZr, .childWrapper-1j_1ub, .expandedFolderIconWrapper-3RwQpD, .closedFolderIconWrapper-3tRb2d {
      border-radius: 0 !important;
      height: 40px;
    width: 40px;
}
.svg-2ifYOU {
      position: static;
}
.wrapperSimple-2SFl9K {
      border-radius: 0 !important;
}
.circleIcon-3489FI {
      margin-left: 12px;
      height: calc(40px - 8px);
}

[glad urchin]

ill try to reduce the selectors to one selector if even possible
what about the scrollbar

[mortal mantle]

:root {
    --scrollbar-auto-thumb: red;
    --scrollbar-auto-track: green;
    --scrollbar-thin-thumb: blue;
    --scrollbar-thin-track: yellow;
}

[glad urchin]

what about style? (width / border)

[toxic yew]

google webkit scrollbar

[edgy sentinel]

actually not true

we have had multiple cases of some bad snippets / themes making discord extremely laggy

[clear siren]

hmm

[edgy sentinel]

with half a second lags and stuff when typing or alt tabbing

usually happens because you use * in conjunction with other selectors

[clear siren]

oh ok, I thought modern browsers were smarter than that with css dom traversal etc

[edgy sentinel]

it generally happens if you have a selector like
[very complex selector] *

[clear siren]

hmm ok

[edgy sentinel]

since now you're forcing the dom walker to start walking up the tree from every single element to check the very complex selector

[clear siren]

I see

[edgy sentinel]

[very complex selector] div does the same but for all divs in the document so it's also pretty bad

[edgy sentinel]

this selector should be fine-ish pronably, but still very terrible and could be improved a lot

the div > div at the end will make it try a shit ton of elements

[toxic yew]

the div they want has its classname, dont know why they do that

[mortal mantle]

less typing I guess ....

[clear siren]

do the random characters in classes ever change? I've seen them in so many apps/sites and in some they change sometimes

[mortal mantle]

yes they do

but very rarely

[clear siren]

I hate modern website designs, so much generated code and spaghetti

[edgy sentinel]

it's convenient.

vencord's website also uses them

:p

[mortal mantle]

8 characters

I thought 6 was enough

[edgy sentinel]

svelte does 6 too idk astro is just special

[vestal field]

its for scoped css right?

[edgy sentinel]

yes

it's really comfy because it allows you to write very generic selectors and not have to worry about unique classes

[clear siren]

classes aren't even supposed to be unique imo, that's what ids are for

[edgy sentinel]

unique as in across different components

you will have more than one title in your page

So you have to name it like .some-thing-title

so it's unique and doesn't collide with the other one

that's most easily achieved by using scoped styles aka the randomised suffix

[clear siren]

[mortal mantle]

[vast delta]

so weird haha

[mortal mantle]

[vast delta]

xd

[mortal mantle]

enhanced stock discord colors

[mortal mantle]

I have a question: how can I add a fallback color for the background, when the default one is color-mix? Since only Vesktop (and probably Armcord) supports it, the color will be transparent on normal Discord

[edgy sentinel]

background: red;
background: color-mix();

[mortal mantle]

doesn't seem to work for me

[clear siren]

maybe with @supports?

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

[mortal mantle]

normal discord seems to spoof itself as supporting color-mix, but it actually doesnt

.userProfileModalInner-3dx9L9 .top-Ktfr_T .item-2GWPIy {
    background: red;
}
@supports (background: color-mix(in srgb, var(--profile-body-background-color) 40%, transparent)) {
    .userProfileModalInner-3dx9L9 .top-Ktfr_T .item-2GWPIy {
        background: color-mix(in srgb, var(--profile-body-background-color) 40%, transparent);
    }
}

otherwise this would have worked

[clear siren]

you could query another condition like color:oklch(1 1 1)

there's no way of knowing if color-mix and oklch color space will be supported at different points in the future tho

but that's kind of a workaround

actually both of them got support with chrome v111 so yeah

[tidal pollen]

how can i replace an icon in CSS

like say i want to replace the fucking ugly twitter logo

if anyone knows pls ping

<3

[toxic yew]

[src*='/assets/4643b9da67226d176c1c988a94b1f1ec.svg'] {
    content: url('https://discord.com/assets/85cf2b49d2a185c98ec8e383ad5a05d6.svg');
}

[toxic yew]

.panels-3wFtMD {
    display: flex;
    flex-direction: column;
}

#vc-spotify-player {
    order: -1;
}

[grand surge]

thank you so muchh !!

[vast delta]

order is a thing??

[mortal mantle]

I managed to find a way around the color-mix, but I had to rewrite entire elements using it

[clear siren]

how did you do it, just curious

[mortal mantle]

for example with this selector, instead of using color-mix to mix the variable with another color (here fortunately transparent), I created a transparency variable and then adjust it with HSLA scheme

these background values have about the same result

[clear siren]

btw did you know hsla() is legacy, hsl() also supports an alpha

works the same

[mortal mantle]

hsla popped up in my mind first

[clear siren]

but yeah that works, I assumed you needed to use the var you had previously and if so, another workaround to mix colors would be to make a gradient with stops in a way that it only shows one color from the middle basiclly

[mortal mantle]

Interesting

[clear siren]

I've done so many stupid hacky things with css over the years lol

but if it's stupid and it works, is it stupid 🤔

[mortal mantle]

if it works it works

[vast delta]

Unless it lags, then it's stupid

[mortal mantle]

https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=48&name=shiggy&quality=lossless

[vast delta]

Shiggy is very not laggy, shiggy just shaggy

that's a status

Eh sounded better in my head but it's true, shiggy do be just shaggy

[mortal mantle]

my theme is definitely shiggy, not laggy

[simple kiln]

anyone, how to remove the background around this logo when in server page and on direct message?

[aria-label="Servers sidebar"] [class*="tutorialContainer-"]:has([aria-label="Direct Messages"]) {}

[toxic yew]

.childWrapper-1j_1ub {
    background: none !important;
}

[simple kiln]

i see, how about when on direct message.

[toxic yew]

can u screenshot what u mean

[simple kiln]

the blue one, whengoing to direct message page

[toxic yew]

it should work

[simple kiln]

it does not affect when going to direct message

it's blowing up my mind..

[simple kiln]

i'm on browser..

it only works when on server

[toxic yew]

huh why is it black

open devtools, inspect it and see what's wrong

[simple kiln]

i see the problem now...

thnx. it's working.

[rugged echo]

cssers

[mortal mantle]

im a certified csser

[teal cave]

new slur invented

[clear siren]

cascading style sheeter

[teal cave]

she style on my sheet til I cascade

[mortal mantle]

Horror

[vast delta]

might be broken right now because i havent commited on github yet, but i will be doing that right now

[mortal mantle]

No I will not ignore the text in italic

[vast delta]

shhhhh

okay should work now

list of possible animations will be at the top of the onekoanimations file until i can make a thread in the css snippets channel

[digital pier]

i could just give you the snippet dev role

[vast delta]

yes please!

i didnt think of that haha

[digital pier]

done

[vast delta]

should i also move the skins in the thread?

thank you!

[teal cave]

someone gotta put all the oneko stuff in a repo so we can track the 239847234234 versions of it

[vast delta]

hi, thats me, you're probably wondering how i got into this situation

i got three different oneko files in my repo now xd

[teal cave]

epic sauce

[vast delta]

i moved everything notable in the thread of the snippet message

[mortal mantle]

3 aint enough

i need more

[oblique night]

Anyone know how to remove the filled in circle without removing the role color?

[teal cave]

how do you want to display the colour if not with the dot?

[oblique night]

idk

[rugged echo]

is it possible to separate the toolbar? like I saw a theme that made this but the code is minified, and I didn't find anything tbh, if not well maybe I could figure out myself or give up lol

[mortal mantle]

It's just trial and error

there's really no tip for it

Besides the documents on mdn

[teal cave]

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

[teal cave]

Do you just want default discord but with space between channels list and userarea?

[rugged echo]

I edited an already existing theme that separated the user area but not the channel thing at the top

[teal cave]

Not sure if this is what you mean

.chat-2ZfjoI {
  gap: 20px;
  background: green;
}
/* Title bar */
.container-ZMc96U {
  border-radius: 10px;
}
/* Chat and member list*/
.content-1jQy2l {
  border-radius: 10px;
  overflow: hidden;
}
.content-1jQy2l::before {
  display: none;
}```

[rugged echo]

ye thats what I saw on other theme

I will try

oh yea it work, thanks

[exotic nexus]

/* Make "NEW" line less annoying */
.isUnread-3Lojb- {
  border-color: var(--background-modifier-accent);
}

.isUnread-3Lojb- span {
  color: var(--channels-default) !important;
}

.isUnread-3Lojb- .unreadPill-3nEWYM {
  background-color: var(--background-modifier-accent);
  z-index: 100;
}

.isUnread-3Lojb- path {
  background-color: var(--background-modifier-accent);
  color: var(--background-modifier-accent) !important;
  fill: var(--background-modifier-accent);
}

[robust totem]

add visibility: hidden; to the dot and visibility: visible to the pseudo element, you can then resize the circle to change the left spacing

or add display: contents; to the dot

[sharp shell]

that is used for removing roles btw

so you probably shouldn't

[cedar cairn]

i mean you can just right click on avatar > roles > and change them from there

[rugged echo]

too annoying, but the snippet from #🎨-css-snippets still has the option to remove roles, its just on the center

[grand surge]

Does anybody know how to change he image of this button? (Message Preview)

I know how to change all but I dont know how to get this single one

.buttonWrapper-3YFQGJ {
    filter: grayscale(0.0%)!important;
    background-image: url(URL);
}```

[rugged echo]

yeah that button seems to be connected to the gift button, so if you hide that you will not see the preview message button (also yeah it looks bad, but thats my opinion )

you could inspect it using devtools, but idk if its a different class or whatever

[mortal mantle]

.buttons-uaqb-5 button[style="padding: 0px 2px; height: 100%;"] img[src="https://discord.com/assets/4c5a77a89716352686f590a6f014770c.svg"] {
    content: url("https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=48&name=shiggy%7E1&quality=lossless");
    margin-top: 4px;
}

[rugged echo]

[cosmic sonnet]

this is incorrect

[rugged echo]

well then idk why it wasn't visible with a theme for removing nitro stuff, but I tried it before and even without the theme it wasn't there, so I have no idea what happened

[cosmic sonnet]

it only shows up when you have text in the textbox

[rugged echo]

right I am stupid, I will try

still dissapears, its probably a css issue

[cosmic sonnet]

try this?

[aria-label="Send a gift"],
[aria-label="Send a gift or Boost this server"] {
  display: none !important;
}

english only but it works for me

[rugged echo]

I am using this to remove most stuff, and I do use discord on english

[mortal mantle]

.buttons-uaqb-5 button[style="padding: 0px 2px; height: 100%;"]+button {
    display: none;
}

thats the case for typing

wait

no

[mortal mantle]

welp now that I managed to replicate this

[rugged echo]

looks cool

[mortal mantle]

well this looks like horror to me

[rugged echo]

maybe not that good with multiple lines

[formal fox]

Would it be possible to make shiki codeblocks not wrap text, but instead have it so u can scroll side ways? in css

[flat shuttle]

.shiki-root > code {
    white-space: pre;
}

.shiki-root > code::-webkit-scrollbar {
    height: 6px;
}

.shiki-root > code::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 3px;
}

.shiki-btns {
    position: static;
    margin: 0.5em -0.5em -0.5em;
}

.shiki-btn:last-child {
    border-radius: 0 4px;
}

[formal fox]

Appreciate it

messes up the copy button tho

[flat shuttle]

without the last two lines the button stays there but it's kind of buggy

.shiki-root > code {
    white-space: pre;
}

.shiki-root > code::-webkit-scrollbar {
    height: 6px;
}

.shiki-root > code::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 3px;
}

[formal fox]

Oh

[formal fox]

Yea ig it's better this way then

Thanks

[rugged echo]

you could make it so that it says fixed i guess

[formal fox]

Like position: fixed;?

[rugged echo]

yes, but i don't know if that works

[formal fox]

It just disappears lol

Idk much ab CSS

[rugged echo]

idk either, just some basic stuff ig

but I do what i can lol

[mortal mantle]

I have returned with more war crimes

[glad urchin]

looks cursed and good at the same time

i have a suggestion though, why not resize the attachment panel a little

[mortal mantle]

to which direction though

[glad urchin]

a little smaller?

[mortal mantle]

hmm

how does it look now?

[glad urchin]

👍

[vast delta]

send.

This is not a question anymore, this is a must

[mortal mantle]

I'm eating

[glad urchin]

will try to modify it to the size of mobile picker

[little agate]

2048

[flat shuttle]

pro gamer

@property --rainbow {
  syntax: '<color>';
  initial-value: #ff000033;
  inherits: false;
}

@keyframes rainbow {
    16.7% { --rainbow: #ffa50033; }
    33.3% { --rainbow: #ffff0033; }
    50%   { --rainbow: #00800033; }
    66.7% { --rainbow: #0000ff33; }
    73.3% { --rainbow: #ee82ee33; }
    100%  { --rainbow: #ff000033; }
}

#app-mount {
  transform: rotate3d(2, -1, -1, -0.2turn) scale(0.9);
  box-shadow: 8px 8px 8px var(--rainbow), 
              16px 16px 16px var(--rainbow), 
              32px 32px 32px var(--rainbow), 
              64px 64px 64px var(--rainbow),
              128px 128px 128px var(--rainbow);
  animation: rainbow 5s linear infinite;
}

[true mica]

my god

[mortal mantle]

Incredible

[stuck plinth]

post to #🎨-css-snippets if you haven't already

[haughty totem]

looks like it can’t handle >9 icons

[mortal mantle]

Yes

[flat shuttle]

[mortal mantle]

I don't have more than 9

Truth is I cannot handle all test cases

[haughty totem]

fair

[stuck plinth]

how did that happen

[flat shuttle]

i'm not cute 😔

[haughty totem]

lol this server is raw

[stuck plinth]

dw i gotchu

[stuck plinth]

is it possible to make messages be lifted above the rest when hovered on

[celest ridge]

@gleaming crag #🧊-off-topic-iceman-only message

img[src="/assets/0ef9c1dd967f03859144a42402b01e53.svg"] {
    content: url(/assets/85cf2b49d2a185c98ec8e383ad5a05d6.svg);
}```

idk if this works but lmk if it does

[haughty totem]

for sure

[stuck plinth]

can someone write css to do that because i am not skilled enough to

[gleaming crag]

epic

[celest ridge]

yea one sec

also wtf @property is real

[gleaming crag]

it works but not on the connection screen ```html
<button class="inner-1lPVFp accountButtonInner-33vCDY" type="button" aria-label="X" style="background-image: url("/assets/4643b9da67226d176c1c988a94b1f1ec.svg");"></button>

the svg is different for some reason

[celest ridge]

kinda but cant get the messages to clip above the rest of the ui

li[id|="chat-messages"] {
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-in-out;
}
li[id|="chat-messages"]:hover {
    transform: translateY(-1em) scale(1.2);
    box-shadow: 2px 2px 10px #0003, 8px 8px 10px #0003;
    background-color: var(--background-primary);
    border-radius: 1em;
}```

[stuck plinth]

it looks like the message transform is unrelated to the full window transform

[celest ridge]

unrelated ?

yea the message gets transformed and then the full window gets transformed after so its like relative

[teal cave]

CSS of questionable usefulness to see style attribute for some reason, I've shitposted in #🎨-css-snippets enough today so not gonna post there

:hover::after {
  content: attr(style);
  background: aliceblue !important;
  box-shadow: 0 0 3px 0 black;
  color: black !important;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  z-index: 9999;
}```

eg

[haughty totem]

cool

[stuck plinth]

make CSS that shows itself instead of this

[rugged echo]

whar

[haughty totem]

lol

sauce https://css-tricks.com/books/greatest-css-tricks/full/#:~:text=block%3B }-,style {,-font-family%3A

css quine

[true mica]

lmao

[worthy dust]

this screenshot has your name in it

[haughty totem]

thanks for the headsup, but that’s the css-tricks.com author’s, so it’s cool

[worthy dust]

good to hear

[haughty totem]

🙂

[rugged echo]

just in case someone wants this, obviously not stolen code

/* hide vencord toolbox */
.vc-toolbox-btn svg path {
    d: path('M12 2C6.486 2 2 6.487 2 12C2 17.515 6.486 22 12 22C17.514 22 22 17.515 22 12C22 6.487 17.514 2 12 2ZM12 18.25C11.31 18.25 10.75 17.691 10.75 17C10.75 16.31 11.31 15.75 12 15.75C12.69 15.75 13.25 16.31 13.25 17C13.25 17.691 12.69 18.25 12 18.25ZM13 13.875V15H11V12H12C13.104 12 14 11.103 14 10C14 8.896 13.104 8 12 8C10.896 8 10 8.896 10 10H8C8 7.795 9.795 6 12 6C14.205 6 16 7.795 16 10C16 11.861 14.723 13.429 13 13.875Z');
    transform: scale(4);
}

[glossy aurora]

this button exists btw

[haughty totem]

ah cool, i made that too a while ago but it broke

[glossy aurora]

oh wait i misread i thought that hide vencord toolbox meant to get rid of it

[rugged echo]

I don't want to reload everytime, and its mostly because I just don't like how the original looks like, and I didn't wanted to use oneko there

[rugged echo]

it was small for some reason

[glossy aurora]

it's even funnier with the staff bugnet icon hidden as well

❓ ❓

[rugged echo]

if you want double help

[gilded cloak]

?

[haughty totem]

hehehe yeah

[rugged echo]

well at least it looks like the original, I hope

[glossy aurora]

?cord

[haughty totem]

lööl

so much confuse

[glossy aurora]

[class^=toolbar] [class^=icon] svg path {
  d: path('M12 2C6.486 2 2 6.487 2 12C2 17.515 6.486 22 12 22C17.514 22 22 17.515 22 12C22 6.487 17.514 2 12 2ZM12 18.25C11.31 18.25 10.75 17.691 10.75 17C10.75 16.31 11.31 15.75 12 15.75C12.69 15.75 13.25 16.31 13.25 17C13.25 17.691 12.69 18.25 12 18.25ZM13 13.875V15H11V12H12C13.104 12 14 11.103 14 10C14 8.896 13.104 8 12 8C10.896 8 10 8.896 10 10H8C8 7.795 9.795 6 12 6C14.205 6 16 7.795 16 10C16 11.861 14.723 13.429 13 13.875Z');
}

it doesn't actually apply to the toolbox though which means you also need that one

[haughty totem]

sad!

[glossy aurora]

anti-hide

[rugged echo]

now change every profile picture and name to ?

[glossy aurora]

???

[src^="https://cdn.discordapp.com/avatars/"] {
  content: url(https://discord.com/assets/3e531d8e171629e9433db0bb431b2e12.svg);
}

[haughty totem]

major ❓

[glossy aurora]

minoring in whuh

[haughty totem]

html {
  content: url(https://discord.com/assets/3e531d8e171629e9433db0bb431b2e12.svg);
}
```ik that ik nothing 😑🙏

[gilded cloak]

img {
  content: url(https://discord.com/assets/3e531d8e171629e9433db0bb431b2e12.svg);
}

[rugged echo]

questions everywhere

[haughty totem]

div div div div div div div div div div div div div div div div div div {
content: url(https://discord.com/assets/3e531d8e171629e9433db0bb431b2e12.svg);
}

give or take a div

remarkable how deep that tree is

and that’s only the divs

and not even the last level either

[rugged echo]

how many div's do you even need?

[haughty totem]

all of them!

[gilded cloak]

We stan div

Fuck deticated elements

[vast delta]

When you are about to learn html:

[vast delta]

When the amount of div's is a rounding error

[rugged echo]

more like css

[vast delta]

CSS is quite easy, though more like, when you are trying to understand discords class names:

[rugged echo]

nah most websites use class names similar to discord I think

[haughty totem]

huh, i haven’t noticed

[haughty totem]

… then it’s a discord moment!

[rugged echo]

I think vee said its because you don't have to create a new original class name for everything or idk I forgor

[haughty totem]

i mean yeah

[vast delta]

Yeah but referring to the area showing your status and username as well as mute, deafen and settings with "container-ykuKtl" or what exactly it was is kinda awkward

And it gets worse the deeper you go

[rugged echo]

when the class uses aria label

[vast delta]

Yeah but don't they change? Makes them useless as well

[haughty totem]

nah it’s fine, you just have to do [class*=container]

[teal cave]

something idk

[haughty totem]

demo scene

[haughty totem]

(weird that this worked without @rugged echo’s transform: scale(4); then ❓ ❓)

[rugged echo]

probably because vencord toolbox isn't an actual icon from stock discord so the dimensions are different? I have no idea

[rugged echo]

this has banner potential for some reason

[slim pond]

#🎨-css-snippets message decided to make a new snippet

[mortal mantle]

Real

[slim pond]

welp

time for cyan remaster

[glad urchin]

trying to optimize, i dont know if this is any better or worse

[haughty totem]

why do you keep so many hashes, e.g. wrapper-2PSQCG instead of wrapper?

[summer crater]

Attribute selectors are always slower than usual selectors

^ only noticeable in large use cases tho

[glad urchin]

is this better or equally worse?

[summer crater]

wrapper is used millions of times in discord

[summer crater]

Your example?

[haughty totem]

yeah bad example maybe ’xD

[glad urchin]

yes

[summer crater]

Well your new code seems better & clean

[glad urchin]

that's only a few lines

[rugged echo]

why .wrapper-38slSD and .wrapper-2PSQCG are duplicated?

[glad urchin]

one wrapper is for the folder, another is the server icon in that folder

[rugged echo]

yeah but on the same place its like folder icon whatever and it starts again with the stuff that was before, or maybe it doesn't work if you don't use it 2 times idk

[glad urchin]

it does work?

[haughty totem]

(what?)

[rugged echo]

I mean this but I didn't put any effort into explaining lol

[glad urchin]

nvm i understand now

i assume you want me to use the second selector only?
after this ill try to reduce even more, if possible

[rugged echo]

it could be shorter instead of using it 4 times I guess, unless thats not how it works

[haughty totem]

hm, i fail to see the problem.

it was mentioned earlier, that browser tend to support nested rules now (for which so far you needed Sass or Less):
a {
b, c { … }
}
compiles to
a b,
a c { … }
so the duplicating a is natural if that makes sense

that being said, i would also guess that p’s selectors could be simplified

[glad urchin]

i think they meant it like this

which works the same

[haughty totem]

folderIconWrapper sounds unambiguous by itself alr

[toxic yew]

isnt this enough to make square icon?

.icon-1zKOXL {
    border-radius: 0;
}

[glad urchin]

which one

ah

[rugged echo]

oh so thats why you can do that

[haughty totem]

idk, but as kind of a side note: i use

/* never cut corners */
    /*↓ keep status indicator shapes :*/
mask:not([id^="svg-mask-status-"]) {
    display: none;
    /*rx: 0;*/
}```
but it sometimes doesn’t apply until hovering over the icon, so idk if i’d recommend it

[glad urchin]

shortened even more

same thing but reduced, css is magic

[haughty totem]

it certainly is!^^

[glad urchin]

/* --- SERVER SIDEBAR --- */
/* || SERVER ICONS || */
.wrapper-2PSQCG,
.wrapper-2PSQCG foreignObject,
.lowerBadge-3j0ZAg > div,
.upperBadge-1d6YsW > div
{
    mask: none !important;
    border-radius: 0px;
}
/* || SERVER UNREAD PILL || */
.item-2LIpTv
{
    border-radius: 0px;
}
/* || SERVER UNREAD BAR || */
.unreadMentionsIndicatorBottom-3RJMnQ > div {
    border-radius: 0px;
}
/* || FOLDER AND ICONS || */
.folderIconWrapper-1oRIZr,
.icon-1zKOXL
{
    mask: none !important;
    border-radius: 0px;
}

/* --- CHANNEL SIDE BAR --- */
/* Sidebar top  */
.sidebar-1tnWFu {
    border-radius: 0px !important;
}
/* || CHANNELS || */
/* || UNREAD PILL|| */
.containerDefault-YUSmu3 .unread-36eUEm {
    border-radius: 0px;
}
/* Emojis */
.link-1_kTxV,
.channelEmoji-NJOZuV
{
    border-radius: 0px;
}
/* Boost Progress */
.progressBar-2yl2pi {
    border-radius: 0px;
}
/* Voice Member count */
.wrapper-2fEmwW {
    border-radius: 0px;
}
/* Voice Member count FIX */
.total-1c5KCN {
    padding-left: 4px;
}
.total-1c5KCN::after {
    display: none;
}
/* Bottom Panel */
.container-YkUktl .avatarWrapper-1B9FTW,
.container-YkUktl > div > button
{
    border-radius: 0px;
    /* border: 2px solid blue; */
}
/* Scroll bar */
.scroller-1ox3I2::-webkit-scrollbar-thumb {
    border-radius: 0px;
}

/* --- CHAT PANEL --- */
/* || MESSAGES LOADING PLACEHOLDER || */
.blob-1uHjdp,
.avatar-l9Txm5
{
    border-radius: 0px !important;
}


/*  */
/* || TOOLTIPS || */
.layerContainer-2lfOPe [class*=tooltip] {
    border-radius: 0px !important;
}


/* || POPUP || */
.menu-2TXYjN,
.menu-2TXYjN [class*=focused]
{
    border-radius: 0px;
}

/* || MESSAGE RIGHT CLICK || */
.customItem-1KYL7t > div {
    border-radius: 0px;
}

way more cleaner

[toxic yew]

do not > div
just use its class name

[haughty totem]

.menu-2TXYjN [class*=focused]
why hash left, but wildcard right?

[glad urchin]

changed

[summer crater]

Someone should really start some discord selectors project again that uses a compiler with custom class name queries.

[haughty totem]

(
i would think that > combinators are fine, b/c it’s just a single step, so that div > div is basically just as costly as div (factor 2 ig), which is basically as costly as *.
The descendant combinator in div div otoh would often make the browser traverse until about the root <html> i suppose. Haven’t properly thought this through tho

come to think of it, that might be a factor for why the browser DevTools tend to generate these long > chains, for example: #message-accessories-1141676032735313971 > div > div > div > div > div > div > a
)

[haughty totem]

when i suggested that maybe 3 years ago, Zerebos said that would be rather futile afair. Tho i’m not sure he gave a convincing reason. ig he had doubts (prbly based on experience) that that would be well enough maintained

[edgy sentinel]

there's virtually no difference between div > div and div div

div > slowSelector and div slowSelector are both terribly slow

[haughty totem]

i still like the idea tho. It might pull the wider modding community closer together^^`

[haughty totem]

how is that possible when > is one step and is n?

[edgy sentinel]

because it still needs to check every div in the document

the difference is just having to walk up only one level instead of up to the root

[haughty totem]

from reading the pin, my understanding was that every element is traversed exactly once anyway as a “starter” for lack of a better word. Then the question is how much of a tree is then traversed root-wards

ah no, not only how much of a tree, but how many trees as well. For example it’s one tree for every selector ending in *

[edgy sentinel]

the point is that both foo > div and foo div are terrible

and there's not much difference between their terribility

much better is foo .someClass

[haughty totem]

yeah

iirc, unfortunately our often used [class…] attribute selectors count as a * in that respect

[glad urchin]

tl;dr one word selectors = best performance ?

[haughty totem]

the biggest impact on performance has the rightmost selector. It’s efficient if it’s a class selector .example-1234, but not an attribute selector, even if it matches classes [class*=example]

[edgy sentinel]

not true

attribute selectors are fine

[summer crater]

Everything is okay to a specific extend

If you have a large theme like Tropical's MidnightUI with around 30k lines of css & mostly just attribute selectors it'll be a lot slower than using regular ./# selectors

[edgy sentinel]

a theme of that size will be laggy either way

[summer crater]

Afaik it's only the wildcard selectors, direct [key=value] selectors are fine

[summer crater]

Yeah I guess, I'm just talking from experience when he was "optimizing" it

[sharp shell]

time to make css optimizer pro

send examples of big/slow themes xoxo

[haughty totem]

good to know, and makes sense. My guess is ^= is just as fine then, but *= adds another O(n) factor

[haughty totem]

yeah i also wanted to ask if you have examples handy. Particularly snippets, where the culprits may be easier to identify

[glad urchin]

how can i pause devtools while having input on the search bar so that this search menu doesnt disappear

[little agate]

f8break

or #📜-js-snippets message

[haughty totem]

yeah in this case the timeout trick. F8 closes the menu before pausing >:/

[edgy sentinel]

@haughty totem

[sharp shell]

i have cjc (need better name) from like 4 months ago i never really finished

need testers xoxo

[haughty totem]

thank you!

[sharp shell]

if you want test dm me ;))

[haughty totem]

that alone fixing a big lag confuses me to no end!
which makes it all the more valuable data.

[sharp shell]

or should i thread

[haughty totem]

sounds like a good idea to me

[sharp shell]

css

[haughty totem]

i found a third way for the web app:

javascript:debugger;```
in a bookmarklet, DevTools have to be open (Sources tab not necessary).  This doesn’t close the menu, as opposed to, weirdly, pressing F8 or even running `javascript:debugger;` in the console

[slim pond]

getting very close to cyan

at a fraction of the lines

actual cyan for reference

[glad urchin]

quite long

the amount of selectors with border radius just for an image and gif

[tawny summit]

@slim pond hey I'm very interested in mobilecord, can you make it work with the themes too?

[slim pond]

what?

[tawny summit]

Your mobilecord css🐱

[slim pond]

you mean from the css snippets repo?

[tawny summit]

Yeah

It's pretty cool

[slim pond]

I would consider it heavily unfinished, though I can change it to a theme format to download

[tawny summit]

Oh, okay. I'll wait for it to get finished.

[harsh solstice]

https://ToxicAven.dev/theme/catppuccin-mocha.theme.css

[mortal mantle]

omg why so many unnecessary div prefixes 😭

[mortal mantle]

https://SEELE1306.github.io/Modular/main.css

[timid dragon]

how can I fix this spacing when using quickcss to make the channel list bigger?

[real kiln]

Hey there, would it be possible / does it exist already a custom css that stops gifs from auto playing in the picker until u hover over them?

For example like play the first frame of the gif and stop it

[mortal mantle]

.members-3WRCEx, .sidebar-1tnWFu {
    resize: horizontal;
    max-width: 240px;
    min-width: 120px;
}

change the max and min-width to your liking

[real kiln]

My goal with this would be to possibly help a bit the gif tab because it just loads awfully slow

[mortal mantle]

internet issue

[timid dragon]

yeah, but this problem is happening when I put values past 240px

[rugged echo]

damn thats very low

[slim pond]

I sure do love me some premium tier 1 purple/blue

instead of the goddamn brand color

[runic lake]

hey @slim pond (SORRY FOR PING i wasnt able to pm you)
can i publish this version of user reimagined ? i have mentioned you in that also i have give you all credits in the file and description is it ok ?
i linked my server that people dont ask you for stuff about this verison

[slim pond]

it looks broken

if that's meant for clearvision, you sould clarify when posting it

[runic lake]

its for clear vision themes (the target is in the future for genral transperency themes.)

[runic lake]

also it fixed some bugs what it haves

[runic lake]

• call timer plugin is bugged in connected channel info.
• user area is glitch out of space if your status is to long .
• it isn´t transparent on all themes and more

i look to make it run on more themes in the future i have also an idea how i can do this maybe.

[runic lake]

if im not wrong the DS client seems to have a bandwith limitation also i whas discovering some stuff like emojis can loading random extrem slow with vencord idk why

[mortal mantle]

[slim pond]

not just vencord exclusive

vesktop exclusive

[mortal mantle]

Amazing

if only normal discord has color-mix support

[slim pond]

and in most places you can't even tell things have changed

[mortal mantle]

I wouldn't have to rewrite everything

[slim pond]

it's a very much optimized cyan replica

[mortal mantle]

Old cyan is 8k lines

[slim pond]

with a free vesktop ad

[slim pond]

rewrite is currently at 1.3K

[mortal mantle]

how

did color mix cut almost 7k lines

[slim pond]

no

redundant code

cyan has gone through lots of rehashes and layout changes

shit just kept stacking up one on top of the other

[slim pond]

this actually added some lines

for the alpha color variants

also, new settings

it can shrink

and even disappear

[mortal mantle]

Hmmmmmmm

[slim pond]

and as I said, fully backwards compatible

[mortal mantle]

will you change to Vesktop permanently after this

[slim pond]

Already have

[mortal mantle]

(silently uninstalls Better discord)

[vast delta]

(silently uninstalls worse discord*)

[mortal mantle]

I changed my mind, the upload button is no longer on the right side

[haughty totem]

whar, you think it’s better overlapping the text?

[mortal mantle]

there are already 9 buttons on the right

[haughty totem]

the behavior i’d like is like in the systray

[mortal mantle]

hmm?

[haughty totem]

1 line: like default empty input field on dc

multiline: more space to left of icons

should be not terribly hard with flexbox i’d hope

[mortal mantle]

I don't have enough knowledge to do that

[glossy aurora]

btw your invite expired

[mortal mantle]

my what

[glossy aurora]

on the theme

[mortal mantle]

which one

[glossy aurora]

cyan

[mortal mantle]

cyan is by dablulite, not me

[glossy aurora]

ah

[slim pond]

it's not expired

[slim pond]

pov unreasonable hatred

[slim pond]

still have it on armcord, just for colorways

since armcord won't crash every 5 minutes because it ran out of memory

[stuck plinth]

why vesktop exclusive

[slim pond]

because vesktop uses a newer electron version

with better css features

[vast delta]

@mortal mantle why always hsl, no one understands that. Use rgba

[mortal mantle]

Because it makes sense

Rgba does not

[vast delta]

It's literally so easy

First number for more red, second for more green and third for more blue

You gotta remember what hue is what number??

[mortal mantle]

How am I supposed to mix red, blue and green to get the desired color

[vast delta]

What colour?

[mortal mantle]

Whilst I can just have 1 (one) single toggle for the hue itself, saturation and lightness

it's so simple to remember

[vast delta]

What hue is pink?

[mortal mantle]

320

[vast delta]

Green?

[mortal mantle]

140

[vast delta]

Orange?

[mortal mantle]

30

I told you

[vast delta]

dammit

[mortal mantle]

I'm more familiar with hsl schemes

[vast delta]

Okay okay, but my last argument, it's easily convertible in your head to hex

Can you do that with hsl?

[mortal mantle]

The only hex values I remember is black and white

[vast delta]

Well, those are easy in everything basically

[mortal mantle]

But the main reason why I opted for hsl in the first place was because discord natively had it already

[vast delta]

I see hex colours everywhere on discord

[mortal mantle]

It was easier to adapt to it and create an entire scheme of colors based on just 3 values

primary-100-hsl to primary-900-hsl is the core, most other color variables can be traced back to them

Anyways I'm going back to bed

[vast delta]

@shut frigate try setting the opacity of the object to 0 and then make another line with :after after the object, then you should easily be able to replace the image

That could about work

Can't test, on my phone

[rugged echo]

hsl is much easier if you want a specific color

[glad urchin]

discord so fun (almost all of these have border radius)

[vast delta]

omg my heart is bleeding

This inefficiency

[mortal mantle]

* {
border-radius: 0px !important
}

[vast delta]

INEFFICIENT

this is perfection

Wait no

[mortal mantle]

eww minified code

[vast delta]

Minified is great when you're not supposed to look at it

[toxic yew]

now remove %

[vast delta]

Does it work without %?

[summer crater]

Needs

* {border-radius: 0 !important;}

[mortal mantle]

no need for ;