diskort/src/style/settings.less

div[class^="keybind-"], // true must know it!
[class*="socialLink-"], // in change log
div[class^="socialLinks-"], // in settings at bottom
{ &:extend(.hide); }

// New sidebar in settings
div[class^="standardSidebarView-"] {
  flex-direction: column;

  div[class^="sidebarRegion-"] {
    overflow: hidden;
    flex-basis: unset; // bugfix to normalize height
    flex-grow: 0; // fix scaling

    div[class^="header-"],
    div[class^="separator-"]
    { display: none; }

    & > div {
      background: var(--background-primary);
      scrollbar-width: thin;
      overflow: auto hidden !important;
      justify-content: left;
      max-width: 100%;

      & > nav {
        padding: 0;
        width: unset; // to increase size
        background: var(--background-secondary); // bugfix
        & > div {
          padding-left: @rounder;
          flex-direction: row;
          height: @tab-height;
        }
      }
    }
  }

  div[class^="contentRegion-"] {
    overflow-y: auto;
    scrollbar-width: thin;

    * {
      max-width: 100%;
    }
  }
}

div[aria-controls*="nitro"],
div[aria-controls="library-inventory-tab"],
div[aria-controls="subscriptions-tab"],
div[aria-controls="billing-tab"],
div[aria-controls^="hypesquad"],
div[aria-controls="stickers-tab"],
{ &:extend(.nitro); }

div[aria-controls="keybinds-tab"],
div[aria-controls="game-activity-tab"],
div[aria-controls="analytics-tab"],
div[aria-controls="partner-tab"],
{ &:extend(.hide); }

.horiz-tab(@cols: 2) {
  @gap: @div-width * 2;
  @el-width: calc(100% / @cols - @gap);
  display: flex;
  flex-flow: row wrap;
  column-gap: @gap;
  row-gap: @gap / 2;
  & > * {
    width: @el-width;
  }

  div[class^="divider"]:empty {
    display: none;
  }
}

#my-account-tab > div {
  .horiz-tab();
  & > div:first-child {
    width: 50%;
  }
}

#profile-customization-tab div[class^="children"]
div[class^="baseLayout-"] {
  & > div:not([class]) {
    width: 100%;

    div[class^="customizationSection-"] {
      &:nth-child(2), &:nth-child(3) {
        &:extend(.nitro);
      }
    }
  }

  div[class^="bioTextArea-"] {
    height: 30vh;
  }
}

// TrY AnImAtEd AvAtAr, eh... f you
[class^="optionBox-"]:nth-child(2)
{ &:extend(.nitro); }

#connections-tab div[class^="children-"] {
  flex-direction: row;
  div[class^="accountList-"] {
    margin-right: @div-width;
    height: 100%; // decreases height? 0_0
  }
  div[class^="connectionList-"] {
    width: 100%;
  }
}

#appearance-tab div[class^="children-"] {
  .horiz-tab();

  & > div:first-child {
    width: 100%;
  }

  div[class^="marginTop20-"] > div[class^="slider-"] {
    margin-top: 28px;
  }
}

#accessibility-tab div div[class^="children-"] {
  & > div {
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(6),
    &:nth-child(7)
    { &:extend(.hide); }

    &:nth-child(4) {
      margin-top: @div-width * 2;
    }
  }
}

#notifications-tab div[class^="children"] {
  div:nth-child(6)
  { &:extend(.hide); }
}

#language-tab div[class^="children-"] {
  div div > div[role="radiogroup"] {
    .horiz-tab(3);
  }
}

#streamer-mode-tab div[class^="children-"] {
  .horiz-tab();
  & > * {
    &:nth-child(1),
    &:nth-child(2)
    { width: 100%; }
    &:nth-child(3)
    { display: none; }
  }
}

// Server settings
#overview-tab div[class^="children-"] > div {
  // system messages
  &:nth-child(3) {
    .horiz-tab();

    & > :nth-child(1),
    & > :nth-child(2)
    { width: 100%; }

    & > :nth-child(3) // description
    { display: none; }
  }

  // notification settings
  &:nth-child(4) > div > div:last-child {
    .horiz-tab();
  }

  // nitro features
  &:nth-child(5) > div > div:last-child {
    .horiz-tab(3);
    & > * {
      padding: 0;
      margin: 0;
      border: none;
    }
    & > div:first-child div[class^="flexChild-"]
    { display: none; }
  }
}

#moderation-tab div[class^="children-"] {
  div[role="radiogroup"] {
    .horiz-tab();
  }
}

div[data-list-id="audit-log"] {
  .horiz-tab();
  & > * {
    height: min-content;
  }
}

#integrations-tab > div:nth-child(2) {
  .horiz-tab();

  img[class^="iconWrapper-"] {
    width: unset;
  }

  button[class^="createButton-"],
  [class^="sectionHeader-"],
  & > div:first-child {
    width: 100%;
    margin-bottom: @div-width * 3;
  }
}

#widget-tab div[class^="children-"] {
  &, & > div[class^="infoWrapper-"] {
    .horiz-tab();
    row-gap: @gap * 2;
  }

  img[class^="infoItem-"]
  { display: none; }

  div[class^="infoItem-"],
  & > div:first-child,
  & > div:last-child {
    width: 100%;
    flex-basis: unset;
  }
}

#community-tab > div[class^="container-"] {
  & > div[class^="banner-"]
  { &:extend(.hide); }
}

#discovery-tab > div[class^="container-"] {
  .horiz-tab();
  span[class*="Button"] {
    align-self: start;
  }
}