compact layout for discord channels, servers left pane
// ==UserScript==
// @name Discord: Compact layout
// @description compact layout for discord channels, servers left pane
// @author ivan, ffact
// @namespace discord_styles
// @include *://discord.com/*
// @version 3.0
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle(`
:root {
--guildbar-avatar-size: 240px;
--guildbar-folder-size: 244px;
--custom-channel-header-height: 48px;
}
body {
--custom-guild-sidebar-width: 550px !important;
}
ul[data-list-id*="guildsnav"] mask {
display: none ;
}
ul[data-list-id*="guildsnav"] div[class*="folderButton"] span > div,
ul[data-list-id*="guildsnav"] div[class*="listItem"] span > div,
ul[data-list-id*="guildsnav"] div[class*="listItem"] foreignObject,
ul[data-list-id*="guildsnav"] div[class*="wrapper"] {
width: 240px !important;
height: 24px !important;
}
ul[data-list-id*="guildsnav"] svg[class*="shiftSVG"] {
top:-2px;
contain: none; /* fixes everything*/
}
ul[data-list-id*="guildsnav"] div[class*="listItem"] {
height: 24px;
}
ul[data-list-id*="guildsnav"] > div > div > div[class*="listItem"]:nth-child(3) { /* exception for a separator, cuz it has flex-srink */
height: 1px;
}
ul[data-list-id*="guildsnav"] img,
ul[data-list-id*="guildsnav"] div[class*="folderButton"] svg,
._48112cbe77dc5022-folderPreview {
opacity: 0.0;
}
.cc5dd25190031396-lowerBadge { /* unread count */
top: 4px;
}
ul[data-list-id*="guildsnav"] ul {
height: unset !important; /* very important otherwise the expanded folder is miscalculated*/
gap: 0px !important;
}
/**/
/* adding text labels */
/**/
ul[data-list-id*="guildsnav"] div[draggable="true"]::before {
color: black;
content: attr(data-dnd-name); /* Combine image and text */
white-space: nowrap;
position: absolute;
font-size: 11pt;
/* Constrain the width to avoid running into the new message count badge */
width: calc(var(--custom-guild-list-width) - 57px);
overflow-x: visible;
/* Don't handle click events; pass clicks through to the svg below. */
pointer-events: none;
left:5px;
}
div[class*="folderGroup"] div[class*="folderHeader"][draggable="true"]::before {
content: "📁" " " attr(data-dnd-name);
left:17px;
}
/* :3 */
div[class*="isHovering"] div[class*="folderHeader"][draggable="true"]::before,
div[class*="isExpanded"] div[class*="folderHeader"][draggable="true"]::before {
content: "📂" " " attr(data-dnd-name);
left:17px;
}
[class*="isExpanded"] div[class*="folderHeader"][draggable="true"]::before {
top: 8px;
left:20px;
}
div[id^="«r"][role="tooltip"] { /* disable tooltips on hover, they are useless, also glitchy */
opacity: 0;
}
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(1) div[class*="ItemWrapper"]::before,
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(5) div[class*="ItemWrapper"]::before,
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(6) div[class*="ItemWrapper"]::before,
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(7) div[class*="ItemWrapper"]::before
{
color:black;
white-space: nowrap;
position: absolute;
font-size: 11pt;
overflow-x: visible;
/* Don't handle click events; pass clicks through to the svg below. */
pointer-events: none;
top:5px
}
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(1) div[class*="ItemWrapper"]::before {
content: "🦜💬 Direct Messages"
}
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(5) div[class*="ItemWrapper"]::before {
content: "➕ Create a server"
}
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(6) div[class*="ItemWrapper"]::before {
content: "🌐 Discover"
}
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(7) div[class*="ItemWrapper"]::before {
content: "⬇️ Download apps"
}
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(1) div[class*="ItemWrapper"] svg,
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(5) div[class*="ItemWrapper"] svg,
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(6) div[class*="ItemWrapper"] svg,
ul[data-list-id*="guildsnav"] > div > div > div:nth-child(7) div[class*="ItemWrapper"] svg
{
opacity: 0;
}
`)