From 8eac634cb8e0a1dc24fc564286b0666a1b51cf5a Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 12 Apr 2022 21:36:18 +0300 Subject: [PATCH] new branch --- .gitignore | 6 + Makefile | 31 +++++ ext.png | Bin 0 -> 544 bytes license | 19 +++ manifest.json | 34 ++++++ package.json | 9 ++ readme.org | 40 ++++++ src/script/bg.coffee | 28 +++++ src/script/inj.coffee | 23 ++++ src/style/base.less | 32 +++++ src/style/dimmer.less | 47 ++++++++ src/style/fixes.less | 72 +++++++++++ src/style/func.less | 31 +++++ src/style/hide.less | 95 +++++++++++++++ src/style/materials.less | 118 ++++++++++++++++++ src/style/mobile.less | 53 ++++++++ src/style/nitro.less | 44 +++++++ src/style/people.less | 22 ++++ src/style/profile.less | 146 ++++++++++++++++++++++ src/style/settings.less | 254 +++++++++++++++++++++++++++++++++++++++ src/style/style.less | 149 +++++++++++++++++++++++ src/style/ui.less | 76 ++++++++++++ 22 files changed, 1329 insertions(+) create mode 100644 .gitignore create mode 100644 Makefile create mode 100644 ext.png create mode 100644 license create mode 100644 manifest.json create mode 100644 package.json create mode 100644 readme.org create mode 100644 src/script/bg.coffee create mode 100644 src/script/inj.coffee create mode 100644 src/style/base.less create mode 100644 src/style/dimmer.less create mode 100644 src/style/fixes.less create mode 100644 src/style/func.less create mode 100644 src/style/hide.less create mode 100644 src/style/materials.less create mode 100644 src/style/mobile.less create mode 100644 src/style/nitro.less create mode 100644 src/style/people.less create mode 100644 src/style/profile.less create mode 100644 src/style/settings.less create mode 100644 src/style/style.less create mode 100644 src/style/ui.less 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 0000000000000000000000000000000000000000..ca0720d2b4330c1f795401596b528d58c9446c04 GIT binary patch literal 544 zcmV+*0^j|KP)EX>4Tx02q~xP_b$PK@fclAzGxckQ710B1H-Xo7hW)BVgd75j0iS-76%w=W%xu z{eyf=KE*DOKS&=4r1s4jB!vqZn0;@CH;>r?)K_d=e$oY8Qe?rXKby`TTa`~#QD=71 z)Fw~+VK{_0emiSD*)9d@4XbMa7$i)ei+@5ugPoHCG4qJ z@=NQi@Hg^-i&y5?Q?@yalF3;5%mxD7;tnBNm}7+nVif2Q6LtpZ;hH!s>j)YdtAMY@ z2008dM&$9oDE&ja&Z$~ZEsje#PKh7np8K)y`*Kp9Z&RJ=!v)y$cvt`K?$KP8nt%Rb z2leSl$94k~wg3PC0%A)?L;#6C=@_;E000SaNLh0L01FcU01FcV0GgZ_00007bV*G` z2jvJ94+$uWeg75!005XtL_t(o!|j#Z4!|G?LxuSNzuY}+OU&Ga?v|MJJgT8WK}!)r z2r&UR-UgbZ7O(fz>W}Jj`;rI6+ iZ?)<34@U?g#1t%{J24=!9kN{j0000 + +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); }