#🎨-theme-development

1 messages · Page 36 of 1

bleak gust
#

like listen along

solid ore
#

as a connection? or just rich presence

bleak gust
#

i have never seen amazon music rich presence

#

and probably never will

solid ore
bleak gust
#

because Spotify is special and actually tells server what your playback state is and other related stuff

pure cairn
solid ore
#

oh

bleak gust
#

yes its still an experiment

bleak gust
solid ore
#

then thats a failure on the other music streaming platforms for not doing the same

pure cairn
#

Discord be like
Hey spotify, make him listen to brainrot music

bleak gust
solid ore
#

whats casting

bleak gust
#

lc.g what is spotify connect

cerulean torrentBOT
bleak gust
#

guh

solid ore
#

oh yeah ik wat it is

bleak gust
#

yes

solid ore
#

never heard it called casting tho

bleak gust
#

spotify invented their own protocol for that

solid ore
#

pretty cool tbh

bleak gust
#

i am using a term more associated with google ecosystem

bleak gust
#

vomit reaction is acceptable tbh

solid ore
bleak gust
#

they probably support like 4 different protocols to play on a speaker/tv/other device

#

spotify connect (obvious)
google cast
apple airplay
bluetooth (for less smart stuff)

#

idk if bluetooth can be counted here

copper flame
#

last 3 are handled by the OS they just integrate with it correctly

#

1st is so they can limit number of playing clients per account

muted knoll
#

whats ur role bg colour snippet?

viscid tiger
# muted knoll whats ur role bg colour snippet? 
.role_f9575e {
  transform: translate(0);
  overflow: hidden;
  border: 0;

  --transparency: .4;
  /*Change Background Opacity*/
  border-radius: 5px;
  /*Change Roundness of Roles*/
}
.role_f9575e .roleRemoveIcon_f9575e {
  margin: 0;
  left: unset;
  transform: translate(16%, -48%);
}
.role_f9575e .roleRemoveButton_f9575e {
  position: static;
}
.role_f9575e .roleCircle_f9575e:after {
  content: '';
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: var(--transparency);
}
/* --------------- Separated the code due to position difference */
.role_e4010c {
  transform: translate(0);
  overflow: hidden;
  border: 0;

  --transparency: .4;
  border-radius: 5px;
}
.role_e4010c .roleRemoveIcon_e4010c {
  margin: 0;
  left: unset;
  transform: translate(50%,-50%);
}
.role_e4010c .roleRemoveButton_e4010c {
  position: static;
}
.role_e4010c .roleCircle_a26d7b:after {
  content: '';
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: var(--transparency);
}```
muted knoll
solid ore
#

icon (pic 1) or header (pic 2) when buttons arent present?
for reference, pic 3 is when the buttons are present
mainly asking @pure cairn since they were talking w me abt this but open to hearing what others think too

image.png image.png image.png
worldly moss
#

youre removing pretty much the usability

solid ore
#

the buttons are only hidden when they are disabled

#

default when u dont have spotify open:

image.png
pure cairn
solid ore
#

agreed, thanks!

worldly moss
#

the first one looks better

solid ore
#

👍 thanks :)

hazy frigate
#

anyone got something to make this bar shift to the left/right?

image.png
hazy frigate
worldly moss
# 
[class*=barBase_] {
  width: fit-content;
  margin-left: auto;
}
#

this should work

iron smelt
viscid tiger
worldly moss
worldly moss
viscid tiger
#

but here's the updated class

.barBase_cf58b5 {
  width: fit-content;
  margin-left: auto;
}```
worldly moss
#

(probably)

viscid tiger
#

meanwhile ^ will prob do less damage only if barbase is at the start of the class element of course

hazy frigate
worldly moss
#

my bad its just one _

worldly moss
hazy frigate
#

now it works, thanks

viscid tiger
vestal field
#

barbase seems like a pretty uncommon class

clear siren
#

got the visual refresh new theme on stable web (vesktop)

#

had to fix 2 lines (one background and one border)

#

expected more breakage and stuff but seems ok

#

paddings/margins are a bit off

vestal field
#

ughhh

#

i dont have it yet

clear siren
#

I wonder how much the theme will change or if/when it is pushed to everyone

echo frost
#

it's super scuffed though
the unread icon shows from under the profile panel thing
the inbox icon is fucked up

and the theme is just meh even where it seems correct
built in darker mode is cool though, but doesn't really matter for me since it's already darker on mobile which is only place i'm on discord enough for my only slightly darker palette on vencord to be necessary

2024-07-23_00.png 2024-07-23_00.png
clear siren
#

unread icon not showing under userpanel for me

#

and inbox icon is fine

#

oh I have no badge on it

#

but yeah it's scuffed in many ways

echo frost
#

d

#

i just had an idea for only showing edited things while hovered, but i can't get it to work right
why isn't the transition working?

[id^=chat-messages-] .messagelogger-edited {
  overflow: hidden;
  transition: height 0.5s ease;
}
[id^=chat-messages-]:not(:hover) .messagelogger-edited {
  height: 0px;
}```
echo frost
plain kelp
#

You can't transition between zero and not set

echo frost
#

oh

#

height: 100% isn't working either :(

plain kelp
#

Because parent element doesn't have a set height either

echo frost
#

also even setting the height manually doesn't work very well bc like it moves out of the way and then you're not hovering it lmao

#

oh

#

ok well i think this is a failed experiment

#

sad

grand surge
#

yall, i made this weird thingy that supports transparent background

#

basically a background for text messages

clear siren
grand surge
#

its a cheap hack ngl

#

background-color:rgba(0,0,0,0);

margin: 0px 10px 0px 10px;
box-shadow:inset 1000px 1000px 2px 1px rgba(0, 0, 0, .45);
border-radius: 4px;

clear siren
#

this is what I use

[class*=cozyMessage_]
{ display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  background: linear-gradient(oklch(.35 0 0 /.2), oklch(0 0 0 /.2));
  border-radius: 3px 8px 8px;
  backdrop-filter: blur(20px);
  box-shadow: inset -3px -5px 6px -4px oklch(0 0 0 /.5), inset 1px 2px 4px -1px oklch(1 0 0 /.1), 7px 7px 7px -5px oklch(0 0 0 /.3); }
grand surge
plain kelp
#

Personally not a big fan of background on messages, it changes the look-and-feel too much compared to vanilla

#

I just keep it it opaque enough for decent contrast

clear siren
#

I've gotten so used to messagebubbles that normal discord looks just weird lol

grand surge
clear siren
#

and that looks really weird to me too

grand surge
#

nvm

#

he excludes the avatar

#

the problem is my code also affects the reply

image.png
clear siren
#

what I also did is set the replypreview below the header

image.png
#

but that css is pretty jank ngl

#

this is a warcrime

image.png
grand surge
#

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');
*{font-family: "Unbounded" !important;
font-weight: 450;
}

.modeSelected_d8bfb3 .link_d8bfb3 {
/Your code should go under this comment/
background-color: rgba(0, 0, 0, 0.5);
}

.modeSelected_d8bfb3 .link_d8bfb3:hover{
/Your code should go under this comment/
background-color: rgba(0, 0, 0, 0.5);

}
.containerDefault_f6f816 .link_d8bfb3:hover {
/Your code should go under this comment/
box-shadow: 0px 0px 3px rgba(255,255,255,0.33);
transition:all 0.2s ;
background-color: rgba(0, 0, 0, 0.5);
}
.containerDefault_f6f816 .link_d8bfb3{
transition:all 0.1s ;
}

.message_d5deea {
/Your code should go under this comment/

background-color:rgba(0,0,0,0);

margin: 0px 10px 0px 10px;
box-shadow:inset 1000px 1000px 2px 1px rgba(0, 0, 0, .45);
border-radius: 4px;

}

clear siren
grand surge
#

my code is a bit broke cause it breaks the reply overlay color

#

i literally write my code in notepad lmao

clear siren
#

I used notepad++ before, nowadays I use vscode

grand surge
#

tbh i feel like discord should change their text font

#

its too thin

clear siren
#

you could also write your css in the quickcss to get syntax highlighting and other features (vencord toolbox plugin gives you quick access to it via toobarbutton)

grand surge
#

this looks kinda good

image.png
#

the shadow appears when you hover

pure cairn
#

is [class^=nameAndDecorators_] [class^=name_] [class^=username_] > [class^=name_] a good replacement for .name_a31c43 ?

#

or is the > not even needed since there's only 1 class called name_ which is also a child of username_ ?

plain kelp
#

> is better for performance, at least

#

I think

pure cairn
#

ty

plain kelp
#

Or if nothing else, for clarity

grand surge
#

how can i effectively remove toolbar icons like these
i removed threads and help button but if i wanna remove notifs, it just completely hides all the toolbar icons

image.png
#

whats the selector for these

# 
[class^="anchor_af404b"]
{
  content-visibility: hidden;
}
[class^="icon_f542fc iconWrapper_fc4f04 clickable_fc4f04"]
{
  content-visibility: hidden;
}

what im doing rn

#

used aria label

#

i hope these doesnt make performance go rocketcrash

plain kelp
#

Uh, what's up with those selectors

grand surge
#

didnt know how to pick properly so i just looked thru devtools and got the classes

plain kelp
#

Why are you using ^= but including the hash

grand surge
#

^ is just something left before

plain kelp
#

If you want to match exact classes, use class selectors

#

If you want to fuzzy-match discord's bullshit classes, you do not include the hash

grand surge
#

ohk

#

ty

solid ore
viscid tiger
#

But if they’re using English then aria labels will work

grand surge
#

i am using english anladim

solid ore
viscid tiger
#

Correct which means they’ll have to grab the aria labels on their own if their using a different language

#

Since they’re language specific, most people just uses classes.

pure cairn
grand surge
#

my embd titles etc are broken

image.png image.png
# 
[class^="anchor_af404b"]
{
  content-visibility: hidden;
}
[class*="biteSize_cb78f1"]
{
  content-visibility: hidden;
}
[class="icon_f542fc iconWrapper_fc4f04 clickable_fc4f04"]
{
  content-visibility: hidden;
}
#

would these cause that

#

yup mb it was the anchor

#

autistic moment

solid ore
solid ore
tepid fractal
#

What experiment, if there is, do I have to tick on to see the new bottom left profile redesign? Honma_Think Need to edit a thing and want to make sure it works in the new thing.

deft niche
#

Right now i'm having a css issue with this plugin that causes channel emojis to be squished when the channel name is long or there are other elements, it would be great if someone else could take a look since i absolutely suck at css

image.png
clear siren
#

hmm

#

the issue is that the container, .linkTop_d8bfb3, is display:flex

#

.vc-channelemojis-emoji { min-width: 27px;}

#

that forces it to not shrink

#

@deft niche

#

something's not quite right with the plugin though all I see are speechbubbles for every channel

viscid tiger
#

and i was unaware what language their discord could be using.

clear siren
deft niche
covert canopy
#

I've been trying to fuck around with elements and I can tell y'all one thing for sure. I hate the number 50%

clear siren
wind sonnet
#

anyone know how to revert this so its on the right side of the typebar thing

wwSva0v.png
viscid tiger
clear siren
#

I assume what they want is to undo what the theme did and put it back below input but not sure

vestal field
#

does anyone know what a good option for setting up a build tool for a theme is?
basically i just want to split my theme into components and hot reload it into my quickcss or theme folder during development. i don't really need sass/scss compilation but i assume people who use a build tool use it for that purpose.
is vite overkill? i'm not really familiar with js ecosystem stuff.

vestal field
#

ok nvm i figured something out

echo frost
# grand surge how can i effectively remove toolbar icons like these i removed threads and help...

The best way would probably be svg selectors, but using aria labels is a bit easier. The only drawback of aria labels is you have to change it for whatever language you use (not ideal if you're sharing it, but perfectly fine just for yourself)

(the searchbar, and inbox button don't have aria labels, but they have good class names that are specific to them which works well) (image attached)
Aria-label example:

[class*=toolbar_]>:is(
  [aria-label="Threads"], 
  [aria-label="Notification Settings"],
  [aria-label="Pinned Messages"],
  [aria-label="Hide Member List"],
  [aria-label="Show Member List"],
  [class^=search_],
  [class^=recentsIcon_],
  .vc-toolbox-btn
) {
  display: none;
}

using svg selectors (image attached):
the d^= means starts with. You can probably get away with using shorter d^='s
I also put some commented out ways to

[class*=toolbar_]>div:has(svg>path:is(
    [d^="M12 2.81a1 1 0 0 1 0-1.41l.36-.36a1"], /* Threads */
    [d^="M1.3 21.3a1 1 0 1 0 1.4 1.4l20-20a1"], /* Notification */
    [d^="M19.38 11.38a3 3 0 0 0 4.24 0l.03"], /* Pins */
    [d^="M14.5 8a3 3 0 1 0-2.7-4.3c-.2.4"] /* Hide/Show Members List */
    /* :not([class*=selected_])>svg>[d^="M14.5 8a3 3 0 1 0-2.7-4.3c-.2.4"] /* Show Only */
    /* [class*=selected_]>svg>[d^="M14.5 8a3 3 0 1 0-2.7-4.3c-.2.4"] /* Hide Only */
  )
) {
  display: none;
}```

<https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>
<https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors#combinators>
<https://developer.mozilla.org/en-US/docs/Web/CSS/:is>
<https://developer.mozilla.org/en-US/docs/Web/CSS/:has>
2024-07-23_15.png 2024-07-23_16.png
echo frost
iron smelt
echo frost
#

oh yeah it is
still a bit unclear what they want though

wind sonnet
wind sonnet
#

anyway to override it?

iron smelt
wind sonnet
#

i have installed via the themes not the QuickCSS using @import url()

wind sonnet
iron smelt
wind sonnet
#

i copy pasted the css into QuickCSS so i can modify it

#

but now it looks like this

#

nvm fixed

grand surge
#

could someone give me this theme of they have it?

Discord_Crrz12tkR7.png
wind sonnet
#

@import url("https://d3sox.github.io/complementary-discord-theme/hide-nitro-upselling.theme.css");

anyone know the author for this?

v2oUpVh.png
kind temple
#

hi

#

i have a cool theme

solid ore
wind sonnet
echo frost
pure cairn
#

why is the top left corner in a different color omfg

image.png
clear siren
#

time to open up devtools and find out

pure cairn
#

I legit cannot select it

#

either I select the entire #app-mount or nothing

clear siren
#

maybe it's appmount that has a bg that's the lighter grey, and your serverbar has a margin that exposes it

#

ideally just make your serverbar align with the top edge and you're set

echo frost
#

is that the new theme

pure cairn
#

no it's Couve

#

well, my edited version of it

echo frost
#

oh

#

why are you looking at the server bar thing?
this is clearly gamebreaking
fix it

2024-07-24_01.png
pure cairn
#

not the top left corner of the server screen

echo frost
#

(i'm making a joke)

pure cairn
#

no, you have a point

echo frost
#

they are actually weird though
idk why that would happen

#

it's like there's an element under there or something

pure cairn
#

bad anti-aliasing on my screen perchance

echo frost
#

but it pokes out

#

and is different ccolor

pure cairn
#

found the issue

#

it was a -35px margin-top instead of a -40 one

pure cairn
echo frost
echo frost
pure cairn
echo frost
pure cairn
#

I checked what that pseudoelement was and I deleted it

echo frost
#

oh

pure cairn
#

all it did was adding the few pixels you saw

#

I didn't even know about its existence until the moment you noticed them LOL

echo frost
#

could it be for tab stuff or something?
ik discord has weird stuff for tabbing or maybe speech reader accessibility stuff?

pure cairn
#

no, it was a pseudoelement added by the theme I'm using

echo frost
#

maybe it would be best to do visibility:none

#

oh

pure cairn
#

not even stock discord

#

so I have no idea of why it was there

covert canopy
#

holy fuck css animations are smooth

clear siren
#

as they should be assuming you've got hardware acceleration on, modern browsers composite the drawing from independent layers your gpu draws and even a shitty gpu shouldn't break a sweat unless your animation causes reflows of the content

pure cairn
#

I understood 1/10 of what you just said

solid ore
#

is there a way to select an element only when it has no children?

plain kelp
#

:not(:has(*)) I guess?

clear siren
solid ore
plain kelp
#

Yeah that's better

clear siren
#

no wait

#

it is not empty if there is text in it

solid ore
#

oh

solid ore
clear siren
#

nvm

barren jewel
#

has anyone made a snip to remove this annoying gray overlay that appears when you hover on gifs now

image.png
deft niche
clear siren
solid ore
deft niche
clear siren
#

I was jsut about to post the same except display:none

barren jewel
clear siren
#

I did this

#gif-picker-tab-panel [class^=result_]::after
 { display: none; }
solid ore
clear siren
#

don't see it doing anything else really except yours doesn't hide the overlay on :focus

solid ore
#

ah true, i j saw it was still there on unhovered gifs and decided it must do smthng

fossil adder
worldly moss
fossil adder
#

Nvm. husk

solid ore
#

before:

image.png
#

after:

image.png
fossil adder
solid ore
#

idk it just came up when i logged in one time lol

fossil adder
#

And you nuked it, based.

solid ore
#

idk if this would affect other popups, but i tried to minimise the chances of that

[class^=focusLock_][role=dialog] > [class^=root_][style="opacity: 1; transform: scale(1);"]:has(> [class^=content_] > [class^=shinyButton_]) {
    background: var(--background-primary);
    > button[class^=closeButton_] {
        opacity: 1;
        > [class^=contents_] {
            height: 24px;
            zoom: 112.5%;
        }
    }
    > svg,
    > [class^=modalTopPill][class*=freeTrial] {
        display: none;
    }
    > [class^=content_]:has(> [class^=shinyButton_]) {
        > h2[class^=defaultColor_][class*=subHeader_] > a,
        > [class]:not(h2[class^=defaultColor_][class*=subHeader_]) {
            display: none;
        }
        > h2[class^=defaultColor_][class*=subHeader_] {
            visibility: hidden;
            display: flex;
            align-items: center;
            &::after {
                visibility: visible !important;
                content: "There was previously a Nitro advertisement here. Move along.";
                position: absolute;
                top: 42.5%;
            }
        }
    }
}
pure cairn
supple lodge
clear siren
#

did you put it in quickcss, can you show a screenshot of it

supple lodge
#

ooh didn't know it was in quickcss that I had to put it in
Now it works thanks

#

Also do you have one for the blur effect on the gif categories when hovered?

YBBJulk.png
plain kelp
#

Where else would you put it

supple lodge
plain kelp
#

Right

#

That'd do exactly the same yeah

supple lodge
clear siren
supple lodge
burnt widget
solid ore
burnt widget
#

Children can be either element nodes or text (including whitespace)

covert canopy
#

Not human children fortunately

solid ore
#

yes, but i was looking for soemthing to select an element which may have text, but no child elements

deft niche
#

Are there any snippets that make discord more usable on smaller widths? (half screen, etc)

#

I remember there was something like that but i can't find it now

plain kelp
#

:root { transform: scale(0.25) } 💩

clear siren
#

there are snippets that can hide server/channel/memberlist

#

well memberlist can be hidden from toolbarbutton too

#

but it can be resized and hovered and shit

#

it really depends on what you want it to be like

pure cairn
#

I remember there was a snippet from Vee for the chatbar buttons

clear siren
#

I dunno about vee's snippet but here's one

.expression-picker-chat-input-button:not(:has([class*=emojiButton_]))
 { display: none; }
.buttons_d0696b:has([aria-expanded="true"]) .expression-picker-chat-input-button
 { display: flex; }
#

only shows emoji button but when clicked it shows all buttons

pure cairn
echo frost
#

and they don't seem to be active anymore

clear siren
pure cairn
#

Does textreplacer work when it comes to making codeblocks?

#

Because istg adding more ` with my keyboard is slow

lost plume
#

why would it not

pure cairn
#

I don't know, I have honestly never used it

clear siren
#

should work just fine

#

discord has this button popup when you select text which allows you to add code markdown but discord being discord of course it doesn't work for multiple lines

pure cairn
#

It does?

#

But it only puts 2 `, one at the top and bottom

clear siren
#

yeah

pure cairn
#

Wdym it doesn't work for multiple lines?

clear siren
#

asdasd asdadas asdads

#

well it does that

#

instead of

asdasd
asdadsad
asddasd```
pure cairn
#

Seems to be working fine

#

It would've worked the same even if it was just one line

clear siren
#

well yes

#

still I would like it to be smarter

pure cairn
clear siren
#

inline code vs code block

pure cairn
#

What does `` even do?
test

#

Nothing different from a single `

#

Had it already been requested as plugin? I don't remember

clear siren
#

don't think so

#

I mean with textreplace I could make that happen

pure cairn
#

Yeah

#

But only in the output

plain kelp
clear siren
#

yeah also regex hard

pure cairn
#

So if the markdown somehow messes up your code in the input box it's kinda weird to see

pure cairn
pure cairn
#

idk, less bother I guess

image.png
#

update, it doesn't work guy

#

but it's fixed now

pure cairn
#

I will learn regex just for this

#

or die trying

lost plume
#

regex is shrimple really

pure cairn
#

meh

lost plume
#

yeh

echo frost
#

this carried me so hard

solid ore
#

has anyone made a snippet to make the spotify player and activities look like the android 13 player (image)? asking just in case before i dedicate some time to trying it out

Screenshot_20240724-202344_1.png
#

from ctrl+f i couldnt find anything

vestal field
solid ore
#

nice, and yeah i wanna make one as similiar as possible

pure cairn
pure cairn
clear siren
#

chatgpt is also decent at regex just saying

#

I have yet to try the new model at css

#

I did use the old model for a bit of regex and I've also used it to generate svg

native topaz
#

it can generate svgs? i thought it would be bad at that for some inexpliccable reason

plain kelp
#

It can probably scrounge up some mostly-intact svgs from its memory banks

native topaz
#

i heard some people saying 4o was better since it was faster and usually more concise but i dont use it at all

#

or very rarely

native topaz
plain kelp
#

But generating them from scratch? I highly doubt it would be better at svgs than ascii art

supple lodge
echo frost
#

how can I invert the caret-color?

2024-07-25_17.png
worldly moss
#

Can I not apply transitions on widths?

.barFill_c7a159 {
    transition: width 1s linear;
}

changes basically nothing

0E4QhAR.png
#

oh 1s was just too much apparently

echo frost
#

also if you're trying to transition from unset to like 100px or something it doesn't work (definitely has never happened to me. i'm a pro css dev that knows everything)

brittle juniper
solid ore
clear siren
brittle juniper
teal cave
clear siren
#

I think it's just 2 layers on top with the same radius, bottom layer has bright bg and the fact that both have an antialiased edge, the bottom shines through

teal cave
#

ye, I assume it's a rounding error bc for me it disappears when changing the zoom

#

not this one in particular but other scenarios

valid heron
grand surge
bleak gust
copper flame
bleak gust
gilded cloak
clear siren
#

I mean if what I described is what occurred here everything is technically working exactly as expected

brittle juniper
thick hill
# brittle juniper good idea

there's also a snippet I came across at some point that changes the user panel thing a bit, could be an alternative way to tackle it without completely getting rid of the name and status display

image.png
bleak gust
thick hill
#

the theme I'm using and the snippet are tailored for roundedness, but it can be easily adapted to suit a more squared design. Just figured I'd toss the idea out

#

I'm just weirdly attached to the name and status display being not squashed down to nothing or removed 🤣

bleak gust
brittle juniper
#

i think this is an improvement

image.png
supple lodge
brittle juniper
#

btw thats a rendering error

#

something something backdrop filter image element

supple lodge
thick hill
#

sheesh, should have just pasted that into a new file and uploaded the file instead 😅

thick hill
supple lodge
pure cairn
thick hill
#

I think so, might need the grid-template-rows: and grid-template-columns: bits too. Though I'm not entirely sure, I stumbled on to that snippet elsewhere and have only just started dipping my toes into css

vestal field
viscid tiger
#

look at this minimal quests snippet i made, when not hovered and the quest is active, it'll have a box shadow around the box.

#

and yes when the progress hits 100% it'll light up green.

viscid tiger
pure cairn
#

Looks cool

viscid tiger
#

i saw an experiment which will basically ruin this entire snippet by moving it to the discovery tab

iron smelt
viscid tiger
#

lets just hope they don't go forward with it honestly

iron smelt
pure cairn
# 
/* Icons on Hover */
[class^=flex_]:has([role=switch]) 
  { opacity: 0%;
    transition: 0.2s ease-in-out;
    display: grid;
    grid-template-columns: 1fr 1fr; }
[class^=flex_]:has([role=switch]):hover 
  { opacity: 100%; }
[aria-label="User area"] .panel_bf1a22.activityPanel_a4d4d9:has([aria-label^="Stream"]) 
  { z-index: 1; }
.panels_a4d4d9 button[aria-label^="Stream"] 
  { display: none; }
.panels_a4d4d9:hover button[aria-label^="Stream"] 
  { display: initial; }```
image.png
#

bruh

echo frost
#

i am trying to fix a bug in dark reader, so maybe if there isn't one normally, there is one in dark reader

pure cairn
#

Maybe a calc instead of currentColor

echo frost
#

the best i came up with was color-mix()

#

how can i do calc?

#

with currentcolor

pure cairn
#

I don't remember if it can be used with currentColor as well

#

relative color, definitely

echo frost
#

I don't seem to be able to use it with currentColor
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

MDN Web Docs
Using relative colors - CSS: Cascading Style Sheets | MDN

The CSS colors module defines relative color syntax, which allows a CSS value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.

echo frost
#

ok so filter: invert() works on caret-color if it's inverted in the parent element of where caret-color is defined, but I can't really do that because then it messes up stuff

echo frost
mortal mantle
echo frost
echo frost
#

Is there a less scuffed way of doing this where I don't have to repeat the :not(:hover, :focus-within)?

[class^=sidebar_]:has([class*=avatarWrapper_]) {
  transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);

  [class*=guilds_]:not(:hover, :focus-within)~
  [class^=base_] &:not(:hover, :focus-within) {
    width: 0;
  }
}```
[#1263683765566177301 message](/guild/1015060230222131221/thread/1263683765566177301/p/1263697870029328465/#msg-1266695645289517107)
solid ore
clear siren
#

no wait I misread that

#

brain processed that "~" as an "," nvm

#

yeah I dunno looks pretty optimal tbh

brittle juniper
brittle juniper
clear siren
#

tom is css pro he don't need comments

brittle juniper
#

hii nvhhr

clear siren
#

hi :3

solid ore
#

everything ik abt css is from this channel tbh

clear siren
#

only half joking tbh

mortal mantle
solid ore
#

very simple fix but if anyone wants it:

[class^=userPanelOuter_] > [class^=userPanelInner_] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
echo frost
#

what does that fix?

echo frost
#

seems to be in dms?

solid ore
#

if u dm someone and have the user panel option on

echo frost
#

is it only on nitro profiles?

solid ore
#

yeah

echo frost
#

oh wtf

pure cairn
#

sorry

shut dragon
#

I designed a theme with the clearvision out of the box editor, made it nice and pink, and for me it looks like in the first picture. but when I sent it to someone else, it looked like in the second picture, when it's the same exact theme but hovering a message makes it black like that, and I don't know why...
I uploaded the theme too

image.png image.png 📎 help.theme.css
echo frost
#

it seems to work for me?

shut dragon
echo frost
#

yeah but what is the image?>

#

they're like super cropped and idk when it is

shut dragon
#

like this

image.png
#

and it's not dark grey like that for me

echo frost
#

does she have another theme that could be conflicting?

#

that's the most likely cause

shut dragon
#

it's the only theme, we just reinstalled vencord

#

i helped her choose the colours on the BD editor of clearvision, she downloaded it, enabled it and it did that hover thing

#

and idk why

neat thunder
grand surge
#

When I change the Discord language setting from English to Japanese, the content of “aria-label” is set to Japanese.
Do not use “aria-label” in attribute selector or
Is there any solution other than specifying both English and Japanese “aria-label”?

WGhooeD.png BoTIAJJ.png
plain kelp
#

Yes, aria-label is localized

#

Either include the labels for all languages you care about, or figure out a different selector that doesn't use aria-label

grand surge
shut dragon
bleak gust
pure cairn
# 
[class^=userPopoutInner_] [class^=wrapper_] 
  { & > div:first-child, /* reviews */
    & > div:nth-child(2), /* mod view */
    & > div > button[aria-label*="Friend"] /* friend/add friend */
      { display: none; } }```
#

how can I make it so that, when hovering this button, the other buttons appear again?

image.png
#

I tried with reverse nesting but failed miserably

clear siren
pure cairn
clear siren
#

this breaks if you view your own profile though (actually not really because there is only one button probably)

pure cairn
#

Genius

#

I did not think of that way

pure cairn
clear siren
#

well it actually works perfect in your own profile too the buttons are just not there so it was different

#

I only have reviews button anyway dunno if other buttons exist for self

pure cairn
#

Not that I know of

#

Thank you again

fossil hatch
plain kelp
#

It's not uncommon at all

pure cairn
#

Yeah I had already seen it being used a few times already

#

I just
Didn't think of it, and even the :not(:last-child) bruh

viscid tiger
#

i recently started using

 &:not(:hover) {
}```
#

i think it just makes it cleaner instead of having two seperate things for one selector.

copper flame
#

what the hell is this glob on the new ui

image.png
clear siren
#

create dm button with an svg icon that doesn't work

image.png
#

good job discord

copper flame
echo frost
#

this could maybe support nesting with this?
haven't really read through the repo yet, but it seems to be what is needed for nesting
also the script could probably be a bit remade (maybe even into a plugin for ease of use?), but:
https://github.com/csstools/postcss-nesting

Oh wait this exists which does exactly what's needed for this i believe
and it's not 9 years since the last update. it was last updated like 5 days ago https://github.com/csstools/postcss-resolve-nested-selector

GitHub
GitHub - csstools/postcss-resolve-nested-selector: Resolve a nested...

Resolve a nested selector in a PostCSS AST. Contribute to csstools/postcss-resolve-nested-selector development by creating an account on GitHub.

iron smelt
#

I'm a upid how do you see two different var for color*(can you even do it)*

image.png
echo frost
#

doing it like that is like a "backup" i think
(if --white-user-color doesn't exist, it'll use --white-900)
what exactly are you trying to do? I don't quite understand your question

iron smelt
echo frost
#

oh

#

that should work i think?

#

as long as the selectors are correct

#

try just using like #ffffff instead of var to test

iron smelt
#

yeah if hard code the white his body changed but I'm trying to use variables and not hard code colors

image.png
echo frost
#

so var(--white-user-color, var(--white-900))

#

is --white-user-color a real variable though?

iron smelt
echo frost
iron smelt
echo frost
#

just use --white-900 instead of white-user-color

iron smelt
#

yeah that's what ill prolly do, actually will prolly be --white-100 cuz --white-900 is too dark

grand surge
#

Is there a way to do this?

IaFVUWz.png
#

I tried looking for the icon in DevTools Sources, but could not find it.

echo frost
grand surge
echo frost
#

um, I'm not sure what you mean

#

You want this icon to indicate if you're muted/deafened etc.?

2024-07-28_21.png
#

i suppose that would be possible, but a bit janky

grand surge
echo frost
#

so like this basically
(haven't made css for it yet, just edited the html)

2024-07-28_22.png
grand surge
echo frost
#

You don't use a url for this.
they're svgs
the best way i think would be to change the path

#

quick test thing that just always shows server deafened

svg.icon_df8943 {
  >path[d^="M12"] {
    fill-rule: evenodd;
    d: path("M21.76.83a5.02 5.02 0 0 1 .78 7.7 5 5 0 0 1-7.07 0 5.02 5.02 0 0 1 0-7.07 5 5 0 0 1 6.29-.63Zm-4.88 2.05a3 3 0 0 1 3.41-.59l-4 4a3 3 0 0 1 .59-3.41Zm4.83.83-4 4a3 3 0 0 0 4-4Z");
  }
  >path[d^="M15"] {
    d: path("M12.38 1c.38.02.58.45.4.78-.15.3-.3.62-.4.95A.4.4 0 0 1 12 3a9 9 0 0 0-8.95 10h1.87a5 5 0 0 1 4.1 2.13l1.37 1.97a3.1 3.1 0 0 1-.17 3.78 2.85 2.85 0 0 1-3.55.74 11 11 0 0 1 5.71-20.61ZM22.22 11.22c.34-.18.76.02.77.4L23 12a11 11 0 0 1-5.67 9.62c-1.27.71-2.73.23-3.55-.74a3.1 3.1 0 0 1-.17-3.78l1.38-1.97a5 5 0 0 1 4.1-2.13h1.86c.03-.33.05-.66.05-1a.4.4 0 0 1 .27-.38c.33-.1.65-.25.95-.4Z");
  }
}```
echo frost
grand surge
echo frost
#

I think the best way would be to define variables for the paths and possibly background color in .container_a4d4d9 testing for these icons with :has()

.container_a4d4d9 {
  --path-thingy: path("M21.76.83a5.02 5.02 0 0 1 .78 7.7 5 5 0 0 1-7.07 0 5.02 5.02 0 0 1 0-7.07 5 5 0 0 1 6.29-.63Zm-4.88 2.05a3 3 0 0 1 3.41-.59l-4 4a3 3 0 0 1 .59-3.41Zm4.83.83-4 4a3 3 0 0 0 4-4Z");
}

svg.icon_df8943 {
  >path[d^="M12"] {
    fill-rule: evenodd;
    d: var(--path-thingy);
  }
  >path[d^="M15"] {
    d: path("M12.38 1c.38.02.58.45.4.78-.15.3-.3.62-.4.95A.4.4 0 0 1 12 3a9 9 0 0 0-8.95 10h1.87a5 5 0 0 1 4.1 2.13l1.37 1.97a3.1 3.1 0 0 1-.17 3.78 2.85 2.85 0 0 1-3.55.74 11 11 0 0 1 5.71-20.61ZM22.22 11.22c.34-.18.76.02.77.4L23 12a11 11 0 0 1-5.67 9.62c-1.27.71-2.73.23-3.55-.74a3.1 3.1 0 0 1-.17-3.78l1.38-1.97a5 5 0 0 1 4.1-2.13h1.86c.03-.33.05-.66.05-1a.4.4 0 0 1 .27-.38c.33-.1.65-.25.95-.4Z");
  }
}```
2024-07-28_22.png
#

might work on it later, but need to do some stuff first

supple lodge
echo frost
#

main problems:

  • lots of repetition in selectors
  • the accessory code is repeated
  • having to set the default path in the code
  • scuffed specificity stuff to get the right variable to be assigned
#

also maybe it should have a red background
wouldn't be that hard to implement, but i can only really think of using a variable for the color which is pretty scuffed

#

well ig i could use fallback instead of setting the variables which is slightly better i think, but still not great

#

(btw, it seems to shift when changing the color, is that because of like the red and green leds in the pixel being ever so slightly different position in the pixel?)

#

maybe, because it doesn't show in recording

#

but also, it shifts more vertically than horizontally i think

#

and images online show them on the same vertical level

brittle juniper
valid heron
grand surge
echo frost
valid heron
#

literally

#

i've asked like 3 times 😭

echo frost
solid ore
#

my version is pretty scuffed tbh

#

theres a gap between the grabber and the barFill when its like less than 50% progress

#

and removing the "by" part is fine but if theres multiple artists then the comma also dissapears

image.png
#

maybe i'll try and fix it tmrw

worldly moss
echo frost
#

I think that should be pretty easy to fix
like a max-width and text-overflow: ellipsis should work I think?
prob do wha nvhhr said instead

solid ore
#

thanks, i'll try that tmrw, im going to bed now

clear siren
#

I'd consider wrapping the text instead

pure cairn
#

I'd make it slide, just like Spotify does

kind mortar
#

Anyone know how I can change the main Discord color to a specified hex color code? Pretty sure I found a snippet in this server but I can't find it now

#

Oh cool thanks!

echo frost
#

that needs the clienttheme plugin enabled btw

2024-07-29_15.png
kind mortar
#

Ah yeah

supple lodge
echo frost
#

this is where it adds the . (in shuffle button)

2024-07-29_16.png
#

and where it sets the color is right above that on line 140

echo frost
supple lodge
echo frost
#

well ig you could override it on hover with !important

#

oh wait not hover, but when button is enabled

supple lodge
#

i'm really lost with those &[...] never touched to anything like that x)

echo frost
# supple lodge i'm really lost with those &[...] never touched to anything like that x)

they're very simple actually
that snippet kind of nests too much which makes it a bit hard to read, but & just means the parent selector

.foo {
  /* do something to foo */
  &.bar {
    /* do something to foo bar*/
  }
}
/*
is the same as:
*/
.foo {
  /* do something to foo */
}
.foo.bar {
  /* do something to foo bar*/
}

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

MDN Web Docs
& nesting selector - CSS: Cascading Style Sheets | MDN

The CSS & nesting selector explicitly states the relationship between parent and child rules when using CSS nesting. It makes the nested child rule selectors relative to the parent element. Without the & nesting selector, the child rule selector selects child elements. The child rule selectors have the same specificity weight as if they were wit...

supple lodge
#

is that it? but it change the color even when not unabled

ZyahWNn.png
#

also @echo frost , how do I make it so it color the icon instead of the circle around it?

echo frost
#

use color instead of background

supple lodge
#

I really am this dumb...

#

Ok it works now, thanks for the link and explanation

copper flame
#

horror i found the one thing that isnt var based in the new ui

image.png
#

guh a lot of forum things arent var based

echo frost
#

oh yeah i saw a gradient like that recently

#

probably same place

#

or maybe not
i thought i remember it being more noticable in my theme which is only slightly different color than normal

echo frost
#

oh wait new ui?

solid ore
pure cairn
echo frost
#

I think i've sent it before, but here it is again

#

And I didn't make all of it

solid ore
#

fixed most things ppl mentioned

image.png
#

only issues that's still there is the gap between the progess bar and the grabber at the beginning

simple kiln
#

what do you think with my theme? with catppucin-mocha

#

without catppucin

image.png
clear siren
#

would be cleaner

elder pagoda
#

Not sure if anyone can help me, I might be doing this completely wrong, I'm trying to change just the font on my client to a font I have installed on my computer, And failing hard. Got pointed to this Discord server and then more specifically pointed to this channel

clear siren
#

that's easy

elder pagoda
#

I thought it was, but apon actually trying it, it doesn't work.

clear siren
# 
:root
 { --font-primary: "Roboto Mono"; /* main font */
   --font-display: "Roboto Mono"; /* channellist categories and some other places */
   --font-headline: "Roboto Mono"; /* headlines, big texts like like in the nitro settings */
   --font-code: "Roboto Mono"; } /* code blocks */
#

just put that in your quickcss

elder pagoda
#

Fantastic, thank you!

clear siren
#

it should work as-is unless you have a weird theme

elder pagoda
#

Yeah it works, thanks!

pure cairn
fast cipher
supple lodge
solid ore
solid ore
supple lodge
hazy tinsel
#

moving this button to the top of the list

image.png
#

hasnt been done yet, can't figure it out because i have no clue on how to grab the uh ID or whatever of it

#

like the identification class or something im not sure what term to use

supple lodge
#

this? (changed order for + server to -1 and the DM one to -2, but only seems to work with horizontal server list addon)

8AIYi4l.png
hazy tinsel
#

i just wanna move it to the top of the list like where the DMS home button is

#

idk what that is that's a whole different theme

supple lodge
pure cairn
#

To prevent crashes and logouts, you might have to turn the nodevtoolswarning plugin on

clear siren
thick hill
#

Does anyone have any clue why this happens with the resizeHandle?

image.png image.png
#

First image is in forums, the second is with a voice chat text channel open. Both seem to use the same resizeHandle but the voice chat channel one seems to have some other background getting applied that I can't seem to figure out

# 
.resizeHandle_d1c246 /* pretend to be a margin */ {
    width: var(--spacing);
    background: transparent;
}

this is what I'm using to do this, not sure how to get both of them to look the same though

clear siren
#

you mean that it's a bit darker than the other one

thick hill
#

Yeah

clear siren
#

I assume it's not the resizehandler but the background of some element possibly much higher in the tree that's showing through

#

discord is layers on top of layers on top of layers

#

and somewhere in that stack there is a background that is darker than desired

vestal field
thick hill
#

I'm not entirely sure, so far, from what I can tell, somewhere midnight's bg-3 overwrites that part of the handle in the voice chat text channel

#

if I uncheck bg-3 in the :root section (being loaded from midnight) it looks as I expect it, but that obviously breaks other parts of the theme

vestal field
#

uhhh github issue report if its a problem and ill look into it when i get back

thick hill
#

Ah, I don't think it's actually Midnight's issue. I think it's just Discord. Disabled my tweaked version of Midnight, took that above snippet and threw it in QuickCSS, and the issue persists with any of the nitro themes between forums and voice chat

hazy tinsel
thick hill
solid ore
hazy tinsel
#

on the discord app

#

is there a way to disable the video control?

fossil hatch
#

I just enabled the scss duplicate properties warning setting lmfao

image.png
copper flame
#

what the fuck did discord do to the visual refresh

#

massive padding to the server groups

image.png
#

massive padding to the profile

#

server list is tiny

#

massive padding to the dms list

#

it was perfect the first time with like tiny issues wtf why did they do this

iron smelt
worldly locust
#

ill work on fixing it

clear siren
#

yeah I just restarted discord because people in support saying message action buttons are gone and yeah a lot of other stuff also got screwed

worldly locust
hazy tinsel
#

im trying to disable the listen along, and play in spotfy but they have special IDs that link to the user data basically dynamic

image.png
#

i can't figure it out but i just don't want it when right clicking someone is there a way i can disable it in css?

#

is there a way also to move copy userid to add friend?

#

tired of constantly going below it disrupts my flow i guess idk

worldly locust
hazy tinsel
hazy tinsel
worldly locust
#

👍

hazy tinsel
#

is there a way i can move copy user id under add friend or something instead of below?

image.png
#

i have no clue how.

echo frost
hazy tinsel
#

not sure whether im doing it correctly

#

💀

echo frost
#

what's your css?

hazy tinsel
# 
[id^="user-context-devmode-copy-id-"],
[id^="channel-context-devmode-copy-id-"] {
    position: relative; 
    margin-top: -5px;
    top: -110px; 
    z-index: 1; 
}
#

lol

#

hodl on

#

i tried different stuff the order thing didnt work out

# 
[class="scroller_d90b3d thin_c49869 scrollerBase_c49869"] { 
    display:grid; 
    flex-direction: grid;
}```
 would this be the parent?
echo frost
#

yeah
for classes use
.scroller_d90b3d.thin_c49869.scrollerBase_c49869 btw

echo frost
#

best i can come up with is this, but it still messes it up a bit and is really scuffed

.scroller_d90b3d {
  display: flex;
  flex-direction: column;
  >[role=group] {
    margin-bottom: calc(-3.99px/2);
    margin-top: calc(-3.99px/2);
  }
}```
echo frost
#

you need to use order: [number] on copy id (and apply display: flex/grid to the scroller so order works)

and you'll also have to add order to the other children too

pure cairn
#

huh

#

can you not nest 2 things like this together?

image.png
#

oh wait

#

yeah I may be dumb

image.png
#

ok, now I'm stuck for real
is it even possible to further nest it?

/* hide specific users' status */
[src*="325830018183987213"] { /* <- copy the [src*="ID"] to add more people */ 
    [class^=avatarStack_] > & { 
        [class^=member_] [class^=memberInner_]:has(&) [class^=content_] [class^=subText_] > [class^=activity_], /* memberlist */
        [class^=privateChannels_] > [class^=scroller_] [class^=content_] > [class^=channel_]:has(&) [class^=subText_] { /* DMs list */
            display: none; 
        } 
        [class^=userPopoutInner_], /* popout */
        [class^=userPanelInner_] /* DMs panel */ { 
            header:has(&) { 
                & [class^=invisibleContainer_],
                & > div:not([class]) > [class^=visibleContainer] { 
                    display: none; 
                } 
            } 
        } 
    } 
}```
worldly moss
#

nesting hell

pure cairn
#

well, considering that I started from this

/* hide specific users' statuses */
[src*="325830018183987213"] { /* <- copy the [src*="ID"] to add more people */
  [class^=member_] [class^=memberInner_]:has([class^=avatarStack_] > &) [class^=content_] [class^=subText_] > [class^=activity_], /* memberlist */
  [class^=userPopoutInner_] header:has([class^=avatarStack_] > &) [class^=invisibleContainer_], /* popout */
  [class^=userPopoutInner_] header:has([class^=avatarStack_] > &) > div:not([class]) > [class^=visibleContainer], /* popout (2) */
  [class^=privateChannels_] > [class^=scroller_] [class^=content_] > [class^=channel_]:has([class^=avatarStack_] > &) [class^=subText_], /* DMs list */ 
  [class^=userPanelInner_] header:has([class^=avatarStack_] > &) [class^=invisibleContainer_], /* DMs panel */
  [class^=userPanelInner_] header:has([class^=avatarStack_] > &) > div:not([class]) > [class^=visibleContainer] { /* DMs panel (2) */
    display: none;
  } 
}```
pure cairn
#

aight, fixed it without too much nesting

clear siren
#

it's nests all the way down

vestal field
#

nesting becomes a readability nightmare at some point

pure cairn
#

Anyway, would this be good enough to be posted on the snippet channel? venniecozycat

/* hide specific users' status */
[src*="ID"] /* <- create a copy of [src*="ID"] to add more people, use commas to separate them */
  { [class^=avatarStack_] > & 
    { [class^=member_] [class^=memberInner_]:has(&) [class^=content_] [class^=subText_] > [class^=activity_], /* memberlist */
      [class^=privateChannels_] > [class^=scroller_] [class^=content_] > [class^=channel_]:has(&) [class^=subText_] /* DMs list */
        { display: none; } 
      [class^=userPopoutInner_] header:has(&), /* popout */
      [class^=userPanelInner_] header:has(&) /* DMs panel */ 
        { & [class^=invisibleContainer_],
          & > div:not([class]) > [class^=visibleContainer] 
            { display: none; } } } }
lost plume
#

what is that horror formatting ​​​​​​​​​​​​​​​​​​​​​​​​​

pure cairn
#

My ocd likes compact stuff

pure cairn
# 
/* hide specific users' status */
[src*="ID"] { /* <- create a copy of [src*="ID"] to add more people, use commas to separate them */ 
    [class^=avatarStack_] > & {
        [class^=member_] [class^=memberInner_]:has(&) [class^=content_] [class^=subText_] > [class^=activity_], /* memberlist */
        [class^=privateChannels_] > [class^=scroller_] [class^=content_] > [class^=channel_]:has(&) [class^=subText_] { /* DMs list */
            display: none; 
        }
        [class^=userPopoutInner_] header:has(&), /* popout */
        [class^=userPanelInner_] header:has(&) { /* DMs panel */
            & [class^=invisibleContainer_],
            & > div:not([class]) > [class^=visibleContainer] { 
                display: none; 
            } 
        } 
    } 
}```
#

better now?

clear siren
lost plume
#

meanwhile my formatting ```css
#kon_3c_b:not(:has(> div:nth-of-type(2) > div:nth-of-type(2) > b)) > div:nth-of-type(1) { /* only set color for UM, leave the pretty blue for WAM */
background-color: #ddb379 !important;
}

/* meteogram_list.php */
body:has(#meteorogram) {
background-image: url(/tlo_gora.jpg);

> div {
    display: none;
}

> div:nth-of-type(3) {
    display: unset;
    right: 50%;
    left: unset !important;
}

> div:nth-of-type(4) {
    display: unset;
    left: 50% !important;
}

}

#

idk I'm probably just weird ​​​​​​​​​​​​​​​​​​​​​​​​​​​​

clear siren
#

selector
{ property: value;
property: value; }

it just makes so much sense and is so easy to read

#

been doing css this way since like 2009 or so when I started learning it and I can never switch to the 'standard' way

plain kelp
#

Does that formatting have any benefits or is it just a fucked up sense of aesthetics

clear siren
#

preference really, spec doesn't say anything how whitespace should be

#

I just personally find it better that way

plain kelp
#

It's okay to have shit taste

clear siren
lost plume
pure cairn
teal cave
#

I recently switched from spaces to tabs

echo frost
#

why

echo frost
#

How can I only format selection in vscode? (for css)

#

oh wait now it's working nvm

vestal field
echo frost
#

it's spaces for me

vestal field
#

whatttt

echo frost
#

and just press f1 to bring up the search thingy where you can change that

hazy tinsel
#

how do i disable capture devices? in this menu

#

i've tried almost everything and it doesn't work there's no specific class that's linked to it

#

<div class="text-sm/medium_dc00ef" data-text-variant="text-sm/medium">Capture Devices</div>

echo frost
#

the form .tabContainer_a18ec1 isn't necessary for it to work, but I think without it, it could maybe apply to other things
not positive though

hazy tinsel
echo frost
grand surge
#

Do you see why this wouldn't work?

[class^="membersWrap_"] > [class^="members_"] > [class^="content_"] > [class^="member_"] > [class^="memberInner_"] {
  & > [class^="avatar_"] > [class^="wrapper_"] > [class^="mask_"] > [class^="pointerEvents_"] {
    position: relative !important;
    left: 32px !important;
    top: -4px !important;
    /* opacity: 0.1; */
  }
}
zGHrf3X.png
solid ore
#

oh wait nvm its commented

solid ore
grand surge
#

Would it be easier to add "::before" before the name?

solid ore
#

probably

grand surge
solid ore
#

yeah it def would, theres a lot more things ud have to move

pure cairn
# grand surge

Does it also turn into the rectangle with small white dots when someone's typing?

grand surge
pure cairn
#

Well that's not what I was expecting

grand surge
plain kelp
#

I think it isn't a font but just those exact images

clear siren
#

or actually, the colored version is a background-image but the grayscale is a mask because that makes sense

#

in any case you can replace the emoji button with whatever you want and I know there's a snippet for it somewhere already

bleak gust
clear siren
#

there is fixed ones in the thread

harsh matrix
#

i have blur in my theme and the edges are not blurred anymore, the code worked last week or so, how can i fix it? i'm not a master of css so i don't really know what to do

here's the code, i took a snippet on here a long time ago and modified it a bit,

/* settings dialog */
.layer_d4b6c5 + .layer_d4b6c5
 { border-radius: 22px !important;
   border: 1px solid var(--border-strong);
   box-shadow: 5px 5px 25px black !important;
   width: 100% !important;
   max-width: 80%;
   height: 90% !important;
   margin: auto !important;
   padding: 0 !important;
   opacity: 1 !important;
   transform: unset !important;
 }
.baseLayer_d4b6c5[aria-hidden="true"]::after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #00000068;
  backdrop-filter: blur(20px) !important;
  content: '';
  z-index: 100;
}
.layer_d4b6c5[aria-hidden="false"] + .layer_d4b6c5[aria-hidden="false"] {
  display: none
}
#app-mount .baseLayer_d4b6c5 /*keep view under settings*/
 { opacity: 1 !important;
 
   transform: scale(1) !important;
 }
.baseLayer_d4b6c5[aria-hidden="true"] {
   pointer-events: none;
}
.layers_d4b6c5>.layer_d4b6c5.animating_d4b6c5 {
  will-change: unset !important;
}

also if this is not the right channel feel free to redirect me

image.png
clear siren
#

blur works as expected here

image.png
#

something else in your css might be doing something

#

only thing css-wise I can think of is that .baseLayer_d4b6c5 has some kind of mask but that would be strange to have there

harsh matrix
#

i will look in my css

#

thanks

harsh matrix
#

even with only the code, it persits, and affects anything that's blurred, could it be one of my plugins?

clear siren
#

can't be

#

can you do /vencord-debug

harsh matrix
#

here?

clear siren
#

yeah

harsh matrix
#

/vencord-debug

#

it doesn't do anything?

clear siren
#

doesn't it work here

#

apparently not

#

do it in #🤖-bot-commands

harsh matrix
#

oki done

clear siren
#

yeah looks good to me was just curious

harsh matrix
#

i looked and i have this problem on my mac too

clear siren
#

do you have hardware acceleration on or off

harsh matrix
#

it's off on my mac

#

that fixed it on my mac!

#

it is on in vesktop tho and it's not fixed over here

clear siren
#

could be a linux thing, hard to say

smoky fog
clear siren
#

roboto mono

grand surge
compact rapids
#

Its theme background only limited with gif ?

#

or can I use mp4 for it?

#

I just used clearvision css code but I can't change it

clear siren
#

can't use video

compact rapids
#

:f

clear siren
#

I've tried adding video with pseudoelements too, no dice

#

you'd need some js snippet or plugin to add a video element

compact rapids
#

I just want to don't lose quaility with it

#

I just wanna to do this gif but when I convert its being 60mb and If I upload this gif to imgur

#

that converting mp4 again

#

and I can't use

clear siren
#

find another host that can do a 60MB gif I guess

#

local files also won't work unfortunately (unless you make a webserver locally that serves that file)

compact rapids
#

I can't find

#

I trying to do this since 2 hours

#

and I still have not found

#

cuz of I came here for ask this

#

:d

plain kelp
#

Base64 it :p

grand surge
#

Wouldn't this work?

EtyqQ7g.png
plain kelp
#

No, css can't read local files

grand surge
#

It works well in my environment.

pure cairn
grand surge
#

As for file formats, what about APNG?

plain kelp
pure cairn
#

That's a good point

clear siren
#

the css file is already being loaded from local file

clear siren
grand surge
# 
.chatContent_a7d72e {
  background-image: url(test.png);
}
IehEtzF.png
#

I have a feeling that converting to APNG would be fine.

hazy tinsel
#

That’s actually sick

#

Does that have a huge impact on the performance though? Like rendering chats and stuff

clear siren
#

shouldn't have a big impact assuming hw accel is on

#

everything is rendered with composited layers

#

for best experience I would put the bg image into body or something

covert canopy
#

I've been thinking about things which would use GPU. After a thorough review I think I can conclude that I really shouldn't give a fuck and add whatever it can handle till I reach 100% GPU usage

clear siren
#

my vesktop uses constant 10-15% of my 3080 blobcatcozy

covert canopy
#

(don't point out inconsistencies please 🥺)

pure cairn
covert canopy
pure cairn
#

Evil

clear siren
#

unused gpu is wasted gpu

pure cairn
#

burnt gpu is wasted gpu as well tho

clear siren
#

very cool

pure cairn
clear siren
#

insane snippet ngl

pure cairn
#

it's an easy way to get multiple IDs without too much code

#

first time I used it was in my links overhaul snippet

#

since youtube has multiple links

pure cairn
pure cairn
clear siren
#

🤯

pure cairn
#

after I "fix" the formatting so that people don't complain about it lol

clear siren
#

looks like anything goes at this point :D

pure cairn
#

LOL

#

fair enough

#

where do I ask for the role again...? modmail I guess?

clear siren
#

yeah

pure cairn
#

alrighty, I'll do it later then

echo frost
clear siren
#

huh

echo frost
#

I tried submitting a less intrusive shop theme, then vindicated said asterisks bad then after I fixed it, they ignored me :(

#

(and I've been too lazy/busy to make a new ticket)

vestal field
echo frost
#

so the color of their name?

grand surge
#

I don't know how to correct the vertical misalignment, but is it something like this?

.root_c83b44 > .role_f9575e{
    &:first-child > .roleRemoveButton_f9575e{
        position: absolute;
        width: 100%;
        height: 100%;    
        & > .roleCircle_a26d7b{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -256;
            left: -6px;
            border-radius: 4px;
        }
    } 
}
f9TX925.png
glacial citrus
#

is there a list of discords css vars somewhere

echo frost
#

Is there a way to fix this?

2024-08-01_19.png
hazy tinsel
#

ye i got that before too i think it was related to one of my plugins can't remember the name

fossil hatch
echo frost
glacial citrus
fossil hatch
#

Anyone without nitro willing to check something for me?

#

If you don't have nitro, could you send me the classes for this?

image.png image.png
#

Trying to see if themeContainer_ad5fac is a universal class for those

echo frost
fossil hatch
#

Yes holy shit ty

#

It does so that's great

hazy tinsel
# 
li:has(.iconVisibility_f6f816.modeLocked_d8bfb3),
li:has(.iconVisibility_f6f816.modeLocked_d8bfb3.modeSelected_d8bfb3) {
    display: none !important;
}
#

disables all the uh locked vcs from showing

#

there's nothing more to it just wanted to share lol im sure there's better ways to write it

clear siren
#

those that you have permission to join will also have lock icon though wait nvm

iron smelt
hazy tinsel
#

sorry

#

had to update it because if mode is selected the locked vc would still show

#

makes voice channels look way cleaner though

iron smelt
hazy tinsel
#

yes u have to manually re-add the new ones

#

but it works!!

pure cairn
#

But neat nonetheless

iron smelt
#

so womp womp on that

pure cairn
#

I sent an application for the snippet channel btw, just waiting for someone to answer or give some feedback on it venniecozycat

echo frost
#

make sure it doesn't have asterisks or vendicated will say "looks ineffecient" and then after you fix it, they'll ignore your ticket (definitely not speaking from experience)

pure cairn
pure cairn
#

The other selectors all use ^

echo frost
pure cairn
woven plover
#

Is there a way to provide options for themes? I want to allow users to toggle features on or off in my theme, and someone opened an issue asking for a Stylus option as a *.user.css (but I don't think Vencord supports this?)

#

Also, is it possible to have Vencord auto-reload local themes when they are modified? I symlinked my CSS file to the themes folder and am editing it with an external editor, but when I save it doesn't reload on Vencord. I have to go to the themes settings and manually toggle it off and back on.

pure cairn
#

I use quickcss to edit themes first, see if it works and then put the actual code on the .css file

clear siren
#

there is a usercss feature with options coming maybe some day (pr exists)

clear siren
pure cairn
#

That popup alone?

#

Or something inside it

#

Check in the layers above the regular client

#

Above in the preview, but below in the html tree

clear siren
#

popups rarely have a selector but can sometimes be selected by their contents

pure cairn
#

[class^=popoutContainer_]:has([class^=emojiSection])
I guess this would work?

woven plover
woven plover
woven plover
copper flame
#

does anyone have some css to make these text buttons dynamically fit to columns on the side

image.png
echo frost
mortal mantle
#

very hacky i would say but i managed to group messages from the same user into one bubble

DY7S0JG6.png
pure cairn
bleak gust
cloud joltBOT
bleak gust
#

i forgor it hates that

pure cairn
#

skill issue tbh

mortal mantle
hazy tinsel
# 
/* Hides Voice Channels, that are locked and full. */
li:has(.iconVisibility_f6f816.modeLocked_d8bfb3),
li:has(.iconVisibility_f6f816.modeLocked_d8bfb3.modeSelected_d8bfb3),
.containerDefault_f6f816:has([aria-label="This channel is full."]) {
    display: none !important;
}```
#

pretty self explanatory useful for servers with alot of voicecalls

#

and its only when i remove the element or wtver

#

like vcs are showing but its delayed almost as if other vcs are there they dissapear / reappear

pure cairn
#

It's because not all elements are shown at all times

hazy tinsel
#

ohh you're right like they're slowly being loaded in as i scroll down

pure cairn
#

So I guess when they actually render and get the style applied, they make that flickering effect

plain kelp
#

Discord's scrollers make assumptions about how tall the content is, to avoid having to render everything

hazy tinsel
#

and when the element appears my code is removing it

pure cairn
#

Yeah

hazy tinsel
#

is there a way i can get around that thing though cause it really messes up

plain kelp
#

If you change the height those assumptions are broken, and you get... that

hazy tinsel
#

but how would i do it based off of server like i can't rlly

#

i can set width to fit a server, yeah but how would i make it work with every server

#

foir the channel list

pure cairn
#

I don't think max-height: fit-content; works

hazy tinsel
#

cus i want all the vcs, to be rendered as im scrolling

#

and the disabled ones removed completely

#

is that possible or

# 
/* Hides Voice Channels, that are locked and full. */
li:has(.iconVisibility_f6f816.modeLocked_d8bfb3),
li:has(.iconVisibility_f6f816.modeLocked_d8bfb3.modeSelected_d8bfb3),
.containerDefault_f6f816:has([aria-label="This channel is full."]) {
    display: none !important;
}
#

this is my code

echo frost
#

I don't think theres a way to load the channels with just css?
i may be wrong though

pure cairn
#

Maybe if you make them very small

#

You could force discord to load them

#

Maybe

sand oriole
# 
@import url('https://fonts.cdnfonts.com/css/montserrat');

:root {
    --font-primary: "Montserrat";

    
    --font-display: "Montserrat";
    --font-headline: "Montserrat";
simple kiln
#

how do you make spotify show on sidebar? in discord web? it just show on user profile popup.

hazy tinsel
#

think u forgot to close it with }

#

@sand oriole

solid ore
grand surge
#

Is there a way to determine the "StreamerMode" status?

simple kiln
pure cairn
#

Or you have to rely on the "streamer mode enabled" purple banner at the top of your screen

rapid vector
#

Is there a plugin/css that can hide the 3 items except EMOJI?
I also looked at css-snippets, but I didn't understand it because my native language is not English!

image.png
gusty rose
woven plover
gusty rose
lunar hamletBOT
rapid vector
#

Can I extract what I want to remove from this and add it to the quickCSS Editor to apply it?

gusty rose
#

Pretty sure you can, just copy and paste whatever you want into QuickCSS

rapid vector
#

I added it, but it is not hidden.
Should I restart discord?

image.png image.png
solid ore
gusty rose
#

If your discord is in a different spoken language, it may not work. I encountered that awhile ago. No you don't need to restart discord for changes to take effect, it should be immediate, or within seconds after being pasted in

grand surge
rapid vector
#

My discord doesn't work because it is in Japanese ToT

#

I will take this opportunity to use discord in English!
Thank you very much.

bleak gust
solid ore
pure cairn
gusty rose
#

Try these for Japanese,

button[aria-label="ギフトを贈る"] { display: none; }
button[aria-label="GIFピッカーを開く"] { display: none; }
grand surge
# rapid vector My discord doesn't work because it is in Japanese ToT 
/*テキストチャットのギフトボックスを隠す*/
[class*="sansAttachButton_"] > [class^="buttons_"] > button:has([d^=" M-7,10 C-8.104999542236328,"]) {
  display: none;
}

/*テキストチャットのステッカーを隠す*/
[class*="sansAttachButton_"] > [class^="buttons_"] > div:has([d^=" M-6,-10 C-6,-10 6,-10 6,-10 C8.208999633789062,"]) {
  display: none;
}

my css

bleak gust
#

selecting based upon SVG icons is underrated

pure cairn
bleak gust
#

The what

pure cairn
bleak gust
#

no

#

?

pure cairn
#

I don't have my pc on rn

bleak gust
#

what are you talking about

pure cairn
#

Can you send a screenshot of the user area at the bottom left?

bleak gust
#

if you mean user profile shows streaming status

solid ore
#

streaming status =/= streamer mode

bleak gust
#

this is what mine looks like

Sqaaakoi-04-08-2024-23-22-04.png
pure cairn
#

I don't remember

bleak gust
#

No

pure cairn
#

Nevermind then