#Cozier Profile Popouts :venniecozycat:

1 messages · Page 1 of 1 (latest)

lime citrus
#

great snippet although would it be possible to always have the badges below the name
i use this snippet #🎨-css-snippets message so it would be nice if the badges were always below 🙂

#

not needed but just a suggestion

#

gif for better example

tepid isle
#

good idea

#

I just pushed the change on github, it should get updated in a bit

#

good catch

lime citrus
tepid isle
#

I'm also pushing another small fix to prevent the clan tag from moving the badges too much

#

basically moving it before the username

#

let me know if there are other issues/suggestions

potent cloud
#

kinda not a fan of where custom status is shown

tepid isle
#

Where do you think it would fit best?

lime citrus
#

maybe under about me?

tepid isle
#

Below the "message" and "add friend" buttons?

lime citrus
#

but im not too sure

potent cloud
#

could just be above the about me button? fill in that space below the profile picture?

tepid isle
#

It would be without the background blur then, otherwise it just looks kinda bad

#

Also I wanted to make the banner in the background easy to see without too much stuff on top of it

potent cloud
#

why not use a bubble or something similar to match with the mini profiles?

tepid isle
#

Because I hate that thing venniehehe

potent cloud
#

I mean, I enjoy being able to hover over and see the whole status

lime citrus
#

maybe under the badges would be a good option

tepid isle
#

Too small to fit everything

potent cloud
tepid isle
#

Well that's weird, did I leave it with text-align: right?

#

It's supposed to be centered

potent cloud
tepid isle
#

I may have forgotten to change it back

tepid isle
#

Welp, that's one thing to fix

#

As for the position, it was one of the few ones that wouldn't make it too cluttered and busy

#

In my opinion

#

It's also easier to theme whether a user has a status or not, because had it been on the left, below the buttons, I would have to style the whole section differently depending on the status presence

#

Yes I am lazy

potent cloud
#

I just feel like it covers quite a bit of important information until you scroll down, especially since you see the whole status at all times

tepid isle
#

Considering the character limit on profile descriptions, it should only cover the profile connections

#

Unless you're aagaming or dziurwa with extremely long descriptions

#

I pushed the alignment fix, it should get updated soon™️

rain olive
#

cool snippet ThumbsUpSmile

potent cloud
#

I suppose it's fine where it is, but the blur really makes the text hard to read if the buttons are any darker than the background

lime citrus
#

just thinking maybe move "About Me" to top right coz kinda looks out of place or is that just me?

tepid isle
#

It's the tab name

potent cloud
#

well click the mutual servers and friends texts

tepid isle
#

^

lime citrus
#

ah i see

#

i thought it was a header

#

my bad

tepid isle
#

As you saw earlier, there is also the activity one

lime citrus
#

yea i didnt realise thats my bad for being stupid

tepid isle
#

Nah it's fine

tepid isle
#

But still make it so you know there's stuff that's being covered

#

Should be doable

potent cloud
#

I mean, it looks fine on your profile since the button colors and background colors are similar

glossy turret
#

I just wanted to come in and say that this is literally so cool!
Thank you, @tepid isle (sorry for pinging!)!

tepid isle
#

Thanks, I appreciate it vennieflower

tepid isle
#

you're on light mode, aren't you?

#

I increased the blur to 15px (from 5) and it looks a bit better, but no idea about light mode

#

eh, it's not that bad

#

what do you think?

potent cloud
#

looks a lil better

tepid isle
#

how is that not light mode

potent cloud
#

that's... just how bright discord makes my profile?

#

certainly not dark mode.

tepid isle
#

wtf

#

oh, unless

#

this is turned off

#

in accessibility settings

potent cloud
#

oh that

#

that's

tepid isle
#

(which should be on by defauly in my opinion not to get flashbanged by light profiles with dark themes lol)

potent cloud
#

didn't realize that wasn't on

tepid isle
#

is it better now with the increased blur?

#

tbh I could also decrease the buttons brightness a bit

potent cloud
#

I dunno, I still feel like the color of the buttons is a bit off. it just seems to be awful on my profile, though.

tepid isle
#

I think I made them 90% primary 10% secondary

#

70/30 should be less bright

potent cloud
#

actually, looking at vilchu's buttons, yeah they can get a lil too bright

tepid isle
#

how is that 50/50 wtf

tepid isle
#

alright, I pushed the new changes

rain olive
#

👀

#

hello

tepid isle
#

hi hi

native lodge
#

any plans on implementing this on the non-full popout too?

tepid isle
#

Most likely, yeah

#

I have a few ideas on that regard

#

Same for the DMs profile side panel

native lodge
#

alright

tepid isle
#

Can't really give an ETA, but I hope to finish it before discord rerolls classes again

tame vale
#

im sorry but im laughing too fuckinf hard at the claudio bisio pfp

tepid isle
#

It fits too well with the hat decoration, I can't change it now

tepid isle
#

Alright, all changes should have been pushed, so if anyone finds something broken let me know

scenic quarry
#

Long custom statuses don't fully fit in this profile, even when you hover over them with the mouse. There's also no way to see long pronouns completely.

tepid isle
#

That's, uh
Some extreme cases huh

#

I'll see what I can do about it

#

fixed the pronouns, now onto the custom status

abstract crag
#

It's similar to what Discord is doing now in experiments

tepid isle
#

and status fixed

#

let me push these changes and it should update

tepid isle
tepid isle
scenic quarry
#

Yes it works

tepid isle
#

nice

tepid sun
#

It is imperative to add a Claudio Bisio Lighting Slider

tepid isle
tepid sun
lime citrus
lime citrus
#

ah ok was just checking it wasnt a bug

tepid isle
#

if you're not using the collapsible clan tags snippet you can just remove the order: -1 in the code

sour grove
#

ended up having this bug, not sure why it happens but im going to try and remove CSS to try to fix it to see what is causing it

#

ok, its this
@import url("https://raw.githubusercontent.com/Augenbl1ck/Discord-Styles/refs/heads/main/customStatusBubble.css");
bummer

raven halo
#

Awesome css

tepid isle
scenic quarry
#

I'd like the banner to cover the entire profile so it's fully visible, not just a small square. Also, some profiles, when the Discord white theme is enabled, display poorly; the white text on white buttons isn't visible, and the frames in integrations don't show up correctly.

brazen helm
#

looks like the experiment

tepid isle
#

sigh I'll have to hardcode values in, I guess

tepid isle
#

is it better now?

#

well, ignore the profile decoration that's hiding the "edit profile" button

#

yeah I'm happy with these changes ngl

#

gonna clean the code up a bit and then push them

#

changes have been pushed vennieflower

raven halo
tepid isle
#

just need to wait for github to update the imported file

#

I use it as a local file, so I can edit things locally and see changes in real time, but for imports it usually takes a few minutes to update

azure rose
#

this is really good, i like it. only thing i notice is that with profile decor, its quite over the top and blocks a lot of text. i guess is it possible to make a way to make it always faded?

tepid isle
#

holy

#

that's one hell of a decoration

azure rose
#

it isn't half as bad without this css, believe me haha

tepid isle
#

yeah I believe that

azure rose
#

other than fading it all the time, im unsure how you would fix it. idk if theres a way to scale the size of it down to make it less obnoxious?

tepid isle
#
.root__24502.root__49fc1.small__49fc1 {
  > .profileEffects__01370 {
    opacity: 0.2 !important;
  }
}
#

add this to your quickcss

azure rose
#

yeah that fixes it

tepid isle
#

default opacity when hovering is 0.6, but it's still not enough to see things clearly

azure rose
#

appreciate it

tepid isle
#

you're welcome

azure rose
#

little nitpicky too but the dot on the right side, could you possibly put that between the tag and username? @tepid isle

#

the dot just kinda looks out of place at the right

tepid isle
#

it's supposed to be between the username and the pronouns section

azure rose
#

ah i see, with tags the pronouns end up underneath the usernames section

tepid isle
#

I moved the clan tag on the left because it was causing some issues with the collapsible clan tags snippet

azure rose
#

is there a way to move it back to the right?

#

since i don't use that snippet

tepid isle
#

one sec

azure rose
#

tyt

tepid isle
#

gotta find the code part

#
.tags__63ed3 > span:has(> .chipletContainerInner__10651) {
    order: unset !important;
}
#

add this into your quickcss

azure rose
#

absolute legend

#

tysm

tepid isle
#

np!

azure rose
#

awesome work, seriously

tepid isle
#

thanks, I really appreciate it

tepid isle
#

Not me editing a theme to test some new things and crying because it's not working

Turns out the theme was disabled

left abyss
#

ah yes, some avatar decorations can obscure the profile kek

Otherwise this is really nice, I love it

left abyss
#

I mean this

tepid isle
#

that's the wrong snippet lol

left abyss
#

ah I went right over it, oops fillyRBlep
I was scanning through the chat and jumped right over it

tepid isle
#

if you want it to act only when hovering, add :hover after .small_49fc1

#

otherwise that one will make decorations always less opaque in big profiles

left abyss
#

ah, much better, cheers vrcTupCheers

tepid isle
#

nice

#

glad you like it

tepid isle
#

still work in progress

tepid isle
#

me likey

#

(yes the clan tag is gone because I had no idea where to put it LOL)

south owl
#

damnnnn it looks beautiful

tepid isle
#

Thank you

azure rose
#

just pondering where you could put the tag ethanthink

potent cloud
#

not a huge fan of the triangle header bar thingy wires

#

an interesting take tho

raven halo
#

uh

#

it doesnt work?

#

i copied the new css and it js

#

no work

native lodge
#

you enabled the profile popout v2 experiment?

#

if so, that's the reason

tepid isle
#

still working on my device and I haven't changed the link

#

so idk

#

also there's no new css, the link is always the same

#

so what are you talking about?

tepid isle
raven halo
sour grove
# tepid isle

could you make it so that in the bio and role section that is a slight darkening on that side that maybe is in the colour of the profile?

#

and then for the gradient on profiles could you maybe have it be left to right (top on left, bottom on right)

tepid isle
#

I'm not sure I got what you mean

sour grove
#
  1. have this side with a background similar to before, but make it a tad transparent and maybe blurred? to better seperate everything
#

highlighted in yellow

#
  1. i basically just suggested rotating the profile gradient so you could see it again
#

the background for the right side would probably look good just as the secondary colour for the profile gradient if provided instead of having a gradient as well

#

also wanted to say that this looks rlly nice regardless and i think you did an amazing job hehe

tepid isle
#

Might look decent actually

#

As for the profile gradient, you mean having it going left to right instead of top to bottom?

#

But in the borders? Idk

sour grove
#

ya! exactly that :3

sleek ginkgo
#

hey this is cool but it's like, impossible to read

sour grove
sleek ginkgo
#

why not something more like this?

sour grove
#

i like both versions actually...

#

though i dont think the message bar should be that big at the bottom and maybe should be on one side?

tepid isle
warm palm
#

I didn't like how much the banner zoomed in so this fixes it

.banner__68edb {
    background-size: 141% !important;
    top: 5px !important;
}
potent cloud
warm palm
#
.small__49fc1 .banner__68edb {
    background-size: 141% !important;
    top: 5px !important;
}
tepid isle
#

I'll include this in the next update, thanks

#

Had no time to work on it today sadly, so I'll probably do it tomorrow

#

At the moment, the todo list currently has

  • fix username/pronouns/clan tag/badges position
  • rework how the roles look
  • fix abnormal zoom on banners (thank you for that snippet, that'll come in handy)
  • add customizable variables to change how the profiles look without having to force one appearance on everybody
  • finish up the regular profiles (basically the non-nitro ones)
#

And probably some other stuff I forgot about but will come in later

sleek ginkgo
#

i wasn't gonna bother actually making it the correct proportions just for a mockup

sour grove
#

tbh, since the style is so different, you should totally see if you could make your own snippet! :D im pretty sure ppl will like it :3

sleek ginkgo
#

i would but i have no idea how to lol

tepid isle
#

Fuck around with stuff

#

Most fun way of learning things

tepid isle
#

(there should be only 2-3 but the less the better)

tepid isle
#

oh

#

I just realized I may have completely nuked the gradient profile borders without realizing

#

who would've thought that setting background: none on the entire profile would've got rid of the gradient background that served as border?

tepid isle
tepid isle
sour grove
#

except no gradient on the right side text background, though i assume you're working on thathehe

tepid isle
#

no gradient on the right side text background

#

so basically just bringing back the gradient borders?

#

I'm confused

sour grove
#

so- on the right side just make it a solid colour determined by the secondary gradient colour

tepid isle
#

I'm sure you said you wanted a background on the right side, or am I tripping hard?

sour grove
#

ya!

tepid isle
#

ah, solid color

sour grove
#

ya :3

tepid isle
#

well, that's easier

sour grove
tepid isle
#

although very impactful

#

I wonder what would happen if I applied opacity on the entire body class

#

yeah, that was expected

#

I can't see shit

sour grove
#

LOL

tepid isle
sour grove
#

now that i think about it, maybe you could also slightlt darken the solid colour to create a bit more contrast between the frame and background

tepid isle
#

damn I chose a really good frame to take a screenshot LOL

#

that's better

#

I guess it's time to learn how to make @property queries so I can add custom variables and have these things as toggles

rain olive
#

could u do when the bg is too white, the text turns darker and if it's dark, the text turns brighter

#

on the roles

tepid isle
#

let me check if the color is in the element style or if it's a property

#

oh, in the roles

#

I'm not sure about that

rain olive
#

oh ok

tepid isle
#

hmmmm

#

nope, no style="color" I could use as attribute selector sadly

rain olive
tepid isle
#

I can try and increase the text shadow I added for that purpose

tepid isle
#

this is 2px shadow

#

slightly more noticeable

#

ACTUALLY

#

I can just make a color-mix with the role color and some darker tones to make it stand out more

#

why didn't I think of that earlier?

#

right, that's why

#

let's see if currentColor works in pseudos

#

yeah that's way better

rain olive
sour grove
sour grove
dense raptor
#

light color+profile effect makes it looks kinda weird but we can pull the status from below and put it under the space between the pfp and about me i think the bubble would look better there

#

making 2 versions for people who prefers the bar or bubble

rain olive
#

yeah I like the bubble xd

tepid isle
#

that poor bunny (or cat) really got sliced off by my bar

tepid isle
#

@native lodge do you happen to know if it's possible to set a @property query for an @import ? (asking you because you basically taught me half of the things I know lol)

#

or do I just make the bar snippet as an extra and tell people to also add it if they want the extension

#

which might be the easier solution tbh

native lodge
#

I think not

#

but what you could do is import anyway but wrap its contents into a layer that only activates on property true or something along those lines?

tepid isle
#

hmmmm

#

yeah

#

that makes sense actually

#

thanks!

native lodge
#

or maybe not layer but container query using custom property

tepid isle
#

that's already something I don't know how to do yet, time to learn

native lodge
#

container queries are quite simple

#

basically you make your --var:yop and then inside your import wrap everything in @container style(--var:yop) {}

#

should do the trick

tepid isle
#

kidding, but I'll give it a try tomorrow

native lodge
#

:3

tepid isle
#

thanks

tepid isle
# tepid isle yeah that's way better

turns out, the color-mix doesn't work with currentColor because the element already has a background-color set, so if I override that property with the color-mix, it doesn't have an original color anymore

#

I didn't notice that in the photo, because the role was the same color as it should've been

#

filter: brightness(.7) it is then

tepid isle
sour grove
tepid isle
#

back to the original

tepid isle
#

I will push the latest changes tomorrow, when I'm sure everything works as intended (because currently it doesn't)

potent cloud
#

knew you'd come through >:))

sour grove
# tepid isle back to the original

you should add some dividing lines for the about me, activity, mutual freinds and mutual servers buttons to better indicate that they are °clickable*

since- i didnt realize at first

#

itd probably look better than backgrounds for the text

#

the dividers could fade out on both sides

rain olive
#

good

potent cloud
tepid isle
#

background color of what

#

there's just a few elements there

potent cloud
tepid isle
#

the right part you mean?

potent cloud
#

yeah

tepid isle
#

50% secondary profile color, 50% almost transparent black

potent cloud
#

mmm well I'm curious on how it's gonna look for certain profiles, when you release it of course

tepid isle
#

for yours it's a bit weird

#

it's very blue

potent cloud
#

ewh

tepid isle
#

I wonder

#
linear-gradient(180deg, 
  color-mix(in srgb,
    rgba(0, 0, 0, 0.1) 50%,
    var(--profile-gradient-primary-color) 50%
  ),
  color-mix(in srgb,
    rgba(0, 0, 0, 0.1) 50%,
    var(--profile-gradient-secondary-color) 50%
  )
);```
#

if this would work

#

oh hey, it worked

potent cloud
#

oh that's pretty nice actually

#

that's not my profile colors though wires

#

which is weird

tepid isle
#

they are

potent cloud
#

er uhhhh......

#

it's BEEN these.....

tepid isle
#

it's a gradient made from 2 color mixes of the profile colors and that black

potent cloud
#

but that's like, very obviously purple

#

why it urple

tepid isle
#

good question

#

this is what Discord says your profile colors are

potent cloud
#

discord's hallucinating

tepid isle
#

well

#

they're right for my profile

potent cloud
#

well it ain't my fault fr

#

kill discord with hammers

tepid isle
#

mods, lobotomise Discord's employees

#

no Tessie here, shame

glossy turret
#

The Spotify controls are overlapping each other; I don't know if you have seen this already, but just wanted to let you know.

tepid isle
#

whaaaaa

#

no way they broke that part

#

yes way, yes they did

#

fixed, they changed the classes for that too lmao

#

back to what it should've been

tepid isle
glossy turret
#

I don't really know...

#

I mean, I'm on dark theme, so...

tepid isle
#

I'm on dark theme (Onyx) as well, but it's not that dark

glossy turret
#

It's because of the custom theme I use (midnight w/ vencord flavor).

#

So I can change it easily w/ custom CSS.

tepid isle
#

Well

#

Then it's nothing I have to fix/think about

glossy turret
#

Yup!

native lodge
#

@tepid isle when are you going to stop using legacy syntax rgba(0, 0, 0, 0.1) instead of modern rgb(0 0 0 /.1) :3

lime citrus
tepid isle
#

no, it's just broken

lime citrus
#

ah

#

wait hang on

tepid isle
#

I haven't pushed the new changes yet because there's still some stuff that's broken and I haven't had the time to fix it

lime citrus
#

why is the banner different

#

i havent used that banner in like 2 years

tepid isle
#

that's what I see

lime citrus
#

im confused

tepid isle
#

don't be

#

was it a USRBG banner?

lime citrus
#

idek what that means

tepid isle
#

vp usrbg

mortal nestBOT
# tepid isle vp usrbg

Displays user banners from USRBG, allowing anyone to get a banner without Nitro

Authors

AutumnVN, katlyn, pylix, TheKodeToad

lime citrus
#

oh no its a nitro banner

tepid isle
#

then idk what to tell you

potent cloud
lime citrus
#

yea i asked someone else and they see it how i see it

tepid isle
#

well

tepid isle
#

so it was indeed due to that setting

lime citrus
#

was so confused lol

tepid isle
lime citrus
#

thought id accidentally put a differnt banner on

tepid isle
#

even Discord refuses to parse them correctly

tepid isle
#

guess I'll use #0000001a instead then

native lodge
#

switch to oklch() trust

potent cloud
tepid isle
#

alright, so

#

let me push some of the changes/fixes

tepid isle
#

ok, I pushed quite a bunch of stuff

#

I'm leaving the right background on hold for the moment

tepid isle
lime citrus
#

question would it be possible for u to make a separate version that has the old custom status location

sour grove
lime citrus
#

oh?

tepid isle
scenic quarry
#

I've noticed that the background color of long roles doesn't fill in completely... And also because of the shadow of the text it is almost invisible in profiles without nitro....

tepid isle
#

You always find ways to break things, I like it

tepid isle
#

I hate light mode

tepid isle
#

no, my hate should be redirected towards Discord again

#

how come they didn't use the same variables for the same elements, but in different modes

#

this is so stupid, I'm not dealing with that

#

sorry light mode users, you won't be seeing anything anyway since you're used to get flashbanged every time you open discord

quaint gazelle
#

@tepid isle btw did you move the status message it use to be on the right with a blurred background now its below my name

tepid isle
#

There's new custom variables for that

#

Default is false

quaint gazelle
#

oh okay

tepid isle
#

And damn the default profiles look gloomy asf

quaint gazelle
#

btw the tag order isn't working

lime citrus
#

tag order is for the clan tag position

quaint gazelle
#

ah

tepid isle
#

Indeed

lime citrus
#

this is driving me crazy atm how it is rn:

tepid isle
#

What is

lime citrus
#

how it should be

tepid isle
#

Oh yeah

#

I wanted to set an absolute position for badges

#

But then remembered that some people have long pronoun sections

lime citrus
#

could u not add it as a root setting?

tepid isle
#

What for? You would still see other people's pronouns overlapping with badges

lime citrus
#

yea fk other peoples profiles

tepid isle
#

What I could do is set a 100% width on the badges so it should stay at the bottom

#

If that works

lime citrus
#

possibly

#

im happy now

tepid isle
#

Did it work?

lime citrus
#

yea works perfectly now

tepid isle
#

Alright, I'll push the fix later

lime citrus
#

not sure if u should push it as a fix tho

#

this is an example of a long ass pronoun

tepid isle
#

Open Vozdux's

tepid isle
lime citrus
quaint gazelle
#

there we go got that fixed up so it changes to the frambosia color on hover

glossy turret
#

Is it just me or the --status-enabled variable doesn't work?

native lodge
#

you have no status anyway (wait nvm)

quaint gazelle
tepid isle
#

Ngl I feel like I should make a separate repository with readme file for this snippet alone and its addons

glossy turret
#

😁

tepid isle
#

Np!

glossy turret
#

Nvm - it's still the same?

tepid isle
#

It's working fine on my end

quaint gazelle
glossy turret
glossy turret
quaint gazelle
#

where are you putting it in your css file or quickedit

glossy turret
#

At the top (idk if it's clear on the screenshot).

quaint gazelle
#

?

glossy turret
#

In :root.

quaint gazelle
#

btw you can put all the root stuff in one spot instead of making lots of :root

glossy turret
#

OK, so I made it work, but... I don't think it should be necessary.

#

I added this:
@import url('https://cdn.jsdelivr.net/gh/Krammeth/css-snippets@refs/heads/main/PRA-StatusBar.css');, which was from the CSS itself.

tepid isle
#

No, it's not necessary

glossy turret
#

I converted the link to CDN bc, apparently, BD won't detect GitHub raw.

tepid isle
#

It's in the original import

glossy turret
#

Yeah, I don't know why.

tepid isle
#

BD issue

quaint gazelle
#

suprise anyone still uses BD with how godly slow and outdated it is

glossy turret
#

😐

tepid isle
#

I assume

tepid isle
#

But hey, it's a choice

#

As long as it works

#

Really weird that you had to import both files though

tepid isle
#

Wait, so you also had to convert the original import then?

#

Because that's from github raw too

glossy turret
#

Yeah, I did that, too.

tepid isle
#

Crazy

glossy turret
tepid isle
#

Well then keep in mind that you'll have to do that for the incoming imports too

lime citrus
native lodge
#

:3

tepid isle
quaint gazelle
#

since i don't have nitro now

tepid isle
#

Go for an orange

#

So it matches the hair

quaint gazelle
#

hm good idea

tepid isle
#

Now that's better

lime citrus
quaint gazelle
tepid isle
#

No biggie imho

#

You can always only keep the few useful channels and ignore the others

quaint gazelle
#

okay nothing to do with the proifle but am i going crazy or is that show all a couple more pixels to the right making it not centered

lime citrus
#

crazy i think

tepid isle
#

You might be right

#

I can't check now since I just turned my pc off

quaint gazelle
#

gotta admit that orange does look good

real owl
#

this code doesn't seem to work at all for me, any idea why? the profiles are the exact same as before

tepid isle
real owl
#

I did do that, I also tried removing all other css

#

nothing

glossy turret
#

Are you using BetterDiscord?

real owl
#

Vencord

tepid isle
#

I don't think a Vencord donor would use BD tbh

real owl
#

😂

glossy turret
#

LOL, I didn't know, that's why.

#

😆

#

Anyway, I had the same problem, and I had to change the @import a bit.

#

Instead of GitHub raw, you can try and change to use CDN.

tepid isle
real owl
#

yea my other css works fine

tepid isle
real owl
#

I tried copying the css code, no changes either

real owl
tepid isle
#

Do you have the new profile popouts experiment enabled/rolled out for your account?

real owl
#

urh how do I check

tepid isle
#

Send a screenshot of the profile

real owl
tepid isle
#

The big one

#

This snippet is for the big popouts

real owl
#

ah

tepid isle
#

The small ones' is still WiP

real owl
#

then it works 😂 my bad my bad

#

I never even thought to click in

#

sorry!

tepid isle
#

Np

#

Tbf, I should have named it in a better way

#

(but you should've seen it from the picture I posted on the channel alongside the snippet)

real owl
#

yea sorry my bad

tepid isle
#

Because the various :not(:has()) selectors I used really make an impact on the performances

scenic quarry
tepid isle
#

I wonder what happened

quaint gazelle
lime citrus
#

i guess App Names dont come under the same class as Display Names so the username is forced upwards

tepid isle
#

Indeed

tepid isle
#

Fun fact

#

I did not think about bot profiles at all

warm palm
#

Nobody ever thinks about the bots, poor bots

native lodge
#

apps*

warm palm
#

See, we don't even know their names

tepid isle
#

I may have been deadnaming them for ages

rain olive
tepid isle
#

Soon™️

#

Customisation is in the works

rain olive
#

👀

#

thanku

tranquil tiger
#

err.. is there any way to "force" the gif ani moving only when we open the profile popouts ?

#

other than this

tepid isle
#

Honestly, no idea

#

After a bit of research, I don't think you can do that with css alone

tranquil tiger
#

welp, okay then..

tepid isle
#

@rain olive you might like this one

potent cloud
#

aww yeah, looks good!

rain olive
#

oh yeah thats nice :D

tepid isle
#

I'm divided on pushing this part because that would mean I have to make sure the full width gradient is working properly

#

and do I really want to do that? hmmmm not really

native lodge
#

testing is what users are for

#

push broken, fix maybe later

rain olive
#

emphasize the maybe part :-D

tepid isle
#

alright then

#

added 2 new variables,
--background-width: full/half
and
--right-gradient: true/false

#

go ham with the testing, I'm not going to fix every single case though (because I can't possibly take every color combination into account)

native lodge
#

back to your rgba ways 😭

tepid isle
#

Whoops

rain olive
#

how can I get the @import to work in BD tfm_sweatdrop

tepid isle
#

You have to convert the rawgithub link to a CDN one because apparently BD doesn't like the former

#

Ask @glossy turret for more details, he had to do the same

rain olive
glossy turret
#

After that, replace the copied link with the original one.

tepid isle
#

Remember that you'll have to import the addon link as well

#

Because that won't work either

lime citrus
#

still cant believe ur using bd

rain olive
glossy turret
#

You're welcome!

tepid isle
#

I don't understand why BD wouldn't make rawgithub links work

native lodge
#

those links don't update to new versions as far as I can tell from jsdelivr documentation (correct me if I'm wrong)

tepid isle
#

I guess I will announce here whenever I push some changes (I already do it) so you guys can get a new import link with them

#

If that's the case

rain olive
#

the rest of the :root doesn't work for me for some reason, the two above works doe ig

tepid isle
rain olive
#

ah

#

what's the updated

tepid isle
#

actually

#

it does have the new things

#

so it's weird it doesn't work

rain olive
#

hm..

tepid isle
#

nope, works fine on my end

rain olive
tepid isle
#

I don't really know what to say

rain olive
#

¯_(ツ)_/¯

rain olive
#

it works in ptb wth

#

but in ptb I don't have the extra friggin button grr

#

decisions decisions

#

why do u suck discord

tepid isle
#

They are also not the same size in the first photo

rain olive
#

ik cuz theres 3 n not 4

tepid isle
#

no I meant these

#

wait

#

they're a different size too

potent cloud
#

man, this is just too good..... 🤤

rain olive
tepid isle
wintry sluice
#

So it says to use the "raw link"

#

Either i'm stupid or retarded

quaint gazelle
quaint gazelle
#

where are you putting it?

#

it doesn't go in the online themes section it goes in the quickcss at the very top line

wintry sluice
#

yeah im retarded

#

Sorry :)

quaint gazelle
#

yes

wintry sluice
quaint gazelle
#

om yes

wintry sluice
quaint gazelle
#

show a screenshot

wintry sluice
quaint gazelle
#

lol

#

it doesn't change that one

#

open the profile in full view

#

@wintry sluice

wintry sluice
#

OOOOOOOHHHHHHHHH

tepid isle
#

I'm going to add something funny to the smaller popouts so it's clear the snippet isn't meant to work on them

quaint gazelle
#

i need to figure something new out for this section of the profile since the update made codeblocks look different

tepid isle
#

Making codeblocks look more similar to roles?

quaint gazelle
tepid isle
#

Doesn't sound too difficult

quaint gazelle
tepid isle
#

I'll give it a look tomorrow

tepid isle
# quaint gazelle if you can figure something out that would be kool
.outer_c0bea0 > .inner_c0bea0 > .body__5be3e > div > .descriptionClamp_f5f93a {
  -webkit-line-clamp: 9999999;
  max-height: unset;

  > .markup__75297 > .text-sm\/normal_cf4812:has(> code.inline) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 4px;
  
    > code.inline {
      background: none;
      border: 1px solid var(--user-profile-border);
      border-radius: var(--radius-sm);
      font-family: var(--font-primary);
      font-size: 12px;
      font-weight: 500;
      margin: unset;
      padding: 4px;
    }
  }
}```
#

there you go

#

I'd say they look pretty identical (almost)

quaint gazelle
#

i must have something in my css cause im not getting it in full like you

#

nvm i think its because of the edit profile button

tepid isle
#

I'm giving it a few quick touches

quaint gazelle
#

oh now its showing it all you edited after i copied it initially

tepid isle
#

yeah but it's still not finished yet

quaint gazelle
#

yeah

tepid isle
#

give me a couple minutes

quaint gazelle
#

sure

tepid isle
#

aight good enough

#
.outer_c0bea0 > .inner_c0bea0 > .body__5be3e > div > .descriptionClamp_f5f93a {
  -webkit-line-clamp: 9999999;
  max-height: unset;

  > .markup__75297 > .text-sm\/normal_cf4812:has(> code.inline) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 4px;
  
    > code.inline {
      background: none;
      border: 1px solid var(--user-profile-border);
      border-radius: var(--radius-sm);
      font-family: var(--font-primary);
      font-size: 12px;
      font-weight: 500;
      height: 14.4px;
      align-items: center;
      margin: unset;
      padding: 4px;
      display: flex;
    }
  }
}```
quaint gazelle
#

awesome thank you

tepid isle
#

np

tepid isle
#

What do I have left to do here

#
  • check if regular profiles work fine ✅
  • fix bot profiles ✅
  • add a custom var for choosing whether to display notes or not ig ✅
  • check for :has() selectors (again) ✅
tepid isle
#

Also

  • fix big bottom margin when the status bar is not present ✅
  • add it to the notes section if it's being shown ✅
#

Ok, there's still quite a few things to do

tepid isle
#

I might have broken something
and pushed the changes

#

who would've thought that you can't put a @container inside another @container

tepid isle
#

nevermind, you totally can
I was just using the wrong selector

#

alright then, I added a new custom var

--show-notes: true; /* accepted values: true / false */
#

pretty self-explanatory

tepid isle
#

I was about to ask if the peeps using BD here were having issues with the new stricter CSP, then realised that BD did not have the CSP update

rain olive
#

a what :D

tepid isle
#

Similar to BD's rawgithub block

rain olive
#

ah, ic

rain olive
#

could u add a toggle for the roles look cuz I already have a similar code for the roles and it bit messes em up tfm_sweatdrop

tepid isle
#

Sure, will do it later

#

I might add it as an extra/addon like I did with the status bar

rain olive
#

thx

tepid isle
#

done

--role-pills: true; /* accepted values: true / false */
#

here's the file link if you have to convert it to cdn
https://raw.githubusercontent.com/Krammeth/css-snippets/refs/heads/main/PRA-RolePills.css

rain olive
#

thx ^^

red zenith
#

Is there a way to get this to work outside of QuickCSS and in a theme file? I can't get it to work.

tepid isle
#

you need a way to toggle the custom variables, so having something in your QuickCSS is the easiest way

red zenith
#

I got it to work in the theme file. I had to put the import url at the top below thew original one and put the root stuff at the bottom of the theme.

tepid isle
#

Oh yeah, imports always go at the top of the file

#

Glad you managed to get it to work

tepid isle
#

I finally fixed bot profiles, now they're not janky as before
will push the changes soon

tepid isle
#

Oh yeah, I pushed them a few hours ago

quaint gazelle
tepid isle
#

Yep, but I have to see how feasible it is

#

It's an old idea of mine, but it used to have a lot of :has() selectors back when they weren't that big of a deal on the performances

#

So I gotta check if it's still doable and if I can reduce their amount

quaint gazelle
# tepid isle Yep, but I have to see how feasible it is

interested to see what you have up your sleeve, i wouldn't mind a few :has() selectors as i managed to clean out and redo most of them in my theme, think theres only 6 in total in the theme so far since the cleanup and adjustments

tepid isle
#

a few
ctrl + f
38 results
wires

#

yeah no, this is absolutely horrible

#

performance just plummeted as soon as I turned the theme on LMAO

red zenith
#

Surprisingly my theme only has 3 :has()

tepid isle
#

unless
but I have to try this

#

ok, it works

#

and it's not even using any :has() selectors

quaint gazelle
tepid isle
#

nope

quaint gazelle
#

😦

winged moat
#

This reminds me of Couve

tepid isle
#

You should read the code

winged moat
#

I'm actually working on bringing Couve back

#

I miss it

tepid isle
#

Good luck with that, I used to have it as my main theme too

winged moat
#

Getting there

tepid isle
#

Now I'm fine with just a simple transparent background and a few tweaks here and there

#

But yeah, this snippet basically brings back the couve popouts with a few tweaks

#

and more to come

winged moat
#

Yeah this is what i had just from fixing it up, do you mind if i reference your code (with credit) though?

tepid isle
#

Sure

winged moat
#

Thanks!

tepid isle
#

Np, it's good to see I wasn't the only one loving that theme

#

I'm also working on the smaller popouts if you're interested

winged moat
#

Already have those done actually

tepid isle
#

That's nice

winged moat
#

Well mostly, the server tag and badges currently bleed over the banner a bit and i wasn't sure if the status bubble hovering above the popout was intentional

tepid isle
#

Well

winged moat
tepid isle
#

Couve never had tweaks about the status bubble

winged moat
#

It did actually

#

Or something akin to it

tepid isle
#

They had the inline status

#

Like the old style

#

Unless that was just for my local copy

#

As the original wasn't very updated

winged moat
#
// Bubble goofy thing
    .addCustomStatusButtonBubble_d22603,
    .statusBubbleOuter_d22603 + .visibleContainer_d22603 {
      position: absolute;
      top: -60px;

      --custom-status-bubble-background: var(--background-tertiary);
    }
    .statusBubbleOuter_d22603:before {
      top: 28px;
    }
    .statusBubbleOuter_d22603:after {
      top: 50px;
      left: 25px;
    }
#

this is in the original code /shrug

tepid isle
#

But yeah, the badges did use to go over the banner

tepid isle
#

It's slightly different now, since I've tweaked them a little

winged moat
#

yeah probably how i'm going to have to do it

#

putting the bubble above made it disappear in the settings card

#

currently migrating everything over to ClearVision's classes file simply so i don't have to go class hunting every time discord updates

tepid isle
#

That's the fun part wdym

winged moat
#

server list, user area, and channels bar are completed now

tepid isle
#

It's worse when selectors randomly break because discord decides to add a div in between

winged moat
#

although i'm still looking for a good approach of resizing the user area when the BetterFolders bar comes out

tepid isle
#

How about moving the avatar in the middle

#

Would that look too goofy?

winged moat
#

decent idea but i just meant the actual detection of the second bar

tepid isle
#

I don't remember the structure by heart but I guess you'd have to use :has() with a + selector

winged moat
#

right now i just

&:has(.vc-betterFolders-sidebar) {
      #{c(sidebar panel panels)} {
        transform: translateX(180px);
        width: calc(100% - 180px);
      }

but of course that will only work on vencord and is honestly a little delayed

tepid isle
#

That's scss, isn't it?

winged moat
#

yes

tepid isle
#

Figured, I was confused for a sec

winged moat
#

that classes file is very convenient

#

but yeah i was scrolling through css snippets to see if anyone made something that moves the user area like this

#

then i found your recreation of the couve popouts and thought "what a coincidence"

tepid isle
#

What do you think of my version, with all the tweaks included?

winged moat
#

works tbh

#

need to move that "new" indicator too though

tepid isle
#

The "new" at the bottom should be moved too

#

Yeah

winged moat
tepid isle
#

I've noticed not everyone likes it so I also left the bubble as toggle

#

I don't know where else to put it tbh

winged moat
#

i'm probably just going to put it under the avatar or something

tepid isle
#

I will also be adding a new addon soon enough, once I'm done with the code part

#

Basically rewriting an old snippet of mine from scratch, since it used to be full of :has() selectors and now they're basically evil incarnate for discord performances

#

I miss the days where I could use them without caring too much

winged moat
#

i see, once i've fixed this theme up i should probably go through and limit the usage of it

tepid isle
#

How many?

winged moat
#

3 so far

#

it doesn't look like couve uses them much either so i think it'll be fine, how bad is it on perf?

tepid isle
#

It's very bad

winged moat
#

dang it

tepid isle
#

But it can be mitigated a bit with more precise :has() selectors

#

Like using direct children descending selectors instead of whitespaces

winged moat
#

position: fixed my beloved

tepid isle
#

If you check the code for this snippet, you'll only find one and it's pretty weird

tepid isle
winged moat
#

yes well

tepid isle
winged moat
#

it was like that before as well

tepid isle
#

Oh, I think I know what that is

#

Iirc it's an ::after pseudoelement of the servers sidebar

#

That has a gradient

winged moat
#

well yeah couve styles this alert with a gradient

#

or, well, it's confusing

#

first it gives it a gradient background only to make it transparent

tepid isle
#

When in doubt
display:none it out

winged moat
#

well no that would get rid of the entire "New" indicator

tepid isle
#

Yes, that's the point

winged moat
#

no i've just made the background transparent like couve does /shrug

tepid isle
#

Thanos snap it out of existence

winged moat
#

nonono i want to know if there's a mention in a server that is not visible

tepid isle
#

One thing you're still missing though

#

8px border radii avatars

#

That was one of the staples of Couve

winged moat
#

the chat area is up next

#

even in the original couve the avatar at the bottom left was round ;)

tepid isle
#

Because the selector was outdated

#

I had to update it when I first downloaded the theme file

winged moat
#

oh

tepid isle
#

Which was like, 2 years ago?

winged moat
#

i did do it in voice channels

tepid isle
#

Hold on, when did I join blackbox

#

October 2023

winged moat
#

but the avatar radius actually does not even come up in the original user area code

#

and even in the preview image, that thing is round

tepid isle
#

Well then maybe it was supposed to be rounded

winged moat
#

since it's supposed to fit in with servers that makes sense to me

tepid isle
#

To be fair

#

Back then I knew like 1/10th of what I'm currently able to do with css

#

Maybe it was just an ocd thing, idk

winged moat
#

i'm definitely not as familiar with css as i am with actual programming languages but this experience has been pretty enjoyable so far, and i'm just happy to be able to bring it back lol

tepid isle
#

css is fun

#

It's a good playground for me to relax in

winged moat
#

there you go

winged moat
tepid isle
winged moat
#

I don't remember every detail after all so they've been pretty helpful for fixing up the user area

tepid isle
#

This will severely affect the trout population performance

quaint gazelle
#

@tepid isle well something changed on discord recently cause it ain't changing lol

winged moat
#

that's the modal v2 experiment

#

ew...

winged moat
quaint gazelle
tepid isle
#

Dunno, I haven't opened discord pc yet and I won't till this afternoon

quaint gazelle
#

they would of have cause i don't have experiments even enabled

tepid isle
#

Maybe you're in the x% they rolled it out to

#

Your account is quite old, so it's normal if you get experiments rolled out to you first, since they go by join date + nitro usually

quaint gazelle
#

ah

tepid isle
#

So they stay in the same place, but can only be seen when the tab is selected

#

And if that's not doable, well then fuck

winged moat
#

it's either gonna be this, or some hover resizing bs

tepid isle
winged moat
#

yes

tepid isle
#

That's

#

Bad

winged moat
#

yes

#

the only thing that seems reasonable here is elongation but

#

i don't think i'm a huge fan

#

at first i was going to go for "hover over these 5 pixels i left over of the open tab to open itt"

#

but the way it's structured, i can't have that hover shrink down the profile body

tepid isle
#

No, that sucks

winged moat
#

Yeah just to see if it was doable but no

#

The only thing i can think of is just making it longer, adding another 400 pixels and having the tabs take that up

winged moat
#

The profile body is a child of the profile class

#

But this tab shit is a different class next to it

tepid isle
#

And translateX() doesn't help?

winged moat
#

I don't think i can do anything to the profile body by hovering over the tab body

tepid isle
#

Guess I'll have to check it out when I'm back from work

winged moat
#

Maybe we put it underneath..?

tepid isle
#

Thanks Discord

winged moat
#

Have it expand by hovering over it

tepid isle
#

Does it behave the same way with mutuals?

winged moat
#

Yes mutuals and activities are now a tab group

#

The profile body is just not

tepid isle
#

I might have an idea

winged moat
#

What gets me the most about this is that they've make it look like the normal popout

#

But it's just slightly different

winged moat
#

Like i think we now have 3 visually different profile cards

#

Small popout, friends chat, and now this modal v2

#

All the same but they have slight differences

winged moat
tepid isle
winged moat
#

I think i prefer the one in private chats

#

That shows up in place of a members list

tepid isle
#

How could you tell?

#

And no, that last class is not a typo

winged moat
#

Yeah i just got done doing the friends one

#

Did something a lil different with the status there as well

#

And then i see this new modal fr

tepid isle
#

Classic

#

The timing is impeccable

#

I must say

winged moat
#

It really is

#

But yeah what's your idea with these tabs? I'll see if i can do it

tepid isle
winged moat
#

Yeah but i like the lil background they have for the bio

#

I styled the status to look the same

#

Also i think in the future we should make Couve modular and collaborate so we're not maintaining two of these at the same time

#

Split out things like profiles, the user area, and whatever else

winged moat
rain olive
winged moat
#

luckily the power of css lets us (mostly) restore the look

rain olive
winged moat
rain olive
#

oh nicw

#

am afraid to open my pc at this rate lmao

winged moat
#

i've been restoring this theme for a few days now and every day so far a random thing has broken a little bit

#

i can understand why it has been passed around multiple times

#

theme dev sux

rain olive
#

yea

winged moat
#

i've fixed the top margin/padding to include the search bar on the members list two days in a row now because discord keeps changing it

rain olive
#

i noticed the user panel thingy on left down it doesnt center my pfp anymore but ive cba to fix it

#

grr

#

get yo sht together discord

winged moat
#

couve does this with the user panel which i really like

rain olive
#

cool

glad current
#

yo amyone found the css code to revert it back now?

#

@tepid isle @winged moat ??

#

sorry for ping [if you mind]

tepid isle
#

I do mind, I'm at work

#

Read a bit the chat above

winged moat
#

as i said i have a temporary kind of fix in my theme but like /shrug

quaint gazelle
#

@winged moat mind tossing me the snip so i can check it out

winged moat
#

not very pretty as it's compiled from scss but here you go, ripped out of couve

winged moat
#

@quaint gazelle

quaint gazelle
#

yep also thank you

tepid isle
#

Time to turn my pc on and assess the damage

winged moat
#

is this kosher?