Discord Custom CSS with collapsable SideBars

doodle.css

:root {
    --sidebar-w-collapsed: 36px; /*used for  collapsable sidebar*/
    --sidebar-h-extended: 240px;
    --memberlist-collapsed: 62px;
    --memberlist-expanded: 240px;
    --memberlist-transition: 0.35s ease-in-out;
}

/*vc text is correct with channel sidebar and main chat margin*/
.chat_f8f70f { margin-left: 0px !important; }


/* show full about me */
[style="-webkit-line-clamp: 6;"] { -webkit-line-clamp: 10000000 !important; }


/*collapsable sidebar stuff
banners are bugged offset by few px

INFO: Remove position: absolute; and small hack to push chat instead of showing infront of it*/
div[class^="sidebar_"] {
    width: var(--sidebar-w-collapsed);
    transition: width 0.2s ease-in-out;
    overflow-x: hidden;
    display: flex;
    bottom: 0;
    top: 0;
    z-index: 2;
    position: absolute;
}

div[class^="sidebar_"]:hover {
    width: var(--sidebar-h-extended);
    bottom: 0;
    top: 0; 
    z-index: 3;
    position: absolute;

}

/*small hack to make chat not appear behind sidebar if position: absolute*/
div[class^="chat_"]{
    z-index: 1;
    margin-left: var(--sidebar-w-collapsed);
}
div[class^="actionButtons_"] { display: flex; } /*Stops stream/video buttons to wrap*/

/*DMs name etc not working, idk fix lol*/
div[class^="sidebar_"] nav div ul li div div div[class^="name_"],
div[class^="sidebar_"] nav div ul li div[class^="children_"],
div[class^="sidebar_"] nav div ul li div div div[class^="children_"] {
  opacity: 0;
  width: 0px;
  transition: opacity 0.3s ease-in-out;
}
div[class^="sidebar_"]:hover nav div ul li div div div[class^="name_"],
div[class^="sidebar_"]:hover nav div ul li div[class^="children_"],
div[class^="sidebar_"]:hover nav div ul li div div div[class^="children_"] {
  opacity: 1;
}

/*collapse server list and open on hover*/
[class*=" guilds__"] {
    width: 10px;
    transition: width 0.2s ease 0.1s, opacity 0.2s ease 0.1s;
    opacity: 1;
}
[class*=" guilds__"]:hover {
    width: 65px;
    opacity: 1;
}



/*ANIMATIONS BELOW*/
/*spinny emoji butt*/
.emojiButton__30ec7:hover .contents_fb6220:hover {
    animation: spin .65s infinite linear;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
button.button__4f306 /* make user panel buttons round */ {
    border-radius: 50%;
}
.button__4f306:last-child /* settings button */, 
.attachButton_b1db83 .attachButtonInner__3ce2b /* upload button */,
.emojiButton__30ec7 .contents_fb6220 /* emoji button */,
.closeButton__34341 /* settings exit button */ {
    transition: transform 1s ease;
}
.button__4f306:last-child:hover,
.attachButton_b1db83:hover .attachButtonInner__3ce2b,
.emojiButton__30ec7:hover .contents_fb6220,
.closeButton__34341:hover {
    transform: rotate(360deg);
}
/*channel list animations*/
.wrapper__7bcde .link__95dc0 /* channels */,
.container__4f20e /* members */,
.channel_c21703 /* dms */,
.side_b4b3f6 .item__48dda /* settings */ {
    transition: margin-left 0.2s ease;
}
.wrapper__7bcde:hover .link__95dc0,
.side_b4b3f6 .item__48dda:hover {
    margin-left: 10px;
}
.container__4f20e:hover,
.channel_c21703:hover {
    margin-left: 18px;
}

/* minified memberlist (midnight theme version) */
.membersWrap__90226 {
    min-width: unset;
    width: var(--memberlist-collapsed);
    transition: var(--memberlist-transition);
    height: 100%;
}
.members__9f47b,
.container_b2ce9c {
    width: var(--memberlist-collapsed);
    transition: var(--memberlist-transition);
}
.membersWrap__90226:hover,
.membersWrap__90226:hover .members__9f47b,
.container_b2ce9c:hover {
    width: var(--memberlist-expanded);
}
.membersGroup__85843 {
    height: 0;
    padding-top: 0;
    transition: var(--memberlist-transition);
}
.membersWrap__90226:hover .membersGroup__85843 {
    padding: 24px 8px 0 16px;
    height: 40px;
}
.chat__52833:has(.membersWrap__90226:not(:hover)) .searchBar_e0c60b {
    width: calc(var(--memberlist-collapsed) - 24px) !important;
    margin-left: calc(var(--memberlist-spacing) + 8px);
}






/*oneko welcome*/
.welcomeCTASticker_ee7523>.assetWrapper_f2e406 {
  display: none;
}
.welcomeCTASticker_ee7523::before {
  content: "";
  background: var(--onekowelcome-skin, url(https://raw.githubusercontent.com/vencordcss/onekocord/main/onekoskins/default.png));
  animation: var(--onekowelcome-wakeup-duration, 2s) 1 forwards gotosleep, var(--onekowelcome-sleep-duration, 2s) var(--onekowelcome-wakeup-duration, 2s) infinite var(--onekowelcome-sleep-animation, sleep);
  image-rendering: var(--onekowelcome-rendering, pixelated);
  width: 28px;
  height: 28px;
  display: block;
  position: relative;
  right: 4px;
  bottom: 4px;
  scale: var(--onekowelcome-scale, 1);
}
.welcomeCTAButtonOuter_a7da64:hover .welcomeCTASticker_ee7523::before {
  animation: var(--onekowelcome-wakeup-duration, 2s) 1 forwards var(--onekohomeicon-wakeup-animation, wakeup), var(--onekowelcome-hovered-duration, 0.3s) var(--onekowelcome-wakeup-duration, 2s) infinite var(--onekowelcome-hovered-animation, alert);
}






/*@property --rainbow {
  syntax: '<color>';
  initial-value: #ff000033;
  inherits: false;
}

@keyframes rainbow {
    16.7% { --rainbow: #ffa50033; }
    33.3% { --rainbow: #ffff0033; }
    50%   { --rainbow: #00800033; }
    66.7% { --rainbow: #0000ff33; }
    73.3% { --rainbow: #ee82ee33; }
    100%  { --rainbow: #ff000033; }
}

#app-mount {
  transform: rotate3d(2, -1, -1, -0.2turn) scale(0.9);
  box-shadow: 8px 8px 8px var(--rainbow), 
              16px 16px 16px var(--rainbow), 
              32px 32px 32px var(--rainbow), 
              64px 64px 64px var(--rainbow),
              128px 128px 128px var(--rainbow);
  animation: rainbow 5s linear infinite;
}*/






/* Comfy-Style Spotify Player
 * Kanged and modified code from https://github.com/Comfy-Themes/Discord
 */
#vc-spotify-player {
  --spotify-wave-width: 240px;
  --spotify-vencord-color: #EBCB8B;
  --spotify-vencord-text: var(--background-primary);
}
@keyframes spotifywave {
  0% {
    -webkit-mask-position-x: var(--spotify-wave-width);
  }

  100% {
    -webkit-mask-position-x: 0;
  }
}
#vc-spotify-player::before {
  content: "";
  position: absolute;
  height: 25px;
  z-index: 1;
  width: var(--spotify-wave-width);
  margin-top: -29px;
  left: 0;
  background: var(--spotify-vencord-color);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="25" viewBox="0 0 284 25"><path d="M283.999 15.2776C228.798 15.2776 211.243 -0.0317305 140.048 -0.000164877C69.0475 -0.000164877 51.2975 15.2776 8.58307e-06 15.2776V24.9998H284C284 24.9998 283.999 18.9392 283.999 15.2776Z"/></svg>');
  animation: spotifywave 8s linear infinite;
  animation-delay: 0s;
  opacity: 1;
}
#vc-spotify-player#vc-spotify-player  {
  background: linear-gradient(var(--spotify-vencord-color) 20%, var(--bg-overlay-1, var(--background-secondary-alt)));
  border-bottom: none;
}
#vc-spotify-song-title#vc-spotify-song-title,
.vc-spotify-ellipoverflow.vc-spotify-ellipoverflow,
.vc-spotify-artist.vc-spotify-artist,
.vc-spotify-album.vc-spotify-album
/* , .vc-spotify-time-right, .vc-spotify-time-left */  {
  color: var(--spotify-vencord-text);
}
#vc-spotify-player [class*="bar-"] {
  background: hsl(var(--primary-700-hsl)/0.3);
}
#vc-spotify-player [class*="barFill"] {
  background: var(--spotify-vencord-color);
}
[class*=wrapper-]:not(:empty) + #vc-spotify-player {
  margin-top: 27px;
}
[class*=panels-] [class*=wrapper-] [class*=container-] {
  border-bottom: none;
}

/* The code below isn't really needed but it looks pretty :3 */
.vc-spotify-shuffle-on.vc-spotify-shuffle-on,
.vc-spotify-repeat-context.vc-spotify-repeat-context,
.vc-spotify-repeat-track.vc-spotify-repeat-track,
.vc-spotify-shuffle-on.vc-spotify-shuffle-on:hover,
.vc-spotify-repeat-context.vc-spotify-repeat-context:hover,
.vc-spotify-repeat-track.vc-spotify-repeat-track:hover {
  color: var(--spotify-vencord-color);
}
.vc-spotify-button.vc-spotify-button {
  transition: background 0.3s;
}
.vc-spotify-button.vc-spotify-button:hover {
  background: hsl(var(--primary-700-hsl)/0.3);
}