damn that selector looks so cursed
#🎨-theme-development
deft niche
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
:root
{
--font-primary: 'Nunito' !important;
}
hey, so im trying to change the font. i attemted this at first but it isnt working, any ideas?
it was working before but i changed something and i forgor 
summer adder
does it need to be that specific?
i dont know i just got it from someone here
grand surge
💀
runic radish
||Two days later||
Mb, didn't see it, I updated it 💀
grand surge
```css
@import url('https://fonts.googleapis.com/css2?family=Nun...
That should in theory work
Are there other themes overriting that font?
@deft niche
deft niche
Are there other themes overriting that font?
nah, i tried taking my themes off and it still does it
it replaces the font but its definitely not nunito
edgy sentinel
yeah that's the default font lol
runic radish
That's a font alright
deft niche
you seem to import weight 300
i mean, idk, but it doesnt load either way
edgy sentinel
change 300 to 500
runic radish
Because Google Fonts font selector is weird 💀
edgy sentinel
or 400
grand surge
change 300 to 500
I don't think that's the issue though
edgy sentinel
actually don't do that
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
use this import
deft niche
still isnt doing anything
grand surge
<@976176454511509554>
you wanna screenshot what you have here? :P
edgy sentinel
is your import at the top of your css
runic radish
Question, where is the import located?
deft niche
oh if i put it at the top of it it fixes
grand surge
oh if i put it at the top of it it fixes
Bruh
deft niche
ohhhhh ok, thanks
grand surge
these things ALWAYS go on top
deft niche
im stupid ok 
grand surge
@imports before anything else
runic radish
How dare you be a css newbie? 😡😡😡😡😡😡
edgy sentinel
these things ALWAYS go on top
tbf that's not self explanatory
it's really weird and confusing
runic radish
Fr
My first time messing with css consisted of me avoiding imports at all costs because, in my eyes at the time, they were "broken" and "never worked"
grand surge
tbf that's not self explanatory
Yeah that's fair
I guess it makes sense this isn't your first time touching code
like in actual programming languages, imports come first, so it'd only follow that the same applied to CSS
I don't know her coding background though
edgy sentinel
like in actual programming languages, imports come first
not necessarily
runic radish
require() would like to have a word with you
edgy sentinel
even import
deft niche
How dare you be a css newbie? 😡😡😡😡😡😡
im not even a css newbie im just a fucking idiot😭
lmaoooo
runic radish
Either way, we all make mistakes lmao
grand surge
> like in actual programming languages, imports come first
not necessarily
wait what
are there times where there's somethign else that comes before importing stuff?
edgy sentinel
there is absolutely no need to have your imports hoisted in most languages
it's just what most people do for readability
but sometimes if my file consist of essentially multiple parts of code that all import different files, i will put the imports above the part that needs it
grand surge
Ah
to be honest, I wasn't sure if the same rules applied to other languages
because I never put my imports anywhere else
runic radish
deft niche
how can i change the font of code blocks?
runic radish
Uuuuuh
edgy sentinel
check pins in #🎨-css-snippets
runic radish
~~```css
code {
font-family: "amogussy";
}
:root{
--font-code: your font;
}```That's the smarter solution
grand surge
I mixed the order of the words 💀
edgy sentinel
but trust me you don't wanna use a normal font for your code font
use a monospaced font
rugged echo
comic sans for codeblocks
rugged echo
its a bit better but I don't know why would you use this over other fonts
vestal field
its funny
grand surge
disgusting
dire path
yo any way to disable this dumb icon?
clear siren
I use button[aria-label="Send a gift"] { display: none !important; }
but if your discord is not in english it doesn't work
dire path
I use ``button[aria-label="Send a gift"] { display: none !important; }``
ayy thank you :D
unreal whale
does anyone know why this css isn't working for me?
[class*=pictureInPictureVideo-] {
width: 1600px;
height: 900px;
}
only like one of my custom css snippits i have in the file work anymore and not really sure why
that snippit is meant to change the size of the picture in picture and used to work fine however i haven't needed it for a while so didn't realise it broke
biggerstreampreview plugin doesn't work for me either which is why i'm asking about css snippits
clear siren
try changing the - to a _
unreal whale
ok
clear siren
didn't test but that's probably it
clear siren
:3
unreal whale
dunno why it would've changed
clear siren
discord changed all class names like 2 months ago
unreal whale
oh ok
makes sense then
hope your day or night is going well lol. that's all i really needed so thanks
clear siren
all is well.
glad urchin
its animated
long sundial
really???
long sundial
I would but
glad urchin
app launcher desktop, treatment 1
long sundial
I'm in browser rn
summer adder
husk
hey
img {content: url(https://cdn.discordapp.com/emojis/1173241982219473006.png?size=240) !important;
}```amazing
long sundial
Counter argument
img {content: url(https://media.discordapp.net/stickers/1184844804467740775.webp?size=160) !important;
}```also add onto it
so
img {content: url(https://cdn.discordapp.com/emojis/1173241982219473006.png?size=240);}
svg {content: url(https://cdn.discordapp.com/emojis/1173241982219473006.png?size=240);}
im curious if that’ll even work
glad urchin
svg is slight broke
long sundial
I think that wont work because svg
summer adder
im curious if that’ll even work
makes sense, hence why i said this
long sundial
yea
Well fuck it just go and
* {content: url(https://cdn.discordapp.com/emojis/1173241982219473006.png?size=240) !important;
}```yeah fuck it
glad urchin
summer adder
while you’re at it just go and ```css
html {content:url(https://cdn.discordapp.com/emojis/1173241982219473006.png?size=240) !important;}
amazing
glad urchin
widest husk
long sundial
Huskcord
summer adder
while you’re at it just go and ```css
html {content:url(https://cdn.discordapp.c...
html {content:url(https://cdn.discordapp.com/emojis/1173241982219473006.png?size=240); filter: contrast(900); !important}
fried husk
long sundial
"you forgot your glasses mode"
* {
filter: blur(1px) !important;
}```html {content:url(https://cdn.discordapp.com/emojis/1173241982219473006.png?size=240); filter: contrast(900) saturate(0%) !important;}```imporant
long sundial
imporant
summer adder
```css
html {content:url(https://cdn.discordapp.com/emojis/1173241982219473006.p...
at that point its just making
summer adder
amazing
glad urchin
uploaded reverse
long sundial
no glasses
summer adder
html {filter: contrast(9000) saturate(100) !important;```ture
summer adder
ture
glad urchin
long sundial
Roundcord
* {
border-radius: 50% !important;
}```
summer adder
```css
* {left:0.1px !important}
```
somehow this fucks up a lot
long sundial
LMAO
summer adder
thats definitely a roundcord
long sundial
when you order discord UI on wish
summer adder
html {filter:skewY(50deg) skewZ(50deg)}
oh no
deep bane
yo any way to disable this dumb icon?
This hides the shop in home tab and buncha other stuff too (the gift button too)
@import url(//raw.githubusercontent.com/D3SOX/complementary-discord-theme/master/hide-nitro-upselling.theme.css);
skewcord
glad urchin
This hides the shop in home tab and buncha other stuff too (the gift button too)...
use https import
glad urchin
horror
long sundial
why is octosquid so big
deep bane
use https import
i had it before the rule was made and i dont care enough to put https there
mortal mantle
what the fuck is that code
long sundial
why use [class=xxx] when you can just .className
mortal mantle
why are there so many wildcard selectors
summer adder
before the rule was made i still never didnt put https
i ALWAYS put the https: in my imports
way before the rule was made
glad urchin
skew crashed
long sundial
Sorry I don't speak [attributeSelector]
summer adder
skew crashed
please tell me you’ve been using qcss and not actually injecting it via inspect element
glad urchin
i am using qcss
summer adder
thank god
maybe reduce the skews to like
10px
see if that’ll uncrash it (not crash)
mortal mantle
qcss ??
summer adder
awesome
yeah now in retrospect 50px was way too much for skew
makes sense for the crash
deep bane
This is a very good css snippet
.messageListItem__6a4fb {
animation:chipichipichapachapadubidubidabadabamagicomiboomboomboom 0.4s ease-in-out infinite alternate;
}
@keyframes chipichipichapachapadubidubidabadabamagicomiboomboomboom {
0% {
transform: rotate(5deg);
}
100% {
transform: rotate(-5deg);
}
}
tough pike
deep bane
This is a very good css snippet
```css
.messageListItem__6a4fb {
animation:chip...
I made an even better css snippet
.messageListItem__6a4fb {
animation:chipichipichapachapadubidubidabadabamagicomiboomboomboom 0.4s ease-in-out infinite alternate;
}
@keyframes chipichipichapachapadubidubidabadabamagicomiboomboomboom {
0% {
transform: rotate(5deg);
}
100% {
transform: rotate(-5deg);
}
}
.messageListItem__6a4fb::before {
content: url(https://media.discordapp.net/attachments/807242683344224258/1184891757209583686/aaaaaaaaaaaaaaaaaaaaaaaaa.gif?ex=658d9f71&is=657b2a71&hm=4718c07643c105789a737afe7661af808efb44feec7818777feebd15ec41924c&=&width=96&height=96);
right: 0 !important;
position:absolute;
}
wait
textraplce
fixed
real quarry
who wants to get rid of this failed abortion
summer adder
who wants to get rid of this failed abortion
press the got it button and it won’t show again
don’t even need css for that one
summer adder
don’t pensive react me it’s the truth
clear siren
who would write a css to do something that can be just clicked away, and who would use that css when it's much simpler to just click it away than to apply the css
summer adder
but why
its so fucking useless
way more useless than ```css
html {filter: blur(1);}
replcae html with * for better rseults
summer adder
i did html so that way it just blurs the entire page
glad urchin
oh
summer adder
way better than making the qcss look for every element and bluring it
terse dew
anyone knows the difference between pop-ups for things like events and share screen, and the pop-ups for inbox, and auto correct etc....
long sundial
@keyframes flashbang {
0% {
color: white;
background-color: white;
}
20% {
color: inherit;
background-color: inherit;
}
}
* {
animation: flashbang 10s infinite;
}```Not necessarily true and there are other pop ups like that
clicking it away will work temporarily but every once in a while you will still see it
I can see why someone would want to theme it
just to make things more consistent
that being said, I am not one of those people, for I am too lazy
clear siren
they didn't want to theme it but remove it
who knows if future popups of that type will have the same selector
and a broader selector might easily select something you don't want, hard to test when those are so exceedingly rare
grand surge
who knows if future popups of that type will have the same selector
hmmm this is true
I would guess they all have at least one class in common?
clear siren
probably
deft niche
/*Yeet hypesquad badges (who cares)*/
[aria-label*="HypeSquad"]
{
display: none;
}
im using this to remove all hypesquad badges, and it works fine in quickcss- But whenever i move it over to my actual theme file it doesnt do anything
oh it just randomly decided to work
welp ok
summer adder
```css
@keyframes flashbang {
0% {
color: white;
background-color: whi...
putting this in my qcss im curious
this is SO laggy oh my god
deft niche
```css
@keyframes flashbang {
0% {
color: white;
background-color: whi...
OH GOD IT HURTS
grand surge
```css
/*Yeet hypesquad badges (who cares)*/
[ar...
why is this indented so much 😭
deft niche
why is this indented so much 😭
i pasted it from the theme lol
summer adder
```css
/*Yeet hypesquad badges (who cares)*/
[ar...
this does NOT work
oh nvm
for some reason my qcss was turned off wtf
anyways i was bored
so i remade the mac titlebar buttons
/**
* @author Madeline
* @name MacOS Titlebar Buttons
* @description Makes the titlebar buttons similar to MacOS.
*/
[aria-label="Minimize"]
{
color: yellow;
clip-path: circle(7px);
background: yellow;
}
[aria-label="Maximize"]
{
color: lime;
clip-path: circle(7px);
background: lime;
}
.winButtonClose__73489
{
color: red;
clip-path: circle(7px);
background: red;
}
[aria-label="Minimize"]:hover
{
color: yellow;
clip-path: circle(7px);
background: yellow;
}
[aria-label="Maximize"]:hover
{
color: lime;
clip-path: circle(7px);
background: lime;
}
.winButtonClose__73489:hover
{
color: red;
clip-path: circle(7px);
background: red;
}```only works with the close button, I guess aria label doesn't work
deft niche
^
summer adder
i think your clients just have a skill issue
works perfectly fine with mine
do you have the discord titlebar enabled?
vestal field
```css
/**
* @author Madeline
* @name MacOS Titlebar Buttons
* @description Make...
ok this is actually probably a smarter solution than the normal pseudo element method
summer adder
im stupid
are you saying my solution is smarter or are you gonna list a smarter solution
anyways
/**
* @author Madeline
* @description Hide your embarrasing servers!
* @name Server List Blur
*/
[aria-label="Servers"]{filter: blur(6px); transition: ease-in-out 1s;}
[aria-label="Servers"]:hover {filter: blur(0px);}```im saying your way seems better
deft niche
.header__39b23,
.container__590e2,
.title_b7d661,
[aria-label="Members"] {
filter: blur(0);
transition: filter 0.2s ease-in-out;
}
body:not(:hover) .header__39b23,
body:not(:hover) .container__590e2,
body:not(:hover) .title_b7d661,
body:not(:hover) [aria-label="Members"] {
filter: blur(5px);
}
blurs sensitive info when not hovering on the body
:3
rugged echo
i think your clients just have a skill issue
idk I just have desktop stable
summer adder
i have vesktop stable too,,,
rugged echo
no I don't mean vesktop
long sundial
OH GOD IT HURTS
You should totally keep using it
deft niche
You should totally keep using it
you are the devil
long sundial
:3
summer adder
you can’t even get rickrolled with that snippet
long sundial
Okay damn
summer adder
(it was a joke it’s a she)
long sundial
I don't read
summer adder
[aria-label=“Members”]{filter: blur(6px); transition: ease-in-out 0.6s;}
[aria-label=“Members”]:hover{filter:blur (0);}
can someone make sure that works so that it blurs the member list but unblurs it when hovered over
literally just wrote that via phone and my pcs not on so
need someone to test it
vestal field
css dedication lmao
yes it works
you just need to change the quotes to standard quotes
vestal field
no i mean " instead of “
summer adder
how to do on pc lmao
vestal field
i mean normally if you type on pc it should be "
but some phones and text editors will change it to the nicer looking version
summer adder
ah
long sundial
aaaaaah
solid ore
is there a way to check every area a class is used?
clear siren
not really, except set its background to red and see what happens
you can search the DOM tree too
but many elements might not be there or might not have a particular class set unless you have a dialog open or something
most classes seem to be only used for a specific thing, there are very few classes that appear in different parts of the app and the classname can maybe be an indication of what you might want to check out
summer adder
is there a way to check every area a class is used?
ctrl f in inspect, put the class name
closest you’ll get to that
@clear siren #🎨-css-snippets message
it’s that easy to select multiple classes?
clear siren
well yeah
summer adder
you just need to [class=“name] + [class=“name”]?
clear siren
no
summer adder
oh
summer adder
OHHHH I SEE
so basically
in a way you can like
(i’m gonna say it in html form)
<h1 + p>?
or am i stupid again
clear siren
uhh
summer adder
i’ll take that as i’m stupid
summer adder
ahhh
clear siren
if there are other elements in between you can use ~
the reason I wrote the selector like that is because the avatar decorations have pointer-events:none so the :hover doesn't work on them
so I can select the decoration when avatar is hovered, and there are 2 ways decors appear in the chat and in memberlist, sibling and descendant
summer adder
i see
solid ore
ctrl f in inspect, put the class name
okay thanks
cant find anything obvious so im just gonna hope and assume its fine
if anyone was curious, im j doing
.container_b03b4b
{
display: none !important;
}```what are you trying to do
as in tell me, dont tell me the code
might be able to help
also typically you dont need a !important, id only use a !important if something absolutely wasn’t changing at all
timber totem
is there a theme to make the name thing look bold again
summer adder
can probably do it yourself
.panelTitleContainer__7a748>.text-sm-normal_e612c7
if you make that those two classes bold, you just made your theme
i think the thing to do would be font-weight
you’d just need to find the right value to make it look like how it did
grand surge
.panelTitleContainer__7a748 .text-sm-normal_e612c7{
font-weight: your font weight;
}```What?
Just to be clear, he's not making two classes bold
This code makes every instance of .text-sm-normal_e612c7 that's a child of .panelTitleContainer__7a748 bold, in which case, it is very likely that the user area username is the only instance
solid ore
what are you trying to do
hide this thing, my code works, j idk if it breaks anything else
solid ore
also *typically* you dont need a !important, id only use a !important if somethi...
its cus im hiding a bunch of other stuff and some need it
also off topic but i feel like ppl here would know, is there an easy way to convert svg code to a png of a specific size?
teal cave
if it's just a one off type of task, use one of those conversion sites
if doing it more frequently, install inkscape and use its export to image function
if doing a huge number of files, use imagemagick
solid ore
thanks
summer adder
hide this thing, my code works, j idk if it breaks anything else
hide what thing
the welcome message?
solid ore
yea
summer adder
i can probably attempt to figure it out when i get home but that’ll be in around 4 hours
sup
solid ore
i mean my thing works u dont need to, but if u want to sure
summer adder
Just to be clear, he's not making *two* classes bold
also idk i just copied the classes that were used for the text glow in my theme
summer adder
i mean my thing works u dont need to, but if u want to sure
well if you already figured it out i won’t, was just offering since you originally needed help
summer adder
yo @clear siren
try smth out for me
[aria-label*=“nitro”]{display:none;}```i wanna see how much nitro related shit it’ll remove
see how much it breaks 
currently cant rn cause the next time im even able to touch vencord is in 4 hours
clear siren
doesn't do anything as far as I can tell
instead of display:none I set bg to red and color green !important and don't see it doing anything at all
clear siren
no
void helm
Hey, could someone help me with a problem I'm having? I'm trying to make my discord more compact and suitable for a small window size.
I've made it so the DM/Channels collapses and expands on hover. I recently also did this for member list on the right.
The problem I have is that it doesn't work with threads and I can't seem to figure out how to make it apply to thread user list as well.
As the first picture shows, the userlist is full width, and I can't work out how to make that one narrower like I have done with regular server member list etc
summer adder
i really hope you made it transition to show the channel names etc on hover
void helm
Yes, I did
summer adder
thank god
void helm
https://github.com/ZythDr/Discord-Stuff/blob/master/Mouseover Sidebar.theme.css
This is my little "theme" that I made to make it happen, it's not updated to include the member list yet though. and I barely understand any coding so it's probably very badly made.
But if you or anyone else have any idea how I can make the userlist inside a thread behave the same as the regular userlist, I would be very grateful ❤️
clear siren
something like this
void helm
@clear siren hmm yeah that kind of works, but it also makes the users themselves expand and collapse
But that's progress so thanks
until i mouseover them they remain like this
and because they're centered they are completely hidden when collapsed, leaving just the background showing
clear siren
huh
clear siren
did you add the min-width:none line too
void helm
I added this from what you sent
and commented out my previous userlist stuff to make sure that didn't interfere
void helm
actually sorry, it results in this
But it did also affect my regular userlist as shown in the previous pics
I suppose what you suggested and my previous stuff should be merged maybe?
clear siren
nah
void helm
As my old stuff already altered .container_b2c29c which yours did too
clear siren
I dunno what's going on here
oh
it has to be min-width:0 !important;
none doesn't work
I expected none to be same as 0 or unset but it isn't
void helm
Oh okay, I will change in my quickcss and check
It seems to work exactly as expected now!
Thanks a bunch for the help! ❤️
clear siren
np
void helm
I realise now that I never understood the difference between .element_name .element_name with and without a , to separate them
and i still kinda don't.... but I figure that was probably why I got nowhere on my own x)
clear siren
.element1 .element2 selects .element2 when it is a child or grandchild of .element1
with a comma it just selects both
void helm
Ah okay, thanks 😄 And yeah I know like 0 about coding so it's a struggle x)
But thanks again for the help! ❤️
clear siren
summer adder
just about done with my sensitive info code
/**
* @author Madeline
* @description Hide your embarrasing tabs! Unblurs on hover
* @name Content Blur
*/
[aria-label="Servers"]{filter: blur(6px); transition: ease-in-out 0.3s;}
[aria-label="Servers"]:hover {filter: blur(0px);}
[aria-label="Channels"] {filter: blur(6px); transition: ease-in 0.3s;}
[aria-label="Channels"]:hover{filter: blur(0px);}
[aria-label="Members"] {filter: blur(6px);transition: ease-in-out 0.3s;}
[aria-label="Members"]:hover {filter: blur(0px);}
.messagesWrapper_ea2b0b {filter: blur(6px);transition: ease-in-out 0.3s;}
.messagesWrapper_ea2b0b:hover {filter: blur(0px);}
.container__7c79d.clickable__2d589.hasBanner_e78601.bannerVisible__191f6 {filter: blur(6px); transition: ease-in-out 0.3s;}
.container__7c79d.clickable__2d589.hasBanner_e78601.bannerVisible__191f6:hover {filter: blur(0px);}
.title__9e2b0 {filter: blur(4px); transition: ease-in-out 0.3s;}
.title__9e2b0:hover {filter: blur(0px);}
.topic__16ae3.expandable_ddf73d {filter: blur(4px); transition: ease-in-out 0.3s;}
.topic__16ae3.expandable_ddf73d:hover {filter: blur(0px);}```blurs everything that you could not want people to see
unblurs on hover
supple jacinth
But that's progress so thanks
@media (max-width: 1024px) {
/* Channel list*/
.sidebar_ded4b5 {
width: 60px;
transition-duration: 0.125s;
}
.sidebar_ded4b5:hover {
width: 240px;
}
.membersWrap__90226{
position: absolute;
right:-200px;
transition: 0.125s;
}
.membersWrap__90226:hover{
right: 0px;
}
}
@summer adder
summer adder
why are
supple jacinth
summer adder
why are you pinging me about this
supple jacinth
why are you pinging me about this
Because you were in the conversation, sorry
void helm
Ah yeah separates them in terms of z-layers or something? looks cool
clear siren
it just moves it offscreen while keeping its dimensions the same so none of the content gets reflowed or anything
void helm
Yeah, I've considered trying to work out how to do that in the past, but it didn't bother me enough to where I tried to work it out x)
teal cave
How does Discord detect operating system? I'm trying to spoof macos so that I can fix some elusive bugs that only occur because of the macos titlebar.
That's not the only difference between platforms
Wish it was that easy lol
I am aware...
clear siren
.stickerButton__8af38 { display: none; }
south pewter
``.stickerButton__8af38 { display: none; }``
adding that to my quick css right this moment
summer adder
should have a cleaner one tbh
all that stuff clogs it
[class*="button"] {display: none;}
while you're at it
* {display:none;}
south pewter
`* {display:none;}`
summer adder
exactly
south pewter
lmfao
mortal mantle
I wonder if this much nesting is recommended
as if it would affect performance compared to normal selectors
deft niche
how can i change the gif on the loading screen? i figured out that the class is ready__61f2f but any attempts to modify the src or content didnt work
mortal mantle
you would have to build vesktop yourself and change that gif
deft niche
damn, so its not possible with just a theme?
mortal mantle
unfortunately no, you can't change the shiggy loading
the inner discord welcome screen can be changed however
deft niche
unfortunately no, you can't change the shiggy loading
shiggy?
it doesnt show shiggy for me, just the discord logo
mortal mantle
if you mean the inner loading screen with the discord logo then yes it can be changed
deft niche
i mean this, when you initially boot the client
deft niche
oh my god it works
except the original gif still displays
hmmm
ah there, changed the class and it works! thanks!
perfect :3
dark dragon
I wonder if this much nesting is recommended
The only time nesting becomes an issue is if you use it where you wouldn't normally use an ancestor selector
teal cave
Does css support .foo &?
deft niche
is it possible to add a local file to online themes?
dark dragon
Does css support `.foo &`?
Chrome does I think, not sure about Firefox. I imagine they're using vesktop so they're not stuck on an outdated version of electron
summer adder
perfect :3
i could’ve sent you my purple theme
i recoloured the loading thing to purple
could’ve probably used that code to replace the content with a url
void helm
@supple jacinth Thanks to you I've gone down this rabbithole of trying to make my left side behave like you suggested on the right 😡 But I suck too much to make it work properly, the background either disappears, or it breaks DMs list 😦 Any chance you'd be willing to help me get the left side act similar to the right?
As for the userlist, I edited your addition a little and now it behaves exactly as I expected and want it to.
@media (max-width: 1280px) {
/* User list */
.container_b2ce9c {
width: 0px;
}
.membersWrap__90226{
position: absolute;
right:-180px;
transition: var(--ClosingAnim);
transition-delay: var(--AnimDelay);
height: 100%;
}
.membersWrap__90226:hover{
right: 0px;
}
.chatContainer__23434 {
position: relative;
margin-right: 60px;
}
}
actually nvm, it doesn't act exactly how I expect it to still
void helm
It leaves a gap on the right hand side even when nothing's there. Is there a way to tie the chat width to whether the userlist is shown or not?
Also creates a gap just like the one in the picture, when in a DM
young swan
Anyone know why my code isnt working? Might be how i'm writing it but not too sure on it
:root {
--font-primary: 'scientifica' !important;
}
do it like this
@font-face {
font-family: "scientifica";
src: url("https://raw.githubusercontent.com/SayingLife/fonts/main/scientifica.ttf");
}
:root {
--font-primary: "scientifica", monospace;
}```nice font ngl
teal cave
It leaves a gap on the right hand side even when nothing's there. Is there a way...
Instead of just .chatContainer__23434 use .container__93316:not(:only-child) .chatContainer__23434
this way the margin is only set when chat has something next to it, ie. the user list
void helm
Instead of just `.chatContainer__23434` use `.container__93316:not(:only-child) ...
Works great, thanks!
young swan
do it like this
```css
@font-face {
font-family: "scientifica";
src: url("ht...
thank you so much it works now (also thank you for the font compliment :D )
teal cave
Chrome does I think, not sure about Firefox. I imagine they're using vesktop so ...
Yippee for all modern browsers https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector
void helm
Would you perhaps be able to help me work out how to replicate this behavior for the channels/DMs list as well? @teal cave
Every attempt I've made breaks stuff
Currently I have it so my channels/DMs list minimizes when not hovered, and then expands on hover. while i don't really mind this, it would be nice if it didn't shift around all the text in the chat, which is what Tnixc changed about my userlist, so it would overlap the chat rather than push it aside
This is currently all of the CSS I am using to achieve this.
tepid knot
anyone have code for themes?
teal cave
Would you perhaps be able to help me work out how to replicate this behavior for...
:root {
--ClosingAnim: 500ms; /*animation duration when cursor leaves sidebar*/
--ExpandingAnim: 500ms; /*animation duration when cursor enters sidebar*/
--ClosedWidth: 90px; /*sidebar width minimized*/
--ExpandedWidth: 240px; /*sidebar width expanded*/
--AnimDelay: 100ms; /*delay before the expand/collapse animation begins*/
}
@media (max-width: 1280px) {
/* Channels */
.sidebar_ded4b5 {
position: absolute;
width: var(--ClosedWidth);
z-index: 101;
transition: var(--ClosingAnim) var(--AnimDelay) var(--ClosingAnim);
}
.sidebar_ded4b5:hover {
width: var(--ExpandedWidth);
transition-duration: var(--ExpandingAnim);
}
/* Members */
.container_b2ce9c {
position: absolute;
right: -180px;
height: 100%;
transition: var(--ClosingAnim) var(--AnimDelay) var(--ClosingAnim);
}
.container_b2ce9c:hover {
right: 0;
transition-duration: var(--ExpandingAnim);
}
/* Chat */
.chatContainer__23434,
.container__11d72 {
position: relative;
margin-left: var(--ClosedWidth);
}
.container__93316:not(:only-child) .chatContainer__23434 {
margin-right: 60px;
}
}
Thanks! really appreciate it. And pardon me if I'm wrong or sound stupid here, but besides the reformat of the code, was the missing piece mainly z-index? @teal cave
on sidebar_deb4b5 I mean
teal cave
z-index controls which elements appear in front, so if you had trouble making sidebar appear above chat before, that was the issue
void helm
Well, I had trouble at least making the background of sidebar_deb4b5 appear, it would become transparent when I tried it myself
Even though functionally it worked, it just looked really scuffed
teal cave
Only reason I can really see that happening is if you were selecting not sidebar_ itself, but something inside it (eg. container__590e2)
teal cave
wew that's certainly a reading challenge
void helm
You could say that x)
the position and height were the only thing I added though
Anyway, works great now, thanks a bunch once more! ❤️
grand surge
background-color: var(--background-primary) !important;
}```
can anyone help? it used to change the background color of all users, after the update it stopped working
deft niche
```.video-3n15R6:not(.fullScreen-KhZZcz) .background-L8lGH6 {
background-color...
try re assign the class names
simple kiln
@import url("https://lazuee.github.io/css-snippets/discord/member-list/import.css");
@import url("https://lazuee.github.io/css-snippets/discord/channel-list/import.css");
@import url("https://lazuee.github.io/css-snippets/discord/sidebar-dm/import.css");
https://discord.com/channels/1015060230222131221/1130380901717639318
mortal mantle
Does css support `.foo &`?
Firefox has full support since v117, chrome only partially
mortal mantle
Where have you been all this time
slim pond
doing things
Idk, ive been kinda bored to use discord lately, so im just watching yt or listening to spotify
mortal mantle
like the usual Gnome dock?
mortal mantle
/* [[ ROLE PILLS ]] */
[class*="roles_"] {
justify-content: center;
}
.rolePillBorder__00c58 {
border-color: none;
}
.rolePill_ee1aa1 {
padding: 0;
overflow: hidden;
position: relative;
& .roleRemoveButton__737f2 {
position: unset;
width: 100%;
height: 100%;
& .roleCircle_bae511 {
border-radius: unset;
margin: unset;
position: absolute;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
text-align: center;
}
& .roleRemoveIcon__7f63d {
background: var(--profile-role-pill-background-color);
padding: 2px;
border-radius: 50%;
margin: -6px 0 0 -6px;
& path {
fill: #fff;
}
}
& + .roleName_d19d33 {
margin-left: 4px;
}
}
& .roleIcon__7599e {
margin-left: 4px;
min-width: 16px;
z-index: 1;
}
& .roleName_d19d33 {
padding: 4px;
& div {
font-weight: 600;
}
}
}
role pills with nesting
so far it works on my end
deft niche
is it possible to switch the server list location to the right of the screen?
summer adder
i’d say maybe grab the container of it and put it to the right but idk for sure
and i am NOWHERE close to my pc rn to test
i am 4h away from home
i’d test if i could, believe me
but from memory of trying to create an animation for the channel list, in theory it could work
mortal mantle
yes it is possible
summer adder
cause i remember getting the channel list to the right of the screen
at least part of it
mortal mantle
Use inspect and hover onto the main chat element to see which selectors divide the chat into multiple boxes (highlighted in dashed purple lines)
Then flex-direction: row-reverse
mortal mantle
I have that in my main theme config already, you'd either have to wait for me to head back to my computer or look it up yourself on github
deft niche
is it possible to do it with the member list too? i tried using the same method but no luck, probably just selected the wrong class kekw
.container__037ed, .container__93316
{
flex-direction: row-reverse;
}
this is what i tried
summer adder
member list on the left side? that’s gonna look weird 
deft niche
eh im just experimenting 
summer adder
i’ll give you my animation code, one of the classes is the member list
deft niche
i can grab the classes myself, im just selecting the wrong ones
summer adder
/* Animations, remove the code below if you don't want animations. */
.svg_ad7356 {
transition: ease 0.5s;
}
.svg_ad7356:hover {
scale: 1.15;
transform: rotateZ(-10deg);
}
.container_b2ce9c {
width: 60px;
transition-duration: 0.8s;
transition: ease 0.8s;
}
.container_b2ce9c:hover {
width: 250px;
}
.cozy_f5c119.wrapper__09ecc {
right: 0px;
transition: ease 0.5s;
}
.cozy_f5c119.wrapper__09ecc:hover {
right: -10px;
}
.button_afdfd9 {
scale: 1;
transition: ease 0.5s;
}
.button_afdfd9:hover {
scale: 1.4;
transform: rotateZ(-10deg);
}
/* END OF ANIMATION CODE, DON'T DELETE ANYTHING BELOW UNLESS TOLD*/```
summer adder
i thought you were moving the member list to the far left
not just to the left of the channel list
mortal mantle
Flip them enough times and you will get what you want
deft niche
holy shit thats so cool
slim pond
frosty crest
agreed im in love with this
also it makes me feel like my hidden channels one is bush league xD
mortal mantle
dablu holding monopoly for the sickest css snippets ever
void helm
@teal cave I've ran into some issues with the changes you suggested to my theme thingy. Could I DM you for some help fixing the issues? Don't wanna keep spamming this chat with my crap x)
void helm
```css
@import url("https://lazuee.github.io/css-snippets/discord/member-list/im...
Thanks for taking a look and making an alternative! Personally I like the old style/behavior more, but this looks cool as well!
summer adder
yooo can i get that snippet for personal use? i will NOT add it to my purple theme
just for clarification since i only usually ask for snippets to add to my theme
this time i just want that for personal use
void helm
```css
@import url("https://lazuee.github.io/css-snippets/discord/member-list/im...
Oh I'm dumb, realised now it's an older snippet completely unrelated to mine. But yeah looks cool!
summer adder
there we go
mortal mantle
Meow
south pewter
/**
* @name HideButtons
* @description Hides buttons on the discord chat bar
*/
:root {
/* show: show | hide: none */
--emojibuttonshow: show;
--stickerbuttonshow: none;
--giftbuttonshow: none;
--gifbuttonshow: none;
}
.emojiButton__30ec7 { display: var(--emojibuttonshow); }
.stickerButton__8af38 { display: var(--stickerbuttonshow); }
button[aria-label="Send a gift"] { display: var(--giftbuttonshow); !important; }
button[aria-label="Open GIF picker"] { display: var(--gifbuttonshow); !important;
}
gif and gift button removal only works in english clients
lunar hamletBOT
https://github.com/Trolo-1200/DiscordStuff/blob/main/css/HideButtons.css
**HideButtons.css: **
/**
* @name HideButtons
* @description Hides buttons on the discord chat bar
*/
:root {
/* show: show | hide: none */
--emojibuttonshow: show;
--stickerbuttonshow: none;
--giftbuttonshow: none;
--gifbuttonshow: none;
}
.emojiButton__30ec7 { display: var(--emojibuttonshow); }
.stickerButton__8af38 { display: var(--stickerbuttonshow); }
button[aria-label="Send a gift"] { display: var(--giftbuttonshow); !important; }
button[aria-label="Open GIF picker"] { display: var(--gifbuttonshow); !important;
}
fast plover
im curious if its possible for a theme to change the "Loading Vesktop" screen
ik you can change discord's own loading but that one im unsure
clear siren
nope
fast plover
fair enough
mortal mantle
im curious if its possible for a theme to change the "Loading Vesktop" screen
i...
yes
wait no
im dumb sorry
you would have to compile vesktop yourself for that
fast plover
Yeah figured that that would work
only reason i dont wanna do that is because....no updates
civic pagoda
this is so nice, although if youre in a lot of servers you cant access most of them since scrolling doesnt work >.>
love what you did though
oh also the padding for DMs is a little higher than guilds
rugged echo
you need to scroll holding shift, still kinda annoying
unless you have one of those horizontal scrolling mouses
vestal field
im curious if its possible for a theme to change the "Loading Vesktop" screen
i...
enable splash theming in vesktop settings
i think you can only change colors though
deep bane
yeah only colours
CenterCord (Very Very Very Very Very Scuffed)
* {
text-align: center !important;
}
.timestampInline__470e0 {
margin: 0 !important;
}
.timestamp_cdbd93,
.repliedMessage_e2bf4a,
.messageListItem__6a4fb,
.repliedTextPreview__90311 {
display: block !important;
}
.vc-smyn-suffix::before {
content: "\a(" !important;
}
.contents_f41bb2 img,
.replyAvatar_cea07c {
position: relative !important;
display: block !important;
margin: auto !important;
}
.nonMediaAttachmentsContainer_ca7b77,
.embedMedia_b473d2 {
margin: auto !important;
}
.repliedMessage_e2bf4a::before {
width: 0px !important;
height: 20px !important;
margin-left: 51.75% !important;
margin-top: 25px !important;
}
.repliedMessage_e2bf4a .vc-smyn-suffix::before {
content: "\a(" !important;
}
.repliedMessage_e2bf4a {
padding-bottom: 20px !important;
}
.repliedTextContentIcon__4dd82 {
display:none !important;
}
frick
i replied
by accident
too lazy to do anything about it 
deep bane
CenterCord (Very Very Very Very *Very* Scuffed)
```css
* {
text-align: center ...
image utilities is broken because of this for some reason lol
it's cause of * text-align center
deep bane
CenterCord (Very Very Very Very *Very* Scuffed)
```css
* {
text-align: center ...
Center Cord
(Very Very Very Very Scuffed Version, still makes image zoom broken )
div {
text-align: center !important;
}
.timestampInline__470e0 {
margin: 0 !important;
}
.timestamp_cdbd93,
.repliedMessage_e2bf4a,
.messageListItem__6a4fb,
.repliedTextPreview__90311 {
display: block !important;
}
.vc-smyn-suffix::before {
content: "\a(" !important;
}
.avatar__08316,
.replyAvatar_cea07c {
position: relative !important;
display: block !important;
margin: auto !important;
}
.nonMediaAttachmentsContainer_ca7b77,
.embedMedia_b473d2,
.embed_d3cbe3 {
margin: auto !important;
}
.repliedMessage_e2bf4a::before {
width: 0px !important;
height: 20px !important;
margin-left: 51.75% !important;
margin-top: 25px !important;
}
.repliedMessage_e2bf4a .vc-smyn-suffix::before {
content: "\a(" !important;
}
.repliedMessage_e2bf4a {
padding-bottom: 20px !important;
}
.repliedTextContentIcon__4dd82 {
display:none !important;
}
its finee
summer adder
literally all it is
simple kiln
just discover useful tool with ublock origin.
deep bane
no
but
svg {
background-image: url(https://i.kym-cdn.com/photos/images/newsfeed/002/539/093/2db.gif) !important;
background-size:contain !important;
}```i stole the gif
summer adder
i wouldn’t do background image
summer adder
may work but not the most efficient
deep bane
img {
content: url(https://cdn.discordapp.com/attachments/1121016771823018075/1185796482624917585/plink.gif) !important;
}
.messageListItem__6a4fb {
animation:plink 0.9s ease-in-out infinite alternate;
}
@keyframes plink {
0% {
transform: scale(1,1);
}
75% {
transform: scale(1,1);
}
100% {
transform: scale(1,0);
}
}
* {
background-image: url(https://i.kym-cdn.com/photos/images/newsfeed/002/539/093/2db.gif) !important;
}```wait til you realise what inspect element is
simple kiln
wait til you realise what inspect element is
nah, it's too hassle using inspect element.. and it's laggy sometimes..
deft niche
summer adder
it’s not a hassle to use inspect element at all my guy
i think you just got a skill issue
turbid mortar
would it be possible to specifically hide embeds of images that come with linking github repos using css?
exotic nexus
nah, it's too hassle using inspect element.. and it's laggy sometimes..
It is NOT laggy 😭
simple kiln
It is NOT laggy 😭
it depends, my potato laptop can't handle inspect elements for too long.
slim pond
it depends, my potato laptop can't handle inspect elements for too long.
that would be any of my pcs when opening devtools on normal discord for more than 10 minutes
vestal field
yeah thats why i switched to vesktop, vencord originally couldn't handle devtools for more than like a minute
mortal mantle
border radius hell
glad urchin
scary
mortal mantle
me be like
learns new css technique (here nesting)
abuses the shit out of it
slim pond
me be like
>learns new css technique (here nesting)
>abuses the shit out of it
for me it's bouncy animations
mortal mantle
my css is already lag enough to add any more fancy animations 😭
clear siren
I always forget nesting exists and never used it
glad urchin
question
clear siren
should try and see if I can find some use for it
glad urchin
amazing
slim pond
this is what i have for now
check mobilev2's user list
(though you have to update the classes)
glad urchin
check mobilev2's user list
wdym
glad urchin
can i see
ashen sable
welp, my theme got rejected by the BD website team
it apparently is equivalent to a background change
glad urchin
feel free to test this https://raw.githubusercontent.com/Panniku/vc-snippets/main/tabsv2_desktop.css
ashen sable
(it revamps Compact mode to be more usable)
how am I supposed to make people aware of it otherwise
do people even check other places when looking for themes
mortal mantle
if there is minimal change then it wont be approved
ashen sable
you can judge by yourself if this is a minimal change: https://gitlab.com/Grzesiek11/compactplusplus-discord-theme
mortal mantle
just upload it onto your github and pray someone would pay attention
like me
id never trust betterdiscord to publish my theme
i have specifically removed support for that client
ashen sable
you can judge by yourself if this is a minimal change: https://gitlab.com/Grzesi...
I mean, it is very focused - it changes the chat area and only does that if you have Compact mode enabled
but it's not equivalent to a background change ffs
mortal mantle
you should provide a preview image
mortal mantle
oak plover
teal cave
real tabsv2
Oh hey you get that orange outline around servers list as well, do you know what causes it?
glad urchin
Oh hey you get that orange outline around servers list as well, do you know what...
happens when i alt+tab sometimes
its probably accessibility or something
teal cave
That wouldg make sense
glad urchin
anyone know how to clean up these embeds
summer adder
depends on what part of it you want to clean
deft niche
is there any way to replace the circle in the pfp selector with another image? i want to add a crosshair in the middle for centering
glad urchin
is there any way to replace the circle in the pfp selector with another image? i...
its apparently just border and border-radius
it could be possible though idk how
frosty crest
i would just make the crosshair an overlay and make sure the z axis is above everything else
glad urchin
cant you background-image: url(something) too
frosty crest
that might work as well
deft niche
cant you background-image: url(something) too
yup, i just tried this and it worked, thanks!
.overlayAvatar__7ca47
{
background-image: url(https://raw.githubusercontent.com/cheesesamwich/3AM/main/crosshair.png);
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
}
the css if youre curious
glad urchin
vestal field
cool
frosty crest
oh you got to it before me ;-;
well nice
.editingContainer_fc64fa::after {
content: "";
position: absolute;
background-color: rgb(255, 252, 252);
}
.editingContainer_fc64fa::after {
width: 70%;
height: 2px;
top: 50%;
transform: translateY(-50%);
}```i feel like i do everything too complicated lol
deft niche
is it possible to change the background color of highlighted text but keep the color the same?
clear siren
yes
deft niche
how?
clear siren
wait testing first
clear siren
color: inherit or unset seems to work
deft niche
ah yeah inherit works, thanks
mortal mantle
anyone know how to clean up these embeds
do you want the colored border to instead become the embed background?
deft niche
i assume its not possible since i couldnt find anything about it online, but any way to round highlighted text? like the border radius of the background color
mortal mantle
what is highlighted text
glad urchin
do you want the colored border to instead become the embed background?
would be look but trying to go for mobile style
clear siren
according to MDN
mortal mantle
the selected text??
clear siren
yes
mortal mantle
::selection {
background: red;
}
mortal mantle
Real
vast delta
ooh i just had a really good looking idea
nice
deep bane
@glad urchin whats the code for the rounded embeds?
glad urchin
<@703634705152606318> whats the code for the rounded embeds?
.embedWrapper_c143d9 { border-radius: 12px; }
deft niche
<@703634705152606318> whats the code for the rounded embeds?
how tf did you get that cat there 
summer adder
how tf did you get that cat there <:what:1127124887459348500>
customrpc..?? dude it’s in the client you’re using
in an app called vencord
deep bane
whats cordven
summer adder
i am chill lmao
deep bane
i am chill lmao
grand surge
what is the source of this image
mortal mantle
.editingContainer_fc64fa {
&::before {
content: "";
position: absolute;
background: #fff;
z-index: 1306;
width: 2px;
height: 100%;
top: 0;
transform: translateX(-50%);
}
&::after {
content: "";
position: absolute;
background: #fff;
width: 70%;
height: 2px;
top: 50%;
transform: translateY(-50%);
}
}
figured out the settings for the other crosshair
now it should be centered
clear siren
bang
ashen sable
that'd be a cool feature to have
https://github.com/Vendicated/Vencord/pull/1700
clear siren
I made a small variation on it @mortal mantle
.editingContainer_fc64fa {
--xhairwidth: 2px;
&::before {
content: "";
position: absolute;
background: transparent;
backdrop-filter: invert(1);
z-index: 1306;
width: var(--xhairwidth);
height: calc(100% - 9px);
top: 4px;
left: calc(50% - (var(--xhairwidth)/2));
}
&::after {
content: "";
position: absolute;
background: transparent;
backdrop-filter: invert(1);
width: 70%;
height: var(--xhairwidth);
top: calc(50% - (var(--xhairwidth)/2));
}
}
adjustable xhair width and works also for bright pfps
mortal mantle
summer adder
i want to create a fade in from bottom animation for opening, and fade out to bottom animation for closing, for this panel. how could i do this?
summer adder
anyone
summer adder
mortal mantle
it's the middle of the night....
summer adder
its only 8 pm
mortal mantle
2:11 here, I'm eep
frosty crest
what is the source of this image
this is just on my pc
vestal field
i want to create a fade in from bottom animation for opening, and fade out to bo...
fade in from bottom??
so it would fly in from the bottom and fade in at the same time?
summer adder
what i mean is like an animation instead of it just appearing
frosty crest
this is a neat idea
vestal field
what i mean is like an animation instead of it just appearing
you can animate in but not animate out
because the element is removed by js
vestal field
well how would i animate it in?
.accountProfilePopoutWrapper_af829a {
animation: 0.5s ease-out animation;
}
@keyframes animation {
from {
transform: translate(0, 500px);
}
to {
transform: translate(0, 0);
}
}```sweet, thx
grand surge
this is just on my pc
dm the sauce
frosty crest
dm the sauce
i dont have sauce but ill send the file
but later bc i left my laptop at work
grand surge
Ah
grand surge
i dont have sauce but ill send the file
wait is there a difference between these two?
frosty crest
oh wait it might be on my cloud drive
frosty crest
wait is there a difference between these two?
sauce usually implies the origin
grand surge
Ah
grand surge
oh you sent it here
ty, tho mods are gonna come and berate us for getting off topic lol
frosty crest
yeah idc lol dm too much work
glad urchin
i fixed the embeds :3
now they look more mobile-like and not weirdly overflowing over the corners
previously
nvm, it breaks when there are both an embed and a sticker
is it possible to border-radius this via ::before / ::after
glad urchin
idk who does but you still need to consider the chances :3
deft niche
is it possible to border-radius this via ::before / ::after
probably
vestal field
this is my solution in midnight
i also tried a psuedo element way that used overflow hidden but it was just a bit complicated
vestal field
can you send
.embedFull__8dc21 {
border: 4px solid;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
}```assuming you already have something to set border radius
glad urchin
```css
.embedFull__8dc21 {
border: 4px solid;
border-top-color: transpar...
FIXED IT
.embedFull__8dc21 {
border: 4px solid;
border-radius: 12px;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
}
.embedFull__8dc21::before {
content: "";
position: absolute;
width: 6px;
background-color: var(--background-secondary);
height: 100%;
}
well if you're gonna do that then just remove my part because its not doing anything
glad urchin
well if you're gonna do that then just remove my part because its not doing anyt...
without yours / with yours
vestal field
strange that its doing that, maybe you need an overflow: hidden
deft niche
is there an easy way to change the color of the svg of the + button to the same as the other buttons?
solid ore
is there an easy way to change the color of the svg of the + button to the same ...
im not on my pc rn but i think this would do it
color: var(--text-normal);
}```you cant just override the fill, since it changes on hover
solid ore
i did smthng like that on my pc and it works tho, maybe it was .circleIcon__428dd
if not i can send it in approx 6 hrs
mortal mantle
you cant just override the fill, since it changes on hover
then change the hover color also
summer adder
you cant just override the fill, since it changes on hover
color: var(--text-normal);
}```@vestal field also i was wondering
would it be possible to blur the bg when the profile popup is open?
i wanna have it like smooth blur the bg
clear siren
it's possible
summer adder
any clue roughly on how i could do it?
heres the current code
.accountProfilePopoutWrapper_af829a {left: 708px; top: 50px; opacity: 90%;animation: fadein;}
.accountProfilePopoutWrapper_af829a {
animation: 0.5s ease-out animation;
}
@keyframes animation {
from {
transform: translate(0, 500px);
}
to {
transform: translate(0, 0);
}
}```.layerContainer_d5a653:has(#popout_41863)
{ backdrop-filter: blur(10px) !important; }
nop
clear siren
what
glad urchin
no blur for me
clear siren
oh the popout number randomizes
well use [id^=popout] then
but no idea what other popouts it might effect
clear siren
yeah need a more specific selector
.layerContainer_d5a653:has([class^="userPopoutOuter_"])
{ backdrop-filter: blur(10px) !important; }
same pushup bug
clear siren
doesn't happen to me
oh yeah they had the other css
I don't get it though why does that happen
clear siren
but why only when there's a backdrop-filter on the layer
glad urchin
because its applied on that layer ?
summer adder
hmm, what if i make it come down from the top
yeah that fixes the pushup bug
HOHOHOHOLY SHIT WHATS WITH THAT VIDEO
there we go
solid ore
you cant just override the fill, since it changes on hover
am home, what i sent first works for me
it only changes the color of the plus, not the background
summer adder
what they were saying is that when you were to hover over it, it would just go back to the original hover color
mortal mantle
it looks so clunky though 😭
summer adder
nothing i can do for the end
as when you close it, it removes the elements
i cant make an animation for it going away unless i use JS
and my ass is NOT doing that
i mean i adjusted the start a bit so you dont see it pop into existence
solid ore
you cant just override the fill, since it changes on hover
.circleIconButton_d8df29,
.circleIconButton_d8df29:hover
{
color: var(--text-normal);
background-color: var(--font-primary);
}```decided to revive mobilev2
slim pond
.member_b44d5d, .members__9f47b {
background: none;
}
.member_aa4760 {
background-color: var(--background-primary);
opacity: 1;
border-radius: 0;
padding: 0;
max-width: 264px;
width: 264px;
border-bottom: 1px solid var(--background-accent);
}
.members__9f47b {
max-width: 280px;
width: 280px;
}
.memberInner_a32223 {
background-color: transparent !important;
}
.member_aa4760:hover {
background-color: var(--background-accent);
}
.members__9f47b > .member_aa4760:first-of-type {
border-radius: 14px 14px 0 0;
}
.members__9f47b > .member_aa4760:nth-last-of-type(2), .members__9f47b > .member_aa4760:nth-last-of-type(1), .content__23cab > .member_aa4760:nth-last-of-type(1) {
border-radius: 0 0 14px 14px;
border-bottom: none;
}
.members__9f47b > .member_aa4760:nth-last-of-type(1) {
border-radius: 0 0 14px 14px;
border-bottom: none;
}
.membersGroup__85843 + .member_aa4760 {
border-radius: 14px 14px 0 0;
}
.member_aa4760:has(+ .membersGroup__85843) {
border-radius: 0 0 14px 14px;
border-bottom: none;
}
.membersGroup__85843 + .member_aa4760:has(+ .membersGroup__85843),
.members__9f47b > .membersGroup__85843 + .member_aa4760:has(+ div:not([class])) {
border-radius: 14px;
border-bottom: none;
}
.membersGroup__85843 + .member_aa4760:nth-last-of-type(1) {
border-radius: 14px;
border-bottom: none;
}
.offline_c1fd80 > div {
opacity: .3;
}
I have no idea how much of the memberlist code this is
but I do know that it has the border radii
mortal mantle
glad urchin
fear
mortal mantle
Shorten it with nesting
mortal mantle
does vanilla discord support it?
Screw vanilla, you're already in Vesktop environment
(though I think it might support)
slim pond
I mean, the whole point for me is that my snippets are compatible with any and all clients
slim pond
this is pretty much the finalized version of this
basically your entire guildbar in a button
(though the channels sidebar is 80px wider than the default, so you're still losing space)
simple kiln
is it responsive?
slim pond
somewhat, at least on my laptop
it's as responsive as a full height element being animated can be
solid ore
does anyone know what the parameters are for text-shadow
solid ore
ty
clear siren
also see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke for more fun text styling
devout umbra
there's a text-shadow generator
solid ore
every solution i can think of to a black name on a black background just looks horrible
both ugly af
clear siren
text-stroke could work
I've also thought about this, you could select specific colored usernames with their style attribute
clear siren
yeah why not just force the color to white or grey for them
clear siren
yeah
solid ore
well thanks
what are the downsides of using !important
like why not use it w everything in ur custom css
clear siren
I use it almost everywhere automatically
solid ore
so there's no cons?
clear siren
well not really
devout umbra
every solution i can think of to a black name on a black background just looks h...
when i was solving a similar problem of dark text, i used a light gray, non-blurred 1px and 2px stacked text shadow
devout umbra
like why not use it w everything in ur custom css
if everything is important, nothing is
what's the cons of shouting all the time? people will hear you either way
use it only if your css isn't applied without it
solid ore
if everything is important, nothing is
well yeah but in just ur quick css i mean
solid ore
when i was solving a similar problem of dark text, i used a light gray, non-blur...
will test, thx
solid ore
when i was solving a similar problem of dark text, i used a light gray, non-blur...
erm
{
text-shadow: 1px 2px 0 lightgray, 1px 2px 0 lightgray;
}```o
clear siren
just use -webkit-text-stroke at that point
devout umbra
use a css var for the color
solid ore
thats just a stroke then
devout umbra
#menuClassSubtext span[style*="#292929"] {
text-shadow: -1px -1px 0 #dedede, 1px -1px 0 #dedede, -1px 1px 0 #dedede, 1px 1px 0 #dedede, -2px -2px 0 #dedede, 2px -2px 0 #dedede, -2px 2px 0 #dedede, 2px 2px 0 #dedede, -3px -3px 0px #dedede30, 3px -3px 0 #dedede30, -3px 3px 0 #dedede30, 3px 3px 0 #dedede30 !important;
}
oh yeah the text stroke is rendered in the 'middle' of the edges of the glyphs so it does look bad
clear siren
https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order this fixes text stroke being ugly
devout umbra
```css
#menuClassSubtext span[style*="#292929"] {
text-shadow: -1px -1px...
also this is from scss so the #dedede30 might not work
you might need to use proper hex notation for the transparency or whatever
clear siren
but the paint-order doesn't work for text in chrome sadly
mortal mantle
also this is from scss so the #dedede30 might not work
No it does work
devout umbra
okay
