Discord - Customization by jesuscc1993

/* ==UserStyle==
@name           Discord - Customization
@description    Provides some extra customization options for Discord.
@version        2024.04.14.23.13
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   less

@var text font-family                "Font family"                 "'Whitney', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
@var text min-sidebar_width          "Min sidebar width"           240px
@var text max-sidebar_width          "Max sidebar width"           240px
@var text channel-padding            "Channel padding (sidebar)"   6px
@var text category-spacing           "Category spacing (sidebar)"  16px
@var text block-emoji-size           "Block emoji size"            3rem
@var text block-emoji-zoom           "Block emoji zoom (hover)"    unset
@var text inline-emoji-size          "Inline emoji size"           1.375em
@var text inline-emoji-zoom          "Inline emoji zoom (hover)"   unset
@var text reaction-emoji-size        "Reaction emoji size"         1rem
@var text avatar-scale               "Avatar scale"                unset
@var text avatar-zoom                "Avatar zoom (hover)"         unset
@var text group-spacing              "Message groups spacing"      unset
@var text li-margin                  "List item margin"            4px
@var text transition                 "Transition duration"         150ms
@var checkbox avatar-decorations     "Avatar decorations"          1
@var checkbox darker-quotes          "Darker code and quotes"      0
@var checkbox full-width-embeds      "Full width embeds"           0
@var checkbox reduce-message-spacing "Reduce message spacing"      0
@var checkbox restore-blurple        "Restore blurple"             0
@var checkbox blurple-mentions       "Blurple mentions"            0

==/UserStyle== */
@-moz-document domain("discord.com") {
  :root {
    --avatar-scale: @avatar-scale;
    --avatar-zoom: @avatar-zoom;
    --block-emoji-size: @block-emoji-size;
    --block-emoji-zoom: @block-emoji-zoom;
    --inline-emoji-size: @inline-emoji-size;
    --inline-emoji-zoom: @inline-emoji-zoom;
    --reaction-emoji-size: @reaction-emoji-size;
    --channel-padding: @channel-padding;
    --custom-category-channel-space-before-category: @category-spacing;
    --font-family: @font-family;
    --group-spacing: @group-spacing;
    --max-sidebar_width: @max-sidebar_width;
    --min-sidebar_width: @min-sidebar_width;
    --li-margin: @li-margin;
    --transition: @transition;
  }

  html.theme-dark {
    --font-display: var(--font-family);
  }

  body {
    font-family: var(--font-family);
  }

  /* responsive columns */
  [class*="content_"] {
    [class*="sidebar_"],
    [class*="membersWrap_"] [class*="members_"] {
      width: ~"max(var(--min-sidebar_width), var(--max-sidebar_width))" !important;
    }

    [class*="membersWrap_"] {
      min-width: var(--min-sidebar_width);
    }

    [class*="sidebar_"] [class*="channel"],
    [class*="membersWrap_"] [class*="member_"] {
      max-width: 100% !important;
    }

    [class*="bannerImage_"],
    [class*="bannerImage_"] [class^="bannerImg"],
    [class*="bannerImage_"] [class^="bannerImg"]:before {
      width: 100%;
    }

    [class*="sidebar_"] [class*="panels_"] [class*="container_"] [class*="avatarWrapper_"] {
      flex: 1;
    }
  }

  /* channel padding */
  [class*="sidebar_"] [class*="iconVisibility"]:not([class*="wrapperCommon"]) a {
    padding: var(--channel-padding) 8px;

    [class*="children"],
    + [class*="children"] {
      margin-top: 0;
    }
  }

  /* HIDE UNLESS HOVERED */
  /* common setup */
  [class*="content_"] {
    [class*="guilds"] {
      z-index: 102;
    }

    [class*="sidebar_"] {
      height: 100%;
    }

    [class*="membersWrap_"] {
      right: 0;
      height: calc(100vh - 50px);
    }

    [class*="sidebar_"],
    [class*="membersWrap_"] {
      transition: var(--transition);
      transition-delay: 0.2s;
      z-index: 101;
    }
  }

  /* hide server members unless hovered */
  @media (max-width: 1152px) {
    [class*="membersWrap_"] {
      position: absolute;

      &:not(:hover) {
        margin-right: calc(var(--min-sidebar_width) * -1 + 8px);
      }
    }
  }

  /* hide channels unless hovered */
  @media (max-width: 800px) {
    [class*="sidebar_"] {
      position: absolute;

      &:not(:hover) {
        margin-left: calc(var(--min-sidebar_width) * -1 + 8px);
      }

      & + [class*="chat"] {
        padding-left: 8px;
      }
    }

    [class*="chatContent"] [class*="messagesWrapper"] {
      padding-right: 8px;
    }
  }

  /* HIDE AVATARS */
  @media (max-width: 480px) {
    [class*="messageListItem"] {
      img[class*="avatar"],
      [class*="timestamp"] {
        display: none;
      }

      [class*="message"] {
        padding: 0.125rem 1rem;
      }

      [class*="messageContent"] {
        margin-left: 0;
        padding-left: 0;
      }
    }
  }

  /* RESIZE */
  /* avatars */
  html when not (@avatar-scale = unset) {
    [class*="messageListItem"] img[class*="avatar__"] {
      transform: scale(var(--avatar-scale)) !important;
      margin-top: 4px;
    }
  }

  html when not (@avatar-zoom = unset) {
    [class*="messageListItem"] img[class*="avatar__"] {
      &,
      & + img[class*="avatarDecoration__"] {
        transition: var(--transition);
      }

      &:hover,
      &:hover + img[class*="avatarDecoration__"] {
        transform: scale(var(--avatar-zoom)) !important;
      }
    }
  }

  /* emojis */
  [class*="messagesWrapper"] {
    /* fixes vanilla's lack of vertical spacing between emojis */
    img.emoji {
      margin: 1px 0;
    }

    img.emoji:not(.jumboable) {
      width: var(--inline-emoji-size) !important;
      height: var(--inline-emoji-size) !important;
    }

    img.emoji.jumboable {
      width: var(--block-emoji-size) !important;
      height: var(--block-emoji-size) !important;
    }

    [class*="reactionInner"] img.emoji {
      width: var(--reaction-emoji-size) !important;
      height: var(--reaction-emoji-size) !important;
    }

    [class*="scrollable"] {
      max-height: none;
    }
  }

  /* emoji zoom */
  [class*="messagesWrapper_"] {
    [class*="messageContent_"] {
      overflow: visible;
    }

    img.emoji {
      transition: var(--transition);
      z-index: 1;
      position: relative;

      &:hover {
        z-index: 2;
      }
    }
  }

  [role="textbox"] img.emoji:hover {
    transform: none !important;
  }

  html when not (@inline-emoji-zoom = unset) {
    [class*="messagesWrapper_"] {
      [class*="messageContent"] img.emoji:hover {
        transform: scale(var(--inline-emoji-zoom));
      }
    }
  }

  html when not (@block-emoji-zoom = unset) {
    [class*="messagesWrapper_"] {
      img.emoji.jumboable:hover {
        transform: scale(var(--block-emoji-zoom));
      }
    }
  }

  /* MISCELLANEOUS */
  [class*="messagesWrapper"] textArea {
    max-height: none !important;
    resize: vertical;
  }

  [class*="isMentioned"] {
    margin-top: 1px;
  }

  /* float bot tag */
  [class*="nameAndDecorators"] {
    & > *:first-child {
      flex: 1;
    }

    & > *:not(:first-child) {
      align-self: normal;
    }
  }

  /* hide download icon */
  [class*="guilds"] [class*="scroller"] > [class*="listItem"] {
    &:last-child,
    &:nth-last-child(2) {
      display: none;
    }
  }

  /* hide misc stuff */
  [class*="emptyChannelIcon"],
  [class^="userPopout"] [class^="footer"] {
    display: none;
  }

  /* hide ads */
  [aria-label="Send a gift"],
  [class*="buttons"][class*="you"] > *:first-child,
  [href="/shop"],
  [href="/store"] {
    display: none;
  }

  /* make "invisible" usernames readeable */
  [class*="name"][style="color: rgb(255, 255, 255);"] {
    color: #747f8d !important;
  }

  [class*="name"][style="color: rgb(54, 57, 62);"],
  [class*="name"][style="color: rgb(54, 57, 63);"] {
    color: #98a8b3 !important;
  }

  /* hide folder when set to match background */
  [class*="folderIconWrapper"] svg[style="color: rgb(47, 49, 54);"] {
    display: none;
  }

  /* mentions restoration */
  [class*="mentioned"] .mention[class*="wrapper"] {
    color: var(--brand-experiment) !important;
    background: transparent;
  }

  /* custom list margin */
  [class*="markup"] ol,
  [class*="markup"] ul {
    margin: 4px 0 4px 16px;
  }

  [class*="markup"] ol,
  [class*="markup"] li {
    margin: calc(var(--li-margin) / 2) 0;
  }

  /* avatar decorations */
  [class*="avatarDecoration_"] when (@avatar-decorations = 0) {
    display: none;
  }

  /* darker code and quotes */
  html when (@darker-quotes = 1) {
    [class*="markup"] code,
    blockquote {
      background: #0003;
    }

    [class*="textArea"] [class*="markup"] code,
    [class*="textArea"] blockquote {
      background: var(--background-secondary);
    }
  }

  /* full width embeds */
  [class*="embedWrapper_"] when (@full-width-embeds = 1) {
    &,
    [class*="gridContainer_"] {
      max-width: 100% !important;
    }

    [class*="embedGalleryImagesWrapper"] {
      max-width: 536px;
    }
  }

  /* reduced message spacing */
  html when (@reduce-message-spacing = 1) {
    [class*="wrapper"][class*="compact"]:not([class*="mentioned_"]),
    [class*="wrapper"][class*="cozy"]:not([class*="mentioned_"]) {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  /* custom group spacing */
  html when not (@group-spacing = unset) {
    [class*="group-spacing"] [class*="groupStart"] {
      margin-top: var(--group-spacing);
    }
  }

  /* blurple mentions */
  html when (@blurple-mentions = 1) {
    [class*="mentioned_"]:before {
      background-color: #7289da;
    }

    [class*="mentioned_"] {
      background-color: #7289da22;
    }

    [class*="mentioned_"][class*="selected"],
    &.mouse-mode.full-motion [class*="mentioned_"]:hover {
      background-color: #7289da11 !important;
    }
  }

  /* blurple restoration */
  html.theme-...