MehugeCompactDiscord.md

Install Better Discord

1. Download https://github.com/Jiiks/BetterDiscordApp/releases/download/0.2.8/BD0.2.8Windows.zip
2. Extract
3. Run BetterDiscordWI.exe

Configure

1. Open Discord
2. Click the Cog Icon to open Preferences
3. Click BetterDiscord at the bottom of the user settings list

Install Mehuge Compact Discord CSS

1. On the CustomCSS tab, paste in the following CSS then Update and Save

.osx-buttons {
    left: 6px;
    top: 12px;
}
.osx-buttons button {
	width: 10px;
    height: 10px;
    border-radius: 4px;
    padding: 0;
}
.osx-buttons button + button {
    margin-left: 4px;
}
.win-buttons {
	height: 44px;
}
#bd-pub-button {
    width: 24px;
    overflow: hidden;
    font-size: 10px!important;
}
.guilds-wrapper {
    width: 40px;
}
.guilds-wrapper .guilds {
    padding: 10px 6px;
}
.guilds-wrapper .guilds .guild,
.guilds-wrapper .guilds .friends-icon {
    width: 25px;
    height: 25px;
    background-size: 25px 25px;
}
.guilds-wrapper .guilds .friends-online {
    font-size: 6pt;
    text-align: center;
    margin-left: -2px;
    text-wrap: break-word;
    width: 30px;
}
.guilds-wrapper .guilds .guild.guilds-add {
    font-size: 20px;
    line-height: 19px;
    margin-left: 2px;
}
.guild-separator {
    margin-left: -12px;
}
.guild-channels .channel-voice {
    padding: 0;
}
.guilds-wrapper .guilds .guild.selected:before, 
.guilds-wrapper .guilds .guild.unread:before {
    left: -15px;
    height: 30px;
    margin-top: -16px;
}
.guilds-wrapper .guilds .guild.audio .guild-inner:after {
    background-size: 10px;
    width: 10px;
    height: 10px;
    border-radius: 4px;
}
.guilds-wrapper .guilds .guild .guild-inner  {
    border-radius: 12px!important;
}
.guilds-wrapper .guilds .guild .guild-inner a {
    width: 25px;
    height: 25px;
    line-height: 25px;
}
.message-group.compact.message-group {
    padding: 0;
}
.message-group.compact.message-group {
    margin-left: 5px;
}
.message-group.compact.message-group .comment {
    margin-right: 0px;
}
.message-group.compact .timestamp {
    width: 50px;
}
.message-group.compact .message .markup {
    text-indent: -55px;
    padding-left: 55px;
}
.message-group.compact .accessory {
    padding-left: 55px;
}
.chat form {
    margin: 0 5px;
}
.chat>.title-wrap {
    padding: 6px 20px 6px 10px;
    min-height: auto;
}
.channels-wrap {
    width: 180px;
}
.avatar-small {
    display: none;
}
.guild-header header {
    height: 20px;
    padding: 21px 12px 21px 24px;
}
.guild-header header span {
    line-height: 20px;
}
.guild-channels header {
    margin-top: 5px;
}
.guild-channels .channel-voice {
    padding-left: 5px;
}
.guild-channels .channel-text.unread:not(.selected):not(.channel-muted):before {
    top: 8px;
}
.channel-textarea {
    margin: 10px 0 20px;
}
.typing {
    background-color: transparent!important; 
    height: 20px;
}
.typing .ellipsis {
    height: 30px; 
}
.account, #voice-connection {
    padding: 5px 5px;
    height: auto;
}
#voice-connection .voice-connection-status-connected {
    font-size: 10px;
}
.account .account-details {
    padding: 0;
}

Nice work. Liking it. I made this tweak myself, which allows the status icons to appear without consuming any additional vertical space:
.avatar-small { width: 9px; height: 9px; }

One funky thing I did notice is that the upper half of the Direct Messages button is unclickable for some reason.