☰

Discord: Compact layout

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     1.2
// @grant       GM_addStyle
// ==/UserScript==

const SmolBase64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAABVElEQVQ4jcWQsU6UURCFv7n//XcNa0JDgU+goo0VofIBeAtaggXJxtbOoBFKCYkvYWOsSAyVjwAJdJoYQ1DYhZ07M9cCQsiGEP7KU86cc+bLwP+WAHzYfPelWHl5Y4SIKMinxMXGcPjm150FG+/f/lxbfTWfUrpeqE7YP9if7O19O1YtdSqCNPJ1uP56JQPkJp+IyPx4PLq2pZR48vhp/9nC80fTV2utbO98XAKQrbXlH6Te3Mxg0NZap723Y4swHo0Kob+ze/BicakOHs6ScktuH9D0+rS9Pk1vBiThpnhRrChuSnXj/Oy0ft/9TPZwRn//uKnShWByce4eQXYP3K2alU4F7lbdnexRMdOQlDoVmGt4VHK442aIdCQoRlwSBKYFEO6ZRwRMC1c/cMwKVeR+6Su5FdzjkqAUpdKtwIri4eTw4PDwSJvcnnUk0PDodPRW/QMHss1jW7beUQAAAABJRU5ErkJggg=='

GM_addStyle(`

/* Make text darker on light Discord */
.theme-light {
  --text-normal: #000;
}
/* Make background darker on dark Discord, make text darker */
.theme-dark {
  --background-primary:         #111111;
  --background-secondary:       #1a1b1f;
  --channeltextarea-background: #242527;
  --text-normal:                #adadad; /* messages */
  --interactive-active:         #d5d5d5; /* channel names */
  --header-primary:             #d5d5d5; /* usernames */
}
/* Fix font-family */
:root {
  --font-primary: sans-serif !important;
  --font-display: sans-serif !important;;
  --font-headline: sans-serif !important;;
  --font-code: monospace !important;;
}
/* Reduce the font sizes slightly */
div[id^="message-content-"],
div[class^="channelName-"],
span[class^="username-"] {
  font-size: 11pt;
}
div[id^="message-content-"] code,
div[id^="message-content-"] code.inline {
  font-size: 12px;
}
/* Remove bold font-weight on 1.0 pixel scaling */
@media (-webkit-max-device-pixel-ratio: 1) {
  .theme-light {
    font-weight: inherit;
  }
}

/**
 * Replace server icons in sidebar with text labels
 */
:root {
  --custom-guild-list-width: 240px;
}
nav[aria-label="Servers sidebar"] {
  /* Expand the servers sidebar because the text labels need more room */
  width: var(--custom-guild-list-width);
}
div[aria-label="Servers"] > div,
div[aria-label="Servers"] > div > ul > div {
  width: unset;
}

/** new folders from update have hardcoded values idk what's the problem + dont care */
div[aria-label=Servers] > div > div > div > div  {
  width: unset !important;
  height: 20px !important;
}

div[aria-label="Servers"] > div[class^="listItem__"] > div[class^="pill_"],
div[aria-label="Servers"] > div > ul > div > div[class^="pill_"] {
  /**
   * Fix the height of the indicator pills on the left edge.
   * We cannot display: none them because
   * 1) we have no other way of indicating the active server. CSS4 :has is not yet implemented.
   * 2) Discord relies on the pills for the drag-to-arrange to work.
   */
  height: 26px;

  /* Make the pills less bright */
  opacity: 0.55;
}
/* i'm probably tripping but pills for folders have different align */
div[aria-label="Servers"] > div[class^="wrapper__"] > div > div[class^="pill_"] {

  height: 24px;

  /* Make the pills less bright */
  opacity: 0.55;
}

/* The pilled (selected) server will have "40px" in the style when selected.
 * Use this information to set a background color for the selected server.
 *
 * :has isn't supported in any browser yet :(
 */
/*div[aria-label="Servers"] > div:has(> div[aria-hidden="true"] > span[style*="40px"]) {
  background-color: #ffffff22;
}*/
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"] > div,
div[aria-label="Servers"] > div > ul > div > div > div[data-dnd-name][draggable="true"] > div {
  /* Constrain width so that the badges don't run into the very right edge of the servers sidebar */
  width: calc(var(--custom-guild-list-width) - 20px);
  height: 20px;
  overflow: hidden;
}
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"] > div > svg,
div[aria-label="Servers"] > div > ul > div > div > div[data-dnd-name][draggable="true"] > div > svg {
  /* Discord is insane and has the click handler inside the animated SVG icon for the server.
   * We need to make the SVG big so that clicking anywhere in the apparent rectangle lands your click inside the SVG. */
  width: var(--custom-guild-list-width);
  height: var(--custom-guild-list-width);
  /* Center it so that clicks are not impeded by its circular nature */
  margin-top: calc(-0.5 * var(--custom-guild-list-width));
  /* We can't even set visibility: hidden, that breaks the click handler.
   * If you need to debug, set opacity above 0. */
  opacity: 0.0;
}

/** patch for new folders */
div[aria-label=Servers] > div > div > div > div  {
  width: calc(var(--custom-guild-list-width) - 20px) !important;
  height: 20px !important;
}

/* Add the text labels. */
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"]::before ,
div[aria-label="Servers"] > div > ul > div > div > div[data-dnd-name][draggable="true"]::before {
  color: var(--text-normal);
  content: attr(data-dnd-name);
  white-space: nowrap;
  position: absolute;
  left: 16px;
  top: 5px;
  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: hidden;
  /* Need to set a height to avoid a scrollbar after using overflow-x
   * Use a height large enough to not cut off glyph shapes below the baseline
   * (update) adjusted cuz added the folder image*/
  height: 15pt;
  /* Don't handle click events; pass clicks through to the svg below. */
  pointer-events: none;
}
/* fix expanded folder background and set rounded corners */
div[aria-label="Servers"] > div > span {
  width: calc(var(--custom-guild-list-width) - 20px);
  border-radius: 6px;
}

/* set expanded folder bottom padding */
div[aria-label="Servers"] > div [class^="wrapper__"] > div[class^="folderEndWrapper_"] {
  height: 7px;
}


/* add folder icon */


div[aria-label="Servers"] > div[class^="wrapper__"] > div > div[data-dnd-name][draggable="true"]::before {
  color: var(--text-normal);
  content: url('${SmolBase64Image}') " " attr(data-dnd-name); /* Combine image and text */
  white-space: nowrap;
  position: absolute;
  left: 16px;
  top: 2px;
  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: hidden;
  /* Need to set a height to avoid a scrollbar after using overflow-x
   * Use a height large enough to not cut off glyph shapes below the baseline */
  height: 15pt;
  /* Don't handle click events; pass clicks through to the svg below. */
  pointer-events: none;
}


/*
div[aria-label="Servers"] > div[class^="wrapper__"] > div > div[data-dnd-name][draggable="true"]::after {
    color: var(--text-normal);
    content: '';
    white-space: nowrap;
    position: absolute;
    left: 16px;
    top: 2px;
    font-size: 11pt;
    width: calc(var(--custom-guild-list-width) - 57px);
    overflow-x: hidden;
    height: 15pt;
    pointer-events: none;
    background: linear-gradient(
        to left,
        rgba(227, 229, 232, 1) 0%,
        rgba(227, 229, 232, 0) 40px
    );

    background-clip: padding-box;
    padding-left: 0px;
}
*/

/* expanded folder background fix */
ul[id^="folder-items"] {
  height: unset !important;
}

div[class^="folderEndWrapper_"] {
  height: 7px !important;
}

/* fixes for the new sidebar and new centering of icons */

div[class^="listItem"] {
  justify-content: left;
}
body {
--custom-guild-sidebar-width: 500px !important;
}
div[class^="sidebar_"]{
  width: var(--custom-guild-sidebar-width) !important;
}
/* also paddings for DM add server etc */
.visual-refresh .svg_cc5dd2{top:-4px;left:4px}

/* expand separator*/
.guildSeparator__252b6{
  width: calc(var(--custom-guild-list-width) - 12px) !important;
}


`);