Fix the horrid UX of new discord UI (again)

fixdiscord.css

/* Designed for default density */
/*
  Note: Due to [class*=] selector being EXTREMELY bad for performance,
  all classes are hardcoded and may break at any moment when discord
  will randomly decide to update their CSS again.
*/

.channelAppLauncher_e6e74f, /* Hide message box app launcher */
.hoverButton__06ab4 { /* Hide "edit with apps" on images */
  display: none !important;
}

/* Hide gift, gif and sticker buttons (declutter) */
.buttons__74017 {
  
  :where(.button__201d5, .buttonContainer__74017):has(.lottieIcon__5eb9b) {
    display: none;
  }
  /*button[aria-label*='gift'],
  .expression-picker-chat-input-button:has(
    >button:is([aria-label="Open sticker picker"], [aria-label="Open GIF picker"]
  )) {
    display: none !important;
  }*/
}

body {
  /* Activity panel height */
  --activity-height: 32px;
}
.visual-refresh {
  /* Reduce server list width */
  --custom-guild-list-width: 62px;

  /* Reduce rounded corners */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;

  .voiceFiltersPopout_e2f668, /* Voice filter window */
  .container_a45028, /* Voice filter search bar */
  .voiceFiltersFooterButton_e2f668, /* Voice filter hamburger button */
  .tooltip__382e7, /* Tooltips */
  .container__2692d, /* Inbox */
  /* Popup menus (right click and such) */
  .menu_f9d668, .menu_c1e9c4, .menu__43313,
  .menu__1fed1, .menu__77820, .menu__72086,
  .menu_e1bef1, .menu__81b3e,
  code.inline, code.hljs /* code snippets */
  {
    border-radius: 2px;
  }

  &.theme-dark {
    /* Make message hover not as contrasting */
    --background-message-hover: rgba(0, 0, 0, 0.05) !important;
    /* Make spoilers not as contrasting */
    --spoiler-hidden-background: #222 !important;
    --spoiler-hidden-background-hover: #252525 !important;
    /* Make embeds not as contrasting as well as other minor elements  */
    --neutral-63: var(--neutral-75);
    --background-surface-high: color-mix(in oklab,
      var(--neutral-76) 100%,
      var(--theme-base-color,#000) var(--theme-base-color-amount,0%)) !important;
    --background-surface-higher: color-mix(in oklab,
      var(--neutral-76) 100%,
      var(--theme-base-color,#000) var(--theme-base-color-amount,0%)) !important;
    --background-surface-highest: color-mix(in oklab,
      var(--neutral-76) 100%,
      var(--theme-base-color,#000) var(--theme-base-color-amount,0%)) !important;
    
    /* Reduce window drag bar height */
    --custom-app-top-bar-height: 24px !important;
  }
  
  /* Adjust window bar buttons */
  .trailing_c38106 {
    gap: .3em;
  }
  .button__85643 {
    height: var(--custom-app-top-bar-height);
    width: var(--custom-app-top-bar-height);
    svg {
      height: calc(var(--custom-app-top-bar-height) * 0.75);
      width: calc(var(--custom-app-top-bar-height) * 0.75);
    }
  }

  /** Dock text input to bottom of the window (no floating) */
  .channelTextArea__74017, .channelTextArea__5126c,
  .channelTextArea_f75fb0, .channelTextArea_fb64c9 {
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;

    /* Redice soze pf attach button */
    .attachButton__74017, .attachButton__0923f {
      padding: 0.5em;
      border-radius: 0;
      border-right: 1px solid var(--border-faint);
    }

  }
  /* Span text input for entire chat width */
  form.formWithLoadedChatInput_f75fb0 {
    padding: 0;
  }

  /* Remake channel list */
  --channel-font-size: 16px;
  .link_a995b9, .link__50a54, .link__6a22b,
  .link__33980, .link__7df54, .link__4d8b6,
  .link__2ea32, .link__972a0, .link__0f50c {
    border-radius: 0px;
    padding: 3px 4px;
    .linkTop__2ea32 {
      gap: 4px;
    }
    .name_b75563, .name_d2d51d, .name__91a9d, .name__5d473,
    .name__84522, .name__9e80c, .name__20a53, .name__841c8,
    .name_cc2dff, .name_a9fc04, .name__9271d, .name__4d3fa,
    .name__6b8b8, .name__24a95, .name__71961, .name__2ea32,
    .name__76f04, .name_f37cb1, .name__8a969, .name__97499,
    .name_fe77d6, .name_f1d99d, .name__3633a, .name_e3077c,
    .name__01c8c {
      font-size: var(--channel-font-size);
    }

    /* Hide edit channel and invite buttons */
    .iconNoChannelInfo_c69b6d {
      display: none;
    }
    /* Hide just invite buttons, worse perf due to [] selectors */
    /*div[aria-label="Create Invite"], div[aria-label="Invite to Server"] {
      display: none;
    }*/
  }

  .sidebarListRounded_c48ade {
    /* Remove rounded corners on sidebar */
    border-radius: 0;
    
    /* .containerDefault_c69b6d .link__2ea32 <- channels?
      .channel__972a0 .link__972a0 <- DMs?
      .dm__972a0
    */
    /* Reduce icon size on channel list */
    >nav .link__2ea32 div[role=img] {
      &, >svg {
        width: var(--channel-font-size);
        height: var(--channel-font-size);
      }
    }
  }

  .scroller__36d07 {
    padding: 0px;
  }
  /* Denser context menus */
  .menu_c1e9c4 {
    .scroller_c1e9c4 {
      padding: 0px;
      overflow: auto !important;
      >.wrapper_f563df {
        padding: 4px;
      }
    }
    .item_c1e9c4 {
      padding: 4px 8px;
      border-radius: 0;
    }
    .separator_c1e9c4 {
      margin: 4px 0;
    }
  }
  /* Submenus sit flush to parent menu */
  /* Exception: When context menu has a scrollbar visible,
    it appears on top of scrollbar */
  .layer_da8173 {
    margin-left: -4px;
  }
  .submenuPaddingContainer_c1e9c4 {
    padding-left: 0px;
  }

  /* Unread markers on channels */
  --unread-color: orange;
  /* Recolor channel icon */
  .modeUnreadImportant__2ea32 svg.icon__2ea32 path,
  .modeSelected__2ea32:has(>.unreadImportant__2ea32) svg.icon__2ea32 path {
    fill: var(--unread-color);
  }
  /*
    Show voicechat chat icon when it has unread messages.
    Can't tell if channel is muted, so disabled
  */
  /*
  li.containerDefault_c69b6d>div:not(.iconVisibility_c69b6d)>div:not(:is(.modeLocked__2ea32, .modeMuted__2ea32)) {
    .link__2ea32[aria-label~="unread,"] .iconItem_c69b6d:not(.iconNoChannelInfo_c69b6d) {
      display: block;
      svg>path {
        fill: var(--unread-color);
      }
    }
  }
  */
  /* Turn unread pip into a line */
  div.unreadImportant__2ea32 {
    border-radius: 0;
    height: 16px;
    margin-top: -8px;
    width: 2px;
    background-color: var(--unread-color);
    left: 1px;
  }

  /* Adjust channel list top actions */
  .containerDefault_c69b6d.wrapper__2ea32 {
    margin-left: 0;

    .link__2ea32 {
      padding-left: calc(var(--space-xs) * 2);
    }
  }
  
  #channels, .privateChannels__35e86 .scroller__99e7c {
    --channel-list-width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px);
    margin-right: 0;
    overflow-y: auto !important;
    /* Enforce channel list items to be exact size of channel list */
    li {
      width: var(--channel-list-width);
      a {
        padding-right: 12px;
      }
    }
    /*
      Add minor dark background to scrollbar track.
      This is for visual clarity that it is a scrollbar, as to not create
      annoying visual spacing for channel list hover/selection
    */
    &::-webkit-scrollbar-track {
      background: var(--neutral-78);
    }
    /*
      Hide the scrollbar by default
    */
    &:not(:hover, :active) {
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    ul>button {
      width: var(--channel-list-width);
      margin-left: 0px;
      border-radius: 0;
      border-right: none;
      border-left: none;
    }
    /* Reduce excessive padding on voicechat participant list  */
    .list_c3cd7d {
      padding-left: calc(var(--channel-font-size) * 2);
    }
  }
  /* Adjust channel left paddings */
  li.containerDefault__29444>div, li.containerDefault_c69b6d>div {
    margin-left: 0;
    >.wrapper__2ea32 {
      margin-left: 0;
    }
    a {
      padding-left: var(--space-xs);
    }
  }
  /* Adjust channel list margin for docked user panel */
  .scroller__629e4 {
    margin-bottom: 0;
  }

  /* Sidebar customisation */
  --custom-guild-list-padding: 4px;
  --guildbar-avatar-size: 48px;
  --guildbar-folder-size: 48px;
  /*nav[aria-label="Servers sidebar"],*/
  .wrapper_ef3116 {
    /* Adjust margin for docked user panel */
    margin-bottom: calc(var(--custom-app-panels-height, 0));

    /* Folder expanded backdrop size/color */
    span.expandedFolderBackground__48112 {
      width: calc(var(--guildbar-folder-size) + 6px);
      background: var(--neutral-80);
      border: 1px solid var(--neutral-75);
      border-radius: 4px;
    }
    /* Adjust server avaatar svg bullshit */
    .listItem__650eb {
      svg {
        border-radius: 12px;
        top: 0;
        left: 0;
        foreignObject {
          x: -4px;
          y: -4px;
          width: var(--guildbar-avatar-size);
          height: var(--guildbar-avatar-size);
        }

        /* Less rounded corners */
        >defs>path {
          d: path("M -4 -4 L 48 -4 48 48 -4 48") !important;
        }
        /* The cutout for ping positioning */
        >defs>rect.badgeStroke_cc5dd2 {
          x: calc(var(--guildbar-avatar-size) - 22px);
          y: calc(var(--guildbar-avatar-size) - 22px);
        }
      }
    }
    /* Reduce server list spacing and fix crappy cropper */
    .stack_dbd263 {
      gap: 4px !important;
      height: unset !important;
    }
    
    /* Not round folder */
    .folderIconWrapper__48112 {
      border-radius: 2px;
      div.icon_f34534 {
        border-radius: 4px !important;
      }
    }
    --unread-server-pip-size: 16px;
    --hover-server-pip-size: 24px;
    --active-server-pip-size: 36px;
    /* Unread pip */
    .pill_e5445c, .pill__1f388, .pill_ed9a5f {
      overflow: visible !important;
      span {
        background: var(--unread-color);
        width: 8px;
        left: 0px;
        height: var(--unread-server-pip-size) !important;
        /*height: calc(var(--custom-guild-list-width) * 0.5) !important;*/
        min-height: 5px;
        transition: background 0.3s ease, height 0.5s cubic-bezier(0.34, 2.64, 0.64, 1);
      
        &:is(div.listItem__650eb:has(.selected_e5445c, .selected__91816) &) {
          background: white;
          height: var(--active-server-pip-size) !important;
        }
        &:is(.listItem__650eb:hover &) {
          background: var(--bg-brand) !important;
          height: var(--hover-server-pip-size) !important;
          @starting-style {
            height: min(8px, var(--unread-server-pip-size)) !important;
          }
        }
      }
    }
  }

  /*
    Reposition typing bar above the text input.
    It slightly overlaps with both text input and chat,
    but it's either that or allocating dedicated space for it
    between chat and text input

    The overlap somewhat mitigated by limiting pointer-events
  */
  .typing_b88801, .typing_faa96b, .dots_faa96b, .typing_faa96b, .typing_f75fb0 {
    left: 0;
    padding-left: var(--space-xs);
    padding-bottom: 0px;
    padding-top: 2px;
    background: linear-gradient(to right, var(--background-primary) 80%, transparent);
    border-top: 1px solid linear-gradient(to right, var(--border-faint) 80%, transparent);
    right: 0;
    top: -10px;
    bottom: unset;/*calc(var(--custom-channel-textarea-text-area-height) - 8px);*/
    /* Make only people typing clickable, not entire "people type" bar */
    pointer-events: none;
    strong {
      pointer-events: initial;
    }
  }

  /*
    Remove idiotic floating user panel
    and make it docked asimilar to chat text input
  */
  section.panels_c48ade {
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    border-right: none;
    /* Use different background color for better contrast with chat input */
    background: var(--background-secondary);
    
    >div.container__37e49 {
      padding-top: calc(var(--space-xs) - 2px);
      height: calc(var(--custom-channel-textarea-text-area-height) - 1px);
    }
    /* Condense voice chat */
    .container_e131a9 {
      gap: 4px;
      padding: 4px;
      .lineClamp1__4bd52 {
        display: none;
      }
      .actionButtons_e131a9 {
        grid-gap: 4px;

        .button_e131a9 {
          height: 26px;
          min-height: 26px;
        }
      }
    }
    /*
      Condense activity panel.
      The --activity-height had to be moved to body {} selector
      because of SVG foreignObject abuse by discord.
    */
    .panel__5dec7, .activityPanel_c48ade {
      height: var(--activity-height);
      padding-top: 0;
      padding-bottom: 0;

      .gameIcon__8c6c2 {
        width: calc(var(--activity-height) - 8px);
        height: calc(var(--activity-height) - 8px);
        padding: 4px 0;
      }

      .button__67645 {
        width: var(--activity-height);
        height: var(--activity-height);
        margin: 0;
      }
      .title_b6c092 {
          font-size: 12px;
          line-height: 14px;
      }
    }
  }

  /* Disable rounded corners on images */
  div.mosaicItem__6c706,
  div.oneByOneGridSingle_f4758a,
  div.visualMediaItemContainer_f4758a,
  div.imageWrapper_af017a {
    border-radius: 0px !important;
  }

  /* Condense reaction emotes */
  .reactions__23977 {
    padding: 0;
    .reaction__23977, .reactionBtn__23977 {
      border-radius: 0.3rem;
      margin: .25rem .1rem;
    }
    .reactionInner__23977 {
      padding: .125rem .275rem;
    }
    .reactionBtn__23977 {
      padding: .3125rem .3375rem;
    }
  }

  /* DM list fixes */
  /* Adjust DM list docked user panel margin */
  nav.privateChannels__35e86 .scroller__99e7c {
    margin-bottom: var(--custom-app-panels-height, 0)
  }

  /*ul[aria-label="Direct Messages"],*/
  .privateChannels__35e86 ul.content__99f8c {
    /* Hide store/shop buttons. */
    li.channel__972a0:has(a[href='/store'], a[href='/shop']) {
      display: none;
    }
    /* Make divider between buttons and DMs not waste space */
    .sectionDivider__35e86 {
      margin: 8px 0;
    }
    /* Adjust + button in DMs for scrollbar */
    .privateChannelsHeaderContainer__99e7c {
      padding-right: 12px;
      width: var(--channel-list-width);
    }

    li {
      border-radius: 0;

      margin-left: 0;
      >div {
        margin-top: -2px;
        border-radius: 0;
        a {
          padding-left: 12px;
          /* Condense the friend list */
          padding-top: 0px;
          padding-bottom: 0px;
          /* Add unread marker for DMs */
          border-left: 2px solid transparent;
          &:has(.highlighted__20a53) {
            border-left-color: var(--unread-color);
          }
        }
        .closeButton__972a0 {
          margin-right: 4px;
        }
        /* Reduce avaatar and name gap */
        div.avatar__20a53 {
          margin-right: 8px;
        }
      }
    }
    /* Restore "friends" button size */
    .friendsButtonContainer__35e86 a {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }

  /* Adjust top bar */
  .subtitleContainer_f75fb0 {
    >section {
      padding-left: var(--space-xs);
    }
    .children__9293f {
      .iconWrapper__9293f {
        width: unset;
      }
      .titleWrapper__9293f {
        margin-right: 4px;
      }
      /* Fix the dot not rendering properly lol */
      .dot__9293f {
        width: 16px;
        height: 16px;
      }
      .topic__6ec1a {
        margin-left: 4px;
      }
    }
    .toolbar__9293f {
      /* Hide notification settings (redundant, rarely used) */
      >div.iconWrapper__9293f[aria-label="Notification Settings"] {
        display: none;
      }
    }
  }

  .buttons__5126c {
    /* Less roundness */
    .buttonsInner__5126c, .hoverBarButton_f84418 {
      border-radius: 4px;
    }
    /* Hide quick react buttons */
    .hoverBarButton_f84418[aria-label~="react"],
    .separator_f84418, /* Quick react button separator */
    .hoverBarButton_f84418[aria-label="Forward"] /* Forward button (redundant, available in hamburger)*/
    {
      display: none;
    }
  }

  /* Slightly condense member list */
  .container_c8ffbb .content__99f8c {
    h3 {
      padding-top: var(--space-sm);
    }
    .member__5d473 {
      border-radius: 0;
    }
  }

}
/**
  Adjust chat scrollbar
*/
.auto_d125d2::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.auto_d125d2::-webkit-scrollbar-thumb:vertical {
  /*border-radius: 0 !important;*/
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: none;
  border-bottom: none;
  border-radius: 0px;
}
/* Make it flush with text input */
.auto_d125d2::-webkit-scrollbar-track {
  margin-bottom: 4px;
}

/* Hide create server and "explore public garbage" */
.tutorialContainer__650eb, .tutorialContainer__650eb+.listItem__650eb {
  display: none;
}