yeah that's fine
#π¨-theme-development
edgy sentinel
slim pond
I will take a look at the others
edgy sentinel
this selector seems pretty bad
.root-1CAIjD:not(:has(.imageWrapper-oMkQl4)) .templatesList-uohY49 > div ~ .container-x8Y1ix
generic selectors like div perform almost as poorly as *
use of them in compound selectors like that is dangerous
slim pond
hmm
edgy sentinel
.root-1CAIjD:not(:has(.imageWrapper-oMkQl4)) .templatesList-uohY49 + .footer-3ie9JP > *
slim pond
I usually use those when there are no specific selectors
edgy sentinel
another bad one, * is dangerouuuuus
I've seen one single compound * make discord incredibly laggy
(happens to the best of us, don't worry btw)
slim pond
another bad one, * is dangerouuuuus
tho it had one hell of a specifi selector behind it, so I didn't think much of it
glacial barn
hey, do you know some ways to access these (you know on threads not fully opened), because I did that :
.layerContainer-2lfOPe>div[id^=popout_][style^="position: absolute; top: 44px; right:"]
but I don't like it and it also selects the other similar popout
slim pond
this selector seems pretty bad
`.root-1CAIjD:not(:has(.imageWrapper-oMkQl4)) .te...
oh boy do I have lots of those to fix in the snippet im making rn
edgy sentinel
tho it had one hell of a specifi selector behind it, so I didn't think much of i...
css reads from right to left for some reason
glacial barn
and we don't have a parent selector π€¦
edgy sentinel
:has
edgy sentinel
https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-...
but yeah this is why .foo .bar .baz actually performs worse than .foo .baz even though it doesn't seem intuitive
glacial barn
edgy sentinel
I've seen one single compound * make discord incredibly laggy
https://github.com/Vendicated/Vencord/pull/351/commits/0ca6ec43dcd89965d6a2fb62ac24421584689ae0
#π§-off-topic-iceman-only message
#π§-off-topic-iceman-only message
check this
- .spotimbed-controls [class*="durationTimeWrapper"]>* {
+ .spotimbed-controls [class*="durationTimeWrapper"] > [class*="durationTime"] {
lag fixed
glacial barn
lmao my work is doing websites and I just learned about ":has", but it's quite new, and it's not on default on firefox, and I have to do apps for firefox
glacial barn
no, we said to them to only use firefox for the apps
(so that we didn't have to check on compatibility issues, but that's sad π)
I find it dumb that they put it a user setting, it's just like disabling it
edgy sentinel
their implementation is still kinda buggy that's why
mortal mantle
I just deleted the BetterModals import off my css and holy is it smoooother
glacial barn
so #thread-context-open .label-3CEiKJ is better than #thread-context-open>.label-3CEiKJ that is better than #thread-context-open>div ?
(if I read correctly, but why is > worse? it selects less)
glacial barn
ok, I thought I read upper that using > is worse, but thanks!
edgy sentinel
so `#thread-context-open .label-3CEiKJ` is better than `#thread-context-open>.la...
the first two are equivalent, there is no performance difference
the last one might be laggy but it's probably fine
idk it's really inconsistent, sometimes * causes insane lag other times it's fine
glacial barn
ok, thanks, I read wrong then ^^
edgy sentinel
you can pretty easily visualise it
.foo .bar
```will
1. check every element for if it has a .bar class
2. if yes, check if it has a parent with .foo classnot many elements will have bar class so it checks relatively little
now imagine the same but instead of .bar you use div or *
it will now check parents of every single div or even every single element (in the case of *)
much much more work
glacial barn
yeah π, that's true
edgy sentinel
So a good rule of thumb would be to make the rightmost selector as specific as possible
for example I assume .foo * .bar performs just fine whereas .foo * might be laggy
glacial barn
.container-3XgAHv.floating-3M3WeH:nth-child(2){
min-width: 450px;
max-width: calc(100vw - 144px);
resize: horizontal;
transform: rotateY(180deg);
height: 100vh;
}
.container-3XgAHv.floating-3M3WeH>.uploadArea-2Nu_Vc,
.container-3XgAHv.floating-3M3WeH>.container-ZMc96U,
.container-3XgAHv.floating-3M3WeH>.chat-1-OBC7{
transform: rotateY(180deg);
}
I did this to be able to resize the small version of opening threads is it fine?
edgy sentinel
yeah
don't worry too much about performance anyway
keep these things in mind but don't take it too far
premature optimisation is bad, now you just know what to look for when your css does end up laggy
glacial barn
ok yes, thks
rugged echo
I am trying to change the server list count to make it smaller but it doesn't seem to work using #vc-guildcount for some reason, and looks offset, but thats probably because of my theme
wait it works if I add span, but idk what is that really
edgy sentinel
wait it works if I add span, but idk what is that really
then it's likely a specificity thing
rugged echo
its because of the other count of friends? idk
mortal mantle
.tabBarContainer-sCZC4w {
margin: 20px 0 0;
}
.tabBar-2hXqzU {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
row-gap: 0.5em;
column-gap: 0.5em;
margin-bottom: 1em;
}
.userProfileModalInner-3dx9L9 .top-Ktfr_T .item-2GWPIy {
border: none;
background: color-mix(in srgb, var(--profile-body-background-color) 40%, transparent);
border-radius: var(--modular-border-radius);
padding: 0.125em 0;
width: 31%;
font-weight: 600;
text-align: center;
}
.userInfoSection-2u2hir+.userInfoSection-2u2hir, .tabBarContainer-sCZC4w, .top-Ktfr_T .themed-qqoYp3.item-2GWPIy:hover {
border: none
}
.userProfileModalInner-3dx9L9 .top-Ktfr_T .item-2GWPIy:hover {
background: color-mix(in srgb, var(--profile-body-background-color) 70%, transparent) !important;
}
.userProfileModalInner-3dx9L9 .top-Ktfr_T .selected-1sf9UK.item-2GWPIy {
background: color-mix(in srgb, var(--profile-body-background-color) 100%, transparent)
}
.tabBarItem-30Te4- {
height: fit-content;
}
I love the color-mix
brittle juniper
antichrist
mortal mantle
huhhh
slim pond
well I already got bored of making that lmfao
mortal mantle
inasne
mortal mantle
I removed the transparency and blur from the profiles because they have been quite buggy and inconsistent
slim pond
I should go remove all wildcard selectors from colorways
I think I only have one in the algo
for text color
NEVERMIND
fuck me sideways?
mortal mantle
omg * selectors
slim pond
let's test the code without them
mortal mantle
made the day separators a bit better
slim pond
oh
mortal mantle
Maybe I should do the same with the New messages one
slim pond
oke now we're talking
rose geode
Looks great
slim pond
it's a-ready
safe python
okay now expand a folder
https://cdn.discordapp.com/emojis/1095049440835928234.webp?size=48
true mica
fuck me sideways?
and you wonder why your code lags
slim pond
not anymore
slim pond
when my code is not shit
rose geode
bruh
slim pond
horror
true mica
sure thing
pure css?
slim pond
yep
true mica
nice
slim pond
the most specific I can get it
these 2 divs have no classes or other attributes
only inline css
true mica
.body-β¦β¦ div, .body-β¦.. .sliderBody-β¦..
true mica
what are you trying to achieve lol
slim pond
less shitty selectors
edgy sentinel
.root-1CAIjD:not(:has(.imageWrapper-oMkQl4)) .templatesList-uohY49 + .footer-3ie9JP > .footerTitle-3Bslxi,
.root-1CAIjD:not(:has(.imageWrapper-oMkQl4)) .templatesList-uohY49 + .footer-3ie9JP > .button-ejjZWC
you can use :is to make this prettier
edgy sentinel
.root-1CAIjD:not(:has(.imageWrapper-oMkQl4)) .templatesList-uohY49 + .footer-3ie9JP > :is(.button-ejjZWC, .footerTitle-3Bslxi)
i love :is
slim pond
what line was this on?
edgy sentinel
but every time you have nearly identical selectors with only one segment differing, :is is amazing
slim pond
aoi, you might want to take a look at this snippet:
@import url(https://seele1306.github.io/Snippets/OnekoDM/import.css);
it's causing some issues with the server list snippet
slim pond
Which Serverlist one?
the one I made abt an hour ago
that actually works as intended
change any border-radius: 50% to 50px
mortal mantle
hmmm I will try later
mortal mantle
there are only 2 50% border-radius in this snippet
slim pond
change the svg one
mortal mantle
Gotta do something better than that selector though
It looks disgusting
But that is for later
Exam prep first
true mica
π₯
simple kiln
simple kiln
https://tenor.com/view/babylon5-gif-6333058
me, only seeing codes without screenshots of how it would look like
mortal mantle
I'm just changing my horrible selectors paths to better ones now
true mica
nice user popout
dusky hare
thinking about reposting my blurb about how browsers process css selectors from powercord to here
I think it's good to understand how selectors are processed in order to write performant ones
mortal mantle
what exactly is, performant code?
dusky hare
Here's a blurb from powercord about why CSS selectors are parsed from right to left, and a bit about how it impacts performance. I'll just post screenshot for now because otherwise it's a giant wall of text - if someone wants the text version (for accessibility or otherwise) give me a ping and I can DM it
slim pond
MY EYES
dusky hare
sure
mortal mantle
tyty
mortal mantle
true mica
finally something that doesnt break shit and looks clean
grand surge
long
mortal mantle
slim pond
exactly
edgy sentinel
Here's a blurb from powercord about why CSS selectors are parsed from right to l...
ayo it me
safe python
ven is famous
edgy sentinel
wow more than 2 years ago
<@&1118512946595778570>umap <@&1118512937829670912>ablulite why not post just the link instead of the import css
that way people can use the online themes tab
zenith nova
π
mortal mantle
omg it's the windows 7
zenith nova
7 UIRibbon.dll π
slim pond
why did I get pinged?
slim pond
that way people can use the online themes tab
the only snippet I have posted here that I did that for, because it was on a big scale, was vesktop mica
edgy sentinel
wdym
you have so many of them
one example
it's confusing that u have to put this at the top to people
so it'd be better to just post the link and have people put it in the online themes tab
slim pond
no, I meant that it was the only one that I also gave the link
without the import shenanigans
edgy sentinel
well i recommend you just do the link for all of them
less confusing for people
also that brings a feedback for @halcyon anchor's pr (that i still need to help u debug sorry Adrian) to mind, make sure snippets with imports are hoisted
halcyon anchor
glacial barn
the link is inside the import, so ppl do what they want with it
edgy sentinel
except that they don't
they put it at the bottom of their css and get confused why it doesn't work
like you did #1135572661154615306 message
slim pond
and my imports don't help either
glacial barn
like you did https://discord.com/channels/1015060230222131221/113557266115461530...
I know but that's because I'm dumb
edgy sentinel
yes and i'm saying most people are dumb
slim pond
I emmit the https: part completely
edgy sentinel
you're by far not the only one
glacial barn
I usually just take the css from the link and put it in my quickCSS file, or if there's a lot I put it in the themes
glacial barn
I never do imports, that's why I got comfused,
but ye it's true, it's better if everyone posts the link, so dumb ppl don't get comfused, and ppl that want to can just add the link in an import
sharp shell
they put it at the bottom of their css and get confused why it doesn't work
simply write css transpiler which re orders all imports to the top
glacial barn
also add less support π₯Έ (seriously I'll try to do it if you don't)
sharp shell
do not
sharp shell
why do you need less
slim pond
also add less support π₯Έ (seriously I'll try to do it if you don't)
a) sass is better, b) we don't need it
glacial barn
because it's way more beautiful
sharp shell
beautiful how
slim pond
waiting for the day, discord bring css nesting support
glacial barn
a) sass is better, b) we don't need it
well I prefer so much less over sass, sass has so much more "characters" you need to use, less has the same functionnalities, but using css characters (I'm sorry if I don't explain myself properly, I'm not english)
sharp shell
give an example of less being better than normal css
glacial barn
beautiful how
π you like how css looks?
glacial barn
give an example of less being better than normal css
do you know less?
sharp shell
yes, give an example for your use
glacial barn
wtf dude, how could you say it's not better, you can do everything you do in css with it, but you organise better
like nesting
sharp shell
css has nesting
glacial barn
no
sharp shell
yes
glacial barn
no
sharp shell
..yes it does
glacial barn
you can't do
a {
span {
thing:thing;
}
}
cedar cairn
wait it's released?!?!?!?!
sharp shell
yes
slim pond
pure css = best css
cedar cairn
or is it like still locked behind chrome://flags / whatever firefox's is
sharp shell
no
slim pond
especially with this
cedar cairn
WHEN
sharp shell
now
cedar cairn
i see
sharp shell
just not in stable firefox yet
cedar cairn
just not in stable firefox yet
of course it's not
slim pond
you don't have functions, mixins etc.
You're just looking for issues in normal css
cedar cairn
also you kinda have to drop support for old browsers 
glacial barn
I can't understand how you guys prefer css, like do you use it everyday?
slim pond
I can't understand how you guys prefer css, like do you use it everyday?
I find everything else inconvenient
glacial barn
like what?
sharp shell
of course it's not
you're wrong with your guess
slim pond
too bored to compile shit
sharp shell
chrome's current shipped implementation is broken
cedar cairn
of course it is
sharp shell
firefox waited for the spec to be stable before shipping
chrome didn't because.. lol
cedar cairn
because its chrome
cedar cairn
i will continue using scss nesting until then (and in the future so i can still support older browsers for the joke)
glacial barn
too bored to compile shit
it does it for you π
slim pond
also, aren't they meant to add color shading, layers and other cool shit to the css spec?
slim pond
just color shading in discord themes will do crazy shit
glacial barn
like I can understand the scss/less debate, I prefer less but it's juste my opinion, but prefering css over π
glacial barn
ok for nesting, but all the other functionnalities aren't there
edgy sentinel
all other functionalities are useless
edgy sentinel
name one use case inside a discord theme for them
sharp shell
i love css nesting drama
edgy sentinel
also nothing is stopping you from writing less and transpiling it anyway
many theme devs use scss
glacial barn
yes, that's waht I said I'll do, I'll add less support in quickCSS for myself
harsh solstice
The only thing I use in scss other than nesting is lighten and darken Β―_(γ)_/Β―
glacial barn
The only thing I use in scss other than nesting is lighten and darken Β―\_(γ)_/Β―
because you only code for discord?
sharp shell
We appreciate that there's not yet full consensus on the API syntax, but also that we've been in this state for several months and we've heard pretty clearly from web developers that as a whole they want us to ship something
chrome πΏ
harsh solstice
Yea where else is scss useful
glacial barn
Yea where else is scss useful
well.. websites....
sharp shell
because you only code for discord?
almost as if quick css is part of a discord mod
so wouldn't need scss features not useful for modding discord
cedar cairn
what if we make vencss with consistent cross-browser nesting and nothing else π₯π₯π₯
harsh solstice
If you're writing a website that is big enough to need scss you're probably using tailwind and postCSS or something of the like
sharp shell
and already have a build step like webpack
glacial barn
If you're writing a website that is big enough to need scss you're probably usin...
I'm using less
that's it
sharp shell
quick css has no build step
cedar cairn
when are they dropping JIT-compiled css
harsh solstice
That exists I think my friend made an implementation of it
sharp shell
when are they dropping JIT-compiled css
what
cedar cairn
great question
harsh solstice
Lmao
sharp shell
That exists I think my friend made an implementation of it
what: what harder
harsh solstice
I mean like postcss
sharp shell
do you know what jit means
cedar cairn
If you're writing a website that is big enough to need scss you're probably usin...
(i use scss in our super small website but thats mostly just for syntactically easier variables/support for browsers pre-nesting)
sharp shell
how the *%$& is postcss jit
sharp shell
what: what harder harde
glacial barn
yes even for small websites it's just way better to modify, because clearer
sharp shell
Nono it's an express plugin
do you know what jit is
i hate that sentence
my brain hurts
harsh solstice
It compiles the postCSS then serves the page
mortal mantle
you can use nesting in vesktop already
Wtf I didn't know that
mortal mantle
My code could have been 10x cleaner with that
sharp shell
like yes but no
harsh solstice
cedar cairn
okay wait let me explain what i meant i meant like have SCSS with some sort of fucked up browser patch that compiles the scss into css on the fly which is THEN parsed into css
sharp shell
i get that but like
cedar cairn
of course you could. just. make scss compile to the native browser styling ast/whatever but that's just boring
sharp shell
that is not what jit means
cedar cairn
it is compiled just in the time that it is used idk what you mean
sharp shell
jit is client side
harsh solstice
Ah
harsh solstice
Ah
sharp shell
jit is a weirdly general term idk
harsh solstice
Yea guess so
zenith nova
Does anyone know how to change that font size? Just font-size doesn't seem to work even with !important
glacial barn
Does anyone know how to change that font size? Just font-size doesn't seem to wo...
something like this :
font-size: 1px;
I swear that's not what I wanted to send, but it's fun π
zenith nova
I currently have
.header-1Uy0p6 *{
font-size: 9pt !important;
}
Because nothing was working but it didn't change anything
Everything does get that property but the font size does not change
glacial barn
you have to add the ":placeholder" on the textarea selector
textarea.inputDefault-Ciwd-S.input-3O04eu.textArea-3wfxMA.scrollbarDefault-2w-Dyz.scrollbar-3vVt8d.title-1v5ZfI::placeholder {
color: red;
}
(I just copied the default one, but you don't need to put all of that)
there's maybe other ways, but this one worked
zenith nova
Thank youu
zenith nova
That place is really annoying to theme, I'll just do it later
glacial barn
well quickCSS is better for "quick"CSS 'cause you don't have to reload discord
zenith nova
I don't have to reload Discord with themes in the folder either
half crystal
just a quick question: why is #π¨-css-snippets blocked by the snippet dev role now?
slim pond
too many "useless" snippets
half crystal
edgy sentinel
just a quick question: why is <#1028106818368589824> blocked by the snippet dev ...
because people post the most stupid and spammy shit there
you can get the role by posting your snippet here
upbeat axle
π
tropic pulsar
well I already got bored of making that lmfao
sorry for the ping, is there an updated version of this perhaps?
slim pond
#π¨-css-snippets message Sorry, I had forgotten to post the working version here
tropic pulsar
alright, thanks!
slim pond
tropic pulsar
idk if you want to but it would be a good mention to add DisplayServersAsChannels so people can find it if coming from bd?
tropic pulsar
I mean, it has the same functionality
I'm not saying it's the same thing, but for people that are switching to vencord and are searching for something that lets them display it in a similar way it removes one question they might have
tropic pulsar
cool cool, I really appriciate this as a theme since that plugin was very laggy on bd
slim pond
I haven't pushed the changes yet
tropic pulsar
is there a way to have folder specific padding without changing the channel ones too or nah?
slim pond
no
cedar cairn
I added more customization settings
mf porting ripcord to real discord
mortal mantle
because people post the most stupid and spammy shit there
Single display: none were quite funny at first, until they no longer are π
slim pond
mf porting ripcord to real discord
ripcord?
glad urchin
discord made in qt frontend/ui
mortal mantle
this actually ... does not look too shabby
maybe doesnt work well with the betterfolders plugin
mortal mantle
true mica
is it even discord at this point
mortal mantle
no
vast delta
what is wrong with you aoi
you should REALLY start spending less time on discord haha
im loving it though
vast delta
vencording*
vast delta
oh is that mobile?
vast delta
i am confused and i will not ask more questions
mortal mantle
expect zero theme dev over the next days
vast delta
oke
glad urchin
good luck
mortal mantle
i am confused and i will not ask more questions
you shall ask more questions
vast delta
i will do twice the amount to replace at least half of you (because you are like 10 times as good)
mortal mantle
i will do twice the amount to replace at least half of you (because you are like...
where did you pull that information from
vast delta
where did you pull that information from
everything you did in the past month
mortal mantle
what I do is just steal snippets from pros
vast delta
is that so?
mortal mantle
dablu why do you have duplicate stylings in your snippet
half crystal
make dablulite's server list collapse and open. i cant believe this works, css is weird
:root {
--guild-list-width: 72px;
--guild-list-width-small: 290px;
}
.guilds-2JjMmN {
transition: width 0.3s;
}
.guilds-2JjMmN:hover {
--guild-list-width: var(--guild-list-width-small)
}
:root {
--guild-item-radius: 50px;
--guild-list-height: 40px;
--guild-list-width-small: calc(var(--guild-list-height) *6);
--guild-list-width: calc(var(--guild-list-height) + 24px);
--guild-item-spacing: calc(var(--guild-list-height) / 10);
}
fits perfectly every single time
vast delta
oh we are talking about server lists?
im playing around with discordstyles horizontal serverlist snippet
im actually playing around with a lot right now
slim pond
looks extremely promising
mortal mantle
it does
slim pond
the only working horizontal servers list I have ever made is in my facebook theme
safe python
what about it
vast delta
ITS NOT ALIGNED? WHAT DO YOU WANT FROM ME I LITERALLY FIGURED OUT HOW TO GET YKUKTL DOWN THERE 5 MINUTES AGO
mortal mantle
IM SORRY IM SORRY
vast delta
ykuktl is the user thingy down there, ive dealt and cried about it so many times i know it from memory
mortal mantle
i have placed my ykuktl to the top
safe python
i genuinely do not see it
mortal mantle
safe python
that looks aligned to me
mortal mantle
here i will zoom it in twice for you sunnie
vast delta
wait ill help
mortal mantle
the grey part below is not matching the other corners
vast delta
vast delta
wait thats literally how its supposed to be??
ewwwwwwwwwww
i hate discord
also im always in for a treat when i open the devtools
mortal mantle
i certainly do not want to give up my exquisite ykuktl and hence that horizontal serverlist will have to be implemented differently once i snatched ur code
vast delta
i certainly do not want to give up my exquisite ykuktl and hence that horizontal...
ill never give it to you
hehehehehe
vast delta
im kidding ill send it once im done
safe python
here i will zoom it in twice for you sunnie
oh i was looking at the alignment between the settings cog and discord icon π
yeah okay that's funny
vast delta
i got an idea, but i dont know how to do it
mortal mantle
okay this actually looks cursed
vast delta
what if, the three buttons next to the avatar and name are hidden and pop out when you hover over your name and that also pushes away the server list to the right
mortal mantle
mortal mantle
what if, the three buttons next to the avatar and name are hidden and pop out wh...
hmm ...
vast delta
wait no that isnt possible i think because they are two completely different objects, right?
mortal mantle
width: 0 to the normal width?
vast delta
they arent under the same parent
vast delta
width: 0 to the normal width?
probably that, but i think you cant make the server list itself move by changing the ykuktl, though i could make it so both independently move
vast delta
i might even have the code in a snippet i made some other time, let me check
wait no thats vertical haha
mortal mantle
looks clean af
vast delta
i did a mistake
actually looks cool, though i would never use it
true mica
but they coded the member list weirdly
not only is it super laggy
but at some point it just gives up
i love css
vast delta
but at some point it just gives up
xd
vast delta
get rekt by discord
safe python
i did a mistake
81 donors 
ven making more money than some places' minimum wage probably
true mica
definitely
vast delta
ven is gonna buy discord and actually name it vencord
true mica
jason, prepare urself
true mica
second try
ok nvm it's literally impossible in just css π oh well
safe python
ven is gonna buy discord and actually name it vencord
ven vs jason cage fight winner gets discord
mortal mantle
81 donors <:ReimuSunglasses:1057461660111093782>
what if 81 x1 usd
mortal mantle
gilded cloak
It doesn't need to be a recurring donation
vast delta
do this as your only thing in quickcss and tell me what you think
ignore the servers that are way to the side haha
just focus on the ykuktl
vast delta
screen resolution?
mortal mantle
whatever the default is
summer crater
just a quick heads up this https://github.com/xdCoolesding/shiggycord/blob/main/Addons/wip.css#L1 won't work as raw.githubusercontent.com doesn't serve a mime type that css needs
vast delta
i dont know what that means so i will just assume i dont have to
vast delta
whatever the default is
do you have a 1080 screen? i figured that might be an issue when i use px
mortal mantle
yeah i have 1080
summer crater
just a quick heads up this <https://github.com/xdCoolesding/shiggycord/blob/main...
wait, does vencord parse those imports & fetch them manually? otherwise I don't see why you had any success with it working.
vast delta
yeah i have 1080
weird
edgy sentinel
just a quick heads up this <https://github.com/xdCoolesding/shiggycord/blob/main...
it works on vencord
summer crater
how
summer crater
interesting
summer crater
well nobody has ever thought about this because everyone was simply just using github pages
vast delta
i have no idea how to use github pages
mortal mantle
edgy sentinel
well nobody has ever thought about this because everyone was simply just using g...
i just did it cause i got tired of having to use github pages
mortal mantle
since your repo name isnt in the github pages format i think you should change its name first
though that will leave some consequences
summer crater
honestly, I never bothered to use electron's network apis because as far as I can remember, they have a huge impact on the client's performance
vast delta
can i apply an animation on an object that is a inside a parent object? my case:
i wanna make an animation start when i hover on object A
that animation should change the properties of object b
the tree looks something like this
parent
object b
subparent
object A
is that a thing?
so for example something like
.objectA:hover>(magically start animation)
animation:
(changes a variable that changes something about object B)
summer crater
you already have to use them
I guess I worded that one wrong
When I ran some testing, I noticed that not messing with csp improved the client's startup time a lot, so I kinda avoided doing so & using those apis. ofc yeah in bigger size mods you kinda have to include it
edgy sentinel
can i apply an animation on an object that is a inside a parent object? my case:...
yes
so, object b is not a child of a right
.common-parent:has(.node-a:hover, .node-a:focus) .node-b {
stuff: "yes";
}```2009 vibes
vast delta
so, object b is not a child of a right
nope
vast delta
```css
.common-parent:has(.node-a:hover, .node-a:focus) .node-b {
stuff: "ye...
what the
i dont understand
summer crater
Basically use :has as look-ahead
vast delta
that still makes no sense but i think it makes a little more sense
it works perfectly, thank you!
that is incredibly useful, ill keep it in mind
exotic nexus
Reposting this to get snippets role
/* Remove stupid 'suggested' section */
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB),
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb {
display: none;
}
:has is basically a selector that lets you check children
.common-parent:has(.some-child)
this means, select any node whose class list contains common-parent and that has a child whose class list contains some-child
edgy sentinel
Reposting this to get snippets role
```css
/* Remove stupid 'suggested' section...
this is terrible
what is that trying to achieve?
what suggested section
safe python
hide suggested channels
tidal pollen
Reposting this to get snippets role
```css
/* Remove stupid 'suggested' section...
reposting
from where?
safe python
you can probably compress hiding the extra separator to a single line with :nth-of-type but that's like it
discord loves insane shitcode
safe python
> reposting
from here
tidal pollen
oh
exotic nexus
what suggested section
At the top of the channel section when you remove channels from the list
mortal mantle
That's such a lengthy snippet
safe python
That's such a lengthy snippet
you can't really do it better
exotic nexus
The channel list is just a bunch of lis with no real way to find the difference between sections
vast delta
:has is basically a selector that lets you check children
my parents didnt have that!
vast delta
what just happened lol
it slowly started breaking as soon as i tried changing .sidebar-1tnWFu
first the chat disappeared, then when i tried changing channel to reload everything unloaded and then it was only a quarter of my screen. i think my vencord is cursed
oh okay, nevermind, its when i put for example .panels-3wFtMD in and dont finish it, for some reason it doesnt fix itself when i remove it though
mortal mantle
vast delta
i think i have just done basic logic, i will consider myself better than all of you now and i will always look down at you
vast delta
when i hover on the little arrow on the side
slim pond
ah, I've done that once before in one of my themes, mobilev2
vast delta
shhhhhhhhhhhhh
neon matrix
Oh damn that looks crazy good
vast delta
CRAZY GOOD?
vast delta
MUM, IVE DONE SOMETHING WITH MY LIFE!
neon matrix
Yeah sure
vast delta
gimme a sec
i just put it as an import on github so it might not work perfectly
put that as your only thing in your quickcss for now, i havent done anything in terms of compatibility
neon matrix
Damn yeah it looks solid
vast delta
seems to work perfectly fine
should i hide the arrow when the list is open? probably, right?
neon matrix
Well so far only issue im seeing is this bit being fully fucked
neon matrix
should i hide the arrow when the list is open? probably, right?
Yeah sure
vast delta
if you wanna use that, just turn off gameactivity and it should work
i did consider being in a call, using spotify controls and doing both at the same time though
neon matrix
the alignment π
neon matrix
Yeah only that bit is a bit broken everything else is great
slim pond
what have I done
vast delta
add this at the end
neon matrix
Oh yeah its fine when theres no game actvity
vast delta
what have I done
you just rudely interrupted me :P
mortal mantle
Horror
vast delta
@neon matrix add this
neon matrix
Ooooo yeah this one seems better
vast delta
it makes the arrow disappear
slim pond
you just rudely interrupted me :P
sorry 
vast delta
wait it only makes it disappear when you hover it, IM A GENIUS
vast delta
upgrade
neon matrix
is there a way to disable the stupid voice chat thing
vast delta
voice chat thing?
neon matrix
yeah
vast delta
oh the little thing that pops up, yeah sure
vast delta
i hate you with a passion
mortal mantle
π
neon matrix
Ohh it does that to me too when i resize my discord then put it back to full size
vast delta
.container-24rGVp.bottom-29W7pW {
display: none;
}
this heides the in voice pill
mortal mantle
vast delta
yeah i cant fix the server list doing that, sorry
well i probably can actually but i really dont care that much because usually you dont change your window size all the time
it has a delay of 3 seconds so just wait a few seconds and it should all be fine
mortal mantle
I only use whatever the default full screen size is π
HOW DID YOU NOT GET THE ERROR
vast delta
what error?
mortal mantle
how did you get it into this perfectly aligned state
while my entire user panel is shifted down
vast delta
how did you get it into this perfectly aligned state
i looked at it and put in fitting numbers
but i used % and that should in theory make it work in all resolutions?
true mica
do not use %
vast delta
whyyyyyyyyy
true mica
unless itβs 100% of the parent div
vast delta
is % bad?
true mica
whyyyyyyyyy
doesnβt scale well
slim pond
How do you even achieve that
vast delta
doesnβt scale well
THIS IS EXACTLY WHAT I WOULD THINK % IS FOR
WHYYYYYYYYYY CSS
okay which units scale best?
true mica
this div has a fixed height anyway, why would you use %
vast delta
this div has a fixed height anyway, why would you use %
what does fixed height mean?
slim pond
does not change
true mica
whatever your screen res is, it'll always be the same
vast delta
isnt that like... stupid?
true mica
not really
slim pond
@import url(//dablulite.github.io/css-snippets/TogglesV2/import.css);
```can someone test this on vencord?what does it do
slim pond
toggles
true mica
slim pond
true mica
that looks like android
slim pond
I mean on vencord toggles
slim pond
that looks like android
it is
true mica
ye it looks fine there
slim pond
I just thought it would make a good snippet, just a chunk of code from mobilev2 really
vast delta
the taskbar when you miss it?
true mica
those buttons can't be moved and no one wants to put them in an ugly div above the server name
vast delta
do you mean those buttons i moved?
true mica
windows's are stuck on the top right
slim pond
macos buttons are native
true mica
macos's on the top left
slim pond
they can't be changed with css
true mica
ye you literally can't move them
vast delta
true mica
the everything in question
true mica
my eyes
true mica
do NOT move them out of the top right corner
vast delta
why?
slim pond
there is a reason they are there
true mica
it's inconsistent with every single windows app ont eh planet
slim pond
exactly
true mica
- it looks ugly
vast delta
OH so you were saying i CAN but i should NEVER
slim pond
it also breaks muscle memory
slim pond
OH so you were saying i CAN but i should NEVER
for the windows buttons, yes
the macos buttons CANNOT be moved
vast delta
i thought you were saying that i CANT, thats why i was confused
slim pond
they are not a part of the webview
true mica
don't even think about linux (they copy pasted windows)
vast delta
the macos buttons CANNOT be moved
i do not see macos as a computer
vast delta
get rekt
mortal mantle
I might remove a ton of resource demanding features off my theme
the serverlist one just lags so much π
deft escarp
thats just frosted glass
i used bdeditor
thats why
i edit a theme
@mortal mantle
mortal mantle
bdeditor can be used by anyone .....
deft escarp
get F in chat'd
means
deft escarp
bdeditor can be used by anyone .....
yes
slim pond
vast delta
this is what i have now, ill probably fix the % thing soon but not rn
slim pond
px
good ol px
works just fine
I can even reduce my display's resolution and it still looks great
vast delta
be right back
mortal mantle
question: is it possible to grab the colour from the folder and apply it to the sidebar ?
vast delta
ill change it aaaaaaaaalll to px
slim pond
question: is it possible to grab the colour from the folder and apply it to the ...
prob not
slim pond
let me guess
color
.platform-osx .wrapper-1_HaEi {
margin-top: 0 !important;
padding-top: 32px;
}
```is that your code for that?testing purposes
MobileV2 has the same issue
and im trying to see if that fixes it
but I will add proper selectors
edgy sentinel
why are u changing it to padding?
anyway if it works fine on stock discord then that's our fault
slim pond
cause it will look really weird otherwise with nitro themes, is what I suspect
but I can't test it
because I don't have a mac\
vast delta
oops something is broken when using spotifycontrol or in a vc, fixing it
vast delta
hm it doesnt scale no matter what i use
mortal mantle
@slim pond for some reason, while I was fixing your server list snippet to fit into my layout, my cpu reported almost 30% usage on hovering around the server names
i deleted the snippet and it went back to below 10 or even 5 percent
mortal mantle
It could be because .... most of the default discord css was already changed by me long ago
slim pond
mortal mantle
so I took away the name part and kept the compact design
actually looks fine
and it overwrote discord's horrible folder animation
slim pond
slim pond
so I took away the name part and kept the compact design
it actually looks sick
mortal mantle
and it doesn't make my CPU scream anymore
slim pond
I'm just fighting to make this continuous server list look good
mortal mantle
(totally my CPU issue)
slim pond
this actually looks sick
mortal mantle
arent they in the same panel?
slim pond
mortal mantle
I used to have an idea of splitting the user area so it could go at the bottom, and the music player still at the top
but I didnt believe it was possible and dropped
slim pond
time for discord DOM lessons, with dablu
you see, the panels area is split in 2 semi-static elements
brittle juniper
I used to have an idea of splitting the user area so it could go at the bottom, ...
ur insane
mortal mantle
wuhh
slim pond
that empty wrapper is where everything that isn't the user area goes
the user area goes on the other appropriately named container
slim pond
you can split the 2 areas and move them around however you like
but the interactive panels (call panel, spotify controls, etc) will always be contained by either .panels or the wrapper inside it
brittle juniper
@mortal mantle@mortal mantle edit the js to add it completely separate from the panel :3
mortal mantle
idk how to js π₯²
slim pond
what exactly did you want t do, aoi?
slim pond
I used to have an idea of splitting the user area so it could go at the bottom, ...
oh, I see
hmm
brittle juniper
y aoi
slim pond
it depends on how the player works
if its size is fixed, it's very much possible
yep, fixed height
.vc-spotify-player its height is 125 (126 with its bottom border)
edgy sentinel
it doesnt have fixed height wdym
its height is also not consistent
it may grow or shrink depending on your settings
slim pond
ah
actually
since the height can be modified, presumeably by just those 2 things, it should still be calculateable
neon matrix
this actually looks sick
whats the colour palette for
neon matrix
you mean the blue one below?
this
mortal mantle
almost legit squarecord
(i changed the global border-radius variable to 0)
holy sh- it's so much smoother
glad urchin
almost legit squarecord
can i have this
i've been using the other squared theme for a while
i want yours, without the radial status
slim pond
I might actually make a modified version of the original sqared but without radial status
mortal mantle
i've been using the other squared theme for a while
i want yours, without the ra...
Sure, let me compile everything again
mortal mantle
i mean, updating the end user file
slim pond
(god it feels weird saying "compile" for a theme)
mortal mantle
sorry for confusion
slim pond
but it guess that's the case with sass/less
deft escarp
almost legit squarecord
can you make theme for me like this but isn't square
@mortal mantle
mortal mantle
mortal mantle
why ping me twice
deft escarp
why ping me twice
ohh sry
mortal mantle
why are you using discord on 25% height
deft escarp
why are you using discord on 25% height
im using discord web cuz im on a chromebook
mortal mantle
h3[class*=membersGroup][class*=container-], h2[class*=membersGroup][class*=container-] {
height: 24px;
}
px does seem to work better than vh in this case hmm
mortal mantle
lmao
glad urchin
[class*=listItem-] [class*=wrapper-] > svg > foreignObject
{
mask: none !important;
border-radius: 0px;
/* border: 1px solid green; */
}
[id*=folder-items-] > div > div > div > div,
[id*=folder-items-] > div > div > div > div > svg > foreignObject
{
border-radius: 0px;
mask: none;
}```
i have this, but for some reason it only becomes square when you jhover over itwhat is that for
mortal mantle
didnt the file I sent you yesterday already have squared server icons
glad urchin
this?
mortal mantle
yeah that
glad urchin
mortal mantle
weird
seems to be an issue from github pages
wait no it's not
could be your other snippets
mortal mantle
if --guild-item-radius is already 0 then the whole thing should be squared
let me check real quick
glad urchin
rip performannce
glad urchin
with only import
mortal mantle
and now the config data below
the radius in the main file is already set to 0 as default
glad urchin
looks normal
mortal mantle
which should mean the server icons are squared
glad urchin
yes
mortal mantle
seems like problem solved to me
guh why does importing the main file break the theme :(
it must have been me changing all the discord default values
wait a fucking minute
nvm I'm dumb, I forgot to merge the changes from my quickcss to the github file
but still, chat bubbles break on normal discord due to lack of color-mix support
mortal mantle
selected folder > hovered folder > unhovered folder
deft escarp
slim pond
it's frosted glass, with a different bg
deft escarp
it's frosted glass, with a different bg
yes i use bdeditor
i dont known about coding
simple kiln
how do i hide the unread channels whenever the category is collapsed
simple kiln
right click and mark as read
as a point of view of a css dev only please.
i mean, even if the user doesn't set it to mute. these unread channel will automatically hide whenever clicking its category.
simple kiln
we're in css-development channel,.. there's no way I would tell the user to mute these channel just to make my css to work.. lol
mortal mantle
how do i hide the unread channels whenever the category is collapsed
thats...hiding the read channels
not unread
simple kiln
thats...hiding the read channels
all channels in a category which means unread and read channels are included, i mean
its just that discord css doesn't allow me to do that because of how the channel list was structured.
<li class"category" aria-expanded="false"></li>
<li class"channel"></li>
<li class"channel"></li>
<li class"channel"></li>
<li class"category" aria-expanded="true"></li>
<li class"channel"></li>
<li class"channel"></li>
<li class"channel"></li>
<li class"channel"></li>
it's just it open and close...
simple kiln
discord really sucks at structuring it
leaden valve
no that's just how HTML is
simple kiln
no,. it should be parent then child
leaden valve
why's that?
simple kiln
<ul class"scroller">
<li class"channel"></li>
<li class"channel"></li>
<ul class"category" aria-expanded="false">
<li class"channel"></li>
<li class"channel"></li>
<li class"channel"></li>
</ul>
<ul class"category" aria-expanded="true">
<li class"channel"></li>
<li class"channel"></li>
</ul>
<li class"channel"></li>
</ul>
:is(body,.container-1Bj0eq) .containerDefault-YUSmu3:not(:has(.wrapper-NhbLHG.modeUnread-3Cxepe, .wrapper-NhbLHG.modeSelected-3DmyhH)) {
display: none
}
oh wait I understand what you mean now
simple kiln
just like this image,. unread channel still appeared even when the category is collapsed
simple kiln
code?
mortal mantle
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)~.containerDefault-YUSmu3:has(.wrapper-NhbLHG.modeUnread-3Cxepe)
{
display: none;
}
I used the + selector earlier and it was horror
theren has to be a better way of doing this
but idk
nuh uh that ~ doesnt work, lemme go back to the + then
simple kiln
it would be better if i know how to get the elements after the category element..
if i use ~ selector but it also select all element including the category below
mortal mantle
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3:has(.wrapper-NhbLHG.modeUnread-3Cxepe),
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3:has(.wrapper-NhbLHG.modeUnread-3Cxepe)+.containerDefault-YUSmu3:has(.wrapper-NhbLHG.modeUnread-3Cxepe),
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3:has(.wrapper-NhbLHG.modeUnread-3Cxepe)+.containerDefault-YUSmu3:has(.wrapper-NhbLHG.modeUnread-3Cxepe)+.containerDefault-YUSmu3:has(.wrapper-NhbLHG.modeUnread-3Cxepe)
{
display: none;
}
you will have to do this infinitely many times
hmm that unread selector behind is unnecessary either
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3,
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3+.containerDefault-YUSmu3,
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3+.containerDefault-YUSmu3+.containerDefault-YUSmu3,
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3+.containerDefault-YUSmu3+.containerDefault-YUSmu3+.containerDefault-YUSmu3,
.containerDefault-3TQ5YN:has(.collapsed-2KOacR)+.containerDefault-YUSmu3+.containerDefault-YUSmu3+.containerDefault-YUSmu3+.containerDefault-YUSmu3+.containerDefault-YUSmu3
{
display: none;
}
something like this
neon matrix
i have no clue wtf is happening here
seems to be a bug for @import url(https://seele1306.github.io/Snippets/BetterProfiles/import.css);
only happens when i have it on
mortal mantle
I haven't bumped it up to the newest version
.userPopoutInner-nv9Y92:has(#account) > *:not(:has(#account)), .userPopoutOverlayBackground-3A0Pcz:has(#account) > *:not(#account) {
display: none;
}
toxic yew
.containerDefault-3TQ5YN:has(.collapsed-2KOacR) ~ .containerDefault-YUSmu3:not(.containerDefault-3TQ5YN:has(.collapsed-2KOacR) ~ .containerDefault-3TQ5YN:not(:has(.collapsed-2KOacR)) ~ .containerDefault-YUSmu3) {
display: none;
}
simple kiln
```css
.containerDefault-3TQ5YN:has(.collapsed-2KOacR) ~ .containerDefault-YUSmu...
life saver <3
austere hamlet
```css
.userPopoutInner-nv9Y92:has(#account) > *:not(:has(#account)), .userPopou...
least deranged discord css snippet
i forgot how bad it can get ;w;