🎨-theme-development

[clear siren]

yes

[grand surge]

ok

thank you

is there a way to change the ping color?

[clear siren]

the yellow line?

[grand surge]

yes

[solid ore]

ctrl+shift+i and find the element's class

[clear siren]

[class*=mentioned_]::before {background: whatever !important;}

yeah learn to use devtools

no more spoonfeed

[grand surge]

how do i find the elements class? like do i just manually go through each one until the line gets hightighted?

[grand surge]

ye lol thx tho

[clear siren]

you press that button and then the element you want to manipulate

then you might need to go up and down the tree a bit to find specifically the element you need

[grand surge]

like this?

[grand surge]

a ok

i get this

message_80c10

[glad urchin]

whar

[grand surge]

the class

[grand surge]

i wanna know how to find a class using

[deft niche]

Isn't there a variable for it

[clear siren]

yeah it uses the warning color

I prefer to hide the pseudoelement and style the message instead

[clear siren]

ok that setting doesn't seem to do anything for me, but what actually does is if I turn off discord titlebar option in vesktop I can get transparency working actually

[deep bane]

you gotta do a full restart

like close discord

not ctrl+r

[clear siren]

yeah I did

[deep bane]

* {
  background:transparent !important;
}```

try turning transparency effects on

i dont have them but it still works

⠀

[clear siren]

wallpaper showing through, that setting disabled lol

but in vesktop settings I do have acrylic enabled and discord titlebar off

[deep bane]

idk im not on vesktop

[clear siren]

so using discord titlebar breaks all transparency for me, no other setting seems to matter except obviously this

[deep bane]

maybe disable acrylic

idfk

use transparency by itself

[clear siren]

doesn't work at all, but if I wanted to rock transparency I would use acrylic

nice to know that it works when discord titlebar option is off in vesktop

[deep bane]

you could probably get acrylic like effect if you add blur

to the transparency

[clear siren]

you could not, but if you use vesktop you get acrylic just fine

[deep bane]

vesktop sucks because you cant use push to talk unfocused

¯_(ツ)_/¯

[clear siren]

what sucks about the acrylic though is that unfocused the window is just grey

and mica is not real transparency

oh I can fix that behavior with micaforeveryone

:3

[cloud jolt]

how do i replace a singular emoji

i want them to be an image file in my computer not from a site btw is that possible

[clear siren]

well that is kinda possible, by encoding the emoji in a data uri

then you just need to grab a selector for a specific emoji's img element and do { content: url(data:xxxxx) !important; }

[cloud jolt]

yea uhh, i think im gonna wait for #plugin-requests to open

[clear siren]

wouldn't hold my breath

[summer adder]

dw i’ll be here on your 87th birthday

[deep bane]

whar

oh you wanted it to be from your pc

[sweet lark]

fyi they dont know css, they asked the same question in #🏥-vencord-support-🏥 and they said they have no css knowledge

i told them to come here bc no one would answer in #🏥-vencord-support-🏥

[clear siren]

I think at some point someone had used an image file they placed in the themes folder but dunno on what platform, haven't tried it, data uris are easier

[deep bane]

done

[atomic plank]

so, even with using the element picker thingy I can't figure out what class to modify to get this white text to be a different colour

Okay kind of got it?

[deep bane]

.containerDefault__3187b .name__8d1ec.overflow__87fe8 {
  color:lime !important;
}```

[atomic plank]

That makes all channels lime though, I want to do seperate colours for muted, unread, read, etc

[deep bane]

.containerDefault__3187b:not(:has(.modeMuted__0aeea)) .name__8d1ec.overflow__87fe8 {
  color:lime !important;
}
.containerDefault__3187b .modeMuted__0aeea .name__8d1ec.overflow__87fe8 {
  color:red !important;
}```

[atomic plank]

It's fine, I have gotten a less complex way of doing it :P

Just got muted channels working

[deep bane]

This works

.containerDefault__3187b .name__8d1ec.overflow__87fe8 {
  color:lime !important;
}
.containerDefault__3187b .modeMuted__0aeea .name__8d1ec.overflow__87fe8 {
  color:red !important;
}```

and it's not complex

[atomic plank]

Or I can just make a variable

though, this doesn't look nice

[deep bane]

.containerDefault__3187b .name__8d1ec.overflow__87fe8 {
  color:lime !important;
}
.containerDefault__3187b .modeMuted__0aeea .name__8d1ec.overflow__87fe8 {
  color:red !important;
}
.containerDefault__3187b .modeUnreadImportant_efb53e .name__8d1ec.overflow__87fe8 {
  color:cornflowerblue !important;
}```

[deep bane]

you can either make selectors for channels or make selectors for every text that uses the same variable as the channels

[atomic plank]

selectors?

[deep bane]

selectors rules properties whatever

[atomic plank]

ah

See I have no idea what i'm doing cause I either get spoonfed answers or have just taken 90% of my theme from #🎨-css-snippets

hmm yeah white 500 changes a lot more then just the channel text...

[deep bane]

i like how darkgray is actually lighter than gray in css

[atomic plank]

Thank you for the spoonfed answer even though I only understand very little of it

It works perfectly

[deep bane]

if you want muted/darker colors for muted channels, setting the color with this rgb(255 255 255 / 0.3) would be better as the icons would be darker/transparent

[atomic plank]

Ah yes, the 0.3 makes it better

I think my last problem is that the channel list and profile stuff has a pure black background where the rest of my theme is gray

[deep bane]

thats because they're buttons

[atomic plank]

How might I modify said buttons?

cause the black really stands out on my main monitor

[deep bane]

oh you meant you want to change the black

[atomic plank]

Yeah

cause the profile buttons and channel list are sticking out too much

[deep bane]

.sidebar_ded4b5 .panels__58331 {
  background-color:red;
}```

[atomic plank]

ah that didn't work...

[deep bane]

.sidebar_ded4b5 .container_ca50b9 {
  background-color:red !important;
}```

[atomic plank]

Ah

now it's just the channel list that's still black

[deep bane]

.wrapper_a7e7a8.guilds__2b93a{
  background-color:red;
}```

[atomic plank]

Thanks!

It's perfect now

[cloud jolt]

thanks!

[clear siren]

Dashless channel names with flags working:

/*dashless*/
@font-face
 { font-family: "Twemoji Mozilla";
   src: url("https://vendicated.github.io/random-files/Twemoji.Mozilla.ttf") format("truetype");
   unicode-range: U+1F1E6-1F1FF; }
@font-face
 { font-family: "dashless";
   size-adjust: 200%;
   src: url("https://vendicated.github.io/random-files/Dashless.woff2") format("woff2");
   unicode-range: U+002D; }
[data-list-item-id^=channels___], /* channel list */
[class^=titleWrapper] > h1, /* top bar with topic */
[class^=resultChannel], /* channel name in search */
[class^=channelMention], /* channel mentions in chat */
[class^=placeholder][class*=slateTextArea] /* "Send a message in #blah" */
 { font-family: "Twemoji Mozilla", "dashless", var(--font-primary); }

need to install a font with flag glyphs in it I used https://github.com/mozilla/twemoji-colr, there might also be a online font for this

[edgy sentinel]

the same repo by me also has twemoji mozilla

https://vendicated.github.io/random-files/Twemoji.Mozilla.ttf

import it same way as the dashless font

[clear siren]

oh I had no idea

cool

updated snippet with link

[clear siren]

@quartz eagle

.container__037ed:has([data-list-item-id="guildsnav___home"]:hover) .vc-smyn-suffix { display: none }

with that, if you hover over your DM button, all showmeyourname elements are gone

if you want it to be some other element that can be done as easily

[quartz eagle]

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

(normally albert0softie would be next to the name in parenthesis)

[clear siren]

yeah

[quartz eagle]

thanks again

[clear siren]

np

[deep bane]

I don't get it

[glass flint]

@import url('https://userstyles.world/api/style/14315.user.css');

[glass flint]

(#🎨-css-snippets message)

[iron smelt]

if you actually use Compact mode, you should be put in a psychiatric hospital

[glass flint]

my css makes compact mode good

i edited my message to make it more clear

[clear siren]

anyone want to test and improve this snippet? #1193869493492002816 message

got modal settings working so that any click outside the modal closes it

[rugged echo]

I think the background of the modal looks out of place, I mean that red thing
and it doesn't work with the client theme plugin lol

[clear siren]

yeah I just wanted to put something there to not accidentally close it

[rugged echo]

maybe just a bit of a dim is fine, or blur (if you are crazy)

[deep bane]

clicking outside it doesnt close it

[clear siren]

are you using any other css here

[deep bane]

yes but not any that modifies the settings popout to my knowledge

yes its the exact same

[clear siren]

hmm strange but not totally unexpected it is quite a hack

[deep bane]

without any other rules

wtf why did u hack my pc!

[clear siren]

would be cool to know why that happens though

[deep bane]

no idea mate

i tried removing some rules

and the window doesnt appear to change much

overflow:scroll; causes the sidebar to disappear

but either way clicking outside the settings window doesnt close it

[clear siren]

yeah I think I have to rewrite the whole thing unless someone else wants to take a crack at it

personally I'm not even sure I like that behavior but I wanted to try if I can get that working when devilbro didn't lol

[deep bane]

im guessing that it works on vesktop

[clear siren]

https://mwittrien.github.io/BetterDiscordAddons/Themes/SettingsModal/SettingsModal.css is what inspired my creation and that has a clear attempt at closing when clicking outside but does not work

[deep bane]

it does work

just extremely laggy

[clear siren]

never worked for me

[deep bane]

worked for me

[clear siren]

never worked on betterdiscord back when I used that, not on discord with vencord and not on vesktop so I have no idea what's going on

why does that work for you and mine doesn't

[deep bane]

👍

[clear siren]

I literally can't even

[deep bane]

#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .tools_c0ff70,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .container_bb0c52,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .closeButton__34341 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: unset !important;
    height: 100% !important;
    max-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: default !important;
}
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d {
    position: fixed !important;
    top: 22px !important;
    z-index: -1 !important;
}```

this makes it work

the clicking outside window

[clear siren]

but yeah if anyone feels like cleaning that all up, making it work like it should (and be actually centered too) and making it use discord color vars and styling I'd love to see it

[deep bane]

#app-mount .layer__2efaa ~ .layer__2efaa {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: var(--settingsbackground_v) !important;
    border-radius: 5px !important;
    box-shadow: var(--elevation-high) !important;
    width: var(--settingswidth_v) !important;
    height: var(--settingsheight_v) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    contain: unset !important;
    z-index: 1000 !important;
    --settingsiconsadditionalsize: var(--use-settingsicons, 0) * (var(--settingsicons-size, 0px) + var(--settingsicons-gap, 0px));
}

#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .tools_c0ff70,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .container_bb0c52,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .closeButton__34341 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: unset !important;
    height: 100% !important;
    max-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: default !important;
}
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d {
    position: fixed !important;
    top: 22px !important;
    z-index: -1 !important;
}```

works for me

[clear siren]

there's no way I'm gonna slap that in there and call it a day tho, the code only goes from bad to worse and doesn't fix the other issues

needs a proper rewrite with every line having a reason to be there instead of garbage on top of garbage

but yeah not a priority for me, more of a proof of concept that works fine for me

[deep bane]

This works just fine

:root {
    --settingswidth:1080;
    --settingsheight:80;
    --settingswidth_v:min(calc(1px * var(--settingswidth_s, var(--settingswidth))), 99vw);
    --settingsheight_v:min(calc(1vh * var(--settingsheight_s, var(--settingsheight))), 99vh);
}
#app-mount .layer__2efaa ~ .layer__2efaa {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  background:var(--settingsmodalbackground);
    box-shadow: var(--elevation-high) !important;
    width: var(--settingswidth_v) !important;
    height: var(--settingsheight_v) !important;
    margin: auto !important;
    padding: 0 !important;
}
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .tools_c0ff70,
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d .closeButton__34341 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: unset !important;
    height: 100% !important;
    max-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: default !important;
}
#app-mount .layer__2efaa ~ .layer__2efaa .toolsContainer_f5d55d {
    position: fixed !important;
    top: 22px !important;
    z-index: -1 !important;
}```

[dim bluff]

how would i replace the font on discord with a font installed on my computer?

[clear siren]

:root { --font-primary: "comic sans ms" !important; } in your quickcss

there's also font-display, font-headline and font-code you can change like that

[dim bluff]

thank you

[sweet lark]

a css to get rid of this would be cool , this button is annoying as hell

i assume its just a simple display:none but idk css

[solid ore]

someone needs to make a "how to hide x in discord with css" guide

for these ppl

[glass flint]

#guild-header-popout-application-directory {
        display: none;
}```

[sweet lark]

doesnt work for me

[clear siren]

I think that is [data-tab-id="APP_DIRECTORY"]

inside the dialog

[glass flint]

wait we’re not talking about the same element sorry

[glass flint]

yeah,

[data-tab-id="APP_DIRECTORY"] {
        display: none;
}
``` does the trick for me

[sweet lark]

doesnt work for me still

its int here

[glass flint]

yeah, weird, that works for me

[clear siren]

add !important

[sweet lark]

i was going to try

display: none !important;

like this or

[clear siren]

ye

[sweet lark]

i dont know css

okay

its still there for me idk why

[glass flint]

open dev tools, click ⬇, hover over “App Directory” and send a ss

[sweet lark]

no children

<div class="item__48dda themed_b957e8" role="tab" aria-selected="false" aria-disabled="false" tabindex="-1" aria-label="App Directory">App Directory</div>

i guess you could get it from aria label

[clear siren]

yeah use that

[glass flint]

weird. mine looks like that

[sweet lark]

thats weird

[glass flint]

why would your html be different?

[sweet lark]

no clue

im on stable discord

with some small css snippets and

amoledcord

[glass flint]

i don’t think css can outright make a data-tab-id disappear. maybe it’s because i’m on web

[clear siren]

I know why

[glass flint]

oh?

[clear siren]

the data-tab-id is inserted by themeattributes plugin

[glass flint]

oh!

that’s why

alr

[sweet lark]

[aria-label="App Directory"] {
    display: none;
}

works

[glass flint]

nice

[clear siren]

[sweet lark]

im a css god (i copy pasted another snippet and changed the aria label)

[glass flint]

(i think everyone does that)

[sweet lark]

i assume most ppl here actually know css :p

i know nothing

[sweet lark]

oh i can post in #🎨-css-snippets bc im cute

maybe ill post that there

it was annoying me

why is that button even there

[glass flint]

don’t

[sweet lark]

but its very high effort

btw

[glass flint]

¯_(ツ)_/¯

[glass flint]

i love that cat

[clear siren]

I posted a new (old) snippet in #🎨-css-snippets

if anyone knows any place where channelnames exist and not selected by it lmk

[dim bluff]

my font doesnt seem to be showing

:root {
    --font-primary: "FontAwesome" !important;
}

im using this in my quick css but my font isnt showing up

im on ubuntu if that matters

i installed the font with sudo apt install fonts-font-awesome if that matters too

[glad urchin]

@dim bluff have you tried restarting discord

had the same issue several times and i couldnt figure it out until accidentally

[dim bluff]

lemme try

nope it didnt work

[glad urchin]

closing and reopen?

check if the font name is correct too

[dim bluff]

im pretty sure it is

i dont know how i would check that but when i did fc-list | grep "awesome" i got the name that i put in there

where is my embed

[glad urchin]

i have no idea for linux

try downloading another font and see if that works

[dim bluff]

MesloLGS NF works just fine lmao

but i use it for code blocks

[deep bane]

Scrapped full phone number hider because it would be impossible/very hard to hide the sms backup auth phone number

.constrainedRow_b9e8cf .text-md-normal__4afad:has([aria-label="Reveal phone number"]) {
  visibility:hidden;
}
.constrainedRow_b9e8cf .text-md-normal__4afad [aria-label="Reveal phone number"] {
  visibility:visible;
}
.text-md-normal__4afad:has([aria-label="Reveal phone number"])::before {
  content:'Hidden';
  font-size: 14px;
  visibility:visible;
  margin-right:-86px;
}

/* .colorStandard__5111e.size14_b2af01.description__7af71.formText_e4d957.marginBottom8_f4aae3.modeDefault_c1162c:has([data="Reveal"]) {
  visibility: hidden;
}
.colorStandard__5111e.size14_b2af01.description__7af71.formText_e4d957.marginBottom8_f4aae3.modeDefault_c1162c::before {
  content:'Your current phone number is: Hidden.';
  visibility: visible;
  margin-right:-284px;
}
.colorStandard__5111e.size14_b2af01.description__7af71.formText_e4d957.marginBottom8_f4aae3.modeDefault_c1162c .phoneRevealer__8ecd9 {
  visibility: visible;
}*/```

[torpid void]

anyone have a mini user popout snippet like this one #🎨-css-snippets message ?

[lime walrus]

First time doing css, this is what i made lol.
/* Change the color of spotify shuffle, next, previous and pause/play */
.vc-spotify-button-icon {
color: rgb(252, 19, 19);
}

[glass flint]

you can make codeblocks with syntax highlighting like that:
```css
your css goes here
```
css can be remplaced with many languages (c, py, js etc.)

[lime walrus]

O ill try that, thank you

[lime walrus]

/* Change the color of spotify shuffle, next, previous and pause/play */
.vc-spotify-button-icon {
  color: rgb(252, 19, 19);
}

[glass flint]

discord supports much of markdown’s sytnax (if you want to learn more you can search up some tutorial on markdown :))

[summer adder]

try getting to more advanced stuff now, like themes and simple additions

[lime walrus]

Ye 100%, is there a better way of using dev tools rather than relying on this?

[summer adder]

element picker (what you’re showing in the screenshot) is your friend, along with F8Break

[lime walrus]

O you mean the plugin?

[summer adder]

Yup, useful for tooltips and such

[lime walrus]

Ill turn it on 🙂

[clear siren]

I can't think of anything better than using that and moving up and down the dom tree to find the element you want to modify, keeping an eye on the right pane to see styles that are applied to each element

[glass flint]

the layout tab is also very usefull

[clear siren]

true, also computed styles can be useful at times

[lime walrus]

Will do, thank you

[torpid void]

bump

[solid ore]

wats wrong w that one

[torpid void]

it was deleted

and css on discord is different now so the old code for it doesnt work anyway

[glass flint]

use that to update the classes https://github.com/accrazed/far

[torpid void]

i still dont have the original css

but thanks

[solid ore]

do yk how to use devtools

[torpid void]

not to find deleted code on github?

[solid ore]

no lol to find the selector for an element on discord

[torpid void]

oh u meant like remake it lmao

yeah i could remake it i just wouldve prefered to not do that but i will

[solid ore]

i wouldve done it for u but im not on my pc atm

[torpid void]

im doing it thx

.accountProfilePopoutWrapper_af829a .scroller__83262.thin_b1c063.scrollerBase_dc3aa9,
.accountProfilePopoutWrapper_af829a .divider__2bbbc,
.accountProfilePopoutWrapper_af829a .section__6f61e.container__22d2b.usernameSection__53868,
.accountProfilePopoutWrapper_af829a .bannerSVGWrapper__3e7b0,
.accountProfilePopoutWrapper_af829a .clickable__35918,
.accountProfilePopoutWrapper_af829a .profileBadges__7a7cb {
    display: none;
}

.accountProfilePopoutWrapper_af829a .userPopoutOverlayBackground_d8afa4 {
    margin: 16px;
}```
im pretty bad at css stuff and i know this is rlly bad but it works

[devout umbra]

how can i restore the image sizing behaviour

for whatever reason, the css snippet aint working for me

i see the object-fit apply in devtools, but the ui does not change

looks like the image's src is set to the cropped thumbnail. i don't think we can do this with just css unfortunately

[deep bane]

Optimized snippet

.accountProfilePopoutWrapper_af829a :is(.scroller__83262.thin_b1c063.scrollerBase_dc3aa9,.divider__2bbbc,.section__6f61e.container__22d2b.usernameSection__53868,.bannerSVGWrapper__3e7b0,.clickable__35918,.profileBadges__7a7cb) {
    display: none;
}
.accountProfilePopoutWrapper_af829a .userPopoutOverlayBackground_d8afa4 {
    margin:16px;
}```

[torpid void]

oh thanks (i have no idea how css works or why thats optimized)

[deep bane]

because theres less text

[torpid void]

oh

[deep bane]

i think thats pretty obvious

[torpid void]

I thought u meant it would like run faster

[deep bane]

i mean yes it would because theres less text

altough youre not gonna notice because it is such a small difference

but over time as you get more quickcss code it would stack

[torpid void]

Oh

[vestal field]

performance wise it'd probably be the same

processing the code only happens once, but checking the actual selectors is what hurts performance

[deep bane]

its using the :is() "selector" which basically can be used to combine selectors such that go like:

.a .b,
.a .c,
.a .d,
.a .e {}

[deep bane]

yeah but its still optimizing it just a little bit

[vestal field]

just saves you typing effort

im not sure if :is() is still checked right to left though

[deep bane]

it works

[vestal field]

because if it looks for the outside selector first then that might hurt performance in some cases

[deep bane]

it doesnt look for the outside selector

[edgy sentinel]

it doesnt make a difference

just write maintainable css

the only way you can cause serious lag is by using * (as a selector, not *=)

just dont unless u really have to

[deep bane]

im gonna

[deep bane]

* by itself or .class *?

[edgy sentinel]

both of those are fine

[vestal field]

:has also sucks

[edgy sentinel]

it only becomes laggy once you combine it with more

[deep bane]

no

i love :has

[vestal field]

if you use :has stupidly it will lag

[deep bane]

no

[glossy aurora]

if you use ___ stupidly it will lag

[deep bane]

real

[edgy sentinel]

add this to your quickcss for crazy lag

body:has(.class > .div[class*=explode]) * {
    display: none;
}

[deep bane]

just disable quickcss ⠀

when will we get css looksmaxxing

[edgy sentinel]

like add that and try scrolling and typing a bit

its unbearable 😭

holy fuck i removed it again and its STILL laggy

time to restart discord

[deep bane]

isnt that laggy for me

i think you guys are just bad

[vestal field]

not too bad with a newish desktop cpu

on my laptop i think this would make it explode

[edgy sentinel]

someone posted a super small snippet that legit made discord like 3fps a while ago

let me see if i can find it

[deep bane]

Ultimate Performance Boost and Life Boost ```css

• {
  display:none !important;
  }

[edgy sentinel]

https://cdn.discordapp.com/attachments/1015060231060983891/1183823169409253466/image.png?ex=65c11b3d&is=65aea63d&hm=e605d391d410e9c3f3167ce5442cd8621c8afa64988b849b6940938c771e4513&

[oak plover]

I had a css thing that crashed the app sometime last year

I wonder if it still works

[deep bane]

@import url('https://raw.githubusercontent.com/im-h/css-snippets/main/Popout-Modal-Settings.css');

[edgy sentinel]

#app-mount:has(.typingDots_d92d42 [src^="https://cdn.discordapp.com/avatars/226447651917266944"])>*{display:none}#app-mount:has(.typingDots_d92d42 [src^="https://cdn.discordapp.com/avatars/226447651917266944%22])%7Bbackground:url(https://cdn.discordapp.com/emojis/1092122987844612106.png?size=4096) center/cover no-repeat}

add this snippet and start typing

then look at cpu usage as you type

css * is lovely

[deep bane]

as it mentions at the top this is from devilbros better discord popout modal settings, i just removed a bunch of stuff so now its a standalone, and it also has the feature of being able to click outside the "window" to close it

[edgy sentinel]

i think it's because css goes from right to left
so what that selector does is

1. select * (everything)
2. for each selected element, it checks the first selector, which in turn checks the entire document

so if there are 10_000 elements, you check all those elements 10_000 times

[deep bane]

it also works way better with fastmenu #1032200195582197831 message

[vestal field]

* * * * * * * * * {
    backdrop-filter: blur(10px);
}```

backdrop filter is evil

[edgy sentinel]

HOLY LAG

[vestal field]

[edgy sentinel]

thank god its limited to a single cpu thread

[vestal field]

how do i make it use all of them :)

[deep bane]

system explorer maybe

[torpid void]

Does someone wanna put this in #🎨-css-snippets cuz the old one broke

[edgy sentinel]

run as many discord instances as you have threads

if u have 12 threads run 12 discord instances

[deep bane]

Ultimate Performance Boost and Life Boost (Requires Window Transparency)

* {
  background:transparent !important;
  display:none !important;
}```

[vestal field]

i dont think vesktop lets me make multiple instances

[edgy sentinel]

it does

1. enable "Open links in app"
2. open https://discord.com/app
3. repeat this as many times as you want
4. enjoy

unfortunately the nested discords dont have vencord (very sad)

[deep bane]

what is that os

[edgy sentinel]

gnome on fedora

[deep bane]

gnome

[vestal field]

oh no it seems like i need to login

[deep bane]

u MIGHT need to login

[vestal field]

discord login screens are very efficient

[edgy sentinel]

you only need to login once

then it has you logged in in all frames

[vestal field]

bet

the shadow

only 5gb of memory for 50 discords

[tacit saddle]

I got it to open two instances of the app itself once lmao

Idk how tho

Interestingly enough the second vesktop wanted me to log in

[edgy sentinel]

because electron doesn't really support multiple instances

so it uses different localStorage and indexeddb

[tacit saddle]

Oooh I see

[edgy sentinel]

you can open infinite browser windows that's fine

but you can't run multiple different main processes

[tacit saddle]

Yeah

[stone dune]

hi, how can I start making my own themes?

[glass flint]

https://docs.betterdiscord.app/themes

[stone dune]

thanks, I didn't know it was the same 🙂

[glad urchin]

love discord (they broke the unread notif pill)

[deep bane]

cant relate

[glad urchin]

oh nvm

wasnt fullscreen'd my bad

[exotic nexus]

huh actually it looks fine on my end

i remember seeing it before though

[tawny dagger]

hm

[exotic nexus]

is your discord updated

[tawny dagger]

like every day

[exotic nexus]

huh that's weird then

but yeah you could just change the content of all the sections and that should work

i would get it for you but it works on my machine

[tawny dagger]

oh fixed it 💀

I had the experiment enabled for the new safety signals (quarantined and spammer) but I guess those are completely rolled out now?

weird the experiment would kill the columns though

[exotic nexus]

silly discord

[tawny dagger]

all they did was add 2 new options to the existing signals column

all they were supposed to do*

[deep bane]

I need help, something happened and now my css doesn't work @import url('https://raw.githubusercontent.com/im-h/css-snippets/main/Centered-User-Popouts.css');

[deep bane]

how it looked before (kind of old but not that old)

[deep bane]

I don't really need help with actually making it look like it did before, i would just like to know why it's broken

[plain kelp]

Class names changed, probably

[solid ore]

erm

anyone know if u can mkae user popouts scrollable

this is the entire height of my laptop monitor

[solid ore]

do u mean like this?

.tutorialContainer_dc6fde
{
  position: absolute;
  bottom: 0;
}```

[fading wigeon]

:last-of-type only takes into account the actual element type and not the selector doesnt it

[clear siren]

yes

if you need to select last of a class you can do .class:not( ~ .class) or something

[solid ore]

this is rly shit but idk enough css to make only some children go from bottom to top

.tutorialContainer_dc6fde
{
  position: absolute;
  bottom: 56px;
}
.listItem_fa7b36:has([data-list-item-id="guildsnav___guild-discover-button"])
{
  position: absolute;
  bottom: 0;
}```

[solid ore]

@clear siren do yk if this is possible, or wat other solutions there could be

[clear siren]

aren't they by default though

mine are

[solid ore]

omg

one of my snippets was fucking it up

[solid ore]

thx

[clear siren]

np lol

[fading wigeon]

cant get it to work for some reason

[clear siren]

oh whoops I meant .class:not(:has( ~ .class))

[fading wigeon]

i tried that as well

even without the not i cant get it to work

[clear siren]

works for me

[fading wigeon]

can i not use has within the expression

[clear siren]

what are you trying to do specifically

[fading wigeon]

[class^="containerDefault_"]:has(> [class*="clickable_"]):not(:has(~ [class^="containerDefault_"]:has(> [class*="clickable_"])))

[clear siren]

what is it supposed to do

[fading wigeon]

target the last category of the channel list

without the :not(:has()) it works fine and targets everything but the first category

[clear siren]

something like this?

 {background: red}```

there is a problem though, the elements disappear when you scroll

[fading wigeon]

thats an entirely different issue i need to solve without css so

but yeah that works

im just going to use it to remove the side line if its the last one so

[clear siren]

I see

[fading wigeon]

it doesnt matter to me if its appears/disappears when scrolling itll still work fine

[clear siren]

but yeah I should be sleeping, take care

[remote willow]

Is there anyway to select an element based on the child of another element?

[edgy sentinel]

yes

[class^=avatar]:has(> [class^=wrapper]) + [class^=content] {}

(or use full classes)

[remote willow]

Ah alr thanks (tried brackets before but forgot the :has)

[edgy sentinel]

brackets have nothing to do with it

just a way to select elements without hardcoding the random junk

[remote willow]

Oh ok

[edgy sentinel]

.avatar__6337f:has(> .wrapper_edb6e0) + .content_a6999d {}

[remote willow]

It gives an error
)expected css(css-rparentexpected)

[fading wigeon]

whar

does your css linter or whatever not have support for :has()?

[edgy sentinel]

ignore

[edgy sentinel]

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

[fading wigeon]

womp womp

[edgy sentinel]

i love half a year no update

even though its just updating vscode css language service

[edgy sentinel]

its okay small indie company microsoft doesnt have the resources ❤️

[edgy sentinel]

bro thought his assignment was adding the label

[fading wigeon]

"last month"

[edgy sentinel]

github doesnt know math

they also think 2023 is 2 years ago

its cause they round up instead of down

same issue as discord timestamps

[fading wigeon]

yeah

[edgy sentinel]

<t:1656457440:R>

29 june 2022 = 2 years ago

dont think so discord...

its a moment moment

does shithub also use moment

[gilded cloak]

That is 2 years ago in my head

[glossy aurora]

2024 - 2022 = 2
simply ignore months

[deep bane]

im 90% sure the class names didnt change

[deep bane]

bro wake up its 2025

[deep bane]

yeah no, the class names didnt change the actual rules don't affect anything for some reason

[summer adder]

do they have !important in them?

[deep bane]

yes

[deep bane]

Well i seem to have fixed most of it by adding some simple rules (mostly justify-content: center) but the Mutual Servers/Friends Etc. are still broken, they were perfectly centered inside and outside even with more than 1 mutual server but now they are completely broken

[dark dragon]

You can probably just chuck a margin: auto on it

[solid ore]

does anyone know how i can hide all this empty space (left img) so that its more like the right img, without doing display block like below?

.overlayBackground__86b78
{
  display: block;
}```

[deep bane]

no

[dark dragon]

Are you sure? If I import your shit and I can fix it by adding margin:auto to that thumbnail, I'm going to be upset

[deep bane]

yes I tried

[dark dragon]

https://i.imgur.com/vBn80qa.png

I'm pretty upset

[clear siren]

.body_ea740e { flex: none !important; }

[solid ore]

ty! one problem.. it still removes the scrollbar on longer profiles :/

[clear siren]

hmm and adding overflow:scroll on anything doesn't work

uhh

ok

.root_ba16f0 { overflow: auto !important; } works

it does make an ulgy default scrollbar on it but that can be removed .root_ba16f0::webkit-scrollbar {width:0 !important; }

wait that doesn't work

I can't get rid of the scrollbar

[deep bane]

?

[dark dragon]

The thumbnail is centred fine with just the margin

[deep bane]

first of all it didn't work for me second of all I was talking about it being centered inside of the popout

[dark dragon]

Oh, it'll look wild, but I'll do it when I'm back at my computer

[solid ore]

oh god that is ugly

i'll have a look

tysm tho

[clear siren]

yeah I couldn't figure out how to get rid of it

[dark dragon]

Give this a go

.listScroller__92e1a {     
    display: flex;     
    flex-wrap: wrap;     
    justify-content: center;     
    flex-direction: row;     
    align-content: flex-start; 
} 
.listAvatar__907d4 {     
    margin: auto 
}
.guildNick__01069 {
    justify-content: center;
}

[solid ore]

this is annoying, i tried applying it to all scrollbars and it still didnt work

[clear siren]

yeah I have no idea

[deep bane]

i got it to work but now this happens

also best snippet ever

.threadSuggestionBar_b633f7 {
  display:none !important
}```

[deep bane]

.listScroller__92e1a .listRow__60937 *{     
    display:grid !important;
    justify-content: center;
    text-align: center;
    margin: auto;
    max-width: 75px;
    height: fit;
}
.listScroller__92e1a {
    justify-content: center !important;
    display:flex !important;
}```

i fixed it with .listScroller__92e1a>*{height:fit-content} but i would like to know why it's happening

[dark dragon]

That's kind of just of flex works. The align-content: flex-start; should have prevented that though, unless you removed it

[deep bane]

alright, and would there also be a way to get the text inside of the elements to wrap/break?

never mind

[long sundial]

:root {
  --font-primary: ‘Monocraft’;
}```
someone please

[summer adder]

if you’re trying to do a custom font like that, just putting it there won’t work.

[long sundial]

import ye

[summer adder]

you’ll need to import the font so it can actually be specified

[long sundial]

that would require 2s extra work

[summer adder]

https://github.com/IdreesInc/Monocraft/releases/download/v3.0/Monocraft.ttf

im on mobile so my advice might not work but

copy the RAW file link of that

[long sundial]

@font-face {
  font-family: 'Monocraft';
  src: url(https://github.com/IdreesInc/Monocraft/releases/download/v3.0/Monocraft-nerd-fonts-patched.ttf);
}

:root {
  --font-primary: 'Monocraft';
}``` fuck

[summer adder]

hendidnsidnebf

[long sundial]

github does some shenanigans

[summer adder]

it’s def possible tho not hard

off to bed

[long sundial]

gn

[summer adder]

[long sundial]

i hate it when

[deft niche]

Try

@import url('https://github.com/IdreesInc/Monocraft/releases/download/v3.0/Monocraft-nerd-fonts-patched.ttf');

At the top of your css file

[long sundial]

yea maybe later because csp

[deft niche]

[long sundial]

(i hate csp and cors)

[glass flint]

turn it into base64

[long sundial]

im gonna turn you into base64

that's right YW5ha29qbQ==

[glass flint]

tried to rick roll me

[long sundial]

blud has a filter for that 😭

what if someone made dQw4w9WXcQ.com

no way its not claimed

[glass flint]

¯_(ツ)_/¯

damn

[clear siren]

@long sundial why not just install the file to your system tho

[glass flint]

yeah that’s what i did personally

then just

:root {
        --font-primary: "Fira Code";
}

well monocraft for you

[clear siren]

or monocraft nerd font if you prefer that one

[long sundial]

i have it installed but librewolf doesnt find it lol

[clear siren]

did you restart librewolf

[long sundial]

I had it installed for ages

[clear siren]

oh

[long sundial]

:)

minecraft terminal

shit i cant even screenshot

[glass flint]

manjarno

[long sundial]

thats mint 😭

[glass flint]

ah lol don’t mind me im dumb

[long sundial]

tbh i dont know what manjaro looks like

[clear siren]

I wonder if librewolf is doing something stupid to prevent using system fonts because it allows fingerprinting you

[long sundial]

probably

[glass flint]

nah i use fira code with librewolf just fine

[long sundial]

damn

skill issue then

[glass flint]

=>

i do use fira code as a default font

maybe it’s that?

[long sundial]

i just typoed

it's jover

[clear siren]

[long sundial]

this is cursed af

[sage ledge]

smh if you dont memorize the url then you are amateur

[glass flint]

i remenber it

but even if you do, you can’t do anything against a redirect like that

also it’s not the only rickroll yt code i have blocked

[sage ledge]

in that case

I would listen

good song

[glass flint]

true

[deep bane]

bro does NOT wanna get rick rolled

414 rick rolls blocked

[glass flint]

411

[deep bane]

delete some and make it 404 rick roll not found

[glass flint]

i deleted some that were dead links

although it’s less than 404 because for websites after yt links it blocks the page and script for some reason (i didn’t make that myself)

[deep bane]

what

[glass flint]

it’s actually 310 rick rolls

[deft niche]

Why is this in css development

[deep bane]

⠀

Better Dynamic Code Containers

.codeContainer__1ded4,.shiki-container{
  width:fit-content;
}
.nonMediaAttachmentsContainer_ca7b77 .shiki-container {
  width:initial;
}```

[clear siren]

I also use fit-content and added this [class^=markup_] pre { max-width: 100% !important; } which fixes the lines getting wrapped randomly for some reason under some circumstances

[deep bane]

doesnt seem to happen to me

[clear siren]

ah, if messages are set to inline-block it happens

[deep bane]

why would you have that

[clear siren]

message bubbles

[deep bane]

oh

[clear siren]

yeah discord sets .markup_a7e664 pre { max-width: 90% } in its css

[deep bane]

I made a really nice status snippet @import url('https://raw.githubusercontent.com/im-h/css-snippets/main/Glow-Avatar-Statuses.css');

Supports all shapes/transparency

[lime walrus]

Wow

[clear siren]

I also use filter:drop-shadow() on avatars and servericons :3

[lime walrus]

Nice

[lime walrus]

Can I use it?

[clear siren]

.. well literally all images actually

[deep bane]

?

[clear siren]

I dunno, can you?

[lime walrus]

Your import, this #🎨-theme-development message

[deep bane]

its an import for a reason no?

[clear siren]

or grab the url and drop into online themes

[lime walrus]

Ok

[lime walrus]

😬

[deep bane]

Made the colors a little bit less "bright"

[solid ore]

wats the .nonMediaAttachmentsContainer_ca7b77 part for

[deep bane]

for message.txt

thing

[solid ore]

ohh

i dont notice a difference tbh

[deep bane]

its for if you have a custom color for it

[solid ore]

oh that is

not nice

[edgy sentinel]

rickroll

[deep bane]

Added the personal profile thingy status glow

[sleek trench]

Is there a way to integrate a json script file which works as a theme into Vencord, or do I have to redo the entire theme in CSS?

[clear siren]

you'd have to do it in css

[deft niche]

^

[deep bane]

^

[sleek trench]

...damn.

I actually use the Vendetta mod in my mobile so I was wondering if there is an easy way out

[clear siren]

yeah I kinda figured it would be a vendetta json

[sleek trench]

It's even done by the same dev I think

But they give a pink undertone to the basic white role colour, which I don't have it in the PC one

I'm talking about Catpuccin theme

[deft niche]

Even if it was the same language, the css wouldn't transfer across to pc anyway

Different classes probably

[clear siren]

that's not going to be difficult to change in the css

[sleek trench]

the difference

[clear siren]

if that's all you want that's easy to change

[sleek trench]

The problem is, I don't have a copy of the css, it's imported directly from the github

[clear siren]

.username_d30d99:not([style]) { color: whatever !important; } in quickcss

[sleek trench]

I can download a old release and tweak it

[clear siren]

nah just override it

no need to edit the theme itself when you can just build your own rules on top when needed

[sleek trench]

wait so this only changes the default white role colour to something I want?

[clear siren]

yes

[sleek trench]

....i need to learn more css.

let me try this

[glass flint]

you don’t even need :not([style])

nor the !important

[clear siren]

well not sure if the theme has rules with more specificity or whatever (it doesn't but it doesn't even matter)

[sleek trench]

i can link the github. I use the same colour scheme in my Lunarvim

[glass flint]

yeah sure, it will probably have the exact color

[glass flint]

mmh

[sick cloud]

do i have to type like the color code that i want the default white color role to be?

like #0997e7

n stuff

[clear siren]

yeah

[sick cloud]

cool

so for the username part do i just remove everything before the :not([ thing or just i just replace the placeholder with my username

[clear siren]

no?

do you want a code that only changes your username color specifically

[sick cloud]

uh yeah

[clear siren]

ok best way is if you enable themeattributes plugin, then .messageListItem__6a4fb[data-is-self="true"] .contents_f41bb2 .username_d30d99 { color: pink !important; }

[sick cloud]

can i post ss here?

[solid ore]

yes

[sick cloud]

ok i saw it flash blue for like a second

im defnitely doing smthin wrong

[solid ore]

it works for me

[clear siren]

note that this does not change the color on reply previews or anywhere else but just your message headers

[sick cloud]

alr

[clear siren]

for other places you need other selectors but yeah

[solid ore]

make sure u have this plugin enabled

[sick cloud]

i do

turned it on before i put the code in

[glass flint]

using [class*="username"] will make it apply to most place where your username is

[sick cloud]

uh where would i put that

[glass flint]

well not with that ^

[sick cloud]

so seperately?

or

[glass flint]

no it’s for the other one

[sick cloud]

(i genuinely dont know how this works coz im a dumbass)

[summer adder]

makes sense

[glass flint]

the person that wanted to change everyone’s names color

[clear siren]

using that class just selects all usernames indiscriminately

[solid ore]

u copypasted this?
.messageListItem__6a4fb[data-is-self="true"] .contents_f41bb2 .username_d30d99 { color: pink !important; }

[sick cloud]

yes but changed the color from pink to blue

[solid ore]

send ss of ur code and of ur username in chat on ur screen

[sick cloud]

oh

it works now

[solid ore]

...ok

[sick cloud]

i just re pasted it in

._.

[solid ore]

how can i remove the folder icon transition? e.g. imgs

i tried this

.folder__17546,
.folderIconWrapper__72239 {
  transition: none;
}```

but no effect

[summer adder]

you might not be able to remove its animation as the animation might be coded into it itself

[solid ore]

;-;

[summer adder]

just like how collapsing a channel category works, the code makes it all disappear, so its impossible to make it have a smooth animation for disappearing without making it a plugin

idk thats just my thoughts tho, might also be possible

[solid ore]

i mean, i removed the other folder animation

.wrapper_ed1dea > [id*="folder-items-"] {
  height: fit-content !important;
}```

well not me* it was in one of aoi's snippets

[sleek trench]

thanks a lot for the help :D

[deep bane]

It dont work 😭 css .closedFolderIconWrapper__7321f *{ display:none !important; transition:none !important; position:sticky !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; width:0 !important; height:0 !important; font-size:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; clip:paint !important; background-size:0 !important; background-clip:none !important; background-image:none !important; vertical-align:bottom !important; visibility:hidden !important; }

[pure cairn]

funny

[deep bane]

didnt test for custom statuses

¯_(ツ)_/¯

[pure cairn]

issok, it doesn't bother me

[solid ore]

/* hide inbox whenever u have no notifs */
.recentsIcon__3c4cf:not(:has(.iconBadge_cc5031))
{ 
  display: none;
}```

[deft niche]

Oh that's pretty sick

[deep bane]

screenshot

[solid ore]

send me a fr or smthng so i get a notif

[deep bane]

👍

[solid ore]

is it possible to select an element based on if it has an img from a specific link? smthng like
.activityProfileV2__4de28:has(img alt src="/assets/7231645d01e0b14f58cc.svg")

except that doesnt work for me

[simple kiln]

.activityProfileV2__4de28:has(img[src$="7231645d01e0b14f58cc.svg"])

[solid ore]

thanks!

[solid ore]

wat rule is $= ?

[simple kiln]

suffix match selector.

[solid ore]

ohh

good to know

[deep bane]

🤦‍♂️

i missed so many commas when converting to :is()

[solid ore]

isnt is much more inefficient than just using commas? or is it negligible?

[deep bane]

you use less code ig

[deep bane]

(don't mind the missed commas in this)

[deep bane]

After some thinking (5 Seconds Worth) i've realised this is actually a good feature because it still shows your status

[grand surge]

hi quick question
what's the selector for "comments that pinged me"

[clear siren]

.mentioned__58017

[grand surge]

thank!

[summer adder]

and if you want the mention itself (eg @clear siren) do .mention to customize it

yeah i pinged you nvhhr

what you gonna do

[clear siren]

@summer adder ping you back

[summer adder]

https://tenor.com/view/fade-away-oooooooooooo-aga-emoji-crumble-gif-20008708

[clear siren]

kinda surprised that class has no hash in it

[summer adder]

if it’s supposed to, .mention works fine for me

i doubt it’s cause of themeattributes either

cause for the mention code i made 2ish weeks ago

/**
* @author Madeline#3336
* @description Makes the mention in chat look nicer.
* @name Fancy Mention
*/
:root {
    --mention-color-1: #bf861f;
    --mention-color-2: #dbdee1;
    --animation-color-start-end: rgba(240, 177, 50, 0.255);
    --animation-color-middle: rgba(240, 177, 50, 0.500);
}
.mention {
    border: 1px;
    border-style: solid;
    line-height: 1.5;
    animation: pulsate 2.5s infinite linear;
    background: transparent;
    color: var(--mention-color-2);
}
.mention:hover {
    animation: none;
    background: transparent;
    color: var(--mention-color-1);
}
@keyframes pulsate {
    0% {border-color: transparent}
    25% {border-color: var(--animation-color-start-end);}
    50% {border-color: var(--animation-color-middle);}
    75% {border-color: var(--animation-color-start-end);}
    100% {border-color: transparent}
}

and that works

so idk, maybe it’s just one that doesn’t use a hash

[clear siren]

that css is still so weird to me..

[summer adder]

i used variables for customization shut up

[clear siren]

rgba instead of just rgb, using old color syntax, that very specific alpha value lol

[summer adder]

i just went off the alpha and animation percent

so 25% for alpha would translate to 0.255

[deep bane]

shit up

[summer adder]

shit up

[deep bane]

shit up

[clear siren]

how does that math

[summer adder]

shit up

[clear siren]

it should just be .25

[summer adder]

i don’t even know but hey, it worked

and for variables: i added them for customization so you can customize the ping border yourself easier, but also so i can integrate it in my purple theme with the variables

[clear siren]

and you don't even need the steps in your animations

or the vars for the middle colors

[summer adder]

probably all true, but hey it works

[clear siren]

yeah it's fine but just funny

[summer adder]

just wait until you see the code of my purple theme

go ahead

go look

i wonder how long that convo will be

[pure cairn]

yeah it does, in a weird way

"it's not a bug, it's a feature"

but I like it

[solid ore]

is it bc its formatted

[clear siren]

no but because there's old syntax and useless things

my css is formatted too, just not the way you're used to :D

[solid ore]

:)

[summer adder]

i only format my css because so many fucking people complain

[solid ore]

i love formatting

[summer adder]

i could care so fucking less for formatting, but people get annoying

[clear siren]

you mean you couldn't care less?

[solid ore]

https://tenor.com/view/minor-spelling-mistake-minor-spelling-mistake-i-win-minor-spelling-mistake-i-win-meme-shadow-the-hedgehog-shadow-gif-26138585

[summer adder]

you know what i meant

[deft niche]

Formatting makes code readable and intuitive

Cry about it

[summer adder]

i’ll make all of your code unreadable

[brittle juniper]

i dont format my css ever but prettier does it anyways :>

[summer adder]

i only ever formatted my html because people complain

that and i can only go so far without formatting

for html formatting is better

[brittle juniper]

yea thats why prettier

it always formats when u save a file

[deep bane]

Here's what your code would look like if it was formatted and readable

/**
* @author Madeline#3336
* @description Makes the mention in chat look nicer.
* @name Fancy Mention
*/
:root {
  --mention-color-1: #bf861f;
  --mention-color-2: #dbdee1;
  --animation-color-start-end: rgba(240, 177, 50, 0.255);
  --animation-color-middle: rgba(240, 177, 50, 0.500);
}

.mention {
  border: 1px;
  border-style: solid;
  line-height: 1.5;
  animation: pulsate 2.5s infinite linear;
  background: transparent;
  color: var(--mention-color-2);
}

.mention:hover {
  animation: none;
  background: transparent;
  color: var(--mention-color-1);
}

@keyframes pulsate {
  0% {
    border-color: transparent
  }

  25% {
    border-color: var(--animation-color-start-end);
  }

  50% {
    border-color: var(--animation-color-middle);
  }

  75% {
    border-color: var(--animation-color-start-end);
  }

  100% {
    border-color: transparent
  }
}```

[summer adder]

my codes formatted enough shut up

[deep bane]

shit up

[clear siren]

this is how I would have made @summer adder's code

:root
 { --mention-color: rgb(191 134 31);
   --mention-color-hover: rgb(219 222 225);
   --mention-border: rgb(240 177 50 /.5); }
.mention
 { color: var(--mention-color);
   border: 1px solid;
   line-height: 1.5;
   background: none !important;
   animation: 1.25s linear infinite alternate pulsate; }
.mention:hover
 { color: var(--mention-color-hover);
   animation: none; }
@keyframes pulsate
 { 0%   { border-color: transparent; }
   100% { border-color: var(--mention-border); }}

[deep bane]

uhm akshually rgba is more readable ⠀

[clear siren]

but also legacy syntax

[deep bane]

what

[deep bane]

still more readable ⠀

[summer adder]

why we all rewriting my code

[clear siren]

I dunno

[summer adder]

rewrite my websites next

[summer edge]

new line for opening brackets is weird tho

oh and lack of newline after opening bracket

[clear siren]

I've always done it that way and it just looks best to me

[summer edge]

in css?

[clear siren]

yeah

css is mostly all I know lol

[summer edge]

if i styled your code my way it would look like this

:root {
    --mention-color: rgb(191 134 31);
    --mention-color-hover: rgb(219 222 225);
    --mention-border: rgb(240 177 50 /0.5);
}

.mention {
    color: var(--mention-color);
    border: 1px solid;
    line-height: 1.5;
    background: none !important;
    animation: 1.25s linear infinite alternate pulsate;
}

.mention:hover {
    color: var(--mention-color-hover);
    animation: none;
}

@keyframes pulsate {
    0% {
        border-color: transparent;
    }
    100% {
        border-color: var(--mention-border);
    }
}

which i think is the "normal" way of doing it

[clear siren]

yeah but so many more lines

and to me when I scroll a css file I just see the selectors and the rulesets for the selectors more easily when they're formatted the way I do but that is of course just me being used to it

[summer edge]

in the end it doesnt really matter

css isnt real 👀

its a conspiracy by big browser

[summer adder]

you're not real

its a conspiracy by me

[teal cave]

whos complaining about formtting, loos fine

if you can't read bc not the format you like then you will not survive

[summer adder]

no because i typically

* {filter: saturate(0)contrast(0)invert(1); opacity:50;color:red;background:red;}```

instead of

* {
filter:saturate(0)contrast(0)invert(1);
opacity:50;
color:red;
background:red;
}```

[deep bane]

@summer adder Is css your passion

[summer adder]

css is my passion

[deep bane]

Also your https://github.com/MadelineMaid/themes/blob/main/twitterverified.css has old colors

i made/found better ones

[deep bane]

#🎨-theme-development message

[deep bane]

O h g o d

[oak plover]

[deep bane]

real

[summer adder]

haha

keep looking through my code

[deep bane]

Here's what your code would look like if it was formatted and readable

/**
* @author Madeline#3336
* @name Bloatware Removal
* @description Removes useless discord features. YOU WILL NEED THEMEATTRIBUTES PLUGIN!
*/
.avatarDecoration__14b3c,
.avatarDecoration_ae35e3,
.profileEffects_fd33f6,
.profilePanel__12596,
[aria-label="Show User Profile"],
[aria-label="Hide User Profile"],
.welcomeCTA__927ef,
.recentsIcon__3c4cf,
[aria-label="Help"],
.selectionGroup__36139,
.presets__14d08,
.header_a6f6dd,
.themeTitle__23d07,
.divider_a2339a.marginTop20_d88ee7,
[aria-label="Clips"],
[aria-label="Family Center"],
[aria-label="Merch"] {
  display: none;
}

.roleIcon__59ca1.roleIcon_d491aa.clickable__08c77,
[aria-label="Deafen"],
[data-tab-id="Hypesquad Online"],
[data-tab-id="BLOCKED"],
[data-list-item-id="private-channels-uid_18___nitro"] {
  display: none !important;
}```

[oak plover]

Is this just how it exports

[deep bane]

what

[oak plover]

The other thing

Like is that some minified thing or is that actually the format

[deep bane]

its formatted

readable

what

[oak plover]

Not your thing the other thing

[clear siren]

also in purple theme...

@summer adder please

[deft niche]

WHAT IS THAT DUDE

I'm gonna PERISH

[deep bane]

why do you have important in your var

[deft niche]

x 9349423798234634287623478

[oak plover]

[clear siren]

there's like 200 lines of repetition lol

[oak plover]

ai be like

[oak plover]

button written 30 times when it could be written once

[clear siren]

yeah looks like copy selector from devtools and paste in the same ruleset for each

[oak plover]

Like they all have the same button class and they’re all styled the exact same what

[summer adder]

no :3

[summer adder]

other css compatibility

[clear siren]

[deft niche]

Accurate version

[oak plover]

This is like twitter interaction bait for theme devs

[deep bane]

is there a way to combine this into only 1 line/string

.class1.class3.class4.class5
.class2.class3.class4.class5 {
  animation: explode;
}

[deft niche]

[deep bane]

make it 1 selector

[clear siren]

depends on what you're actually doing

[deep bane]

e.g.:

.class1,.class2 :yea(.class3.class4.class5) {
animation:explode;
}

[clear siren]

that would be completely different

[deep bane]

im waiting for you to show me

[clear siren]

no there is no way to reduce that in any way without changing what it may select

there is :is() that can be used in selectors in some cases but not for that particular pseudocode

[deep bane]

i was thinking of the reverse of :is()

[clear siren]

well the reverse of is is literally :not()

[deep bane]

no

[summer edge]

:isn't()

[deep bane]

different first class same other classes

[clear siren]

yeah no can do

[summer adder]

[solid ore]

can u not do .class1:not(.class2):is(.class3)

or does css not work like taht

[clear siren]

well yeah you can, and you can use :is() or :where() too but what's the point

it just makes a mess for no benefit

[deft niche]

[solid ore]

its was they asked for idk ¯_(ツ)_/¯

[deep bane]

that's just doing .class1.class3.class4.class5,.class2.class3.class4.class5 with extra steps

[solid ore]

yea isnt that wat u wanted w this quesiton

also wat is :where

[clear siren]

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

[deep bane]

no

[solid ore]

oh mb

[solid ore]

ty

[clear siren]

also https://web.dev/articles/css-is-and-where

basically they do the same thing but :where doesn't increase the specificity (priority) of the selector

might be useful in some super specific case but mostly not

[deep bane]

aaaaaaaaaaaaaaa

@summer adder

[clear siren]

gotta love those color alpha values

[deep bane]

this code is way too messy for me to optimize with :is() selectors

[summer adder]

jokes on you i’m on mobile so i can’t see it

(not implementing it)

[solid ore]

somewhat useful snippet for me

/* highlight message container on hover */
[data-list-item-id^="chat-messages"]:hover
{
  background-color: rgba(255, 255, 255, 0.05);
}```

[dusty robin]

Hello do you know how I could write a code to remove this unnecessary badge on my text bar

[clear siren]

[aria-label="Send a gift"] {display:none}

[summer adder]

[aria-label=“Send a gift”] {
  display:none;
}```

or if you wanna make it shorter

[aria-label^=“Send a”] {
  display:none;
}```

[solid ore]

how can i make this more like the current server indicator? (apart from the color)

/* current channel bar */
[aria-label="Channels"] > [class^=containerDefault_][class*=selected_] [class^=link__]
{
  border-left: solid var(--channel-icon);
  border-radius: 0px;
}```

id have to do smthng completely different wouldnt i

[clear siren]

yeah remove border and create a ::before element

[solid ore]

/* current channel bar */
[aria-label="Channels"] > [class^=containerDefault_][class*=selected_]
{
  background-color: var(--bg-overlay-selected,var(--background-modifier-selected));
}
[aria-label="Channels"] > [class^=containerDefault_][class*=selected_] [class^=link__]
{
  background: none;
}
[aria-label="Channels"] > [class^=containerDefault_][class*=selected_] [class^=link__]::before
{
  background-color: var(--channel-icon);
  width: 4px;
  border-radius: 0 4px 4px 0;
  margin-left: -8px;
}```

i think thats not atrocious

[deep bane]

@import url('https://raw.githubusercontent.com/D3SOX/complementary-discord-theme/master/hide-nitro-upselling.theme.css');

[bleak gust]

when will everyone learn [aria-label] is translated

[deep bane]

⠀

[bleak gust]

if you change your discord language your custom css breaks

[deep bane]

we all know that bro

[bleak gust]

[deep bane]

not*

[bleak gust]

it is

[deep bane]

"when will everyone learn [aria-label] is not translated"

[bleak gust]

not everything gets translated

the nitro gift button definitely does though

[deep bane]

what's your discord language then

[bleak gust]

english (uk)

it still mildly bothers me
yes I know vencord itself is not translated :/

[deep bane]

we do not care.

[bleak gust]

👍

anyway

a few weeks ago I noticed my

.avatar_f8541f {
    position: absolute;
// ...
}

was not doing the absolute thing

this is what i get

it used to be absolute to the full viewport

[deft niche]

We know, were just all very racist and only want css to be used by english people

[bleak gust]

https://cdn.discordapp.com/attachments/1166785409938903211/1180863306995601408/caption-2-2.gif

[solid ore]

my css is for me, if others use it too then cool but im not gonna cater to them

[bleak gust]

isnt that how open source works in general

(most of it)

[solid ore]

yea, so im gonna use aria if i want to

[bleak gust]

you can have that opinion

i mean i cant admit i have anything better

[deep bane]

most open source projects are catered for the general public

[bleak gust]

mine.... abuses the svgs

i have a fun question

how long is everyone's quick css file

[solid ore]

372 lines

[summer edge]

105

[bleak gust]

816 (including empty lines in between and stuff I stole from #🎨-css-snippets)

[summer adder]

yeah? we know?

[bleak gust]

okay, is there a Certified Official Real Guide to Not having it break

[summer adder]

its called code good

[bleak gust]

inb4 no its a thing I can complain about and be told that no matter how much I complain that it is technically unreliable at the end of the day you are still shoving random bullshit into an app that wasn't built to be themed to death

[summer adder]

id have to check later as my qcss is located on github rn and githubs blocked on my current wifi

[bleak gust]

CSS is not my thing

[solid ore]

wats ur point

[bleak gust]

githubs blocked on my current wifi
what kind of corporate nightmare is blocking github but not discord

[summer adder]

school

[bleak gust]

lmfao wtf

[summer adder]

welcome to life

they have github blocked