fix message input in profile

Bugfixes.

Continue removing classes.

Add some border radius to tabs.

Add support for new profile update (not tested without it).

Radius are now not important when not needed.

.gitignore

@@ -1 +1,2 @@
 diskort.xpi
+btfl.css

btfl.css

@@ -1,306 +0,0 @@
-/** DisKort
- * (c) Er2 2022 <er2@dismail.de>
- * Zlib License
- */
-
-/* to hide */
-[class^="username-"],
-[class^="discrimBase-"],
-[class*="banner-"],
-[class*="perks"],
-[class*="socialLink-"],
-[class^="usernameInnerRow-"],
-[class^="membersGroup-"],
-[class^="searchBar-"],
-[class^="nowPlaying"],
-[class^="marketing"],
-[class^="clickableSticker-"],
-[class^="unreadPill-"],
-[class^="applicationInstall"],
-[class*="nitro"],
-[class*="artwork-"],
-div[class^="art-"],
-div[class^="threadSuggestionBar-"],
-div[class^="nameTag-"],
-div[class*="hero"],
-/*div[class^="button"] button[class^="button-"],*/
-button[class^="shinyButton"], [class*="giftButton"],
-button[class*="followButton-"],
-/*button[class*="emojiItemDisabled-"],*/
-div[class*="premium"],
-div[id*="premium"],
-div[role="separator"],
-div[class*="goal"],
-div[class^="welcomeCTA-"],
-h2[class^="privateChannelsHeaderContainer"],
-nav[class^="nav-"],
-span[class^="questionMark-"],
-
-/* Settings */
-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[class^="socialLinks-"],
-
-/* buttons on chat area */
-div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]):not([class^="attachButton-"]),
-[class^="stickerIcon-"],
-
-div[class^="toolbar-3_"] > :not([aria-label="Close"]),
-
-#emoji-picker-tab-panel
-div[class^="emojiPicker-"]
-> div[class^="header-"],
-
-section div[class^="children-"] div[class^="spacer-"],
-
-nav[class^="privateChannels-"] div div
-*[data-list-item-id$="nitro"],
-
-#gif-picker-tab, #sticker-picker-tab,
-#private-channels-0, #private-channels-1, #private-channels-2,
-
-/* main page */
-#app-mount div:not([class]) div[class=""] div:not([class])
-{
-  all: unset !important;
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
-}
-div[aria-label="Servers"] ~ div
-{
-  /* FIXME: Localized string and bottom is broken */
-  position: absolute;
-  bottom: 0;
-  display: none;
-}
-
-/* to show */
-div[class^="scroller-"] div[class^="tutorialContainer-"]
-{
-  /* FIXME: goto FIXME above */
-  display: unset;
-  margin: 0;
-}
-
-:not([class^="listItemContents-"]) > div[class^="userInfo-"] {
-  padding-top: 48px;
-  justify-content: left;
-}
-div[class^="userInfo-"] button {
-  margin-left: 32px;
-  margin-top: -8px;
-}
-div[class^="userInfo-"] div[class^="avatar-"] {
-  top: 32px;
-}
-
-div[class^="headerTop-"] div[class^="headerText"]
-{ margin-left: 84px; }
-div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) {
-  margin-left: -8px;
-  margin-top: -8px;
-}
-
-div[class^="peopleListItem-"]
-div
-div[class^="userInfo-"] div[class^="avatar-"] {
-  top: 0;
-}
-
-div[class^="messagesWrapper-"] div {
-  scrollbar-width: thin;
-}
-
-#emoji-picker-tab-panel:not([role="dialog"]) {
-  position: absolute;
-  top: 0; bottom: 0;
-  left: 0; right: 0;
-}
-
-#emoji-picker-tab-panel
-div[class^="wrapper-"] {
-  top: 0;
-  border-radius: 5px 0 0 5px;
-}
-
-div[class^="avatarWrapper-"] {
-  margin-right: auto;
-}
-
-div[class^="radioBar-"] {
-  border: none;
-}
-
-/* rounder */
-[class^="authBox"],
-div[class^="item-"],
-div[class^="select-"],
-div[class^="popout"],
-div[class^="userPopout-"],
-div[class^="accountProfile"],
-div[class^="profileBanner"],
-div[class^="connectedAccount"],
-div[class*="fullscreenOnMobile"],
-div[class*="root"] div[class^="flex-"],
-[class*="embed"],
-div[class^="menu"],
-div[class^="messagesWrapper-"] div,
-div[class^="markup-"] pre code,
-div[class^="sidebar-"],
-div[class^="container-"],
-div[class^="chat-"]
-{
-  border-radius: 16px !important;
-}
-
-div[class^="sidebar-"]
-{
-  margin-right: 8px;
-}
-
-/* sharper */
-li[class^="channel-"],
-#channels ul li div > div[class^="content-"],
-button[class*="button"],
-[role="dialog"],
-div[class^="colorPicker"] div div[class^="saturation"] div,
-[class*="Text"], [class*="text"],
-div[class*="input"],
-input[class^="inputDefault-"],
-[class^="avatar-"],
-div[class^="role-"],
-div[class^="menu-"] div
-{
-  border-radius: 8px !important;
-}
-
-[class*="embed-"],
-div[class^="messagesWrapper-"]
-div[class*="mentioned"]
-{
-  border-top-left-radius: 4px !important;
-  border-bottom-left-radius: 4px !important;
-}
-
-/* no banners */
-  /* user popup */
-  div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 72px; }
-  div[class^="userPopout-"] div[class^="avatarWrapper"] { left: 8px; top: 16px; }
-
-  /* profile */
-  header div[class^="nameTagWithCustomStatus-"],
-  header div[class^="nameTagNoCustomStatus-"] {
-    margin-bottom: 48px;
-    margin-left:  160px;
-  }
-
-/* member list */
-aside[class^="membersWrap-"]
-{
-  min-width: 48px;
-  width: 0;
-}
-
-div[class^="children-"] div[class^="nicknames-"],
-div[class^="children-"] div[class^="topic-"]
-{
-  width: unset !important;
-  flex-grow: 0;
-}
-
-aside[class^="membersWrap-"] div[class^="content-"],
-nav[class^="privateChannels-"] div ul[class^="content-"]:only-child,
-ul[class^="emojiListRow-"]
-{
-  height: unset !important;
-  flex-grow: 0;
-}
-
-div[class^="members-"],
-div[class^="member-"],
-div[class*="root"] div[class^="flex-"] div[class^="header"]
-{
-  padding: 0;
-  flex: 0 0 100%;
-  margin-left: 0;
-}
-
-section, header,
-div[class^="content-"]::before,
-div[class^="tabBody-"]::before
-{
-  box-shadow: unset !important;
-}
-
-section div[class^="children-"]
-{
-  justify-content: center;
-}
-
-/* mobile mode */
-@media screen and (max-device-width: 600px) {
-  /* FIXME: add close buttons to emoji panel, profile */
-
-  [class^="channel-"] { max-width: unset; margin: 0 8px; }
-  [class^="layer-"] { padding: 0; margin: auto; }
-  [class^="layer-"] > [class^="container-"],
-  [class^="standardSidebarView-"] { overflow-x: scroll; }
-  [class^="base-"], [class^="contentRegion-"] { min-width: 200%; }
-  [class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); }
-  [class^="chat-"] { width: 100%; }
-  [class^="tools"] { position: unset !important; }
-
-  [class*="positionLayer-"],
-  [class*="fullscreenOnMobile"] {
-    overflow: auto;
-    max-width: 100%;
-    max-height: 100%;
-    position: absolute;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-  }
-  [class*="fullscreenOnMobile"] [class^="body"] {
-    width: 100%; height: 100%;
-  }
-
-  [class^="side-"] > [class^="item-"] {
-    margin-top: 4px !important;
-    padding: 6px 10px !important;
-  }
-
-  [class^="side-"] > [class^="item-"],
-  :not([class*="pill"]):not([class*="Pill"]) > [class*="item-"],
-  :not([class*="pill"]):not([class*="Pill"]) > [role="tab"],
-  [class^="member-"],
-  #channels li,
-  div[class^="tabBarItem-"] {
-    margin-top: 16px;
-    padding: 0 8px;
-    font-size: 11pt;
-  }
-}
-
-div[class^="tabBarItem-"] {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  margin-right: 16px;
-  padding: 0 8px;
-  margin-top: 16px;
-}
-
-[role="tab"][class*="selected-"],
-[role="tab"]:hover
-{
-  background-color: var(--background-modifier-hover);
-}
-
-div[class^="jumpToPresentBar-"] {
-  bottom: 16px;
-  padding: 0;
-}

btfl.less

@@ -0,0 +1,31 @@
+/** DisKort
+ * (c) Er2 2022 <er2@dismail.de>
+ * Zlib License
+ */
+
+@no-nitro:  true;
+
+@round:    8px;
+@rounder:  16px;
+@roundest: 24px; // text area
+
+@div-width: (@rounder / 2);
+@tab-height: 40px;
+
+// Required
+@import "src/func";
+@import "src/fixes";
+
+// Optional
+@import "src/hide";
+@import "src/nitro";
+@import "src/bd";
+
+// Style
+@import "src/materials";
+@import "src/style";
+@import "src/ui";
+@import "src/dimmer";
+@import "src/profile";
+@import "src/people";
+@import "src/settings";

js/bg.js

@@ -4,15 +4,27 @@
  */
 
 // Disable CSP
-function onHeaders(det) {
-  for (var i = 0; i < det.responseHeaders.length; i++) {
-    if (det.responseHeaders[i].name.toLowerCase() == 'content-security-policy'
-      || det.responseHeaders[i].name.toLowerCase() == 'content-security-policy-report-only'
-    ) det.responseHeaders[i].value = '';
-  }
-  return { responseHeaders: det.responseHeaders };
-}
-
 chrome.webRequest.onHeadersReceived.addListener(
-  onHeaders, {urls: ['<all_urls>']}, ['blocking', 'responseHeaders']
+  function(det) {
+    for (let head of det.responseHeaders) {
+      let n = head.name.toLowerCase();
+      if (n == 'content-security-policy' || n == 'content-security-policy-report-only'
+      ) head.value = '';
+    }
+    return { responseHeaders: det.responseHeaders };
+  },
+  {urls: ['<all_urls>']}, ['blocking', 'responseHeaders']
 );
+
+chrome.webRequest.onBeforeSendHeaders.addListener(
+  function(det) {
+    for (let head of det.requestHeaders) {
+      let n = head.name.toLowerCase();
+      if (n == 'user-agent')
+        head.value = 'DisKort/1.0 (Linux) Firefox/99.0';
+    }
+    return { requestHeaders: det.requestHeaders };
+  },
+  {urls: ['<all_urls>']}, ['blocking', 'requestHeaders']
+);
+

js/inj.js

@@ -14,5 +14,4 @@ async function inject() {
     document.head.appendChild(s);
   } catch(e) { console.error(e); }
 }
-document.addEventListener("click", inject);
 inject();

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "DisKort",
-  "version": "2.0",
+  "version": "2.0.1",
 
   "description": "Custom theme for Discord",
 

readme.org

@@ -3,22 +3,39 @@
 
 Currently it's in beta, more of design was merged into css.
 
+[[https://addons.mozilla.org/en-US/firefox/addon/diskort/][Add to Firefox]]
+
 * Installation
 
-Instruction for Firefox (may be working on Chrome with some changes).
+** Firefox
 
-Release mode:
+Firefox < 103: Highly recommend to enable backdrop-filter for acrylic.
 
-1. Run ./makeext.sh (if on Linux or macOS).
-
-   Or just pack all files as zip into ~diskort.xpi~
-2. Go to ~about:config~ and set ~xpinstall.signatures.required~ to ~false~
-3. Install extension (via ~about:addons~, drag&drop to browser, etc.).
+1. Go to ~about:config~
+2. Set ~layout.css.backdrop-filter.enabled~ and ~gfx.webrender.all~ to true.
+3. Reload Discord.
 
 Debug mode:
 
-1. Clone or unpack downloaded zip archive (easily finds).
-2. Go to ~about:debugging#/runtime/this-firefox~
+1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it.
+2. Copy btfl.css from [[https://raw.githubusercontent.com/Er2ch/diskort/main/btfl.css][GitHub]] or compile own.
+3. Go to ~about:debugging#/runtime/this-firefox~
 3. Click on *Load Temponary Add-on...*
-4. Choose any file in extension's folder.
+4. Choose any file in extension folder.
 
+** Chrome, etc.
+
+Release mode:
+
+1. Go to ~chrome://extensions/~
+2. Enable ~Developer mode~.
+3. Create own (~Pack extension~) or download [[https://gitdab.com/er2/diskort/releases][from releases]].
+4. Drag and drop ~diskort.crx~ to browser.
+
+Debug mode:
+
+1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it.
+2. Copy btfl.css from [[https://raw.githubusercontent.com/Er2ch/diskort/main/btfl.css][GitHub]] or compile own.
+3. Go to ~chrome://extensions/~
+3. Enable ~Developer mode~.
+4. Click on ~Load unpacked~ and choose extension folder.

src/bd.less

@@ -0,0 +1,81 @@
+// BetterDiscord specific things
+
+.bd-button, .bd-search-wrapper,
+.bd-changlelog-button, .bd-select-options,
+#bd-pub-button,
+{ &:extend(.round); }
+
+.bd-notice, .bd-toast,
+{ &:extend(.rounder); }
+
+.bd-toasts {
+  align-items: flex-end;
+  width: calc(100% - @roundest) !important;
+  left: 0 !important;
+}
+
+.bd-select-options {
+  max-width: max-content !important;
+}
+
+.bd-search-wrapper,
+.bd-changelog-button {
+  align-self: center;
+  margin: 0;
+  margin-right: 8px;
+}
+
+div.bd-controls {
+  column-gap: (@round / 2);
+}
+
+.butn(@norm, @hov) {
+  svg { background: @norm; }
+  &:hover svg { background: @hov; }
+}
+
+.floating-window {
+  max-width: 100% !important;
+  max-height: 100% !important;
+  .floating-window-buttons {
+    .button {
+      &:hover {
+        background: none;
+      }
+      svg {
+        color: #000;
+        &:extend(.round);
+      }
+      &.maximize-button {
+        .butn(#aaaa00, #eeee00);
+      }
+      &.close-button {
+        .butn(#aa0000, #ee0000);
+      }
+    }
+  }
+  &:extend(.round);
+}
+
+div.standardSidebarView-E9Pc3j {
+  // PluginRepo and ThemeRepo
+  div.repoList-9JnAPs > div {
+    position: absolute;
+    width: 100%;
+
+    div.repoHeader-2KfNvH {
+      & > * {
+        max-width: unset;
+      }
+      div.tabBar-2hXqzU  {
+        height: 48px;
+      }
+    }
+
+    #pluginrepo-tab,
+    #themerepo-tab {
+      max-width: unset;
+    }
+  }
+}
+

src/dimmer.less

@@ -0,0 +1,45 @@
+.theme-dimmer {
+  --header-primary:       #dedede;
+  --header-secondary:     #cacaca;
+  --text-normal:          #dcddde;
+  --text-muted:           #cbcccd;
+  --interactive-normal:   #cacaca;
+  --interactive-hover:    #dedede;
+  --interactive-active:   #dcddde;
+  --interactive-muted:    #bebebe;
+  --background-primary:   #3e3e3e;
+  --background-secondary: #2e2e2e;
+  --background-secondary-alt: #2e2e2e;
+  --background-accent:    #4f545c;
+  --background-floating:  #18191c;
+  --background-tertiary:  #1e1e1e;
+  --input-background:     #1e1e1e;
+  color: var(--header-primary);
+
+  & .close-1mLglB {
+    color: var(--interactive-normal);
+
+    &:hover
+    { color: var(--interactive-hover); }
+  }
+}
+
+div.layer-1Ixpg3 div.theme-light,
+div.downloadApps-14IgKV {
+  &:extend(.theme-dimmer all);
+
+  div.root-g14mjS {
+    background-color: var(--background-secondary);
+  }
+
+  div.footer-31IekZ {
+    background-color: var(--background-primary);
+  }
+}
+
+div.downloadApps-14IgKV {
+  background-color: var(--background-secondary) !important;
+  h3, div.footer-2TRYcZ {
+    color: var(--header-primary);
+  }
+}

src/fixes.less

@@ -0,0 +1,99 @@
+// fix guild selector at left part
+ul[data-list-id="guildsnav"] div.scroller-3X7KbA {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden !important;
+
+  // servers
+  & > div[aria-label] {
+    overflow: hidden scroll;
+    scrollbar-width: none;
+    flex-grow: 1;
+
+    // Chrome, ugh..
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    // add button
+    & + div {
+      margin-top: 4px;
+      // all others
+      & ~ div
+      { &:extend(.hide); }
+    }
+  }
+}
+
+#channels ul {
+  height: unset !important;
+  margin-bottom: 8px;
+}
+
+div.messagesWrapper-RpOMA3 > div {
+  scrollbar-width: thin;
+}
+
+#emoji-picker-tab-panel {
+  z-index: 0;
+  &:not([role="dialog"]) {
+    // if add reaction (role=dialog), it breaks
+    position: absolute;
+    top: 0; bottom: 0;
+    left: 0; right: 0;
+  }
+  div.wrapper-22rqw6 {
+    top: 0;
+    border-radius: 8px;
+  }
+}
+
+div.fullscreenOnMobile-ixj0e3 div.flex-3BkGQD * {
+  // fix overflow
+  overflow: hidden;
+}
+
+div.templatesList-uohY49 {
+  // fix tempates list (it was removed)
+  height: 128px;
+}
+
+// Fix positioning
+div[class^="toolsContainer-"] { // in settings
+  position: fixed !important;
+  right: 21px;
+  padding: 0;
+  margin-top: 60px;
+  border-radius: 16px;
+
+  & > div {
+    position: unset !important;
+
+    div[class^="container"] > * {
+      background-color: var(--background-nested-floating);
+    }
+  }
+}
+
+div[class^="contentContainer-"] div[class*="stickyHeader-"] {
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+}
+
+// media embed fixes
+div.inlineMediaEmbed-1m3ApS {
+  width: max-content;
+}
+
+// in profile
+.warningCircleIcon-mFju_m {
+  position: fixed;
+}
+
+div.container-YkUktl div.avatarWrapper-1B9FTW {
+  margin-right: auto; // make some space after avatar (sidebar at bottom)
+  min-width: unset;
+  padding: unset;
+}
+

src/func.less

@@ -0,0 +1,70 @@
+.left-border(@r: 0) {
+  border-top-left-radius:    @r;
+  border-bottom-left-radius: @r;
+}
+
+.right-border(@r: 0) {
+  border-top-right-radius:    @r;
+  border-bottom-right-radius: @r;
+}
+
+.bottom-border(@r: 0) {
+  border-bottom-left-radius:  @r;
+  border-bottom-right-radius: @r;
+}
+
+.top-border(@r: 0) {
+  border-top-left-radius:  @r;
+  border-top-right-radius: @r;
+}
+
+.radius(@r: 0) {
+  border-radius: @r;
+}
+
+.hide {
+  all: unset    !important;
+  display: none !important;
+  width:   0    !important;
+  height:  0    !important;
+}
+
+.bot(@text: 'BOT', @height: 16px) {
+  @offset: (@height / 4);
+  display: inline-block;
+  content: @text;
+  height: @height;
+  padding: 0 @offset;
+  margin: @offset 0 0 @offset;
+  border-radius: @offset;
+  background: var(--brand-experiment);
+  color: #fff;
+  font-size: (@height - @offset);
+  line-height: ($font-size * 1.25);
+  vertical-align: top;
+}
+
+.horiz-tab(@cols: 2, @div: ~'.divider-_0um2u') {
+  @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}:empty {
+    &:extend(.hide);
+  }
+}
+
+.verify(@id) {
+  div.message-2CShn3 img.avatar-2e8lTP[src*="/@{id}/"] + .header-2jRmjb > .headerText-2z4IhQ::after
+  { .bot('✓', 16px); }
+  // Replies
+  div.repliedMessage-3Z6XBG img.replyAvatar-sHd2sU[src*="/@{id}/"] + span::after
+  { .bot('✓', 12px); }
+}
+

src/hide.less

@@ -0,0 +1,95 @@
+
+// Site
+[class*="perksContainer-"],
+[class^="DocSearch"], // Algolia, f you
+{ &:extend(.hide); }
+
+#app-mount div:not([class]) div[class=""] {
+  div:not([class]),                             // main page content
+  div div[class*="background-"],                // nitro animation at top
+  div[class^="grid-"] div[class^="animation-"], // nitro animation at bottom
+  { &:extend(.hide); }
+}
+
+// Nicks
+.username-1g6Iq1
+{ &:extend(.hide); }
+
+// Remove background (invite, login)
+[class*="artwork-"],
+div[class^="characterBackground-"] [class*="rightSplit-"],
+div[class^="art-"],
+{ &:extend(.hide); }
+
+[class^="discrimBase-"],
+div[class^="discordTag-"] [class^="username-"], // friends tab
+div[class^="nameTag-"],
+[class^="usernameInnerRow-"], // at settings
+{ &:extend(.hide); }
+
+// Suggestions
+button[class*="followButton-"], // at top in channels
+[class^="nowPlaying"], // in friends tab
+div[class^="threadSuggestionBar-"], // create thread because many replies
+div[class^="welcomeCTA-"], // wave to say hi on server
+.divider-IqmEqJ .content-3spvdd, // date in divider
+.spine-29OFwR, // threads svg
+.mainContent-20q_Hp .subtitle-3PyFgf, // forum subtitle
+.scrollerInner-2PPAp2 div.box-2iMsQm, // start the conversation in forum
+
+div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc.
+h2[class^="privateChannelsHeaderContainer"], // direct messages label
+
+div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are really useless
+
+{ &:extend(.hide); }
+
+// Emoji picker
+#gif-picker-tab, #sticker-picker-tab,
+#emoji-picker-tab-panel
+ div[class^="emojiPicker-"]
+ > div[class^="header-"],
+nav[class^="nav-"], // breaks emoji panel, fixed at fixes.less
+{ &:extend(.hide); }
+
+// Search
+nav > [class^="searchBar-"], // in dm
+[role^="tab"] > [class^="searchBar-"], // in tabs
+div[class^="toolbar-3_"] > :nth-child(3)
+ ~ *:not([class^="search-"]), // remove after 3 elements except search
+{ &:extend(.hide); }
+
+// Text area
+div.channelTextArea-1FufC0 {
+  div.buttons-uaqb-5 { // buttons
+    & > button // gift button, f you
+    { &:extend(.hide); }
+
+    & > div.expression-picker-chat-input-button {
+      &:not(:nth-child(4)) // except emoji (and send button, if exists)
+      { &:extend(.hide); }
+    }
+  }
+  div.scrollableContainer-15eg7h
+   div.divider-2rZFJK // breaks redesigned text area
+  { &:extend(.hide); }
+}
+
+// Other
+div[class^="autocompleteShadow-"], // bugged
+[class^="unreadPill-"], // NEW at right, not needed
+div[class^="overviewSidebar-"], // at community creation, not needed
+
+form::before, // message input shadow
+div[class^="children-"]::after, // shadow at title
+
+// banners are more buggy every day so it is disabled since now
+.bannerSVGWrapper-qc0szY,
+[class^="bannerContainer-"],
+[class*="banner-"],
+{ &:extend(.hide); }
+
+.container-3wLKDe {
+  background: unset !important;
+}
+

src/materials.less

@@ -0,0 +1,118 @@
+// Mica-like material from Windows 11
+
+[class^="sidebar-"] {
+  &, & > nav {
+    background-color: transparent;
+  }
+
+  & > nav,
+  div[class*="scroller"] {
+    .top-border(@rounder);
+  }
+
+  div[class*="scroller"] {
+    background-color: var(--background-secondary);
+  }
+
+  nav[class^="private"] {
+    &::before {
+      content: "Discord";
+      color: var(--header-primary);
+      margin: ((48px - 20px) / 2) 16px; // 20px is line-height
+      font-size: 15px;
+      line-height: 20px;
+      font-weight: 500;
+      font-family: var(--font-display);
+    }
+  }
+
+  section { // bottom panel
+    .bottom-border(@rounder);
+  }
+}
+
+div[class^="base-"] > div[class^="content-"] > div[class^="container"],
+div[class^="chat-"]
+{
+  background-color: unset;
+  & > div {
+    background-color: var(--background-primary);
+  }
+}
+
+[class^="sidebar"] header,
+[class^="chat"] > section:not([class^="chat"]),
+[class^="container-"] > section {
+  background-color: var(--background-tertiary) !important;
+}
+
+@keyframes glow {
+  from { box-shadow: 0 0 2px 4px var(--interactive-normal); }
+  to   { box-shadow: 0 0 1px 2px var(--interactive-muted); }
+}
+
+[class^="item-"] {
+  &[class*="focused-"] {
+    background-color: var(--text-muted);
+    color: var(--interactive-active);
+    animation: glow 0.7s linear infinite alternate;
+  }
+}
+
+// Acrylic
+.acrylic {
+  --acrylic-blur: @round;
+  --acrylic-color: var(--background-secondary-alt);
+  --acrylic-opacity: 50%;
+
+  &, & > *, div[class^="body"] {
+    background: unset;
+  }
+
+  &::before, &::after {
+    .radius(inherit);
+    position: absolute;
+    top: 0; bottom: 0;
+    left: 0; right: 0;
+    content: "";
+    z-index: -1;
+  }
+
+  &::before {
+    backdrop-filter: blur(var(--acrylic-blur)) saturate(125%);
+  }
+  &::after {
+    background-color: var(--acrylic-color);
+    background-image: url(data:image/png;base64,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);
+    opacity: var(--acrylic-opacity);
+  }
+}
+
+// Acrylic patches
+div[class^="layers-"] {
+  & > div[class*="baseLayer"] {
+    opacity: 1 !important;
+  }
+
+  & > div[class^="layer"]:not([class*="baseLayer"]) {
+    div[class*="View-"] {
+      --acrylic-color: var(--background-primary);
+      --acrylic-opacity: 80%;
+    }
+    &, & > div[class*="View-"], div[class*="scroller"] {
+      background: unset;
+    }
+  }
+}
+
+div[class^="header-"],
+div[class^="title"],
+div[class^="channelTextArea-"],
+div[class^="quickswitcher-"] div[class^="scroll"],
+div[class^="focusLock-"] > div,
+div[class^="avatar-"],
+{
+  background: unset !important;
+  border-color: transparent;
+  scrollbar-color: var(--scrollbar-auto-scrollbar-color-track) transparent;
+}

src/nitro.less

@@ -0,0 +1,52 @@
+
+.nitroblock() when (@no-nitro = true) {
+
+.nitro { &:extend(.hide); }
+
+[class^="marketing"],
+[class*="tier"],
+[class*="perks-"],
+[class*="nitro"],
+[class^="upsell"],
+[class*="Upsell"],
+[class^="availabilityIndicator-"],
+div[class^="serverBoostTabItem-"],
+div[class*="hero"],
+div[class*="premium"],
+div[id*="premium"],
+div[class*="goal"],
+button[class^="shinyButton"],
+[class*="giftButton"],
+span[class^="questionMark-"], // at tag change
+div[class^="characterCount-"] div[class^="root-"], // at many characters
+[class^="clickableSticker-"], // stickers
+nav[class^="privateChannels-"] div div // Nitro tab at DM
+ [data-list-item-id$="nitro"],
+#account-style-your-profile,
+{ &:extend(.nitro); }
+
+#channels > ul {
+  & > div[aria-hidden="true"],
+  div[class^="container-"] {
+    // boosts
+    &:extend(.nitro);
+  }
+
+  div[class^="container-"] + li {
+    // space
+    padding-top: 0;
+  }
+}
+
+nav div[class^="animatedContainer-"] {
+  background: unset;
+  div[class^="bannerImage-"]::before {
+    background: unset !important;
+  }
+  [class^="bannerImg-"]
+  { &:extend(.nitro); }
+}
+
+}
+.nitroblock();
+

src/people.less

@@ -0,0 +1,23 @@
+
+.membersGroup-2eiWxl // groups (roles)
+{ &:extend(.hide); }
+
+.membersWrap-3NUR2t {
+  // make it shorter
+  &, div.members-3WRCEx {
+    min-width: 48px;
+    width: 0;
+    padding-bottom: 0;
+  }
+
+  // remove fixed height
+  div.content-2a4AW9 {
+    height: unset !important;
+    margin-bottom: 64px; // omg I love discock
+  }
+
+  div.member-2gU6Ar {
+    padding: 0;
+    margin-left: 0;
+  }
+}

src/profile.less

@@ -0,0 +1,216 @@
+
+.profile() when (@no-nitro = true) {
+  [class^="botTagVerified-"],
+  [class^="badgeList-"], // modal profile page
+  { &:extend(.nitro); }
+}
+.profile() {
+  div[class^="listItemContents-"] div[class^="userInfo"] {
+    padding-top: 0;
+    div[class^="avatar-"] {
+      top: 0;
+    }
+  }
+
+  div.customStatus-3Bvsdb,
+  div.memberSinceContainer-3biwiY {
+    display: flex;
+    justify-content: center;
+  }
+
+  // fixes
+  div.section-3FmfOT.section--1D3ev {
+    padding: 12px;
+  }
+  div.overlayBackground-1KgwVi {
+    margin: 24px 0 0 0;
+//    padding-right: 8px;
+    background: none;
+
+    & > div.section-3FmfOT:first-child {
+      // nick
+      margin: 0 auto;
+      padding: 4px 0;
+    }
+
+    div.scroller-1jBQYo {
+      display: grid;
+      h3
+      { &:extend(.hide); }
+      & > .section-3FmfOT:nth-child(2) {
+        order: -1;
+      }
+    }
+
+    .customizationSection-IGy2fS .userPopoutInner-1hXSeY & {
+      // in settings
+      padding-right: 0;
+      margin-top: -8px;
+    }
+  }
+  div.status-b9jLr4 {
+    position: relative;
+    top: -24px;
+    left: 56px;
+  }
+
+  .profileBadges-31rDHI {
+    background: unset;
+    justify-content: left;
+    position: absolute;
+    right: 0;
+    left: 8px;
+  }
+
+  div.avatarWrapper-3y0KZ1,
+  div.avatarUploader-CHGwK7 {
+    position: relative;
+    left: 0;
+    margin: 0 auto;
+  }
+
+  div.imageUploaderInner-IIRaFr {
+    background-color: unset;
+  }
+
+  div.avatarPositionPremiumBanner-2nq2Fy {
+    top: 24px;
+  }
+}
+.profile();
+
+div[class^="pencilContainer-"] {
+  z-index: 1; // fix edit button in profile
+}
+
+// Profile card in settings
+div.accountProfileCard-lbN7n- {
+  div.field-21XZwa:first-child {
+    height: 0;
+    div.constrainedRow-3y91Xf
+    { &:extend(.hide); }
+    button {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+    }
+  }
+
+  div.userInfo-regn9W {
+    justify-content: left;
+    padding-top: 24px;
+    height: 56px;
+
+    button {
+      margin-left: 32px;
+      margin-top:  -8px;
+    }
+  }
+
+  div.avatar-3mTjvZ {
+    background-color: var(--background-tertiary) !important;
+    .radius();
+    border-bottom-right-radius: 16px;
+    top: 0;
+  }
+
+  div.container-1gYwHN {
+    width: max-content;
+    margin-top: 8px;
+    margin-left: -22px;
+    background-color: var(--background-tertiary);
+    .radius() !important;
+    border-bottom-right-radius: 16px !important;
+    height: 32px;
+    padding-top: 4px;
+    padding-right: 4px;
+  }
+}
+
+// Redesigned profile page
+div.root-8LYsGj {
+  flex-direction: row;
+
+  div.topSection-13QKHs {
+    width: 260px;
+    margin: 24px;
+
+    div.avatar-3QF_VA {
+      top: 0; left: 0;
+      position: relative;
+    }
+
+    div.headerTop-1PNKck {
+      position: unset;
+      justify-content: left;
+      margin-top: 8px;
+    }
+
+    div.nameTag-H6kSJ0 {
+      width: 64px;
+      position: absolute;
+      margin-top: -64px;
+      margin-left: 130px;
+    }
+
+    div.customStatus-kFfkj5 {
+      margin-top: 16px;
+      padding: 0;
+    }
+  }
+
+  .connectedAccountsColumn-1zdyyx + .connectedAccountsColumn-1zdyyx
+  { margin: 0; }
+
+  .connectedAccounts-2R5M4w {
+    flex-direction: column;
+  }
+
+  div.body-1Ukv50 {
+    border: none;
+    height: 370px;
+    max-width: 100%;
+    & > *
+    { padding: 0 !important; }
+  }
+  div.tabBarContainer-sCZC4w {
+    border: none;
+    padding: 0;
+  }
+  div.tabBar-2hXqzU {
+    flex-direction: column;
+    height: unset;
+    margin: 8px;
+  }
+
+  div.tabBarItem-30Te4- {
+    margin-right: 0;
+    border-bottom: unset;
+    &:hover, &.selected-g-kMVV {
+      border-right: 2px solid var(--interactive-active) !important;
+    }
+    .radius((@round / 4)) !important;
+    .left-border(@round)  !important;
+  }
+}
+
+#account {
+  max-width: unset;
+  width: 100%;
+}
+
+#account-info {
+  div.headerTop-3GPUSF {
+    padding-top: 108px;
+  }
+  div.profileBadges-2pItdR {
+    width: max-content;
+    .radius(@round);
+    padding: 2px;
+  }
+}
+
+#account-avatar div.avatarWrapperNormal-ahVUaC {
+  left: 35%;
+}
+

src/settings.less

@@ -0,0 +1,252 @@
+
+div.keybind-13vtq8, // true must know it!
+div.socialLinks-3ywLUf, // in settings at end
+{ &:extend(.hide); }
+
+// New sidebar in settings
+div.standardSidebarView-E9Pc3j {
+  flex-direction: column;
+
+  div.sidebarRegion-1VBisG {
+    overflow: hidden;
+    flex-basis: unset; // bugfix to normalize height
+    flex-grow: 0; // fix scaling
+
+    div.header-2Kx1US,
+    div.separator-2wx7h6
+    { 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.contentRegion-3HkfJJ {
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    * {
+      max-width: 100%;
+    }
+  }
+}
+
+#my-account-tab > div {
+  .horiz-tab();
+  & > div:first-child {
+    width: 50%;
+    min-width: 512px;
+  }
+}
+
+// TrY AnImAtEd AvAtAr, eh... f you
+div.optionBox-1UOevl:nth-child(2)
+{ &:extend(.nitro); }
+
+#profile-customization-tab {
+  div.baseLayout-8AMrwn {
+    & > div:not([class]) {
+      width: 100%;
+
+      div.customizationSection-IGy2fS {
+        &:nth-child(2), &:nth-child(3)
+        { &:extend(.nitro); }
+      }
+    }
+  }
+
+  div.bioTextArea-dDGOeC {
+    height: 30vh;
+  }
+}
+
+#privacy-\&-safety-tab {
+  .marginBottom40-fvAlAV {
+    &:first-child div[role=radiogroup],
+    { .horiz-tab(3); }
+    &:nth-child(2)
+    { .horiz-tab(); }
+
+    &:nth-child(2) > h5
+    { min-width: 100%; }
+
+    &:last-child
+    { &:extend(.hide); }
+  }
+}
+
+#connections-tab div.children-1xdcWE {
+  flex-direction: row;
+  flex-flow: row wrap;
+
+  div.connectionsContainer-3wRUc6 {
+    row-gap: 8px;
+  }
+
+  div.connectContainer-1hylYM,
+  div.accountList-Wii_T5 {
+    margin-right: @div-width;
+    width: 33%;
+
+    // auto detect
+    & + div.container-1zDvAE {
+      order: -1;
+      width: 100%;
+    }
+  }
+  div.connectionList-11Q_X- {
+    flex-grow: 1;
+  }
+
+  div.connection-YOVI9j {
+    height: max-content;
+  }
+}
+
+#appearance-tab div.children-1xdcWE {
+  .horiz-tab();
+
+  & > div:first-child {
+    width: 100%;
+  }
+
+  div.marginTop20-2T8ZJx > div.slider-1NC-Gf {
+    margin-top: 28px;
+  }
+}
+
+#accessibility-tab div.children-1xdcWE {
+  & > 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.children-1xdcWE {
+  div:nth-child(6)
+  { &:extend(.hide); }
+}
+
+#language-tab div.children-1xdcWE {
+  div div > div[role="radiogroup"] {
+    .horiz-tab(3);
+  }
+}
+
+#streamer-mode-tab div.children-1xdcWE {
+  .horiz-tab();
+  & > * {
+    &:nth-child(1),
+    &:nth-child(2)
+    { width: 100%; }
+  }
+  h5
+  { display: none; }
+}
+
+// Server settings
+#overview-tab > div > div.children-1xdcWE > 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);
+    div.divider--oiTeJ {
+      padding: 0;
+      margin: 0;
+      border: none;
+    }
+    & > div:first-child div.flexChild-3PzYmX
+    { &:extend(.hide); }
+  }
+}
+
+#integrations-tab > div:nth-child(2) {
+  .horiz-tab();
+
+  img.iconWrapper-1sOtkE {
+    width: unset;
+  }
+
+  button[class^="createButton-"],
+  [class^="sectionHeader-"],
+  & > div:first-child {
+    width: 100%;
+    margin-bottom: @div-width * 3;
+  }
+}
+
+#widget-tab div.children-1xdcWE {
+  &, & > div.infoWrapper-1HtsGy {
+    .horiz-tab();
+    row-gap: @gap * 2;
+  }
+
+  img.infoItem-Q4HWUe
+  { &:extend(.hide); }
+
+  div.infoItem-Q4HWUe,
+  & > div:first-child,
+  & > div:last-child {
+    width: 100%;
+    flex-basis: unset;
+  }
+}
+
+#moderation-tab > div > div.children-1xdcWE {
+  div[role="radiogroup"] {
+    .horiz-tab();
+  }
+}
+
+div[data-list-id="audit-log"] {
+  .horiz-tab();
+  & > * {
+    height: min-content;
+  }
+}
+
+#discovery-tab > div.container-26RXEg {
+  .horiz-tab();
+  // disabledButtonWrapper-2Oz3aY
+  span[class*="Button"] {
+    align-self: start;
+  }
+}

src/style.less

@@ -0,0 +1,284 @@
+.round   { .radius(@round) !important; }
+.rounder { .radius(@rounder) !important; }
+
+// Space between sidebar and chat
+div[class^="sidebar-"] {
+  margin-right: @div-width;
+}
+
+// Old-school
+
+div[class^="repliedMessage-"] {
+  &::before {
+    margin: 0;
+    border: none;
+    width: 4px;
+    .radius(2px);
+    background: var(--interactive-muted);
+    left: 0; right: 100%;
+    top: 0; bottom: 0;
+  }
+  & > :first-child {
+    margin-left: 16px;
+  }
+}
+
+div.role-2TIOKu {
+  &:extend(.rounder);
+  padding: 0;
+  // TODO: fix this because roles looks sadly
+//  border-width: 2px;
+//  border-style: solid;
+}
+
+article[class^="embed"] {
+  .left-border(3px);
+  max-width: unset;
+  background: unset;
+}
+
+// Round
+  // UI parts
+  li[class^="channel-"],
+  [class^="avatar-"],
+  [role="dialog"],
+  div[class^="menu-"] [role="menuitem"],
+  div[class^="colorPicker"] div div[class^="saturation"] div,
+  #channels ul li div > div[class^="content-"],
+
+  // Input
+  div[class^="searchBox-"],
+  [class*="input"],
+  input[class^="inputDefault-"],
+  div[class*="TextArea"],
+  textarea,
+{ &:extend(.round); }
+
+// Rounder
+  // Popouts
+  [class^="authBox"], // login
+  [role="menu"],
+  div[class*="popout"],
+  div[class*="Popout"],
+  div[class*="fullscreenOnMobile"],
+  div[class*="root"] div[class^="flex-"],
+
+  // UI parts
+  div[class^="chat-"],
+  div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar
+  [class^="resultsGroup-"], // search
+  div[class^="auditLog-"],
+  div[class^="auditLog-"] > div,
+
+  div[class^="connectedAccount-"], // in profile
+  div[class^="profileBanner"],
+  div[class^="accountProfile"],
+
+  div[class^="quickswitcher-"] input,
+
+  div[class^="autocomplete-"], // input
+  div[class^="pictureInPicture-"],
+
+  div[class^="select-"],
+  div[class^="messagesWrapper-"] div:not([class*="Inner"]):not([class^="filename"]),
+
+  div[class^="layer-"] > div[class^="container-"],
+  div[class^="base-"] div[class^="content-"] > div:nth-child(2),
+  div[class^="guildList-"] div[class^="container-"],
+  div[class^="chat-"] > div[class^="content-"],
+  div.focusLock-2tveLW .wrapper-2bCXfR,
+  div.avatarWrapper-1B9FTW,
+{ &:extend(.rounder); }
+
+div[class^="auditLog"] {
+  div[class^="headerExpanded-"]
+  { .bottom-border(); }
+  div[class^="changeDetails-"]
+  { .top-border(); }
+}
+
+div.content-2a4AW9
+div.message-2CShn3.mentioned-Tre-dv
+{ .left-border(4px) !important; }
+
+// no shadows
+section, header,
+div[class^="content-"]::before,
+div[class^="tabBody-"]::before
+{ box-shadow: unset !important; }
+
+// Pins
+div[class^="messageGroupWrapper-"] {
+  border: none;
+  background: unset;
+}
+
+// Redesigned text input
+
+div[class^="attachedBars-"],
+div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"]) {
+  bottom: 16px;
+  padding: 0;
+}
+
+div[class^="attachedBars-"]
+{ position: relative; }
+
+div.channelTextArea-1VQBuV {
+  &.channelTextAreaDisabled-1p2fQv
+  .attachButton-1ijpt9
+  { &:extend(.hide); }
+
+  div.scrollableContainer-15eg7h {
+    background-color: unset;
+    opacity: 1;
+  }
+
+  .attachButton-1ijpt9,
+  .textArea-2CLwUE,
+  .buttons-uaqb-5 {
+    background-color: var(--background-secondary);
+    .radius(@roundest) !important;
+    margin: 0;
+  }
+
+  div.inner-NQg18Y {
+    padding: 0;
+  }
+
+  .attachButton-1ijpt9 {
+    padding: 8px;
+    width: auto;
+    height: 24px;
+    box-sizing: content-box;
+    margin-right: 8px;
+
+    .icon-2P5yLI {
+      padding: 0;
+    }
+  }
+
+  .textArea-2CLwUE {
+    &:not(.textAreaDisabled-10ObTX)
+    { .right-border() !important; }
+
+    div > * {
+      left: (@roundest / 2);
+    }
+  }
+
+  .buttons-uaqb-5 {
+    height: auto; // to match input height
+    .left-border() !important;
+    & > * {
+      align-items: center; // center buttons
+    }
+  }
+}
+
+[role="menu"],
+[role="dialog"]:not(.focusLock-2tveLW):not(#emoji-picker-tab-panel),
+div[class^="focusLock-"] > div:not(.carouselModal-1eUFoq),
+div.focusLock-2tveLW .wrapper-2bCXfR,
+div[class^="channelHeader-"],
+div[class^="layers-"] > div[class^="layer-"] div[class*="View-"],
+div[class*="stickyHeader-"],
+div.emojiPicker-6YCk8a,
+div.header-1XpmZs,
+div.popoutContainer-2wbmiM,
+div.userPopoutOuter-3AVBmJ,
+{
+  &:extend(.acrylic all);
+}
+
+.wrapper-1NNaWG::after {
+  display: none;
+}
+
+// status picker
+#account-status-picker + div.layer-2aCOJ3 {
+  div.submenu-1apzyU {
+    top: -8px;
+  }
+  div.scroller-1bVxF5 {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+
+    .separator-1So4YB
+    { &:extend(.hide); }
+
+    & > div.item-1OdjEX {
+      padding: 8px;
+      margin: 0;
+
+      & > div {
+        padding: 0;
+
+        & > div.status-qmUf7L,
+        & > div.description-22_U3B,
+        { &:extend(.hide); }
+      }
+    }
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-left: 2px;
+    }
+  }
+}
+
+// new invite with splash style
+div[id^="message-accessories-"] {
+  & > div[class^="messageAttachment-"] {
+    width: 100%;
+  }
+  & > div[class^="wrapper-"] {
+    position: relative;
+    div[class^="inviteSplash-"] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      filter: brightness(50%);
+
+      & ~ * {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+div.saveNoticeContainer-3t-pI1 {
+  width: calc(100% - 60pt);
+}
+
+#channels ul {
+  & > li.containerDefault-YUSmu3,
+  & > li.container-1Bj0eq {
+    margin-left: @round;
+  }
+  div.content-1gYQeQ {
+    margin: 0;
+  }
+  .unread-36eUEm {
+    left: -@round;
+  }
+}
+
+.spoilerText-27bIiA {
+  &.hidden-3B-Rum {
+    &:extend(.acrylic all);
+    position: relative;
+    background: unset !important;
+    user-select: none;
+  }
+  .inlineContent-2YnoDy {
+    opacity: 1 !important;
+    margin: 0 (@round / 2);
+    z-index: -2;
+    position: relative;
+  }
+}
+

src/ui.less

@@ -0,0 +1,112 @@
+// UI element changes
+
+// slider
+div[class^="slider-"] {
+  div[class^="track-"] {
+    div[class^="grabber-"] {
+      @half: (@rounder / 2);
+      position: relative;
+      width: @rounder;
+      height: @rounder;
+      border: none;
+      .radius(@half);
+      top: @half * 1.5;
+      margin-top: unset;
+      margin-left: -@half;
+    }
+  }
+}
+
+// tabs
+div[role="tab"],
+div.tabBarItem-30Te4- {
+  .top-border(16px)   !important;
+  .bottom-border(4px) !important;
+  margin: 0;
+  margin-top: 8px;
+  margin-right: 16px;
+  padding: 4px 8px;
+
+  &:hover,
+  &.selected-g-kMVV {
+    background-color: var(--interactive-muted) !important;
+    color: var(--text-normal) !important;
+  }
+
+  div.textBadge-1fdDPJ {
+    margin-left: 4px;
+  }
+}
+
+// slider
+div.bd-switch-body,
+div[class^="container-"] {
+  &:extend(.rounder);
+
+  &[class*="disabled"] {
+    cursor: not-allowed;
+  }
+
+  & > svg[class*="slider"] {
+    width: 16px  !important;
+    height: 16px !important;
+    .radius(50%);
+    margin: 4px 8px;
+    margin-right: 0;
+    background-color: white;
+
+    & > * {
+      display: none;
+    }
+  }
+}
+
+div[class^="radioBar-"] {
+  border: none;
+}
+
+div[class^="card-"],
+div.bd-server-card {
+  & > div[class*="header"],
+  & > div[class*="Header"] {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    div[class^="coverWrapper"],
+    div[class^="splash"] {
+      filter: brightness(0.5);
+    }
+    .bd-server-icon,
+    & > div[class*="icon"],
+    & > div[class*="Icon"] {
+      position: relative;
+      width: 42px;
+      height: 42px;
+      overflow: hidden;
+      padding: 5px;
+    }
+  }
+  & > div[class*="info"],
+  & > div[class*="Info"] {
+    margin-top: 84px;
+  }
+}
+
+// Round
+div[class^="tabBarItem-"],
+div[class^="checkbox"],
+button[class*="button"],
+code.inline,
+{ &:extend(.round); }
+
+// Rounder
+div[class^="markup-"] pre code, // ```code```
+span[class^="spoiler"],
+span.mention,
+[class^="item-"], // in settings
+div[class^="group-"], // radiogroup
+div[class*="card"],
+div[class^="categoryItem-"] > *, // in Discovery
+div[class^="content-"] img[class^="image-"],
+{ &:extend(.rounder); }