Vencord custom CSS with collapsible sidebar

Vencord_hide_sidebar.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 */
div[class^="sidebar_"] {
    width: var(--sidebar-w-collapsed);
    transition: width 0.2s ease-in-out 2s; /* 2s delay for collapse */
    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;
    transition-delay: 0s; /* No delay on hover */
}

/* 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 from wrapping */

/* DMs name and children transitions */
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;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out 2s, visibility 0s linear 2.3s; /* 2s delay for collapse */
}

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;
    visibility: visible;
    transition-delay: 0s; /* No delay on hover */
}

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

/* 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);
}

/* Comfy-Style Spotify Player */
#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 {
    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-ellipoverflow,
.vc-spotify-artist,
.vc-spotify-album {
    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-repeat-context,
.vc-spotify-repeat-track,
.vc-spotify-shuffle-on:hover,
.vc-spotify-repeat-context:hover,
.vc-spotify-repeat-track:hover {
    color: var(--spotify-vencord-color);
}
.vc-spotify-button {
    transition: background 0.3s;
}
.vc-spotify-button:hover {
    background: hsl(var(--primary-700-hsl)/0.3);
}

For this to work you need to:

1. Patch Discord using Vencord.
2. Go to User Settings -> Vencord -> Edit QuickCSS and paste the CSS from here and close that window.
3. Check Enable Custom CSS in the same screen.
4. Restart Discord for changes to take effect.