expandable user panel | libVencore | Page 1

unique otter Oct 28, 2023, 5:16 AM

#

will this snippet gets updated?
sorry i just love this and after the update the snippet died 😦 thanks in advance/

odd oasis Oct 28, 2023, 5:24 AM

#

/* Expandable User Panel */

.panels__58331 div[class^="container"] div[class^="flex"] {
  width: fit-content !important; 
  margin-left: auto; 
  margin-right: 0;
}

.panels__58331 div[class^="container"] div[class^="avatarWrapper"] {
  width: 194px;
  margin-right: 8px !important;
}

.panels__58331 div[class^="container"] div[class^="flex"] button[role="switch"] {
  width: 0px;
  overflow: hidden;
  transition: all 0.3s;
  left: 16px;
}

.panels__58331 div[class^="container"] div[class^="flex"]:hover button[role="switch"] {
  width: 32px;
  overflow: visible;
  transition: all 0.3s;
  left: 0px;
}

.panels__58331 div[class^="container"] div[class^="flex"]:not(:hover) button:not([role="switch"]) svg {
  rotate: 360deg;
  transition: rotate 0.3s;
  background-color: var(--background-secondary-alt); /* might look off with some themes */
}

.panels__58331 div[class^="container"] div[class^="flex"]:hover button:not([role="switch"]) svg {
  rotate: 0deg;
  transition: rotate 0.3s;
}

#

here ya go!

unique otter Oct 28, 2023, 5:29 AM

#

yikes ! thank you so much!

pastel hearth Nov 2, 2023, 7:58 PM

#

tysm this was soo good

static sail Jun 7, 2024, 5:50 PM

#

aww, love this

dark igloo Jun 10, 2024, 12:11 PM

#

Why? Em

dark igloo Jun 10, 2024, 12:38 PM

#

static sail Jun 11, 2024, 9:37 PM

#

prolly something wrong with ur theme? cus it works for me fine

#

or it was made for just dark mode, who knows

odd oasis Jul 4, 2024, 5:08 AM

#

dark igloo

super late but delete the "background-color: var(--background-secondary-alt)" line

#

it stops icon overlap but only works on dark mode

dark igloo Aug 11, 2024, 4:35 AM

#

Hey guys, This is the new version of the expandable user panel.

/* Expandable User Panel */

.panels_a4d4d9 div[class^="container"] div[class^="flex"] {
  width: fit-content !important; 
  margin-left: auto; 
  margin-right: 0;
}

.panels_a4d4d9 div[class^="container"] div[class^="avatarWrapper"] {
  width: 194px;
  margin-right: 8px !important;
}

.panels_a4d4d9 div[class^="container"] div[class^="flex"] button[role="switch"] {
  width: 0px;
  overflow: hidden;
  transition: all 0.3s;
  left: 16px;
}

.panels_a4d4d9 div[class^="container"] div[class^="flex"]:hover button[role="switch"] {
  width: 32px;
  overflow: visible;
  transition: all 0.3s;
  left: 0px;
}

.panels_a4d4d9 div[class^="container"] div[class^="flex"]:not(:hover) button:not([role="switch"]) svg {
  rotate: 360deg;
  transition: rotate 0.3s;
  background-color: transparent;
}

.panels_a4d4d9 div[class^="container"] div[class^="flex"]:hover button:not([role="switch"]) svg {
  rotate: 0deg;
  transition: rotate 0.3s;
}

ivory sonnet Jan 30, 2025, 8:46 AM

#

~~any kind soul to update it for yesterday's Discord update?~~

updated with https://syndishanx.github.io/Website/Update_Classes.html

/* Expandable User Panel */

.panels_c48ade div[class^="container"] div[class^="flex"] {
  width: fit-content !important; 
  margin-left: auto; 
  margin-right: 0;
}

.panels_c48ade div[class^="container"] div[class^="avatarWrapper"] {
  width: 194px;
  margin-right: 8px !important;
}

.panels_c48ade div[class^="container"] div[class^="flex"] button[role="switch"] {
  width: 0px;
  overflow: hidden;
  transition: all 0.3s;
  left: 16px;
}

.panels_c48ade div[class^="container"] div[class^="flex"]:hover button[role="switch"] {
  width: 32px;
  overflow: visible;
  transition: all 0.3s;
  left: 0px;
}

.panels_c48ade div[class^="container"] div[class^="flex"]:not(:hover) button:not([role="switch"]) svg {
  rotate: 360deg;
  transition: rotate 0.3s;
  background-color: transparent;
}

.panels_c48ade div[class^="container"] div[class^="flex"]:hover button:not([role="switch"]) svg {
  rotate: 0deg;
  transition: rotate 0.3s;
}```

ivory sonnet Feb 27, 2025, 9:30 AM

#

Broken again, this time the site doesn't help Sadge

odd oasis Feb 27, 2025, 6:42 PM

#

/* Expandable User Panel */

.panels_c48ade div[class^="buttons_"] {
  width: fit-content !important; 
  margin-left: auto; 
  margin-right: 0;
}

.panels_c48ade div[class^="buttons_"] button[role="switch"] {
  width: 0px;
  overflow: hidden;
  transition: all 0.3s;
  left: 16px;
}

.panels_c48ade div[class^="buttons_"]:hover button[role="switch"] {
  width: 32px;
  overflow: visible;
  transition: all 0.3s;
  left: 0px;
}

.panels_c48ade div[class^="buttons_"]:not(:hover) button:not([role="switch"]) svg {
  rotate: 360deg;
  transition: rotate 0.3s;
}

.panels_c48ade div[class^="buttons_"]:hover button:not([role="switch"]) svg {
  rotate: 0deg;
  transition: rotate 0.3s;
}

ivory sonnet Feb 27, 2025, 7:06 PM

#

thank you 🙂

ivory sonnet Oct 16, 2025, 7:23 AM

#

Discord decided we need more buttons there, because we change the input and output devices every minute Annoyed

odd oasis Oct 19, 2025, 7:36 PM

#

/* Expandable User Panel */
.panels_c48ade .buttons__37e49 {
  width: fit-content !important; 
  margin-left: auto; 
  margin-right: 0;
}

.panels_c48ade .buttons__37e49 > :is(button:not(:last-of-type), div:has(button)) {
  width: 0px;
  overflow: hidden;
  transition: width 0.3s;
}

.panels_c48ade .buttons__37e49:hover > :is(button:not(:last-of-type), div:has(button)) {
  width: 42px;
  overflow: visible;
  transition: width 0.3s;
}

.panels_c48ade .buttons__37e49:hover > button:not(:last-of-type) {
  width: 32px;
}

.panels_c48ade .buttons__37e49:not(:hover) > button:last-of-type svg {
  rotate: 360deg;
  transition: rotate 0.3s;
}

.panels_c48ade .buttons__37e49:hover > button:last-of-type svg {
  rotate: 0deg;
  transition: rotate 0.3s;
}```

#expandable user panel