**For the snippets that do silly things

[clear trout]

for some reason the buttons or toggle icons add up on the pfp, is that fixable?

🙂

And the DMs are empty in that space

[distant crag]

yer paddin's gone weird. disable other snippets, and tell me if you recieve the same issue

[distant crag]

fixed

[clear trout]

I removed all snippets... the padding is still the same??

[distant crag]

Works on my machine

[steady minnow]

Mostly works, but for some reason, the mic icon is still there on top of my profile picture

[solemn dust]

I'm also experiencing this

Ignoring the mic icon issue, I really like this snippet, but is this an intended behavior for the menus that appear when right-clicking the user panel's icons?

[distant crag]

:hover is fucky, so yes

[steady minnow]

Any fix for the mic icon?

[radiant forum]

idk what im doing but stealing some code from another thread and changing it slightly to this seems to work for me

.visual-refresh [class^="panels_"] [class^="container__"] [class^="buttons__"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class^="panels_"]:hover [class^="container__"] [class^="buttons__"] {
  transform: scale(1);
  opacity: 1;
}

[steady minnow]

https://tenor.com/view/perfect-kiss-blz-black-gif-19848063

Perfecto

[languid hill]

how would i be able to shift the padding?

looks like this atm

[clear trout]

Uhm... Could someone ping me when this script is bug free 🥰

[distant crag]

Why are you being so passive-agressive

[sterile river]

sloppily frankensteined some code together from this and some other snippets

[vestal patio]

activity also fucked the view

[vestal patio]

oo this looks pretty

[sterile river]

i think i fixed this lol

u just have to add this

.visual-refresh .panel__5dec7 {
  display: none;
}

.visual-refresh [class^="panels_"]:hover .panel__5dec7 {
  display: block;
}

[steady minnow]

Any way to keep user panel persistent when in vc?

Found a hacky way, if anyone wants it

.panels_c48ade:has(.container_e1958f),
.panels_c48ade:has(.voiceUser__629a5),
.panels_c48ade:has([class*="voice"]) {
  width: 329px !important;
  height: auto !important;
  overflow: visible !important;
}

.panels_c48ade:has(.container_e1958f) .wrapper_e131a9,
.panels_c48ade:has(.voiceUser__629a5) .wrapper_e131a9,
.panels_c48ade:has([class*="voice"]) .wrapper_e131a9 {
  height: auto !important;
  overflow: visible !important;
}

.panels_c48ade:has(.container_e1958f) [class^="buttons__"],
.panels_c48ade:has(.voiceUser__629a5) [class^="buttons__"],
.panels_c48ade:has([class*="voice"]) [class^="buttons__"] {
  opacity: 1 !important;
  transform: scale(1) !important;
}```

[vestal patio]

oo thanks!

[clear trout]

hehe

[languid hill]

do u mind if i dm u about something rq regarding giving u credit

[distant crag]

Sure

[clever timber]

Can I get the full css for this please ?

[languid hill]

check requests

[clever timber]

@sterile river

[vestal patio]

sorry for the ping but do you have any idea about this one

this part

[sterile river]

idk where this pops up im saur confused HAHA

[vestal patio]

oops sorry i didnt realize

[sterile river]

ur on ur own cuh that doesnt pop up on my end

[vestal patio]

guess i'll live with this xD

idk the class name

[sterile river]

ctrl + shift + i and pray

[vestal patio]

whosWatching-spectators_panel vc-m-top-8
i think this

pog it works. the pray working. thanks @sterile river

[vivid solar]

do you have the css for this?

[sterile river]

this is late but lol here u go

.panels_c48ade {
  left: var(--space-sm)!important;
  height: 57px!important;
  width: 56px!important;
  border-radius: 30px!important;
  display: flex!important;
  flex-direction: column;
  overflow: hidden;
  transition-duration: 0.35s;
  z-index: 50000;
  pointer-events: all;
  border: 1px solid var(--border-subtle)!important;
 &:has(.container_e131a9) {
  border: 1px solid var(--border-normal);
 }
}

.wrapper_e131a9 {
  height: 0;
  overflow: hidden;
  
}

.panels_c48ade:hover {
  width: 300px!important;
  height: auto!important;
  display: flex!important;
  flex-direction: column;
  border-radius: 15px!important;
  filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.123)) ;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  .wrapper_e131a9 {
    height: auto!important;
  }
}
.sidebar_c48ade {
  overflow: visible!important;
}
.container__2637a {
  padding-bottom: 0px!important;
}
.scroller__99e7c {
  margin-bottom: 0px!important;
}
.bottom__7aaec {
  bottom: 0px!important;
}


.visual-refresh [class^="panels_"] [class^="container__"] [class^="buttons__"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class^="panels_"]:hover [class^="container__"] [class^="buttons__"] {

  transform: scale(1);
  
  opacity: 1;
}

.visual-refresh .panel__5dec7 {
  display: none;
}

.visual-refresh [class^="panels_"]:hover .panel__5dec7 {
  display: block;
}

[fringe prism]

Do you have this but with compatibility for the SpotifyControls plugin?

What happens is the current song cover will be your profile picture at an offset.

another example

looks great when opened up though

(bar for spotifycontrols plugin is currently broken, not the snippet's fault)

[vivid solar]

body:has(.panels_c48ade:not(:hover)) #vc-spotify-player {
  display: none;
}

add this

[fringe prism]

love you so much, couldnt find the id for the spotify player

[teal sand]

If you add an equal sign to this line of code "left: var(--=space-sm)!important;" instead of "left: var(--space-sm)!important;" it centers the icon on the screen

[azure lotus]

for

tje

smoššets

[wraith raven]

I do not have Nitro, so I cannot embed this, but below is a link to the css on Google Drive

https://drive.google.com/file/d/16In8jCWHlwmGokRCWmcAmopEyzxslgzJ/view?usp=sharing

Inspired by Carti

[vivid solar]

why do you need nitro

its just triple backticks

[wraith raven]

My code is too long

[fringe prism]

couldnt u just send as a file

[wraith raven]

I guess I could

[icy berry]

for me it wont center or go into the serv bar

[fringe prism]

what in the world is ur theme vro 😭

[fringe prism]

woa

this is pretty cool

not a huge fan of the fact the channel list doesnt go all the way to the bottom

but looks good

[icy berry]

yea i wanna change that

same w servers

[fringe prism]

i am not experienced at all with CSS

im running on hopes and dreams

[icy berry]

lol

[crimson patrol]

is there a fix for quests left is with the CSS right picture is without it

[molten whale]

Made it compatible with spotify controls before:

.panels_c48ade:has(.container_e131a9) div[style*="--vc-spotify-track-image"] {
  background-color: var(--notice-background-positive) !important;
}

.panels_c48ade:not(:hover) div[style*="--vc-spotify-track-image"] {
  display: none !important;
}

After:

not the most beautiful thing i've made, but it works

[distant crag]

@sterile river you were mentioned in ntts's newest vid about restoring discords ui (for this snippet), congrats

[sterile river]

wowie!

[buoyant finch]

how can i move this a little lower to center it

[prisma spruce]

in

.panels_c48ade {

add

bottom: 5px!important;

and tweak the value till it looks how u want it to
kinda like this

[buoyant finch]

ty

[prisma spruce]

try 7px on left and 1px on bottom

when u scroll to the bottom theres this weird part tho

[buoyant finch]

this is looking the best so far

and i think im satisfied

[prisma spruce]

lemme try that

[prisma spruce]

u can just delete the --= btw

[buoyant finch]

okay

[vivid solar]

That variable doesn’t exist, just use left: unset !important;

[vivid solar]

yeah but with the = in front is not a valid variable

[buoyant finch]

idk someone said to add = to center it

it worked so i left it

[vivid solar]

it centers because you are invalidating the property that aligns it based on the left side of the bounding box

setting it to unset does the same thing but is more clear

[buoyant finch]

bru

and setting int to unset broke it

im leaving smth like this

[vivid solar]

oh i guess in this context deleting the whole line would be the fix

[buoyant finch]

true

[vivid solar]

this way youre just leaving it how it was before instead of introducing any overriding

[queen kettle]

thank you all for your work with this, its beautiful

I joined the server from the NTTS video and I'm promptly leaving afterwards, but this thread was so very helpful

[proper ivy]

this doesnt work for me for some reason

I added it at the bottom of the css

[sterile river]

love how everybody's just editing the snippet :3

[proper ivy]

u became famous fr

also do u have any idea how to fix it :3

[sterile river]

i dont tbh HAHA, messing around w css is a very new concept to me but i'll let u kno!

[proper ivy]

alr tysm

[sterile river]

dont put it at the bottom i think :0

it works fine w me

[proper ivy]

this is my csss

1 min

  content: attr(aria-label);
  font-size: 12px;
}

span[class*="timestampInline_"] {
  font-size: 0px !important;
}

.panels_c48ade {
  left: var(--=space-sm)!important;
  height: 57px!important;
  width: 56px!important;
  border-radius: 30px!important;
  display: flex!important;
  flex-direction: column;
  overflow: hidden;
  transition-duration: 0.35s;
  z-index: 50000;
  pointer-events: all;
  border: 1px solid var(--border-subtle)!important;
 &:has(.container_e131a9) {
  border: 1px solid var(--border-normal);
 }
}


.wrapper_e131a9 {
  height: 0;
  overflow: hidden;
  
}

.panels_c48ade:hover {
  width: 300px!important;
  height: auto!important;
  display: flex!important;
  flex-direction: column;
  border-radius: 15px!important;
  filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.123)) ;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  .wrapper_e131a9 {
    height: auto!important;
  }
}

body:has(.panels_c48ade:not(:hover)) #vc-spotify-player {
  display: none;
}

.sidebar_c48ade {
  overflow: visible!important;
}
.container__2637a {
  padding-bottom: 0px!important;
}
.scroller__99e7c {
  margin-bottom: 0px!important;
}
.bottom__7aaec {
  bottom: 0px!important;
}


.visual-refresh [class^="panels_"] [class^="container__"] [class^="buttons__"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class^="panels_"]:hover [class^="container__"] [class^="buttons__"] {

  transform: scale(1);
  
  opacity: 1;
}

.visual-refresh .panel__5dec7 {
  display: none;
}

.visual-refresh [class^="panels_"]:hover .panel__5dec7 {
  display: block;
}

body:has(.panels_c48ade:not(:hover)) #vc-spotify-player {
  display: none;
}

[class*='membersGroup']:has([role=button]),
[class*='member'] [class*='container']:has([class*='badges']) {
  display: none;
}```

@sterile river

[latent wigeon]

how to fix the pfp not being centered?

[warm flax]

thanks to NTTS my discord is somewhat alright now

[latent wigeon]

probably me being stupid but its not working for me

nvm im just stupid

__~1

[sterile river]

If you put the snippet above .panels_c48ade:hoverit should work fine

[wind bolt]

Hey! I have the midnight theme aswell, so I have the same thing, but idk how to change it. Did you manage to? Im not experienced with css. I did play around a bit but didnt manage to do it lol

[wind bolt]

nvm I got it working

[fringe prism]

share with the class

[lost coyote]

i know this is a little bit "old" but do you have this but with compatibility for the SpotifyControls plugin?

[icy berry]

could you show me how I cant get mine to work

[scenic summit]

if you delete the code above

``.wrapper_e131a9 {
height: 0;
overflow: hidden;

} ``

it'll look like this

just thought it looked cool

[wind bolt]

gimme a sec I needa start my laptop

[icy berry]

ok thanks

[wind bolt]

Just added this I think

  margin-bottom: 0!important;
}```

[icy berry]

alr thanks

[wind bolt]

Its just the channel list tho. I left the server list smaller so it looks like that

my pfp is still a bit offset

just noticed lol

perfect

[wind bolt]

for me this works with spotify controls

[proper ivy]

still not working for some reason

[olive sinew]

completed quests seem to break this i guess

is there any fix for it?

[urban sandal]

just wanna fix the pfp offset and server list cutoff

[lost coyote]

for me when i enter in a VC, the spotify controls doesnt show up until i hover my mouse on the VC controls thing....

[vivid solar]

Well that’s because it hides them until you hover the controls

You’d have to change it to detect if vc controls are present

[lost coyote]

yeah i know but i put garf's VC code for it

[lost coyote]

this code, but it doesnt show up the spotify controls in VC until i hover with the mouse on it

[vivid solar]

So then take those conditions and add them to the selectors to hide the Spotify controls

Should be pretty simple

[oak pilot]

just made a quick compat snippet for this for this (makes the betterfolders second sidebar go to the actual bottom)

.visual-refresh .wrapper_ef3116:last-child{
  margin-bottom: var(--space-xs);
}

(just be aware it only is useful if you have the sidebar, if you dont, it will make the regular sidebar display under the collapsed panel and look horrible...)

(and also I didnt test it on old UI...)

[olive sinew]

isnt old ui patched

[oak pilot]

I think so yea
didnt bother trying to have it back...

[oak pilot]

wdym pfp offset? I dont have any...
Although I do have radialstatus by Gibbu enabled...

maybe its the avatar deco

also wdym server list cutoff?
You want it higher is my guess...

[oak pilot]

you could use something similar to this, gimme a sec

.visual-refresh .wrapper_ef3116{
  margin-bottom: calc(var(--custom-app-panels-height, 0) + var(--space-xl));
}

Careful tho, if you wanna use this with the compat for betterfolders, it has to be before it. For some reason, .visual-refresh .wrapper_ef3116:first-child overrides both...

(or you can also add !important just before the semicolon in the betterfolders compat)

[wind bolt]

oh yeah didnt manage to fix that either

[oak pilot]

thats prolly because of the way spotify controls compat works

which is a bit of a hack in itself

this probably needs to be a plugin tho

idk how to make the sidebars figure out that it has augmented size and react accordingly...

[oak pilot]

hm I think I got it working

You gotta replace @molten whale 's spotify controls compat with this

.panels_c48ade:has(.container_e131a9) div[style*="--vc-spotify-track-image"] {
   background-color: var(--notice-background-positive) !important;
}

.panels_c48ade:not(:hover):not(:has(.container_e1958f),
                               :has(.voiceUser__629a5),
                               :has([class*="voice"]))
div[style*="--vc-spotify-track-image"] {
  display: none !important;
}

Now I have to figure out how to make the betterfolders sidebar react to expansion as well as the channels sidebar, else you hide content and cant access the bottom...

but prolly will do that tomorrow

I have a math thing to finish first

(havent really ever played with css and last time I dabbled with it was ~3 years ago, and I think it shows...)

[latent wigeon]

weird i also have this issue

[sterile river]

oh wow i just realized radial status w this is much much better

ty!

much cleaner

[dusk forum]

why is mine transparent? (using a theme btw)

[latent wigeon]

probably theme messing with it (actually its 100 percent)

[lavish nova]

does anyone have a fix for this that my profile picture looks really blurry?

[lost coyote]

why dont you carti's CSS code?

it does the same thing

[rain vault]

anyone knows how to fix this padding issue pls

[lavish nova]

i did but i added the spotify compatibility and something else

[oak pilot]

#1355972939031249240 message
look up

[rain vault]

doesnt fix it for me

[oak pilot]

hm
Weird...
Are you using something else than that? bc I can see the corners on that thing are less rounded than usual...

[rain vault]

idk what i use at this point i have so much snippets 😭

i can send u the whole thing

[oak pilot]

Yeah, do that

I'll figure it out...

[rain vault]

a lot of these snippets might not even work anymore tbh

[oak pilot]

I'll check this out

[oak pilot]

here you go, even made it round again ^^

twas on line 324, you had a .wrapper_ef3116 that overrided marign-bottom with a hardcoded height

wait gimme a sec, I'll change it again bc its still on height and not margin bottom

[rain vault]

yeahh the issue is still there even worse now tho

[oak pilot]

what?

weird

idk doesnt do that on my side

[rain vault]

i replaced the whole quickcss so idk

like i removed mine and copied the one u sent me

[oak pilot]

this is with the quickcss I gave you

[oak pilot]

yea that 's what I expected you to do

idk prolly plugins messing with it I think

[steady minnow]

Do you have any themes in the online themes section? @rain vault

[rain vault]

nope and same in local themes

[lost coyote]

wait does this exists??

[oak pilot]

what?

[lost coyote]

the online themes thing

i thought it was just for local themes

[fringe prism]

how does your menu look like that?

that looks really cool

[rain vault]

idk i use a vencord fork maybe its built in there maybe its a plugin

[livid ermine]

Made it work better with the SpotifyControls plugin with some spicy animation too

/*SPOTIFY PLAYER - @PAUWMA*/
#vc-spotify-album-image{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 56px !important; 
  height: 56px !important;
  border-radius: 50% !important; 
  object-fit: cover !important;     
  pointer-events: none !important;  
  z-index: 3 !important;
}

#vc-spotify-album-image{
  transition: all .15s ease-in-out;
}

.panels_c48ade:hover #vc-spotify-album-image{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 52px !important;             /* Same size as avatar */
  height: 52px !important;
  margin: 0 8px 0 0px !important; 
  border-radius: 50% !important;      /* Circular Borders */
  object-fit: cover !important;
}

/* Album Cover Animation */
@keyframes spin-vinyl { to { transform: rotate(360deg); } }

#vc-spotify-album-image{
  animation: spin-vinyl 12s linear infinite paused;   /* Duration */
  transform-origin: 50% 50%;                  /* Rotates itself */
  will-change: transform;                     /* Optimization */
}

.panels_c48ade:has(.vc-spotify-pause)  #vc-spotify-album-image,
.panels_c48ade:has(svg[aria-label="pause"]) #vc-spotify-album-image{
  animation-play-state: running;
}

[fringe prism]

can u send the fork over :3

[heavy canopy]

time

[slow hill]

quests do this thing, any fixes?

[slow hill]

this happens when hovering over

[lime wharf]

This one just makes your nameplate coloured when you're in VC without resizing it

/* Makes profile nameplate coloured when in VC */
.panels_c48ade {
 display: flex!important;
 flex-direction: column;
 overflow: hidden;
 transition: width 0.3s;
  z-index: 50000;
  pointer-events: all;
  border: 1px solid var(--border-subtle)!important;
 &:has(.container_e131a9) {
  background-color: var(--notice-background-positive);
  border: 1px solid var(--border-normal);

[fringe prism]

pretty sure u forgot some } at the end there lol

[fringe prism]

ok so here is my incredibly mangled version that supports spotifycontrols

 /* Makes profile nameplate coloured when in VC */
  .panels_c48ade {
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s;
     z-index: 50000;
     pointer-events: all;
     border: 1px solid var(--border-subtle)!important;
    &:has(.container_e131a9) {
     background-color: var(--notice-background-positive);
     border: 1px solid var(--border-normal)
    }
   }

#vc-spotify-player {
    background-color: var(--notice-background-positive) !important;
    border: 1px solid var(--border-normal) !important;
    position: relative;
    z-index: 1;
    margin-left: 10px;
}```

literally just

#vc-spotify-player {
    background-color: var(--notice-background-positive) !important;
    border: 1px solid var(--border-normal) !important;
    position: relative;
    z-index: 1;
    margin-left: 10px;
}```

LOL

[lime wharf]

Idk it worked for me. I have the same amount of coding knowledge as a slice of cheese

[pliant zephyr]

https://www.youtube.com/watch?v=Pt8z3jaDZYw

[desert nexus]

mmm i need some help please

[desert nexus]

.visual-refresh .sidebarList_c48ade {
    margin-bottom: unset;
}

.visual-refresh .panels_c48ade {
    padding: unset;
}

got the same issue when using this with clearvision, but it was way more offset, this seemed to fix it

[slow hill]

I improved ur code (works with spotify controls)

[fringe prism]

this makes profile pictures at a weird size and so is the circle, can be fixed with some editing of the width value

how it looks without any editing

[bold gull]

i fixed it abit @fringe prism

[radiant compass]

any existing snippet that puts the spotify controls above the voicechat?

[lost coyote]

YES I NEED THIS

this was one of the reasons i didnt wanna switch from betterdiscord to vencord at first

[vivid solar]

If there’s a flex box you can probably just reverse the flex direction

[slow hill]

for me its fine

[fringe prism]

oh

oh well

[slow hill]

btw, is there still no fix to the quests thing?

[pulsar island]

how to keep it open when listening to music or in a vc

[oak pilot]

literally was already done

[steady minnow]

@pulsar island use this for VC

[pulsar island]

thanks

[gray iris]

did you find anything like it yet? 🥲

[lost coyote]

i dont think so sadly

[sinful trout]

I love this but it lags my client a little. Is there a way to reduce this?

[oak pilot]

I dont think there is unless you do a plugin with custom js

[sinful trout]

I'd pay for a port of it tbh

[tribal forge]

how do you get you're discord to look this clean?

[sterile river]

1 ½ cups all-purpose flour
3 ½ teaspoons baking powder
1 tablespoon white sugar
¼ teaspoon salt, or more to taste
1 ¼ cups milk
3 tablespoons butter, melted
1 large egg

jk, i

i'll find the css in a bit

[tribal forge]

alr ty

[tribal forge]

also is you're chats being on the right side part of it?

[sterile river]

nope, removed that a while ago a little inconvenient using it on a big monitor. But the snippet for that is from here too

here u go @tribal forge

idk if some stuff is bugged cause i dont rlly use this setup anymore

refer to this thread regarding the on-hover channels and members list

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

[tribal forge]

thankyou, works fine

nevermind there are definitely bugs but its fine

[winter scaffold]

was there ever a fix for listening along? currently looks like this

[slow hill]

Use @molten whale's code.

[charred wyvern]

Is there a fix so that the panel looks normal in compact and spacious UI density?

[proud venture]

The latest update made it to where on hover things like "settings" "mute" "deafen" are behind the panel blurred out. Is there a way to fix this?

[proud venture]

Nvm, I figured it out.

.baseLayer__960e4 {
    transform: scale(1)!important;
}```
Fixes it.

[orchid wharf]

anyone know how i can make my pfp bigger? im using carti's collapsible panel

[sterile river]

do u want it to fill the whole circle

liquid glass!?!?!? no not rlly lol

[orchid wharf]

I'm hoping to have it be the same size as the server icons

[orchid wharf]

still hella cool though

[echo robin]

sorry for bothering what would i need to change to keep it from extending too far like this

[fringe prism]

I'm not at my pc rn but I reckon the stuff with px at the end of it is good to experiment with

Edit those and see which one is for the length lol

Or just go to ai and say "which bit of this edits the length of the panel" then give it the code

[echo robin]

tysm

[last solstice]

.panels_c48ade:hover {
  width: 310px!important;
}

change the width

[last solstice]

spotify looks like this rn with someone's spotify code from above

[last solstice]

okay mate, your code helped a lot, now i use the server list hiding snippet, so it currently looks like this without the clutter of serverlist, but as soon as i open it, it seems like this, and ik css doesnt have a way to hide an element on hover, but idk what to do tbh

[echo robin]

how do you make the background transparent?
mine has this weird box

[echo robin]

also this animation is kinda glitchy when there is an activity or streamable game going on

[dim heron]

these look cool

[sinful trout]

using cartis panel and at some point I guess discord shrunk and uncentered my pfp, anyone know a fix?

[sinful trout]

Nevermind, looks to be a conflict with another css edit, I'll look into which one it is being that it seems someone else had this problem too

It's tied to "GuildBarRevert"

[wet harbor]

im having the same issue

anyone know how to fix it

because id like to use Guild Bar Revert and the collapsible panel

unless theres an alternative to the collapsible panel

or maybe a way to make my pfp bigger to fit in better with the guild bar

because its a bit small

[wind bolt]

I'm having it too, but i'm not using GuildBarRevert

[echo robin]

it breaks when theres a orb quest

[fringe prism]

broken for anyone else?

https://nest.rip/f/seuNvNjUPJ

when hovering the buttons come back

[olive sinew]

this update broke most of the themes if i know right

[fringe prism]

fixed it

it was updated classes

here y'all go

whoops

forgot to account for spotify stuff too hold on

[sour magnet]

when its collapsed, it displays my activity icon over my pfp
what do i change to hide activity icon when its collapsed?

[fringe prism]

o

lemme seee

not happening for me for some reason

[sour magnet]

hmm

ok

i fixed it by adding this

  display: none !important;
}```

[fringe prism]

nice

if any other issues arise lmk

[sour magnet]

anisthumbsup

[fringe prism]

it prob wasn't happening to me cuz all the activites i were choosin didn't have an icon

i'm on my laptop rn so i don't have any games on here to test out

[sour magnet]

test it out later, maybe edit your snippet to include it

shrug~3

[fringe prism]

will do actually yeah

did i just

delete it

lOL

whoopsies

[sour magnet]

peebs

[fringe prism]

i added it to my css file just let me grab the whole thing again lol

one sec

[sour magnet]

well i already fixed it on my end

[fringe prism]

/* Minimal User Area */
.panels__5e434 {
  left: calc(var(--space-sm) - 6px) !important;
  height: auto!important;
  width: 56px!important;
  border-radius: 30px!important;
  display: flex!important;
  flex-direction: column;
  overflow: hidden;
  transition-duration: 0.35s;
  z-index: 50000;
  pointer-events: all;
  border: 1px solid var(--border-subtle)!important;
 &:has(.container__37e49) {
  border: 1px solid var(--border-normal);
 }
}

:root[class*="compact"] .panels__5e434 {
  width: 52px !important;
}
:root[class*="compact"] .panels__5e434:hover {
  width: 300px !important;
}
 
:root[class*="cozy"] .panels__5e434 {
  width: 60px!important;

  
}
:root[class*="cozy"] .panels__5e434:hover {
  width: 300px !important;
}

 
/* Default hover */
.panels__5e434:hover {
  width: 300px!important;
  height: auto!important;
  display: flex!important;
  flex-direction: column;
  border-radius: 15px!important;
  filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.123)) ;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  .wrapper_e131a9 {
    height: auto!important;
  }
}


.wrapper_e131a9 {
  height: 0;
  overflow: hidden;
  
}

.panels__5e434:not(:hover) #vc-spotify-player {
  display: none;
}

.sidebar__5e434 {
  overflow: visible!important;
}
.container__2637a {
  padding-bottom: 0px!important;
}
.scroller_ef3116 {
  margin-bottom: 0px!important;
}
.container__7aaec {
  bottom: 0px!important;
}


.visual-refresh [class^="panels__"] [class^="container__"] [class^="buttons__"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class^="panels__"]:hover [class^="container__"] [class^="buttons__"] {

  transform: scale(1);
  
  opacity: 1;
}

.visual-refresh .panel__37e49 {
  display: none;
}

.visual-refresh [class^="panels__"]:hover .panel__37e49 {
  display: block;
}

.panels__5e434:not(:hover) [class*="activity"] {
    display: none !important;
  }```

there

[sour magnet]

this is for other people

[fringe prism]

(its at the end)

[sour magnet]

ye

[fringe prism]

since i cba to put it in the spot where it belongs

to make the code readable

just gonna slap it in the end LOL

[sour magnet]

while we're at it

  width: 300px!important;
  height: auto!important;
  display: flex!important;
  flex-direction: column;
  border-radius: 15px!important;
  filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.123)) ;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  .wrapper_e131a9 {
    height: auto!important;
  }
}```

this section in your snippet appears twice and is identical

just fyi

[fringe prism]

oh what LOL

how did i not notice that

https://nest.rip/f/SAwX2mY1Wb

yeah no u right

wtf

[olive sinew]

comments are kinda broken i guess

[fringe prism]

idk why they keep doing that

ok should be fixed

[terse rover]

is there a fix for the one that puts the user area only in the channels sections instead of hovering or covering the whole thing

[fringe prism]

uhhh which one is that

[terse rover]

thats like that

[fringe prism]

is the css in this thread

[echo robin]

is it possible to center the icon

[wind bolt]

do you know how I could make it so the channel list gets smaller when i open the menu instead of the menu overlaping the channel list?

im pretty sure i had it working at some point but its gone lol

[fringe prism]

That's way out of my CSS skill level LOL

[fringe prism]

Idk why it keeps doing that

I'll look at it tomorrow I gotta sleep

[echo robin]

might have to do with guildbarrevert

but i just want an option to manually shift it back to the right

[crisp hearth]

this is peak

[wind bolt]

well same lol

[fringe prism]

ok i'll look into it

[fringe prism]

@echo robin for some odd reason i can't replicate the off-center issue

[echo robin]

ye i think itz linked to https://discord.com/channels/1015060230222131221/1354502862390038528

thats why i just want a option to manually shift it

[fringe prism]

how would i even do that with css lmfao

idk what i'm doing tbh

[echo robin]

is there no way to add padding or smth

[fringe prism]

uhhhh maybe!

[echo robin]

shift the entire user panel ui slightly to the right

[fringe prism]

uhhhh

ok

maybe figured it out

[echo robin]

yippieeeeee

[fringe prism]

left: calc(var(--space-sm) - 6px) !important;

change it to smth like

left: calc(var(--space-sm) + 10px) !important;

to move it 16px to the right

since -6 + 16 = 10

or just simply add margin-left: 10px !important; to the same rule lol

[echo robin]

shifted the entire thing to the left lmao

[fringe prism]

oh right

sorry i lit just woke up lol

[echo robin]

itz ok lol

[fringe prism]

idk try
left: calc(var(--space-sm) + 10px) !important;

o wait

already tried that

why does it shift to the left

uhhhh try putting
transform: translateX(10px);
above the
left: calc(var(--space-sm) - 6px) !important;
line

[echo robin]

ogey

[fringe prism]

if that don't work i'm gonna cry 💔

[echo robin]

lmaooo

maybe i can make the circle smaller

changing the width to 50px centers it but itz not a circle anymore

changing the height to 50px misaligns it again

why does it hate me

[fringe prism]

idk 💔

[proud venture]

Unfortunately the tooltips when hovering over the mute and deafen buttons are hidden behind whatvers above them. In this case the Spotify Controls Plugin.

[reef iris]

whats the class for the profile pic

plz ping me or i wont see it

[sinful trout]

did you find a fix for this? I started use cube's recent update to it.

[echo robin]

no

i just found a script that auto completes quests

[distant crag]

OK, LISTEN HERE, ALL OF YOU
This shitpost snippet has gone on far too long, and gotten far too complicated, so here, the snippet to snippet all snippets:

@import url(https://blade04208.github.io/css/mini-panel.css);

:root {
    --mini-panel-round: true;
}

This snippet features futureproofing, quest support, vc support, spotify support, activity support, and rounded support in 141 lines.

✨En-fucking-joy.✨

[proud venture]

Doesn't support spotify lyrics. Sobs eternally

Oh nevermind

It doesn't support the Fancy Spotify Controls snippet

Correction, It doesn't support the Fancy Spotify Controls snippet that includes the lyrics coverage.

[proud venture]

If anyone that uses this plugin https://discord.com/channels/1015060230222131221/1281303278008799352 and can get this snippet

CSS
/* Fancy Spotify */
[class^="sidebar_"] > [class^="panels_"] {
  overflow: hidden;
  --bg-color-discord: var(--bg-overlay-floating, var(--background-base-low, var(--background-secondary-alt)));
  > * {
    background: var(--bg-color-discord);
  }
  > .vc-spotify-lyrics {
    background: transparent;
    &:has(*) {
      backdrop-filter: brightness(0.8);
    }
  }
  > [class^="container_"] {
    background: transparent;
    backdrop-filter: blur(20px) brightness(0.8) saturate(0.8);
  }
}
#vc-spotify-player {
  --blur-amount: 4px;
  --opacity: 0.5;
  
  .vc-spotify-button {
    background-color: color-mix(in hsl, var(--bg-color-discord), transparent 30%);
  }
  .vc-spotify-button.vc-spotify-shuffle-on {
    background-color: color-mix(in hsl, var(--vc-spotify-green), transparent 60%);
  }

  &:hover { --blur-amount: 1px; }
  &::before,
  &::after {
    z-index: -1;
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: all 0.5s ease-out;
  }
  &::before {
    background: var(--vc-spotify-track-image);
    background-position: bottom;
    background-size: cover; 
    opacity: var(--opacity);
  }
  &::after {
    backdrop-filter: blur(var(--blur-amount));
  } 
}
/* Spotify lyrics height change */
.vc-spotify-lyrics:has(div) {
  min-height: 7em;
}``` To work with this snippet I will kiss you

Cause I can't figure it out

Also for some reason this snippet when clicking on the user profile the mini profile is a little off screen and can't be scrolled.

The one in the bottom left

But only when listening to a spotify song which is odd.

[wind bolt]

it sadly doesnt like my theme

[fringe prism]

Shit post snippet of doom and despair

[distant crag]

ring a ding ding

[echo robin]

wanna see something funni

GuildbarRevert really hate this apparently

[zealous hatch]

anyone have a fix for this? the bar stays there even when it is supposed to be collapsed (ping me if you find a fix i dont go in this server often)

[distant crag]

you have something else conflicting with your themes!!!
please make sure you are using [this one!!!](#1355972939031249240 message)
i will not be helping you more with this!!!!

[zealous hatch]

ty ❤️‍🩹

[smoky coral]

it seems the nameplate feature that discord made has kinda ruined this css snipper

[distant crag]

Please use this snippet instead of any other here, this one is definitive and future proof #1355972939031249240 message

[smoky coral]

ok

[charred wyvern]

There's a slight height change when I hover when there's nothing above the user panel and my brain doesn't like it

[distant crag]

skill issue

[terse rover]

did quickcss stop working for yall too?

[sour magnet]

hey, so the recent pisscord update changed all the CSS class names so I converted the class names here

/* MINIMAL USER AREA */
._5e434347c823b592-panels {
  left: 7px !important;
  height: 58px!important;
  width: 58px!important;
  border-radius: 30px!important;
  display: flex!important;
  flex-direction: column;
  overflow: hidden;
  transition-duration: 0.35s;
  z-index: 50000;
  pointer-events: all;
  border: 1px solid var(--border-subtle)!important;
 &:has(._37e49614b9f110a9-container) {
  border: 1px solid var(--border-normal);
 }
}

:root[class*="compact"] ._5e434347c823b592-panels {
  width: 52px !important;
}
:root[class*="compact"] ._5e434347c823b592-panels:hover {
  width: 287px !important;
}
 
:root[class*="cozy"] ._5e434347c823b592-panels {
  width: 60px!important;
}
:root[class*="cozy"] ._5e434347c823b592-panels:hover {
  width: 287px !important;
}

 
/* Default hover */
._5e434347c823b592-panels:hover {
  width: 323px!important;
  height: auto!important;
  display: flex!important;
  flex-direction: column;
  border-radius: 10px!important;
  filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.123)) ;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  .e131a99484292a19-wrapper {
    height: auto!important;
  }
}

.e131a99484292a19-wrapper {
  height: 0;
  overflow: hidden;
}

._5e434347c823b592-panels:not(:hover) #vc-spotify-player {
  display: none;
}

._5e434347c823b592-panels:not(:hover) [class*="activity"] {
  display: none !important;
}

._5e434347c823b592-sidebar {
  overflow: visible!important;
}
._2637a2609f343032-container {
  padding-bottom: 0px!important;
}
.ef3116c2da186559-scroller {
  margin-bottom: 0px!important;
}
._7aaec78b97ff00f7-container {
  bottom: 0px!important;
}```

.visual-refresh [class$="panels"] [class$="container"] [class$="buttons"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class$="panels"] [class$="containerRtcOpened"] [class$="buttons"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class$="panels"]:hover [class$="container"] [class$="buttons"] {
  transform: scale(1);
  opacity: 1;
}

.visual-refresh [class$="panels"]:hover [class$="containerRtcOpened"] [class$="buttons"] {
  transform: scale(1);
  opacity: 1;
}

.visual-refresh .panel__37e49 {
  display: none;
}

.visual-refresh [class$="panels"]:hover .panel__37e49 {
  display: block;
}```

minimal user area should work like this with the new update

(you can change the spacing of the elements with the width and height variables)

[terse rover]

is there a guide to convert my quickcss

[sour magnet]

u can try this

paste your code into this

unless its imports

imports cannot be converted like that lol

[terse rover]

oh shiii, it worked thanks man :D

[sour magnet]

anisthumbsup

[terse rover]

it somehow also made my imports work

[sour magnet]

your imports probably just updated their githubs

[terse rover]

makes sense O:

[fringe prism]

thanks, i was gonna do it myself lol

but ty man

[sour magnet]

apparently when u join a call, pisscord changes the class name of the container

so i added lines to the snippet just now (i edited the msg) to fix some broken behavior
fyi

[steel dune]

i noticed that the thingy doesn't stay open when in vc and my mouse is hovering above disconnect button
is it possible to fix that?

[sour magnet]

it's cuz pisscord has these tooltips when u hover over buttons

it doesn't count as hovering over the panel

I tried to fix it but it's super finicky tbh

[steel dune]

understandable

[sour magnet]

maybe it's possible to disable tooltips entirely
I haven't tried it

[steel dune]

ooo that would be very nice

[sour magnet]

I'll try
but I can't promise anything

[steel dune]

thank you for your work

[sour magnet]

/*Disable tooltips*/
._4e35b986167c457d-tooltip,
[class*="tooltip"] {
  display: none !important;
}```

now hovering with the user area wouldnt collapse with the collapsable

by accidentally hovering over the tooltip

(this disables ALL tooltips, including server names when u hover over their logo

except expanded status when u hover over users on the list, for some reason, prbly a diff class there)

[steel dune]

thank you for doing god's work
-# sorry for late reply, was busy

[wet harbor]

what is this?

also can anyone fix the big server icons css?

[sour magnet]

it's a snippet to collapse the user area in the bottom left if ur not hovering over it

[sour magnet]

discord reverted their class names so
ill paste here the updated working version

/* Minimal User Area */
.panels__5e434 {
  left: calc(var(--space-sm) - 6px) !important;
  height: 58px!important;
  width: 58px!important;
  border-radius: 30px!important;
  display: flex!important;
  flex-direction: column;
  overflow: hidden;
  transition-duration: 0.35s;
  z-index: 50000;
  pointer-events: all;
  border: 1px solid var(--border-subtle)!important;
 &:has(.container__37e49) {
  border: 1px solid var(--border-normal);
 }
}

:root[class*="compact"] .panels__5e434 {
  width: 52px !important;
}
:root[class*="compact"] .panels__5e434:hover {
  width: 287px !important;
}
 
:root[class*="cozy"] .panels__5e434 {
  width: 60px!important;
}
:root[class*="cozy"] .panels__5e434:hover {
  width: 287px !important;
}```

/* Default hover */
.panels__5e434:hover {
  width: 323px!important;
  height: auto!important;
  display: flex!important;
  flex-direction: column;
  border-radius: 10px!important;
  filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.123)) ;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  .wrapper_e131a9 {
    height: auto!important;
  }
}

.wrapper_e131a9 {
  height: 0;
  overflow: hidden;
}

.panels__5e434:not(:hover) #vc-spotify-player {
  display: none;
}

.sidebar__5e434 {
  overflow: visible!important;
}
.container__2637a {
  padding-bottom: 0px!important;
}
.scroller_ef3116 {
  margin-bottom: 0px!important;
}
.container__7aaec {
  bottom: 0px!important;
}


.visual-refresh [class^="panels__"] [class^="container__"] [class^="buttons__"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class^="panels__"]:hover [class^="container__"] [class^="buttons__"] {
  transform: scale(1);
  opacity: 1;
}

.visual-refresh .panel__37e49 {
  display: none;
}

.visual-refresh [class^="panels__"]:hover .panel__37e49 {
  display: block;
}

.panels__5e434:not(:hover) [class*="activity"] {
    display: none !important;
}```

split into 2 due to msg limit

paste both into your quickCSS

if you want to disable tooltips, because they interfere with the hover condition and collapse the area when you don't want it to be collapsed, here you go.

/* Disable tooltips */
.tooltip__4e35b {
  display: none !important;
}```

[wet harbor]

oh ok

I've actually used that before I think and it was a bit broken for me

[sour magnet]

the updated version works rly well

[wet harbor]

ok

I'll try it out

[wet harbor]

it works pretty well

though not with clearvision v7 which is the theme i use

[wet harbor]

this css is broken asf rn

@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");

:root {
/* Only include this part if you wish to change these variables /
/ You can change the size but only to be less than 48px, you must change the blob scale too */
--guildbar-avatar-size: 48px;
--blob-scale: 48;

--guildbar-folder-size: var(--guildbar-avatar-size);
--folder-blob-scale: var(--blob-scale);

}

[wet harbor]

yeah clearvision clashes with it

[dusk forum]

.

[echo robin]

that snippet breaks this one

add this for now:

:root {
--mini-panel-round: true;
}
.panels__5e434 {
left: calc(var(--space-sm) - 0px) !important;
height: auto!important;
width: 48px!important;
}

[dusk forum]

ok so this was the incorrect place to forward this

[echo robin]

it will look like this

[echo robin]

still better than this

[hard sierra]

its broken again

[desert nexus]

I use this for clearvision

.visual-refresh .sidebarList__5e434 {
    margin-bottom: unset;
}
 
.visual-refresh .panels__5e434 {
    padding: unset;
}

this probably breaks something but idk

[wet harbor]

aight

I'll give it a look

[wet harbor]

wow that fixed it

[wet harbor]

lowkey i think ill live with the weirdly offset pfp

[wet harbor]

there has gotta be a better fix

[wet harbor]

this seems to break alot of things for example the hover on discord servers making them entirely invisible

.visual-refresh [class^="panels__"] [class^="container__"] [class^="buttons__"] {
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  will-change: opacity, transform;
}

.visual-refresh [class^="panels__"]:hover [class^="container__"] [class^="buttons__"] {
  transform: scale(1);
  opacity: 1;
}

.visual-refresh .panel__37e49 {
  display: none;
}

.visual-refresh [class^="panels__"]:hover .panel__37e49 {
  display: block;
}

.panels__5e434:not(:hover) [class*="activity"] {
    display: none !important;
}
/* Disable tooltips */
.tooltip__4e35b {
  display: none !important;
} 

.visual-refresh .sidebarList__5e434 {
    margin-bottom: unset;
}
 
.visual-refresh .panels__5e434 {
    padding: unset;
}```

i think its part of the minimal user area

honestly i think ill do without the minimal user area

[potent scarab]

how do i get the old user area? did discord patch smth?

[smoky coral]

unc snippet now cuts off the settings button, discord is now unusable 🥀

[distant crag]

Ctrl+,

[strange saffron]

same question