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; } }