new branch

.gitignore

@@ -0,0 +1,6 @@
+out
+node_modules
+package-lock.json
+
+diskort.xpi
+btfl.css

Makefile

@@ -0,0 +1,31 @@
+
+OSTYLES = $(wildcard src/style/*.less)
+OSCRIPTS= $(wildcard src/script/*.coffee)
+
+STYLES  = $(OSTYLES:src/style/%.less=out/css/%.css)
+SCRIPTS = $(OSCRIPTS:src/script/%.coffee=out/js/%.js)
+
+all: prepare build
+build: style script
+dist: xpi
+
+style:  out/css/base.css
+script: $(SCRIPTS)
+
+prepare:
+	npm i lessc coffeescript
+	mkdir -p out
+	mkdir -p out/css
+	mkdir -p out/js
+
+diskort.xpi xpi firefox: build
+	cp manifest.json out/
+	cd out; zip -r diskort.xpi manifest.json css js
+	@echo "goto about:config and set xpinstall.signatures.required to false"
+	@echo "then goto about:addons -> settings icon below search -> install add-on from file"
+
+out/css/base.css: src/style/base.less $(OSTYLES)
+	npx lessc $< > $@
+
+out/js/%.js: src/script/%.coffee
+	npx coffee --no-header -bco $@ $<

license

@@ -0,0 +1,19 @@
+Zlib License
+
+Copyright (c) 2022 Er2 <er2@dismail.de>
+
+This software is provided 'as-is', without any express or implied
+warranty. In no event will the authors be held liable for any damages
+arising from the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not
+   claim that you wrote the original software. If you use this software
+   in a product, an acknowledgement in the product documentation would be
+   appreciated but is not required.
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+3. This notice may not be removed or altered from any source distribution.

manifest.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 2,
+  "name": "DisKort",
+  "version": "3.0.0",
+
+  "description": "Custom theme for Discord",
+
+  "icons": {
+    "48": "ext.png"
+  },
+
+  "permissions": [
+    "https://raw.githubusercontent.com/Er2ch/diskort/*",
+    "*://discord.com/",
+    "webRequest",
+    "webRequestBlocking"
+  ],
+
+  "background": {
+    "scripts": ["js/bg.js"],
+    "persistent": true
+  },
+
+  "content_scripts": [{
+    "matches": ["*://discord.com/*"],
+    "js": ["js/inj.js"]
+  }],
+
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{7e79557e-5773-4be8-b0e2-9e35b34b692c}"
+    }
+  }
+}

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "diskort",
+  "version": "3.0.0",
+  "description": "Custom script and style engine for Discord",
+  "dependencies": {
+    "coffeescript": "^2.6.1",
+    "lessc": "^1.0.2"
+  }
+}

readme.org

@@ -0,0 +1,40 @@
+
+*DisKort* - extension for browser which decreases Discord elements.
+
+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
+
+** Firefox
+
+Highly recommend to enable backdrop-filter for acrylic.
+1. Go to ~about:config~
+2. Set ~layout.css.backdrop-filter.enabled~ and ~gfx.webrender.all~ to true.
+3. Reload Discord.
+
+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 ~about:debugging#/runtime/this-firefox~
+3. Click on *Load Temponary Add-on...*
+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/script/bg.coffee

@@ -0,0 +1,28 @@
+### DisKort
+# (c) Er2 2022
+# Zlib License
+###
+
+# Disable CSP
+chrome.webRequest.onHeadersReceived.addListener(
+  (det) ->
+    for head from det.responseHeaders
+      n = head.name.toLowerCase()
+      head.value = '' if n is 'content-security-policy' or n == 'content-security-policy-report-only'
+    { responseHeaders: det.responseHeaders }
+
+  , urls: ['<all_urls>']
+  , ['blocking', 'responseHeaders']
+)
+
+# Simulate user-agent
+chrome.webRequest.onBeforeSendHeaders.addListener(
+  (det) ->
+    for head from det.requestHeaders
+      n = head.name.toLowerCase()
+      head.value = 'DisKort/3.0 (Linux) Firefox/99.0' if n is 'user-agent'
+    { requestHeaders: det.requestHeaders }
+
+  , urls: ['<all_urls>']
+  , ['blocking', 'requestHeaders']
+)

src/script/inj.coffee

@@ -0,0 +1,23 @@
+### DisKort
+# (c) Er2 2022
+# Zlib License
+###
+
+### Base URL
+# Source code is here: https://gitdab.com/er2/diskort
+# / at end is required
+###
+base = 'https://raw.githubusercontent.com/Er2ch/diskort/main/'
+
+inject = ->
+  try
+    resp = await fetch base + 'btfl.css'
+    text = await resp.text()
+    s = document.createElement 'style'
+    s.innerHTML = text
+    document.head.appendChild s
+  catch e
+    console.error e
+
+# Call it!
+inject()

src/style/base.less

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

src/style/dimmer.less

@@ -0,0 +1,47 @@
+.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);
+
+  & [class*="close-"] {
+    color: var(--interactive-normal);
+
+    &:hover
+    { color: var(--interactive-hover); }
+  }
+}
+
+div[class^="layer-"] div.theme-light,
+div[class^="downloadApps-"] {
+  &:extend(.theme-dimmer all);
+
+  div[class*="root-"] {
+    background-color: var(--background-secondary);
+  }
+
+  div[class*="footer-"] {
+    background-color: var(--background-primary);
+  }
+}
+
+div[class^="downloadApps"] {
+  & {
+    background-color: var(--background-secondary) !important;
+  }
+  h3, div[class*="footer-"] {
+    color: var(--header-primary);
+  }
+}

src/style/fixes.less

@@ -0,0 +1,72 @@
+// fix guild selector at left part
+ul[data-list-id="guildsnav"] div[class^="scroller-"] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden !important;
+
+  // servers
+  & > div[aria-label] {
+    overflow: hidden scroll;
+    scrollbar-width: none;
+    flex-grow: 1;
+
+    // add button
+    & + div {
+      margin-top: 4px;
+      // all others
+      & ~ div
+      { &:extend(.hide); }
+    }
+  }
+}
+
+div[class^="messagesWrapper-"] div {
+  scrollbar-width: thin;
+}
+
+#emoji-picker-tab-panel {
+  &:not([role="dialog"]) {
+    // if add reaction (role=dialog), it breaks
+    position: absolute;
+    top: 0; bottom: 0;
+    left: 0; right: 0;
+  }
+
+  div[class^="wrapper-"] {
+    top: 0;
+    border-radius: 5px 0 0 5px; // for add reaction
+  }
+}
+
+div[class*="fullscreenOnMobile"] div[class^="flex"] * {
+  // fix overflow
+  overflow: hidden;
+}
+
+div[class*="templatesList-"] {
+  // 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;
+}

src/style/func.less

@@ -0,0 +1,31 @@
+.left-border(@r: 0) {
+  border-top-left-radius:    @r !important;
+  border-bottom-left-radius: @r !important;
+}
+
+.right-border(@r: 0) {
+  border-top-right-radius:    @r !important;
+  border-bottom-right-radius: @r !important;
+}
+
+.bottom-border(@r: 0) {
+  border-bottom-left-radius:  @r !important;
+  border-bottom-right-radius: @r !important;
+}
+
+.top-border(@r: 0) {
+  border-top-left-radius:  @r !important;
+  border-top-right-radius: @r !important;
+}
+
+.radius(@r: 0) {
+  border-radius: @r !important;
+}
+
+.hide {
+  all: unset    !important;
+  display: none !important;
+  width:   0    !important;
+  height:  0    !important;
+}
+

src/style/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); }
+}
+
+// Remove background (invite, login)
+[class*="artwork-"],
+div[class^="characterBackground-"] [class*="rightSplit-"],
+div[class^="art-"],
+{ &:extend(.hide); }
+
+// Nicks
+[class^="username-"] {
+  li[class^="messageListItem-"]
+   [class*="cozyMessage-"] &,   // inside message
+  :not([class^="headerText-"])
+   > div[class*="nameTag-"] &, // outside message
+  { &: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
+div[role="separator"]:not([id$="new-messages-bar"]), // aren't needed
+
+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[class^="channelTextArea-"] {
+  div div > div[class^="buttons-"] { // button
+    & > 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[class^="scrollableContainer-"]
+   div[class^="divider-"] // 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
+{ &:extend(.hide); }
+
+div[class^="base-"] div[class^="children-"] {
+  // channel title
+  div[class^="divider-"] {
+    &, & ~ div:not([class^="tabBar-"]),
+    { &:extend(.hide); }
+  }
+}

src/style/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 {
+    border-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/style/mobile.less

@@ -0,0 +1,53 @@
+// TODO: comment this
+
+@media screen and (max-device-width: 800px) {
+  /* FIXME: add close buttons to emoji panel */
+
+  [class^="channel-"] { max-width: unset; margin: 0 8px; }
+  [class^="layer-"] { padding: 0; margin: auto; }
+  [class^="layer-"] > [class^="container-"],
+  [class^="standardSidebarView-"] { overflow-x: scroll; }
+  [class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); }
+  [class^="chat-"] { width: 100%; }
+  [class^="tools"] { position: unset !important; }
+
+  [class*="positionLayer-"],
+  [class*="fullscreenOnMobile"] {
+    overflow: auto;
+    width: 100%; min-width: 100%;
+  }
+  [class^="positionLayer-"] {
+    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: 8px;
+    padding: 8px;
+    font-size: 11pt;
+  }
+
+  [class^="base-"],
+  [class^="contentRegion-"],
+  div[class^="sidebarRegion-"], // all in settings
+  {
+    width:     200%;
+    min-width: 200%;
+  }
+}

src/style/nitro.less

@@ -0,0 +1,44 @@
+
+.nitroblock() when (@no-nitro = true) {
+
+.nitro { &:extend(.hide); }
+
+[class^="marketing"],
+[class*="tier"],
+[class*="perks-"],
+[class*="nitro"],
+[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"],
+{ &:extend(.nitro); }
+
+#channels > ul {
+  div[class^="container-"] {
+    // boosts
+    &:extend(.nitro);
+
+    // space
+    & + li {
+      padding-top: 0;
+    }
+  }
+}
+
+}
+.nitroblock() when (@no-banner = true) {
+  [class^="bannerContainer-"],
+  [class*="banner-"]
+  { &:extend(.hide); }
+}
+.nitroblock();

src/style/people.less

@@ -0,0 +1,22 @@
+
+[class^="membersGroup-"] // groups (roles)
+{ &:extend(.hide); }
+
+[class^="membersWrap-"] {
+  // make it shorter
+  &, div[class^="members-"] {
+    min-width: 48px;
+    width: 0;
+  }
+
+  // remove fixed height
+  div[class^="content-"] {
+    height: unset !important;
+    flex-grow: 0;
+  }
+
+  div[class^="member-"] {
+    padding: 0;
+    margin-left: 0;
+  }
+}

src/style/profile.less

@@ -0,0 +1,146 @@
+
+div[class^="accountProfileCard-"] div[class^="userInfo-"] {
+  // settings
+  justify-content: left;
+  padding-top: 24px;
+  height: 56px;
+
+  button {
+    margin-left: 32px;
+    margin-top:  -8px;
+  }
+
+  div[class^="avatar-"] {
+    background-color: var(--background-tertiary) !important;
+    top: 0;
+    border-radius: 0 !important;
+    border-bottom-right-radius: 50% !important;
+  }
+}
+
+.profile() when (@no-nitro = true) {
+  [class^="botTagVerified-"],
+  [class^="badgeList-"],
+  [class^="profileBadges-"],
+  { &:extend(.nitro); }
+}
+.profile() when (@no-banner = true) {
+  div[class^="listItemContents-"] div[class^="userInfo"] {
+    padding-top: 0;
+    div[class^="avatar-"] {
+      top: 0;
+    }
+  }
+
+  div[class^="userPopout-"],
+  div[class^="profileBannerPreview-"] {
+    div[class^="avatarWrapper"] {
+      top: 8px; // fix divider bug
+    }
+
+    div[class^="headerTop-"] {
+      padding-top: 72px; // also fix divider bug
+      div[class^="headerText"] {
+        margin-left: 96px; // fix nickname
+      }
+    }
+  }
+
+  div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) {
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+.profile();
+
+// Profile card in settings
+div[class^="accountProfileCard-"] {
+  div[class^="field-"]:nth-child(1) {
+    height: 0;
+    div[class^="constrainedRow-"] {
+      display: none;
+    }
+    button {
+      top: -48pt;
+      left: 300pt;
+    }
+  }
+}
+
+div[class^="banner-"] {
+  position: absolute;
+  width: inherit;
+  max-height: 84px;
+  &:extend(.rounder);
+  &[class*="popoutBanner"] {
+    position: relative;
+    max-height: 128px;
+    .bottom-border();
+  }
+}
+
+div[class^="avatarWrapper-"] {
+  margin-right: auto; // make some space after avatar (sidebar at bottom)
+}
+
+// Redesigned profile page
+header div[class^="nameTagWithCustomStatus-"],
+header div[class^="nameTagNoCustomStatus-"] {
+  margin-bottom: 48px; // some space under avatar
+  margin-left:  160px; // after avatar, not before
+}
+
+div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="small-"] {
+  flex-direction: row;
+
+  header {
+    width: 260px;
+    margin: 24px;
+
+    div[class^="avatar-"] {
+      top: 0; left: 0;
+      position: relative;
+    }
+
+    div[class^="headerTop-"] {
+      position: unset;
+      justify-content: left;
+    }
+
+    div[class^="nameTag"] {
+      width: 64px;
+      position: absolute;
+      margin-top: -84px;
+      margin-left: 130px;
+    }
+
+    div[class^="customStatus"] {
+      margin-top: 16px;
+      padding: 0;
+    }
+  }
+  div[class^="body-"] {
+    border: none;
+    margin-left: 16px;
+    height: 370px;
+    & > *
+    { padding: 0 !important; }
+  }
+  div[class^="tabBarContainer"]
+  { border: none; }
+  div[class^="tabBar-"] {
+    flex-direction: column;
+    height: unset;
+    margin: 8px;
+  }
+
+  div[class^="tabBarItem-"] {
+    margin-right: 0;
+    border-bottom: unset;
+    &:hover, &[class*="selected-"] {
+      border-right: 2px solid var(--interactive-active) !important;
+    }
+    .top-border();
+    .left-border(@round);
+  }
+}

src/style/settings.less

@@ -0,0 +1,254 @@
+
+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;
+  }
+}

src/style/style.less

@@ -0,0 +1,149 @@
+.round   { .radius(@round); }
+.rounder { .radius(@rounder); }
+
+// Space between sidebar and chat
+div[class^="sidebar-"] {
+  margin-right: @div-width;
+}
+
+// Old-school embed
+[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^="role-"],
+  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^="container"] > div,
+  div[class^="chat-"] > div[class^="content-"],
+{ &:extend(.rounder); }
+
+div[class^="auditLog"] {
+  div[class^="headerExpanded-"]
+  { .bottom-border(); }
+  div[class^="changeDetails-"]
+  { .top-border(); }
+}
+
+div[class^="messagesWrapper-"]
+div[class^="message-"][class*="mentioned"]
+{ .left-border(4px); }
+
+// 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[class^="channelTextArea-"] {
+  & > div[class^="scrollableContainer-"] {
+    background-color: unset;
+
+    button[class^="attachButton-"],
+    div[class^="textArea-"],
+    div[class^="buttons-"] {
+      background-color: var(--background-secondary);
+      border-radius: @roundest !important;
+      margin: 0;
+    }
+
+    & > div[class^="inner-"]
+    { padding: 0; }
+
+    button[class^="attachButton-"] {
+      padding: 8px;
+      width: auto;
+      height: auto;
+    }
+
+    div[class^="textArea-"] {
+      margin-left: 8px;
+      .right-border();
+
+      div > * { left: (@roundest / 2); }
+    }
+
+    div[class^="buttons-"] {
+      height: auto; // to match input height
+      & > * {
+        align-items: center; // center buttons
+      }
+      .left-border();
+    }
+  }
+}
+
+[role="menu"],
+[role="dialog"]:not([class^="focusLock-"]),
+div[class^="focusLock-"] > div,
+div[class^="channelHeader-"],
+div[class^="layers-"] > div[class^="layer-"] div[class*="View-"],
+div[class*="stickyHeader-"],
+{
+  &:extend(.acrylic all);
+}

src/style/ui.less

@@ -0,0 +1,76 @@
+// UI element changes
+
+// slider
+div[class^="slider-"] {
+  div[class^="track-"] {
+    div[class^="grabber-"] {
+      @half: (@rounder / 2);
+      position: relative;
+      width: @rounder;
+      height: @rounder;
+      border: none;
+      border-radius: @half;
+      top: @half * 1.5;
+      margin-top: unset;
+      margin-left: -@half;
+    }
+  }
+}
+
+// tabs
+div[role="tab"],
+div[class^="tabBarItem-"] {
+  .bottom-border();
+  margin: 0;
+  margin-top: 8px;
+  margin-right: 16px;
+  padding: 4px 8px;
+
+  &:hover,
+  &[class*="selected-"] {
+    background-color: var(--interactive-muted) !important;
+    color: var(--text-normal) !important;
+  }
+}
+
+// slider
+div[class^="container-"] {
+  &[class*="disabled-"] {
+    cursor: not-allowed;
+  }
+
+  svg[class^="slider-"] {
+    width: 16px  !important;
+    height: 16px !important;
+    border-radius: 50%;
+    margin: 4px 8px;
+    margin-right: 0;
+    background-color: white;
+
+    > * {
+      display: none;
+    }
+  }
+}
+
+div[class^="radioBar-"] {
+  border: none;
+}
+
+// Round
+div[class^="tabBarItem-"],
+div[class^="checkbox"],
+button[class*="button"],
+{ &:extend(.round); }
+
+// Rounder
+div[class^="markup-"] pre code, // ```code```
+span[class^="spoiler"],
+span.mention,
+code.inline,
+[class^="item-"], // in settings
+div[class^="group-"], // radiogroup
+div[class*="card"],
+div[class^="categoryItem-"] > *, // in Discovery
+div[class^="content-"] img[class^="image-"],
+{ &:extend(.rounder); }