HorizontalServerList.theme.css

/**
 * @name Horizontal Server List
 * @author Gibbu#1211
 * @version 2.1.0
 * @invite ZHthyCw
 * @description Moves the server list from the left to the top of Discord. Compatible with Server Folders and most basic transparent themes
 * @source https://github.com/DiscordStyles/HorizontalServerList
 * @website https://www.gibbu.me
*/

@property --extra-margin {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --HSL-server-scale: 1; /* Scale of the server icons, decimals allowed. | DEFAULT: 1 */
  --HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column */
  --HSL-server-alignment: flex-start; /* Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
  --__server-container: calc(
    var(--custom-guild-list-width) * var(--HSL-server-scale)
  );
  --__server-y-padding: 10px;
  --extra-margin: 0px;
}

.content__5e434 {
  margin-top: var(--__server-container);
  overflow: visible;
  margin-right: var(--gap)
}

#app-mount .sidebar__5e434 {
  border-radius: 0;
  overflow: visible;
}
#app-mount .guilds__5e434 {
  transform-origin: top left;
  rotate: -90deg;
  scale: var(--HSL-server-scale);
  bottom: unset;
  position: absolute !important;
  left: 0;
}
#app-mount .tree_ef3116 {
  padding-top: var(--__server-y-padding);
  padding-bottom: var(--__server-y-padding);
}
#app-mount .wrapper_cc5dd2 {
  rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .unreadMentionsIndicatorTop_ef3116 + ul .stack_dbd263 {
  flex-direction: var(--HSL-server-direction);
  justify-content: var(--HSL-server-alignment);
}
#app-mount .icon__6e9f8 {
   rotate: -90deg;
}

#guild-list-unread-dms .icon__6e9f8 {
   rotate: 0deg;
}
.guilds__5e434 {
  overflow-x: hidden;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none !important;
  }
}

/* Half Half */
.sidebar__5e434 > [style$=";"] {
  position: fixed;
  z-index: 101;
  transform: translateX(50vw);
  > nav {
    height: calc(50vw - (var(--gap) * 3)) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    > ul {
      padding-top: 0 !important;
      > div > div {
        padding-top: 8px !important;
      }
    }
  }
}
.sidebar__5e434:not(:has(> .vc-betterFolders-sidebar))
  > .wrapper_ef3116.guilds__5e434 {
  height: calc(100vw - (var(--gap) * 4)) !important;
}
.sidebar__5e434:has(> .vc-betterFolders-sidebar)
  > .wrapper_ef3116.guilds__5e434 {
  height: calc(50vw) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  .stack_dbd263.scroller_ef3116
    > :is(
      .listItem__650eb:has(> .listItemWrapper__91816),
      .tutorialContainer__650eb:has(> .wrapper_d144f8)
    ) {
    display: none !important;
  }
}

.visual-refresh #app-mount {
  .actionButtons_e131a9 button {
    padding: 0 !important;
  }
  .trailing_c38106 {
    gap: 0;
    padding-right: calc(var(--window-control-size) + (8 * var(--gap)));
  }
  /* move controls to server bar in horizontalserverlist (must need!!) */
  .bar_c38106 {
    -webkit-app-region: no-drag;

    .winButtons_c38106 {
      z-index: 9999;
      position: fixed;
      transform-origin: center;
      rotate: -90deg;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      -webkit-app-region: no-drag;
      padding: 0px var(--gap);
      border: var(--border-thickness) solid var(--border);
      width: calc(
        var(--custom-guild-list-width) - (2.25 * var(--gap))
      ) !important;
      height: calc(var(--window-control-size) + (4 * var(--gap)));
      transform: translate(
        -15px,
        calc(var(--window-control-size) * 2 + (7.5 * var(--gap)))
      ) !important;
      background: var(--bg-4) !important;
      &::before {
        display: none !important;
      }

      > .winButton_c38106 {
        width: 100%;
        -webkit-app-region: no-drag;
        z-index: 9999;
      }
    }

    .recentsIcon_c99c29,
    [href="https://support.discord.com"]
    {
      display: none;
    }
  }
  /* fix disappeared window controls in hsl */
  .sidebar__5e434:has(> .vc-betterFolders-sidebar)
    > .wrapper_ef3116[aria-label="Servers sidebar"] {
    height: calc(50vw - (1 * var(--gap))) !important;
  }
  .sidebar__5e434 > .wrapper_ef3116[aria-label="Servers sidebar"] {
    height: calc(
      100vw - var(--gap) * 5 - var(--window-control-size) * 2
    ) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* fix hsl clipping through window controls */
  .vc-betterFolders-sidebar .guilds__5e434 {
    height: calc(
      50vw - ((var(--gap) * 2.5 + var(--window-control-size)) * 2)
    ) !important;
    z-index: 200;
    border-radius: 0 !important;
  }
  .primary_a22cb0 {
    background: var(--blue-3);
  }
  /* nuke bar */
  .base__5e434 {
    grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end];
    padding-top: calc(var(--gap) * 2);
  }

  .unreadMentionsIndicatorTop_ef3116 + ul .stack_dbd263::after {
    height: var(--window-control-size);
  }

  /* nuke extra bar that i cant bother to fix */
  > .bar_c38106 {
    display: none !important;
  }

  /* update hsl stuff */
  .content__5e434 {
    margin-top: calc(var(--__server-container) + var(--gap));
    .guilds__5e434 {
      transform: translateX(var(--gap));
    }
  }

  /* fix misalignment */
  .page__5e434 {
    padding-bottom: 0;
  }

  /* obliterate the title */
  .title_c38106 {
    display: none !important;
  }
}