DiscordStyles / HorizontalServerList

Moves the server list from the left to the top of Discord.
MIT License
85 stars 96 forks source link

Latest Discord update makes the bar not show up. #51

Closed Benji7010 closed 8 months ago

Benji7010 commented 8 months ago

Describe the bug

The server bar doesn't show up when using the plugin anymore.

To Reproduce

Use plugin after updating Discord

Screenshots

image

Infomation (please complete the following information)

Discord channel: Stable OS: Windows Mod: Vencord Dev Discord language: English

Additional context

Latest Discord update said to break many themes. From the looks of it, this includes this theme.

SPACED0UBT commented 8 months ago

Same issue here. Resetting Vesktop had no change

TheMelancholyOfGigi198 commented 8 months ago

Same issue

AveAcVale commented 8 months ago

Plus

captainredbleach commented 8 months ago

Same

Gibbu commented 8 months ago

I am aware of the issue. Please do not comment on the post with "same", it does not help in any way.

noiraku commented 8 months ago

If anyone cant live without it there is halfway working until full released: (Yes thats me I hate memory muscles)

:root {
  --server-size: 50px;
  --server-spacing: 10px;
  --server-container: calc(var(--server-size) + 20px);
  --server-direction: column;
  --server-alignment: flex-start;
}

#app-mount .guilds__2b93a {
  width: var(--server-container);
}
#app-mount .guilds__2b93a .scrollerWrap-1IAIlv {
  width: calc(100% + 30px);
}
#app-mount .guilds__2b93a .svg__34dd4,
#app-mount .guilds__2b93a .wrapper__9916c,
#app-mount .guilds__2b93a .guildsError-b7zR5H,
#app-mount .guilds__2b93a .placeholderMask__94802 {
  width: var(--server-size);
  height: var(--server-size);
}
#app-mount .guilds__2b93a [role=group] {
  height: auto !important;
}
#app-mount .guilds__2b93a [class*=expandedFolderBackground] {
  width: var(--server-size);
  left: 50%;
  translate: -50% 0;
}
#app-mount .guilds__2b93a .wrapper__3670f {
  height: var(--server-size) !important;
}
#app-mount .guilds__2b93a .wrapper_ed1dea {
  width: var(--server-container);
}
#app-mount .guilds__2b93a [class*=listItem]:not([class*=listItemWrapper]) {
  width: var(--server-container);
}

#app-mount .app_b1f720 .base_c0676e {
  top: var(--server-container) !important;
  position: absolute !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  max-width: 100%;
}
#app-mount .sidebar_ded4b5 {
  border-radius: 0;
}
#app-mount [class*=unreadMentionsIndicator] {
  width: var(--server-size);
  padding: 0;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
}
#app-mount .guilds__2b93a {
  transform-origin: top left;
  transform: rotate(-90deg);
  height: 100vw !important;
  top: var(--server-container);
  bottom: unset;
  position: absolute !important;
  left: 0;
}
#app-mount .guilds__2b93a > [data-list-id=guildsnav] {
  margin-bottom: 0 !important;
}
#app-mount .guilds__2b93a .scrollerBase__65223 {
  padding: var(--server-spacing) 0 !important;
  display: flex;
  flex-direction: var(--server-direction);
  gap: var(--server-spacing);
  align-items: var(--server-alignment);
  justify-content: var(--server-alignment);
}
#app-mount .guilds__2b93a .scrollerBase__65223 > div[style]:not(.listItem-2P_4kh) {
  height: auto !important;
}
#app-mount .guilds__2b93a .scrollerBase__65223 > div[style]:not(.listItem-2P_4kh)[style*="height: 0px"] {
  padding-top: 1px;
}
#app-mount .guilds__2b93a .scrollerBase__65223 > div[aria-label] {
  display: flex;
  flex-direction: var(--server-direction);
  gap: var(--server-spacing);
}
#app-mount .guilds__2b93a [class*=pill] {
  transform: rotate(90deg) translateY(-50%);
  height: var(--server-size);
  width: 4px;
  top: calc(var(--server-size) / -1 + var(--server-size) / 2 - 8px) !important;
  margin-left: -2px;
}
#app-mount .guilds__2b93a [class*=pill] span {
  height: 100% !important;
  width: 4px !important;
  transform: scale(0, 1) !important;
  transition: 0.15s ease !important;
  margin-left: 0;
  border-radius: 0 4px 4px 0;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 0"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 1"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 2"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 3"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 4"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 5"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 6"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 7"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 8"] {
  transform: scale(1, 0.24) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 9"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 10"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 11"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 12"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 13"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 14"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 15"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 16"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 17"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 18"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 19"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 20"] {
  transform: scale(1, 0.7) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 21"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 22"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 23"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 24"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 25"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 26"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 27"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 28"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 29"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 30"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 31"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 32"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 33"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 34"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 35"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 36"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 37"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 38"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 39"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a [class*=pill] span[style*="height: 40"] {
  transform: scale(1, 1) !important;
}
#app-mount .guilds__2b93a .wrapper_ed1dea {
  display: flex;
  flex-direction: var(--server-direction);
  gap: var(--server-spacing);
}
#app-mount .guilds__2b93a .wrapper_ed1dea ul[role=group] {
  display: flex;
  flex-direction: var(--server-direction);
  gap: var(--server-spacing);
}
#app-mount .guilds__2b93a [class*=listItem]:not([class*=listItemWrapper]) {
  width: var(--server-size);
  transform: rotate(90deg);
  margin: 0 10px;
  position: unset;
}
#app-mount .guilds__2b93a [class*=guildSeparator] {
  transform: rotate(90deg);
  width: var(--server-size);
}
#app-mount .guilds__2b93a [class*=expandedFolderBackground] {
  border-radius: 10px;
  height: 100%;
}
#app-mount .guilds__2b93a .folder__17546 {
  background: transparent;
}
#app-mount .guilds__2b93a .wrapper_a54cba {
  top: 0;
  bottom: 0;
}
#app-mount .guilds__2b93a .target__47b05::before {
  top: 0;
  height: var(--server-size);
  width: 4px;
  left: -6px;
}
#app-mount .guilds__2b93a.hidden__7c832 + .base__3e6af {
  top: 0 !important;
}
#app-mount [class*=listItemTooltip] {
  position: absolute;
  max-width: unset;
  white-space: nowrap;
  margin-left: calc(var(--server-size) / -1 - 20px);
  top: calc(var(--server-size) - 10px);
}
#app-mount [class*=listItemTooltip] [class*=tooltipPointer] {
  transform: rotate(180deg);
  top: -5px !important;
  right: unset;
  left: 13px;
  z-index: 1;
}
#app-mount .friendsOnline-2JkivW {
  position: absolute;
  transform: translate(-50%, 50%);
  top: calc(-50% + var(--server-spacing));
  left: -50%;
  width: calc(var(--server-size) + var(--server-spacing));
  display: flex;
  justify-content: center;
}
#app-mount .guilds__2b93a.content-Pph8t6,
#app-mount .BF-folderSidebar {
  position: absolute !important;
  top: calc(var(--server-container) * 2) !important;
}
#app-mount .guilds__2b93a.content-Pph8t6:not(.closed-j55_T-) + .base__3e6af,
#app-mount .BF-folderSidebar:not(.closed-j55_T-) + .base__3e6af {
  top: calc(var(--server-container) * 2.5) !important;
}
#app-mount .guilds__2b93a .frame-oXWS21[class*=listItem] {
  height: var(--server-size) !important;
}
#app-mount .guilds__2b93a .frame-oXWS21[class*=listItem] .wrapper_d281dd {
  height: 100% !important;
}
#app-mount .guilds__2b93a .frame-oXWS21[class*=listItem] .button-Jt-tIg {
  width: 100%;
  height: 100% !important;
  border-radius: 50%;
  padding: 2px;
  font-size: 10px;
  box-sizing: border-box;
  text-align: center;
}
#app-mount .BF-folderSidebar {
  top: calc(var(--server-container)) !important;
}
#app-mount .serverCountWrap-k8F5De {
  height: var(--server-size);
}
#app-mount .serverCount-FsTTs1 {
  white-space: pre-line;
  font-size: 12px;
  display: flex;
  align-items: center;
}

html.platform-osx #app-mount .typeMacOS__496b0 {
  width: 100%;
}
html.platform-osx #app-mount .base__3e6af {
  top: calc(var(--server-container) + 30px) !important;
}
html.platform-osx #app-mount #pluginNotice {
  top: 32px;
  z-index: 100000 !important;
}

body.foldercontentopened .base__3e6af {
  transition: 0.2s ease !important;
}

.accountProfilePopoutWrapper_af829a {
  left: 0;
}
Gibbu commented 8 months ago

Fixed. Re-enable your theme.