🎨-theme-development

[past bison]

WOW thank you!

[pure cairn]

Np, I remember having the same issue when I was using icons on this one

And I had to switch to webkit-mask-image

[past bison]

should I have both lines?

[pure cairn]

I had

-webkit-mask-image: whatever you want;
mask-image: -webkit-mask-image;

It works, but I don't know if that's the correct way of doing that

My approach to css is basically

https://tenor.com/view/doug-maclean-whiteboard-fa-fo-f-around-find-out-gif-27532870

[past bison]

yeah me too

and my code is ugly and long

[plain kelp]

Is that even valid?

[pure cairn]

It was working

Valid enough for me

[past bison]

looks valid to mee too

uses that variable that is stated before

so why not?XD

[plain kelp]

Because none of those lines makes sense to me

[pure cairn]

Had I removed one of the two, I would have had squares

With both, I had actual icons

[plain kelp]

webkit-mask-image without leading dash is not a valid property

[past bison]

maybe it should be:
mask-image: var(-webkit-mask-image);

[plain kelp]

And mask-image: -webkit-mask-image? That doesn't mean anything

[pure cairn]

^

Oh wait, webkit-mask-image had a starting dash

Forgot

/* Spotify Icons */
[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 {
  margin-left: 22px;
}
#vc-spotify-titles { 
  margin-left: 15px; 
}
[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:first-child::before,
[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(2)::before,
[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(3)::before,
#vc-spotify-titles > div:first-child::before,
#vc-spotify-titles > div:nth-child(2)::before,
#vc-spotify-titles > div:nth-child(3)::before {
  -webkit-mark-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  padding: 7px;
  margin-left: -17px;
  margin-top: 2px;
  content: '';
  background-color: var(--header-primary);
  position: absolute;
}```

[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:first-child::before, #vc-spotify-titles > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-music-4'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Cpath d='m9 9 12-2'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3C/svg%3E");
  mask-image: -webkit-mask-image;
}
[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(2)::before, #vc-spotify-titles > div:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-mic'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'%3E%3C/path%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'%3E%3C/path%3E%3Cline x1='12' x2='12' y1='19' y2='22'%3E%3C/line%3E%3C/svg%3E");
  mask-image: -webkit-mask-image;
}
[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(3)::before, #vc-spotify-titles > div:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-disc-2'%3E%3Ccircle cx='12' cy='12' r='4'%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='12' x2='12' y2='12.01'%3E%3C/line%3E%3C/svg%3E");
  mask-image: -webkit-mask-image;
}```

This was the whole code

[plain kelp]

I wouldn't expect mask-image: -webkit-mask-image to do anything, but if it works, sure

[past bison]

it says invalid property

[pure cairn]

¯_(ツ)_/¯

Works on my device, what can I say

[past bison]

so having just -webkit-mask-image is not working on every device? mask-image has to be there too?

[plain kelp]

https://caniuse.com/?search=mask-image

[clear siren]

so newer chromium/electron supports mask-image without prefix which is why you need to declare it, and the invalid value works for it because it will then use the prefixed one as it is valid

it's always been kinda weird working with prefixed and non-prefixed properties, afaict there's nothing in the spec about their importance so I guess it's just whichever comes last in the css

spec just says don't use them lol

[past bison]

I see, Vencord uses version 108

[pure cairn]

indeed, use emojis instead

[pure cairn]

/* Channel Bubble */
.wrapper__7bcde:hover .link__95dc0,
.side_b4b3f6 .item__48dda:hover {
  border-radius: 25px;
}
.containerDefault__3187b .modeSelected__487d6 {
  background-color: var(--background-tertiary);
  border-radius: 25px;
  margin: 1px 6px;
  text-align: left;
}
[class*="modeSelected__"] [class^="icon_"], 
[class^="containerDefault__"]:hover [class^="icon_"]:not(.icon_ef4486) {
  color: var(--main-color)
}
[class*="modeSelected__"] .linkTop_eaa673 {
  margin-left: -6px;
}```

there must be another way of avoiding the channel name to shift, without having to patch it later in the code, right?

[pure cairn]

nevermind, it's broken with covers that are not a square

maybe a max-width might help

hehe yup

/* Spotify Controls */
#vc-spotify-titles { 
  margin-left: 15px; 
}
#vc-spotify-titles > div:first-child::before {
  content: ":musical_note:";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-titles > div:nth-child(2)::before {
  content: ":microphone:";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-titles > div:nth-child(3)::before {
  content: ":cd:";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-album-image {
  border-radius: 10px;
  max-width: 43.2px; /* prevent larger covers from breaking stuff */
}
#vc-spotify-album-expanded-wrapper #vc-spotify-album-image {
  max-width: initial !important;
}
[class*=vc-spotify-shuffle-on] > svg, 
[class*=vc-spotify-repeat-context] > svg,
[class*=vc-spotify-repeat-track] > svg {
  fill: var(--main-color)
}```
now it should be working fine (?)

[clear siren]

you can use :emoji: there?

I expected you to just put the emoji symbol in

[plain kelp]

No you have to

I assume copypaste error

[pure cairn]

That's probably on discord, it converts emojis into :emoji: when I paste it here

Also, how do imports work? When I edit stuff on the quickcss file it changes on live, but what about when I change stuff on github? Do I have to reload discord to see the difference?

Or can I just toggle the quickcss on and off

[clear siren]

not sure what triggers refetch of the css

ctrl+r would probably be easiest

[pure cairn]

Ok, I'll stick to that one then, thanks

[solid ore]

remove the link, add it back

[clear siren]

that's weird that it does it for code too

[pure cairn]

no, that's probably because I made it a codeblock after pasting it here

[digital pier]

yeah if you paste it inside a codeblock it won't convert

but if you make it a codeblock after the fact it will

[solid ore]

at least w theme links this works, havent tested w @ import in qcss

[pure cairn]

Yeah

[plain kelp]

Which is dumb af, someone should nake a plugin

[digital pier]

maybe

[pure cairn]

To make discord emojis behave like unicode characters instead of strings/whatever they are?

[plain kelp]

That too, but mostly to not screw up copypaste

[pure cairn]

That would be cool

[pure cairn]

I'll try this one later, thanks to you as well

But yeah, it works fine on github

/* Spotify Controls */
#vc-spotify-titles { 
  margin-left: 15px; 
}
#vc-spotify-titles > div:first-child::before {
  content: "🎵";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-titles > div:nth-child(2)::before {
  content: "🎤";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-titles > div:nth-child(3)::before {
  content: "💿";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-album-image {
  border-radius: 10px;
  max-width: 43.2px; /* prevent larger covers from breaking stuff */
}
#vc-spotify-album-expanded-wrapper #vc-spotify-album-image {
  max-width: initial !important;
}
[class*=vc-spotify-shuffle-on] > svg, 
[class*=vc-spotify-repeat-context] > svg,
[class*=vc-spotify-repeat-track] > svg {
  fill: var(--main-color)
}```

there you go

[pure cairn]

/* Channel Bubble */
.wrapper__7bcde:hover [class^=link__],
.side_b4b3f6 .item__48dda:hover {
  border-radius: 25px;
  background: var(--background-primary);
  margin: 0px 6px;
}
[class^="containerDefault__"] [class*="modeSelected__"] {
  background-color: var(--background-tertiary);
  border-radius: 25px;
  margin: 0px 6px;
}
.wrapper__7bcde:has([class*="modeSelected__"]):hover [class^="linkTop_"],
.wrapper__7bcde:hover [class^="linkTop_"] {
  margin: 0px -6px;
}
[class*="modeSelected__"] [class^="icon_"], 
[class^="containerDefault__"]:hover [class^="icon_"]:not(.icon_ef4486) {
  color: var(--main-color)
}
[class*="modeSelected__"] [class^="linkTop_"] {
  margin: 0px -6px;
}```

ok, what am I missing here that it doesn't work?

currently hovering the selected channel

[remote flax]

is there a way u can make this so i can make it wider without making everything break?

when i try to change the widht its breaking the scroll bar and its not increasing the widht of the box of each user

[supple tartan]

hi, is there a way to display the images in their original form instead of a grid?
like this:

i have been messing around, but i couldn't do it

[plain kelp]

NoMosaic plugin

[supple tartan]

wow, thanks

btw, I would like to share a CSS snippet in #🎨-css-snippets , how can I do it?

[clear siren]

you need a role for that (snippet dev or regular)

you can get snippet dev by asking a mod nicely and also maybe proving what you're gonna post is decent by sharing it here first

[pure cairn]

probably

but since I can't even fix a snippet of mine, I'm not confident enough in editing something that's based on hardcoded stuff (memberlist max-width)

[deep bane]

what are you trying to fix

[pure cairn]

my life

/* Channel Bubble */
.wrapper__7bcde:hover [class^=link__],
.side_b4b3f6 .item__48dda:hover {
  border-radius: 25px;
  background: var(--background-primary);
  margin: 0px 6px;
}
[class^="containerDefault__"] [class*="modeSelected__"] {
  background-color: var(--background-tertiary);
  border-radius: 25px;
  margin: 0px 6px;
}
.wrapper__7bcde:hover [class^="linkTop_"],
[class*="modeSelected__"] [class^="linkTop_"] {
  margin: 0px -6px;
}
[class*="modeSelected__"] [class^="icon_"], 
[class^="containerDefault__"]:hover [class^="icon_"]:not(.icon_ef4486) {
  color: var(--main-color)
}
.unread__48cf4 { /* fix unread pill */
  z-index: 1;
}
[class^="containerDefault__"] [class*="modeSelected__"] [class^=link__] {
  background: none;
}```

I have this css, but I can't make it so selected channels names don't move on hover

so atm every time I hover the channel I'm currently in, the text moves

I tried with

.wrapper__7bcde:has([class*="modeSelected__"]):hover [class^="linkTop_"]

but it wouldn't work

[deep bane]

youre setting a margin to the element on hover

[pure cairn]

I'm setting a negative margin to compensate for the margin I set earlier

terrible idea, I know

[deep bane]

what are you even trying to make it look like

[pure cairn]

like this

even when I'm hovering the channel name

meanwhile this is how it looks now when I hover the channel

[deep bane]

This would stop the word from having the 3 dots

[class^=link__] .name__8d1ec.overflow__87fe8 {
  text-overflow:clip;
}```

[pure cairn]

mhm yes, but not really what I was looking for sadly

[deep bane]

if you're gonna do something with margins you're probably gonna mess up the icon placement

[pure cairn]

yeah but the issue is that part of the code is working

it's just the selected channel on hover that's messed up

[pure cairn]

before I had changed the code, this was how the selected channel would look at all times

then I added a hover effect for all the channels, while dealing with the margin I set earlier

so I set the negative margin to have the text stay in place

[deep bane]

.wrapper__7bcde:hover [class^=link__],
.side_b4b3f6 .item__48dda:hover {
  background: var(--background-primary);
}
[class^="containerDefault__"] [class*="modeSelected__"] {
  background-color: var(--background-tertiary);
  border-radius: 25px;
  margin: 0px 6px;
}
.wrapper__7bcde:hover [class^="linkTop_"],
[class*="modeSelected__"] [class^="linkTop_"] {
  margin: 0px -6px;
}
[class*="modeSelected__"] [class^="icon_"], 
[class^="containerDefault__"]:hover [class^="icon_"]:not(.icon_ef4486) {
  color: var(--main-color)
}
.unread__48cf4 { /* fix unread pill */
  z-index: 1;
}
[class^="containerDefault__"] [class*="modeSelected__"] [class^=link__] {
  background: none;
}```

[pure cairn]

well, now it won't move the selected channel name anymore

but it moves everything else

[deep bane]

doesnt for me

[deep bane]

.wrapper__7bcde:hover [class^=link__],
.side_b4b3f6 .item__48dda:hover {
  background: var(--background-primary);
}
[class^="containerDefault__"] [class*="modeSelected__"] {
  background-color: var(--background-tertiary);
  border-radius: 25px;
  margin: 0px 6px;
}
[class*="modeSelected__"] [class^="linkTop_"] {
  margin: 0px -6px;
}
[class*="modeSelected__"] [class^="icon_"], 
[class^="containerDefault__"]:hover [class^="icon_"]:not(.icon_ef4486) {
  color: var(--main-color)
}
.unread__48cf4 { /* fix unread pill */
  z-index: 1;
}
[class^="containerDefault__"] [class*="modeSelected__"] [class^=link__] {
  background: none;
}```

[pure cairn]

ok, now it works properly

it's just missing the border radius and the margin

which bring me back to the starting point

[deep bane]

i think you can figure that one out yourself

[pure cairn]

[deep bane]

then you're also gonna have to adjust it for multiple icons

typing indicator

¯_(ツ)_/¯

[pure cairn]

I don't use it

and I have pretty much all channel icons disabled, except vc chat button

[supple tartan]

okay, thanks. I will try it

[pure cairn]

Yeah, this is basically the same snippet, except it doesn't have the margin and border radius on hover for unselected channels
And if I add them, I simply go back to the beginning, which is my snippet

[deep bane]

why do you have a margin set on hover

[pure cairn]

for this effect

[deep bane]

yeah i cant tell what it does since its an image

[pure cairn]

1 sec, I'll send a gif

1st part is what it should do
final part is what it shouldn't

hope that's somewhat more clear

[deep bane]

you're trying to make the currently selected channel name skinnier on hover?

[pure cairn]

no

just the selection area

the text should stay the same

which is what it's doing for the unselected channels

I just can't make it work for the selected ones as well

[deep bane]

so the background?

[pure cairn]

yeah

[deep bane]

.wrapper__7bcde:hover [class^=link__],
.side_b4b3f6 .item__48dda:hover {
  border-radius: 25px;
  background: var(--background-primary);
}
.wrapper__7bcde:hover:not([class*="modeSelected__"]) [class^=link__],
.side_b4b3f6 .item__48dda:hover {
  margin: 0px 6px;
}
[class^="containerDefault__"] [class*="modeSelected__"] {
  background-color: var(--background-tertiary);
  border-radius: 25px;
  margin: 0 6px 0 14px;
}
.wrapper__7bcde:hover [class^="linkTop_"],
[class*="modeSelected__"] [class^="linkTop_"] {
  margin: 0px -6px;
}
[class*="modeSelected__"] [class^="icon_"], 
[class^="containerDefault__"]:hover [class^="icon_"]:not(.icon_ef4486) {
  color: var(--main-color)
}
.unread__48cf4 { /* fix unread pill */
  z-index: 1;
}
[class^="containerDefault__"] [class*="modeSelected__"] [class^=link__] {
  background: none;
}```

[pure cairn]

almost

now it's stuck there all the time

[deep bane]

it looked normal for me

go debug your other css i guess

[pure cairn]

already did, found nothing that would cause it to shift

the only thing left would probably be the theme

[deep bane]

then its your theme

cause i have nothing on and it worked for me

[pure cairn]

but the theme has no animations on hover by default

[deep bane]

modeselected

????

[pure cairn]

theme but with css disabled

[deep bane]

search for modeselected in your theme

[pure cairn]

it only has the hover selection

[deep bane]

...

[bleak gust]

this looks cool

[pure cairn]

[deep bane]

then its your other css

[pure cairn]

modeSelected is only in that section

[deep bane]

debug it whole then

[past bison]

do you ever finish a theme? 😄

I always find something still missing

[clear siren]

finish.. theme..? I don't think that's a thing that is possible

[past bison]

I want to finish it

so don't theme if you have OCD XD

[pure cairn]

Wish I read this beforehand

Because it's killing me

[clear siren]

I feel like most themers are somewhere on the ocd spectrum, the rest just use other people's themes

I can never use other people's themes, I need to make my own

[past bison]

[vestal field]

there are a few out there that i would actually use
but unfortunately most of them are either slow or not well maintained

[brazen spear]

Yo guys i need help

How can i change Shiggy in here?

[clear siren]

you can't

unless you build a custom build of vesktop

[brazen spear]

How the heck am i gonna do that XD

Can't i cange files?

[clear siren]

or wait for this to get merged https://github.com/Vencord/Vesktop/pull/355

[brazen spear]

Or i can add it :)

[brazen spear]

Hey how about i change my Vesktops files?

Can i?

[clear siren]

shiggy gif isn't a file that can be changed like that

[brazen spear]

Geez

[clear siren]

it's baked into some other file when building the source

[brazen spear]

But i did change the discord loading screen INSIDE the app

[clear siren]

yeah because that is part of the main window and css is applied to it

[brazen spear]

Thanks for the help

Bye

[past bison]

it's actually easy to do

[clear siren]

building vesktop? or replacing shiggy without building from sauce

[past bison]

building vesktop

[clear siren]

yeah I know

[past bison]

it's in the readme

[clear siren]

haven't done custom vesktop but I am running a custom vencord inside vesktop and that was easy too

[past bison]

I did, I changed the Icon, but next time I'll change it to white

[past bison]

https://github.com/s-k-y-l-i/discord-themes getting closer to perfect to me 😄

[pure cairn]

I feel like the settings/deafen/mute buttons being there all the time would annoy me

how about hiding them until hover?

[remote flax]

how do i make so when i make discord window narrow channel tab and members list also will get more narrow?

also does anyone have an icon for game activity that matches this ones?

[past bison]

good idea! thank you ^^

It could be done with the gif, sticker, emoji button too

[pure cairn]

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-g</title><path d="M467.51,248.83c-18.4-83.18-45.69-136.24-89.43-149.17A91.5,91.5,0,0,0,352,96c-26.89,0-48.11,16-96,16s-69.15-16-96-16a99.09,99.09,0,0,0-27.2,3.66C89,112.59,61.94,165.7,43.33,248.83c-19,84.91-15.56,152,21.58,164.88,26,9,49.25-9.61,71.27-37,25-31.2,55.79-40.8,119.82-40.8s93.62,9.6,118.66,40.8c22,27.41,46.11,45.79,71.42,37.16C487.1,399.86,486.52,334.74,467.51,248.83Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><circle cx="292" cy="224" r="20"/><path d="M336,288a20,20,0,1,1,20-19.95A20,20,0,0,1,336,288Z"/><circle cx="336" cy="180" r="20"/><circle cx="380" cy="224" r="20"/><line x1="160" y1="176" x2="160" y2="272" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="208" y1="224" x2="112" y2="224" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>```

[pure cairn]

You can probably set their width as %, so that when the window gets narrow they shrink as well

[bleak gust]

use a vw value

[pure cairn]

What's that?

Lmfao if I google it I only get Volkswagen ads wth

Oh, viewport width

[bleak gust]

yes

[pure cairn]

Isn't that just

Percentages

But fancier

[bleak gust]

% is just of parent container afaik

[pure cairn]

Oh, I see

[bleak gust]

Oh you could use % in the sidebar actually

on the left

[pure cairn]

Meanwhile this would only scale depending on the window width, right?

[bleak gust]

Yeah

[pure cairn]

Gotcha

Oh, so that's why my chat bar doesn't scale properly when I reduce the window size

[bleak gust]

I would use a min(max(minv, vw), maxv) or something for it

[pure cairn]

Because I set it as %

[bleak gust]

[pure cairn]

I mean, it works for me cuz I never really reduce discord window size

[deep bane]

@media (width < 1300px) {
  .content__4bf10 .sidebar_ded4b5 {
  width:15vw !important;
  }
  .container_b2ce9c:has(.membersWrap__90226) {
  width:25% !important;
  }
}```

[remote flax]

how do i put it on the place of the current one? that css didnt work for changing

[fast cipher]

try making the SVG the background image

[dire crest]

Could someone help me with some custom CSS code?

[remote flax]

background image? i wanted to change the game activity plugin icon inside the user bar

[solid ore]

wat do u need help with

[dire crest]

I'd like to add a hover fade to all components like this

When you move the mouse over these components, they fade, rather than instantaneously.

@solid ore

[solid ore]

oh i thought it was more simple lol idk how to do that

or if its possible

[dire crest]

Don't know what to do?

[solid ore]

idk css but ik super basic discord css snippets

[dire crest]

Do you know how to make mini animations in CSS to make Discord more beautiful?

[solid ore]

no

[dire crest]

[solid ore]

someone else probably knows

or u can learn urself

[past bison]

Could somebody help me with this selector, I'm having a struggle here.

.panels__58331 div:is(.container_d667ff, .container_6sXIoE,
 .panel_bd8c76, #vc-spotify-player, .wrapper__0ed4a):has(div):before```

I want to select only the first div, that has these classnames, and has a div inside. If I add **:first-child** in, it only wants to select the first element that doesn't have div inside, so in the end it selects nothing when there isn't a div inside.

:first-of-type doesn't work eighter

omg i think i might got it

[plain kelp]

You could add a that-selector ~ that-selector that undoes the changes

[past bison]

I SEE i found it on google too

[solid ore]

couldnt this be rly laggy if used excessively

[past bison]

I hope not xd

[solid ore]

lmao

[past bison]

.panels__58331 div:is(.container_d667ff, .container_6sXIoE, .panel_bd8c76, #vc-spotify-player, .wrapper__0ed4a):not(:empty)::before {
content: "";
}
.panels__58331 div:is(.container_d667ff, .container_6sXIoE, .panel_bd8c76, #vc-spotify-player, .wrapper__0ed4a):not(:empty) ~ div:is(.container_d667ff, .container_6sXIoE, .panel_bd8c76, #vc-spotify-player, .wrapper__0ed4a):not(:empty)::before{
    display: none;
}```

at least i got rid of the :has()

[glossy aurora]

is undoing with a ~ selector any slower than using :not()?

[clear siren]

probably negligible difference

as with most 'unoptimal' css

doesn't matter unless you use * in your selectors

that is something to avoid but anything else should be fine selectorwise, just use selectors that make sense to you

there's always many ways to write css that does essentially the same thing, if it works it works

[solid ore]

r those fine as long as i specify the parents

[clear siren]

I mean you shouldn't need a * in your selectors almost ever

[solid ore]

i usually do like a class*=name2 if the full class is like .name1.name2

[clear siren]

yeah that's fine

but doing .name1 * .name2 or something is gonna make the parser check pretty much all elements in the dom

[solid ore]

ohh no i never do that

[bleak gust]

I like this channel

It is full of people who can responsibly write CSS

My CSS is multiple days of technical debt

and I refuse to fix it to make my Discord client perform properly

100% complain about the issue I made 0% fix the issue

[bleak gust]

Husk me if you want.

[clear siren]

my performance hit is not my selectors, but all the gradients and shadows and blurs

[bleak gust]

i dont do blurs

[clear siren]

my vesktop uses like 15% gpu constantly

:D

[solid ore]

oh nvhhr maybe u can do this

not rly sure wat they wanted exactly

[bleak gust]

this is just a transition

[clear siren]

yeah not sure either, I'm assuming they want to add a background with border-radius on certain elements on hover but that's not a trivial task and certainly they don't want it on all elements

oh and yeah with a transition

* { transition: background .3s !important; }

that would do it for any element that already has a bg change on hover

[bleak gust]

i fucking hate css

[pure cairn]

aaaaaaaaaaaaaa

[remote flax]

how do i make so read all buttom fits the theme colors?

[bleak gust]

which button

the read all button?

[pure cairn]

I guess

[bleak gust]

fuck

is this me being stupid

[pure cairn]

#🎨-theme-development message

[bleak gust]

my dumb brain

[vapid osprey]

I was wondering if it'd be possible to make the option icons stick to the right side of the textbox as it expands vertically instead of taking up this much space

I imagine this is really hard to pull off but I made a mockup in Photoshop of what I'd consider "the ideal solution"

[vestal field]

so i was messing around and i've got no fucking clue how this even works 💀
but it does somewhat

.buttons_ce5b56 {
    margin: 6px 6px 6px auto !important;
    margin-left: auto;
    max-width: calc(40px * 6);
    min-width: calc(40px * 2);
    width: min-content;
    display: flex;
    gap: 6px 0;
    flex-wrap: wrap-reverse;
    flex-grow: 1;
    height: fit-content;
    justify-content: right;
}
.buttons_ce5b56 .buttonContainer__8b164,
.buttons_ce5b56 > .button_afdfd9 {
    width: 40px;
}
.separator__8424b {
    margin: 0;
    justify-content: center;
    width: 40px;
}
.separator__8424b::before {
    display: none;
}
.separator__8424b .innerButton_debeee {
    margin: 0;
}
.textArea__74543 {
    width: fit-content;
    flex-grow: 1.01;
}```

[vapid osprey]

it acts a little funky if none of the lines actually reach that far but if they do it works

[vestal field]

did you set the numbers in the calc()

[vapid osprey]

0_0

[vestal field]

the max-width one should be number of icons at max

sorry i forgot to mention it

[vapid osprey]

woaaaa

yeah that works!

[vestal field]

its still not perfect but its close

[vapid osprey]

I don't need perfect!
this is absolutely good enough

thank you!!

[vestal field]

aight cool

it was a fun challenge

[remote flax]

is there a way to revert back to discord default icons on the user panel on a theme that changes these icons?

[solid ore]

do u want the new icons or the old ones

[solid ore]

anyone know if u can limit how far u scroll on the channel list? i wanna make it so u cant scroll to the point where theres a gap between the user panel and the lowest channel

[pure cairn]

more suffering

[bleak gust]

AAAAAAAAAAAAAAAAAAAAAA

[pure cairn]

indeed

[bleak gust]

this seems like you shrunk something with css

[pure cairn]

oh, thankfully it seems like it's easy to fix

gotta change background from transparent to the quotes var

test
test but code

or just remove the border-radius and have it squared, that works as well

[solid ore]

i hide a lot of things

[bleak gust]

yop

[pure cairn]

nevermind, I lied

[bleak gust]

the way those scrollable lists work

is

they explicitly set the height after calculating the height

so they can delete stuff scrolled off the page

[pure cairn]

finally

[clear siren]

yeah this is the worst thing, especially if you make channellist more compact in height, it is easily visible when things pop in and out, and clicking on channels also changes the contents

I wish there was a way to make it just have all the elements all the time

and not just channellist, most scrollers do the same thing

[plain kelp]

I think the idea is that that would be pretty bad for performance

As if they care about that

[remote flax]

Did they update user panel icons?

[clear siren]

I mean I understand it for the chat and userlist but I doubt any server has so many channels that it would make any difference having the elements in the dom

[remote flax]

im talking about the icons that mute, turn off audio and settings

[plain kelp]

Yeah, agreed

[clear siren]

I wonder if that could be fixed with a plugin

[plain kelp]

Would probably be difficult to do that without breaking those scrolls that have genuine reason to be lazy

[clear siren]

https://tenor.com/view/boring-lazy-cat-lazytown-gif-5499802788995525116

[plain kelp]

That said, I haven't had any issues resizing those scrolls a bit, like expanding the user list a bit upwards so it looks better with transparency

[bleak gust]

discord runs so shit anyway that it wouldnt matter

[solid ore]

https://discord.com/channels/1015060230222131221/1181782804288245843

[iron smelt]

Doesn’t work right now @exotic nexus has to fix it

[devout elm]

u can still do this no?

like it says at tha top of the thread

[exotic nexus]

Idk

Cant test rn out of town

[devout elm]

weirdly it specifically is not affecting the user panel icons but is for everything else now

damn

[edgy sentinel]

i think because they added a different experiment that animates them on hover and such lol

it's really stupid

search for like animation or animated or smth and you should find the experiment

oh it's right there in your screenshot

desktop animated icons

[solid ore]

is that the reason for the new lottie stuff

[bleak gust]

they did add that but its not the cause afaik

[pure cairn]

but why would you

[solid ore]

i j noticed this fucks up for urls with no dashes

[solid ore]

without shiki

[solid ore]

also my window is narrower

[deep bane]

that's the problem

[solid ore]

...

it shouldnt be a problem tho

[solid ore]

works fine without the snippet

[deep bane]

it makes the code block fit the contents, normally its scaled with chat window or whatever

[solid ore]

is it possble to make it do both?

[deep bane]

add word-break: break-word;

[solid ore]

works, thank you!

[solid ore]

Better Mod View

@import url("https://raw.githubusercontent.com/tom22k/css-snippets/main/BetterModView/import.css");

Before: 1st pic | After: 2nd pic

[pure cairn]

that looks very good

thank you

[grand surge]

i just need the image from this theme

[grand surge]

i love u

like i actually love u

[pure cairn]

[clear siren]

oh you just wanted the image lol, I thought you wanted a theme that applies the image as background

[pure cairn]

b64 online converters are the best

[clear siren]

you don't even need one if you paste it in your browser and rightclick>save as

at least it works on firefox dunno about chromiums

[pure cairn]

huh

didn't know about that at all

[grand surge]

if i wanted to add that picture to a theme which theme should i use

like which theme would be the best for it

[deep bane]

there is literally an infinite amount of themes

[pure cairn]

take any theme
make background transparent
add image
voilà

[grand surge]

🫂

[clear siren]

someone should make a snippet for simple background image + transparent backgrounds on the main elements for those who don't want a full theme or want to use a theme but just do that modification on one

[pure cairn]

and secretly make it laggy

[deep bane]

the best way to make discord lag is to make a rule for every member

[clear siren]

that already exists, behold devilbro's basicbackground theme, only 7000 lines https://github.com/mwittrien/BetterDiscordAddons/blob/master/Themes/BasicBackground/BasicBackground.css

[deep bane]

thats ofcourse if the server youre currently in is big

[pure cairn]

basic
7k lines

[clear siren]

yep

[pure cairn]

dayum

[pure cairn]

nah, just let me cook something and it will lag for sure

still haven't figured out why the channel name shifts on hover when it shouldn't btw

[deep bane]

skill issue

[pure cairn]

indeed

[past bison]

I wonder if it's possible to convert and use --custom-theme-background (it's a linear gradient) as a color somehow with only css.

[vestal field]

clean

[bleak gust]

thank you so much

[limber igloo]

Yo what is that haha

[devout elm]

it covers up messages that dont get covered up by the message bar

but i

dunno wat part of the message could extend over there

i guess avatar decorations but that gradient existed before

[limber igloo]

Solved it with:

display: none;
}``` weird...

[grand surge]

Wow, thats epic bro

[limber igloo]

Yep I saw that and did not commented but it's indeed very epic, congratz !

What's the correct class to target the scrollbar's thumb ?

Talking about this:)

================================
Question #2

How can I make sure that all scroll bar's width are the same everywhere ?:

[dark dragon]

I'd hold out a few weeks before you consider messing with scrollbars, discord and chrome are both cooking at the moment so stuff might go a bit sideways. Here's a bunch of links though

chrome
::-webkit-scrollbar
scrollbar-width

[limber igloo]

How to make the folder's background border-radius 8px, the same border radius I achieve to put on the normal icon ? single server I mean

[limber igloo]

This is the current progression of my theme, I need some help tho :p

[past bison]

@limber igloo, @grand surge you can try it here: https://github.com/s-k-y-l-i/discord-themes 😊

[grand surge]

Thank you mguy 🫡

[pure cairn]

[class^=folderIconWrapper_] {
  border-radius: 8px;
}```

[pure cairn]

also it's a bit difficult to read the text in the chat bar, try changing color to something lighter

[tender hedge]

question how would i get this to work correctly on vesktop?

[tender hedge]

yeah

i do that

[past bison]

where did it fail?

[tender hedge]

transparancy doesnt quite work correctly on my side

[past bison]

do you have mica for everyone?

[tender hedge]

yeah

[past bison]

you also need to restart the app

[tender hedge]

i have done that multiple times

[past bison]

the acrylic theme is the second one?

[tender hedge]

it works correctly on vencord discord

[past bison]

hmm

i also like to enable everything here

mica for everyone settings

[tender hedge]

yeah

[past bison]

you have nothing in quick css?

[tender hedge]

i clicked

backdrop options

once

and it fixed itself

💀

[past bison]

nah cool xD

i hope you like the theme

[tender hedge]

its pretty cool

mainly because i also use arc browser

[past bison]

wow, it's so cool, never heard of it but it has a very similar design! 😮

even the rounded corners

(i got crazy with those :'D)

but i have to fix it a bit for the transparent theme too

i have to do these soon

[oak plover]

This looks super clean I’ll have to try this later

[past bison]

I also have an idea for those folder backgrounds to be transparent, but darker

[oak plover]

Was testing a floating panel design sometime last week, I think the bg turned out pretty nice

My phone compressed it a lot let me find a link

https://cdn.discordapp.com/attachments/123136820409139200/1217917714312728668/DiscordCanary_lMMVMAq40I.mp4?ex=6605c542&is=65f35042&hm=18040dad6f4d5bbbd10a9a07e567fa915c4e87272cb18fd673d9472a0c9ed1c2&

[past bison]

Can you help me with this a bit? I can't find out what is the mistake i did here. It should remove the second ::before. Maybe becouse it's not a sibling but it's a child? But i couldn't make it dissappear with a child selector eighter.

[plain kelp]

display: none does not make pseudo-elements not exist

It makes them display: none

[past bison]

that would work. But if i write display:none to the inspector, the pseudo element disappears

it doesn't apply the effect to the second div (.container_d667ff)

oh i got it working

changed again to >

and now it works... 😮

[glossy aurora]

disappear != stop existing, they're just invisible and no longer affect layout

[supple bone]

Chef kiss. I noticed you can only close the panel clicking out, might be great if you could close the panel by clicking again the user image if possible.

Not a fan of gradient elements, but the animations looks smooth. My fav user area atm, great work 👏🏻

[past bison]

tiny

[oak plover]

thanks. i like the idea of being able to also close it via. the user image, i'll see if i can change it

[limber igloo]

Nope

  border-radius: 8px;
}``` not working.

Still the wrong border-radius.

[clear siren]

add !important

[limber igloo]

Negative.

[clear siren]

hmm for me it works without !important too

[limber igloo]

wtf

Why it's not working for me ?

I mean, you are on Vencord, right ?

[clear siren]

well I'm on vesktop, but it shouldn't matter

[limber igloo]

Here's my complete CSS:

[pure cairn]

^

[limber igloo]

Anybody knows why it's not working for me ?

If we have the same Discord client...

[clear siren]

no idea

[tender hedge]

this plugin maybe?

probably not correct

but worth trying anyway

[clear siren]

doesn't matter, neither does betterfolders

[limber igloo]

SOAP

YES

I have this

should I disable it ? This is causing it ?

[pure cairn]

I have it enabled

and it works for me

[clear siren]

for me that works both enabled and disabled

[pure cairn]

^

[limber igloo]

god damit...

I mean...

WHY

[pure cairn]

most likely something else

[limber igloo]

yeah...

[pure cairn]

you only have that css?

no other themes?

[limber igloo]

Yes.

Nope.

[pure cairn]

odd

[pure cairn]

¯_(ツ)_/¯

[clear siren]

strange

[limber igloo]

It's pretty fresh, I installed all of this to install Vencord and to be able to code my OWN theme

[pure cairn]

can you check if this works

[limber igloo]

I'm struggling ..

[clear siren]

what does it look like in devtools

[pure cairn]

/* Transparent Folders */
[class^=folder_], [class^=folderIconWrapper_] {
  background: none !important;
}```

[clear siren]

inspect a folder

[pure cairn]

please, widen your styles section

[clear siren]

and also go up one element

[limber igloo]

I am a beginer, please haha

To the one who asked to wide HAHAHA

There you go hahahahahahahaha

[pure cairn]

definitely better than before

[pure cairn]

^

[limber igloo]

I find this funny I got a 32:9 mmonitor

What is an element..

I mean

[pure cairn]

select this again

and move your mouse up 1 row

[pure cairn]

and select the element above

[pure cairn]

yup, there's a
border-radius: 16px

[limber igloo]

Not in my code

[pure cairn]

for some reason it's not accepting the new value

[glossy aurora]

doesn't the strikethrough mean it's being overridden?

[pure cairn]

the 16px is not striketrough tho

[clear siren]

according to your devtools it is applying the correct radius

[limber igloo]

why my devtools crashes in black every 2m

[pure cairn]

this is what the radius should look like if it was completely overridden

but instead, your 16px is not 16px

why? I have no clue

[clear siren]

that's really weird

[pure cairn]

by the way, what's the difference (if there's any) between using :root and !important?

[clear siren]

:root is just a selector that means the same as html except with higher specificity

(so if you put rules in for both html and :root, the ones in :root are more important)

as for !important, it works as an override for any existing rule for a given target

[pure cairn]

mhm, and performance-wise?

[clear siren]

no difference

[pure cairn]

cool

so, if I had something like

/* Transparent Folders */
:root [class^=folder_], [class^=folderIconWrapper_] {
  background: none;
}```

and

/* Transparent Folders */
[class^=folder_], [class^=folderIconWrapper_] {
  background: red !important;
}```

at the same time

what would prevail?

[pure cairn]

I feel like I have missed a :root here

[clear siren]

the one with root is more specific, if you had any parent there it would win against the simple selector

any time you add something to a selector, it's specificity score increases

[pure cairn]

so there's less chances to affect something you don't want?

[clear siren]

well that too, but overriding existing css can be also done by just adding a parent to a selector without the need for !important but you have to check what the existing selector is, they might already have parents in them

for userstyling websites or ricing discord or other applications, it's easiest to just throw !important into rules

[pure cairn]

SeeleNoted

noted

thanks

[pure cairn]

🤔 How would one even select the "Note" box in profile popups

[nimble spruce]

I don't have write access to #🎨-css-snippets , so I'll just post it this channel.
Here's a few lines of CSS that compress the new star and new fork GitHub bot messages, without touching the PR and issue ones.

[class*="grid_"]:has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"]) {
  display: flex;
}

[class*="grid_"]:has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"]) [class*="embedTitle_"] {
  padding-left: 3px;
}

[class*="messageListItem_"]:has([class*="botText_"]):has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"]) [class*="contents_"] {
  display:none;
}

[class*="messageListItem_"]:has([class*="botText_"]):has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"]) [class*="groupStart_"] {
  margin-top: 0px;
}

[solid ore]

wat do u wanna do to it

[pure cairn]

Make it explod until betternotes plugin works again

[tender hedge]

btw @past bison game activity popup breaks the illusion of rounded popout

better screenshot

[past bison]

ah. i need to fix those, but i might know how to

[pure cairn]

AAAAAAAAAAAAA that's painful

[past bison]

vesktop doesn't have game activity so i always forget it to test

[tender hedge]

ah

[pure cairn]

Make the game activity button like a mute/deafen button

Like on Couve

[past bison]

btw it's voice + game activity

[solid ore]

i'll send u mine 1 sec

[pure cairn]

Much appreciated

Cuz I tried looking for the classes, but they were too generic and idk if there's a way to select just one with a specific text

[solid ore]

there isnt

[pure cairn]

Damn, so the :contains("text") stuff I found earlier was useless

[solid ore]

#user-context-note, /* user context menu: add note */
[class^=note_], /* notes */
[class^=section__]:has([class^=note_]), /* notes header in user popout */
[class^=profilePanel__] [class^=userPanelOverlayBackground__] > div:has([data-text-variant="eyebrow"]):last-of-type, /* notes header in profile panel */
[class^=userInfoSection__] > h1:last-of-type, /* notes header in user profile */
[class^=userPanelOverlayBackground__] > [class^=divider__]:not(:has( ~ [class^=divider__])) /* last divider before notes in user modal in dms */ { 
  display: none !important;
}

idk if the important is needed but i use it anyway

[pure cairn]

Thank you very much

[deep bane]

I have thiscss #user-context #user-context-note, .profilePanel__12596 .divider__2bbbc:last-child, .userProfileModalInner__7c87d .userInfoSectionHeader__31b66:last-child, [class^=userPanelOverlayBackground__] > [class^=divider__]:not(:has( ~ [class^=divider__])) { display:none !important; }

with betternotesbox

[solid ore]

there's always diff ways to do smthng, mine works ¯_(ツ)_/¯

[pure cairn]

Ooooh, last-child

Why didn't I think of that

[pure cairn]

funny

neither of these are working for me

[limber igloo]

Help with that please.

The border-radius isn't 8px

But If I put:

It's in red.

[pure cairn]

there's something else that messes up that element's border-radius, as we've seen earlier today

cuz it's not overriding it completely

[limber igloo]

Ok sorry I went back from an interview

What about those, they work in 8px super great

But only if I mouse hover them once Discord have open. Otherelse, they're not taking their good px radius.

Discord just oppened:

After mousing it hover:

(and it stays like that after)

[pure cairn]

idk, it's working fine for me

[limber igloo]

First of all, your folders don't look as mine.

Do you have servers in your folder just for fun ?

[clear siren]

yeah I had that too, [class^=wrapperSimple_] is when it's not hovered yet

if I remember correctly

[pure cairn]

I'm using the betterfolders option enabled

[limber igloo]

Let me try with betterfolders !

[pure cairn]

and that doesn't change anything

actually, it's this plugin

it's not betterfolders

and it still works with that disabled

[nimble spruce]

[class*="folder_"], [class*="folderIconWrapper_"] {
  background: red;
  border-radius: 8px;
}
foreignObject:has([class*="folder_"]) {
  mask: none;
}

try that

[limber igloo]

Wait, are you an alien or something ?

Working flawlessly

[limber igloo]

Yep, life saver 2, Thanks guys

[pure cairn]

/* Category Bubble */
:root {
  --global-1: var(--main-color); /* Label */
  --global-2: white; /* Font */
}
.containerDefault__23a29 {
  color: var(--global-2) !important;
  background-color: var(--global-1);
  border-radius: 25px;
  padding: 0px;
  margin: 2px 5px 1px;
  text-align: center;
}
.addButton__8b4f0 { /* + Button */
  color: white;
  right: 5px;
  position: absolute;
}
.icon_ef4486 { /* Collapse Arrow */
  display: initial !important;
  color: white;
  margin-left: 5px !important;
  transform: scale(1.5);
}
.collapsed__8fe3c .icon_ef4486 { /* Collapsed Arrow */
  transform: rotate(-90deg) scale(1.5);
}
.name__590d6 { /* Category Name */
  text-align: center;
}```

genuinely confused

[teal cave]

General Stuff 🫡🇺🇸🇺🇸🇱🇷

[pure cairn]

what the fuck is an aria label 🦅 🇺🇸

[plain kelp]

Screen reader stuff

[pure cairn]

yeah I'm joking

[pure cairn]

I'm still confused on why this happens

[solid ore]

try this

[class^=note_], /* notes */
[class^=profilePanel__] [class^=userPanelOverlayBackground__] > div:has([data-text-variant="eyebrow"]):last-of-type, /* notes header in profile panel */
[class^=userPopout] [class^=section__]:has([class^=note_]), /* notes header in user popout */
[class^=userProfileModal] [class^=userInfoSection__] > h1:last-of-type, /* notes header in user profile modal*/
[class^=profilePanel__] [class^=userPanelOverlayBackground__] > [class^=divider__]:not(:has( ~ [class^=divider__])) /* last divider before notes in profile panel */ { 
  display: none !important;
}

works without betternotesbox

[pure cairn]

Oh sh- I forgot to tell you it was working at the end

I just disabled the plugin

And added the snippet

Sorry

[solid ore]

oh lol

[pure cairn]

For some reason it wasn't working with the plugin enabled

[solid ore]

oh ik why, bc the plugin removes the notes when my snippet uses a :has([class^=note_)

[solid ore]

so this one wont work w it either

[pure cairn]

Gotcha

[solid ore]

broken plugin anyway

[pure cairn]

I think Nuckyz fixed it earlier

[solid ore]

i still see the header with it on tho, i j updated too

[pure cairn]

fix is not out yet

it got merged to dev branch

[solid ore]

ohh

[pure cairn]

#👾-core-development message

[past bison]

what the 😮

is it possible to solve?

if I add any kind of backdrop-filter, hovering on submenus just makes the menu jumping

[plain kelp]

backdrop-filter is pretty buggy ime

[past bison]

lol, but how to fix? xD

[clear siren]

I dunno I've had the same issue, there's probably a workaround but haven't even bothered trying to fix it

[past bison]

maybe i can apply it to sub elements or something

it's worse..

[plain kelp]

Try applying it to a parent element maybe

Discord's scrollers are finicky

[past bison]

it's the same, you can try it:

.layer_ec16dd {
    backdrop-filter: blur(40px);
}```
even with empty css, only this

[past bison]

also opacity is not working with backdrop-filter or something

this works

[fast cipher]

someone fixed it by adding the blur to an ::before element

wait...

[past bison]

i did that too

[fast cipher]

but does it work?

[past bison]

but blur with opacity did not work so i had to add another before before that xD

yup ^^

.menu_dc52c6.flexible__7055b::before <- gradient + opacity```

it needed a :has

othervise it selects other things too

[supple bone]

Hey, trying to tweak the theme I'm using and wanted to know a couple of things, I have basic understanding of CSS and tried some things but none worked so here I go:

1. First pic (server list): is there any way to make the elements in green boxes fixed position and the element in yellow box scrollable?

2. Second pic (user area): trying to set username and custom status + name tag inline, but it appears name tag doesn't fully show, third pic is default and name tag full text and inline just displays i...

Hope I've expressed myself well and feel free to ping me if it's doable

[plain kelp]

First: largely impossible without js

Might be possible to fake it, but I wouldn't bet on it

[exotic nexus]

the first is def possible without js

im not sure how you would even use js to make it work

[plain kelp]

Maybe with a position: fixed or similar

[exotic nexus]

^

[plain kelp]

By moving the elements outside the scroller, obviously

That's the obvious way to make things not scroll

[exotic nexus]

ohh i didnt think about that

for the bottom ones it would not be possible, but top would (i think)

nope they are all possible

they are already split out of the servers list

[plain kelp]

I think both top and bottom are equally plausible

[exotic nexus]

yeah its possible

ima do it

[plain kelp]

I'm personally more inclined to make plugins for structural changes rather than styles, but styles are certainly more convenient in some ways

[dark dragon]

You can just move the scroller to the servers element rather than the parent

[plain kelp]

Moving things out of the scroller or moving the scroller inside doesn't make much of a difference

[dark dragon]

Moving things out of the scroller is a fuck around that can have some unintended consequences. Just moving the scroller is cleaner and easier

[exotic nexus]

nvm im stupid

[plain kelp]

It's literally just a semantic difference; in both cases it changes from <Scroller><foo /><bar /><baz /></Scroller> to <foo /><Scroller><bar /></Scroller><baz />

Guess it differs if the scroller has other classes on it

[vestal field]

why is this a js discussion

[dark dragon]

Just unset overflow on the scorller, and set it on the div with aria-label="servers"

[vestal field]

.scroller__3d071 {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}
div[aria-label="Servers"] {
    height: auto;
    overflow: hidden scroll;
}```

yeah

wait i need to get rid of the scrollbar though

[vestal field]

for 1

#app-mount .scroller__3d071 {
    display: flex;
    flex-direction: column;
    overflow: unset !important;
    padding-bottom: 4px;
}
div[aria-label="Servidores"] {
    height: auto;
    overflow: hidden scroll;
    scrollbar-width: none;
}
div[aria-label="Servidores"]::-webkit-scrollbar {
    display: none;
}
.tutorialContainer_dc6fde {
    padding-top: 8px;
}```

[past bison]

I love it, want to do everywhere else too

[solid ore]

looks like theyre using spanish discord btw

[vestal field]

guhhhhh

[dark dragon]

Just select the direct child that isn't any of the others, or use a has

[plain kelp]

Just use the one child that has an aria-label at all

Though I strongly doubt that this handles things like scrolling to the guild when you ctrl-k

[solid ore]

"Servidores"

[vestal field]

i refuse to touch has

[dark dragon]

Has is beautiful. Solves all the world's problems

[dark dragon]

I've not checked it, but I think the download button on the Web client t might also have an aria label on it

[vestal field]

:not([class]) works

wait nvm there's another hidden div

[slim pond]

wanna see something cursed?

[supple bone]

Thanks y'all for the help, appreciate it

[supple bone]

Works perfect, thanks!

I'm using your midnight theme btw, loving it, great work

[plain kelp]

I feel like people here very often underestimate what scrollers do, inadvertently subtly breaking things as a result

Try ctrl-k to a scrolled-away guild with and without that snippet

[vestal field]

thanks

[vestal field]

really not a big deal

its just a snippet

[supple bone]

Ohh that's right, not working as intended with Ctrl+K. I can't fully test the snippet right now, I'll test it later and let you know if there's any major issue/breaking things, but the snippet's good enough for me

[bleak gust]

i love that blur effect

[echo frost]

why do people do ctrl+k instead of ctrl+t?
ctrl t is way more convenient for me to reach

(they do the same thing)

[past bison]

maybe they are left handed

[plain kelp]

Because ctrl-t opens a new tab

[echo frost]

not in discord

well ig if you're on web discord

do people really use web discord wtf

[plain kelp]

I do

[echo frost]

wtf

[plain kelp]

Download client has a lot of uncanny valley stuff like no f12 or shift-right-click, no hover for link target, and iirc it behaved kinda sus with opening links but I don't really remember in what way

[solid ore]

it does have hover for link target

[echo frost]

yeah

what's shift right click?

and ctrl+shift+i works for inspect element

[solid ore]

how do u ss tooltips

[echo frost]

i use sharex

[solid ore]

wats that

[pure cairn]

anyone knows the class for the "open chat" hover thingy that comes out in VCs?

[echo frost]

https://getsharex.com/

[pure cairn]

because I moved the chat button below, but the text still points up

[echo frost]

sharex is pretty advanced
if you just want a simple screenshot tool, sharex might not be for you

what do you use currently for screenshotting?

[plain kelp]

It does have tooltips for links sent in chat, yes

[solid ore]

windows default win+shift+s

[echo frost]

💀

[plain kelp]

But not the regular one down in the corner

[plain kelp]

Opens native context menu rather than website's custom one

[echo frost]

doesn't work for me

[plain kelp]

Sure, but I prefer it acting like every other website

[plain kelp]

Are you on chrome or something perhaps

[solid ore]

cant find it even w f8 break so idk

[echo frost]

also is there a difference to the hover links?

[echo frost]

opera gx

[pure cairn]

yeah, that's my issue

I managed to crash my discord 3 times in a row, but still no class

[solid ore]

thats chromium

[echo frost]

yeah ik

[plain kelp]

The difference is that it exists on every link, not only those where Discord Inc. decided to manually insert it

Basically, the problem with using the client that pretends not to be a website is that it doesn't behave like a website

[echo frost]

oh cool that works on firefox

[pure cairn]

aight, make that 4

[echo frost]

why do you even want to see those though?

[plain kelp]

Mostly familiarity

[echo frost]

fair

[plain kelp]

Not having it feels weird

[echo frost]

i manually reconstructed advanced tooltips for this :)

[plain kelp]

I'm not sure what that is but it looks nice

[echo frost]

(the tooltip is modified by a mod to get the prices)

(it's in minecraft)

hypixel skyblock

[pure cairn]

By the way, I tried it yesterday and it didn't work
So I'll just stick to ctrl + r

But thanks nonetheless

[iron smelt]

i was wondering if there was something that use Discord Variables for colour that i could “borrow” from

[solid ore]

lots of things use discord color variables

[iron smelt]

i just the name of something that uses it i could look at for help

[solid ore]

im on mobile rn but iirc the green add friend button on the friends list uses var(--positive-[smthng]-background)

[iron smelt]

found what i need i just borrowed for the holy notes (style) css

[solid ore]

can someone help me figure out how to get the the times for spotify activity to be on the side of the progress of the bar (like controls on the left) instead of underneath as they are rn? (using this tweaked theme of dablulite's redesign)

only need it for activity within user popouts (.activityUserPopoutV2__32328)

[pure cairn]

you found these via inspect element, right?
flex_f5fbb7 horizontal__992f6 justifyStart__42744 alignStretch_e239ef noWrap__5c413

[solid ore]

yeah

but position: static doesnt work like it does with the controls

[pure cairn]

with my very limited knowledge

is position: absolute a bad idea?

[solid ore]

that groups the 2 times together

[pure cairn]

so you basically wanna have the central bar smaller

with the 2 times on the sides

[solid ore]

[class^=timeBarUserPopoutV2_] {
  position: static;
  display: flex;
  align-items: center;
}

this is the closest i can get but it messes up the progress bar

[solid ore]

ya

[pure cairn]

how about scaling it down?

[solid ore]

scaling what down

[pure cairn]

the progress bar

transform: scale(0.7);```

idk

the issue would be have it adapt to different song durations

although who in the world would listen to a 12h long song?

[solid ore]

this was a good idea, i did this ```css
[class^=barInMultiLine_] {
width: 75%;
margin-left: 35px;
}

[pure cairn]

yeah, that works as well

[solid ore]

now i j need to move the times up or the bar down

[pure cairn]

or both

[solid ore]

yea

wait brb

[pure cairn]

wtf, I had a snippet to remove my own listen along
I edited it but didn't work, so I went back to the old version
and now it's not working anymore

ok, it's working again
weird

[solid ore]

okay im back, ended up with this btw ```css
[class^=timeBarUserPopoutV2_] {
justify-content: center;
display: flex;
}
[class^=timeBarUserPopoutV2_] [class^=barInMultiLine_] {
width: 77%;
position: absolute;
}
[class^=timeBarUserPopoutV2_] [class^=flex] {
margin-top: -1%;
}

perfect

[pure cairn]

looks good

[pure cairn]

[class*="buttonsWrapper_"] [class^="disabledButtonWrapper__"] { /* hide your listen along */
  display: none !important;
}```

[solid ore]

thankss

wait

i think ur first one should be *=

[pure cairn]

right

the old one only had the 2nd class, but I wanted to be more specific

in case it was affecting something else

[pure cairn]

and also

[class^="activityUserPopoutV2__"]:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 {
  margin-top: 3px; /* fix details being horizontally misaligned */
}```

it makes details centered to the image

idk how to explain

[solid ore]

yea

thx

[pure cairn]

my OCD wouldn't stop screaming without it

[solid ore]

it think this is best using ```css
[class^=activity] [class*=buttonsWrapper_]:has([class^=disabledButtonWrapper__])

gets rid of a gap thats created

[pure cairn]

oh yeah

because of the margin at the bottom, right?

[solid ore]

mhm

[solid ore]

and i added the activity to fix this

[pure cairn]

[solid ore]

also bc theres activityProfile and activityUserPopout

[pure cairn]

works perfectly

[solid ore]

personally i prefer the classic spotify look

also hollow knight soundtrack is so good :)

[pure cairn]

I think that having the song duration in a user popout is kinda useless

[solid ore]

¯_(ツ)_/¯

[pure cairn]

because it's not like you can affect it from there, and also it's in the spotify controls panel

[solid ore]

sometimes i like to see how much left someone has on a song in case i wanna listen along for a bit

[pure cairn]

absolutely

[pure cairn]

fair, I just deduce it from the bar filling

[exotic nexus]

W music taste

[pure cairn]

why does it randomly keep happening

and a ctrl + r fixes it

what the hell is going on

[plain kelp]

Does vencord periodically refetch themes to update them?

Because it sounds quite plausible that it does that but fails to account for encodings, which could cause issues like that

[exotic nexus]

Everytime you restart

[plain kelp]

But not like every 24h without restarting?

[exotic nexus]

It just inserts the theme stuff from the url every startup

It doesn’t cache it

[plain kelp]

Ok

[pure cairn]

yeah it's not due to a restart

because, on the contrary, restarting discord fixes it

it just happens... sometimes

no idea why

[exotic nexus]

You can try it yourself, make a theme, put it on github, put it in theme links, update the theme on github, then restart and see the changes

[pure cairn]

I already do that with quickcss imports

although it doesn't always update them right away

[plain kelp]

It's clearly an encoding issue, but unclear what causes it

[pure cairn]

it's supposed to be an emoji

3 different emojis, to be precise

[plain kelp]

Looks like utf8 of an emoji misinterpreted as latin1

[pure cairn]

https://raw.githubusercontent.com/AftmostSeeker80/css-snippets/main/spotify-tweaks.css

[plain kelp]

Or perhaps some different single-byte codepage

[supple bone]

Can anyone ping me? I'm testing some things

[plain kelp]

@supple bone Sure

[supple bone]

Perfect, thanks

[pure cairn]

I'll bump this, in case anyone knows how to get it

tried with f8break but I couldn't find anything

[nimble spruce]

tooltipContent__79a2d

tooltipPointer_a79354, tooltip__01384, tooltipTop__5f583, TooltipPrimary_e5c00d, and tooltipDisablePointerEvents__14727 may be of use too

sometimes I find that throwing setTimeout(function(){debugger;},5000); in the Console and hovering over the element is easier than using f8break

Ctrl+F searching is your friend once you've got the window paused

Is there a way to re-order HTML elements using pure CSS? I've moved and resized the window buttons to appear more like the top toolbar, but opening threads and forum channels kinda ruins the illusion.

[vestal field]

yes, literally set order: 1;

the ones with order set will take priority

[nimble spruce]

These are in two entirely different locations in the HTML though

These are the Windows 10 close, minimize, and maximize buttons

[vestal field]

then you can't do anything but position them close to each other

[clear siren]

you can do margin or position hacks but generally not a good idea

I've done it for some elements

[solid ore]

anyone know if its possible to change 24hr timestamps to 12hr + am/pm w css?

[fast cipher]

just change your time zone

[solid ore]

?? that doesnt affect it, its set by the language (US is am/pm while UK is 24hr), but i prefer UK

[fast cipher]

hmmm

probably Impossible or very hard to do with just CSS

[solid ore]

ah ok, thanks

[pure cairn]

Thank you so much

[grand surge]

I wanna learn how to use dev tools, do you have like websites or videos to help me get started or should I directly start messing around with making a theme?

And css*

[bleak gust]

working on a practical project is best way to learn stuff

imo

so

go open devtools, start looking around

maybe take a look at some basic CSS reference

[grand surge]

So like a theme and stuff?

[bleak gust]

and make sure to use :has

:has is very useful

and new

new(ish)

[grand surge]

Ok, thanks

[pure cairn]

Yeah, the quickcss editor doesn't like it very much

So it will probably count it as error

[solid ore]

imo just find a snippet u find useful then go in devtools to see which elements its selecting, mess around with the properties in the snippet to see wat does wat

and def read the css docs

[grand surge]

🫡🤝👍

[pure cairn]

Basically

https://tenor.com/view/doug-maclean-whiteboard-fa-fo-f-around-find-out-gif-27532870

[grand surge]

Very accurate 💀

[pure cairn]

that's how 80% of the snippets I use came to be

you can imagine the performances 📉

[pure cairn]

and here it goes 💀

[steel scroll]

is this a public snippet?

[pure cairn]

yes

[steel scroll]

it doesnt look like it for me 😞

[pure cairn]

the progress bar in the background is added by Couve

[steel scroll]

ahhh

I see

[pure cairn]

forgot to mention that

my bad

[steel scroll]

thanks

[pure cairn]

ngl I could make a Couve-less version

I guess it would be just a matter of moving the emojis

oh wait, I know why it looks like that

[pure cairn]

can you try restarting discord and see if anything changed?

that issue always pops out when an album cover is not a perfect square

I did manage to (almost) fix it for the spotify controls panel, but it's still weird for covers that are too small

[pure cairn]

https://raw.githubusercontent.com/AftmostSeeker80/css-snippets/main/spotify-tweaks.css
couve-less version (wip)

[pure cairn]

ok, I might have finished it

[teal cave]

does there exist a list of theme requests (that aren't stupid)

[pure cairn]

no idea

ugh I hate when imports don't update on reload

[plain kelp]

Sure, here it is ```json
[]

[teal cave]

lmfao

[pure cairn]

I always have to wait for like 2-3m after I edit something on github

is it normal?

[teal cave]

yeah but also why are you editing on github that's

[pure cairn]

good point