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

@var text font-family                   "Font family"                 "gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif
@var text avatar-scale                  "Avatar scale"                unset
@var text avatar-zoom                   "Avatar zoom (hover)"         unset
@var text block-emoji-size              "Block emoji size"            unset
@var text block-emoji-zoom              "Block emoji zoom (hover)"    unset
@var text inline-emoji-size             "Inline emoji size"           unset
@var text inline-emoji-zoom             "Inline emoji zoom (hover)"   unset
@var text reaction-emoji-size           "Reaction emoji size"         unset
@var text category-spacing              "Category spacing (sidebar)"  unset
@var text custom-guild-sidebar-width    "Custom guild sidebar width"  unset
@var text custom-member-list-width      "Custom member list width"    unset
@var text group-spacing                 "Message groups spacing"      unset
@var text li-margin                     "Vertical list item margin"   unset
@var text transition                    "Transition duration"         150ms
@var checkbox blurple-mentions          "Purple mentions and links"   0
@var checkbox darker-guildnav           "Darker server list"          0
@var checkbox float-role-decorators     "Float role decorators"       0
@var checkbox full-width-embeds         "Full width embeds"           0
@var checkbox monochrome-bg             "Monochrome background"       0
@var checkbox reduce-message-spacing    "Reduce message spacing"      0
@var checkbox reduce-user-card-padding  "Reduce user card padding"    0
@var checkbox restore-blurple           "Restore classic blurple"     0
@var checkbox round-server-icons        "Round server icons"          0
@var checkbox same-color-sidebars       "Same color sidebars"         0
@var checkbox server-icon-bgs           "Server icon backgrounds"     0
@var checkbox disable-redesign-borders  "Disable redesign borders"    0
@var checkbox hide-channel-badges       "Hide channel badges"         0
@var checkbox hide-download-icon        "Hide download icon"          0
@var checkbox hide-events               "Hide events (sidebar)"       0
@var checkbox hide-server-banners       "Hide server banners"         0
@var checkbox hide-top-bar              "Hide top bar"                0
@var checkbox hide-user-decorations     "Hide user decorations"       0
@var checkbox hide-voice-channels       "Hide voice channels"         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;
    --font-primary: @font-family;
    --group-spacing: @group-spacing;
    --transition: @transition;
  }

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

  body {
    & when not (@category-spacing = unset) {
      --custom-category-channel-space-before-category: @category-spacing !important;
    }
    & when not (@custom-member-list-width = unset) {
      --custom-member-list-width: @custom-member-list-width !important;
    }
    & when not (@custom-guild-sidebar-width = unset) {
      --custom-guild-sidebar-width: @custom-guild-sidebar-width !important;
    }
  }

  /* 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;
      min-height: 0;

      &:not(.jumboable) when not (@inline-emoji-size = unset) {
        width: var(--inline-emoji-size) !important;
        height: var(--inline-emoji-size) !important;
      }

      &.jumboable when not (@block-emoji-size = unset) {
        width: var(--block-emoji-size) !important;
        height: var(--block-emoji-size) !important;
      }
    }

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

      [class*="reactionBtn"] {
        height: auto;
        line-height: 0;

        svg {
          --compensation: 5px;
          width: calc(var(--reaction-emoji-size) - var(--compensation)) !important;
          height: calc(var(--reaction-emoji-size) - var(--compensation)) !important;
        }
      }
    }

    [class*="repliedTextContent "] img.emoji {
      width: 1em !important;
      height: 1em !important;
    }

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

    [class*="emojiContainer"] + [class*="emojiContainer"] {
      margin-left: 0.5rem;
    }

    [class*="popoverReactionHoverBar"] {
      gap: 0.25rem;
    }
  }

  /* 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));
      }
    }
  }

  .visual-refresh when (@reduce-user-card-padding = 1) {
    [class*="sidebarResizeHandle"] + section [class*="container"]:has(> [class*="avatarWrapper"]) {
      height: auto;
      padding: 0 var(--space-xxs);
    }
  }

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

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

  /* float role decorators */
  [class*="member"] when (@float-role-decorators = 1) {
    [class*="memberInner"] {
      width: 100%;

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

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

    [class*="childContainer"][class*="nameplated"] {
      padding-right: 8px;
    }
  }

  /* hide download icon */
  html when (@hide-download-icon = 1) {
    [class*="listItem"]:not(:nth-child(2)) [class*="guildSeparator"] {
      display: none;
    }

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

  /* hide events */
  html when (@hide-events = 1) {
    #channels:has([id^="upcoming-events"]) ul {
      > [style="height: 12px;"],
      [class*="sectionDivider"],
      li:has([id^="upcoming-events"]) {
        display: none;
      }
    }
  }

  /* hide top bar */
  .visual-refresh [data-fullscreen="false"]:not(:has([class*="notice"])) when (@hide-top-bar = 1) {
    grid-template-rows: [titleBarEnd] min-content [noticeEnd] 1fr [end];

    > [class*="bar"] {
      display: none;
    }

    [class*="itemsContainer"] {
      padding-top: var(--space-sm);
    }
  }

  /* hide server banners */
  html when (@hide-server-banners = 1) {
    [class*="bannerVisible"] {
      > [class*="header"] {
        border-bottom: 1px solid var(--border-subtle) !important;
        border-top: 1px solid transparent !important;
      }

      [class*="headerEllipseForeground"] {
        background: none !important;
      }

      [class*="animatedContainer"]:has([class*="bannerImage"]) {
        display: none;
      }

      [class*="name"] {
        color: var(--text-default) !important;
      }

      svg {
        color: var(--icon-secondary) !important;
      }
    }

    #channels > ul > [aria-hidden="true"] {
      display: none;
    }
  }

  /* hide voice channels */
  html when (@hide-voice-channels = 1) {
    [class*="containerDefault"]:has(a[role="button"]),
    [class*="sidebar"] [class*="voiceBar"] {
      display: none;
    }
  }

  /* hide channel badges */
  html when (@hide-channel-badges = 1) {
    [class*="guilds"] [class*="wrapper"] mask,
    [class*="guilds"] [class*="upperBadge"] {
      display: none;
    }
  }

  /* hide user decorations */
  html when (@hide-user-decorations = 1) {
    [class*="avatarDecoration"] {
      display: none;
    }

    [data-list-item-id*="members"] [style*="linear-gradient"] {
      display: none;
    }
  }

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

  /* hide ads and nitro */
  #channels li:has([id*="skill-trees"]) {
    &,
    + [class*="sectionDivider"] {
      display: none;
    }

    + [class*="sectionDivider"] + [class*="containerDefault"] {
      padding-top: 0;
    }
  }

  #channels ul > [class*="containerWithMargin"],
  [aria-label="Send a gift"],
  [class*="buttons"][class*="you"] > *:first-child,
  [class*="channel"]:has([href="/shop"]),
  [class*="channel"]:has([href="/store"]) {
    display: none;
  }
  /*  */

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

  [class*="name"][style="color: rgb(0, 0, 0);"],
  [class*="name"][style="color: rgb(8, 2, 0);"],
  [class*="name"][style="color: rgb(1, 9, 20);"],
  [class*="name"][style="color: rgb(54, 57, 62);"],
  [class*="name"][style="color: rgb(54, 57, 63);"] {
    color: #95a5a6 !important;
  }

  /* hide folder when set to match background */
  [class*="folderGroup"][style="--custom-folder-color: #232428;"] [class*="folderIconWrapper"] svg {
    display: none;
  }

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

  /* custom list margin */
  [class*="markup"] li when not (@li-margin = unset) {
    @margin: (@li-margin / 2);
    margin-top: @margin;
    margin-bottom: @margin;
  }

  /* 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);
    }
  }

  /* purple mentions and links */
  html when (@blurple-mentions = 1) {
    [class*="mentioned"]:before {
      background-color: var(--brand);
    }

    [class*="mentioned"] {
      background-color: var(--brand-10a);
    }

    [class*="mentioned"][class*="selected"],
    &.mouse-mode.full-motion [class*="mentioned"]:hover {
      background-color: var(--brand-05a) !important;
    }
  }

  /* blurple restoration */
  .restore-blurple {
    --brand: #7289da;
    --brand-100: #f8f9fd;
    --brand-130: #f2f4fc;
    --brand-160: #ebeefa;
    --brand-200: #e3e7f8;
    --brand-230: #dae0f5;
    --brand-260: #d1d9f3;
    --brand-300: #c7d0f0;
    --brand-330: #b5c1ec;
    --brand-360: #a5b3e7;
    --brand-400: #8ea1e1;
    --brand-430: #869adf;
    --brand-460: #7d92dd;
    --brand-500: #7289da;
    --brand-530: #687dc6;
    --brand-560: #5c6fb1;
    --brand-600: #4e5d94;
    --brand-630: #435180;
    --brand-660: #3b4770;
    --brand-700: #2e3757;
    --brand-730: #2b3352;
    --brand-760: #272f4b;
    --brand-800: #222941;
    --brand-830: #1a2032;
    --brand-860: #111521;
    --brand-900: #06070b;

    > * {
      --text-link: var(--brand-400);
    }

    --brand-05a: rgba(114, 137, 218, 0.05);
    .brand-a(@i) when (@i <= 100) {
      --brand-@{i}a: rgba(114, 137, 218, @i * 0.01);
      .brand-a(@i + 5);
    }
    .brand-a(10);

    .blurple(@i) when (@i =< 100) {
      --blurple-@{i}: hsl(227, 58%, (95.294% - ((@i - 1) * (95.294% - 30%) / 99)));
      --blurple-@{i}-hsl: 227, 58%, (95.294% - ((@i - 1) * (95.294% - 30%) / 99));
      .blurple(@i + 1);
    }
    .blurple(1);
  }

  html when (@restore-blurple = 1) {
    &.theme-dark,
    &.theme-light {
      .restore-blurple();
    }
  }

  /* round server icons */
  [data-list-item-id^="guildsnav"] when (@round-server-icons = 1) {
    border-radius: 50%;
    overflow: hidden;
  }
  [class*="folderGroup"] [class*="iconSizeMini"] when (@round-server-icons = 1) {
    border-radius: 50% !important;
  }

  /* server icon bgs */
  [data-list-item-id^="guildsnav"] when (@server-icon-bgs = 1) {
    background-color: var(--background-primary);

    &:hover {
      background-color: var(--brand);
    }
  }

  /* disable redesign borders */
  .visual-refresh when (@disable-redesign-borders = 1) {
    --app-border-frame: #0000 !important;
    --border-faint: #0000 !important;
    --border-subtle: #0000 !important;
    --border-strong: #0000 !important;

    [class*="subtitleContainer"] {
      --border-subtle: color-mix(in oklab, hsl(var(--opacity-12-hsl) / 0.12) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%));
    }
  }

  /* monochrome bg */
  .visual-refresh when (@monochrome-bg = 1) {
    --background-base-low: #0000 !important;
    --background-base-lower: #0000 !important;
    --background-base-lowest: #0000 !important;
    --background-surface-high: #0000 !important;
    --chat-background-default: #0000 !important;
    --custom-channel-members-bg: #0000 !important;
  }

  /* darker guildnav */
  .visual-refresh when (@darker-guildnav = 1) {
    [class*="guilds"] {
      margin-bottom: 0;

      [data-list-id="guildsnav"] {
        background: #0003;
      }
    }

    .panels_c48ade {
      margin-left: var(--custom-guild-list-width);
      width: calc(100% - var(--custom-guild-list-width) - var(--space-xs) * 2);
    }
  }

  /* same color sidebars */
  html when (@same-color-sidebars = 1) {
    [class*="membersWrap"] [class*="members"] {
      &,
      [class*="member"] {
        background: var(--bg-overlay-4, var(--background-base-lowest));
      }
    }
  }

  /* fixes */
  [class*="repliedTextPreview"] {
    max-height: 1.25rem;
  }

  [class*="roleIcon"][height="20"] {
    height: 20px;
    width: auto;
    vertical-align: middle;
  }
}