4 and 8 char hex is supported natively 👍
https://caniuse.com/css-rrggbbaa
#🎨-theme-development
teal cave
summer adder
maybe —header-primary or —header-secondary
—header-primary: red;
—header-secondary: red;
}```see if that does literally anything to it
rugged echo
what the fuck? couldn't you just select the button?
summer adder
qcss will overwrite theme css if you use themes through the folder or online link
deft niche
wtaf
vast delta
qcss will overwrite theme css if you use themes through the folder or online lin...
quickcss will also overwrite imported CSS if using the same selector specificity, as far as I know
glad urchin
yop
brittle juniper
devout umbra
hii
mortal mantle
Hi to both cuties
deft niche
is it possible to place the progress bar ontop of the album and name?
brisk iron
depending on how it's structured
you might be able to slap a display: flex; flex-direction: column-reverse;
okay it apprears that you have to use flex-box's order property here
brisk iron
is it possible to place the progress bar ontop of the album and name?
[class*=activityUserPopoutV2_] {
display: flex;
flex-direction: column;
}
[class*=activityUserPopoutV2_] [class*=headerContainer_] { order: -1; }
[class*=activityUserPopoutV2_] [class*=timeBarUserPopoutV2_] {
order: -1;
margin-top: 0;
margin-bottom: 12px;
}
if that's what you're going for
deft niche
oh yeah that works perfectly thanks!
deft niche
slightly revamped connections :3
any idea how i can make the purple area smaller?
im not sure what the property name is
safe python
mind if i ask why
that looks like a flex-grow or similar aka itll automatically shrink if you add something else there
deft niche
mind if i ask why
just seems kinda crowded, id much rather it shrinks to fit the text
brisk iron
shrinking to fit wouldn't look good in a grid
slim pond
any idea how i can make the purple area smaller?
just make it inline-flex
it removes the default flex grow
summer adder
so regarding #announcements message
the “they reverted the update again”
does this mean i DONT need to get a test rat for my theme to make sure everythings not broken?
deft niche
just make it inline-flex
ah that worked well, thanks
brisk iron
just make it inline-flex
that works
but discord splits connections into 2 flex boxes (when you have a lot of connections, example me) instead of using grids (guh???)
so its looks kinda weird
(here's a screenshot with [class*=connectedAccountContainer_] { display: inline-flex; width: fit-content; })
deft niche
that works
but discord splits connections into 2 flex boxes (when you have a lot...
yeah i noticed that too
might be possible to have more than 2 in a row but idk
glad urchin
would it be easier to rewrite this entire container and the messagebox with position: absolute so it doesnt conflict with other css
for the most part i have depended on the last child (the emoji) or the send button, and its difficult to get it to work without either of them (got the part without send button to work, but i CANNOT get it with the send button VISIBLE but emoji HIDDEN)
the random css if you want to try to fix it
it uploaded the text content..
slim pond
that works
but discord splits connections into 2 flex boxes (when you have a lot...
gimme a sec
.connectedAccountsColumn_fd2c41 {
display: contents;
}
.connectedAccountContainer__23f00 {
margin: 6px;
margin-left: 0;
margin-top: 0;
border-radius: 50px;
height: fit-content;
}
.connectedAccounts_dc0a56 {
flex-wrap: wrap;
border-top: none !important;
overflow: hidden;
height: fit-content;
}
.connectedAccountContainerWithMetadata_cf88ce {
transition: .3s ease;
}
.connectedAccountContainerWithMetadata_cf88ce:hover {
border-radius: 20px;
}
.connectedAccountChildren__21b60 {
height: 0rem;
min-height: 0rem;
max-height: 2rem;
transition: .3s ease;
}
.connectedAccountContainerWithMetadata_cf88ce:hover > .connectedAccountChildren__21b60 {
height: 1rem;
}
mortal mantle
^
slim pond
i hate how this looks <:HinakoScared:741814029449691156>
idk
usually I would agree
Actually I do agree
but it's basically either consistent sizing or showing details
ashen sable
I want to improve my theme so it doesn't use hardcoded class names. there are however classes that have a name that's identical to another, just with an additional underscore. how can I only match the one with a single underscore and not the one with a double underscore?
example: .compact_cc2939 and .compact__54ecc
doing [class^=compact_] would match both
matching only .compact__54ecc is easy, [class^=compact__], but what about .compact_cc2939?
ashen sable
I just realized that Firefox 121.0 released
this means :has() is now supported in all major browsers!
summer adder
html {animation: wee 100s infinite ease-in-out;}
@keyframes wee {
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}```discord slowly rotates, this wont get annoyin g at all (typed while my discorsd rotating)
vast delta
```css
html {animation: wee 100s infinite ease-in-out;}
@keyframes wee {
fr...
now use *
brisk iron
```css
html {animation: wee 100s infinite ease-in-out;}
@keyframes wee {
fr...
now make it only rotate when chat bar is focused to make it more annoying
deft niche
why stylus 😭
vast delta
looking good
simple kiln
why stylus 😭
why not?
simple kiln
i mean youre in the vencord server
is it required to use quickcss? vesktop?
deft niche
is it required to use quickcss? vesktop?
whar
deft niche
you can use whatever you want i was just curious
simple kiln
you can use whatever you want i was just curious
oh, i just use it because i also use it on other websites.
dark dragon
for the most part i have depended on the last child (the emoji) or the send butt...
I'm not quite sure what you're asking for here, but if it's just how to hide the emoji and send message buttons without nth-child selectors, it can be done like this
/* emoji button */
.emojiButton__8ff6a,
/* send message button */
.separator__8424b {
display: none;
}
not that but oh well
dark dragon
Can you give an example of what you were actually trying to achieve? I'm a dummy but the picture and that explanation aren't too clear
glad urchin
Can you give an example of what you were actually trying to achieve? I'm a dummy...
tried to make the last "child" before the send button to be rounded
the red circle is a pseudo element from the send button, which is more of an illusion
the problem is, i cant the width to be based on how many "children" there are, so it can break if the messagebar is too short
i also cant control the alignment since its position:absolute
i figured ill just force the emoji button to always be visible unless it gets overriden by some other snippet
dark dragon
Yeah, I'm still not quite sure on why you're doing it, but I can't think of any clean solution for achieving that. The default buttons should all be the same size now, so if you could convince the plugin devs to standardize their shit similarly there shouldn't be any issues with alignment. But, I'm not sure that'd be worth the effort
glad urchin
Yeah, I'm still not quite sure on why you're doing it, but I can't think of any ...
blame discord for putting the send button inside the container for the messagebar
i've forced it on mine, if it breaks i can blame the random snippets now
slim pond
I'm trying to find a use for display: contents
devout umbra
it's sometimes useful
mystic moth
how would i go about getting rid of the empty space leftover from the pfp? (left is how it looks rn, right is how i want it to look)
oh ffs
the 2nd image disappeared
this is more of less how i want it to look like
summer adder
.cozy_f5c119.wrapper__09ecc {padding-left: 0px;}```full code if you want the decorations removed too
.cozy_f5c119.wrapper__09ecc {padding-left: 0;}
.avatarDecoration__14b3c {display: none;}```
mystic moth
```css
.cozy_f5c119.wrapper__09ecc {padding-left: 0;}
.avatarDecoration__14b3c {...
thanks
summer adder
np, no real idea why you'd want this though
edgy sentinel
how would i go about getting rid of the empty space leftover from the pfp? (left...
are u aware compact mode exists..
summer adder
my thoughts exactly
mystic moth
are u aware compact mode exists..
i am but i want to still have message content on a separate line from the rest and i couldnt figure out a way to do that with just CSS soo
dark dragon
This should do that for compact mode
.compact__54ecc .messageContent__21e69 {
display: block;
}
it does work but theres a weird offset of the content
- i dont want to see the nickname multiple times if its a chain of messages by the same person
yea i have came to the conclusion that fucking around with compact mode may actually be easier
too much UI that gets shat all over the screen with this
dark dragon
Messing with that indent isn't super fun due to the time stamps, you can remove the names from consecutive messages with this though
.message__80c10:not(.groupStart__56db5) .headerText_f47574 {
display: none;
}
sadly that still leaves an empty line and doesnt remove pronoundb
the latter i can probably fix myself
dark dragon
That empty line is again for the timestamps, you can for sure mess around with it, it's just a pain. More so if you want to make it look half decent with plugins like that
mystic moth
Messing with that indent isn't super fun due to the time stamps, you can remove ...
the indent doesnt actually seem to have anything to do with the timestamp
it only affects the content, not the header
dark dragon
It's a negative text-indent on the contents as a whole, both the header and the content, they just zero it out on the content
mystic moth
It's a negative text-indent on the contents as a whole, both the header and the ...
i see why
mystic moth
Please don't discuss css during the Christmas holidays
cope
dark dragon
This is magic numbering it a bit as I'm too lazy to do much else, but give it a go
.compact__54ecc .contents_f41bb2 {
padding-left: 35px;
text-indent: calc(-1*(-1rem + 56px));
}
.message__80c10:not(.groupStart__56db5) .headerText_f47574 {
display: none;
}
.message__80c10:not(.groupStart__56db5) .messageContent__21e69 {
display: inline;
}
.compact__54ecc .messageContent__21e69 {
display: block;
}
You'll just add your pronoun db thing to the .message__80c10:not(.groupStart__56db5) display none bit
rugged echo
Please don't discuss css during the Christmas holidays
why don't you display:none; yourself instead? /j
clear siren
the c in css stands for Christmas
rugged echo
Christmas Special Style
mystic moth
the c in css stands for Christmas
christams style sheet
mystic moth
This is magic numbering it a bit as I'm too lazy to do much else, but give it a ...
whatever magic math youre doing with this, it works
mystic moth
This is magic numbering it a bit as I'm too lazy to do much else, but give it a ...
pronoundb thinga was already removed using a separate rule
and without that separate rule it breaks the whole thing
mystic moth
why don't you display:none; yourself instead? /j
thatd just make him invisible
rugged echo
nah I think that would be hidden or something
dark dragon
whatever magic math youre doing with this, it works
That's their weird calc, I just replaced the variables. Not sure why they did it that way, you might be able to get away with just changing it to -40px
mystic moth
nah I think that would be `hidden` or something
im used to android where view.NONE either doesnt work at all, or is synonymous to view.INVISIBLE
view.GONE completley nukes something
rugged echo
thats kinda weird, gone sounds like extreme or something
summer adder
thanks discord
exotic nexus
hey there tab friend!
mystic moth
thanks discord
why does it always spam that popup out of nowhere
solid ore
omg
i finally found something unique to select server shop
#channels > ul > li:has(#clip0_2645_182555) /* server shop */
{
display: none;
}```
ashen sable
I want to improve my theme so it doesn't use hardcoded class names. there are ho...
^ bump
deft niche
example: `.compact_cc2939` and `.compact__54ecc`
[class^=compact_]:not([class*=__])
didn't think of that, thanks
also, is this actually good practice? people seem to mostly use hardcoded class names
it's definitely slower
but when I made a MR with a plugin that included some CSS I got told to do partial matching
deft niche
also, is this actually good practice? people seem to mostly use hardcoded class ...
if youre talking about the example i sent, i have no clue lmao
its probably shitty and unoptimised but ittl work
ashen sable
partial matching in general
deft niche
if youre talking about not partial matching, yeah it generally is. classes change across updates so you could always just hardcode and update it when they change but its whatevers easiest for you
brisk iron
```
[class^=compact_]:not([class*=__])
```
bad
*= basically does a .includes check on the entire class string
brisk iron
so compact_bleh foo__meow would yield false positives
ashen sable
the general idea was what I was looking for
also wait yeah
property matching matches the whole string
so mine is also not good and neither is... anything that uses partial matching really
brisk iron
^= is like .startsWith so i dont think [class^=compact_]:not([class^=compact__]) is any different from just [class^=compact_]
maybe [class^=compact_]:not([class*=compact__])
there's only so much you can do
mystic moth
if youre talking about not partial matching, yeah it generally is. classes chang...
Well that's gonna be a problem for my shitty thene
Entirely hardcoded
Dealing with partial matching got too annoying and too fucking slow
ashen sable
after having this discussion I'm of the opinion that everything should be hardcoded
deft niche
i think i saw a site that lets you auto update the class names once
mystic moth
@ashen sable also yea the more partial matching you have the slower it's gonna be
I have like 6 partial matching rules in my QuickCSS and shits laggy
mystic moth
after having this discussion I'm of the opinion that everything should be hardco...
If updating your theme every update isn't a problem, yes that's the best way
ashen sable
I'm also reverting this https://github.com/Vendicated/Vencord/pull/2061/commits/86a9a68ecaff2a4658bb28411262fd6d195d929f
brisk iron
shrimply make a vencord plugin to polyfill discord classnames with a stable classname format and use those classnames
mystic moth
shrimply make a vencord plugin to polyfill discord classnames with a stable clas...
That would be the best course of action
ashen sable
I like this idea, they map classes to JS names anyways so these could be used instead (with some prefix)
mystic moth
Something like ThemeAttributes but for every single thing
No need to slow down the browser with partial matching CSS and no need for Devs to hardcode names and then have to update them every uodate
brisk iron
shrimply make a vencord plugin to polyfill discord classnames with a stable clas...
i think @rich prism was working on something like that
mystic moth
Great vesktop broke
mystic moth
i think <@347366054806159360> was working on something like that
I hope he gets it working cuz I'm too stupid to do that myself and sure as shit won't be dealing with either slowdowns or hardcoded
dark dragon
shrimply make a vencord plugin to polyfill discord classnames with a stable clas...
It'd still require updates when they fuck with the structure of stuff wouldn't it? Not sure it's much worth it
ashen sable
It'd still require updates when they fuck with the structure of stuff wouldn't i...
yes, but you'd only need to update Vencord
or, if using Discord's JS names, it would not
mystic moth
It'd still require updates when they fuck with the structure of stuff wouldn't i...
They don't fuck with structure that often, they just rerandomize the class names
ashen sable
but then those could break
dark dragon
yes, but you'd only need to update Vencord
You'd need to update the theme still. When they do shit like that they often change class names entirely. It seems like you'd just be double handling. Tools like this provide a decent middle ground, but they've got the same pitfalls. No matter what you're still going to have to do roughly the same amount of theme maintenance
mystic moth
You'd need to update the theme still. When they do shit like that they often cha...
why would you have to change the theme? if the plugin names stay the same the theme wouldnt have any issues?
deft niche
theoretically the theme could just assign new constant classes to all the elements and then the theme can reference that
mystic moth
theoretically the theme could just assign new constant classes to all the elemen...
thats just adding an abstarction layer. the goal is to remove partial matching from the theme entirely
dark dragon
They can't always stay the same, the structure of the modules changes fairly often
mystic moth
They can't always stay the same, the structure of the modules changes fairly oft...
which would affect the plugin, not theme
or am i dense
rich prism
i think <@347366054806159360> was working on something like that
i am but i dont work on it very often
it will come out in 2027
deft niche
if the classes change, it just breaks the plugin- not all themes. So generally that would be a better solution
ashen sable
You'd need to update the theme still. When they do shit like that they often cha...
oh, so you mean changes other than just the part after _
mystic moth
wtf
ashen sable
yeah true
ashen sable
but does that happen often?
brisk iron
You'd need to update the theme still. When they do shit like that they often cha...
if the plugin standardizes class names themes won't need to update unless classes are added or removed
rich prism
i am but i dont work on it very often
the way it works is it adds a stable classname onto the original classname (so thing__H4K5B5I4G5IV4J3 becomes thing__nottypingthatagain thing which in css is two class names)
mystic moth
the way it works is it adds a stable classname onto the original classname (so `...
and then the theme can just target thing
rich prism
yeah
dark dragon
if the plugin standardizes class names themes won't need to update unless classe...
They're added and removed often, that's what I mean by structural changes
rich prism
and it would be theoretically resistant to updates unless the part before the random stuff changes
brisk iron
i woul love to see metrics on this "often" you say
mystic moth
i woul love to see metrics on this "often" you say
this
dark dragon
Forums have been reworked multiple times in the last year. User popouts I think twice in the last 5 months
brisk iron
I'm not disagreeing
I just want to know the frequency so a better solution could be thought of
brisk iron
Forums have been reworked multiple times in the last year. User popouts I think ...
i see
mystic moth
Forums have been reworked multiple times in the last year. User popouts I think ...
since when is 'multiple times' a number
rich prism
its equal to the expression >1
mystic moth
its equal to the expression >1
at least one yeah
mystic moth
ah
brisk iron
i assume forums was discord going back and forth between multiple designs + media channels
and user popout would be decorations/profile effects
dark dragon
since when is 'multiple times' a number
I'd be nice if I could remember exact numbers, for sure. I could probably dig up some dates by dredging through the BD servers CSS channel, but that's an amount of effort I'm not ready to go to
mystic moth
i assume forums was discord going back and forth between multiple designs + medi...
both of which i have evaporated
[class^='avatarDecoration_'], [class^='profileEffects_'] {
display: none;
}
Yeah there were a few due to those decorations. I think at one point that just decided to rehaul the whole thing because there was so much useless stuff in there
brisk iron
so end conclusion, themes would still need updates but atleast they'll have consistent class names to target
and better perf
dark dragon
Those changes often would often mean those classnames are referring to different elements though
Like it'd be moved up or down the tree, meaning your rules mightn't have the desired effect
ashen sable
Those changes often would often mean those classnames are referring to different...
you mean would not?
dark dragon
Yepyep
edgy sentinel
also, is this actually good practice? people seem to mostly use hardcoded class ...
the performance difference is negligible and it is worth it for longevity of your theme
when discord rerolled all classes, the majority of themes broke. when they did it again a few days ago (now reverted), once again everything broke
however, https://github.com/Synqat/Vencord-theme which uses attribute selectors needed 0 changes for both of those updates
ashen sable
it's not correct though, see #🎨-theme-development message
edgy sentinel
yes you will often match multiple classes
that's why you use more specific selectors
[class*=wrapper] many matches
[class*=wrapper] > [class*=avatar] one match
@vast delta made a big post abt the performance difference iirc
edgy sentinel
there is no relevant performance difference
solid ore
ill trust u
edgy sentinel
the difference is like 4 million operations per second vs 3 million operations per second
it's negligible
clear siren
attribute selectors are cleaner too imo rather than having hashes
ashen sable
how is something that can match both wrapper_stuff and image_wrapper_stuff cleaner
edgy sentinel
because it doesn't break
solid ore
how is something that can match both `wrapper_stuff` and `image_wrapper_stuff` c...
^= wouldnt have that issue, and as vee said before u can be more specific
ashen sable
^= wouldnt have that issue, and as vee said before u can be more specific
what if the class isn't the first class?
edgy sentinel
how is something that can match both `wrapper_stuff` and `image_wrapper_stuff` c...
that's like saying "how is using \i to match variables better than hardcoding the variable name"
solid ore
what if the class isn't the first class?
..then u can be more specific w ur selectors
clear siren
how is something that can match both `wrapper_stuff` and `image_wrapper_stuff` c...
that's when you use ^ instead of * it's not hard to write a good selector
ashen sable
..then u can be more specific w ur selectors
which in turn makes them more complex and even slower
it still isn't correct it just works better
clear siren
I'd much rather write a more complex selector using attributes than the hashed class
vast delta
im trying to find the exact numbers comparing class/id to attribute but the website layout has been changed completely lol
ashen sable
https://discord.com/channels/1015060230222131221/1134844326933954622/11884661327...
complex selectors are slower, even if attribute matching was as fast as class matching, having a more complex selector would be slower
clear siren
performance is really not something to worry about unless you do something stupid on purpose
or unless you're on a pentium 2
ashen sable
I just brought performance up as it was brought up previously
solid ore
complex selectors *are* slower, even if attribute matching was as fast as class ...
no one said it wasnt slower, it's just not significant (apparently)
ashen sable
you know what, I'm gonna just benchmark it™
I'll rewrite the whole theme using attribute selectors and see if it's any slower
ashen sable
that's like saying "how is using \i to match variables better than hardcoding th...
I think that's entirely different, \i is both more correct (you aren't matching random shit) and more reliant
edgy sentinel
\i literally matches anything
you make it work by making the rest of ur match more specific
ashen sable
anything that could be an identifier, no?
clear siren
maybe you can use " wrapper", with the space it should match the classes that aren't the first
haven't tried
ashen sable
maybe you can use " wrapper", with the space it should match the classes that ar...
that sounds more correct, but it does assume that the order of the classes doesn't change
does it?
deft niche
```
[class*=wrapper] many matches
[class*=wrapper] > [class*=avatar] one ma...
what does > mean in this context?
edgy sentinel
direct child
mystic moth
it's negligible
But it's slow at least in my case
deft niche
direct child
ahh
edgy sentinel
But it's slow at least in my case
(no)
clear siren
that sounds more correct, but it does assume that the order of the classes doesn...
it's possible
edgy sentinel
no
ashen sable
they should've just allowed regex in attribute selectors ffs
edgy sentinel
your client lags because of other bad css
mystic moth
your client lags because of other bad css
Like?
edgy sentinel
like combining * with other selectors
your client cannot lag just because of attribute selectors
do you realise that when people do input[type=text] that's also an attribute selector...
ashen sable
they should've just allowed regex in attribute selectors ffs
then I would be happy as I could make it correct, and Ven would be happy because it doesn't break lol
edgy sentinel
that's one of the most common css selectors
edgy sentinel
then I would be happy as I could make it correct, and Ven would be happy because...
you can already make it correct now
if you can't, that's a massive skill issue
clear siren
simple attr selectors can be parsed by chromium like a million times a second on a decent cpu
ashen sable
I already explained why I don't think it's correct in any possible case
it's opinion of course
correct code isn't objective
deft niche
lmao
dark dragon
im trying to find the exact numbers comparing class/id to attribute but the webs...
Here are some fun benchmarks, I'm not sure how fair they are though. The second is definitely not fair, as css selectors should be a good deal faster, but it should still be fairly representative
https://measurethat.net/Benchmarks/Show/349/0/dataattribute-vs-class-selector-vs-id-selector
mystic moth
your client lags because of other bad css
either way, a somewhat standard abstraction layer to allow for bulletproof themes with hardcoded names would be nice
ashen sable
Here are some fun benchmarks, I'm not sure how fair they are though. The second ...
keep in mind that's for selectors that have exactly the same complexity
edgy sentinel
either way, a somewhat standard abstraction layer to allow for bulletproof theme...
not possible and useless
ashen sable
complexity matters much more than what kind of selector you use
mystic moth
not possible and useless
in what way impossible
edgy sentinel
there are dozens of classes with the same name
there's no way to know which one you want
just use attribute selectors or deal with updating your themes
ashen sable
there's no way to know which one you want
that's why you would assign stable names to them
an API break in code you use doesn't need to mean an API break in your code
mystic moth
say avatar_panel for the avatar in the user panel and avatar_chat for the one in chat
edgy sentinel
are you gonna write a plugin that manually maps hundreds of css modules?
ashen sable
yes. (well not me probably but that's the point)
dark dragon
The person making that plugin would spend more time writing and maintaining documentation than it'd take to update all themes
mystic moth
why not make the plugin autoresolve the mappings based on element surroundings
vast delta
it's hard to find reliable sources but the one i found with tests has found about a 10% of difference between class and attribute (50ms to 56ms) which was done on a page with 1000 elements, which is about four times less than what discord has and with only one selector, so in a full theme on discord's page, the difference could be much bigger. i have no way to validate these results though further down the page, it is stated that the actual difference caused by purely the selectors could be much higher or much lower. i personally think that at the scale of a full theme, using attribute selectors could lead to a measurable difference, and in bad cases, one you can see yourself. though remember that the impact of having bad selectors in general is way more than using different types of selectors
edgy sentinel
why not use attribute selectors 🤯
vast delta
edgy sentinel
it's hard to find reliable sources but the one i found with tests has found abou...
this is worthless
do proper benchmarks comparing actual themes on actual discord
anything else is pointless
vast delta
well there arent many benchmarking themes
edgy sentinel
i can name multiple themes that exclusively use attribute selectors and cause 0 lag and name even more themes that exclusively hardcode classes and have insane lag
at the end of the day, how you write your css matters much more than whether you use hardcoded classes or attribute selectors
the difference is entirely negligible
if the difference wasn't neglible, we would be using C for ui instead of javascript
vast delta
im not sure if the difference is negligible on a gigantic theme, but it is definitely more important to use better selectors instead of worrying much about the type of selector
even though it uses great selector types, this is still way worse than using an attribute :P (credit, devilbro, who else)
summer edge
even though it uses great selector types, this is still way worse than using an ...
What’s wrong with this?
edgy sentinel
that seems fine to me
selecting #app-mount is sometimes necessary for specificity
im mostly worried about the > * and > div lines but it could be entirely fine
vast delta
selecting #app-mount is sometimes necessary for specificity
just use the parent 😭
mortal mantle
even though it uses great selector types, this is still way worse than using an ...
what in the fuck is this
edgy sentinel
don't criticise random css unless u have verified it actually causes lag
edgy sentinel
just use the parent 😭
discord also uses #app-mount in many places
vast delta
it's a devilbro theme
deft niche
even though it uses great selector types, this is still way worse than using an ...
WHY
mortal mantle
i just dont care anymore about performance issue ngl
my theme is unusuable either way
vast delta
it's to overwrite discord's selector specificity, it would be such a free upgrade to legibility and performance to just use the parent to do that
mortal mantle
months of optimization yet no real world difference
mystic moth
my theme is unusuable either way
mine falls apart as soon as you introduce threads or quotes
edgy sentinel
it's to overwrite discord's selector specificity, it would be such a free upgrad...
performance how
vast delta
performance how
it checks every element up the tree for app-mount, with the parent it would just be one up
dark dragon
selecting #app-mount is sometimes necessary for specificity
Should only be necessary if you're writing custom css for someone using a theme written like above. It's used pretty sparingly in Discords own css
edgy sentinel
how do you know it walks up
it might also walk down
don't make random assumptions about performance unless you have actual data backing it up
vast delta
im pretty sure that is how the selector works
edgy sentinel
don't prematurely optimise
mortal mantle
optimize is a must if your layout runs at 1 fps
edgy sentinel
write code to be as readable and maintainable as possible. then if you face any performance issues, debug them and fix them
you guys are worrying waaaaaaaay too much about performance
ashen sable
I agree
mortal mantle
because
dark dragon
Don't prematurely optimise for sure. But you shouldn't be using selectors more specific than the minimum amount you need to overwrite any existing css
mortal mantle
i cant run my theme without lagging
ashen sable
that's why I think hardcoded classes are better :p
mortal mantle
its on the extreme end and i have no idea how to fix
the reason i would use hardcoded classes because its easier to just open up dev tools and find the issue
ashen sable
you know what it matches
edgy sentinel
its on the extreme end and i have no idea how to fix
look if you use any rules that include * (as a selector, not inside an attribute selector) or html elements like div, p, etc
vast delta
yeah you shouldnt spend 10 times more time on making perfect selectors but it's way too easy to just use the parent, using app mount to increase specificity is just as much effort for worse results
ashen sable
look if you use any rules that include `*` (as a selector, not inside an attribu...
it is sometimes necessary to do that, or at least better than the alternative
edgy sentinel
you *know* what it matches
you also know what it matches when using attribute selectors, unless you're too retarded to write proper selectors 
anyway you can write css however you want so you do you (but if you want contributions to be merged you need to follow vencord style)
dark dragon
no html or p at all
Might look at cutting down on psuedo classes, if you've got a fair amount of them in that case
mortal mantle
the only instances where i would have to resort to * was for the chat bubble element
otherwise i try to stay away from those
ashen sable
it is *sometimes* necessary to do that, or at least better than the alternative
sometimes the element you want to match just has no classes
edgy sentinel
the only instances where i would have to resort to * was for the chat bubble ele...
why do you use so many selectors
ashen sable
and no unique contents
vast delta
the only instances where i would have to resort to * was for the chat bubble ele...
oof, why?
mortal mantle
it works ...
vast delta
and no unique contents
i usually just use >div or whatever
mortal mantle
i tried using fewer selectors to no avail
ashen sable
i usually just use >div or whatever
* seems more semantic to me in those cases
it doesn't really matter that it's a div
mortal mantle
i have to match groupstart (the message leading a group of messages) and other separately
because thats how discords code is
ashen sable
it doesn't really matter that it's a div
it's something
mortal mantle
also have to count for attachments, reactions and the like
i currently cant think of a better method
unless discord gets rid of its stupid code
or that my test machine is simply too weak
edgy sentinel
the only instances where i would have to resort to * was for the chat bubble ele...
this rule is very complex and might be part of the reason why it lags, especially those :not(.thing *), that'll likely make it check your rule for a shit ton of elements
try removing it and similar rules and see if that fixes it
if it doesn't, edge devtools have a css performance debugger that tell you which rules are taking the longest so i recommend using that
mortal mantle
microsoft edge devtools??
edgy sentinel
yes
deft niche
ew edge
mortal mantle
probably will look up a flatpak for that
vast delta
that performance debugger should be in every devtools
actually seems so cool, i hate that i cant use it
dark dragon
The edge one is more advanced from what I've seen
mortal mantle
some elements are quite complex which add up to the lagginess
mystic moth
imma check if FF dev has something similar
mortal mantle
its laggier than the steam theme which has 5 times the amount of code
ashen sable
you also know what it matches when using attribute selectors, unless you're too ...
potential scenario: you use [class*="thing_"] in your theme, to match thing_stuff. however, there is thingy_stuff that is either an edge case or a new thing. it just so happens that applying your rules to that completely obliterates Discord.
edgy sentinel
actually seems so cool, i hate that i cant use it
why not?
just use edge with vencord web
ashen sable
potential scenario: you use `[class*="thing_"]` in your theme, to match `thing_s...
it's just stupid
edgy sentinel
imma check if FF dev has something similar
(no)
just use edge for it
edge devtools have a lot of cool tools that other browsers don't
mortal mantle
edge or edge dev
mystic moth
just use edge for it
you will not convince me to bring that filth upon my shitty system
mortal mantle
dark dragon
imma check if FF dev has something similar
Firefox dev tools biggest claim to fame is the way they display grid/flex stuff. Other than that they're kind of shitty to use
edgy sentinel
potential scenario: you use `[class*="thing_"]` in your theme, to match `thing_s...
are you refusing to read what i say or do you not understand
im genuinely confused
mystic moth
can anybody remind me why exactly am i installing 10gb of updates while using mobile hotspot for networking
edgy sentinel
i have already said multiple times that you can fix this by doing [class*=parentThing] > [class*=thing]
edgy sentinel
HEDGEWARS
edgy sentinel
edge or edge dev
doesn't matter
mystic moth
oh right discord cockblocked the last update
ashen sable
I'm just saying that you don't actually know what it matches. yes I get that you can fix it by being more specific.
ashen sable
I'm trying to get my point across. I do get yours.
edgy sentinel
using your logic, you don't know what . matches in regex so you shouldn't ever use it
mortal mantle
like their windows 11 setup
mystic moth
error: problem occurred while upgrading discord
error: could not commit transaction
error: failed to commit transaction (transaction aborted)
Errors occurred, no packages were upgraded.
https://cdn.discordapp.com/emojis/1144752140984783020.webp?size=48&name=troll~1&quality=lossless
edgy sentinel
I'm trying to get my point across. I do get yours.
you don't have a point
edgy sentinel
```
error: problem occurred while upgrading discord
error: could not commit tran...
you need to unpatch it first
mortal mantle
i will get to edge devtools after my holidays
ashen sable
bruh I guess discussing this further makes no sense so I'm gonna stop
mystic moth
you need to unpatch it first
i am aware of that
its just that on my prev install upgarding discord directly unpatched it automatically
maybe i had some pacman hook for that
idk
ashen sable
I will follow your project style since it is your project
ashen sable
I will follow your project style since it is your project
I do not agree with them and you refuse to try and understand why, so I'm not gonna bother
mortal mantle
HAHAHAHA
mystic moth
tf
ashen sable
I assumed the rules do allow the word, since they used it
but I guess that's a case of "rules don't apply to admins"
funny
mortal mantle
of course they wont
mystic moth
at least now i have more CSS to fix
if not for testing that and getting timed out i wouldnt know the content blocked message goes off screen with this shart of a theme
mortal mantle
i would appreciate if anyone with a cpu stronger than i5-8th gen would be able to look through my theme for performance issues
edgy sentinel
maybe i had some pacman hook for that
likely :p
mystic moth
i would appreciate if anyone with a cpu stronger than i5-8th gen would be able t...
i7 8th gen mobile good enough?
glad urchin
i think i can but no idea how to debug performance
mortal mantle
i5-8350U to be exact
ashen sable
of course they wont
I do think that admins should follow their own rules but of course that's opinion
edgy sentinel
i would appreciate if anyone with a cpu stronger than i5-8th gen would be able t...
😭 is it that bad
mystic moth
i5-8350U to be exact
i7-8665U here
edgy sentinel
i might be building a i7-4770K machine next year to attempt to fix
build a threadripper pc
mortal mantle
no money
mortal mantle
fren will give me a board that only runs 4th gen cpu
edgy sentinel
but I guess that's a case of "rules don't apply to admins"
a lot of automod rules are only in place because people can't behave and abuse the words
mortal mantle
i will spend a fuck ton of money on my holiday
so pc build is not likely to happen
until a few more months
mortal mantle
https://github.com/SEELE1306/Modular
anyways grab the latest theme.css file from here and test
before i could release v2.0.4 i have to make some more final checks
dark dragon
You use a fair amount of color-mix and shit in that one yeah? I'll install vesktop and take a quick look
mystic moth
ok yea this shit is mad laggy
edgy sentinel
oh the bot stopped screeching entirely
it's only in support
mortal mantle
real
mystic moth
worse than the fuckery i had previously
mystic moth
it's only in support
ah
other than the fact i have no goddamn idea on profiling css performance i can just tell you this is laggy af
dark dragon
Yeah, it's not so hot. It's not bad to the point of being unusable, but it's definitely not pleasant
mystic moth
ok ive got 5.8h of battery left with the current usage method so im not gonna finish this before i get home
wait im shit at math
its actually half that due to the battery giving offset readings
so its close to 2.5h
edgy sentinel
other than the fact i have no goddamn idea on profiling css performance i can ju...
edgeeee
edgy sentinel
it should work on edge too
isnt it just vesktop cause it uses very recent css features
dark dragon
https://github.com/SEELE1306/Modular
anyways grab the latest theme.css file from...
A large amount of the lag seems to be caused by this
/* v2.0.4 */
/* Prevent light mode from making whitenames black (visibility) */
.username_d30d99:not(:has([style])) {
color: var(--brand-experiment-100);
}
just changing that selector to .username_d30d99:not([style]) makes it noticeably better for me
neon crown
im kinda not too knowledgeable on css, how can i change the color or thickness of this specific element? i tried something like #guildSeparator { color: #986258 !important} and nothing happened
solid ore
im kinda not too knowledgeable on css, how can i change the color or thickness o...
.guildSeparator_dcb3cc
{
background-color: #986258;
}```for its thickness you would use the height:
default is 2px
neon crown
oh thanks, i'm guessing the "id" or something after the guildseparator bit is important?
solid ore
it specifies exactly which element, but i doubt there are other guild separators
if u wanted a more future proof one u could use [class^=guildSeparator_] instead
neon crown
thank you, what's the difference between doing [class*=blahblahblah] and [class^=blahblahblah]? i tried the first which didn't work
solid ore
idr wat *= is, but ^= is basically "starts with"
dark dragon
- is contains
simple kiln
https://github.com/SEELE1306/Modular
anyways grab the latest theme.css file from...
lag :<
mortal mantle
So real
deft niche
my fucking EYES
brisk iron
my fucking EYES
would use 10/10 /srs
deft niche
this is kinda nice
brisk iron
`html {filter: invert(1);}`
hello hi this seems to not work my discord is all black now
mortal mantle
try invert(2)
deft niche
not dark theme™️
body
{
filter: invert(1);
}
.avatar__08316, .avatar_f8541f, .wrapper__3af0b, .wrapper_edb6e0, .username_d272d6, .username_d30d99, [type="button"], .anchor_c8ddc0
{
filter: invert(1);
}
brisk iron
img { filter: invert(1) }
html { filter: invert(1) }
glad urchin
how to nest in raw css
glad urchin
Wtf is thatttt
explaining in pseudo code
if Messagebar has slashCommandBarThing, if buttons have SendButton, apply to the 2nd last child -> border-radius: 0px 20px 20px 0px;
if Messagebar has slashCommandBarThing, if buttons do not have SendButton, apply to the 1st last child -> border-radius: 0px 20px 20px 0px;
if Messagebar has slashCommandBarThing, if buttons do not have SendButton, apply to the 2nd last child -> border-radius: 0px;
if Messagebar has slashCommandBarThing, apply this to both Messagebar AND SendButton -> top-right, bottom-right 20px;
override the following borders and radiuses on the SendButton
.channelTextArea__2e60f:has(.attachedBars_da3c74) .buttons_ce5b56:has(.separator__8424b) > div:not(.separator__8424b):nth-last-child(2) {
/* border: 1px solid red; */
border-radius: 0px 20px 20px 0px;
}
.channelTextArea__2e60f:has(.attachedBars_da3c74) .buttons_ce5b56:not(:has(.separator__8424b)) > div:not(.separator__8424b):nth-last-child(1) {
/* border: 1px solid green; */
border-radius: 0px 20px 20px 0px;
}
.channelTextArea__2e60f:has(.attachedBars_da3c74) .buttons_ce5b56:not(:has(.separator__8424b)) > div:not(.separator__8424b):nth-last-child(2) {
/* border: 1px solid blue; */
border-radius: 0px;
}
.channelTextArea__2e60f:has(.attachedBars_da3c74) .textArea__74543 + .buttons_ce5b56 > div:only-child {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
/* border: 1px solid yellow !important; */
}
.separator__8424b {
/* SILLY OVERRIDE FOR THE THINGY ABOVE */
/* LIKE I SAID, SILLY OVERRIDE I AM SORRY :( */
border-radius: 0px;
}```i am slowly going insane fixing bugs
dark dragon
how to nest in raw css
It's native nowadays. The syntax is essentially the same as it is with SCSS
glad urchin
no idea how
mortal mantle
channeltextarea
&:has()
& .buttons_
&:has()
& > div
... and so on
glad urchin
wait
mortal mantle
it's more readable
mortal mantle
the advantage is that you won't have to repeat certain selectors again and again
dark dragon
not &.buttons_ though, that'd select chaneltextarea that also has the buttons class
mortal mantle
which should be the first 3 lines of the snippet
for the fourth one change it too & .textarea I guess?
dark dragon
There's a space(descendant selector) between both those selectors
glad urchin
might look back at nesting another time
need to fix the searchbar which discord messed up so bad
i wanted to fix with automatic margin/padding but it doesnt work. had to use a hardcoded margin to center the placeholder and input
dark dragon
Like this?
.public-DraftStyleDefault-block,
.public-DraftEditorPlaceholder-root {
width: 100%;
text-align: center;
}
nop
.toolbar__88c63 {
border: 0px solid steelblue;
}
.toolbar__88c63 > div {
/* border: 1px solid green; */
height: 100%;
}
.toolbar__88c63 .iconWrapper_af9215 {
border: 0px solid yellowgreen;
display: flex;
align-items: center;
height: 100%;
}
.search__07df0 {
display: block;
/* border: 1px solid green !important; */
/* box-sizing: unset !important; */
}
.search_ac353c {
/* border: 1px solid springgreen; */
/* border: 1px solid tra; */
height: 100%;
}
.searchBar_e0c60b {
/* display: flex; */
/* align-items: baseline; */
border-radius: 12px;
height: 100% !important;
align-items: center !important;
/* border: 1px solid red !important; */
box-sizing: unset;
}
.public-DraftEditorPlaceholder-root{
top: 6px;
}
.public-DraftEditorPlaceholder-root > div{
padding-left: 3px;
}
.DraftEditor-editorContainer {
height: 28px !important;
/* ^^^ this is hardcoded for now :( */
/* border: 1px solid gold !important; */
}
.public-DraftEditorPlaceholder-root, .public-DraftEditor-content {
padding-bottom: 0px !important;
}
.public-DraftEditor-content > div, .public-DraftEditor-content > div > div {
height: 100% !important;
width: 100%;
border: 0px solid red;
}
.public-DraftStyleDefault-block {
height: 13px;
border: 0px solid green;
}
.public-DraftStyleDefault-block > span {
/* border: 1px solid green !important; */
display: flex;
flex-direction: row !important;
text-align: center !important;
margin-top: 3px !important;
top: 3px !important;
border: 1px solid rebeccapurple;
}
.searchFilter__118cb {
border-radius: 8px 0px 0px 8px;
padding-left: 6px;
height: 100%;
}
.searchAnswer_b452e7 {
border-radius: 0px 8px 8px 0px;
padding-right: 6px;
}
its a big mess
love it when discord uses a custom input specially for the channel header searchbar
glad urchin
so long
fading wigeon
can i not target a class on the root if my style is injecting into documentElement??????
edgy sentinel
you can
fading wigeon
then why the fuck is my selector doing fuck all
edgy sentinel
in what context, and what selector
vencord injects everything into documentElement
fading wigeon
.platform-win #app-mount
clear siren
what are you trying to achieve
fading wigeon
add padding around app-mount only if its windows
its worked before
ok something i thought was a visual bug prob isnt one
fun
why the fuck is usercss-meta mangling this
why the FUCK is it removing this }
just an issue of my code cause my dumbass used an inclusive selector in the regex
deft niche
moved my theme to a plugin so i can make configurable options
solid ore
if i wanna change the svg of an element to a different one that is used elsewhere in discord, is it better to just copy paste the d: path("x") or is there a way to just copy the original element's svg? and if so is that more efficient?
solid ore
alr thanks! :)
neon crown
how can i remove or change the color of the logo seen here
summer adder
i’m not near my computer rn but i’ll give you a heads up
find its svg and try to display: none it
that or to change color find the svg and fill: color it
if you can’t do it and don’t have help by the time i’m back i’ll just find a definite working solution for you
neon crown
content:
fill="#2d1f1d";
}```
i tried this, i'm probably doing it wrong.childWrapper__01b9c svg
{
color: color;
}```
or
```css
.childWrapper__01b9c svg
{
display: none;
}```
next time just do ctrl + shift + i and inspect the element, u can then fiddle around urself if u wanna learnty <3
solid ore
```[class^=svg_ad7356] {
content:
fill="#2d1f1d";
}```
i tried this, i'm pro...
how did u get that class?
neon crown
ye
summer adder
yeah you need to select the svg directly when doing that, not it’s general area
always make sure it only says “svg (resolution)” only
devout umbra
moved my theme to a plugin so i can make configurable options
you should've just used usercss. there's an open pr for usercss, which supports theme settings.
neon crown
one question, i can't seem to find the class that would change that background in the top left, sorry 99% of my questions are asking what class is this lol
nvm, needed an !important, sorry
summer adder
yeah i find most times for svg’s you need !important
deft niche
you should've just used usercss. there's an open pr for usercss, which supports ...
could you link it please?
ah nevermind i found it
glad urchin
managed to try and exactly figure out what it does
i didnt know you could use that trick for previous sibling selector, might apply it to mess known as the messagebar
now i need to clean and port this to the dm list, and settings
so much better,,
deft niche
ooooooh thats nice ngl
deft niche
moved my theme to a plugin so i can make configurable options
going well so far, managed to get custom font importing working after a bit of struggle
glad urchin
what have i accidentally learnt
/* first item */
.sidebar_ded4b5 .privateChannels__93473 .content__23cab > .container__8759a:first-of-type .interactive__776ee{
border-radius: 12px 12px 0 0;
/* border: 1px solid red; */
}
/* last child */
.sidebar_ded4b5 .privateChannels__93473 .content__23cab > .container__8759a:nth-last-child(1) .interactive__776ee {
border-radius: 0 0 12px 12px;
border-bottom: none;
}
/* first child below THING */
.sidebar_ded4b5 .privateChannels__93473 .content__23cab > .container_de798d + .container__8759a .interactive__776ee {
border-radius: 12px 12px 0 0;
}
/* overrides ^^, last thing above THING */
.sidebar_ded4b5 .privateChannels__93473 .content__23cab > .container__8759a:has(+ .container_de798d) .interactive__776ee {
border-radius: 0 0 12px 12px;
border-bottom: none;
}
this is for the entire dm list
i am scared of what i have learnt and what i will do with it
glad urchin
deft niche
what have i accidentally learnt
```css
/* first item */
.sidebar_ded4b5 .private...
my eyes hurt
please kill me
glad urchin
blame dablu
clear siren
what have i accidentally learnt
```css
/* first item */
.sidebar_ded4b5 .private...
why :nth-last-child(1) why not just :last-child
glad urchin
copied from the reference, not sure if it breaks anything
now i have to use whatever this is to fix the message bar send button thing for the 12849th time
why isnt this official yet
so good,,
REMOVED LINES OF BLOATWARE
grand surge
How to change the font size of everything?
glad urchin
How to change the font size of everything?
* { font-size: 12px !important; }
replace 12px with whatever size
grand surge
`* { font-size: 12px !important; } `
thanks
grand surge
* { font-size: 14px !important; }
I changed font and now theres this ugly thing
anyone know how to change that?
glad urchin
.headerText__94c22 { overflow: hidden; }
deft niche
😩
glad urchin
quickcss but fast toggle
void helm
@clear siren @supple jacinth @teal cave sorry for the ping but just wanted to say thanks once more for helping me with my "mouseover sidebar" theme recently. https://github.com/ZythDr/Discord-Stuff I've put it on my Github and credited you all! Happy holidays!
supple jacinth
👍
summer adder
/**
* @author Madeline
* @name Effect Remover
* @description Removes all the stinky nitro decorations and profile effects! All at the low low price of FREE!!!
*/
.avatarDecoration__14b3c {display: none;}
.avatarDecoration_ae35e3 {display: none;}
.profileEffects_fd33f6 {display: none;}```(this doesnt remove profile colors only decorations and effects)
solid ore
what's the css equivalent of an "or" statement? i want to do
.class[style="color: x;" or "color: y;"]
solid ore
that doesnt help, when looking it up i j found that u had to sepearate w a comma and write the class again, e.g.
.class[style="color: x;"],
.class[style="color: y;"]
i was j wondering if there was a more concise way of writing it
solid ore
inefficient as in slower?
teal cave
can anyone make this [Theme](<https://betterdiscord.app/theme/FVUI>) For vencord...
You're gonna have to explain what's wrong with it, since it seems to be working
heady heart
Does anyone know of a theme that can collapse the chat buttons when I start typing, similar to how mobile does? Alternatively does anyone know the CSS to alter to move these to another line? This is getting annoying (reposted from support)
glad urchin
idk how to make it collapse but you can hide it
heady heart
Hiding would be good as well, or just moving it to another line. Just some way to prevent this weird 'text only takes up 1/8 of the text box' issue lol
I was able to adjust the CSS in the console thing but I'm not sure how to edit it in the quick CSS stuff
summer adder
how could i select a class ONLY in a different class
so say i wanted to select the messagelogger-edited ONLY in the reply preview class and nothing else
how would i do that?
glad urchin
so say i wanted to select the messagelogger-edited ONLY in the reply preview cla...
test2
wait
summer adder
well i was looking at a reply preview in the support class
and the whole thing is covered by the message before the edit
i want to get rid of that and only that, so it would display the current message
but only in the reply preview
glad urchin
successfully confused
glad urchin
if the message is a reply and the content is edited, remove edit on replied?
summer adder
yes
glad urchin
yes
something like this?
.message__80c10.hasReply_febd50 > .contents_f41bb2 .messageContent__21e69 .messagelogger-edited{
border: 1px solid red;
display: none;
}```testasdfhgjasdgfh
glad urchin
get rid of this https://files.catbox.moe/p15yb1.png
the snippet removes this
glad urchin
np
deft escarp
You're gonna have to explain what's wrong with it, since it seems to be working
I'm not a Developer
deft niche
deloper
deft escarp
You're gonna have to explain what's wrong with it, since it seems to be working
also it's not mine
deft niche
also it's not mine
where is the problem tho? works fine for me
laggy as shit but its not broken my any extent
grand surge
How to make icons in the sidebar centered or smaller?
Also anyone know how to make image cover this?
deft niche
How to make icons in the sidebar centered or smaller?
Pad it
deft niche
Send your css
mortal mantle
tytytytyty
midnight stone
np
deft niche
@cursive tinsel
:root
{
--bgcol: rgba(10, 10, 10, 0.2);
--background-primary: var(--bgcol);
--background-secondary: var(--bgcol);
--background-tertiary: var(--bgcol);
/*etc etc*/
}
#app-mount
{
background-image: url(whatever background you want);
}
cursive tinsel
<@966494517664550932>
```css
:root
{
--bgcol: rgba(10, 10, 10, 0.2);
-...
where do i put this
glad urchin
yes
deft niche
yup
cursive tinsel
sick
cursive tinsel
<@966494517664550932>
```css
:root
{
--bgcol: rgba(10, 10, 10, 0.2);
-...
do i just copy paste that in?
deft niche
quick test i did
deft niche
do i just copy paste that in?
yeah
cursive tinsel
quick test i did
it blue not transparent D:
glad urchin
somewhere in #🏥-vencord-support-🏥 is probably what you mean
unfortunately you wont be able to "fullscreen" the app
glad urchin
yop
cursive tinsel
<@966494517664550932>
```css
:root
{
--bgcol: rgba(10, 10, 10, 0.2);
-...
what dis
deft niche
not sure if its on vencord, let me see
cursive tinsel
yeah i been tryna get it transparent
deft niche
yeah i been tryna get it transparent
i have no idea lmao
glad urchin
yop i dont have a transparent theme to test it with
deft niche
its native on vesktop
^
cursive tinsel
what that
deft niche
cursive tinsel
:(
glad urchin
devtools -> Vencord.Settings.transparentUNSAFE_USE_AT_OWN_RISK = true paste
deft niche
UNSAFE_USE_AT_OWN_RISK 
cursive tinsel
i do but
glad urchin
^
glad urchin
how
glad urchin
its unsafe because it you will no longer have this option
cursive tinsel
well what would happen if i used it and got "caught
cursive tinsel
its unsafe because it you will no longer have this option
wtf is that
deft niche
pain
cursive tinsel
the maximize button...??
why cant i have a real transparent working theme >:(
that allows full screen :(
deft niche
does it really matter that much? its like in no way practical
cursive tinsel
you not wrong but i jus dont wanna get banned for transparent
deft niche
do whatever you want but its not worth it like at all
legit not being able to maximise so you can see behind the window (click minimise it takes 2 seconds)
cursive tinsel
do whatever you want but its not worth it like at all
yeah i just like transparent i thought i can do it with a regular theme
which sucks
deft niche
i mean you can always just use an image
cursive tinsel
i mean you can always just use an image
but image not transparent silly
glad urchin
vesktop 🔥
glad urchin
no idea for that one
midnight stone
horror
deft niche
but image not transparent silly
cursive tinsel
no idea for that one
i told vee to make me one and they just sent me what you sent but ion wanna use that if it’s unsafe
glad urchin
its not unsafe??????
glad urchin
it says unsafe but all it does is enable transparency at the loss of maximizing windows
once again its open source, it cant be unsafe
cursive tinsel
it says unsafe but all it does is enable transparency at the loss of maximizing ...
see ur smart
cursive tinsel
once again its open source, it cant be unsafe
i mean like discord ban safe
glad urchin
midnight stone
i mean like discord ban safe
It can't be detected by Discord (?)
cursive tinsel
i don’t work on discord all i saw was unsafe use at own risk
glad urchin
its a silly variable name, there is no risk
mortal mantle
Make them believe so
cursive tinsel
deft niche
screwed with the transparent theme a bit, i like it tbh
grand surge
that thing next to my cursor
summer adder
theres two things next to your cursor
grand surge
thats other color than everything else
grand surge
theres two things next to your cursor
😭
summer adder
i dont get what you mean just make a picture focusing only that
grand surge
summer adder
send me your theme/qcss and ill try and do it
deft niche
youre probably rounding the wrong element in the first place, chances are it has a wrapper or parent
summer adder
dw i gave him two lines of code that made the elements red
now he just has to adjust the colors to his liking and put the lines of code wherever 
summer adder
grand surge
fr id just disown my child
??????
alpine cove
i will not elaborate
grand surge
cursive tinsel
screwed with the transparent theme a bit, i like it tbh
is that ur desktop background?
summer adder
the way their thing works is they input an image link, and it’ll set it as a background
cursive tinsel
you really arent getting this are you
deft niche
grand surge
Anyone know how to make corners rounded even when scrolling?
dark dragon
Anyone know how to make corners rounded even when scrolling?
Set the border radius on the parent rather than the scroller. hide the overflow if required
grand surge
Set the border radius on the parent rather than the scroller. hide the overflow ...
ill try thx
grand surge
Set the border radius on the parent rather than the scroller. hide the overflow ...
its working now thank you
devout umbra
ctrl k+c :
what is this hotkey for?
glad urchin
what is this hotkey for?
vscode toggle comment
cursive tinsel
whats the link for usercss?
make me transparent working theme >:(
deft niche
make me transparent working theme >:(
stop having a skill issue boi
make one yourself
eager heart
whats the link for usercss?
https://github.com/lewisakura/vencord feat/usercss branch
deft niche
gracias
eager heart
if you want to use gh pr checkout
deft niche
alt. https://github.com/vendicated/vencord/pull/1700
is there any kind of documentation on how to use it?
i mean how to make theme options, not how to load the pr
eager heart
@deft niche
@vc-requiredPlugins is a vencord specific extension that makes it so you can set.. well, a list of required plugins
comma separated like ThemeAttributes,a,b,c
deft niche
awesome, thanks!
eager heart
yoiu dont need to add @-moz-document btw
and @author has no strict format
unlike in the spec
ashen sable
you probably should though, for interoperation
deft niche
make me transparent working theme >:(
if youre still looking for one then
:root
{
--bgcol: rgba(59, 47, 100, 0.1);
--background-primary: var(--bgcol);
--background-secondary: var(--bgcol);
--background-tertiary: var(--bgcol);
--background-primary-alt: var(--bgcol);
--background-secondary-alt: var(--bgcol);
--background-tertiary-alt: var(--bgcol);
--bg-overlay-1: var(--bgcol);
--bg-overlay-2: var(--bgcol);
--primary-630: var(--accent);
--__header-bar-background: var(--bgcol);
--channeltextarea-background: var(--bgcol);
}
#app-mount
{
background-color: var(--bgcol);
}
I am still wondering how should I handle this (on a design, not technical, level)
I am tempted to just remove the lines (which I did do at one point, but restored them later)
they aren't useful and don't work with this at all
but then I'm diverging from vanilla Discord more
why did Discord just decide that system messages should have time randomly on the right side instead of on the left side and formatted differently as well
well, this could also be because they don't care about Compact (it probably is)
glossy aurora
probably because the time is attached to the username, which system messages don't have
grand surge
somebody make a christmas theme pls
oak plover
somebody make a christmas theme pls
summer adder
somebody make a christmas theme pls
nah
mortal mantle
somebody make a christmas theme pls
You're already 4 days too late
slim pond
So I just noticed
Discord actually "implemented" no light in dark mode
they fixed the out of place light themes
teal cave
Wow only took 7 years
slim pond
yes
mortal mantle
damn now I don't need a theme for it anymore
but like I never touch it anyways lol
summer adder
they fixed the out of place light themes
oh boy lets see if this is remotely true
yippie finally its true
summer adder
discord do absolutely anything right challenge
mortal mantle
I'll be back home tonight and get back to css grinding tmr
cursive tinsel
if youre still looking for one then
```css
:root
{
--bgcol: rgba(59, 47, 100...
where do i put this
barren jewel
fix for SpotifyControls not following custom themes
.theme-dark #vc-spotify-player#vc-spotify-player {
background-color: var(--background-primary);
}
solid ore
why not make it transparent to make it work for any theme
brisk iron
no
deft niche
where do i put this
please kill me
deft niche
fix for SpotifyControls not following custom themes
```css
.theme-dark #vc-spoti...
why wouldnt you just set it to --background-primary
that way it works for everything
cursive tinsel
please kill me
LMFAO
barren jewel
why wouldnt you just set it to --background-primary
forgor about that
i kinda just opened quickcss, typed in 'black' and was like yep that works im done
barren jewel
fix for SpotifyControls not following custom themes
```css
.theme-dark #vc-spoti...
updated it
deft niche
deft niche
clearly not
barren jewel
real gamers use ven toolbox 
solid ore
this thing^^^
deft niche
real gamers use ven toolbox <:prayge:1022655686120833045>
real gamers dont even know what the FUCK that is
barren jewel
clear siren
real gamers only use slow css
deft niche
real gamers style everything in html
barren jewel
yes
deft niche
damn i wonder why
deft niche
its almost like we had a whole conversation about a console command you have to run
clear siren
nothing is impossible if you believe in yourself and don't have skill issues
deft niche
(they will soon realize how unusable fully transparent applications are)
i tried it for a bit, its not not useable
kinda fucks up the window sizing but its possible ig
still no idea why someone would want it because its completely impractical and in no way useful
but i mean
barren jewel
its kinda usable if you make it translucent
cursive tinsel
i need to enable this and use the code u sent?
deft niche
i need to enable this and use the code u sent?
yup
deft niche
cursive tinsel
barren jewel
like if you get it like this, its not that bad
deft niche
like if you get it like this, its not that bad
yee true
deft niche
i guess its useable with some blur but still
barren jewel
go to the console tab
deft niche
not really useful or good looking
cursive tinsel
go to the console tab
alr
barren jewel
Vencord.Settings.transparentUNSAFE_USE_AT_OWN_RISK = true
paste that in the console
press enter
deft niche
(then restart)
deft niche
nope that guy is lying and is trying to get your mothers maiden name
yes ofcourse you do that
deft niche
anyone can help?
wtf
barren jewel
too much padding
deft niche
i did it it didnt work
did you restart lmao
solid ore
if youre still looking for one then
```css
:root
{
--bgcol: rgba(59, 47, 100...
why is --bgcol set to a static color
solid ore
why shouldnt it be?
bc it just makes everything that color..
