horizontalServerlist.theme.css

//META{"name":"Horizontal_Serverlist","description":"I've always wanted this :3","author":"square","version":"1.2.2"}*//

:root {
  /* for Jiiks' server grid */
  --guild-column-count: 1;
  --public-button-in-use: 0;  /* 0 or 1, unfortuantely css can't detect it where it's required */
}

.app {
  /* so other css can easily detect it, define your default on :root as 0 */
  --horizontal-serverlist: 1;
}

.guilds-wrapper {
  position: fixed;
  top: 0;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  height: 100vw;
}
.guilds-wrapper ~ div {
  height: calc(100% - var(--guild-column-count) * 70px + (var(--guild-column-count) - 1) * 15px);
}
.guilds .guild:not(#bd-pub-li) .guild-inner:first-child, .badge, .guild.guilds-add, .guilds-error {
  transform: rotate(90deg);
}
.guilds-wrapper .guilds > .guild:first-child {
  margin-top: calc(12px * var(--public-button-in-use));
}
.dms {
  padding-top: calc(7px * (var(--guild-column-count) - 1) / (var(--guild-column-count) - 1));
  margin-left: -8px;
  padding-left: calc(8px * (var(--guild-column-count) - 1) / (var(--guild-column-count) - 1));
}
.dms .guild {
  display: inline-block;
}
.app .guilds-wrapper .guilds .dms .guild {
  margin: 8px 0 0 8px;
}
.app .guilds-wrapper .guilds .friends-online {
  margin: 0;
  line-height: 0;
  transform-origin: 50% -25px;
  transform: rotate(90deg) translateY(calc(5px * (var(--guild-column-count) - 1) + 5px));
}
.app #bd-pub-li {
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  margin: 0 auto;
  left: calc((var(--guild-column-count) * 70px - (var(--guild-column-count) - 1) * 15px) / 2 - 25px)
}

#files_directDownload {
  bottom: calc(var(--guild-column-count) * 70px - (var(--guild-column-count) - 1) * 15px);
  left: 240px;
  width: calc(100% - 240px - 240px);
}


/* server grid does not support minimal mode, will fix if that changes */
.bd-minimal .guilds-wrapper ~ div {
  height: calc(100% - 45px);
}
.bd-minimal .guilds-wrapper .guilds .friends-online {
  width: 35px;
  transform-origin: 50% -10px;
  transform: rotate(90deg) translateY(12px);
}
.bd-minimal .app #bd-pub-li {
  position: absolute;
  top: 5px;
  margin: 0 auto;
  left: calc((var(--guild-column-count) * 70px - (var(--guild-column-count) - 1) * 15px) / 2 - 25px)
}
.bd-minimal .dms {
  width: 45px;
}

.bd-minimal #files_directDownload {
  bottom: 45px;
  left: 230px;
  width: calc(100% - 230px - 185px)
}