User & Activity Panels Redesign

[steep kettle]

this looks amazing

[lunar gyro]

sadly for me it breaks when another user is in vc

I've also tried having it be the only one active

This one has nothing broken just doesn't align with that chat bar

[glass mantle]

This is really good, I love the spotify background, the user panel quests don't have bottom radius though, other then that it's amazing

[round ferry]

thanks for letting me know, ill take a look at it

[round ferry]

ngl i forgot about the quests, im gonna add it later

[round ferry]

fixed now!

[round ferry]

i couldnt reproduce the issue myself, but i added a potential fix. lmk if its fixed now.

[lunar gyro]

alright

its fixed

This is just a minor thing but if possible could you make them resizable, its 2px off for me 😭

[round ferry]

should be fixed now

[lunar gyro]

sorry to bother again lmao 😭 its now 1px off

[round ferry]

brother pulling out the super lens 😭

[lunar gyro]

lmao, yeah sorry about that the smallest things bother me sometimes

[round ferry]

nah i get you lol, i be like that sometimes as well. should be fixed now

[lunar gyro]

ight i shale see

it seems to be unchanged i'll see if i did anything wrong

[round ferry]

might need to wait a minute until it updates, make sure to restart your dc

[lunar gyro]

alright

it went through, its fixed lmao

[round ferry]

finally lmao

[lunar gyro]

once again sorry to bother for such a small thing 😭

[round ferry]

nah u good xd

[lunar gyro]

hope you have a good rest of your night/day

also i really enjoy your other snippet as well

works with irc colors

[round ferry]

nice to hear that! u have a great day as well

[lunar gyro]

and this one works great with [Don't cover server list with panel/Revert user panel area](#🎨-css-snippets message)

[obsidian dove]

This looks super cool, but I cannot get it to work at all for me. I've disabled every other thing in my quick css import, and nothing changes. Do I need to have discord in a specific compact-ness state?

[round ferry]

what exactly isn’t working? and can you tell me your discord appearance settings?

[potent tusk]

thats actually pretty much what i wanted to achieve with my snippet

i like it :3

just one thing: user panel border is broken if you use a nameplate

i think i had a fix for that in my own snippet, lemme look

    border: 1px solid var(--border-subtle);
}```

i believe it should be this

[round ferry]

i actually tried yours first, but it had some small issues so i just ended up making something like it myself. it was also my first time tinkering with vencord's quick css, its kinda fun ngl

[round ferry]

thx for letting me know! is the border just not showing when a nameplate is applied or what exactly is the issue?

[potent tusk]

the border is offset in that scenario

for some reason, dont ask me why cuz idk either

it just is

[round ferry]

oh yea i see

[trail olive]

This is so cool

[round ferry]

lmk if its fixed now, tried a different approach but i cant test it cause i dont have a nameplate

[obsidian dove]

Nothing happens at all when i add the @import line, and copy over the root: stuff.
Onyx colouring for discord, Default UI density

[round ferry]

did you put the import at the top of your css?

[obsidian dove]

yep

[lunar gyro]

is your quick ccs on?

[obsidian dove]

yeah, other stuff is working

[lunar gyro]

huh

[lunar gyro]

is there another import above that?

[obsidian dove]

there is 2, yes

[lunar gyro]

it should be working then i have like 7 imports

[obsidian dove]

one is /**/'ed out

but the one for this is not commented out

[lunar gyro]

could i see the commented out one?

[lunar gyro]

try swaping places with the imports

like put this on on the top of the others

here's how mine looks like

[obsidian dove]

nothin

[lunar gyro]

backup your ccs and try just this one

[obsidian dove]

it might be working

one moment

[lunar gyro]

alright

[obsidian dove]

it appears to be working, bar the spotify plugin

[lunar gyro]

with all of your ccs?

[obsidian dove]

this is all i have rn

with just that, the spotify popup does not appear

[lunar gyro]

tbh i don't use spotfiy so i can't really help with that part

[obsidian dove]

fair

[lunar gyro]

it could just not be working idk

[obsidian dove]

I do like how it looks now, so im happy, thank you for your assistance 🫡

[lunar gyro]

np

if it stops working when you put ccs back in lmk

some imports like to be on top of other imports

Compact / Hide Visual Refresh Title Bar this one will not work if its not on the top

like the very first import

[obsidian dove]

@import url('https://raw.githubusercontent.com/surgedevs/visual-refresh-compact-title-bar/refs/heads/main/desktop.css');
this one?

[lunar gyro]

yeah and hidden

[obsidian dove]

seems to be working for me when its not on top

[lunar gyro]

huh

[obsidian dove]

okay it works better when on top

i see

[lunar gyro]

i guess you're right

it might just be the hidden one that does it

[round ferry]

it only works if you have the "SpotifyControls" plugin enabled

[obsidian dove]

ah, tysm

[round ferry]

np

[obsidian dove]

that immediately fixed it lmao

[vagrant shadow]

Ah damn, I stopped using Spotify months ago due to their horrid business practices (Glad I did now too, with their current sponsors).

Is there anyway to have that for other media? My RPC already using the listening API is there a way to make that show up in the corner like that one does?

[round ferry]

well i can only edit whats already there. the vencord team would have to add such functionality first

[vagrant shadow]

Ok, I was just checking as I didn't know how it was populated

[cedar swallow]

Is it possible to make this work for PreMIiD/Soundcloud?

[glass mantle]

It wouldn't be possible with just css

It'd have to be a plugin

[cedar swallow]

darn

[lone bison]

beautiful

[mystic cloud]

Thanks for this btw.
Could the height be changed on the Quests? It cuts off the claim button.
I'm currently using bellow as a fix

.mask__0d616 {
  height: auto;
  max-height: 150px;
}```

[round ferry]

thx for letting me know, i’ll look into it.

[steep kettle]

Could this be modified to work well with tabs v2 and a custom vencord player

[round ferry]

what exactly are you referring to with "tabs v2" and "custom vencord player"?

[steep kettle]

ill give u a pic

this is what I have

its currently not very compatible

[round ferry]

well they are conflicting each other pretty hard so i cant really do much here. you would have to settle for one of them probably

[fading thorn]

How did you get rid of the bottom grey shadow on the background?

[lone bison]

Bottom grey shadow?

[fading thorn]

Yes, this

[fading thorn]

Nevermind, found it

[austere kestrel]

How can I edit the height of these panels?

the voice chat one as an example

[glass mantle]

You have to edit by class name, your game/activity panel is activityPanel__5e434, your call container is container_e131a9, and your user is container__37e49

example to edit the call container's height
.panels__5e434 .container_e131a9 { height: 120px; }

[austere kestrel]

oh ok tysm

[feral mauve]

Does anyone here know how to decrease the distance between these buttons?

I am using this redesign but the distance is still so wide

[feral mauve]

Figured it out

  gap: 0px; 
}

div[class*="avatarWrapper_"] {
  padding-left: 0px;
  padding-right: 0px;
}```

Along with this #1430168175999451216 message

[distant wasp]

is it me or does the css not work anymore

nvm

[drifting slate]

hello people, i'm trying to make the panel completely transparent, so far i found out that even if you reduce the whole element's opacity to 0, there's still a whole invisible chunk blocking the channels/servers in that area. was wondering if there's a way to make it truly transparent so can see stuff through it

[potent tusk]

ik how to do that

ill do it later tho im not on pc rn 😭

ill ping u :3

[drifting slate]

thank you

[potent tusk]

try this

  margin-bottom: unset;
}```

[drifting slate]

ey, that did fix the server background but can't figure out how to make the channels transparent, only way it worked is if i set the scroller overflow to visible but then that doesn't let me scroll

[potent tusk]

wdym? do you want the panels to be transparent?

i dont really understand sorry,,,,

[drifting slate]

yes

like in the screenshot

you can see through the panel

[potent tusk]

yeah

ill think of something in a sec

[drifting slate]

[potent tusk]

lowkey no clue how to do it, nothing seems to work without breaking scrolling lol

i might be dumb though

[drifting slate]

augh

no worries

thank you for trying though and thank you for the server thingy

[potent tusk]

np :3

[steep kettle]

what are u currently using

[drifting slate]

the code im using for the panel is

 .container_e131a9 {
  background-color: none !important;
  background: linear-gradient(201deg, #ff840064 20%, #4d0dcd5e 100%) !important;
  backdrop-filter: blur(1px) !important;
}

.visual-refresh nav[class*=guilds_] {
  margin-bottom: unset;
}

.scroller__629e4 {
overflow: auto !important;
}

.panels__5e434 {
  background: none !important;
  background-color: none !important;
  border-radius: 2;
  border: none;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 7px
}

to make it transparent i set the overflow to visible but again that impairs scrolling

[steep kettle]

ok

will tinker

the problem is that the plugin expands a container behind it

[drifting slate]

yes

you can reduce its height and it becomes invisible but it also applies to the panel itself

[steep kettle]

what theme are u using

[drifting slate]

mix of clear vision and custom css

[steep kettle]

can I have file

[drifting slate]

sure, give a second

here's one of them

[steep kettle]

got a idea

[drifting slate]

this is the main one

[steep kettle]

this is so broken

[drifting slate]

ik some of the code there doesn't work but i didn't have time to go over it yet

problem is i for some reason had a duplicate file and mixed up some of the changes

[drifting slate]

wowe

[steep kettle]

its using a snipet

[drifting slate]

[steep kettle]

it made it expanding though

[drifting slate]

o it's that snippet

[steep kettle]

non expanding

easy change

[drifting slate]

yea let me try in a second

[steep kettle]

adjusting size

might take a while

[drifting slate]

ayy that works perfectly

thanks a lot man

[steep kettle]

its nothing compared to what I make daily

my theme looks like this lol

[drifting slate]

wah

that's ultracustomised

i initially wanted to go for something like this too but i realised i share a lot of screenshots and stuff so i decided to go with something more or less classic

[steep kettle]

makes sense

I have this because the last theme I used is literally crazy

[drifting slate]

[steep kettle]

havent even got close to its 200,000 lines not counting imports

[drifting slate]

wah

what was it like

[drifting slate]

[steep kettle]

there arent good pictures of it

https://github.com/topics/flashcord

the before dvr version was way better

[drifting slate]

aw it was terminated

[steep kettle]

this is what works and a few extras

everything in the settings is cool

[drifting slate]

let me check

kinda clunky

maybe because i'm on mac?

[steep kettle]

oh it was made for replugged on windows

you should try my theme

[drifting slate]

wah....

that is slowing down my pc a little hahah

[steep kettle]

thats expected

its a modified theme

[potent tusk]

you can also just make the panel invisible

[drifting slate]

if you reduce its opacity to 0 the block behind will still be visible

[proven hinge]

why is it black

[drifting slate]

it’s also like that for me with dms, selected users are in dark text for some reason

[round ferry]

seems to be a bug by either discord or vencord

[proven hinge]

ah ic thank you

[steep kettle]

Discord checkpoint

[fast knoll]

Will be update for the new css classes? 👀

[prime gyro]

it's staying stuck to the user tag, what do

looks still very cool though ngl

[drifting slate]

anybody knows the new css for the panel? i almost fully restored it but the servers seem to have went back to being not transparent

previous code was

.visual-refresh nav[class*=guilds_] {
  margin-bottom: unset;
}

but i wasn't able to fix it with the new website nor have i found any replacements

[barren pivot]

@round ferry new classes

[round ferry]

fixed

[fading thorn]

Lovely, waiting for Discord/Vencord to fix the gray text

[unique moth]

Is there any update on that?

[mystic badger]

can you fix

please

@round ferry

[fast knoll]

  --bg-color: var(--background-gradient-high, var(--background-base-lowest));

  --panel-gap: 8px;
  --panel-radius: 10px;
  --panel-color: var(--background-gradient-highest, var(--background-base-low));

  --spotify-image-blur: 4px;
  --spotify-image-opacity: 0.45;
  --spotify-image-hover-opacity: 0.7;

  --order-quests: 0;
  --order-listening: 1;
  --order-stream: 2;
  --order-spotify-player: 3;
  --order-voice: 4;
  --order-profile: 5;
}

.panels__5e434 {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  background: var(--bg-color);
  border: none;
}

.mask__0d616 {
  order: var(--order-quests);
  margin-inline: 0;
  padding-inline: 0;
  border-radius: var(--panel-radius);
}
.wrapper__0d616,
.wrapperVisible__0d616 {
  border-radius: var(--panel-radius);
}

.listeningAlong_e0cf27,
.panel__5dec7,
.container_e131a9,
.container__37e49 {
  background-color: var(--panel-color);
  border: 1px solid var(--border-subtle);
  border-radius: var(--panel-radius);
}

.listeningAlong_e0cf27 {
  order: var(--order-listening);
}

.panel__5dec7 {
  order: var(--order-stream);
  padding: calc(var(--custom-guild-list-padding) - var(--custom-panels-spacing) + 3px);
}

.wrapper_e131a9 {
  order: var(--order-voice);

  &:not(:has(.container_e131a9)) {
    display: none;
  }

  .container_e131a9 {
    min-height: 90px;
  }
}

.container__37e49 {
  order: var(--order-profile);
  min-height: 59px;

  &:has(.plated_37e49) {
    border: none;
  }
}

#vc-spotify-player {
  order: var(--order-spotify-player);
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent 0%, var(--panel-color) 100%) !important;
  border: 1px solid transparent;
  border-radius: var(--panel-radius);
  margin: 0 -1px;

  .barFill_a562c8 {
    background-color: var(--vc-spotify-green) !important;
  }

  .vc-spotify-repeat-context,
  .vc-spotify-repeat-track,
  .vc-spotify-shuffle-on {
    span {
      color: var(--vc-spotify-green);
    }
    svg {
      fill: var(--vc-spotify-green);
    }
  }

  .vc-spotify-progress-time {
    margin-top: 10px;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: all 0.4s ease-out;
    z-index: -1;
  }
  &::before {
    background: var(--vc-spotify-track-image) center/cover no-repeat;
    opacity: var(--spotify-image-opacity);
  }
  &::after {
    backdrop-filter: blur(var(--spotify-image-blur));
  }

  &:hover::before {
    opacity: var(--spotify-image-hover-opacity);
  }
  &:hover::after {
    backdrop-filter: blur(0);
  }

> * {
    filter: drop-shadow(0 0 10px var(--panel-color));
  }
}```

copy-pasted from the last commit before December's CSS classes update

@mystic badger

[mystic badger]

i know

ow

i found why its not working

im updated my vencord

and i closed enable custom css 😄

[round ferry]

fixed now

[drifting slate]

anybody knows why this happens and how to fix it? seems to dim the space behind the panel over the channel section whenever i scroll up to the top

also that seems to only happen in servers with banners