#Cozier Profile Popouts :venniecozycat:
1 messages · Page 1 of 1 (latest)
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
good idea
I just pushed the change on github, it should get updated in a bit
good catch

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
kinda not a fan of where custom status is shown
Where do you think it would fit best?
maybe under about me?
Below the "message" and "add friend" buttons?
could just be above the about me button? fill in that space below the profile picture?
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
why not use a bubble or something similar to match with the mini profiles?
Because I hate that thing 
I mean, I enjoy being able to hover over and see the whole status
maybe under the badges would be a good option
Too small to fit everything
avoids breaking stuff like this seems to.
Well that's weird, did I leave it with text-align: right?
It's supposed to be centered


I may have forgotten to change it back
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
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
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™️
cool snippet 
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

just thinking maybe move "About Me" to top right coz kinda looks out of place or is that just me?
It's the tab name
well click the mutual servers and friends texts
^
As you saw earlier, there is also the activity one
yea i didnt realise thats my bad for being stupid
Nah it's fine
I wonder if I can add some lighting behind
But still make it so you know there's stuff that's being covered

Should be doable
I mean, it looks fine on your profile since the button colors and background colors are similar
I just wanted to come in and say that this is literally so cool!
Thank you, @tepid isle (sorry for pinging!)!
Thanks, I appreciate it 
oh, I see why it's that bad
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?
definitely not on light mode
looks a lil better
(which should be on by defauly in my opinion not to get flashbanged by light profiles with dark themes lol)
didn't realize that wasn't on
is it better now with the increased blur?
tbh I could also decrease the buttons brightness a bit
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.
actually, looking at vilchu's buttons, yeah they can get a lil too bright
how is that 50/50 wtf
text-shadow my beloved

alright, I pushed the new changes
hi hi
any plans on implementing this on the non-full popout too?
Most likely, yeah
I have a few ideas on that regard
Same for the DMs profile side panel
alright
Can't really give an ETA, but I hope to finish it before discord rerolls classes again

im sorry but im laughing too fuckinf hard at the claudio bisio pfp
Alright, all changes should have been pushed, so if anyone finds something broken let me know

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.
That's, uh
Some extreme cases huh
I'll see what I can do about it
fixed the pronouns, now onto the custom status
It's similar to what Discord is doing now in experiments
sort of, Discord's still has a lot of things on the left side
fixes have been pushed, just a matter of github updating the file
Yes it works
nice
It is imperative to add a Claudio Bisio Lighting Slider


did u move the clan tags to the left on purpose?
yup
ah ok was just checking it wasnt a bug
if you're not using the collapsible clan tags snippet you can just remove the order: -1 in the code
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
Awesome css
Yeah, if there's something else that adds styling to the status bubble it will most likely break, since I didn't add too many properties to mine

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.
looks like the experiment
The fact that borders don't show up in white mode is purely discord's fault, I used their variable for that

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

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 
Are the changes in the original message or?
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
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?
it isn't half as bad without this css, believe me haha
yeah I believe that
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?
.root__24502.root__49fc1.small__49fc1 {
> .profileEffects__01370 {
opacity: 0.2 !important;
}
}
add this to your quickcss
yeah that fixes it
default opacity when hovering is 0.6, but it's still not enough to see things clearly
appreciate it
you're welcome
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
it's supposed to be between the username and the pronouns section
ah i see, with tags the pronouns end up underneath the usernames section
I moved the clan tag on the left because it was causing some issues with the collapsible clan tags snippet
one sec
tyt
gotta find the code part
.tags__63ed3 > span:has(> .chipletContainerInner__10651) {
order: unset !important;
}
add this into your quickcss
np!
awesome work, seriously
Not me editing a theme to test some new things and crying because it's not working
Turns out the theme was disabled

ah yes, some avatar decorations can obscure the profile 
Otherwise this is really nice, I love it
^
no wait
I mean this
that's the wrong snippet lol
here it is
ah I went right over it, oops 
I was scanning through the chat and jumped right over it
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
ah, much better, cheers 
damnnnn it looks beautiful
Thank you
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?

I have an idea but I'll have to see how doable it is
nope
well i copied the link i meant
found the place

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)
I'm not sure I got what you mean
- 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
- 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 
I'll see about it tomorrow, it's basically a mix of the 2 versions, the original and the latest iteration
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
ya! exactly that :3
hey this is cool but it's like, impossible to read
the things i reccomended that hopefully should help may be added tomorrow
why not something more like this?
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?
- banner is stretched, looks like that wide Putin meme
- message bar at the bottom is way too big
- message bar at the bottom exists (I hate it)
I didn't like how much the banner zoomed in so this fixes it
.banner__68edb {
background-size: 141% !important;
top: 5px !important;
}
that fixes the banner problem with this snippet, but zooms in on banners in the normal popout.
.small__49fc1 .banner__68edb {
background-size: 141% !important;
top: 5px !important;
}
Yeah it's one of the things I still have to fix besides badges and stuff positioning
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
the banner is just an example
i wasn't gonna bother actually making it the correct proportions just for a mockup
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
i would but i have no idea how to lol
I rember
- reduce the amount of :has() it's using to the bare minimum to improve performance
(there should be only 2-3 but the less the better)
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?
used to be 4, now it's only 2
already a good improvement
how about something like this? (still a prototype, I know it looks kinda bad, but it's already a start)
YESSS this is pretty much almost exactly what i was talking about
except no gradient on the right side text background, though i assume you're working on that
no gradient on the right side text background
so basically just bringing back the gradient borders?
I'm confused

so- on the right side just make it a solid colour determined by the secondary gradient colour
I'm sure you said you wanted a background on the right side, or am I tripping hard?
ya!
ah, solid color
ya :3
well, that's easier

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
LOL

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

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
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
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
oh ok

I can try and increase the text shadow I added for that purpose
this was 1px shadow
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

YUMMYY. pretty much how i imagined it!

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
yeah I like the bubble xd
ya
@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
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?
or maybe not layer but container query using custom property
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
:3
thanks
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

back to the original
well, you were right
they really are

I will push the latest changes tomorrow, when I'm sure everything works as intended (because currently it doesn't)
YEAHHHH STATUS BUBBLE!
knew you'd come through >:))
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

good
so wait, what does the background color come from?
the color of the background element 
the right part you mean?
yeah
mmm well I'm curious on how it's gonna look for certain profiles, when you release it of course
ewh
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
oh that's pretty nice actually
that's not my profile colors though 
which is weird
they are
it's a gradient made from 2 color mixes of the profile colors and that black
discord's hallucinating
The Spotify controls are overlapping each other; I don't know if you have seen this already, but just wanted to let you know.
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
besides that, why is the message button so dark wtf
I'm on dark theme (Onyx) as well, but it's not that dark
It's because of the custom theme I use (midnight w/ vencord flavor).
So I can change it easily w/ custom CSS.
Yup!
@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
did u scrap having the badges permanently under the user?
no, it's just broken
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
im confused
idek what that means
vp usrbg
Displays user banners from USRBG, allowing anyone to get a banner without Nitro
AutumnVN, katlyn, pylix, TheKodeToad
oh no its a nitro banner
then idk what to tell you
Your discord must acting weird man
yea i asked someone else and they see it how i see it
I switched this to Nitro banner
so it was indeed due to that setting
was so confused lol
your profile colors are weird
thought id accidentally put a differnt banner on
even Discord refuses to parse them correctly
there's syntaxes now? man...
guess I'll use #0000001a instead then

Discord's just high on something
ok let chat hope

alright, so
let me push some of the changes/fixes
ok, I pushed quite a bunch of stuff
I'm leaving the right background on hold for the moment
the details, in case someone is interested
question would it be possible for u to make a separate version that has the old custom status location
there is a variable added for that i think now
oh?
Check the post in the channel again
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....

You always find ways to break things, I like it
I hate light mode
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

@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
^
There's new custom variables for that
Default is false
oh okay
And damn the default profiles look gloomy asf
btw the tag order isn't working
tag order is for the clan tag position
ah
this is driving me crazy atm how it is rn:
What is
how it should be
Oh yeah
I wanted to set an absolute position for badges
But then remembered that some people have long pronoun sections
could u not add it as a root setting?
What for? You would still see other people's pronouns overlapping with badges
yea fk other peoples profiles
What I could do is set a 100% width on the badges so it should stay at the bottom

If that works
Did it work?
yea works perfectly now
Alright, I'll push the fix later
Open Vozdux's
But yeah, this is why I specified it wasn't perfect yet
there we go got that fixed up so it changes to the frambosia color on hover
Is it just me or the --status-enabled variable doesn't work?
you have no status anyway (wait nvm)
your missing true
--status-enabled: true;
False = bubble
True = bar
Ngl I feel like I should make a separate repository with readme file for this snippet alone and its addons

Np!
Nvm - it's still the same?
where are you putting it to?
I haven't changed anything, besides the text that was dark last time.
Wdym by "it"?
where are you putting it in your css file or quickedit
At the top (idk if it's clear on the screenshot).
?
In :root.
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.
No, it's not necessary
I converted the link to CDN bc, apparently, BD won't detect GitHub raw.
It's in the original import
Yeah, I don't know why.
BD issue
suprise anyone still uses BD with how godly slow and outdated it is
😐
I assume
Yeah, same
But hey, it's a choice
As long as it works
Really weird that you had to import both files though
It's bc of this.
Wait, so you also had to convert the original import then?
Because that's from github raw too
Yeah, I did that, too.
Crazy
Well, I don't really like Vencord, but it's just my opinion, so...
Well then keep in mind that you'll have to do that for the incoming imports too
any particular reason?
:3
nvm it's just your profile that has a dark background color
oh that yeah lol was having a hard time deciding what color for it to be
since i don't have nitro now
hm good idea
Now that's better
u could also use the vencord banner shit
eh gotta join another server just to request it
No biggie imho
You can always only keep the few useful channels and ignore the others
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
crazy i think
gotta admit that orange does look good
this code doesn't seem to work at all for me, any idea why? the profiles are the exact same as before
Be sure to put the import on top of your quickcss
Are you using BetterDiscord?
Vencord
I don't think a Vencord donor would use BD tbh
😂
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.
Does any other quickcss work?
yea my other css works fine

Like this.
I tried copying the css code, no changes either
doesnt work either
Do you have the new profile popouts experiment enabled/rolled out for your account?
urh how do I check
Send a screenshot of the profile
ah
The small ones' is still WiP
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)

yea sorry my bad
Will probably release it when I make it less laggy
Because the various :not(:has()) selectors I used really make an impact on the performances

Oh...
seems to be for all discord bots even the one i host myself its happening to
i guess App Names dont come under the same class as Display Names so the username is forced upwards
Indeed
Nobody ever thinks about the bots, poor bots
apps*
See, we don't even know their names
I may have been deadnaming them for ages
I kinda liked this versions bg better, it wasn't so cluttering for the roles n such
err.. is there any way to "force" the gif ani moving only when we open the profile popouts ?
other than this
Honestly, no idea
After a bit of research, I don't think you can do that with css alone
welp, okay then..
aww yeah, looks good!
oh yeah thats nice :D
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
emphasize the maybe part :-D
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)
back to your rgba ways 😭
Whoops
how can I get the @import to work in BD 
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

So, to convert the @import to CDN, all you have to do is copy the link in the url(), paste it in the following website - https://github-cdn-converter.vercel.app/ - and copy the first generated link.
Convert raw.githubusercontent.com URLs to use a custom CDN
After that, replace the copied link with the original one.
Remember that you'll have to import the addon link as well
Because that won't work either
still cant believe ur using bd

thanku ❤️
You're welcome!
I don't understand why BD wouldn't make rawgithub links work
those links don't update to new versions as far as I can tell from jsdelivr documentation (correct me if I'm wrong)
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
the rest of the :root doesn't work for me for some reason, the two above works doe ig
most likely because the first link is of an outdated version
hm..

I don't really know what to say
¯_(ツ)_/¯
it works in ptb wth
but in ptb I don't have the extra friggin button grr
decisions decisions
why do u suck discord
They are also not the same size in the first photo
ik cuz theres 3 n not 4
man, this is just too good..... 🤤
oh yeah cuz I cbad to find their classes and they kinda fit like that
glad you like it
? copy paste the import link into your quickcss
when I do the whole message "@import url('https://raw.githubusercontent.com/Krammeth/css-snippets/refs/heads/main/PopoutsRevamped.css');" it says invalid
but when I just do "https://raw.githubusercontent.com/Krammeth/css-snippets/refs/heads/main/PopoutsRevamped.css" It works but nothing happends
where are you putting it?
it doesn't go in the online themes section it goes in the quickcss at the very top line
Like this?
yes
Okay, So I just click off?
om yes
Nothing happened, everyone's pfp is still the same.
show a screenshot
OOOOOOOHHHHHHHHH

I'm going to add something funny to the smaller popouts so it's clear the snippet isn't meant to work on them
i need to figure something new out for this section of the profile since the update made codeblocks look different
Making codeblocks look more similar to roles?
yeah it use to look good before the whole new discord UI update
Doesn't sound too difficult
if you can figure something out that would be kool
I'll give it a look tomorrow
.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)
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
I'm giving it a few quick touches
oh now its showing it all you edited after i copied it initially
yeah but it's still not finished yet
yeah
give me a couple minutes
sure
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;
}
}
}```
awesome thank you
np
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) ✅
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
I might have broken something
and pushed the changes

who would've thought that you can't put a @container inside another @container
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
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

a what :D
ah, ic
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 
Sure, will do it later
I might add it as an extra/addon like I did with the status bar
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
thx ^^
Is there a way to get this to work outside of QuickCSS and in a theme file? I can't get it to work.
you need a way to toggle the custom variables, so having something in your QuickCSS is the easiest way
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.
I finally fixed bot profiles, now they're not janky as before
will push the changes soon
yay
Oh yeah, I pushed them a few hours ago
you have any new cool stuff planned?
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
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
a few
ctrl + f
38 results
yeah no, this is absolutely horrible
performance just plummeted as soon as I turned the theme on LMAO
Surprisingly my theme only has 3 :has()
unless
but I have to try this
ok, it works
and it's not even using any :has() selectors

show a little teaser of what your working on 🙂
😦
This reminds me of Couve
Good luck with that, I used to have it as my main theme too
Getting there
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
Yeah this is what i had just from fixing it up, do you mind if i reference your code (with credit) though?
Sure
Thanks!
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
Already have those done actually
That's nice
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
Well
Couve never had tweaks about the status bubble
They had the inline status
Like the old style
Unless that was just for my local copy
As the original wasn't very updated
// 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
But yeah, the badges did use to go over the banner
This was what I ended up doing
It's slightly different now, since I've tweaked them a little
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
That's the fun part wdym
server list, user area, and channels bar are completed now
It's worse when selectors randomly break because discord decides to add a div in between

although i'm still looking for a good approach of resizing the user area when the BetterFolders bar comes out
decent idea but i just meant the actual detection of the second bar
I don't remember the structure by heart but I guess you'd have to use :has() with a + selector
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
That's scss, isn't it?
yes
Figured, I was confused for a sec
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"
looks very nice! though i might rethink the status placement here too, i was never a fan of that blur
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
i'm probably just going to put it under the avatar or something
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
i see, once i've fixed this theme up i should probably go through and limit the usage of it
How many?
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?
It's very bad
dang it
But it can be mitigated a bit with more precise :has() selectors
Like using direct children descending selectors instead of whitespaces
position: fixed my beloved
If you check the code for this snippet, you'll only find one and it's pretty weird
Nice, but what happened to the status
yes well

it was like that before as well
Oh, I think I know what that is
Iirc it's an ::after pseudoelement of the servers sidebar
That has a gradient
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
When in doubt
display:none it out
well no that would get rid of the entire "New" indicator
Yes, that's the point
no i've just made the background transparent like couve does /shrug
nonono i want to know if there's a mention in a server that is not visible
One thing you're still missing though
8px border radii avatars
That was one of the staples of Couve
the chat area is up next
even in the original couve the avatar at the bottom left was round ;)
Because the selector was outdated
I had to update it when I first downloaded the theme file
oh
Which was like, 2 years ago?
i did do it in voice channels
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
Well then maybe it was supposed to be rounded
since it's supposed to fit in with servers that makes sense to me
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
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
there you go
Yeah it's definitely a nice break from banging my head against the wall replicating openvr behavior using openxr
Yeah haha i joined their server just to be able to ask some questions here and there
I don't remember every detail after all so they've been pretty helpful for fixing up the user area
Shit, I must use some of them
This will severely affect the trout population performance
@tepid isle well something changed on discord recently cause it ain't changing lol
well, the layout can be mostly brought back, the problem is that i have no idea what to do with those tabs that are now detached from the profile body
It's the new experiment
ugh so they are already pushing that shit onto everyone
Dunno, I haven't opened discord pc yet and I won't till this afternoon
they would of have cause i don't have experiments even enabled
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
ah
I'm probably going for an
opacity: 0;
pointer-events: none;
on the other tabs unless they are selected in the bottom left thing as usual
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

the real problem is that the profile body is no longer a tab
it's either gonna be this, or some hover resizing bs
So one of the tabs are always open?
yes
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
No, that sucks
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
Why not?
The profile body is a child of the profile class
But this tab shit is a different class next to it
And translateX() doesn't help?
I don't think i can do anything to the profile body by hovering over the tab body
Guess I'll have to check it out when I'm back from work
Maybe we put it underneath..?
Thanks Discord
Have it expand by hovering over it
Does it behave the same way with mutuals?
What gets me the most about this is that they've make it look like the normal popout
But it's just slightly different
Literally
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
Hm?
Because discord loves being consistent
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 
I honestly never use it
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
well this was kind of what i had in mind but it requires a :has() and it's kinda shit
the fckin what now
why discord... stick to one thing at a time pls....
yeah i hate it
luckily the power of css lets us (mostly) restore the look

i've thrown this into couve for now but that tab solution is not final
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
yea
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
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
couve does this with the user panel which i really like
cool
yo amyone found the css code to revert it back now?
@tepid isle @winged moat ??
sorry for ping [if you mind]
as i said i have a temporary kind of fix in my theme but like /shrug
@winged moat mind tossing me the snip so i can check it out
not very pretty as it's compiled from scss but here you go, ripped out of couve
do note that this horrible hover is just a stopgap solution and i'll try my best to do something better
@quaint gazelle
yep also thank you
is this kosher?



