Legacy Profile Popout

[KingGamingYT]

With Discord's removal of the legacy profile popout experiment (2 years in the making, apparently), I'm wondering if it's possible to style the new menu to look like the old one without a status dropdown. There's also the "click to copy username" easter egg, but I doubt that's possible to be replicated without JS.

[milbits]

im workin on it! but if you have a plugin for the experiments tab, try this

[KingGamingYT]

Ohp, I think there's been a bit of confusion in my wording, I'm referring to the status changer/mini profile popup next to the media controls, not the new profile popouts and full design Discord recently has been rolling out.

They had a dedicated experiment from back in 2022 to either use the new ones or change them back to how they were before, which got removed today.

[milbits]

oops yeah, look at this poorly done thing

[KingGamingYT]

progress is progress ! ! lol

[KingGamingYT]

I decided to take a small stab at it today and I'm happy with what I did get changed, but unfortunately I don't think moving the status changer back into the menu is possible with purely css :(

[milbits]

this will drastically affect the economy...

[KingGamingYT]

im workin on it! but if you have a plugin for the experiments tab, try this

they removed the experiment lmfao

[milbits]

bruh :sob: :sob: this is the fastest time that they ever removed an experiment too

they really dont want us to use the better ui huh

[KingGamingYT]

nope

no idea what you've done up to this point but in the past half hour I've managed to hack together something that's okay visually, has some issues functionally though

[milbits]

could i get the css? i didnt really have that much time styling it

[aeonlight]

istg discord hates its userbase.................

[milbits]

the investors probably lvoe it though

[KingGamingYT]

could i get the css? i didnt really have that much time styling it

Some of its taken from a snippet in the BetterDiscord server, but here it is

#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d > div > .colorDefault_d90b3d.labelContainer_d90b3d.item_d90b3d, 
#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d > .separator_d90b3d {
  display: none;
  }
.accountProfilePopoutWrapper_b2ca13 {
  top: 5px;
}
#status-set-custom-status > .label_d90b3d {
  text-indent: -9999px;
  line-height: 0;
}
#status-set-custom-status > .label_d90b3d::after {
  content: "Set a custom status";
  text-indent: 0;
  display: block;
  line-height: initial;
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b:before,
.accountProfilePopoutWrapper_b2ca13 .wrapper_cb78f1.biteSize_cb78f1,
.accountProfilePopoutWrapper_b2ca13 .header_c6e596,
.accountProfilePopoutWrapper_b2ca13 .body_d4e7c2 div:has(.descriptionClamp_fc5c48),
.accountProfilePopoutWrapper_b2ca13 .activity_cd74cc,
.accountProfilePopoutWrapper_b2ca13 .tags_c32acf,
.accountProfilePopoutWrapper_b2ca13 .profileEffects_f867f9,
.header_b07019,
.usernameRow_c32acf {
    display: none;
}
.accountProfilePopoutWrapper_b2ca13 .body_d4e7c2 {
    padding: 8px;
    gap: 8px;
}
.accountProfilePopoutWrapper_b2ca13 .username_d4e7c2 {
    padding: 0px 8px;
}
.accountProfilePopoutWrapper_b2ca13 .menus_d4e7c2 {
    gap: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_d4e7c2 {
    background-color: transparent;
}
.accountProfilePopoutWrapper_b2ca13  .menus_d4e7c2 > .menu_d4e7c2 > .scroller_d90b3d {
    padding: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_d4e7c2:last-of-type [role="group"]:first-of-type::before {
    content: "";
    display: block;
    margin: 7px 4px 8px 4px;
    border-bottom: 1px solid var(--profile-body-divider-color);
}

.accountProfilePopoutWrapper_b2ca13 {
    left: 0px;
    bottom: 0px;
}

.accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b.userProfileOuter_c69a7b {
    width: 220px;
    background: var(--background-floating);
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b {
    max-height: 100%;
    width: 220px;
    gap: 0px;
    padding-bottom: 0px;
    background: var(--background-floating);
}
#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d {
  right: 20px !important; 
  margin-left: 1em !important;
}

[KingGamingYT]

this may be a lost cause

[milbits]

what the fuck are they doing

[KingGamingYT]

can't wait to have to somehow reformat the thought bubble into a button and pull it down

[milbits]

that'll be so awesome and cool!

[KingGamingYT]

they updated the classes so now my above code is already irrelevant YAYYYY

[KingGamingYT]

Updated the classes and hopefully made it less of a mess, removed some padding in there and now I think it looks better than it did before

#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d > .separator_d90b3d {
  display: none;
  }
.accountProfilePopoutWrapper_b2ca13 {
  top: 5px;
}
#status-set-custom-status > .label_d90b3d {
  text-indent: -9999px;
  line-height: 0;
}
#status-set-custom-status > .label_d90b3d::after {
  content: "Set a custom status";
  text-indent: 0;
  display: block;
  line-height: initial;
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b:before,
.accountProfilePopoutWrapper_b2ca13 .wrapper_cb78f1.biteSize_cb78f1,
.accountProfilePopoutWrapper_b2ca13 .header_b07019,
.accountProfilePopoutWrapper_b2ca13 .body_ad5fac div:has(.descriptionClamp_fc5c48),
.accountProfilePopoutWrapper_b2ca13 .activity_cd74cc,
.accountProfilePopoutWrapper_b2ca13 .tags_c32acf,
.accountProfilePopoutWrapper_b2ca13 .profileEffects_f867f9,
.accountProfilePopoutWrapper_b2ca13 .usernameRow_c32acf {
    display: none;
}
.accountProfilePopoutWrapper_b2ca13 .body_ad5fac {
    padding: 0px;
    gap: 8px;
}
.accountProfilePopoutWrapper_b2ca13 .username_d4e7c2 {
    padding: 0px 8px;
}
.accountProfilePopoutWrapper_b2ca13 .menus_ad5fac {
    gap: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_ad5fac {
    background-color: transparent;
}
.accountProfilePopoutWrapper_b2ca13 .menus_ad5fac > .menu_ad5fac > .scroller_d90b3d {
    padding: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_ad5fac:last-of-type [role="menu"]:first-of-type::before {
    content: "";
    display: block;
    margin: 7px 4px 8px 4px;
    border-bottom: 1px solid var(--profile-body-divider-color);
}

.accountProfilePopoutWrapper_b2ca13 {
    left: 0px;
    bottom: 0px;
}

.accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b.userProfileOuter_c69a7b, #status > .scrollerBase_c49869.none_c49869.scroller_d90b3d {
    width: 220px;
    background: var(--background-floating);
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b {
    max-height: 100%;
    width: 220px;
    gap: 0px;
    padding-bottom: 0px;
    background: var(--background-floating);
}

[KingGamingYT]

Added the switch accounts icon back! It's kinda small but tbh the entire menu is fucked up in such a way I don't know if I can solve

[KingGamingYT]

A few more tweaks before I go to bed, some padding reduction and I added a divider between the switch accounts and custom status button because that's no longer there for some reason

[aeonlight]

I am this close to learning how to code just to make a custom application for discord.

[KingGamingYT]

i love css ! ! ! (you have to target all the buttons in the menu separately) ((these divs are making me lose my mind))

[milbits]

nesting exists, so you can do for example:

.crazyvar__73737 > div > div{
&.avatarwrapper_526277{
display:none}
&.meow355{
  &.disabled{}
}

}

there's also :is(.class1, .class2), I'm bad at explaining so look there https://developer.mozilla.org/en-US/docs/Web/CSS/:is but basically you can do

:is(#status, #account) .scroller .colordefault :is(> div, > div > div) {...}

also, I'm pretty sure that having a lot of selectors can impact performance, you don't need to target every single one in the tree, doing .crazyvar_666 .wrapper727 even though there's something between those 2 works as well

and please don't ask me why i have a trillion edits on this comment 💔

[KingGamingYT]

Really good advice, thanks!

About the "selecting all selectors in the tree" thing, I tried to apply the effects to them individually using devtools to see which ones it was but it didn't work properly unless I applied it to all of them 💔

Also don't worry about the edit thing I've done the exact same thing in this very thread

Edit: I tried :is() first because it seemed to be the most straightforward and while I took a fair stab at it, it doesn't seem to work :(

[milbits]

removing > div.. whatever lmao seems to fix it for me

:is(#status, #account) > .scrollerBase_c49869.none_c49869.scroller_d90b3d .colorDefault_d90b3d.labelContainer_d90b3d.item_d90b3d {
font-size: 14px;
min-height: 0px;
max-height: 28px;
}

[KingGamingYT]

removing > div.. whatever lmao seems to fix it for me

:is(#status, #account) > .scrollerBase_c49869.none_c49869.scroller_d90b3d .colorDefault_d90b3d.labelContainer_d90b3d.item_d90b3d {
font-size: 14px;
min-height: 0px;
max-height: 28px;
}

cuts out the need to specify the repetitive divs entirely, quite nice edit, noticed this implementation screws up the switch account menu, I think I need to find an applicable selector and then put it under a :not() element to fix that

[KingGamingYT]

fixed it (i love pseudo selectors within pseudo selectors)

[milbits]

#cat:not(.meow:has([aria-label="woof"]):not(:is(.brainrot,.rotbrain):has(.skibiditoilet)))

[KingGamingYT]

fixed the weird left padding in the accounts menu (it still exists in the status changer menu, but I don't care as much lol)