commit 8eac634cb8e0a1dc24fc564286b0666a1b51cf5a Author: Er2 Date: Tue Apr 12 21:36:18 2022 +0300 new branch diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ed2c1f0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +out +node_modules +package-lock.json + +diskort.xpi +btfl.css diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..a97dac0 --- /dev/null +++ b/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 $@ $< diff --git a/ext.png b/ext.png new file mode 100644 index 0000000..ca0720d Binary files /dev/null and b/ext.png differ diff --git a/license b/license new file mode 100644 index 0000000..888e15d --- /dev/null +++ b/license @@ -0,0 +1,19 @@ +Zlib License + +Copyright (c) 2022 Er2 + +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. diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..3f72750 --- /dev/null +++ b/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}" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..fc8a8d8 --- /dev/null +++ b/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" + } +} diff --git a/readme.org b/readme.org new file mode 100644 index 0000000..3373187 --- /dev/null +++ b/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. diff --git a/src/script/bg.coffee b/src/script/bg.coffee new file mode 100644 index 0000000..fb503d8 --- /dev/null +++ b/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: [''] + , ['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: [''] + , ['blocking', 'requestHeaders'] +) diff --git a/src/script/inj.coffee b/src/script/inj.coffee new file mode 100644 index 0000000..e690a17 --- /dev/null +++ b/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() diff --git a/src/style/base.less b/src/style/base.less new file mode 100644 index 0000000..1b00924 --- /dev/null +++ b/src/style/base.less @@ -0,0 +1,32 @@ +/** DisKort + * (c) Er2 2022 + * 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"; diff --git a/src/style/dimmer.less b/src/style/dimmer.less new file mode 100644 index 0000000..9721da8 --- /dev/null +++ b/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); + } +} diff --git a/src/style/fixes.less b/src/style/fixes.less new file mode 100644 index 0000000..0dfeea6 --- /dev/null +++ b/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; +} diff --git a/src/style/func.less b/src/style/func.less new file mode 100644 index 0000000..d3cef81 --- /dev/null +++ b/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; +} + diff --git a/src/style/hide.less b/src/style/hide.less new file mode 100644 index 0000000..c91986d --- /dev/null +++ b/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); } + } +} diff --git a/src/style/materials.less b/src/style/materials.less new file mode 100644 index 0000000..9735eaa --- /dev/null +++ b/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; +} diff --git a/src/style/mobile.less b/src/style/mobile.less new file mode 100644 index 0000000..079e707 --- /dev/null +++ b/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%; + } +} diff --git a/src/style/nitro.less b/src/style/nitro.less new file mode 100644 index 0000000..e168362 --- /dev/null +++ b/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(); diff --git a/src/style/people.less b/src/style/people.less new file mode 100644 index 0000000..fa78fd3 --- /dev/null +++ b/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; + } +} diff --git a/src/style/profile.less b/src/style/profile.less new file mode 100644 index 0000000..c8d3742 --- /dev/null +++ b/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); + } +} diff --git a/src/style/settings.less b/src/style/settings.less new file mode 100644 index 0000000..e15330f --- /dev/null +++ b/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; + } +} diff --git a/src/style/style.less b/src/style/style.less new file mode 100644 index 0000000..ec7198b --- /dev/null +++ b/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); +} diff --git a/src/style/ui.less b/src/style/ui.less new file mode 100644 index 0000000..37fde29 --- /dev/null +++ b/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); }