Skip to content

Instantly share code, notes, and snippets.

@cheesits456
Last active August 22, 2023 08:48
Show Gist options
  • Save cheesits456/eebc5eadbd87f7c1195c7fec9d9bfaf0 to your computer and use it in GitHub Desktop.
Save cheesits456/eebc5eadbd87f7c1195c7fec9d9bfaf0 to your computer and use it in GitHub Desktop.
Custom CSS for Discord to automatically hide the Members list, showing just the profile pictures, and expanding when hovered
/* ==========
AutoHideMembers.theme.css by cheesits456 (https://cheesits456.dev)
For CSS compatible with browser extensions, see
https://gist.github.com/cheesits456/0d5bede837f022e443e9a5fc4aa386cb#file-discordbrowserstyles-css-L49
========== */
/* Auto-hide the members list, show on hover */
.chatContent-3KubbW {
max-width: calc(100% - 60px);
}
.title-31SJ6t {
z-index: 11;
}
.members-3WRCEx,
.membersWrap-3NUR2t {
border-radius: 20px 0 0 20px !important;
min-width: 60px;
transition-duration: 500ms;
transition-property: box-shadow, min-width, width;
width: 60px;
z-index: 10;
}
.members-3WRCEx:hover,
.membersWrap-3NUR2t:hover {
min-width: 240px;
width: 240px;
}
.membersWrap-3NUR2t {
height: 100%;
position: absolute;
right: 0;
}
.membersWrap-3NUR2t:hover {
box-shadow: 0 0 20px 10px #00000044;
}
.membersGroup-2eiWxl {
height: 0;
transition-duration: 500ms;
transition-property: height;
}
.members-3WRCEx:hover .membersGroup-2eiWxl {
height: 40px;
}
@balirasrequiem
Copy link

it says meta not found

@cheesits456
Copy link
Author

@balirasrequiem copy and paste into the custom CSS section

@Vendicated
Copy link

.chatContent-3KubbW {
	max-width: calc(100% - 60px);
}

this makes the sidebar show in dms even though there's no content. To fix, change it to

.chatContent-3KubbW:not([aria-label^=" "]) {
	max-width: calc(100% - 60px);
}

This works because guilds have the aria-label set to the ChannelName (channel), whereas dms have ​ (channel) (notice the leading space)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment