**User Area and Activity Panels redesign

[urban hinge]

a little too big on my end, is there a fix for this 😅

[nocturne rain]

ill look into it in a second :3

[nocturne rain]

oh yeah i pushed a change today and didnt realize it broke user area (since i use a different css for it)

ill fix in a moment

@urban hinge fixed!!

#vc-spotify-player {
    background-color: var(--background-gradient-highest, var(--background-base-low)) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid var(--border-subtle);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 130px;
    margin-bottom: 12px;
}

section[class^="panels_"] {
    background: var(--background-gradient-high, var(--background-base-lowest));
    border: 0px;
    border-left: 0px;
}

section[class^="panels_"] div[class^="container__"] {
    background-color: var(--background-gradient-highest, var(--background-base-low));
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
}

section[class^="panels_"] div[class^="panel_"] {
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
}

header[class^="header_"] {
    border-bottom: 0px;
}```

[languid island]

is the vc section suposed to be transparent?

[nocturne rain]

yeah since i cant rlly figure out how to make it look good

cuz like

i have the css to theme it

but when its themed and youre not in VC its still visible somehow

i mean like it isnt fully visible but you have like a large line above user panel

[languid island]

okay cool

but still W css

[nocturne rain]

tyy ^^

[urban hinge]

i think i found a fix for this

section[class^="panels_"] {
    background: none;
    border: 0px;
    border-left: 0px;
}

/* VC */

.wrapper_e131a9 {
    margin-bottom: 12px;
    border-radius: 20px; /*adjust this part*/
    background: var(--background-gradient-highest, var(--background-base-low));
}

/* USER */

section[class^="panels_"] div[class^="container__"] {
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    background: var(--background-gradient-highest, var(--background-base-low));
}

/* ACTIVITY */

section[class^="panels_"] div[class^="panel_"] {
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--background-gradient-highest, var(--background-base-low));
}

header[class^="header_"] {
    border-bottom: 0px;
}

[languid island]

it worked ty

[nocturne rain]

when you leave vc does it have the weird line above user panel?

[urban hinge]

it did! i settled to just removing the border for the vc panel since it wasn't that noticeable for me

[nocturne rain]

oh alr

nice :3

[kind pagoda]

spotify listen along looks a lil funky

[nocturne rain]

will fix whenever i could

[kind pagoda]

okay thanks

[nocturne rain]

fixed

edited the original message

just delete the old version and paste the new one

[nocturne rain]

?

[dapper bronze]

the hovered corners are kinda inconsistent

[nocturne rain]

#vc-spotify-player {
    background-color: var(--background-gradient-highest, var(--background-base-low)) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid var(--border-subtle);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 130px;
    margin-bottom: 12px;
}

section[class^="panels_"] {
    background: var(--background-gradient-high, var(--background-base-lowest));
    border: 0px;
    border-left: 0px;
}

section[class^="panels_"] div[class^="container__"] {
    background-color: var(--background-gradient-highest, var(--background-base-low));
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
}

section[class^="panels_"] div[class^="panel_"] {
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
}

header[class^="header_"] {
    border-bottom: 0px;
}

section[class^="panels_"] div[class^="listeningAlong_"] {
    border: 1px solid var(--border-subtle) !important;
    margin-bottom: 12px;
    border-radius: 20px;
}

section[class^="panels_"] div[class^="avatarWrapper__"] {
  border-radius: 17px;
}```

fixed

[dapper bronze]

this happened for me

[nocturne rain]

uhhh

ill fix in a few

[dapper bronze]

idk but is there a way I can change the chat bar's border radius to match the user area's?

[nocturne rain]

i have a snippet for that

[short lichen]

is there a way to make the spotify controls appear on top rather than vc control?

[nocturne rain]

uhh im not sure but its just how the spotify plugin works

[nocturne rain]

like this actually?

[nocturne rain]

VERY untested but here you go

#vc-spotify-player {
    background-color: var(--background-gradient-highest, var(--background-base-low)) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid var(--border-subtle);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 130px;
    margin-bottom: 140px;
}

.container_e131a9 {
margin-bottom: -275px;
border: 1px solid var(--border-subtle);
border-radius: 20px;
}

section[class^="panels_"] {
    background: var(--background-gradient-high, var(--background-base-lowest));
    border: 0px;
    border-left: 0px;
    padding-top: 180px !important;
}

section[class^="panels_"] div[class^="container__"] {
    background-color: var(--background-gradient-highest, var(--background-base-low));
    border: 0px solid var(--border-subtle);
    border-radius: 20px;
}

section[class^="panels_"] div[class^="panel_"] {
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
}

header[class^="header_"] {
    border-bottom: 0px;
}

section[class^="panels_"] div[class^="listeningAlong_"] {
    border: 1px solid var(--border-subtle) !important;
    margin-bottom: 12px;
    border-radius: 20px;
}

not sure if it has bugs

[short lichen]

i'll test it rn and let you know

works like a charm, i adjusted some number to fit my linking in terms of space between the panels, thank you :)

[nocturne rain]

np ;3

[short lichen]

only one thing i didn't try it earlier, if i quit the vc and have spotify going this is the result

[nocturne rain]

owh...

i dont know how to fix that i cant lie

im not that good with css

[short lichen]

Oh no problem, I will go back to the previous np :)

[short lichen]

btw one last thing, is it right that there is that little line on bottom or i have done something wrong?

[dapper bronze]

is the fix done btw

[nocturne rain]

i forgor sorry

gimme a second

hmmm

for me it doesnt seem to be an issue

idk???

[dapper bronze]

i use the "don't cover server list with panel" snippet as well btw

[nocturne rain]

try disabling it temporsrily and see if it persists

[dapper bronze]

yep

it still happens

[nocturne rain]

hmm

then idk i have the same thing and it still doesnt happen

im so sleepy what am i even saying 😭

[dapper bronze]

how do you change discord's ui color btw

[short lichen]

bc i don't see the line in your image on top

[dapper bronze]

btw how do i curve the hover box here (i'm using the midnight theme)

[royal gale]

@nocturne rain code of User Area and Activity Panels redesign pin up still work ?

[nocturne rain]

yup!

still working

[royal gale]

it didn't show to me i press on CSS the code and restarted but didnt work

where is the prob?

@nocturne rain most of the codes didn't work for me bdw

[nocturne rain]

works for me

im using the same snippet

[royal gale]

did i have to active somthing here ?

can you help me with this ? @nocturne rain

[nocturne rain]

show me how the panel looks for you

[royal gale]

panels of what ?

[royal gale]

this ?

[nocturne rain]

dude

the thing the css is supposed to change

....

[royal gale]

for this : User Area and Activity Panels redesign

[nocturne rain]

ehhhh

this. show me how this looks for you

[royal gale]

ah sorry

ok

[royal gale]

..

[nocturne rain]

thats how its supposed to look

with the css

[vagrant plaza]

it doesn’t work for me

joeprayers

[nocturne rain]

do you have spotify controls plugin enabled

[vagrant plaza]

i think so

[dapper bronze]

uhh

[nocturne rain]

hmm no idea then, it should be there

[nocturne rain]

im not sure about midnight

the snippet does round it by default but ig midnight conflicts with that

[dapper bronze]

i meant the hovering user profile thing

[vagrant plaza]

its fine thank you for the help

[nocturne rain]

yeah it should be rounded in the default snippet

[whole yacht]

Great snippet! I have no issue with it.

ok wait, I got 2 small requests, I was wondering if anyone would know how to remove or hide this "!" icon from listen along place and make the bg color of it a solid dark color or gradient based on the album art, would be cool if it could be done...

[nocturne rain]

if i used listen together id do it but like that i dont really have a way to even do that really :/

did it once with someone's help to round the corners and stuffs

[whole yacht]

ahh u can join me to look at it and try stuff

I am listening along with others atm

[nocturne rain]

im not at home rn :/

[whole yacht]

oki lmk when u wanna check or test, I can inv u

[nocturne rain]

alrighty, its either gonna be later today or tomorrow, depending on how tired ill be when i come back

[whole yacht]

take ur time, no rushing

[next yacht]

Can fix this please?

[nocturne rain]

unfortunately my laptop broke a few days ago and i have no way of working on css for now

im not able to afford anything new at the moment either so yeah...

maybe in a few months ill fix it

if everything goes right