From d499be7fedae35059bc2175b6fcedaa9fad6d0cb Mon Sep 17 00:00:00 2001 From: Er2 Date: Fri, 20 Aug 2021 18:10:37 +0300 Subject: [PATCH 01/82] Initial commit --- LICENSE | 19 +++++++++++++ btfl.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++ ext.png | Bin 0 -> 544 bytes manifest.json | 19 +++++++++++++ readme.org | 13 +++++++++ 5 files changed, 126 insertions(+) create mode 100644 LICENSE create mode 100644 btfl.css create mode 100644 ext.png create mode 100644 manifest.json create mode 100644 readme.org diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..e241737 --- /dev/null +++ b/LICENSE @@ -0,0 +1,19 @@ +Zlib License + +Copyright (c) 2021 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/btfl.css b/btfl.css new file mode 100644 index 0000000..5ebfb0b --- /dev/null +++ b/btfl.css @@ -0,0 +1,75 @@ +/** DisKort + * (c) Er2 2021 + */ + +/* to hide */ +[class^="username-"], +[class^="discrimBase-"], +[class*="banner-"], +[class^="usernameInnerRow-"], +[class^="membersGroup-"], +[class^="searchBar-"], +[class^="nowPlaying"], +div[class*="member"][class*="offline"], +div[class^="button"] button[class^="button-"], +svg[class^="slider"], +h2[class^="privateChannelsHeaderContainer"], + +#gif-picker-tab, #private-channels-0, +#private-channels-1, +#private-channels-2 +{ + all: unset; + display: none; + width: 0; + height: 0; +} +div[aria-label="Servers"] ~ div +{ + position: absolute; + bottom: 0; + display: none; +} + +/* to show */ +div[class^="scroller-"] div[class^="tutorialContainer-"] +{ + display: unset; +} + +/* rounder */ +div[class^="markup-"] pre code +{ + border-radius: 16px; +} + +/* sharper */ +[class^="avatar-"] +{ + border-radius: 5px; +} + +/* no banners */ + /* user popup */ + div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 120px; } + div[class^="userPopout-"] div[class^="avatarWrapper"] { top: 16px; } + + /* profile */ + header div[class^="nameTagWithCustomStatus-"] { + margin-bottom: 48px; + margin-left: 160px; + } + +/* member list */ +div[class^="membersWrap-"] +{ + min-width: 48px; + width: 0; +} +div[class^="members-"], +div[class^="member-"] +{ + padding: 0; + flex: 0 0 100%; + margin-left: 0; +} 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 Date: Fri, 20 Aug 2021 18:20:18 +0300 Subject: [PATCH 02/82] fix installation guide --- readme.org | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/readme.org b/readme.org index e5055dd..307e629 100644 --- a/readme.org +++ b/readme.org @@ -5,9 +5,10 @@ Currently it's in alpha. * Installation -Instruction for Firefox (may be working on Chrome). +Instruction for Firefox (may be working on Chrome with some changes). -1. Download *zip* archive ([[https://gitdab.com/er2/diskort/archive/main.zip][main branch]]). -2. Press *Ctrl+Shift+A*. -3. Drag and drop extension. +1. Clone or unpack downloaded zip archive (easily finds). +2. Go to ~about:debugging#/runtime/this-firefox~ +3. Click on *Load Temponary Add-on...* +4. Choose any file in extension's folder. From df5d8e4182ed3474d89cb4f9964db809e4365c80 Mon Sep 17 00:00:00 2001 From: Er2 Date: Fri, 20 Aug 2021 18:40:33 +0300 Subject: [PATCH 03/82] off more details, profile bugfix --- btfl.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/btfl.css b/btfl.css index 5ebfb0b..ccf2e6c 100644 --- a/btfl.css +++ b/btfl.css @@ -10,14 +10,15 @@ [class^="membersGroup-"], [class^="searchBar-"], [class^="nowPlaying"], +div[class^="nameTag-"], div[class*="member"][class*="offline"], div[class^="button"] button[class^="button-"], -svg[class^="slider"], +button[class^="shinyButton"], [class*="giftButton"], +div[class*="premium"], h2[class^="privateChannelsHeaderContainer"], -#gif-picker-tab, #private-channels-0, -#private-channels-1, -#private-channels-2 +#gif-picker-tab, +#private-channels-0, #private-channels-1, #private-channels-2 { all: unset; display: none; @@ -37,6 +38,10 @@ div[class^="scroller-"] div[class^="tutorialContainer-"] display: unset; } +div[class^="userInfo-"] div[class^="avatar-"] { + top: 25px; +} + /* rounder */ div[class^="markup-"] pre code { @@ -55,7 +60,8 @@ div[class^="markup-"] pre code div[class^="userPopout-"] div[class^="avatarWrapper"] { top: 16px; } /* profile */ - header div[class^="nameTagWithCustomStatus-"] { + header div[class^="nameTagWithCustomStatus-"], + header div[class^="nameTagNoCustomStatus-"] { margin-bottom: 48px; margin-left: 160px; } From 6a71457eda333d82ac180e6d3952aaf007887426 Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 3 Feb 2022 21:22:33 +0300 Subject: [PATCH 04/82] up to date with current version --- btfl.css | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/btfl.css b/btfl.css index ccf2e6c..9198257 100644 --- a/btfl.css +++ b/btfl.css @@ -10,14 +10,20 @@ [class^="membersGroup-"], [class^="searchBar-"], [class^="nowPlaying"], +[class^="marketing"], div[class^="nameTag-"], div[class*="member"][class*="offline"], -div[class^="button"] button[class^="button-"], +div[class*="hero"], +/*div[class^="button"] button[class^="button-"],*/ button[class^="shinyButton"], [class*="giftButton"], div[class*="premium"], h2[class^="privateChannelsHeaderContainer"], -#gif-picker-tab, +/* buttons on chat area */ +div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]), +[class^="stickerIcon-"], + +#gif-picker-tab, #sticker-picker-tab, #private-channels-0, #private-channels-1, #private-channels-2 { all: unset; @@ -42,6 +48,12 @@ div[class^="userInfo-"] div[class^="avatar-"] { top: 25px; } +div[class^="peopleListItem-"] +div +div[class^="userInfo-"] div[class^="avatar-"] { + top: 0; +} + /* rounder */ div[class^="markup-"] pre code { @@ -67,7 +79,7 @@ div[class^="markup-"] pre code } /* member list */ -div[class^="membersWrap-"] +aside[class^="membersWrap-"] { min-width: 48px; width: 0; From 797a95a03c4758522f0a96c6a45c7d4280021425 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 5 Feb 2022 20:59:59 +0300 Subject: [PATCH 05/82] upd --- LICENSE | 2 +- btfl.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 56 insertions(+), 4 deletions(-) diff --git a/LICENSE b/LICENSE index e241737..888e15d 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ Zlib License -Copyright (c) 2021 Er2 +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 diff --git a/btfl.css b/btfl.css index 9198257..3f8add5 100644 --- a/btfl.css +++ b/btfl.css @@ -1,5 +1,6 @@ /** DisKort - * (c) Er2 2021 + * (c) Er2 2022 + * Zlib License */ /* to hide */ @@ -12,17 +13,26 @@ [class^="nowPlaying"], [class^="marketing"], div[class^="nameTag-"], -div[class*="member"][class*="offline"], div[class*="hero"], /*div[class^="button"] button[class^="button-"],*/ button[class^="shinyButton"], [class*="giftButton"], div[class*="premium"], h2[class^="privateChannelsHeaderContainer"], +nav[class^="nav-"], /* buttons on chat area */ div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]), [class^="stickerIcon-"], +div[class^="toolbar-3_"], + +#emoji-picker-tab-panel +div[class^="emojiPicker-"] +> div[class^="header-"], + +nav[class^="privateChannels-"] div div +*[data-list-item-id$="nitro"], + #gif-picker-tab, #sticker-picker-tab, #private-channels-0, #private-channels-1, #private-channels-2 { @@ -33,6 +43,7 @@ div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]), } div[aria-label="Servers"] ~ div { + /* FIXME: Localized string and bottom is broken */ position: absolute; bottom: 0; display: none; @@ -41,7 +52,9 @@ div[aria-label="Servers"] ~ div /* to show */ div[class^="scroller-"] div[class^="tutorialContainer-"] { + /* FIXME: Look above */ display: unset; + margin: 0; } div[class^="userInfo-"] div[class^="avatar-"] { @@ -54,12 +67,31 @@ div[class^="userInfo-"] div[class^="avatar-"] { top: 0; } +#emoji-picker-tab-panel { + position: absolute; + top: 0; bottom: 0; + left: 0; right: 0; +} + +#emoji-picker-tab-panel +div[class^="wrapper-"] { + top: 0; +} + /* rounder */ -div[class^="markup-"] pre code +div[class^="markup-"] pre code, +div[class^="sidebar-"], +div[class^="container-"], +div[class^="chat-"] { border-radius: 16px; } +div[class^="sidebar-"] +{ + margin-right: 8px; +} + /* sharper */ [class^="avatar-"] { @@ -84,6 +116,14 @@ aside[class^="membersWrap-"] min-width: 48px; width: 0; } + +aside[class^="membersWrap-"] div[class^="content-"], +nav[class^="privateChannels-"] +div[class^="content-"]:only-child +{ + height: unset !important; +} + div[class^="members-"], div[class^="member-"] { @@ -91,3 +131,15 @@ div[class^="member-"] flex: 0 0 100%; margin-left: 0; } + +section, header, +div[class^="content-"]::before, +div[class^="tabBody-"]::before +{ + box-shadow: unset !important; +} + +section div[class^="children-"] +{ + justify-content: center; +} From 67c676c0d27150fa4dc19539c5dd59b9f509a7cc Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 19 Mar 2022 20:30:57 +0300 Subject: [PATCH 06/82] I did it by 1 day? --- btfl.css | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 158 insertions(+), 11 deletions(-) diff --git a/btfl.css b/btfl.css index 3f8add5..c3d83fb 100644 --- a/btfl.css +++ b/btfl.css @@ -7,19 +7,42 @@ [class^="username-"], [class^="discrimBase-"], [class*="banner-"], +[class*="perks"], +[class*="socialLink-"], [class^="usernameInnerRow-"], [class^="membersGroup-"], [class^="searchBar-"], [class^="nowPlaying"], [class^="marketing"], +[class^="clickableSticker-"], +[class^="unreadPill-"], +[class^="applicationInstall"], +[class*="nitro"], +div[class^="art-"], +div[class^="threadSuggestionBar-"], +div[class^="newMessagesBar-"], div[class^="nameTag-"], div[class*="hero"], /*div[class^="button"] button[class^="button-"],*/ button[class^="shinyButton"], [class*="giftButton"], +button[class*="followButton-"], +/*button[class*="emojiItemDisabled-"],*/ div[class*="premium"], +div[id*="premium"], +div[role="separator"], +div[class*="goal"], +div[class^="pill"], h2[class^="privateChannelsHeaderContainer"], nav[class^="nav-"], +/* Settings */ +div[aria-controls*="nitro"], +div[aria-controls="library-inventory-tab"], +div[aria-controls="subscriptions-tab"], +div[aria-controls="billing-tab"], +div[aria-controls^="hypesquad"], +div[class^="socialLinks-"], + /* buttons on chat area */ div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]), [class^="stickerIcon-"], @@ -30,11 +53,16 @@ div[class^="toolbar-3_"], div[class^="emojiPicker-"] > div[class^="header-"], +section div[class^="children-"] div[class^="spacer-"], + nav[class^="privateChannels-"] div div *[data-list-item-id$="nitro"], #gif-picker-tab, #sticker-picker-tab, -#private-channels-0, #private-channels-1, #private-channels-2 +#private-channels-0, #private-channels-1, #private-channels-2, + +/* main page */ +#app-mount div:not([class]) div[class=""] div:not([class]) { all: unset; display: none; @@ -52,13 +80,28 @@ div[aria-label="Servers"] ~ div /* to show */ div[class^="scroller-"] div[class^="tutorialContainer-"] { - /* FIXME: Look above */ + /* FIXME: goto FIXME above */ display: unset; margin: 0; } +:not([class^="listItemContents-"]) > div[class^="userInfo-"] { + padding-top: 48px; + justify-content: left; +} +div[class^="userInfo-"] button { + margin-left: 32px; + margin-top: -8px; +} div[class^="userInfo-"] div[class^="avatar-"] { - top: 25px; + top: 32px; +} + +div[class^="headerTop-"] div[class^="headerText"] +{ margin-left: 84px; } +div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) { + margin-left: -8px; + margin-top: -8px; } div[class^="peopleListItem-"] @@ -67,7 +110,11 @@ div[class^="userInfo-"] div[class^="avatar-"] { top: 0; } -#emoji-picker-tab-panel { +div[class^="messagesWrapper-"] div { + scrollbar-width: thin; +} + +#emoji-picker-tab-panel:not([role="dialog"]) { position: absolute; top: 0; bottom: 0; left: 0; right: 0; @@ -76,9 +123,30 @@ div[class^="userInfo-"] div[class^="avatar-"] { #emoji-picker-tab-panel div[class^="wrapper-"] { top: 0; + border-radius: 5px 0 0 5px; +} + +div[class^="avatarWrapper-"] { + margin-right: auto; +} + +div[class^="radioBar-"] { + border: none; } /* rounder */ +div[class^="item-"], +div[class^="select-"], +div[class^="popout"], +div[class^="userPopout-"], +div[class^="accountProfile"], +div[class^="profileBanner"], +div[class^="connectedAccount"], +div[class*="fullscreenOnMobile"], +div[class*="root"] div[class^="flex-"], +[class*="embed"], +div[class^="menu"], +div[class^="messagesWrapper-"] div, div[class^="markup-"] pre code, div[class^="sidebar-"], div[class^="container-"], @@ -93,15 +161,30 @@ div[class^="sidebar-"] } /* sharper */ -[class^="avatar-"] +button[class*="button"], +[role="dialog"], +div[class^="colorPicker"] div div[class^="saturation"] div, +[class*="Text"], [class*="text"], +div[class*="input"], +input[class^="inputDefault-"], +[class^="avatar-"], +div[class^="menu-"] div { - border-radius: 5px; + border-radius: 8px !important; +} + +[class*="embed-"], +div[class^="messagesWrapper-"] +div[class*="mentioned"] +{ + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } /* no banners */ /* user popup */ - div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 120px; } - div[class^="userPopout-"] div[class^="avatarWrapper"] { top: 16px; } + div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 72px; } + div[class^="userPopout-"] div[class^="avatarWrapper"] { left: 8px; top: 16px; } /* profile */ header div[class^="nameTagWithCustomStatus-"], @@ -117,15 +200,24 @@ aside[class^="membersWrap-"] width: 0; } +div[class^="children-"] div[class^="nicknames-"], +div[class^="children-"] div[class^="topic-"] +{ + width: unset !important; + flex-grow: 0; +} + aside[class^="membersWrap-"] div[class^="content-"], -nav[class^="privateChannels-"] -div[class^="content-"]:only-child +nav[class^="privateChannels-"] div ul[class^="content-"]:only-child, +ul[class^="emojiListRow-"] { height: unset !important; + flex-grow: 0; } div[class^="members-"], -div[class^="member-"] +div[class^="member-"], +div[class*="root"] div[class^="flex-"] div[class^="header"] { padding: 0; flex: 0 0 100%; @@ -143,3 +235,58 @@ section div[class^="children-"] { justify-content: center; } + +/* mobile mode */ +/* +[class^="channel-"] { max-width: unset; margin: 0 8px; } +[class^="layer-"] { padding: 0; margin: auto; } +[class^="layer-"] > [class^="container-"], +[class^="standardSidebarView-"] { overflow-x: scroll; } +[class^="base-"], [class^="contentRegion-"] { min-width: 200%; } +[class^="content-"] [class^="sidebar"] { width: calc(50% - 72px); } +[class^="chat-"] { width: 100%; } +[class^="tools"] { position: unset !important; } + +[class*="positionLayer-"], +[class*="fullscreenOnMobile"] { + overflow: auto; + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; +} +[class*="fullscreenOnMobile"] [class^="body"] { + width: 100%; height: 100%; +} +[class*="item-"], +[class^="member-"], +#channels li, +[role="tab"], +div[class^="tabBarItem-"] { + margin-top: 16px; + padding: 0 8px; + font-size: 11pt; +} +*/ + +div[class^="tabBarItem-"] { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + margin-right: 16px; + padding: 0 8px; + margin-top: 16px; +} + +[role="tab"][class*="selected-"], +[role="tab"]:hover +{ + background-color: var(--background-modifier-hover); +} + +div[class^="jumpToPresentBar-"] { + bottom: 16px; + padding: 0; +} From 6cb48d77026f7fb72e13e47876dbe53d09c94e26 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 19 Mar 2022 21:16:50 +0300 Subject: [PATCH 07/82] small changes --- btfl.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/btfl.css b/btfl.css index c3d83fb..6cf7afd 100644 --- a/btfl.css +++ b/btfl.css @@ -20,7 +20,6 @@ [class*="nitro"], div[class^="art-"], div[class^="threadSuggestionBar-"], -div[class^="newMessagesBar-"], div[class^="nameTag-"], div[class*="hero"], /*div[class^="button"] button[class^="button-"],*/ @@ -31,7 +30,7 @@ div[class*="premium"], div[id*="premium"], div[role="separator"], div[class*="goal"], -div[class^="pill"], +div[class^="welcomeCTA-"], h2[class^="privateChannelsHeaderContainer"], nav[class^="nav-"], @@ -47,7 +46,7 @@ div[class^="socialLinks-"], div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]), [class^="stickerIcon-"], -div[class^="toolbar-3_"], +div[class^="toolbar-3_"] > :not([aria-label="Close"]), #emoji-picker-tab-panel div[class^="emojiPicker-"] @@ -161,6 +160,8 @@ div[class^="sidebar-"] } /* sharper */ +li[class^="channel-"], +#channels ul li div > div[class^="content-"], button[class*="button"], [role="dialog"], div[class^="colorPicker"] div div[class^="saturation"] div, From ed16e1ca72759ec0ea690e7e581dab5d1f9abcac Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 20 Mar 2022 12:13:20 +0300 Subject: [PATCH 08/82] packs into xpi --- .gitignore | 1 + makeext.sh | 5 +++++ manifest.json | 13 +++++++++++-- readme.org | 10 ++++++++++ 4 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100755 makeext.sh diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f9ffe8b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +diskort.xpi diff --git a/makeext.sh b/makeext.sh new file mode 100755 index 0000000..bf16c5c --- /dev/null +++ b/makeext.sh @@ -0,0 +1,5 @@ +#!/bin/sh + +zip diskort.xpi btfl.css ext.png manifest.json +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" diff --git a/manifest.json b/manifest.json index ab5054d..fcb03f5 100644 --- a/manifest.json +++ b/manifest.json @@ -11,9 +11,18 @@ "content_scripts": [ { - "matches": ["https://discord.com/*"], + "matches": [ + "*://discord.com/*", + "*://discord.gg/*", + "*://discord.gift/*" + ], "css": ["btfl.css"] } - ] + ], + "browser_specific_settings": { + "gecko": { + "id": "diskort@er2" + } + } } diff --git a/readme.org b/readme.org index 307e629..86ffaee 100644 --- a/readme.org +++ b/readme.org @@ -7,6 +7,16 @@ Currently it's in alpha. Instruction for Firefox (may be working on Chrome with some changes). +Release mode: + +1. Run ./makeext.sh (if on Linux or macOS). + + Or just pack all files as zip into ~diskort.xpi~ +2. Go to ~about:config~ and set ~xpinstall.signatures.required~ to ~false~ +3. Install extension (via ~about:addons~, drag&drop to browser, etc.). + +Debug mode: + 1. Clone or unpack downloaded zip archive (easily finds). 2. Go to ~about:debugging#/runtime/this-firefox~ 3. Click on *Load Temponary Add-on...* From 13b788d40798ef5c69445aabf3559f42630dcce5 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 20 Mar 2022 13:07:21 +0300 Subject: [PATCH 09/82] add media queries, small fixes --- btfl.css | 76 ++++++++++++++++++++++++++++++-------------------------- 1 file changed, 41 insertions(+), 35 deletions(-) diff --git a/btfl.css b/btfl.css index 6cf7afd..74a2385 100644 --- a/btfl.css +++ b/btfl.css @@ -151,7 +151,7 @@ div[class^="sidebar-"], div[class^="container-"], div[class^="chat-"] { - border-radius: 16px; + border-radius: 16px !important; } div[class^="sidebar-"] @@ -178,8 +178,8 @@ div[class^="menu-"] div div[class^="messagesWrapper-"] div[class*="mentioned"] { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-top-left-radius: 4px !important; + border-bottom-left-radius: 4px !important; } /* no banners */ @@ -238,40 +238,46 @@ section div[class^="children-"] } /* mobile mode */ -/* -[class^="channel-"] { max-width: unset; margin: 0 8px; } -[class^="layer-"] { padding: 0; margin: auto; } -[class^="layer-"] > [class^="container-"], -[class^="standardSidebarView-"] { overflow-x: scroll; } -[class^="base-"], [class^="contentRegion-"] { min-width: 200%; } -[class^="content-"] [class^="sidebar"] { width: calc(50% - 72px); } -[class^="chat-"] { width: 100%; } -[class^="tools"] { position: unset !important; } +@media screen and (max-device-width: 600px) { + [class^="channel-"] { max-width: unset; margin: 0 8px; } + [class^="layer-"] { padding: 0; margin: auto; } + [class^="layer-"] > [class^="container-"], + [class^="standardSidebarView-"] { overflow-x: scroll; } + [class^="base-"], [class^="contentRegion-"] { min-width: 200%; } + [class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); } + [class^="chat-"] { width: 100%; } + [class^="tools"] { position: unset !important; } -[class*="positionLayer-"], -[class*="fullscreenOnMobile"] { - overflow: auto; - max-width: 100%; - max-height: 100%; - position: absolute; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; + [class*="positionLayer-"], + [class*="fullscreenOnMobile"] { + overflow: auto; + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + } + [class*="fullscreenOnMobile"] [class^="body"] { + width: 100%; height: 100%; + } + + :not([class^="pill-"]) > [class*="item-"], + [class^="member-"], + #channels li, + [role="tab"], + div[class^="tabBarItem-"] { + margin-top: 16px !important; + padding: 0 8px; + font-size: 11pt; + } + + [class^="side-"] [class^="item-"] { + margin-top: 4px; + padding: 6px 10px; + } } -[class*="fullscreenOnMobile"] [class^="body"] { - width: 100%; height: 100%; -} -[class*="item-"], -[class^="member-"], -#channels li, -[role="tab"], -div[class^="tabBarItem-"] { - margin-top: 16px; - padding: 0 8px; - font-size: 11pt; -} -*/ div[class^="tabBarItem-"] { border-top-left-radius: 8px; From c630319966d2db4f431200eb89c3d3b0ff248bc7 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 20 Mar 2022 13:26:50 +0300 Subject: [PATCH 10/82] mobile mode fixes --- btfl.css | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/btfl.css b/btfl.css index 74a2385..dc4ac02 100644 --- a/btfl.css +++ b/btfl.css @@ -43,7 +43,7 @@ div[aria-controls^="hypesquad"], div[class^="socialLinks-"], /* buttons on chat area */ -div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]), +div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]):not([class^="attachButton-"]), [class^="stickerIcon-"], div[class^="toolbar-3_"] > :not([aria-label="Close"]), @@ -239,6 +239,8 @@ section div[class^="children-"] /* mobile mode */ @media screen and (max-device-width: 600px) { + /* FIXME: add close buttons to emoji panel, profile */ + [class^="channel-"] { max-width: unset; margin: 0 8px; } [class^="layer-"] { padding: 0; margin: auto; } [class^="layer-"] > [class^="container-"], @@ -263,19 +265,20 @@ section div[class^="children-"] width: 100%; height: 100%; } - :not([class^="pill-"]) > [class*="item-"], - [class^="member-"], - #channels li, - [role="tab"], - div[class^="tabBarItem-"] { - margin-top: 16px !important; - padding: 0 8px; - font-size: 11pt; + [class^="side-"] > [class^="item-"] { + margin-top: 4px !important; + padding: 6px 10px !important; } - [class^="side-"] [class^="item-"] { - margin-top: 4px; - padding: 6px 10px; + [class^="side-"] > [class^="item-"], + :not([class*="pill"]):not([class*="Pill"]) > [class*="item-"], + :not([class*="pill"]):not([class*="Pill"]) > [role="tab"], + [class^="member-"], + #channels li, + div[class^="tabBarItem-"] { + margin-top: 16px; + padding: 0 8px; + font-size: 11pt; } } From c35238da7b979c8c233d1b01aff9735eba9949c7 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 20 Mar 2022 14:02:42 +0300 Subject: [PATCH 11/82] beta --- manifest.json | 2 +- readme.org | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index fcb03f5..2cabd59 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "DisKort", - "version": "1.0", + "version": "1.1", "description": "Custom theme for Discord", diff --git a/readme.org b/readme.org index 86ffaee..9611daf 100644 --- a/readme.org +++ b/readme.org @@ -1,7 +1,7 @@ *DisKort* - extension for browser which decreases Discord elements. -Currently it's in alpha. +Currently it's in beta, more of design was merged into css. * Installation From 8f6ccda803b89ad9e7bf546886fb9e031fe9fcee Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 20 Mar 2022 19:13:21 +0300 Subject: [PATCH 12/82] chrome support, hot injection --- btfl.css | 12 ++++++++---- js/bg.js | 18 ++++++++++++++++++ js/inj.js | 18 ++++++++++++++++++ LICENSE => license | 0 manifest.json | 26 ++++++++++++++++---------- 5 files changed, 60 insertions(+), 14 deletions(-) create mode 100644 js/bg.js create mode 100644 js/inj.js rename LICENSE => license (100%) diff --git a/btfl.css b/btfl.css index dc4ac02..50d4ac5 100644 --- a/btfl.css +++ b/btfl.css @@ -18,6 +18,7 @@ [class^="unreadPill-"], [class^="applicationInstall"], [class*="nitro"], +[class*="artwork-"], div[class^="art-"], div[class^="threadSuggestionBar-"], div[class^="nameTag-"], @@ -33,6 +34,7 @@ div[class*="goal"], div[class^="welcomeCTA-"], h2[class^="privateChannelsHeaderContainer"], nav[class^="nav-"], +span[class^="questionMark-"], /* Settings */ div[aria-controls*="nitro"], @@ -63,10 +65,10 @@ nav[class^="privateChannels-"] div div /* main page */ #app-mount div:not([class]) div[class=""] div:not([class]) { - all: unset; - display: none; - width: 0; - height: 0; + all: unset !important; + display: none !important; + width: 0 !important; + height: 0 !important; } div[aria-label="Servers"] ~ div { @@ -134,6 +136,7 @@ div[class^="radioBar-"] { } /* rounder */ +[class^="authBox"], div[class^="item-"], div[class^="select-"], div[class^="popout"], @@ -169,6 +172,7 @@ div[class^="colorPicker"] div div[class^="saturation"] div, div[class*="input"], input[class^="inputDefault-"], [class^="avatar-"], +div[class^="role-"], div[class^="menu-"] div { border-radius: 8px !important; diff --git a/js/bg.js b/js/bg.js new file mode 100644 index 0000000..6a1a112 --- /dev/null +++ b/js/bg.js @@ -0,0 +1,18 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +// Disable CSP +function onHeaders(det) { + for (var i = 0; i < det.responseHeaders.length; i++) { + if (det.responseHeaders[i].name.toLowerCase() == 'content-security-policy' + || det.responseHeaders[i].name.toLowerCase() == 'content-security-policy-report-only' + ) det.responseHeaders[i].value = ''; + } + return { responseHeaders: det.responseHeaders }; +} + +chrome.webRequest.onHeadersReceived.addListener( + onHeaders, {urls: ['']}, ['blocking', 'responseHeaders'] +); diff --git a/js/inj.js b/js/inj.js new file mode 100644 index 0000000..86604c1 --- /dev/null +++ b/js/inj.js @@ -0,0 +1,18 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +const base = "https://raw.githubusercontent.com/Er2ch/diskort/main/"; + +async function inject() { + try { + var resp = await fetch(base + 'btfl.css'); + var text = await resp.text(); + var s = document.createElement("style"); + s.innerHTML = text; + document.head.appendChild(s); + } catch(e) { console.error(e); } +} +document.addEventListener("click", inject); +inject(); diff --git a/LICENSE b/license similarity index 100% rename from LICENSE rename to license diff --git a/manifest.json b/manifest.json index 2cabd59..5b0f91f 100644 --- a/manifest.json +++ b/manifest.json @@ -9,20 +9,26 @@ "48": "ext.png" }, - "content_scripts": [ - { - "matches": [ - "*://discord.com/*", - "*://discord.gg/*", - "*://discord.gift/*" - ], - "css": ["btfl.css"] - } + "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": "diskort@er2" + "id": "{7e79557e-5773-4be8-b0e2-9e35b34b692c}" } } } From 191311149d779ab4a2759772222d89aec8caaaaf Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 20 Mar 2022 19:16:30 +0300 Subject: [PATCH 13/82] version 2.0 This is version only for extension. CSS file is now rolling-release and downloads automatically. --- makeext.sh | 2 +- manifest.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/makeext.sh b/makeext.sh index bf16c5c..717ad56 100755 --- a/makeext.sh +++ b/makeext.sh @@ -1,5 +1,5 @@ #!/bin/sh -zip diskort.xpi btfl.css ext.png manifest.json +zip -r diskort.xpi js/ ext.png manifest.json license 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" diff --git a/manifest.json b/manifest.json index 5b0f91f..ad88458 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "DisKort", - "version": "1.1", + "version": "2.0", "description": "Custom theme for Discord", From 81fc1a5528192fb2d0efde744f772f1b136af358 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 20 Mar 2022 20:03:10 +0300 Subject: [PATCH 14/82] remove animations in nitro page --- btfl.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/btfl.css b/btfl.css index 50d4ac5..e9eb25c 100644 --- a/btfl.css +++ b/btfl.css @@ -63,7 +63,9 @@ nav[class^="privateChannels-"] div div #private-channels-0, #private-channels-1, #private-channels-2, /* main page */ -#app-mount div:not([class]) div[class=""] div:not([class]) +#app-mount div:not([class]) div[class=""] div:not([class]), +#app-mount div:not([class]) div[class=""] div div[class*="background-"], +#app-mount div:not([class]) div[class=""] div[class^="grid-"] div[class^="animation-"] { all: unset !important; display: none !important; From 18fcd5a06dfbfa701786917a407bed0d9b57f103 Mon Sep 17 00:00:00 2001 From: Er2 Date: Mon, 21 Mar 2022 11:36:14 +0300 Subject: [PATCH 15/82] installation instruction --- btfl.css | 2 +- readme.org | 29 ++++++++++++++++++++++++----- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/btfl.css b/btfl.css index e9eb25c..b4deaf8 100644 --- a/btfl.css +++ b/btfl.css @@ -29,7 +29,7 @@ button[class*="followButton-"], /*button[class*="emojiItemDisabled-"],*/ div[class*="premium"], div[id*="premium"], -div[role="separator"], +div[role="separator"]:not([id$="new-messages-bar"]), div[class*="goal"], div[class^="welcomeCTA-"], h2[class^="privateChannelsHeaderContainer"], diff --git a/readme.org b/readme.org index 9611daf..15358de 100644 --- a/readme.org +++ b/readme.org @@ -5,20 +5,39 @@ Currently it's in beta, more of design was merged into css. * Installation -Instruction for Firefox (may be working on Chrome with some changes). +** Firefox Release mode: -1. Run ./makeext.sh (if on Linux or macOS). +0. (To make own) Run ./makeext.sh (if on Linux or macOS). Or just pack all files as zip into ~diskort.xpi~ + +1. Create own (step 0) or download [[https://gitdab.com/er2/diskort/releases][from releases]] (~diskort.xpi~). 2. Go to ~about:config~ and set ~xpinstall.signatures.required~ to ~false~ 3. Install extension (via ~about:addons~, drag&drop to browser, etc.). Debug mode: -1. Clone or unpack downloaded zip archive (easily finds). -2. Go to ~about:debugging#/runtime/this-firefox~ +1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it. +2. Copy btfl.css from ~main~ branch ([[https://gitdab.com/er2/diskort/raw/branch/main/btfl.css][here]]). +3. Go to ~about:debugging#/runtime/this-firefox~ 3. Click on *Load Temponary Add-on...* -4. Choose any file in extension's folder. +4. Choose any file in extension folder. +** Chrome, etc. + +Release mode: + +1. Go to ~chrome://extensions/~ +2. Enable ~Developer mode~. +3. Create own (~Pack extension~) or download [[https://gitdab.com/er2/diskort/releases][from releases]]. +4. Drag and drop ~diskort.crx~ to browser. + +Debug mode: + +1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it. +2. Copy btfl.css from ~main~ branch ([[https://gitdab.com/er2/diskort/raw/branch/main/btfl.css][here]]). +3. Go to ~chrome://extensions/~ +3. Enable ~Developer mode~. +4. Click on ~Load unpacked~ and choose extension folder. From 1cabc0f2c9871653288e80161db06e78915c496e Mon Sep 17 00:00:00 2001 From: Er2 Date: Mon, 21 Mar 2022 13:17:23 +0300 Subject: [PATCH 16/82] in firefox store --- js/inj.js | 1 - manifest.json | 2 +- readme.org | 12 ++---------- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/js/inj.js b/js/inj.js index 86604c1..a98d84f 100644 --- a/js/inj.js +++ b/js/inj.js @@ -14,5 +14,4 @@ async function inject() { document.head.appendChild(s); } catch(e) { console.error(e); } } -document.addEventListener("click", inject); inject(); diff --git a/manifest.json b/manifest.json index ad88458..02301e1 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "DisKort", - "version": "2.0", + "version": "2.0.1", "description": "Custom theme for Discord", diff --git a/readme.org b/readme.org index 15358de..ea33911 100644 --- a/readme.org +++ b/readme.org @@ -3,20 +3,12 @@ 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 -Release mode: - -0. (To make own) Run ./makeext.sh (if on Linux or macOS). - - Or just pack all files as zip into ~diskort.xpi~ - -1. Create own (step 0) or download [[https://gitdab.com/er2/diskort/releases][from releases]] (~diskort.xpi~). -2. Go to ~about:config~ and set ~xpinstall.signatures.required~ to ~false~ -3. Install extension (via ~about:addons~, drag&drop to browser, etc.). - Debug mode: 1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it. From fa398864dd2741794bc9fc2c0dd2a4f530aecb46 Mon Sep 17 00:00:00 2001 From: Er2 Date: Mon, 21 Mar 2022 17:12:01 +0300 Subject: [PATCH 17/82] dimmer theme, more anti-nitro, join server redesign --- btfl.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 61 insertions(+), 4 deletions(-) diff --git a/btfl.css b/btfl.css index b4deaf8..afd0102 100644 --- a/btfl.css +++ b/btfl.css @@ -4,8 +4,11 @@ */ /* to hide */ +[class^="DocSearch"], /* Algolia, f you */ +[class*="tier"], [class^="username-"], [class^="discrimBase-"], +[class^="bannerContainer-"], [class*="banner-"], [class*="perks"], [class*="socialLink-"], @@ -18,7 +21,12 @@ [class^="unreadPill-"], [class^="applicationInstall"], [class*="nitro"], +[class^="upsell"], +[class^="availabilityIndicator-"], [class*="artwork-"], +div[class^="serverBoostTabItem-"], +div[class^="overviewSidebar-"], +div[class^="autocompleteShadow-"], div[class^="art-"], div[class^="threadSuggestionBar-"], div[class^="nameTag-"], @@ -32,9 +40,13 @@ div[id*="premium"], div[role="separator"]:not([id$="new-messages-bar"]), div[class*="goal"], div[class^="welcomeCTA-"], +div[class^="channelNotice-"], h2[class^="privateChannelsHeaderContainer"], nav[class^="nav-"], span[class^="questionMark-"], +div[class^="characterCount-"] div[class^="root-"], + +div[class^="keybind-"], /* true must know this! */ /* Settings */ div[aria-controls*="nitro"], @@ -62,6 +74,8 @@ nav[class^="privateChannels-"] div div #gif-picker-tab, #sticker-picker-tab, #private-channels-0, #private-channels-1, #private-channels-2, +div[class*="templatesList-"] button[class^="container-"] ~ *, + /* main page */ #app-mount div:not([class]) div[class=""] div:not([class]), #app-mount div:not([class]) div[class=""] div div[class*="background-"], @@ -139,6 +153,10 @@ div[class^="radioBar-"] { /* rounder */ [class^="authBox"], +[class*="embed"], +[class^="checkboxWrapper-"], +div[class^="group-"], +div[class*="card"], div[class^="item-"], div[class^="select-"], div[class^="popout"], @@ -147,8 +165,9 @@ div[class^="accountProfile"], div[class^="profileBanner"], div[class^="connectedAccount"], div[class*="fullscreenOnMobile"], +div[class^="auditLog-"], +div[class^="auditLog-"] > div, div[class*="root"] div[class^="flex-"], -[class*="embed"], div[class^="menu"], div[class^="messagesWrapper-"] div, div[class^="markup-"] pre code, @@ -165,6 +184,8 @@ div[class^="sidebar-"] } /* sharper */ +div[class^="tabBarItem-"], +div[class^="checkbox"], li[class^="channel-"], #channels ul li div > div[class^="content-"], button[class*="button"], @@ -180,6 +201,19 @@ div[class^="menu-"] div border-radius: 8px !important; } +div[class^="tabBarItem-"], +div[class^="auditLog"] div[class^="headerExpanded-"] +{ + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +div[class^="auditLog-"] div[class^="changeDetails-"] +{ + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} + [class*="embed-"], div[class^="messagesWrapper-"] div[class*="mentioned"] @@ -288,11 +322,13 @@ section div[class^="children-"] } } +div[class*="fullscreenOnMobile"] div[class^="flex"] { + overflow: hidden; +} + div[class^="tabBarItem-"] { - border-top-left-radius: 8px; - border-top-right-radius: 8px; margin-right: 16px; - padding: 0 8px; + padding: 4px 8px; margin-top: 16px; } @@ -306,3 +342,24 @@ div[class^="jumpToPresentBar-"] { bottom: 16px; padding: 0; } + +div[class*="templatesList-"] { + height: 128px; +} + +/* dimmer theme? */ +div[class^="layer-"] div.theme-light div[class*="root-"] +{ background: var(--background-secondary); } +div[class^="layer-"] div.theme-light div[class*="footer-"] +{ background: var(--background-primary); } +div[class^="layer-"] div.theme-light { + --header-primary: #dedede; + --header-secondary: #cacaca; + --text-normal: #dcddde; + --interactive-normal: #bebebe; + --interactive-hover: #dedede; + --background-primary: #3e3e3e; + --background-secondary: #2e2e2e; + --background-tertiary: #1e1e1e; + color: var(--header-primary); +} From 21acc6122dec309a4412a0507a735bddddc61343 Mon Sep 17 00:00:00 2001 From: Er2 Date: Wed, 23 Mar 2022 21:02:35 +0300 Subject: [PATCH 18/82] some changes --- btfl.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/btfl.css b/btfl.css index afd0102..3757f41 100644 --- a/btfl.css +++ b/btfl.css @@ -23,7 +23,6 @@ [class*="nitro"], [class^="upsell"], [class^="availabilityIndicator-"], -[class*="artwork-"], div[class^="serverBoostTabItem-"], div[class^="overviewSidebar-"], div[class^="autocompleteShadow-"], @@ -76,6 +75,9 @@ nav[class^="privateChannels-"] div div div[class*="templatesList-"] button[class^="container-"] ~ *, +[class*="artwork-"], +div[class^="characterBackground-"] [class*="rightSplit-"], + /* main page */ #app-mount div:not([class]) div[class=""] div:not([class]), #app-mount div:not([class]) div[class=""] div div[class*="background-"], @@ -155,6 +157,7 @@ div[class^="radioBar-"] { [class^="authBox"], [class*="embed"], [class^="checkboxWrapper-"], +div[class^="pictureInPicture-"], div[class^="group-"], div[class*="card"], div[class^="item-"], @@ -278,8 +281,8 @@ section div[class^="children-"] } /* mobile mode */ -@media screen and (max-device-width: 600px) { - /* FIXME: add close buttons to emoji panel, profile */ +@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; } @@ -293,8 +296,9 @@ section div[class^="children-"] [class*="positionLayer-"], [class*="fullscreenOnMobile"] { overflow: auto; - max-width: 100%; - max-height: 100%; + width: 100%; min-width: 100%; + } + [class^="positionLayer-"] { position: absolute; top: 0 !important; left: 0 !important; @@ -322,7 +326,7 @@ section div[class^="children-"] } } -div[class*="fullscreenOnMobile"] div[class^="flex"] { +div[class*="fullscreenOnMobile"] > div[class^="flex"] { overflow: hidden; } From 53d0041b6ea192e932497311dc31ade455f4c879 Mon Sep 17 00:00:00 2001 From: Er2 Date: Wed, 23 Mar 2022 21:22:04 +0300 Subject: [PATCH 19/82] bugfixes --- btfl.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/btfl.css b/btfl.css index 3757f41..dab1e12 100644 --- a/btfl.css +++ b/btfl.css @@ -23,6 +23,7 @@ [class*="nitro"], [class^="upsell"], [class^="availabilityIndicator-"], +div[class^="quickswitcher-"], div[class^="serverBoostTabItem-"], div[class^="overviewSidebar-"], div[class^="autocompleteShadow-"], @@ -326,7 +327,7 @@ section div[class^="children-"] } } -div[class*="fullscreenOnMobile"] > div[class^="flex"] { +div[class*="fullscreenOnMobile"] div[class^="flex"] * { overflow: hidden; } @@ -342,7 +343,7 @@ div[class^="tabBarItem-"] { background-color: var(--background-modifier-hover); } -div[class^="jumpToPresentBar-"] { +div[class^="messagesWrapper-"] div[class*="Bar-"] { bottom: 16px; padding: 0; } From a754954ce9b7411bd4985f194b820a67bacce86b Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 24 Mar 2022 11:13:32 +0300 Subject: [PATCH 20/82] wut --- btfl.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/btfl.css b/btfl.css index dab1e12..b23bf6f 100644 --- a/btfl.css +++ b/btfl.css @@ -343,7 +343,7 @@ div[class^="tabBarItem-"] { background-color: var(--background-modifier-hover); } -div[class^="messagesWrapper-"] div[class*="Bar-"] { +div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"]) { bottom: 16px; padding: 0; } From 87928cade089e62b706860951fc4853b73854649 Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 24 Mar 2022 13:21:13 +0300 Subject: [PATCH 21/82] text input remake --- btfl.css | 46 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/btfl.css b/btfl.css index b23bf6f..83d55db 100644 --- a/btfl.css +++ b/btfl.css @@ -59,6 +59,8 @@ div[class^="socialLinks-"], /* buttons on chat area */ div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]):not([class^="attachButton-"]), [class^="stickerIcon-"], +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +div[class^="divider-"], div[class^="toolbar-3_"] > :not([aria-label="Close"]), @@ -158,6 +160,7 @@ div[class^="radioBar-"] { [class^="authBox"], [class*="embed"], [class^="checkboxWrapper-"], +div[class^="autocomplete-"], div[class^="pictureInPicture-"], div[class^="group-"], div[class*="card"], @@ -343,13 +346,52 @@ div[class^="tabBarItem-"] { background-color: var(--background-modifier-hover); } +div[class*="templatesList-"] { + height: 128px; +} + +/* text input */ + +div[class^="attachedBars-"], div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"]) { + position: relative; bottom: 16px; padding: 0; } -div[class*="templatesList-"] { - height: 128px; +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] { + background-color: unset; +} +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +button[class ^="attachButton-"], +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +div[class^="textArea-"], +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +div[class^="buttons-"] +{ + background-color: var(--background-secondary); + border-radius: 24px !important; + margin: 0; +} +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +> div[class^="inner-"] { padding: 0; } +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +button[class ^="attachButton-"] { + padding: 8px; + width: auto; height: auto; +} +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +div[class^="textArea-"] { + margin-left: 8px; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +div[class^="textArea-"] > * { left: 12px; } +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] +div[class^="buttons-"] { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; } /* dimmer theme? */ From 96a3c841ee728cb2c280ca6775506670c9950f83 Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 24 Mar 2022 13:30:24 +0300 Subject: [PATCH 22/82] emoji button fix --- btfl.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/btfl.css b/btfl.css index 83d55db..58e3e0a 100644 --- a/btfl.css +++ b/btfl.css @@ -390,6 +390,9 @@ div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] div[class^="textArea-"] > * { left: 12px; } div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] div[class^="buttons-"] { + height: auto; + flex-direction: column; + justify-content: center; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } From 4734adb74f9d572ca4fcb2ea85a55254209c4402 Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 24 Mar 2022 13:49:33 +0300 Subject: [PATCH 23/82] dimmer theme for "download apps" --- btfl.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/btfl.css b/btfl.css index 58e3e0a..4bd37e1 100644 --- a/btfl.css +++ b/btfl.css @@ -398,10 +398,12 @@ div[class^="buttons-"] { } /* dimmer theme? */ +div[class^="downloadApps-"], div[class^="layer-"] div.theme-light div[class*="root-"] -{ background: var(--background-secondary); } +{ background-color: var(--background-secondary) !important; } div[class^="layer-"] div.theme-light div[class*="footer-"] { background: var(--background-primary); } +div[class^="downloadApps-"], div[class^="layer-"] div.theme-light { --header-primary: #dedede; --header-secondary: #cacaca; @@ -413,3 +415,11 @@ div[class^="layer-"] div.theme-light { --background-tertiary: #1e1e1e; color: var(--header-primary); } +div[class^="downloadApps-"] [class*="close-"] +{ color: var(--interactive-normal); } +div[class^="downloadApps-"] [class*="close-"]:hover +{ color: var(--interactive-hover); } +div[class^="downloadApps-"] h3, +div[class^="downloadApps-"] div[class*="footer-"] { + color: var(--header-primary); +} From 7e72aadc06108a0a0abe106deebafcdeff99664e Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 24 Mar 2022 19:19:00 +0300 Subject: [PATCH 24/82] less rewrite --- .gitignore | 1 + btfl.css | 425 ----------------------------------------------- btfl.less | 12 ++ src/dimmer.less | 45 +++++ src/fixes.less | 32 ++++ src/hide.less | 115 +++++++++++++ src/mobile.less | 51 ++++++ src/people.less | 23 +++ src/profile.less | 55 ++++++ src/show.less | 11 ++ src/style.less | 182 ++++++++++++++++++++ 11 files changed, 527 insertions(+), 425 deletions(-) delete mode 100644 btfl.css create mode 100644 btfl.less create mode 100644 src/dimmer.less create mode 100644 src/fixes.less create mode 100644 src/hide.less create mode 100644 src/mobile.less create mode 100644 src/people.less create mode 100644 src/profile.less create mode 100644 src/show.less create mode 100644 src/style.less diff --git a/.gitignore b/.gitignore index f9ffe8b..50c74f4 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ diskort.xpi +btfl.css diff --git a/btfl.css b/btfl.css deleted file mode 100644 index 4bd37e1..0000000 --- a/btfl.css +++ /dev/null @@ -1,425 +0,0 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - -/* to hide */ -[class^="DocSearch"], /* Algolia, f you */ -[class*="tier"], -[class^="username-"], -[class^="discrimBase-"], -[class^="bannerContainer-"], -[class*="banner-"], -[class*="perks"], -[class*="socialLink-"], -[class^="usernameInnerRow-"], -[class^="membersGroup-"], -[class^="searchBar-"], -[class^="nowPlaying"], -[class^="marketing"], -[class^="clickableSticker-"], -[class^="unreadPill-"], -[class^="applicationInstall"], -[class*="nitro"], -[class^="upsell"], -[class^="availabilityIndicator-"], -div[class^="quickswitcher-"], -div[class^="serverBoostTabItem-"], -div[class^="overviewSidebar-"], -div[class^="autocompleteShadow-"], -div[class^="art-"], -div[class^="threadSuggestionBar-"], -div[class^="nameTag-"], -div[class*="hero"], -/*div[class^="button"] button[class^="button-"],*/ -button[class^="shinyButton"], [class*="giftButton"], -button[class*="followButton-"], -/*button[class*="emojiItemDisabled-"],*/ -div[class*="premium"], -div[id*="premium"], -div[role="separator"]:not([id$="new-messages-bar"]), -div[class*="goal"], -div[class^="welcomeCTA-"], -div[class^="channelNotice-"], -h2[class^="privateChannelsHeaderContainer"], -nav[class^="nav-"], -span[class^="questionMark-"], -div[class^="characterCount-"] div[class^="root-"], - -div[class^="keybind-"], /* true must know this! */ - -/* Settings */ -div[aria-controls*="nitro"], -div[aria-controls="library-inventory-tab"], -div[aria-controls="subscriptions-tab"], -div[aria-controls="billing-tab"], -div[aria-controls^="hypesquad"], -div[class^="socialLinks-"], - -/* buttons on chat area */ -div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]):not([class^="attachButton-"]), -[class^="stickerIcon-"], -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -div[class^="divider-"], - -div[class^="toolbar-3_"] > :not([aria-label="Close"]), - -#emoji-picker-tab-panel -div[class^="emojiPicker-"] -> div[class^="header-"], - -section div[class^="children-"] div[class^="spacer-"], - -nav[class^="privateChannels-"] div div -*[data-list-item-id$="nitro"], - -#gif-picker-tab, #sticker-picker-tab, -#private-channels-0, #private-channels-1, #private-channels-2, - -div[class*="templatesList-"] button[class^="container-"] ~ *, - -[class*="artwork-"], -div[class^="characterBackground-"] [class*="rightSplit-"], - -/* main page */ -#app-mount div:not([class]) div[class=""] div:not([class]), -#app-mount div:not([class]) div[class=""] div div[class*="background-"], -#app-mount div:not([class]) div[class=""] div[class^="grid-"] div[class^="animation-"] -{ - all: unset !important; - display: none !important; - width: 0 !important; - height: 0 !important; -} -div[aria-label="Servers"] ~ div -{ - /* FIXME: Localized string and bottom is broken */ - position: absolute; - bottom: 0; - display: none; -} - -/* to show */ -div[class^="scroller-"] div[class^="tutorialContainer-"] -{ - /* FIXME: goto FIXME above */ - display: unset; - margin: 0; -} - -:not([class^="listItemContents-"]) > div[class^="userInfo-"] { - padding-top: 48px; - justify-content: left; -} -div[class^="userInfo-"] button { - margin-left: 32px; - margin-top: -8px; -} -div[class^="userInfo-"] div[class^="avatar-"] { - top: 32px; -} - -div[class^="headerTop-"] div[class^="headerText"] -{ margin-left: 84px; } -div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) { - margin-left: -8px; - margin-top: -8px; -} - -div[class^="peopleListItem-"] -div -div[class^="userInfo-"] div[class^="avatar-"] { - top: 0; -} - -div[class^="messagesWrapper-"] div { - scrollbar-width: thin; -} - -#emoji-picker-tab-panel:not([role="dialog"]) { - position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; -} - -#emoji-picker-tab-panel -div[class^="wrapper-"] { - top: 0; - border-radius: 5px 0 0 5px; -} - -div[class^="avatarWrapper-"] { - margin-right: auto; -} - -div[class^="radioBar-"] { - border: none; -} - -/* rounder */ -[class^="authBox"], -[class*="embed"], -[class^="checkboxWrapper-"], -div[class^="autocomplete-"], -div[class^="pictureInPicture-"], -div[class^="group-"], -div[class*="card"], -div[class^="item-"], -div[class^="select-"], -div[class^="popout"], -div[class^="userPopout-"], -div[class^="accountProfile"], -div[class^="profileBanner"], -div[class^="connectedAccount"], -div[class*="fullscreenOnMobile"], -div[class^="auditLog-"], -div[class^="auditLog-"] > div, -div[class*="root"] div[class^="flex-"], -div[class^="menu"], -div[class^="messagesWrapper-"] div, -div[class^="markup-"] pre code, -div[class^="sidebar-"], -div[class^="container-"], -div[class^="chat-"] -{ - border-radius: 16px !important; -} - -div[class^="sidebar-"] -{ - margin-right: 8px; -} - -/* sharper */ -div[class^="tabBarItem-"], -div[class^="checkbox"], -li[class^="channel-"], -#channels ul li div > div[class^="content-"], -button[class*="button"], -[role="dialog"], -div[class^="colorPicker"] div div[class^="saturation"] div, -[class*="Text"], [class*="text"], -div[class*="input"], -input[class^="inputDefault-"], -[class^="avatar-"], -div[class^="role-"], -div[class^="menu-"] div -{ - border-radius: 8px !important; -} - -div[class^="tabBarItem-"], -div[class^="auditLog"] div[class^="headerExpanded-"] -{ - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -div[class^="auditLog-"] div[class^="changeDetails-"] -{ - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; -} - -[class*="embed-"], -div[class^="messagesWrapper-"] -div[class*="mentioned"] -{ - border-top-left-radius: 4px !important; - border-bottom-left-radius: 4px !important; -} - -/* no banners */ - /* user popup */ - div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 72px; } - div[class^="userPopout-"] div[class^="avatarWrapper"] { left: 8px; top: 16px; } - - /* profile */ - header div[class^="nameTagWithCustomStatus-"], - header div[class^="nameTagNoCustomStatus-"] { - margin-bottom: 48px; - margin-left: 160px; - } - -/* member list */ -aside[class^="membersWrap-"] -{ - min-width: 48px; - width: 0; -} - -div[class^="children-"] div[class^="nicknames-"], -div[class^="children-"] div[class^="topic-"] -{ - width: unset !important; - flex-grow: 0; -} - -aside[class^="membersWrap-"] div[class^="content-"], -nav[class^="privateChannels-"] div ul[class^="content-"]:only-child, -ul[class^="emojiListRow-"] -{ - height: unset !important; - flex-grow: 0; -} - -div[class^="members-"], -div[class^="member-"], -div[class*="root"] div[class^="flex-"] div[class^="header"] -{ - padding: 0; - flex: 0 0 100%; - margin-left: 0; -} - -section, header, -div[class^="content-"]::before, -div[class^="tabBody-"]::before -{ - box-shadow: unset !important; -} - -section div[class^="children-"] -{ - justify-content: center; -} - -/* mobile mode */ -@media screen and (max-device-width: 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^="base-"], [class^="contentRegion-"] { min-width: 200%; } - [class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); } - [class^="chat-"] { width: 100%; } - [class^="tools"] { position: unset !important; } - - [class*="positionLayer-"], - [class*="fullscreenOnMobile"] { - overflow: auto; - 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: 16px; - padding: 0 8px; - font-size: 11pt; - } -} - -div[class*="fullscreenOnMobile"] div[class^="flex"] * { - overflow: hidden; -} - -div[class^="tabBarItem-"] { - margin-right: 16px; - padding: 4px 8px; - margin-top: 16px; -} - -[role="tab"][class*="selected-"], -[role="tab"]:hover -{ - background-color: var(--background-modifier-hover); -} - -div[class*="templatesList-"] { - height: 128px; -} - -/* text input */ - -div[class^="attachedBars-"], -div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"]) { - position: relative; - bottom: 16px; - padding: 0; -} - -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] { - background-color: unset; -} -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -button[class ^="attachButton-"], -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -div[class^="textArea-"], -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -div[class^="buttons-"] -{ - background-color: var(--background-secondary); - border-radius: 24px !important; - margin: 0; -} -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -> div[class^="inner-"] { padding: 0; } -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -button[class ^="attachButton-"] { - padding: 8px; - width: auto; height: auto; -} -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -div[class^="textArea-"] { - margin-left: 8px; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -div[class^="textArea-"] > * { left: 12px; } -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] -div[class^="buttons-"] { - height: auto; - flex-direction: column; - justify-content: center; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; -} - -/* dimmer theme? */ -div[class^="downloadApps-"], -div[class^="layer-"] div.theme-light div[class*="root-"] -{ background-color: var(--background-secondary) !important; } -div[class^="layer-"] div.theme-light div[class*="footer-"] -{ background: var(--background-primary); } -div[class^="downloadApps-"], -div[class^="layer-"] div.theme-light { - --header-primary: #dedede; - --header-secondary: #cacaca; - --text-normal: #dcddde; - --interactive-normal: #bebebe; - --interactive-hover: #dedede; - --background-primary: #3e3e3e; - --background-secondary: #2e2e2e; - --background-tertiary: #1e1e1e; - color: var(--header-primary); -} -div[class^="downloadApps-"] [class*="close-"] -{ color: var(--interactive-normal); } -div[class^="downloadApps-"] [class*="close-"]:hover -{ color: var(--interactive-hover); } -div[class^="downloadApps-"] h3, -div[class^="downloadApps-"] div[class*="footer-"] { - color: var(--header-primary); -} diff --git a/btfl.less b/btfl.less new file mode 100644 index 0000000..e534de2 --- /dev/null +++ b/btfl.less @@ -0,0 +1,12 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +@import "src/hide"; +@import "src/show"; +@import "src/dimmer"; +@import "src/profile"; +@import "src/people"; +@import "src/fixes"; +@import "src/style"; diff --git a/src/dimmer.less b/src/dimmer.less new file mode 100644 index 0000000..e93799f --- /dev/null +++ b/src/dimmer.less @@ -0,0 +1,45 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +.dimmer-theme { + --header-primary: #dedede; + --header-secondary: #cacaca; + --text-normal: #dcddde; + --interactive-normal: #bebebe; + --interactive-hover: #dedede; + --background-primary: #3e3e3e; + --background-secondary: #2e2e2e; + --background-tertiary: #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-"] { + .dimmer-theme(); + + 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/fixes.less b/src/fixes.less new file mode 100644 index 0000000..9c08f72 --- /dev/null +++ b/src/fixes.less @@ -0,0 +1,32 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +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; +} diff --git a/src/hide.less b/src/hide.less new file mode 100644 index 0000000..21f2896 --- /dev/null +++ b/src/hide.less @@ -0,0 +1,115 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +// Site +[class^="DocSearch"], // Algolia, f you +#app-mount div:not([class]) div[class=""] div:not([class]), // main page content +#app-mount div:not([class]) div[class=""] div div[class*="background-"], // nitro animation at top +#app-mount div:not([class]) div[class=""] div[class^="grid-"] div[class^="animation-"], // nitro animation + +// Remove background (invite, login) +[class*="artwork-"], +div[class^="characterBackground-"] [class*="rightSplit-"], +div[class^="art-"], + +// New server (inside app) +div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are really useless + +// Nicks +[class^="username-"], // in profile +[class^="discrimBase-"], + +div[class^="nameTag-"], +[class^="usernameInnerRow-"], // at settings + +// Nitro +[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"], + +// Suggestions +button[class*="followButton-"], // at top in channels +[class^="nowPlaying"], // in friends tab +[class^="applicationInstall"], // at bot profile +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 + +// Profile +[class^="bannerContainer-"], +[class*="banner-"], + +// Settings +div[class^="keybind-"], // true must know it! +[class*="socialLink-"], // in change log +div[class^="socialLinks-"], // in settings at bottom + + // Tabs + div[aria-controls*="nitro"], + div[aria-controls="library-inventory-tab"], + div[aria-controls="subscriptions-tab"], + div[aria-controls="billing-tab"], + div[aria-controls^="hypesquad"], + +// Member list +[class^="membersGroup-"], // groups (roles) + +// 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 + +// Search +[class^="searchBar-"], +div[class^="quickswitcher-"], // Ctrl-K +div[class^="toolbar-3_"] > :not([aria-label="Close"]), // toolbar at top, FIXME: fixed string + +// Sidebar +div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc. +h2[class^="privateChannelsHeaderContainer"], // direct messages label +// #private-channels-0, #private-channels-1, #private-channels-2, // to check + +// Text area +div[class^="channelTextArea-"] div div > div // only attach and emoji at text area +button:not([class^="emojiButton"]):not([class^="attachButton-"]), +div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] // divider breaks redesigned text area + div[class^="divider-"], + +// Other +div[class^="autocompleteShadow-"], // bugged +[class^="unreadPill-"], // NEW at right, not needed +div[class^="overviewSidebar-"], // at community creation, not needed +section div[class^="children-"] div[class^="spacer-"], // to check +{ + all: unset !important; + display: none !important; + width: 0 !important; + height: 0 !important; +} + +div[aria-label="Servers"] ~ div +{ + // FIXME: Fixed string and bottom is broken + position: absolute; + bottom: 0; + display: none; +} diff --git a/src/mobile.less b/src/mobile.less new file mode 100644 index 0000000..a3d14d1 --- /dev/null +++ b/src/mobile.less @@ -0,0 +1,51 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +// 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^="base-"], [class^="contentRegion-"] { min-width: 200%; } + [class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); } + [class^="chat-"] { width: 100%; } + [class^="tools"] { position: unset !important; } + + [class*="positionLayer-"], + [class*="fullscreenOnMobile"] { + overflow: auto; + 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: 16px; + padding: 0 8px; + font-size: 11pt; + } +} diff --git a/src/people.less b/src/people.less new file mode 100644 index 0000000..a174912 --- /dev/null +++ b/src/people.less @@ -0,0 +1,23 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +aside[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/profile.less b/src/profile.less new file mode 100644 index 0000000..f27cd7f --- /dev/null +++ b/src/profile.less @@ -0,0 +1,55 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +div[class^="userInfo-"] { + // settings + padding-top: 48px; + justify-content: left; + + button { + margin-left: 32px; + margin-top: -8px; + } + + div[class^="avatar-"] { + top: 32px; + } +} + +div[class^="listItemContents-"] div[class^="userInfo"] { + padding-top: 0; + div[class^="avatar-"] { + top: 0; + } +} + +div[class^="userPopout-"] { + div[class^="avatarWrapper"] { + top: 8px; // fix divider bug + } + + div[class^="headerTop-"] { + padding-top: 72px; // also fix divider bug + } +} + +div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) { + margin-left: -8px; + margin-top: -8px; +} + +div[class^="headerTop-"] div[class^="headerText"] { + margin-left: 96px; // fix nickname +} + +div[class^="avatarWrapper-"] { + margin-right: auto; // fix aligment (bottom of sidebar) +} + +header div[class^="nameTagWithCustomStatus-"], +header div[class^="nameTagNoCustomStatus-"] { + margin-bottom: 48px; // some space under avatar + margin-left: 160px; // after avatar, not before +} diff --git a/src/show.less b/src/show.less new file mode 100644 index 0000000..835cebf --- /dev/null +++ b/src/show.less @@ -0,0 +1,11 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +div[class^="scroller-"] div[class^="tutorialContainer-"] // Add server +{ + // FIXME: Fixed string and bottom is broken + display: unset; + margin: 0; +} diff --git a/src/style.less b/src/style.less new file mode 100644 index 0000000..b4c9e6e --- /dev/null +++ b/src/style.less @@ -0,0 +1,182 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +@round: 8px; +@rounder: 16px; +@roundest: 24px; // text area + +// Round + // UI elements + div[class^="tabBarItem-"], + div[class^="checkbox"], + button[class*="button"], + + // UI parts + li[class^="channel-"], + [class^="avatar-"], + [role="dialog"], + div[class^="menu-"] div, + div[class^="role-"], + div[class^="colorPicker"] div div[class^="saturation"] div, + #channels ul li div > div[class^="content-"], + + // Input + div[class*="input"], + input[class^="inputDefault-"], + [class*="Text"], [class*="text"], +{ + border-radius: @round !important; +} + +// Rounder + // Popouts + [class^="authBox"], // login + div[class^="menu"], + div[class*="popout"], + div[class*="Popout"], + div[class*="fullscreenOnMobile"], + div[class*="root"] div[class^="flex-"], + + // UI elements + [class^="checkboxWrapper-"], // checkbox + [class*="embed"], + div[class^="sidebar-"], + div[class^="markup-"] pre code, // ```code``` + div[class^="item-"], // in settings + div[class^="group-"], // radiogroup + div[class*="card"], + + // UI parts + div[class^="auditLog-"], + div[class^="auditLog-"] > div, + + div[class^="connectedAccount"], // in profile + div[class^="profileBanner"], + div[class^="accountProfile"], + + div[class^="autocomplete-"], // input + div[class^="pictureInPicture-"], + + div[class^="select-"], + div[class^="messagesWrapper-"] div, + div[class^="container-"], + div[class^="chat-"], +{ + border-radius: @rounder !important; +} + +// Movement +div[class^="sidebar-"] { + margin-right: (@rounder / 2); +} + +div[class^="radioBar-"] { + border: none; +} + +.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; +} + +div[class^="tabBarItem-"], +div[class^="auditLog"] div[class^="headerExpanded-"] +{ .bottom-border(); } + +div[class^="auditLog-"] div[class^="changeDetails-"] +{ .top-border(); } + +[class*="embed-"], +div[class^="messagesWrapper-"] +div[class*="mentioned"] +{ .left-border(4px); } + +// center titles + +section, header, +div[class^="content-"]::before, +div[class^="tabBody-"]::before +{ + box-shadow: unset !important; +} + +section div[class^="children-"] +{ justify-content: center; } + +// tabs +div[class^="tabBarItem-"] { + margin-right: 16px; + padding: 4px 8px; + margin-top: 16px; +} + +[role="tab"][class*="selected-"], +[role="tab"]:hover +{ + background-color: var(--background-modifier-hover); +} + +// 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(); + + & > * { left: (@roundest / 2); } + } + + div[class^="buttons-"] { + height: auto; // to match input height + flex-direction: column; // to allow buttons center + justify-content: center; // and center it + .left-border(); + } + } +} From 957f5b091f882cc8a84c4db1314bc3392581a3db Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 24 Mar 2022 19:55:22 +0300 Subject: [PATCH 25/82] fix centering --- src/fixes.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/fixes.less b/src/fixes.less index 9c08f72..0274c6d 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -21,6 +21,14 @@ div[class^="messagesWrapper-"] div { } } +// Fix centering +div[class^="children-"] div[class^="nicknames-"], +div[class^="children-"] div[class^="topic-"] +{ + width: unset !important; + flex-grow: 0; +} + div[class*="fullscreenOnMobile"] div[class^="flex"] * { // fix overflow overflow: hidden; From 57f82d613b1c34d7e8092c55e6bfbdf85ce84210 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 26 Mar 2022 20:48:55 +0300 Subject: [PATCH 26/82] remade Change User-Agent (for future). No verified bots (v BOT). Change side to top bar in settings. Some settings were redesigned. --- btfl.less | 1 + js/bg.js | 32 ++++++++++++------ src/fixes.less | 23 +++++++++++++ src/hide.less | 8 +---- src/mobile.less | 13 ++++++-- src/profile.less | 8 +++-- src/settings.less | 83 +++++++++++++++++++++++++++++++++++++++++++++++ src/style.less | 28 +++++++++++----- 8 files changed, 166 insertions(+), 30 deletions(-) create mode 100644 src/settings.less diff --git a/btfl.less b/btfl.less index e534de2..bca6a45 100644 --- a/btfl.less +++ b/btfl.less @@ -6,6 +6,7 @@ @import "src/hide"; @import "src/show"; @import "src/dimmer"; +@import "src/mobile"; @import "src/profile"; @import "src/people"; @import "src/fixes"; diff --git a/js/bg.js b/js/bg.js index 6a1a112..cc93929 100644 --- a/js/bg.js +++ b/js/bg.js @@ -4,15 +4,27 @@ */ // Disable CSP -function onHeaders(det) { - for (var i = 0; i < det.responseHeaders.length; i++) { - if (det.responseHeaders[i].name.toLowerCase() == 'content-security-policy' - || det.responseHeaders[i].name.toLowerCase() == 'content-security-policy-report-only' - ) det.responseHeaders[i].value = ''; - } - return { responseHeaders: det.responseHeaders }; -} - chrome.webRequest.onHeadersReceived.addListener( - onHeaders, {urls: ['']}, ['blocking', 'responseHeaders'] + function(det) { + for (let head of det.responseHeaders) { + let n = head.name.toLowerCase(); + if (n == 'content-security-policy' || n == 'content-security-policy-report-only' + ) head.value = ''; + } + return { responseHeaders: det.responseHeaders }; + }, + {urls: ['']}, ['blocking', 'responseHeaders'] ); + +chrome.webRequest.onBeforeSendHeaders.addListener( + function(det) { + for (let head of det.requestHeaders) { + let n = head.name.toLowerCase(); + if (n == 'user-agent') + head.value = 'DisKort/1.0 (Linux) Firefox/99.0'; + } + return { requestHeaders: det.requestHeaders }; + }, + {urls: ['']}, ['blocking', 'requestHeaders'] +); + diff --git a/src/fixes.less b/src/fixes.less index 0274c6d..0fda714 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -38,3 +38,26 @@ 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/hide.less b/src/hide.less index 21f2896..a912051 100644 --- a/src/hide.less +++ b/src/hide.less @@ -53,6 +53,7 @@ div[class^="welcomeCTA-"], // wave to say hi on server div[role="separator"]:not([id$="new-messages-bar"]), // aren't needed // Profile +[class^="botTagVerified-"], [class^="bannerContainer-"], [class*="banner-"], @@ -61,13 +62,6 @@ div[class^="keybind-"], // true must know it! [class*="socialLink-"], // in change log div[class^="socialLinks-"], // in settings at bottom - // Tabs - div[aria-controls*="nitro"], - div[aria-controls="library-inventory-tab"], - div[aria-controls="subscriptions-tab"], - div[aria-controls="billing-tab"], - div[aria-controls^="hypesquad"], - // Member list [class^="membersGroup-"], // groups (roles) diff --git a/src/mobile.less b/src/mobile.less index a3d14d1..92e03f7 100644 --- a/src/mobile.less +++ b/src/mobile.less @@ -12,7 +12,6 @@ [class^="layer-"] { padding: 0; margin: auto; } [class^="layer-"] > [class^="container-"], [class^="standardSidebarView-"] { overflow-x: scroll; } - [class^="base-"], [class^="contentRegion-"] { min-width: 200%; } [class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); } [class^="chat-"] { width: 100%; } [class^="tools"] { position: unset !important; } @@ -44,8 +43,16 @@ [class^="member-"], #channels li, div[class^="tabBarItem-"] { - margin-top: 16px; - padding: 0 8px; + margin-top: 8px; + padding: 0 12px; font-size: 11pt; } + + [class^="base-"], + [class^="contentRegion-"], + div[class^="sidebarRegion-"], // all in settings + { + width: 200%; + min-width: 200%; + } } diff --git a/src/profile.less b/src/profile.less index f27cd7f..428eda3 100644 --- a/src/profile.less +++ b/src/profile.less @@ -3,10 +3,12 @@ * Zlib License */ + div[class^="userInfo-"] { // settings - padding-top: 48px; justify-content: left; + padding-top: 24px; + height: 56px; button { margin-left: 32px; @@ -14,7 +16,9 @@ div[class^="userInfo-"] { } div[class^="avatar-"] { - top: 32px; + top: 0; + border-radius: 0 !important; + border-bottom-right-radius: 50% !important; } } diff --git a/src/settings.less b/src/settings.less new file mode 100644 index 0000000..3062c3e --- /dev/null +++ b/src/settings.less @@ -0,0 +1,83 @@ +/** DisKort + * (c) Er2 2022 + * Zlib License + */ + +// New sidebar in settings +div[class^="standardSidebarView-"] { + flex-direction: column; + + div[class^="sidebarRegion-"] { + overflow: auto hidden; + scrollbar-width: thin; + background: var(--background-secondary); // bugfix + flex-basis: unset; // bugfix to normalize height + + div[class^="header-"], + div[class^="separator-"] + { display: none; } + + & > div { + overflow: auto hidden !important; + justify-content: left; + max-width: 100%; + + & > nav { + padding: 0; + & > div { + 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="keybinds-tab"], +div[aria-controls="game-activity-tab"], +div[aria-controls^="hypesquad"], +{ + display: none; +} + +#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%; + } +} + +#notifications-tab div[class^="children"] { + div:nth-child(6) + { display: none; } +} + +div[class^="accountProfileCard-"] { + div[class^="field-"]:nth-child(1) { + height: 0; + div[class^="constrainedRow-"] { + display: none; + } + button { + top: -48pt; + left: 60vh; + } + } +} diff --git a/src/style.less b/src/style.less index b4c9e6e..f7afcdf 100644 --- a/src/style.less +++ b/src/style.less @@ -7,6 +7,9 @@ @rounder: 16px; @roundest: 24px; // text area +@div-width: (@rounder / 2); +@tab-height: 40px; + // Round // UI elements div[class^="tabBarItem-"], @@ -69,7 +72,7 @@ // Movement div[class^="sidebar-"] { - margin-right: (@rounder / 2); + margin-right: @div-width; } div[class^="radioBar-"] { @@ -96,12 +99,12 @@ div[class^="radioBar-"] { border-top-right-radius: @r !important; } -div[class^="tabBarItem-"], -div[class^="auditLog"] div[class^="headerExpanded-"] -{ .bottom-border(); } - -div[class^="auditLog-"] div[class^="changeDetails-"] -{ .top-border(); } +div[class^="auditLog"] { + div[class^="headerExpanded-"] + { .bottom-border(); } + div[class^="changeDetails-"] + { .top-border(); } +} [class*="embed-"], div[class^="messagesWrapper-"] @@ -121,10 +124,17 @@ section div[class^="children-"] { justify-content: center; } // tabs +div[class^="side-"] div[role="tab"], div[class^="tabBarItem-"] { + .bottom-border(); + margin: 0; + margin-top: 8px; margin-right: 16px; padding: 4px 8px; - margin-top: 16px; +} + +div[class^="tabBar-"] { + height: @tab-height; } [role="tab"][class*="selected-"], @@ -180,3 +190,5 @@ div[class^="channelTextArea-"] { } } } + +@import "settings"; From 31896c4fb1f868f0410291e1be2fa3e074ac8741 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 27 Mar 2022 11:35:11 +0300 Subject: [PATCH 27/82] update Nicknames in compact mode. Settings tabs (edit profile and appearance) were restyled. --- src/hide.less | 4 +++- src/profile.less | 2 +- src/settings.less | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) diff --git a/src/hide.less b/src/hide.less index a912051..9becef0 100644 --- a/src/hide.less +++ b/src/hide.less @@ -18,9 +18,11 @@ div[class^="art-"], div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are really useless // Nicks -[class^="username-"], // in profile +[class*="cozyMessage-"] [class^="username-"], // in message +div[class*="nameTag-"] [class^="username-"], // outside message [class^="discrimBase-"], +div[class^="discordTag-"] [class^="username-"], // friends tab div[class^="nameTag-"], [class^="usernameInnerRow-"], // at settings diff --git a/src/profile.less b/src/profile.less index 428eda3..541022d 100644 --- a/src/profile.less +++ b/src/profile.less @@ -4,7 +4,7 @@ */ -div[class^="userInfo-"] { +div[class^="accountProfileCard-"] div[class^="userInfo-"] { // settings justify-content: left; padding-top: 24px; diff --git a/src/settings.less b/src/settings.less index 3062c3e..4bdb953 100644 --- a/src/settings.less +++ b/src/settings.less @@ -53,6 +53,27 @@ div[aria-controls^="hypesquad"], display: none; } +#profile-customization-tab div[class^="children"] +div[class^="baseLayout-"] { + & > div:not([class]) { + width: 100%; + + div[class^="customizationSection-"] { + &:nth-child(2), &:nth-child(3) { + display: none; + } + } + } + + div[class^="bioTextArea-"] { + height: 25vh; + } +} + +[class^="optionBox-"]:nth-child(2) { + display: none; +} + #connections-tab div[class^="children-"] { flex-direction: row; div[class^="accountList-"] { @@ -64,6 +85,26 @@ div[aria-controls^="hypesquad"], } } +#appearance-tab div[class^="children-"] { + flex-flow: row wrap; + column-gap: @div-width * 2; + + & > div:first-child { + width: 100%; + } + + div[class^="marginTop8-"], div[class^="marginTop20-"] { + width: calc(50% - @div-width); + + div[class^="divider-"] + { display: none; } + } + + div[class^="marginTop20-"] > div[class^="slider-"] { + margin-top: 28px; + } +} + #notifications-tab div[class^="children"] { div:nth-child(6) { display: none; } From ba3d13a90e350527ab9bae046c3fd53982802577 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 27 Mar 2022 12:22:00 +0300 Subject: [PATCH 28/82] update Fix message buttons in text area. Restyled accessibility tab in settings. --- src/hide.less | 8 ++++++-- src/profile.less | 1 - src/settings.less | 14 ++++++++++++++ src/style.less | 5 +++-- 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/hide.less b/src/hide.less index 9becef0..9d0b0f7 100644 --- a/src/hide.less +++ b/src/hide.less @@ -85,8 +85,12 @@ h2[class^="privateChannelsHeaderContainer"], // direct messages label // #private-channels-0, #private-channels-1, #private-channels-2, // to check // Text area -div[class^="channelTextArea-"] div div > div // only attach and emoji at text area -button:not([class^="emojiButton"]):not([class^="attachButton-"]), +div[class^="channelTextArea-"] div div > div[class^="buttons-"] + > button, // gift button, f you + +div[class^="channelTextArea-"] div div > div[class^="buttons-"] // block all except emoji (and send button, if exists) + > div.expression-picker-chat-input-button:not(:nth-child(4)), + div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] // divider breaks redesigned text area div[class^="divider-"], diff --git a/src/profile.less b/src/profile.less index 541022d..29bab27 100644 --- a/src/profile.less +++ b/src/profile.less @@ -3,7 +3,6 @@ * Zlib License */ - div[class^="accountProfileCard-"] div[class^="userInfo-"] { // settings justify-content: left; diff --git a/src/settings.less b/src/settings.less index 4bdb953..db5cdf4 100644 --- a/src/settings.less +++ b/src/settings.less @@ -105,6 +105,20 @@ div[class^="baseLayout-"] { } } +#accessibility-tab div div[class^="children-"] { + & > div { + &:nth-child(2), + &:nth-child(3), + &:nth-child(6), + &:nth-child(7) + { display: none; } + + &:nth-child(4) { + margin-top: @div-width * 2; + } + } +} + #notifications-tab div[class^="children"] { div:nth-child(6) { display: none; } diff --git a/src/style.less b/src/style.less index f7afcdf..60e0084 100644 --- a/src/style.less +++ b/src/style.less @@ -184,8 +184,9 @@ div[class^="channelTextArea-"] { div[class^="buttons-"] { height: auto; // to match input height - flex-direction: column; // to allow buttons center - justify-content: center; // and center it + & > * { + align-items: center; // center buttons + } .left-border(); } } From c84ba6c4d940759d5948e09a366c680b9af7115a Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 27 Mar 2022 12:28:24 +0300 Subject: [PATCH 29/82] fix scaling problem --- src/settings.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/settings.less b/src/settings.less index db5cdf4..9866f37 100644 --- a/src/settings.less +++ b/src/settings.less @@ -12,6 +12,7 @@ div[class^="standardSidebarView-"] { scrollbar-width: thin; background: var(--background-secondary); // bugfix flex-basis: unset; // bugfix to normalize height + flex-grow: 0; // fix scaling div[class^="header-"], div[class^="separator-"] From 68db679de79dd5344d4dd633cea574760d550b7a Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 27 Mar 2022 14:20:53 +0300 Subject: [PATCH 30/82] update Remove nitro perks at site. Fix topbar colors. --- src/hide.less | 1 + src/settings.less | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/hide.less b/src/hide.less index 9d0b0f7..bbff7b6 100644 --- a/src/hide.less +++ b/src/hide.less @@ -4,6 +4,7 @@ */ // Site +[class*="perksContainer-"], [class^="DocSearch"], // Algolia, f you #app-mount div:not([class]) div[class=""] div:not([class]), // main page content #app-mount div:not([class]) div[class=""] div div[class*="background-"], // nitro animation at top diff --git a/src/settings.less b/src/settings.less index 9866f37..59a3ede 100644 --- a/src/settings.less +++ b/src/settings.less @@ -8,9 +8,7 @@ div[class^="standardSidebarView-"] { flex-direction: column; div[class^="sidebarRegion-"] { - overflow: auto hidden; - scrollbar-width: thin; - background: var(--background-secondary); // bugfix + overflow: hidden; flex-basis: unset; // bugfix to normalize height flex-grow: 0; // fix scaling @@ -19,12 +17,16 @@ div[class^="standardSidebarView-"] { { 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 { flex-direction: row; height: @tab-height; From d6b0bb3028d197a26530a47f9c376f45e545cac7 Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 29 Mar 2022 19:11:13 +0300 Subject: [PATCH 31/82] mica from win11 --- src/hide.less | 2 ++ src/settings.less | 1 + src/style.less | 54 +++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 53 insertions(+), 4 deletions(-) diff --git a/src/hide.less b/src/hide.less index bbff7b6..20d3a47 100644 --- a/src/hide.less +++ b/src/hide.less @@ -100,6 +100,8 @@ div[class^="autocompleteShadow-"], // bugged [class^="unreadPill-"], // NEW at right, not needed div[class^="overviewSidebar-"], // at community creation, not needed section div[class^="children-"] div[class^="spacer-"], // to check + +div[class^="children-"]::after, // shadow at title { all: unset !important; display: none !important; diff --git a/src/settings.less b/src/settings.less index 59a3ede..4075df2 100644 --- a/src/settings.less +++ b/src/settings.less @@ -28,6 +28,7 @@ div[class^="standardSidebarView-"] { width: unset; // to increase size background: var(--background-secondary); // bugfix & > div { + padding-left: @rounder; flex-direction: row; height: @tab-height; } diff --git a/src/style.less b/src/style.less index 60e0084..3d900a6 100644 --- a/src/style.less +++ b/src/style.less @@ -20,7 +20,7 @@ li[class^="channel-"], [class^="avatar-"], [role="dialog"], - div[class^="menu-"] div, + div[class^="menu-"] div, // menu elements div[class^="role-"], div[class^="colorPicker"] div div[class^="saturation"] div, #channels ul li div > div[class^="content-"], @@ -33,6 +33,12 @@ border-radius: @round !important; } +// Blur menus +[role="menu"] { + background-color: unset; + backdrop-filter: blur(@round) saturate(100%); +} + // Rounder // Popouts [class^="authBox"], // login @@ -45,7 +51,6 @@ // UI elements [class^="checkboxWrapper-"], // checkbox [class*="embed"], - div[class^="sidebar-"], div[class^="markup-"] pre code, // ```code``` div[class^="item-"], // in settings div[class^="group-"], // radiogroup @@ -64,8 +69,9 @@ div[class^="select-"], div[class^="messagesWrapper-"] div, - div[class^="container-"], - div[class^="chat-"], + + div[class^="container"] > div, + div[class^="chat-"] > div[class^="content-"], { border-radius: @rounder !important; } @@ -192,4 +198,44 @@ div[class^="channelTextArea-"] { } } +// Mica-like material from Windows 11 + +[class^="sidebar-"] { + &, & > nav { + background-color: transparent; + } + + & > nav, + & > nav div[class^="scroller-"] { + .top-border(@rounder); + } + + & > nav div[class^="scroller-"] { + background-color: var(--background-secondary); + } + + nav[class^="private"] { + margin-top: 48px; + } + + 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, +[class^="container-"] > section { + background-color: var(--background-tertiary) !important; +} + @import "settings"; From 5be42013db8f90e498297068d7d6af90b0edb0c4 Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 29 Mar 2022 19:17:14 +0300 Subject: [PATCH 32/82] fix profile edit button --- src/settings.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings.less b/src/settings.less index 4075df2..e22021d 100644 --- a/src/settings.less +++ b/src/settings.less @@ -136,7 +136,7 @@ div[class^="accountProfileCard-"] { } button { top: -48pt; - left: 60vh; + left: 360pt; } } } From ce84908df66fcf8004674d465e00e432d564826b Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 29 Mar 2022 19:18:58 +0300 Subject: [PATCH 33/82] stock firefox fix --- src/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.less b/src/style.less index 3d900a6..5af00a9 100644 --- a/src/style.less +++ b/src/style.less @@ -35,7 +35,7 @@ // Blur menus [role="menu"] { - background-color: unset; + background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(@round) saturate(100%); } From 552e7e8233eff153c2b4e0ce1169da1d883fc099 Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 29 Mar 2022 20:59:09 +0300 Subject: [PATCH 34/82] update Menu buttons glows on hover. Message nicks shows in settings. --- src/hide.less | 2 +- src/style.less | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/hide.less b/src/hide.less index 20d3a47..23cd9de 100644 --- a/src/hide.less +++ b/src/hide.less @@ -19,7 +19,7 @@ div[class^="art-"], div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are really useless // Nicks -[class*="cozyMessage-"] [class^="username-"], // in message +li[class^="messageListItem-"] [class*="cozyMessage-"] [class^="username-"], // in message div[class*="nameTag-"] [class^="username-"], // outside message [class^="discrimBase-"], diff --git a/src/style.less b/src/style.less index 5af00a9..1327367 100644 --- a/src/style.less +++ b/src/style.less @@ -10,6 +10,8 @@ @div-width: (@rounder / 2); @tab-height: 40px; +@glow-color: #fff; + // Round // UI elements div[class^="tabBarItem-"], @@ -20,7 +22,7 @@ li[class^="channel-"], [class^="avatar-"], [role="dialog"], - div[class^="menu-"] div, // menu elements + div[class^="menu-"] [role="menuitem"], div[class^="role-"], div[class^="colorPicker"] div div[class^="saturation"] div, #channels ul li div > div[class^="content-"], @@ -42,7 +44,7 @@ // Rounder // Popouts [class^="authBox"], // login - div[class^="menu"], + [role="menu"], div[class*="popout"], div[class*="Popout"], div[class*="fullscreenOnMobile"], @@ -238,4 +240,16 @@ div[class^="chat-"] background-color: var(--background-tertiary) !important; } +@keyframes glow { + from { box-shadow: 0 0 2px 4px @glow-color; } + to { box-shadow: 0 0 1px 2px @glow-color - #555; } +} + +[class^="item-"] { + &[class*="focused-"] { + background-color: unset; + animation: glow 0.7s linear infinite alternate; + } +} + @import "settings"; From efa5111861438a7d5cfb18bfb5c913c40f22ad98 Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 29 Mar 2022 21:29:46 +0300 Subject: [PATCH 35/82] update Remove channel descriptions. Discord label at top left in friends tab. --- src/fixes.less | 8 -------- src/hide.less | 2 ++ src/style.less | 10 +++++++++- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/fixes.less b/src/fixes.less index 0fda714..51839af 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -21,14 +21,6 @@ div[class^="messagesWrapper-"] div { } } -// Fix centering -div[class^="children-"] div[class^="nicknames-"], -div[class^="children-"] div[class^="topic-"] -{ - width: unset !important; - flex-grow: 0; -} - div[class*="fullscreenOnMobile"] div[class^="flex"] * { // fix overflow overflow: hidden; diff --git a/src/hide.less b/src/hide.less index 23cd9de..710d9e8 100644 --- a/src/hide.less +++ b/src/hide.less @@ -101,6 +101,8 @@ div[class^="autocompleteShadow-"], // bugged div[class^="overviewSidebar-"], // at community creation, not needed section div[class^="children-"] div[class^="spacer-"], // to check +div[class^="base-"] div[class^="children-"] div[class^="divider-"] ~ div:not([class^="tabBar-"]), +div[class^="base-"] div[class^="children-"] div[class^="divider-"], div[class^="children-"]::after, // shadow at title { all: unset !important; diff --git a/src/style.less b/src/style.less index 1327367..5f34a81 100644 --- a/src/style.less +++ b/src/style.less @@ -217,7 +217,15 @@ div[class^="channelTextArea-"] { } nav[class^="private"] { - margin-top: 48px; + &::before { + content: "Discord"; + color: var(--header-primary); + margin: ((48px - 20px) / 2) 16px; // 20px is line-height + font-size: 15px; + line-height: 20px; + font-weight: 600; + font-family: var(--font-display); + } } section { // bottom panel From 6a205227708e9c72234ff57365751b7579750d81 Mon Sep 17 00:00:00 2001 From: Er2 Date: Fri, 1 Apr 2022 20:05:53 +0300 Subject: [PATCH 36/82] april fool from Discord ;) --- src/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.less b/src/style.less index 5f34a81..dbb0790 100644 --- a/src/style.less +++ b/src/style.less @@ -187,7 +187,7 @@ div[class^="channelTextArea-"] { margin-left: 8px; .right-border(); - & > * { left: (@roundest / 2); } + div > * { left: (@roundest / 2); } } div[class^="buttons-"] { From 8b4d980800bcf88c1b6fec08cb8b269bb243aa5e Mon Sep 17 00:00:00 2001 From: Er2 Date: Fri, 1 Apr 2022 21:34:22 +0300 Subject: [PATCH 37/82] new profile page --- src/hide.less | 1 + src/profile.less | 42 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/src/hide.less b/src/hide.less index 710d9e8..ba11a6d 100644 --- a/src/hide.less +++ b/src/hide.less @@ -59,6 +59,7 @@ div[role="separator"]:not([id$="new-messages-bar"]), // aren't needed [class^="botTagVerified-"], [class^="bannerContainer-"], [class*="banner-"], +[class^="badgeList-"], // Settings div[class^="keybind-"], // true must know it! diff --git a/src/profile.less b/src/profile.less index 29bab27..d5b8e7a 100644 --- a/src/profile.less +++ b/src/profile.less @@ -56,3 +56,45 @@ header div[class^="nameTagNoCustomStatus-"] { margin-bottom: 48px; // some space under avatar margin-left: 160px; // after avatar, not before } + +// Redesigned profile page +div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"] { + flex-direction: row; + background-color: var(--background-floating) !important; + header { + 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^="tabBarContainer"] + { border: none; } + div[class^="tabBar-"] { + flex-direction: column; + height: unset; + margin: 8px; + } + div[class^="body-"] { + margin-left: 16px; + height: 370px; + } +} From 9148a7464e027a3c6eba22abfb357c9fa8a0ee72 Mon Sep 17 00:00:00 2001 From: Er2 Date: Fri, 1 Apr 2022 21:53:24 +0300 Subject: [PATCH 38/82] bugfixes --- src/mobile.less | 2 +- src/profile.less | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/mobile.less b/src/mobile.less index 92e03f7..7228545 100644 --- a/src/mobile.less +++ b/src/mobile.less @@ -44,7 +44,7 @@ #channels li, div[class^="tabBarItem-"] { margin-top: 8px; - padding: 0 12px; + padding: 8px; font-size: 11pt; } diff --git a/src/profile.less b/src/profile.less index d5b8e7a..2729a0a 100644 --- a/src/profile.less +++ b/src/profile.less @@ -62,6 +62,7 @@ div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"] { flex-direction: row; background-color: var(--background-floating) !important; header { + width: 260px; margin: 24px; div[class^="avatar-"] { @@ -96,5 +97,7 @@ div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"] { div[class^="body-"] { margin-left: 16px; height: 370px; + & > * + { padding: 0 !important; } } } From bc78fa5f714c834af6eaf646075088afa3747970 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 2 Apr 2022 11:27:22 +0300 Subject: [PATCH 39/82] discovery support --- src/style.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/style.less b/src/style.less index dbb0790..c50435b 100644 --- a/src/style.less +++ b/src/style.less @@ -28,6 +28,7 @@ #channels ul li div > div[class^="content-"], // Input + div[class^="searchBox-"], div[class*="input"], input[class^="inputDefault-"], [class*="Text"], [class*="text"], @@ -57,6 +58,7 @@ div[class^="item-"], // in settings div[class^="group-"], // radiogroup div[class*="card"], + div[class^="categoryItem-"] > *, // in Discovery // UI parts div[class^="auditLog-"], @@ -72,6 +74,8 @@ div[class^="select-"], div[class^="messagesWrapper-"] div, + 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-"], { @@ -208,11 +212,11 @@ div[class^="channelTextArea-"] { } & > nav, - & > nav div[class^="scroller-"] { + div[class*="scroller"] { .top-border(@rounder); } - & > nav div[class^="scroller-"] { + div[class*="scroller"] { background-color: var(--background-secondary); } From fa7abf78f2d0140758ab6f44642f2820c5d52732 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 2 Apr 2022 12:01:45 +0300 Subject: [PATCH 40/82] search --- src/hide.less | 5 +++-- src/style.less | 17 +++++++++-------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/hide.less b/src/hide.less index ba11a6d..a1c1e27 100644 --- a/src/hide.less +++ b/src/hide.less @@ -77,9 +77,10 @@ div[class^="socialLinks-"], // in settings at bottom nav[class^="nav-"], // breaks emoji panel, fixed at fixes.less // Search -[class^="searchBar-"], +nav > [class^="searchBar-"], +[role^="tab"] > [class^="searchBar-"], div[class^="quickswitcher-"], // Ctrl-K -div[class^="toolbar-3_"] > :not([aria-label="Close"]), // toolbar at top, FIXME: fixed string +div[class^="toolbar-3_"] > :nth-child(3) ~ *:not([class^="search-"]), // Sidebar div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc. diff --git a/src/style.less b/src/style.less index c50435b..4fedb83 100644 --- a/src/style.less +++ b/src/style.less @@ -61,6 +61,7 @@ div[class^="categoryItem-"] > *, // in Discovery // UI parts + [class^="resultsGroup-"], // search div[class^="auditLog-"], div[class^="auditLog-"] > div, @@ -74,6 +75,7 @@ div[class^="select-"], div[class^="messagesWrapper-"] div, + 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, @@ -123,7 +125,7 @@ div[class^="messagesWrapper-"] div[class*="mentioned"] { .left-border(4px); } -// center titles +// title section, header, div[class^="content-"]::before, @@ -132,9 +134,6 @@ div[class^="tabBody-"]::before box-shadow: unset !important; } -section div[class^="children-"] -{ justify-content: center; } - // tabs div[class^="side-"] div[role="tab"], div[class^="tabBarItem-"] { @@ -145,16 +144,18 @@ div[class^="tabBarItem-"] { padding: 4px 8px; } -div[class^="tabBar-"] { - height: @tab-height; -} - [role="tab"][class*="selected-"], [role="tab"]:hover { background-color: var(--background-modifier-hover); } +// Pins +div[class^="messageGroupWrapper-"] { + border: none; + background-color: unset; +} + // Redesigned text input div[class^="attachedBars-"], From d17c7ba0ae022b447ecb6e8f1fa21eb859be9243 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 2 Apr 2022 12:56:03 +0300 Subject: [PATCH 41/82] bugfixes --- btfl.less | 1 - src/fixes.less | 17 +++++++++++++++++ src/hide.less | 11 +++-------- src/profile.less | 22 ++++++++++++++++------ src/settings.less | 2 ++ src/show.less | 11 ----------- 6 files changed, 38 insertions(+), 26 deletions(-) delete mode 100644 src/show.less diff --git a/btfl.less b/btfl.less index bca6a45..1109488 100644 --- a/btfl.less +++ b/btfl.less @@ -4,7 +4,6 @@ */ @import "src/hide"; -@import "src/show"; @import "src/dimmer"; @import "src/mobile"; @import "src/profile"; diff --git a/src/fixes.less b/src/fixes.less index 51839af..ee983d3 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -3,6 +3,23 @@ * Zlib License */ +// fix guild selector at left part +ul[data-list-id="guildsnav"] div[class^="scroller-"] { + display: flex; + flex-direction: column; + overflow: hidden !important; + + & > div:nth-child(3) { + overflow: hidden scroll; + scrollbar-width: none; + flex-grow: 1; + } + + & > div:nth-child(4) { + margin-top: 4px; + } +} + div[class^="messagesWrapper-"] div { scrollbar-width: thin; } diff --git a/src/hide.less b/src/hide.less index a1c1e27..69d3051 100644 --- a/src/hide.less +++ b/src/hide.less @@ -83,6 +83,9 @@ div[class^="quickswitcher-"], // Ctrl-K div[class^="toolbar-3_"] > :nth-child(3) ~ *:not([class^="search-"]), // Sidebar + +ul[data-list-id="guildsnav"] div[class^="scroller-"] > div:nth-child(4) ~ div, // guild selector in left part + div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc. h2[class^="privateChannelsHeaderContainer"], // direct messages label // #private-channels-0, #private-channels-1, #private-channels-2, // to check @@ -112,11 +115,3 @@ div[class^="children-"]::after, // shadow at title width: 0 !important; height: 0 !important; } - -div[aria-label="Servers"] ~ div -{ - // FIXME: Fixed string and bottom is broken - position: absolute; - bottom: 0; - display: none; -} diff --git a/src/profile.less b/src/profile.less index 2729a0a..bd8cfdd 100644 --- a/src/profile.less +++ b/src/profile.less @@ -58,7 +58,7 @@ header div[class^="nameTagNoCustomStatus-"] { } // Redesigned profile page -div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"] { +div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="small-"] { flex-direction: row; background-color: var(--background-floating) !important; header { @@ -87,6 +87,12 @@ div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"] { padding: 0; } } + div[class^="body-"] { + margin-left: 16px; + height: 370px; + & > * + { padding: 0 !important; } + } div[class^="tabBarContainer"] { border: none; } div[class^="tabBar-"] { @@ -94,10 +100,14 @@ div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"] { height: unset; margin: 8px; } - div[class^="body-"] { - margin-left: 16px; - height: 370px; - & > * - { padding: 0 !important; } + + div[class^="tabBarItem-"] { + margin-right: 0; + border-bottom: unset; + &:hover, &[class*="selected-"] { + border-right: 2px solid var(--interactive-active); + } + .top-border(); + .left-border(@round); } } diff --git a/src/settings.less b/src/settings.less index e22021d..29a98ab 100644 --- a/src/settings.less +++ b/src/settings.less @@ -53,6 +53,8 @@ div[aria-controls="billing-tab"], div[aria-controls="keybinds-tab"], div[aria-controls="game-activity-tab"], div[aria-controls^="hypesquad"], + +div[aria-controls="stickers-tab"], { display: none; } diff --git a/src/show.less b/src/show.less deleted file mode 100644 index 835cebf..0000000 --- a/src/show.less +++ /dev/null @@ -1,11 +0,0 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - -div[class^="scroller-"] div[class^="tutorialContainer-"] // Add server -{ - // FIXME: Fixed string and bottom is broken - display: unset; - margin: 0; -} From c75228317d3cc3126890a94472a0beaae5065454 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 2 Apr 2022 13:55:51 +0300 Subject: [PATCH 42/82] improve dimmer theme (can be set in settings?) --- src/dimmer.less | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/dimmer.less b/src/dimmer.less index e93799f..610bedb 100644 --- a/src/dimmer.less +++ b/src/dimmer.less @@ -3,15 +3,22 @@ * Zlib License */ -.dimmer-theme { - --header-primary: #dedede; - --header-secondary: #cacaca; - --text-normal: #dcddde; - --interactive-normal: #bebebe; - --interactive-hover: #dedede; - --background-primary: #3e3e3e; +.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-tertiary: #1e1e1e; + --background-secondary-alt: #2e2e2e; + --background-accent: #4f545c; + --background-floating: #18191c; + --background-tertiary: #1e1e1e; + --input-background: #1e1e1e; color: var(--header-primary); & [class*="close-"] { @@ -24,7 +31,7 @@ div[class^="layer-"] div.theme-light, div[class^="downloadApps-"] { - .dimmer-theme(); + .theme-dimmer(); div[class*="root-"] { background-color: var(--background-secondary); From ff4f5ca17bea7ea55c8feec1341928e2812ac846 Mon Sep 17 00:00:00 2001 From: Er2 Date: Fri, 8 Apr 2022 21:24:54 +0300 Subject: [PATCH 43/82] update Acrylic material. Old Discord embed (except rounded left border). Changed glow color to match theme color. Removed profile badges. Bugfixes. --- src/hide.less | 1 + src/profile.less | 4 ++- src/style.less | 64 ++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 55 insertions(+), 14 deletions(-) diff --git a/src/hide.less b/src/hide.less index 69d3051..5c2e45c 100644 --- a/src/hide.less +++ b/src/hide.less @@ -60,6 +60,7 @@ div[role="separator"]:not([id$="new-messages-bar"]), // aren't needed [class^="bannerContainer-"], [class*="banner-"], [class^="badgeList-"], +[class^="profileBadges-"], // Settings div[class^="keybind-"], // true must know it! diff --git a/src/profile.less b/src/profile.less index bd8cfdd..08d5d1c 100644 --- a/src/profile.less +++ b/src/profile.less @@ -15,6 +15,7 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { } div[class^="avatar-"] { + background-color: var(--background-tertiary) !important; top: 0; border-radius: 0 !important; border-bottom-right-radius: 50% !important; @@ -60,7 +61,7 @@ header div[class^="nameTagNoCustomStatus-"] { // Redesigned profile page div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="small-"] { flex-direction: row; - background-color: var(--background-floating) !important; + header { width: 260px; margin: 24px; @@ -88,6 +89,7 @@ div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="sm } } div[class^="body-"] { + border: none; margin-left: 16px; height: 370px; & > * diff --git a/src/style.less b/src/style.less index 4fedb83..4ed5ce5 100644 --- a/src/style.less +++ b/src/style.less @@ -10,8 +10,6 @@ @div-width: (@rounder / 2); @tab-height: 40px; -@glow-color: #fff; - // Round // UI elements div[class^="tabBarItem-"], @@ -31,15 +29,49 @@ div[class^="searchBox-"], div[class*="input"], input[class^="inputDefault-"], - [class*="Text"], [class*="text"], + div[class*="TextArea"], + //[class*="Text"], [class*="text"], { border-radius: @round !important; } -// Blur menus +// Acrylic material +div[class^="focusLock-"] > div, +div[class^="avatar-"], +{ + background: unset !important; + border-color: transparent; +} + +div[class^="emojiPicker-"], +#emoji-picker-tab-panel div[class*="header-"], +div[class^="focusLock-"] > div, +[role="dialog"]:not([class^="focusLock-"]), [role="menu"] { - background-color: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(@round) saturate(100%); + + &, & > *, div[class^="body"] { + background: unset; + } + + &::before, &::after { + border-radius: @rounder; + position: absolute; + top: 0; bottom: 0; + left: 0; right: 0; + content: ""; + z-index: -1; + } + + &::before { + //background-color: var(--background-floating); + //opacity: 0.75; + backdrop-filter: blur(@round) saturate(125%); + } + &::after { + background-color: var(--background-floating); + background-image: url(data:image/png;base64,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); + opacity: 0.5; + } } // Rounder @@ -53,19 +85,19 @@ // UI elements [class^="checkboxWrapper-"], // checkbox - [class*="embed"], div[class^="markup-"] pre code, // ```code``` div[class^="item-"], // in settings div[class^="group-"], // radiogroup div[class*="card"], div[class^="categoryItem-"] > *, // in Discovery + div[class^="content-"] img[class^="image-"], // UI parts [class^="resultsGroup-"], // search div[class^="auditLog-"], div[class^="auditLog-"] > div, - div[class^="connectedAccount"], // in profile + div[class^="connectedAccount-"], // in profile div[class^="profileBanner"], div[class^="accountProfile"], @@ -120,7 +152,12 @@ div[class^="auditLog"] { { .top-border(); } } -[class*="embed-"], +[class*="embed"] { + .left-border(3px); + max-width: unset; + background: unset; +} + div[class^="messagesWrapper-"] div[class*="mentioned"] { .left-border(4px); } @@ -228,7 +265,7 @@ div[class^="channelTextArea-"] { margin: ((48px - 20px) / 2) 16px; // 20px is line-height font-size: 15px; line-height: 20px; - font-weight: 600; + font-weight: 500; font-family: var(--font-display); } } @@ -254,13 +291,14 @@ div[class^="chat-"] } @keyframes glow { - from { box-shadow: 0 0 2px 4px @glow-color; } - to { box-shadow: 0 0 1px 2px @glow-color - #555; } + 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: unset; + background-color: var(--text-muted); + color: var(--interactive-active); animation: glow 0.7s linear infinite alternate; } } From bf808681f2bd6b09cdf0b512b909106d4eaa22e0 Mon Sep 17 00:00:00 2001 From: Er2 Date: Fri, 8 Apr 2022 21:37:41 +0300 Subject: [PATCH 44/82] bugfixes --- src/style.less | 80 ++++++++++++++++++++++++++------------------------ 1 file changed, 41 insertions(+), 39 deletions(-) diff --git a/src/style.less b/src/style.less index 4ed5ce5..6c961d6 100644 --- a/src/style.less +++ b/src/style.less @@ -30,50 +30,12 @@ div[class*="input"], input[class^="inputDefault-"], div[class*="TextArea"], + textarea, //[class*="Text"], [class*="text"], { border-radius: @round !important; } -// Acrylic material -div[class^="focusLock-"] > div, -div[class^="avatar-"], -{ - background: unset !important; - border-color: transparent; -} - -div[class^="emojiPicker-"], -#emoji-picker-tab-panel div[class*="header-"], -div[class^="focusLock-"] > div, -[role="dialog"]:not([class^="focusLock-"]), -[role="menu"] { - - &, & > *, div[class^="body"] { - background: unset; - } - - &::before, &::after { - border-radius: @rounder; - position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; - content: ""; - z-index: -1; - } - - &::before { - //background-color: var(--background-floating); - //opacity: 0.75; - backdrop-filter: blur(@round) saturate(125%); - } - &::after { - background-color: var(--background-floating); - background-image: url(data:image/png;base64,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); - opacity: 0.5; - } -} - // Rounder // Popouts [class^="authBox"], // login @@ -93,6 +55,7 @@ div[class^="focusLock-"] > div, div[class^="content-"] img[class^="image-"], // UI parts + div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar [class^="resultsGroup-"], // search div[class^="auditLog-"], div[class^="auditLog-"] > div, @@ -303,4 +266,43 @@ div[class^="chat-"] } } +// Acrylic material +div[class^="focusLock-"] > div, +div[class^="avatar-"], +{ + background: unset !important; + border-color: transparent; +} + +div[class^="emojiPicker-"], +#emoji-picker-tab-panel div[class*="header-"], +div[class^="focusLock-"] > div, +[role="dialog"]:not([class^="focusLock-"]), +[role="menu"] { + + &, & > *, div[class^="body"] { + background: unset; + } + + &::before, &::after { + border-radius: @rounder; + position: absolute; + top: 0; bottom: 0; + left: 0; right: 0; + content: ""; + z-index: -1; + } + + &::before { + //background-color: var(--background-floating); + //opacity: 0.75; + backdrop-filter: blur(@round) saturate(125%); + } + &::after { + background-color: var(--background-floating); + background-image: url(data:image/png;base64,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); + opacity: 0.5; + } +} + @import "settings"; From 79210450d9dabf14ea368c9911bd4b276c854090 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 9 Apr 2022 11:14:13 +0300 Subject: [PATCH 45/82] restore some features, bugfixes --- src/hide.less | 4 +--- src/style.less | 16 ++++++++++++---- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/hide.less b/src/hide.less index 5c2e45c..eb6b98f 100644 --- a/src/hide.less +++ b/src/hide.less @@ -20,7 +20,7 @@ div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are r // Nicks li[class^="messageListItem-"] [class*="cozyMessage-"] [class^="username-"], // in message -div[class*="nameTag-"] [class^="username-"], // outside message +:not([class^="headerText-"]) > div[class*="nameTag-"] [class^="username-"], // outside message [class^="discrimBase-"], div[class^="discordTag-"] [class^="username-"], // friends tab @@ -50,7 +50,6 @@ nav[class^="privateChannels-"] div div // Nitro tab at DM // Suggestions button[class*="followButton-"], // at top in channels [class^="nowPlaying"], // in friends tab -[class^="applicationInstall"], // at bot profile 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 @@ -80,7 +79,6 @@ nav[class^="nav-"], // breaks emoji panel, fixed at fixes.less // Search nav > [class^="searchBar-"], [role^="tab"] > [class^="searchBar-"], -div[class^="quickswitcher-"], // Ctrl-K div[class^="toolbar-3_"] > :nth-child(3) ~ *:not([class^="search-"]), // Sidebar diff --git a/src/style.less b/src/style.less index 6c961d6..507adc9 100644 --- a/src/style.less +++ b/src/style.less @@ -27,7 +27,7 @@ // Input div[class^="searchBox-"], - div[class*="input"], + [class*="input"], input[class^="inputDefault-"], div[class*="TextArea"], textarea, @@ -48,7 +48,10 @@ // UI elements [class^="checkboxWrapper-"], // checkbox div[class^="markup-"] pre code, // ```code``` - div[class^="item-"], // in settings + span[class^="spoiler"], + span.mention, + code.inline, + [class^="item-"], // in settings div[class^="group-"], // radiogroup div[class*="card"], div[class^="categoryItem-"] > *, // in Discovery @@ -64,11 +67,13 @@ div[class^="profileBanner"], div[class^="accountProfile"], + div[class^="quickswitcher-"] input, + div[class^="autocomplete-"], // input div[class^="pictureInPicture-"], div[class^="select-"], - div[class^="messagesWrapper-"] div, + 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), @@ -122,7 +127,7 @@ div[class^="auditLog"] { } div[class^="messagesWrapper-"] -div[class*="mentioned"] +div[class^="message-"][class*="mentioned"] { .left-border(4px); } // title @@ -267,13 +272,16 @@ div[class^="chat-"] } // Acrylic material +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; } +div[class^="channelHeader-"], div[class^="emojiPicker-"], #emoji-picker-tab-panel div[class*="header-"], div[class^="focusLock-"] > div, From d62d991e87ebad7294025b32669e79348ce059fa Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 9 Apr 2022 19:57:07 +0300 Subject: [PATCH 46/82] bugfixes --- src/hide.less | 3 ++- src/people.less | 2 +- src/settings.less | 26 ++++++++++++++++++++++---- src/style.less | 36 +++++++++++++++++++++++++++--------- 4 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/hide.less b/src/hide.less index eb6b98f..f581245 100644 --- a/src/hide.less +++ b/src/hide.less @@ -93,7 +93,7 @@ h2[class^="privateChannelsHeaderContainer"], // direct messages label div[class^="channelTextArea-"] div div > div[class^="buttons-"] > button, // gift button, f you -div[class^="channelTextArea-"] div div > div[class^="buttons-"] // block all except emoji (and send button, if exists) +main form div div > div[class^="channelTextArea-"] div div > div[class^="buttons-"] // block all except emoji (and send button, if exists) > div.expression-picker-chat-input-button:not(:nth-child(4)), div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] // divider breaks redesigned text area @@ -108,6 +108,7 @@ section div[class^="children-"] div[class^="spacer-"], // to check div[class^="base-"] div[class^="children-"] div[class^="divider-"] ~ div:not([class^="tabBar-"]), div[class^="base-"] div[class^="children-"] div[class^="divider-"], div[class^="children-"]::after, // shadow at title +form::before, // message input shadow { all: unset !important; display: none !important; diff --git a/src/people.less b/src/people.less index a174912..1eea0ec 100644 --- a/src/people.less +++ b/src/people.less @@ -3,7 +3,7 @@ * Zlib License */ -aside[class^="membersWrap-"] { +[class^="membersWrap-"] { // make it shorter &, div[class^="members-"] { min-width: 48px; diff --git a/src/settings.less b/src/settings.less index 29a98ab..3ad04be 100644 --- a/src/settings.less +++ b/src/settings.less @@ -59,6 +59,25 @@ div[aria-controls="stickers-tab"], display: none; } +.horiz-tab() { + display: flex; + flex-flow: row wrap; + @gap: @div-width * 2; + column-gap: @gap; +} + +#my-account-tab > div { + .horiz-tab(); + div[class^="divider"] + { display: none; } + & > div:first-child { + width: 50%; + } + & > div:nth-child(3) { + width: calc(50% - @gap); + } +} + #profile-customization-tab div[class^="children"] div[class^="baseLayout-"] { & > div:not([class]) { @@ -92,15 +111,14 @@ div[class^="baseLayout-"] { } #appearance-tab div[class^="children-"] { - flex-flow: row wrap; - column-gap: @div-width * 2; + .horiz-tab(); & > div:first-child { width: 100%; } div[class^="marginTop8-"], div[class^="marginTop20-"] { - width: calc(50% - @div-width); + width: calc(50% - @gap); div[class^="divider-"] { display: none; } @@ -138,7 +156,7 @@ div[class^="accountProfileCard-"] { } button { top: -48pt; - left: 360pt; + left: 300pt; } } } diff --git a/src/style.less b/src/style.less index 507adc9..82b864b 100644 --- a/src/style.less +++ b/src/style.less @@ -253,7 +253,7 @@ div[class^="chat-"] } [class^="sidebar"] header, -[class^="chat"] > section, +[class^="chat"] > section:not([class^="chat"]), [class^="container-"] > section { background-color: var(--background-tertiary) !important; } @@ -272,6 +272,7 @@ div[class^="chat-"] } // Acrylic material +div[class^="channelTextArea-"], div[class^="quickswitcher-"] div[class^="scroll"], div[class^="focusLock-"] > div, div[class^="avatar-"], @@ -281,19 +282,38 @@ div[class^="avatar-"], scrollbar-color: var(--scrollbar-auto-scrollbar-color-track) transparent; } +div[class^="layers-"] { + & > div[class*="baseLayer"] { + opacity: 1 !important; + } + + & > div[class^="layer"]:not([class*="baseLayer"]) { + & > div[class] { + --acrylic-color: var(--background-primary); + } + &, & > div[class], div[class*="scroller"] { + background: unset; + } + } +} + +div[class^="layers-"] > div[class^="layer-"] > div[class], div[class^="channelHeader-"], -div[class^="emojiPicker-"], -#emoji-picker-tab-panel div[class*="header-"], +//div[class^="emojiPicker-"], +//#emoji-picker-tab-panel div[class*="header-"], div[class^="focusLock-"] > div, [role="dialog"]:not([class^="focusLock-"]), [role="menu"] { + --acrylic-blur: @round; + --acrylic-color: var(--background-floating); + --acrylic-opacity: 0.5; &, & > *, div[class^="body"] { background: unset; } &::before, &::after { - border-radius: @rounder; + border-radius: inherit; position: absolute; top: 0; bottom: 0; left: 0; right: 0; @@ -302,14 +322,12 @@ div[class^="focusLock-"] > div, } &::before { - //background-color: var(--background-floating); - //opacity: 0.75; - backdrop-filter: blur(@round) saturate(125%); + backdrop-filter: blur(var(--acrylic-blur)) saturate(125%); } &::after { - background-color: var(--background-floating); + background-color: var(--acrylic-color); background-image: url(data:image/png;base64,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); - opacity: 0.5; + opacity: var(--acrylic-opacity); } } From 6006bf38f695ed30bd8b8a4984cc49b433d79eff Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 9 Apr 2022 22:09:45 +0300 Subject: [PATCH 47/82] update --- btfl.less | 1 + src/dimmer.less | 5 ----- src/fixes.less | 5 ----- src/hide.less | 5 ----- src/mobile.less | 5 ----- src/people.less | 5 ----- src/profile.less | 5 ----- src/settings.less | 33 +++++++++++++++++++++++++-------- src/style.less | 7 ------- src/ui.less | 15 +++++++++++++++ 10 files changed, 41 insertions(+), 45 deletions(-) create mode 100644 src/ui.less diff --git a/btfl.less b/btfl.less index 1109488..dae4f71 100644 --- a/btfl.less +++ b/btfl.less @@ -10,3 +10,4 @@ @import "src/people"; @import "src/fixes"; @import "src/style"; +@import "src/ui"; diff --git a/src/dimmer.less b/src/dimmer.less index 610bedb..a594d25 100644 --- a/src/dimmer.less +++ b/src/dimmer.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - .theme-dimmer { --header-primary: #dedede; --header-secondary: #cacaca; diff --git a/src/fixes.less b/src/fixes.less index ee983d3..5b21eeb 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - // fix guild selector at left part ul[data-list-id="guildsnav"] div[class^="scroller-"] { display: flex; diff --git a/src/hide.less b/src/hide.less index f581245..2c7acfc 100644 --- a/src/hide.less +++ b/src/hide.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - // Site [class*="perksContainer-"], [class^="DocSearch"], // Algolia, f you diff --git a/src/mobile.less b/src/mobile.less index 7228545..079e707 100644 --- a/src/mobile.less +++ b/src/mobile.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - // TODO: comment this @media screen and (max-device-width: 800px) { diff --git a/src/people.less b/src/people.less index 1eea0ec..c3618de 100644 --- a/src/people.less +++ b/src/people.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - [class^="membersWrap-"] { // make it shorter &, div[class^="members-"] { diff --git a/src/profile.less b/src/profile.less index 08d5d1c..abbde1e 100644 --- a/src/profile.less +++ b/src/profile.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - div[class^="accountProfileCard-"] div[class^="userInfo-"] { // settings justify-content: left; diff --git a/src/settings.less b/src/settings.less index 3ad04be..e507c6f 100644 --- a/src/settings.less +++ b/src/settings.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - // New sidebar in settings div[class^="standardSidebarView-"] { flex-direction: column; @@ -59,10 +54,11 @@ div[aria-controls="stickers-tab"], display: none; } -.horiz-tab() { +.horiz-tab(@cols: 2) { + @gap: @div-width * 2; + @el-width: calc(100% / @cols - @gap); display: flex; flex-flow: row wrap; - @gap: @div-width * 2; column-gap: @gap; } @@ -118,7 +114,7 @@ div[class^="baseLayout-"] { } div[class^="marginTop8-"], div[class^="marginTop20-"] { - width: calc(50% - @gap); + width: @el-width; div[class^="divider-"] { display: none; } @@ -160,3 +156,24 @@ div[class^="accountProfileCard-"] { } } } + +#language-tab div[class^="children-"] { + div div > div[role="radiogroup"] { + .horiz-tab(3); + & > div { + width: @el-width; + } + } +} + +#streamer-mode-tab div[class^="children-"] { + .horiz-tab(); + & > * { + width: @el-width; + &:nth-child(1), + &:nth-child(2) + { width: 100%; } + &:nth-child(3) + { display: none; } + } +} diff --git a/src/style.less b/src/style.less index 82b864b..052b006 100644 --- a/src/style.less +++ b/src/style.less @@ -1,8 +1,3 @@ -/** DisKort - * (c) Er2 2022 - * Zlib License - */ - @round: 8px; @rounder: 16px; @roundest: 24px; // text area @@ -299,8 +294,6 @@ div[class^="layers-"] { div[class^="layers-"] > div[class^="layer-"] > div[class], div[class^="channelHeader-"], -//div[class^="emojiPicker-"], -//#emoji-picker-tab-panel div[class*="header-"], div[class^="focusLock-"] > div, [role="dialog"]:not([class^="focusLock-"]), [role="menu"] { diff --git a/src/ui.less b/src/ui.less new file mode 100644 index 0000000..3d64bc6 --- /dev/null +++ b/src/ui.less @@ -0,0 +1,15 @@ +// UI element changes + +div[class^="slider-"] { + div[class^="track-"] { + div[class^="grabber-"] { + @half: (@rounder / 2); + width: @rounder; + height: @rounder; + border: none; + border-radius: @half; + margin-top: -@half; + margin-left: -@half; + } + } +} From 68863a9113fff1ed384f3d562da3bd64cf4aa9b0 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 10 Apr 2022 11:41:33 +0300 Subject: [PATCH 48/82] readme --- readme.org | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/readme.org b/readme.org index ea33911..3373187 100644 --- a/readme.org +++ b/readme.org @@ -9,10 +9,15 @@ Currently it's in beta, more of design was merged into css. ** 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 ~main~ branch ([[https://gitdab.com/er2/diskort/raw/branch/main/btfl.css][here]]). +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. @@ -29,7 +34,7 @@ Release mode: Debug mode: 1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it. -2. Copy btfl.css from ~main~ branch ([[https://gitdab.com/er2/diskort/raw/branch/main/btfl.css][here]]). +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. From 0973c5e99504d8a02a35e284b8fbc792159c6837 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 10 Apr 2022 14:14:51 +0300 Subject: [PATCH 49/82] refactoring --- btfl.less | 25 ++++- src/fixes.less | 3 + src/func.less | 31 ++++++ src/hide.less | 102 ++++++++++---------- src/materials.less | 115 +++++++++++++++++++++++ src/people.less | 4 + src/profile.less | 8 ++ src/settings.less | 6 ++ src/style.less | 228 +++++---------------------------------------- src/ui.less | 38 ++++++++ 10 files changed, 302 insertions(+), 258 deletions(-) create mode 100644 src/func.less create mode 100644 src/materials.less diff --git a/btfl.less b/btfl.less index dae4f71..fd3a2a0 100644 --- a/btfl.less +++ b/btfl.less @@ -3,11 +3,26 @@ * Zlib License */ -@import "src/hide"; -@import "src/dimmer"; -@import "src/mobile"; -@import "src/profile"; -@import "src/people"; +@round: 8px; +@rounder: 16px; +@roundest: 24px; // text area + +@div-width: (@rounder / 2); +@tab-height: 40px; + +// Required +@import "src/func"; @import "src/fixes"; + +// Optional +@import "src/hide"; +@import "src/mobile"; + +// Style +@import "src/materials"; @import "src/style"; @import "src/ui"; +@import "src/dimmer"; +@import "src/profile"; +@import "src/people"; +@import "src/settings"; diff --git a/src/fixes.less b/src/fixes.less index 5b21eeb..aeb5245 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -12,6 +12,9 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] { & > div:nth-child(4) { margin-top: 4px; + + & ~ div + { &:extend(.hide); } } } diff --git a/src/func.less b/src/func.less new file mode 100644 index 0000000..d3cef81 --- /dev/null +++ b/src/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/hide.less b/src/hide.less index 2c7acfc..a32abdf 100644 --- a/src/hide.less +++ b/src/hide.less @@ -1,26 +1,36 @@ + // Site [class*="perksContainer-"], [class^="DocSearch"], // Algolia, f you -#app-mount div:not([class]) div[class=""] div:not([class]), // main page content -#app-mount div:not([class]) div[class=""] div div[class*="background-"], // nitro animation at top -#app-mount div:not([class]) div[class=""] div[class^="grid-"] div[class^="animation-"], // nitro animation +{ &: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-"], - -// New server (inside app) -div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are really useless +{ &:extend(.hide); } // Nicks -li[class^="messageListItem-"] [class*="cozyMessage-"] [class^="username-"], // in message -:not([class^="headerText-"]) > div[class*="nameTag-"] [class^="username-"], // outside message -[class^="discrimBase-"], +[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); } // Nitro [class^="marketing"], @@ -40,7 +50,8 @@ 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"], + [data-list-item-id$="nitro"], +{ &:extend(.hide); } // Suggestions button[class*="followButton-"], // at top in channels @@ -49,20 +60,12 @@ 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 -// Profile -[class^="botTagVerified-"], -[class^="bannerContainer-"], -[class*="banner-"], -[class^="badgeList-"], -[class^="profileBadges-"], +div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc. +h2[class^="privateChannelsHeaderContainer"], // direct messages label -// Settings -div[class^="keybind-"], // true must know it! -[class*="socialLink-"], // in change log -div[class^="socialLinks-"], // in settings at bottom +div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are really useless -// Member list -[class^="membersGroup-"], // groups (roles) +{ &:extend(.hide); } // Emoji picker #gif-picker-tab, #sticker-picker-tab, @@ -70,43 +73,44 @@ div[class^="socialLinks-"], // in settings at bottom div[class^="emojiPicker-"] > div[class^="header-"], nav[class^="nav-"], // breaks emoji panel, fixed at fixes.less +{ &:extend(.hide); } // Search -nav > [class^="searchBar-"], -[role^="tab"] > [class^="searchBar-"], -div[class^="toolbar-3_"] > :nth-child(3) ~ *:not([class^="search-"]), - -// Sidebar - -ul[data-list-id="guildsnav"] div[class^="scroller-"] > div:nth-child(4) ~ div, // guild selector in left part - -div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc. -h2[class^="privateChannelsHeaderContainer"], // direct messages label -// #private-channels-0, #private-channels-1, #private-channels-2, // to check +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, // gift button, f you +div[class^="channelTextArea-"] { + div div > div[class^="buttons-"] { // button + & > button // gift button, f you + { &:extend(.hide); } -main form div div > div[class^="channelTextArea-"] div div > div[class^="buttons-"] // block all except emoji (and send button, if exists) - > div.expression-picker-chat-input-button:not(:nth-child(4)), - -div[class^="channelTextArea-"] > div[class^="scrollableContainer-"] // divider breaks redesigned text area - div[class^="divider-"], + & > 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 -section div[class^="children-"] div[class^="spacer-"], // to check -div[class^="base-"] div[class^="children-"] div[class^="divider-"] ~ div:not([class^="tabBar-"]), -div[class^="base-"] div[class^="children-"] div[class^="divider-"], -div[class^="children-"]::after, // shadow at title form::before, // message input shadow -{ - all: unset !important; - display: none !important; - width: 0 !important; - height: 0 !important; +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/materials.less b/src/materials.less new file mode 100644 index 0000000..ed4128e --- /dev/null +++ b/src/materials.less @@ -0,0 +1,115 @@ +// 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-floating); + --acrylic-opacity: 0.5; + + &, & > *, 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); + } + &, & > div[class*="View-"], div[class*="scroller"] { + background: unset; + } + } +} + +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/people.less b/src/people.less index c3618de..fa78fd3 100644 --- a/src/people.less +++ b/src/people.less @@ -1,3 +1,7 @@ + +[class^="membersGroup-"] // groups (roles) +{ &:extend(.hide); } + [class^="membersWrap-"] { // make it shorter &, div[class^="members-"] { diff --git a/src/profile.less b/src/profile.less index abbde1e..45d5d7a 100644 --- a/src/profile.less +++ b/src/profile.less @@ -1,3 +1,11 @@ + +[class^="botTagVerified-"], +[class^="bannerContainer-"], +[class*="banner-"], +[class^="badgeList-"], +[class^="profileBadges-"], +{ &:extend(.hide); } + div[class^="accountProfileCard-"] div[class^="userInfo-"] { // settings justify-content: left; diff --git a/src/settings.less b/src/settings.less index e507c6f..2dbb874 100644 --- a/src/settings.less +++ b/src/settings.less @@ -1,3 +1,9 @@ + +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; diff --git a/src/style.less b/src/style.less index 052b006..70a8385 100644 --- a/src/style.less +++ b/src/style.less @@ -1,16 +1,19 @@ -@round: 8px; -@rounder: 16px; -@roundest: 24px; // text area +.round { .radius(@round); } +.rounder { .radius(@rounder); } -@div-width: (@rounder / 2); -@tab-height: 40px; +// 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 elements - div[class^="tabBarItem-"], - div[class^="checkbox"], - button[class*="button"], - // UI parts li[class^="channel-"], [class^="avatar-"], @@ -26,10 +29,7 @@ input[class^="inputDefault-"], div[class*="TextArea"], textarea, - //[class*="Text"], [class*="text"], -{ - border-radius: @round !important; -} +{ &:extend(.round); } // Rounder // Popouts @@ -40,18 +40,6 @@ div[class*="fullscreenOnMobile"], div[class*="root"] div[class^="flex-"], - // UI elements - [class^="checkboxWrapper-"], // checkbox - 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-"], - // UI parts div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar [class^="resultsGroup-"], // search @@ -75,38 +63,7 @@ div[class^="guildList-"] div[class^="container-"], div[class^="container"] > div, div[class^="chat-"] > div[class^="content-"], -{ - border-radius: @rounder !important; -} - -// Movement -div[class^="sidebar-"] { - margin-right: @div-width; -} - -div[class^="radioBar-"] { - border: none; -} - -.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; -} +{ &:extend(.rounder); } div[class^="auditLog"] { div[class^="headerExpanded-"] @@ -115,45 +72,20 @@ div[class^="auditLog"] { { .top-border(); } } -[class*="embed"] { - .left-border(3px); - max-width: unset; - background: unset; -} - div[class^="messagesWrapper-"] div[class^="message-"][class*="mentioned"] { .left-border(4px); } -// title - +// no shadows section, header, div[class^="content-"]::before, div[class^="tabBody-"]::before -{ - box-shadow: unset !important; -} - -// tabs -div[class^="side-"] div[role="tab"], -div[class^="tabBarItem-"] { - .bottom-border(); - margin: 0; - margin-top: 8px; - margin-right: 16px; - padding: 4px 8px; -} - -[role="tab"][class*="selected-"], -[role="tab"]:hover -{ - background-color: var(--background-modifier-hover); -} +{ box-shadow: unset !important; } // Pins div[class^="messageGroupWrapper-"] { border: none; - background-color: unset; + background: unset; } // Redesigned text input @@ -205,123 +137,11 @@ div[class^="channelTextArea-"] { } } -// 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 material -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; -} - -div[class^="layers-"] { - & > div[class*="baseLayer"] { - opacity: 1 !important; - } - - & > div[class^="layer"]:not([class*="baseLayer"]) { - & > div[class] { - --acrylic-color: var(--background-primary); - } - &, & > div[class], div[class*="scroller"] { - background: unset; - } - } -} - -div[class^="layers-"] > div[class^="layer-"] > div[class], -div[class^="channelHeader-"], -div[class^="focusLock-"] > div, +[role="menu"], [role="dialog"]:not([class^="focusLock-"]), -[role="menu"] { - --acrylic-blur: @round; - --acrylic-color: var(--background-floating); - --acrylic-opacity: 0.5; - - &, & > *, 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); - } +div[class^="focusLock-"] > div, +div[class^="channelHeader-"], +div[class^="layers-"] > div[class^="layer-"] div[class*="View-"], +{ + &:extend(.acrylic all); } - -@import "settings"; diff --git a/src/ui.less b/src/ui.less index 3d64bc6..51ad484 100644 --- a/src/ui.less +++ b/src/ui.less @@ -1,5 +1,6 @@ // UI element changes +// slider div[class^="slider-"] { div[class^="track-"] { div[class^="grabber-"] { @@ -13,3 +14,40 @@ div[class^="slider-"] { } } } + +// tabs +div[role="tab"], +div[class^="tabBarItem-"] { + .bottom-border(); + margin: 0; + margin-top: 8px; + margin-right: 16px; + padding: 4px 8px; + + &:hover { + background-color: var(--interactive-hover); + color: var(--text-muted) !important; + } +} + +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); } From 58c34af4e22477895bf189f135064562b4137330 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 10 Apr 2022 20:05:22 +0300 Subject: [PATCH 50/82] settings update --- src/materials.less | 7 ++- src/settings.less | 116 +++++++++++++++++++++++++++++++++++---------- src/style.less | 1 + src/ui.less | 20 ++++++++ 4 files changed, 118 insertions(+), 26 deletions(-) diff --git a/src/materials.less b/src/materials.less index ed4128e..9735eaa 100644 --- a/src/materials.less +++ b/src/materials.less @@ -62,8 +62,8 @@ div[class^="chat-"] // Acrylic .acrylic { --acrylic-blur: @round; - --acrylic-color: var(--background-floating); - --acrylic-opacity: 0.5; + --acrylic-color: var(--background-secondary-alt); + --acrylic-opacity: 50%; &, & > *, div[class^="body"] { background: unset; @@ -97,6 +97,7 @@ div[class^="layers-"] { & > 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; @@ -104,6 +105,8 @@ div[class^="layers-"] { } } +div[class^="header-"], +div[class^="title"], div[class^="channelTextArea-"], div[class^="quickswitcher-"] div[class^="scroll"], div[class^="focusLock-"] > div, diff --git a/src/settings.less b/src/settings.less index 2dbb874..c6c8076 100644 --- a/src/settings.less +++ b/src/settings.less @@ -56,9 +56,11 @@ div[aria-controls="game-activity-tab"], div[aria-controls^="hypesquad"], div[aria-controls="stickers-tab"], -{ - display: none; -} + +div[aria-controls="analytics-tab"], +div[aria-controls="partner-tab"], + +{ &:extend(.hide); } .horiz-tab(@cols: 2) { @gap: @div-width * 2; @@ -66,18 +68,21 @@ div[aria-controls="stickers-tab"], 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[class^="divider"] - { display: none; } & > div:first-child { width: 50%; } - & > div:nth-child(3) { - width: calc(50% - @gap); - } } #profile-customization-tab div[class^="children"] @@ -93,14 +98,10 @@ div[class^="baseLayout-"] { } div[class^="bioTextArea-"] { - height: 25vh; + height: 30vh; } } -[class^="optionBox-"]:nth-child(2) { - display: none; -} - #connections-tab div[class^="children-"] { flex-direction: row; div[class^="accountList-"] { @@ -119,13 +120,6 @@ div[class^="baseLayout-"] { width: 100%; } - div[class^="marginTop8-"], div[class^="marginTop20-"] { - width: @el-width; - - div[class^="divider-"] - { display: none; } - } - div[class^="marginTop20-"] > div[class^="slider-"] { margin-top: 28px; } @@ -166,16 +160,12 @@ div[class^="accountProfileCard-"] { #language-tab div[class^="children-"] { div div > div[role="radiogroup"] { .horiz-tab(3); - & > div { - width: @el-width; - } } } #streamer-mode-tab div[class^="children-"] { .horiz-tab(); & > * { - width: @el-width; &:nth-child(1), &:nth-child(2) { width: 100%; } @@ -183,3 +173,81 @@ div[class^="accountProfileCard-"] { { display: none; } } } + +// Server settings +#overview-tab div[class^="children-"] > div { + &:nth-child(3) { + .horiz-tab(); + + & > :nth-child(1), + & > :nth-child(2) + { width: 100%; } + + & > :nth-child(3) + { display: none; } + } + + &:nth-child(4) > div > div:last-child { + .horiz-tab(); + } + + &: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(); + + 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; + } +} + +#discovery-tab > div[class^="container-"] { + .horiz-tab(); + span[class*="Button"] { + align-self: start; + } +} diff --git a/src/style.less b/src/style.less index 70a8385..2388e73 100644 --- a/src/style.less +++ b/src/style.less @@ -142,6 +142,7 @@ div[class^="channelTextArea-"] { 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/ui.less b/src/ui.less index 51ad484..4073b94 100644 --- a/src/ui.less +++ b/src/ui.less @@ -30,6 +30,26 @@ div[class^="tabBarItem-"] { } } +// 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; } From 849686181672c9c5e030a878b7569946a27a273e Mon Sep 17 00:00:00 2001 From: Er2 Date: Mon, 11 Apr 2022 19:29:17 +0300 Subject: [PATCH 51/82] modular anti-nitro --- btfl.less | 3 ++ src/dimmer.less | 2 +- src/hide.less | 21 ----------- src/nitro.less | 35 +++++++++++++++++++ src/profile.less | 89 +++++++++++++++++++++++++++++++---------------- src/settings.less | 38 +++++++------------- src/ui.less | 7 ++-- 7 files changed, 115 insertions(+), 80 deletions(-) create mode 100644 src/nitro.less diff --git a/btfl.less b/btfl.less index fd3a2a0..f6d36f7 100644 --- a/btfl.less +++ b/btfl.less @@ -3,6 +3,8 @@ * Zlib License */ +@no-nitro: false; // DO NOT CHANGE! Comment src/nitro to disable anti-nitro + @round: 8px; @rounder: 16px; @roundest: 24px; // text area @@ -17,6 +19,7 @@ // Optional @import "src/hide"; @import "src/mobile"; +@import "src/nitro"; // Style @import "src/materials"; diff --git a/src/dimmer.less b/src/dimmer.less index a594d25..9721da8 100644 --- a/src/dimmer.less +++ b/src/dimmer.less @@ -26,7 +26,7 @@ div[class^="layer-"] div.theme-light, div[class^="downloadApps-"] { - .theme-dimmer(); + &:extend(.theme-dimmer all); div[class*="root-"] { background-color: var(--background-secondary); diff --git a/src/hide.less b/src/hide.less index a32abdf..c91986d 100644 --- a/src/hide.less +++ b/src/hide.less @@ -32,27 +32,6 @@ div[class^="nameTag-"], [class^="usernameInnerRow-"], // at settings { &:extend(.hide); } -// Nitro -[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(.hide); } - // Suggestions button[class*="followButton-"], // at top in channels [class^="nowPlaying"], // in friends tab diff --git a/src/nitro.less b/src/nitro.less new file mode 100644 index 0000000..1836f5e --- /dev/null +++ b/src/nitro.less @@ -0,0 +1,35 @@ + +@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; + } + } +} diff --git a/src/profile.less b/src/profile.less index 45d5d7a..1dd59e4 100644 --- a/src/profile.less +++ b/src/profile.less @@ -1,11 +1,4 @@ -[class^="botTagVerified-"], -[class^="bannerContainer-"], -[class*="banner-"], -[class^="badgeList-"], -[class^="profileBadges-"], -{ &:extend(.hide); } - div[class^="accountProfileCard-"] div[class^="userInfo-"] { // settings justify-content: left; @@ -25,43 +18,79 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { } } -div[class^="listItemContents-"] div[class^="userInfo"] { - padding-top: 0; - div[class^="avatar-"] { - top: 0; +.profile() when (@no-nitro = true) { + [class^="botTagVerified-"], + [class^="bannerContainer-"], + [class*="banner-"], + [class^="badgeList-"], + [class^="profileBadges-"], + { &:extend(.nitro); } + + 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^="userPopout-"] { - div[class^="avatarWrapper"] { - top: 8px; // fix divider bug +div[class^="banner-"] { + position: absolute; + width: inherit; + max-height: 84px; + &:extend(.rounder); + &[class*="popoutBanner"] { + position: relative; + max-height: 128px; + .bottom-border(); } - - div[class^="headerTop-"] { - padding-top: 72px; // also fix divider bug - } -} - -div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) { - margin-left: -8px; - margin-top: -8px; -} - -div[class^="headerTop-"] div[class^="headerText"] { - margin-left: 96px; // fix nickname } div[class^="avatarWrapper-"] { - margin-right: auto; // fix aligment (bottom of sidebar) + 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 } -// Redesigned profile page div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="small-"] { flex-direction: row; @@ -110,7 +139,7 @@ div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="sm margin-right: 0; border-bottom: unset; &:hover, &[class*="selected-"] { - border-right: 2px solid var(--interactive-active); + border-right: 2px solid var(--interactive-active) !important; } .top-border(); .left-border(@round); diff --git a/src/settings.less b/src/settings.less index c6c8076..8c98c97 100644 --- a/src/settings.less +++ b/src/settings.less @@ -51,15 +51,14 @@ 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^="hypesquad"], - -div[aria-controls="stickers-tab"], - div[aria-controls="analytics-tab"], div[aria-controls="partner-tab"], - { &:extend(.hide); } .horiz-tab(@cols: 2) { @@ -92,7 +91,7 @@ div[class^="baseLayout-"] { div[class^="customizationSection-"] { &:nth-child(2), &:nth-child(3) { - display: none; + &:extend(.nitro); } } } @@ -131,7 +130,7 @@ div[class^="baseLayout-"] { &:nth-child(3), &:nth-child(6), &:nth-child(7) - { display: none; } + { &:extend(.hide); } &:nth-child(4) { margin-top: @div-width * 2; @@ -141,20 +140,7 @@ div[class^="baseLayout-"] { #notifications-tab div[class^="children"] { div:nth-child(6) - { display: none; } -} - -div[class^="accountProfileCard-"] { - div[class^="field-"]:nth-child(1) { - height: 0; - div[class^="constrainedRow-"] { - display: none; - } - button { - top: -48pt; - left: 300pt; - } - } + { &:extend(.hide); } } #language-tab div[class^="children-"] { @@ -176,6 +162,7 @@ div[class^="accountProfileCard-"] { // Server settings #overview-tab div[class^="children-"] > div { + // system messages &:nth-child(3) { .horiz-tab(); @@ -183,14 +170,16 @@ div[class^="accountProfileCard-"] { & > :nth-child(2) { width: 100%; } - & > :nth-child(3) + & > :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); & > * { @@ -198,9 +187,8 @@ div[class^="accountProfileCard-"] { margin: 0; border: none; } - & > div:first-child div[class^="flexChild-"] { - display: none; - } + & > div:first-child div[class^="flexChild-"] + { display: none; } } } diff --git a/src/ui.less b/src/ui.less index 4073b94..e68ef06 100644 --- a/src/ui.less +++ b/src/ui.less @@ -24,9 +24,10 @@ div[class^="tabBarItem-"] { margin-right: 16px; padding: 4px 8px; - &:hover { - background-color: var(--interactive-hover); - color: var(--text-muted) !important; + &:hover, + &[class*="selected-"] { + background-color: var(--interactive-muted) !important; + color: var(--text-normal) !important; } } From f0ddb02e62652db755615313674c1fa10ed284bc Mon Sep 17 00:00:00 2001 From: Er2 Date: Mon, 11 Apr 2022 19:32:48 +0300 Subject: [PATCH 52/82] revert small change --- src/settings.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/settings.less b/src/settings.less index 8c98c97..b278dcb 100644 --- a/src/settings.less +++ b/src/settings.less @@ -101,6 +101,10 @@ div[class^="baseLayout-"] { } } +// TrY AnImAtEd AvAtAr, eh... f you +[class^="optionBox-"]:nth-child(2) +{ &:extend(.nitro); } + #connections-tab div[class^="children-"] { flex-direction: row; div[class^="accountList-"] { From 445c1f8423123dbdd069b06761e7e78877fb97cb Mon Sep 17 00:00:00 2001 From: Er2 Date: Mon, 11 Apr 2022 20:05:34 +0300 Subject: [PATCH 53/82] bugfixes --- src/style.less | 1 + src/ui.less | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/style.less b/src/style.less index 2388e73..ec7198b 100644 --- a/src/style.less +++ b/src/style.less @@ -41,6 +41,7 @@ div[class^="sidebar-"] { 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-"], diff --git a/src/ui.less b/src/ui.less index e68ef06..37fde29 100644 --- a/src/ui.less +++ b/src/ui.less @@ -5,11 +5,13 @@ div[class^="slider-"] { div[class^="track-"] { div[class^="grabber-"] { @half: (@rounder / 2); + position: relative; width: @rounder; height: @rounder; border: none; border-radius: @half; - margin-top: -@half; + top: @half * 1.5; + margin-top: unset; margin-left: -@half; } } From dc0d38df0111c6cbb5ee03871cfd2b9fbd03dd9b Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 12 Apr 2022 20:53:03 +0300 Subject: [PATCH 54/82] mostly bugfixes --- btfl.less | 3 ++- src/fixes.less | 16 +++++++++------- src/nitro.less | 11 ++++++++++- src/profile.less | 5 ++--- src/settings.less | 9 +++++++++ 5 files changed, 32 insertions(+), 12 deletions(-) diff --git a/btfl.less b/btfl.less index f6d36f7..5a759a1 100644 --- a/btfl.less +++ b/btfl.less @@ -3,7 +3,8 @@ * Zlib License */ -@no-nitro: false; // DO NOT CHANGE! Comment src/nitro to disable anti-nitro +@no-nitro: true; +@no-banner: false; @round: 8px; @rounder: 16px; diff --git a/src/fixes.less b/src/fixes.less index aeb5245..0dfeea6 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -4,17 +4,19 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] { flex-direction: column; overflow: hidden !important; - & > div:nth-child(3) { + // servers + & > div[aria-label] { overflow: hidden scroll; scrollbar-width: none; flex-grow: 1; - } - & > div:nth-child(4) { - margin-top: 4px; - - & ~ div - { &:extend(.hide); } + // add button + & + div { + margin-top: 4px; + // all others + & ~ div + { &:extend(.hide); } + } } } diff --git a/src/nitro.less b/src/nitro.less index 1836f5e..e168362 100644 --- a/src/nitro.less +++ b/src/nitro.less @@ -1,5 +1,6 @@ -@no-nitro: true; +.nitroblock() when (@no-nitro = true) { + .nitro { &:extend(.hide); } [class^="marketing"], @@ -33,3 +34,11 @@ nav[class^="privateChannels-"] div div // Nitro tab at DM } } } + +} +.nitroblock() when (@no-banner = true) { + [class^="bannerContainer-"], + [class*="banner-"] + { &:extend(.hide); } +} +.nitroblock(); diff --git a/src/profile.less b/src/profile.less index 1dd59e4..c8d3742 100644 --- a/src/profile.less +++ b/src/profile.less @@ -20,12 +20,11 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { .profile() when (@no-nitro = true) { [class^="botTagVerified-"], - [class^="bannerContainer-"], - [class*="banner-"], [class^="badgeList-"], [class^="profileBadges-"], { &:extend(.nitro); } - +} +.profile() when (@no-banner = true) { div[class^="listItemContents-"] div[class^="userInfo"] { padding-top: 0; div[class^="avatar-"] { diff --git a/src/settings.less b/src/settings.less index b278dcb..e15330f 100644 --- a/src/settings.less +++ b/src/settings.less @@ -212,6 +212,10 @@ div[data-list-id="audit-log"] { #integrations-tab > div:nth-child(2) { .horiz-tab(); + img[class^="iconWrapper-"] { + width: unset; + } + button[class^="createButton-"], [class^="sectionHeader-"], & > div:first-child { @@ -237,6 +241,11 @@ div[data-list-id="audit-log"] { } } +#community-tab > div[class^="container-"] { + & > div[class^="banner-"] + { &:extend(.hide); } +} + #discovery-tab > div[class^="container-"] { .horiz-tab(); span[class*="Button"] { From 8eac634cb8e0a1dc24fc564286b0666a1b51cf5a Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 12 Apr 2022 21:36:18 +0300 Subject: [PATCH 55/82] 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,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); + 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); } From 71980947efb2ef93ce9d067f92cb1e053de7294f Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 14 Apr 2022 20:54:59 +0300 Subject: [PATCH 56/82] chrome fix --- src/fixes.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/fixes.less b/src/fixes.less index 0dfeea6..4ea7812 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -10,6 +10,11 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] { scrollbar-width: none; flex-grow: 1; + // Chrome, ugh.. + &::-webkit-scrollbar { + display: none; + } + // add button & + div { margin-top: 4px; From 705c86ac44af0d8d4c5a532d66e00a853652d7ec Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 14 Apr 2022 21:21:53 +0300 Subject: [PATCH 57/82] BetterDiscord support --- src/ui.less | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/ui.less b/src/ui.less index 37fde29..c471f3f 100644 --- a/src/ui.less +++ b/src/ui.less @@ -20,6 +20,7 @@ div[class^="slider-"] { // tabs div[role="tab"], div[class^="tabBarItem-"] { + .top-border(16px); .bottom-border(); margin: 0; margin-top: 8px; @@ -34,12 +35,15 @@ div[class^="tabBarItem-"] { } // slider +div.bd-switch-body, div[class^="container-"] { - &[class*="disabled-"] { + &:extend(.rounder); + + &[class*="disabled"] { cursor: not-allowed; } - svg[class^="slider-"] { + & > svg[class*="slider"] { width: 16px !important; height: 16px !important; border-radius: 50%; @@ -47,7 +51,7 @@ div[class^="container-"] { margin-right: 0; background-color: white; - > * { + & > * { display: none; } } @@ -58,6 +62,7 @@ div[class^="radioBar-"] { } // Round +div[class^="bd-"], div[class^="tabBarItem-"], div[class^="checkbox"], button[class*="button"], @@ -74,3 +79,11 @@ div[class*="card"], div[class^="categoryItem-"] > *, // in Discovery div[class^="content-"] img[class^="image-"], { &:extend(.rounder); } + +// BetterDiscord +div.bd-search-wrapper, +div.bd-changelog-button { + align-self: center; + margin: 0; + margin-right: 8px; +} From bd8034c4280f0f8c191e1053115a0d478a886606 Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 14 Apr 2022 21:25:37 +0300 Subject: [PATCH 58/82] whoops :) --- src/settings.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/settings.less b/src/settings.less index e15330f..caf518e 100644 --- a/src/settings.less +++ b/src/settings.less @@ -159,9 +159,9 @@ div[class^="baseLayout-"] { &:nth-child(1), &:nth-child(2) { width: 100%; } - &:nth-child(3) - { display: none; } } + h5 + { display: none; } } // Server settings From 513f2e78fd2392d1701b5ff3100ec186d63acbcc Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 14 Apr 2022 21:54:02 +0300 Subject: [PATCH 59/82] fix nitro banners --- src/nitro.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/nitro.less b/src/nitro.less index e168362..65d2ff6 100644 --- a/src/nitro.less +++ b/src/nitro.less @@ -24,17 +24,17 @@ nav[class^="privateChannels-"] div div // Nitro tab at DM { &:extend(.nitro); } #channels > ul { + & > div[aria-hidden="true"], div[class^="container-"] { // boosts &:extend(.nitro); + } + div[class^="container-"] + li { // space - & + li { - padding-top: 0; - } + padding-top: 0; } } - } .nitroblock() when (@no-banner = true) { [class^="bannerContainer-"], From 48b6a4baf64f0e3341f4133663cadba1522d2fd4 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 17 Apr 2022 15:59:18 +0300 Subject: [PATCH 60/82] update Nitro banner fixed. Compact sidebar and its opening animation. Old roles and replies. Remade status picker. Fixed semi-transparent text area. --- src/nitro.less | 10 +++++++ src/style.less | 79 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 87 insertions(+), 2 deletions(-) diff --git a/src/nitro.less b/src/nitro.less index 65d2ff6..2b84eb3 100644 --- a/src/nitro.less +++ b/src/nitro.less @@ -35,6 +35,16 @@ nav[class^="privateChannels-"] div div // Nitro tab at DM padding-top: 0; } } + +nav div[class^="animatedContainer-"] { + background: unset; + div[class^="bannerImage-"]::before { + background: unset !important; + } + [class^="bannerImg-"] + { &:extend(.nitro); } +} + } .nitroblock() when (@no-banner = true) { [class^="bannerContainer-"], diff --git a/src/style.less b/src/style.less index ec7198b..e2d3ed7 100644 --- a/src/style.less +++ b/src/style.less @@ -4,9 +4,53 @@ // Space between sidebar and chat div[class^="sidebar-"] { margin-right: @div-width; + + &, li, li div { + transition: ease-out 0.25s; + } + + &:not(:hover) { + width: 48px; + overflow: hidden; + li { + margin-left: -4px; + div[class^="interactive-"] { + margin-left: 8px; + } + div[class^="layout-"] { + padding-left: 2px; + } + a + div[class^="children-"] { + display: none; + } + } + } +} + +// Old-school + +div[class^="repliedMessage-"] { + &::before { + margin: 0; + border: none; + width: 4px; + border-radius: 2px; + background: var(--interactive-muted); + left: 0; right: 100%; + top: 0; bottom: 0; + } + & > img { + margin-left: 16px; + } +} + +div[class^="role-"] { + &:extend(.rounder); + padding: 0; + border-width: 2px; + border-style: solid; } -// Old-school embed [class*="embed"] { .left-border(3px); max-width: unset; @@ -19,7 +63,6 @@ div[class^="sidebar-"] { [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-"], @@ -103,6 +146,7 @@ div[class^="attachedBars-"] div[class^="channelTextArea-"] { & > div[class^="scrollableContainer-"] { background-color: unset; + opacity: 1; button[class^="attachButton-"], div[class^="textArea-"], @@ -147,3 +191,34 @@ div[class*="stickyHeader-"], { &:extend(.acrylic all); } + +// status picker +#status-picker > div { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + #status-picker-online, + #status-picker-idle, + #status-picker-dnd, + #status-picker-invisible { + margin: 8px; + & > div { + padding: 0; + + // & > because svg has status- div + & > div[class^="status-"], + & > div[class^="description-"] { + display: none; + } + } + svg { + width: 16px; + height: 16px; + margin-left: 4px; + } + } + #status-picker-custom-status, + div[class^="submenuContainer-"] { + width: 100%; + } +} From 8c00a1628d1e55f448fb1c57b9311dc8ccdd5bf2 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 17 Apr 2022 16:51:06 +0300 Subject: [PATCH 61/82] bugfixes --- src/fixes.less | 5 +++++ src/settings.less | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/fixes.less b/src/fixes.less index 4ea7812..ec9a949 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -25,6 +25,11 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] { } } +#channels ul { + height: unset !important; + margin-bottom: 8px; +} + div[class^="messagesWrapper-"] div { scrollbar-width: thin; } diff --git a/src/settings.less b/src/settings.less index caf518e..e4ed5f6 100644 --- a/src/settings.less +++ b/src/settings.less @@ -67,7 +67,7 @@ div[aria-controls="partner-tab"], display: flex; flex-flow: row wrap; column-gap: @gap; - row-gap: @gap / 2; + row-gap: (@gap / 2); & > * { width: @el-width; } @@ -81,6 +81,7 @@ div[aria-controls="partner-tab"], .horiz-tab(); & > div:first-child { width: 50%; + min-width: 512px; } } From 287144740603d6d8461028aa38f3defd92c351d7 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 17 Apr 2022 17:41:04 +0300 Subject: [PATCH 62/82] bugfixes, revert side resize --- src/settings.less | 10 +++++++++- src/style.less | 21 --------------------- 2 files changed, 9 insertions(+), 22 deletions(-) diff --git a/src/settings.less b/src/settings.less index e4ed5f6..3ec4f6b 100644 --- a/src/settings.less +++ b/src/settings.less @@ -108,12 +108,20 @@ div[class^="baseLayout-"] { #connections-tab div[class^="children-"] { flex-direction: row; + flex-flow: row wrap; div[class^="accountList-"] { margin-right: @div-width; + width: 33%; height: 100%; // decreases height? 0_0 + + // auto detect + & + div[class^="container-"] { + order: -1; + width: 100%; + } } div[class^="connectionList-"] { - width: 100%; + flex-grow: 1; } } diff --git a/src/style.less b/src/style.less index e2d3ed7..2a0e685 100644 --- a/src/style.less +++ b/src/style.less @@ -4,27 +4,6 @@ // Space between sidebar and chat div[class^="sidebar-"] { margin-right: @div-width; - - &, li, li div { - transition: ease-out 0.25s; - } - - &:not(:hover) { - width: 48px; - overflow: hidden; - li { - margin-left: -4px; - div[class^="interactive-"] { - margin-left: 8px; - } - div[class^="layout-"] { - padding-left: 2px; - } - a + div[class^="children-"] { - display: none; - } - } - } } // Old-school From 8d1bf41e37d1437de8e545ba7ecf2b2241487ac5 Mon Sep 17 00:00:00 2001 From: Er2 Date: Wed, 20 Apr 2022 21:30:40 +0300 Subject: [PATCH 63/82] bugfixes, old status icons --- src/nitro.less | 1 + src/profile.less | 16 ++++++++++------ src/style.less | 16 ++++++++++++++-- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/nitro.less b/src/nitro.less index 2b84eb3..97f6922 100644 --- a/src/nitro.less +++ b/src/nitro.less @@ -8,6 +8,7 @@ [class*="perks-"], [class*="nitro"], [class^="upsell"], +[class*="Upsell"], [class^="availabilityIndicator-"], div[class^="serverBoostTabItem-"], div[class*="hero"], diff --git a/src/profile.less b/src/profile.less index c8d3742..d62e746 100644 --- a/src/profile.less +++ b/src/profile.less @@ -24,7 +24,7 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { [class^="profileBadges-"], { &:extend(.nitro); } } -.profile() when (@no-banner = true) { +.profile() { // banners div[class^="listItemContents-"] div[class^="userInfo"] { padding-top: 0; div[class^="avatar-"] { @@ -53,6 +53,10 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { } .profile(); +div[class^="pencilContainer-"] { + z-index: 1; // fix edit button in profile +} + // Profile card in settings div[class^="accountProfileCard-"] { div[class^="field-"]:nth-child(1) { @@ -67,15 +71,15 @@ div[class^="accountProfileCard-"] { } } -div[class^="banner-"] { +div[class^="banner"] { position: absolute; width: inherit; - max-height: 84px; + max-height: 72px; &:extend(.rounder); + div[class^="profileBannerPreview-"] &, &[class*="popoutBanner"] { - position: relative; - max-height: 128px; .bottom-border(); + width: 100%; } } @@ -110,7 +114,7 @@ div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="sm div[class^="nameTag"] { width: 64px; position: absolute; - margin-top: -84px; + margin-top: -64px; margin-left: 130px; } diff --git a/src/style.less b/src/style.less index 2a0e685..4d7d095 100644 --- a/src/style.less +++ b/src/style.less @@ -36,6 +36,12 @@ div[class^="role-"] { background: unset; } +div[class^="statusItem-"] foreignObject, +rect[class^="pointerEvents-"], +{ + mask: url(#svg-mask-status-online); +} + // Round // UI parts li[class^="channel-"], @@ -123,6 +129,11 @@ div[class^="attachedBars-"] { position: relative; } div[class^="channelTextArea-"] { + &[class*="channelTextAreaDisabled-"] + button[class^="attachButton-"] { + display: none; + } + & > div[class^="scrollableContainer-"] { background-color: unset; opacity: 1; @@ -142,11 +153,12 @@ div[class^="channelTextArea-"] { padding: 8px; width: auto; height: auto; + margin-right: 8px; } div[class^="textArea-"] { - margin-left: 8px; - .right-border(); + &:not([class*="textAreaDisabled-"]) + { .right-border(); } div > * { left: (@roundest / 2); } } From 22b687a1be6462d6e7e917863e82192e4175be3c Mon Sep 17 00:00:00 2001 From: Er2 Date: Wed, 20 Apr 2022 21:48:15 +0300 Subject: [PATCH 64/82] new invite style --- src/style.less | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/style.less b/src/style.less index 4d7d095..223cf93 100644 --- a/src/style.less +++ b/src/style.less @@ -213,3 +213,20 @@ div[class*="stickyHeader-"], width: 100%; } } + +// new invite with splash style +div[id^="message-accessories-"] > div[class^="wrapper-"] { + position: relative; + div[class^="inviteSplash-"] { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; + filter: brightness(50%); + + & ~ * { + position: relative; + z-index: 1; + } + } +} From e745c3f4c6332119fcedf8f83c544193801e6e1c Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 24 Apr 2022 11:34:07 +0300 Subject: [PATCH 65/82] update --- src/bd.less | 34 ++++++++++++++++++++++++++++++++++ src/profile.less | 2 +- src/style.less | 29 +++++++++++++++++------------ src/ui.less | 37 ++++++++++++++++++++++++++++--------- 4 files changed, 80 insertions(+), 22 deletions(-) create mode 100644 src/bd.less diff --git a/src/bd.less b/src/bd.less new file mode 100644 index 0000000..8a9ca0b --- /dev/null +++ b/src/bd.less @@ -0,0 +1,34 @@ +// BetterDiscord specific things + +div[class^="bd-"] +{ &:extend(.round); } + +div.bd-search-wrapper, +div.bd-changelog-button { + align-self: center; + margin: 0; + margin-right: 8px; +} + +div[class^="standardSidebarView-"] { + // PluginRepo and ThemeRepo + div[class^="repoList-"] > div { + div[class^="repoHeader-"] { + & > * { + max-width: unset; + } + } + + & > div:last-child { + height: 100vh; + } + #pluginrepo-tab, + #themerepo-tab { + max-width: unset; + } + } +} + +div.bd-addon-list:not(.bd-grid-view) { + .horiz-tab(); +} diff --git a/src/profile.less b/src/profile.less index d62e746..08df48d 100644 --- a/src/profile.less +++ b/src/profile.less @@ -94,7 +94,7 @@ header div[class^="nameTagNoCustomStatus-"] { margin-left: 160px; // after avatar, not before } -div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="small-"] { +div.root-8LYsGj { // I not love fixed classes, but this selects only modal page flex-direction: row; header { diff --git a/src/style.less b/src/style.less index 223cf93..731fa54 100644 --- a/src/style.less +++ b/src/style.less @@ -18,7 +18,7 @@ div[class^="repliedMessage-"] { left: 0; right: 100%; top: 0; bottom: 0; } - & > img { + & > :first-child { margin-left: 16px; } } @@ -30,7 +30,7 @@ div[class^="role-"] { border-style: solid; } -[class*="embed"] { +article[class^="embed"] { .left-border(3px); max-width: unset; background: unset; @@ -215,18 +215,23 @@ div[class*="stickyHeader-"], } // new invite with splash style -div[id^="message-accessories-"] > div[class^="wrapper-"] { - position: relative; - div[class^="inviteSplash-"] { - position: absolute; +div[id^="message-accessories-"] { + & > div[class^="messageAttachment-"] { width: 100%; - height: 100%; - z-index: 0; - filter: brightness(50%); + } + & > div[class^="wrapper-"] { + position: relative; + div[class^="inviteSplash-"] { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; + filter: brightness(50%); - & ~ * { - position: relative; - z-index: 1; + & ~ * { + position: relative; + z-index: 1; + } } } } diff --git a/src/ui.less b/src/ui.less index c471f3f..d811525 100644 --- a/src/ui.less +++ b/src/ui.less @@ -61,8 +61,35 @@ div[class^="radioBar-"] { border: none; } +div[class^="card-"], +div.bd-server-card { + & > div[class*="header"], + & > div[class*="Header"] { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + + div[class^="coverWrapper"], + div[class^="splash"] { + filter: brightness(0.5); + } + .bd-server-icon, + & > div[class*="icon"], + & > div[class*="Icon"] { + position: relative; + width: 42px; + height: 42px; + overflow: hidden; + padding: 5px; + } + } + & > div[class*="info"], + & > div[class*="Info"] { + margin-top: 84px; + } +} + // Round -div[class^="bd-"], div[class^="tabBarItem-"], div[class^="checkbox"], button[class*="button"], @@ -79,11 +106,3 @@ div[class*="card"], div[class^="categoryItem-"] > *, // in Discovery div[class^="content-"] img[class^="image-"], { &:extend(.rounder); } - -// BetterDiscord -div.bd-search-wrapper, -div.bd-changelog-button { - align-self: center; - margin: 0; - margin-right: 8px; -} From 93a40d01990310e8f10a66decc68bb15f5c024ff Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 24 Apr 2022 13:37:14 +0300 Subject: [PATCH 66/82] whoops --- btfl.less | 1 + 1 file changed, 1 insertion(+) diff --git a/btfl.less b/btfl.less index 5a759a1..373ba46 100644 --- a/btfl.less +++ b/btfl.less @@ -21,6 +21,7 @@ @import "src/hide"; @import "src/mobile"; @import "src/nitro"; +@import "src/bd"; // Style @import "src/materials"; From ee1e4ffc43678c7fa792d3f54fc0928d6bdbf53d Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 24 Apr 2022 17:43:12 +0300 Subject: [PATCH 67/82] bugfixes --- src/bd.less | 9 ++++++--- src/hide.less | 8 -------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/bd.less b/src/bd.less index 8a9ca0b..a4fe3b4 100644 --- a/src/bd.less +++ b/src/bd.less @@ -13,15 +13,18 @@ div.bd-changelog-button { div[class^="standardSidebarView-"] { // PluginRepo and ThemeRepo div[class^="repoList-"] > div { + position: absolute; + width: 100%; + div[class^="repoHeader-"] { & > * { max-width: unset; } + div[class^="tabBar-"] { + height: 48px; + } } - & > div:last-child { - height: 100vh; - } #pluginrepo-tab, #themerepo-tab { max-width: unset; diff --git a/src/hide.less b/src/hide.less index c91986d..b8bc2b5 100644 --- a/src/hide.less +++ b/src/hide.less @@ -85,11 +85,3 @@ 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); } - } -} From b92d7226e490a0453bb661518e5994b9ce879203 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 24 Apr 2022 20:14:41 +0300 Subject: [PATCH 68/82] add webpack injection --- Makefile | 2 +- manifest.json | 5 +--- package.json | 2 +- src/script/inj.coffee | 7 +++++ src/script/webpack.coffee | 63 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 src/script/webpack.coffee diff --git a/Makefile b/Makefile index a97dac0..3739d46 100644 --- a/Makefile +++ b/Makefile @@ -28,4 +28,4 @@ out/css/base.css: src/style/base.less $(OSTYLES) npx lessc $< > $@ out/js/%.js: src/script/%.coffee - npx coffee --no-header -bco $@ $< + npx coffee --no-header -co $@ $< diff --git a/manifest.json b/manifest.json index 3f72750..79ef808 100644 --- a/manifest.json +++ b/manifest.json @@ -5,10 +5,6 @@ "description": "Custom theme for Discord", - "icons": { - "48": "ext.png" - }, - "permissions": [ "https://raw.githubusercontent.com/Er2ch/diskort/*", "*://discord.com/", @@ -21,6 +17,7 @@ "persistent": true }, + "web_accessible_resources": ["js/webpack.js"], "content_scripts": [{ "matches": ["*://discord.com/*"], "js": ["js/inj.js"] diff --git a/package.json b/package.json index fc8a8d8..d8c8d7a 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "3.0.0", "description": "Custom script and style engine for Discord", "dependencies": { - "coffeescript": "^2.6.1", + "coffeescript": "^2.7.0", "lessc": "^1.0.2" } } diff --git a/src/script/inj.coffee b/src/script/inj.coffee index e690a17..c58813d 100644 --- a/src/script/inj.coffee +++ b/src/script/inj.coffee @@ -10,6 +10,13 @@ base = 'https://raw.githubusercontent.com/Er2ch/diskort/main/' inject = -> + # inject webpack reader + s = document.createElement 'script' + s.setAttribute 'type', 'text/javascript' + s.setAttribute 'src', chrome.extension.getURL 'js/webpack.js' + document.head.appendChild s + + # inject style try resp = await fetch base + 'btfl.css' text = await resp.text() diff --git a/src/script/webpack.coffee b/src/script/webpack.coffee new file mode 100644 index 0000000..d8443a4 --- /dev/null +++ b/src/script/webpack.coffee @@ -0,0 +1,63 @@ +### DisKort +# (c) Er2 2022 +# Zlib License +### + +# Find and use Discord obfuscated webpack modules +window.webpack = {} + +# Helper functions +window.ModGetsAll = => + Object.values webpack.cache + .filter (m) => m.exports + +window.ModGet = (filt, first = true) => + if Array.isArray filt + key = filt + filt = (m) => key.every (k) => m.hasOwnProperty(k) or (m.__proto__ and m.__proto__.hasOwnProperty k) + + mods = ModGetsAll() + m = [] + for i of mods + continue if not mods.hasOwnProperty i + mod = mods[i] + {exports} = mod + continue if not exports + exports = exports.default if exports.default + continue if not filt exports + return exports if first + m.push exports + + first or m.length is 0 and null or m + +window.ModGets = (filt) => + ModGet filt, false + +window.ModGetName = (name, ret, forev) => + ModGet (m) => m.displayName?.toLowerCase() is name.toLowerCase() + +window.WinProps = => + platform: window.platform + GLOBAL_ENV: window.GLOBAL_ENV + DiscordSentry: window.DiscordSentry + __SENTRY__: window.__SENTRY__ + +console.log 'Welcome to DisKort!' + +init = => + while not window.webpackChunkdiscord_app or not window._ + await new Promise (res) => setTimeout res, 100 + + console.log 'Ready to inject' + + webpackChunkdiscord_app.push [ + [[ 'diskort' ]] + {} + (r) => + webpack.cache = r.c + webpack.require = (m) => r m + return + ] + return + +init() From 90b5e13544e25dd7d59373dbcb857f6416c8e24d Mon Sep 17 00:00:00 2001 From: Er2 Date: Wed, 27 Apr 2022 11:38:24 +0300 Subject: [PATCH 69/82] new profile popout --- src/profile.less | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/profile.less b/src/profile.less index 08df48d..d44c36c 100644 --- a/src/profile.less +++ b/src/profile.less @@ -20,8 +20,7 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { .profile() when (@no-nitro = true) { [class^="botTagVerified-"], - [class^="badgeList-"], - [class^="profileBadges-"], + [class^="badgeList-"], // modal profile page { &:extend(.nitro); } } .profile() { // banners @@ -34,22 +33,32 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { div[class^="userPopout-"], div[class^="profileBannerPreview-"] { - div[class^="avatarWrapper"] { - top: 8px; // fix divider bug + div[class^="avatarWrapper"], + div[class*="avatarUploaderNormal-"] { + position: relative; + margin-top: 8px; + top: 8px; + left: 0; + align-self: center; + } + + div[class^="headerText-"] { + display: flex; + flex-direction: column; + align-items: center; + } + + div[class^="profileBadges-"] { + position: static; + justify-content: center; } div[class^="headerTop-"] { - padding-top: 72px; // also fix divider bug - div[class^="headerText"] { - margin-left: 96px; // fix nickname - } + padding: 8px; + margin-top: 8px; + align-self: center; } } - - div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) { - margin-left: -8px; - margin-top: -8px; - } } .profile(); From 7e0d36b59e5e35db7783d9fd6075076f29d9f6b4 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 30 Jul 2022 20:30:33 +0300 Subject: [PATCH 70/82] Update Bugfixes. Bot and developer labels. Developer label shows on creator (ertu#9255). Nicks in chat were returned. Updated Profiles and Privacy and safety pages. --- src/fixes.less | 4 ++-- src/func.less | 23 +++++++++++++++++++++ src/hide.less | 4 +++- src/profile.less | 4 ++-- src/settings.less | 52 ++++++++++++++++++++++++++++++++++++++--------- src/style.less | 15 ++++++++++++-- 6 files changed, 85 insertions(+), 17 deletions(-) diff --git a/src/fixes.less b/src/fixes.less index ec9a949..9a6e06a 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -35,16 +35,16 @@ div[class^="messagesWrapper-"] div { } #emoji-picker-tab-panel { + z-index: 0; &:not([role="dialog"]) { // if add reaction (role=dialog), it breaks position: absolute; top: 0; bottom: 0; left: 0; right: 0; } - div[class^="wrapper-"] { top: 0; - border-radius: 5px 0 0 5px; // for add reaction + border-radius: 8px; } } diff --git a/src/func.less b/src/func.less index d3cef81..53ee288 100644 --- a/src/func.less +++ b/src/func.less @@ -29,3 +29,26 @@ height: 0 !important; } +.bot(@text: 'BOT', @height: 16px) { + @offset: (@height / 4); + display: inline-block; + content: @text; + height: @height; + padding: 0 @offset; + margin: @offset 0 0 @offset; + border-radius: @offset; + background: var(--brand-experiment); + color: #fff; + font-size: (@height - @offset); + line-height: ($font-size * 1.25); + vertical-align: top; +} + +.verify(@id) { + div.message-2CShn3 img.avatar-2e8lTP[src*="/@{id}/"] + .header-2jRmjb > .headerText-2z4IhQ::after + { .bot('✓DEV', 16px); } + // Replies + div.repliedMessage-3Z6XBG img.replyAvatar-sHd2sU[src*="/@{id}/"] + span::after + { .bot('✓DEV', 12px); } +} + diff --git a/src/hide.less b/src/hide.less index b8bc2b5..f5fa381 100644 --- a/src/hide.less +++ b/src/hide.less @@ -20,7 +20,9 @@ div[class^="art-"], // Nicks [class^="username-"] { li[class^="messageListItem-"] - [class*="cozyMessage-"] &, // inside message + [class*="cozyMessage-"] & { + color: var(--header-primary) !important; + } :not([class^="headerText-"]) > div[class*="nameTag-"] &, // outside message { &:extend(.hide); } diff --git a/src/profile.less b/src/profile.less index d44c36c..44351c0 100644 --- a/src/profile.less +++ b/src/profile.less @@ -36,10 +36,10 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { div[class^="avatarWrapper"], div[class*="avatarUploaderNormal-"] { position: relative; - margin-top: 8px; top: 8px; left: 0; - align-self: center; + width: max-content; + margin: 0 auto; } div[class^="headerText-"] { diff --git a/src/settings.less b/src/settings.less index 3ec4f6b..e5c1750 100644 --- a/src/settings.less +++ b/src/settings.less @@ -85,14 +85,26 @@ div[aria-controls="partner-tab"], } } -#profile-customization-tab div[class^="children"] -div[class^="baseLayout-"] { - & > div:not([class]) { - width: 100%; +// TrY AnImAtEd AvAtAr, eh... f you +[class^="optionBox-"]:nth-child(2) +{ &:extend(.nitro); } - div[class^="customizationSection-"] { - &:nth-child(2), &:nth-child(3) { - &:extend(.nitro); +#profile-customization-tab { + div.tabBar-2WK2Dm { + &:extend(.nitro); + + + * { + margin-top: 16px; + } + } + + div.baseLayout-8AMrwn { + & > div:not([class]) { + width: 100%; + + div.customizationSection-IGy2fS { + &:nth-child(2), &:nth-child(3) + { &:extend(.nitro); } } } } @@ -102,9 +114,29 @@ div[class^="baseLayout-"] { } } -// TrY AnImAtEd AvAtAr, eh... f you -[class^="optionBox-"]:nth-child(2) -{ &:extend(.nitro); } +#privacy-\&-safety-tab { + .marginBottom40-fvAlAV { + &:first-child div[role=radiogroup], + &:nth-child(3) + { .horiz-tab(3); } + &:nth-child(2) + { .horiz-tab(); } + + &:nth-child(3) { + h3 ~ * { + min-width: 100%; + } + } + + &:nth-child(2), &:nth-child(3) { + & > :first-child + { min-width: 100%; } + } + + &:last-child + { &:extend(.nitro); } + } +} #connections-tab div[class^="children-"] { flex-direction: row; diff --git a/src/style.less b/src/style.less index 731fa54..9bd873b 100644 --- a/src/style.less +++ b/src/style.less @@ -174,15 +174,22 @@ div[class^="channelTextArea-"] { } [role="menu"], -[role="dialog"]:not([class^="focusLock-"]), +[role="dialog"]:not(.focusLock-2tveLW):not(#emoji-picker-tab-panel), div[class^="focusLock-"] > div, div[class^="channelHeader-"], div[class^="layers-"] > div[class^="layer-"] div[class*="View-"], div[class*="stickyHeader-"], +div.emojiPicker-6YCk8a, +div.header-1XpmZs, +div.popoutContainer-2wbmiM, { &:extend(.acrylic all); } +.wrapper-1NNaWG::after { + display: none; +} + // status picker #status-picker > div { display: flex; @@ -192,7 +199,7 @@ div[class*="stickyHeader-"], #status-picker-idle, #status-picker-dnd, #status-picker-invisible { - margin: 8px; + padding: 8px; & > div { padding: 0; @@ -235,3 +242,7 @@ div[id^="message-accessories-"] { } } } + +// Verified! +.verify('785219544364351499'); + From 9e11c79c4690a0114d84a9021b3544389fe5f092 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 30 Jul 2022 20:57:11 +0300 Subject: [PATCH 71/82] fixed multiple pictures acrylic --- src/style.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/style.less b/src/style.less index 9bd873b..62b66ea 100644 --- a/src/style.less +++ b/src/style.less @@ -92,6 +92,7 @@ rect[class^="pointerEvents-"], div[class^="guildList-"] div[class^="container-"], div[class^="container"] > div, div[class^="chat-"] > div[class^="content-"], + div.focusLock-2tveLW .wrapper-2bCXfR, { &:extend(.rounder); } div[class^="auditLog"] { @@ -175,7 +176,8 @@ div[class^="channelTextArea-"] { [role="menu"], [role="dialog"]:not(.focusLock-2tveLW):not(#emoji-picker-tab-panel), -div[class^="focusLock-"] > div, +div[class^="focusLock-"] > div:not(.carouselModal-1eUFoq), +div.focusLock-2tveLW .wrapper-2bCXfR, div[class^="channelHeader-"], div[class^="layers-"] > div[class^="layer-"] div[class*="View-"], div[class*="stickyHeader-"], From 787310c3c9ffa583e2238f129829b5206988673a Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 7 Aug 2022 10:47:08 +0300 Subject: [PATCH 72/82] Update. Started using classes instead of *= selectors. Switching to new status picker. Center avatar near status picker. Fix media embed width. Fix warning icon in profile. Revert 8d1bf41e37 status icons. Remove mobile mode because Discord have own. TODO: Fix some... mobile things ;) Change .nitro to .hide in 1 place (no effect in current btfl.less configuration) Add verify setting. --- btfl.less | 2 +- src/dimmer.less | 18 +++++++--------- src/fixes.less | 21 ++++++++++++++----- src/mobile.less | 53 ----------------------------------------------- src/nitro.less | 1 + src/profile.less | 13 +++++++++++- src/settings.less | 2 +- src/style.less | 41 ++++++++++++++---------------------- 8 files changed, 55 insertions(+), 96 deletions(-) delete mode 100644 src/mobile.less diff --git a/btfl.less b/btfl.less index 373ba46..7464d3f 100644 --- a/btfl.less +++ b/btfl.less @@ -5,6 +5,7 @@ @no-nitro: true; @no-banner: false; +@verifies: true; @round: 8px; @rounder: 16px; @@ -19,7 +20,6 @@ // Optional @import "src/hide"; -@import "src/mobile"; @import "src/nitro"; @import "src/bd"; diff --git a/src/dimmer.less b/src/dimmer.less index 9721da8..ff46c3f 100644 --- a/src/dimmer.less +++ b/src/dimmer.less @@ -16,7 +16,7 @@ --input-background: #1e1e1e; color: var(--header-primary); - & [class*="close-"] { + & .close-1mLglB { color: var(--interactive-normal); &:hover @@ -24,24 +24,22 @@ } } -div[class^="layer-"] div.theme-light, -div[class^="downloadApps-"] { +div.layer-1Ixpg3 div.theme-light, +div.downloadApps-14IgKV { &:extend(.theme-dimmer all); - div[class*="root-"] { + div.root-g14mjS { background-color: var(--background-secondary); } - div[class*="footer-"] { + div.footer-31IekZ { background-color: var(--background-primary); } } -div[class^="downloadApps"] { - & { - background-color: var(--background-secondary) !important; - } - h3, div[class*="footer-"] { +div.downloadApps-14IgKV { + background-color: var(--background-secondary) !important; + h3, div.footer-2TRYcZ { color: var(--header-primary); } } diff --git a/src/fixes.less b/src/fixes.less index 9a6e06a..24bd659 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -1,5 +1,5 @@ // fix guild selector at left part -ul[data-list-id="guildsnav"] div[class^="scroller-"] { +ul[data-list-id="guildsnav"] div.scroller-3X7KbA { display: flex; flex-direction: column; overflow: hidden !important; @@ -30,7 +30,7 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] { margin-bottom: 8px; } -div[class^="messagesWrapper-"] div { +div.messagesWrapper-RpOMA3 > div { scrollbar-width: thin; } @@ -42,18 +42,18 @@ div[class^="messagesWrapper-"] div { top: 0; bottom: 0; left: 0; right: 0; } - div[class^="wrapper-"] { + div.wrapper-22rqw6 { top: 0; border-radius: 8px; } } -div[class*="fullscreenOnMobile"] div[class^="flex"] * { +div.fullscreenOnMobile-ixj0e3 div.flex-3BkGQD * { // fix overflow overflow: hidden; } -div[class*="templatesList-"] { +div.templatesList-uohY49 { // fix tempates list (it was removed) height: 128px; } @@ -80,3 +80,14 @@ div[class^="contentContainer-"] div[class*="stickyHeader-"] { padding-right: 0; margin: 0; } + +// media embed fixes +div.inlineMediaEmbed-1m3ApS { + width: max-content; +} + +// in profile +.warningCircleIcon-mFju_m { + position: fixed; +} + diff --git a/src/mobile.less b/src/mobile.less deleted file mode 100644 index 079e707..0000000 --- a/src/mobile.less +++ /dev/null @@ -1,53 +0,0 @@ -// 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/nitro.less b/src/nitro.less index 97f6922..4a174a0 100644 --- a/src/nitro.less +++ b/src/nitro.less @@ -22,6 +22,7 @@ div[class^="characterCount-"] div[class^="root-"], // at many characters [class^="clickableSticker-"], // stickers nav[class^="privateChannels-"] div div // Nitro tab at DM [data-list-item-id$="nitro"], +#account-style-your-profile, { &:extend(.nitro); } #channels > ul { diff --git a/src/profile.less b/src/profile.less index 44351c0..909158a 100644 --- a/src/profile.less +++ b/src/profile.less @@ -92,8 +92,10 @@ div[class^="banner"] { } } -div[class^="avatarWrapper-"] { +div.container-YkUktl div.avatarWrapper-1B9FTW { margin-right: auto; // make some space after avatar (sidebar at bottom) + min-width: unset; + padding: unset; } // Redesigned profile page @@ -157,3 +159,12 @@ div.root-8LYsGj { // I not love fixed classes, but this selects only modal page .left-border(@round); } } + +#account-info div.headerTop-3GPUSF { + padding-top: 108px; +} + +#account-avatar div.avatarWrapperNormal-ahVUaC { + left: 35%; +} + diff --git a/src/settings.less b/src/settings.less index e5c1750..333e56f 100644 --- a/src/settings.less +++ b/src/settings.less @@ -134,7 +134,7 @@ div[aria-controls="partner-tab"], } &:last-child - { &:extend(.nitro); } + { &:extend(.hide); } } } diff --git a/src/style.less b/src/style.less index 62b66ea..77c7a6c 100644 --- a/src/style.less +++ b/src/style.less @@ -36,12 +36,6 @@ article[class^="embed"] { background: unset; } -div[class^="statusItem-"] foreignObject, -rect[class^="pointerEvents-"], -{ - mask: url(#svg-mask-status-online); -} - // Round // UI parts li[class^="channel-"], @@ -193,33 +187,27 @@ div.popoutContainer-2wbmiM, } // status picker -#status-picker > div { +#account-status-picker + div.layer-2aCOJ3 div.scroller-1bVxF5 { display: flex; flex-flow: row wrap; justify-content: space-around; - #status-picker-online, - #status-picker-idle, - #status-picker-dnd, - #status-picker-invisible { + + & > div.item-1OdjEX { padding: 8px; + margin: 0; + & > div { padding: 0; - // & > because svg has status- div - & > div[class^="status-"], - & > div[class^="description-"] { - display: none; - } - } - svg { - width: 16px; - height: 16px; - margin-left: 4px; + & > div.status-2xYiEF, + & > div.description-1Dd2kv, + { &:extend(.hide); } } } - #status-picker-custom-status, - div[class^="submenuContainer-"] { - width: 100%; + svg { + width: 16px; + height: 16px; + margin-left: 4px; } } @@ -246,5 +234,8 @@ div[id^="message-accessories-"] { } // Verified! -.verify('785219544364351499'); +.vrf() when (@verifies = true) { + .verify('785219544364351499'); +} +.vrf(); From 8d79da2202b0f0ea7b56253654dbc6d7e26c5bc8 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 7 Aug 2022 14:16:34 +0300 Subject: [PATCH 73/82] move fixes --- src/fixes.less | 6 ++++++ src/func.less | 16 ++++++++++++++++ src/profile.less | 6 ------ src/settings.less | 16 ---------------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/fixes.less b/src/fixes.less index 24bd659..985d72c 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -91,3 +91,9 @@ div.inlineMediaEmbed-1m3ApS { position: fixed; } +div.container-YkUktl div.avatarWrapper-1B9FTW { + margin-right: auto; // make some space after avatar (sidebar at bottom) + min-width: unset; + padding: unset; +} + diff --git a/src/func.less b/src/func.less index 53ee288..3ed5b69 100644 --- a/src/func.less +++ b/src/func.less @@ -44,6 +44,22 @@ vertical-align: top; } +.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; + } +} + .verify(@id) { div.message-2CShn3 img.avatar-2e8lTP[src*="/@{id}/"] + .header-2jRmjb > .headerText-2z4IhQ::after { .bot('✓DEV', 16px); } diff --git a/src/profile.less b/src/profile.less index 909158a..056a2e9 100644 --- a/src/profile.less +++ b/src/profile.less @@ -92,12 +92,6 @@ div[class^="banner"] { } } -div.container-YkUktl div.avatarWrapper-1B9FTW { - margin-right: auto; // make some space after avatar (sidebar at bottom) - min-width: unset; - padding: unset; -} - // Redesigned profile page header div[class^="nameTagWithCustomStatus-"], header div[class^="nameTagNoCustomStatus-"] { diff --git a/src/settings.less b/src/settings.less index 333e56f..7950215 100644 --- a/src/settings.less +++ b/src/settings.less @@ -61,22 +61,6 @@ 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 { From 5b91f8f84386e65bd4dbaf7445eb69a9d5230143 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 7 Aug 2022 17:20:53 +0300 Subject: [PATCH 74/82] continue adding static classes --- src/bd.less | 64 +++++++++++++++++++---- src/func.less | 6 +-- src/people.less | 10 ++-- src/settings.less | 128 ++++++++++++++++++++++------------------------ 4 files changed, 122 insertions(+), 86 deletions(-) diff --git a/src/bd.less b/src/bd.less index a4fe3b4..bea3090 100644 --- a/src/bd.less +++ b/src/bd.less @@ -1,26 +1,73 @@ // BetterDiscord specific things -div[class^="bd-"] +.bd-button, .bd-search-wrapper, +.bd-changlelog-button, .bd-select-options, +#bd-pub-button, { &:extend(.round); } -div.bd-search-wrapper, -div.bd-changelog-button { +.bd-notice, .bd-toast, +{ &:extend(.rounder); } + +.bd-toasts { + align-items: flex-end; + width: calc(100% - @roundest) !important; + left: 0 !important; +} + +.bd-select-options { + max-width: max-content !important; +} + +.bd-search-wrapper, +.bd-changelog-button { align-self: center; margin: 0; margin-right: 8px; } -div[class^="standardSidebarView-"] { +div.bd-controls { + column-gap: (@round / 2); +} + +.butn(@norm, @hov) { + svg { background: @norm; } + &:hover svg { background: @hov; } +} + +.floating-window { + max-width: 100% !important; + max-height: 100% !important; + .floating-window-buttons { + .button { + &:hover { + background: none; + } + svg { + color: #000; + &:extend(.round); + } + &.maximize-button { + .butn(#aaaa00, #eeee00); + } + &.close-button { + .butn(#aa0000, #ee0000); + } + } + } + &:extend(.round); +} + +div.standardSidebarView-E9Pc3j { // PluginRepo and ThemeRepo - div[class^="repoList-"] > div { + div.repoList-9JnAPs > div { position: absolute; width: 100%; - div[class^="repoHeader-"] { + div.repoHeader-2KfNvH { & > * { max-width: unset; } - div[class^="tabBar-"] { + div.tabBar-2hXqzU { height: 48px; } } @@ -32,6 +79,3 @@ div[class^="standardSidebarView-"] { } } -div.bd-addon-list:not(.bd-grid-view) { - .horiz-tab(); -} diff --git a/src/func.less b/src/func.less index 3ed5b69..d7e87b6 100644 --- a/src/func.less +++ b/src/func.less @@ -44,7 +44,7 @@ vertical-align: top; } -.horiz-tab(@cols: 2) { +.horiz-tab(@cols: 2, @div: ~'.divider-_0um2u') { @gap: @div-width * 2; @el-width: calc(100% / @cols - @gap); display: flex; @@ -55,8 +55,8 @@ width: @el-width; } - div[class^="divider"]:empty { - display: none; + @{div}:empty { + &:extend(.hide); } } diff --git a/src/people.less b/src/people.less index fa78fd3..aa4c9ae 100644 --- a/src/people.less +++ b/src/people.less @@ -1,21 +1,21 @@ -[class^="membersGroup-"] // groups (roles) +.membersGroup-2eiWxl // groups (roles) { &:extend(.hide); } -[class^="membersWrap-"] { +.membersWrap-3NUR2t { // make it shorter - &, div[class^="members-"] { + &, div.members-3WRCEx { min-width: 48px; width: 0; } // remove fixed height - div[class^="content-"] { + div.content-2a4AW9 { height: unset !important; flex-grow: 0; } - div[class^="member-"] { + div.member-2gU6Ar { padding: 0; margin-left: 0; } diff --git a/src/settings.less b/src/settings.less index 7950215..c162c84 100644 --- a/src/settings.less +++ b/src/settings.less @@ -1,20 +1,19 @@ -div[class^="keybind-"], // true must know it! -[class*="socialLink-"], // in change log -div[class^="socialLinks-"], // in settings at bottom +div.keybind-13vtq8, // true must know it! +div.socialLinks-3ywLUf, // in settings at end { &:extend(.hide); } // New sidebar in settings -div[class^="standardSidebarView-"] { +div.standardSidebarView-E9Pc3j { flex-direction: column; - div[class^="sidebarRegion-"] { + div.sidebarRegion-1VBisG { overflow: hidden; flex-basis: unset; // bugfix to normalize height flex-grow: 0; // fix scaling - div[class^="header-"], - div[class^="separator-"] + div.header-2Kx1US, + div.separator-2wx7h6 { display: none; } & > div { @@ -37,7 +36,7 @@ div[class^="standardSidebarView-"] { } } - div[class^="contentRegion-"] { + div.contentRegion-3HkfJJ { overflow-y: auto; scrollbar-width: thin; @@ -70,18 +69,10 @@ div[aria-controls="partner-tab"], } // TrY AnImAtEd AvAtAr, eh... f you -[class^="optionBox-"]:nth-child(2) +div.optionBox-1UOevl:nth-child(2) { &:extend(.nitro); } #profile-customization-tab { - div.tabBar-2WK2Dm { - &:extend(.nitro); - - + * { - margin-top: 16px; - } - } - div.baseLayout-8AMrwn { & > div:not([class]) { width: 100%; @@ -93,7 +84,7 @@ div[aria-controls="partner-tab"], } } - div[class^="bioTextArea-"] { + div.bioTextArea-dDGOeC { height: 30vh; } } @@ -122,38 +113,38 @@ div[aria-controls="partner-tab"], } } -#connections-tab div[class^="children-"] { +#connections-tab div.children-1xdcWE { flex-direction: row; flex-flow: row wrap; - div[class^="accountList-"] { + div.accountList-Wii_T5 { margin-right: @div-width; width: 33%; height: 100%; // decreases height? 0_0 // auto detect - & + div[class^="container-"] { + & + div.container-1zDvAE { order: -1; width: 100%; } } - div[class^="connectionList-"] { + div.connectionList-11Q_X- { flex-grow: 1; } } -#appearance-tab div[class^="children-"] { +#appearance-tab div.children-1xdcWE { .horiz-tab(); & > div:first-child { width: 100%; } - div[class^="marginTop20-"] > div[class^="slider-"] { + div.marginTop20-2T8ZJx > div.slider-1NC-Gf { margin-top: 28px; } } -#accessibility-tab div div[class^="children-"] { +#accessibility-tab div.children-1xdcWE { & > div { &:nth-child(2), &:nth-child(3), @@ -167,18 +158,18 @@ div[aria-controls="partner-tab"], } } -#notifications-tab div[class^="children"] { +#notifications-tab div.children-1xdcWE { div:nth-child(6) { &:extend(.hide); } } -#language-tab div[class^="children-"] { +#language-tab div.children-1xdcWE { div div > div[role="radiogroup"] { .horiz-tab(3); } } -#streamer-mode-tab div[class^="children-"] { +#streamer-mode-tab div.children-1xdcWE { .horiz-tab(); & > * { &:nth-child(1), @@ -190,7 +181,7 @@ div[aria-controls="partner-tab"], } // Server settings -#overview-tab div[class^="children-"] > div { +#overview-tab > div > div.children-1xdcWE > div { // system messages &:nth-child(3) { .horiz-tab(); @@ -211,17 +202,49 @@ div[aria-controls="partner-tab"], // nitro features &:nth-child(5) > div > div:last-child { .horiz-tab(3); - & > * { + div.divider--oiTeJ { padding: 0; margin: 0; border: none; } - & > div:first-child div[class^="flexChild-"] - { display: none; } + & > div:first-child div.flexChild-3PzYmX + { &:extend(.hide); } } } -#moderation-tab div[class^="children-"] { +#integrations-tab > div:nth-child(2) { + .horiz-tab(); + + img.iconWrapper-1sOtkE { + width: unset; + } + + button[class^="createButton-"], + [class^="sectionHeader-"], + & > div:first-child { + width: 100%; + margin-bottom: @div-width * 3; + } +} + +#widget-tab div.children-1xdcWE { + &, & > div.infoWrapper-1HtsGy { + .horiz-tab(); + row-gap: @gap * 2; + } + + img.infoItem-Q4HWUe + { &:extend(.hide); } + + div.infoItem-Q4HWUe, + & > div:first-child, + & > div:last-child { + width: 100%; + flex-basis: unset; + } +} + +#moderation-tab > div > div.children-1xdcWE { div[role="radiogroup"] { .horiz-tab(); } @@ -234,45 +257,14 @@ div[data-list-id="audit-log"] { } } -#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-"] +#community-tab > div.container-2CHEay { + & > div.banner-3-oqyl { &:extend(.hide); } } -#discovery-tab > div[class^="container-"] { +#discovery-tab > div.container-26RXEg { .horiz-tab(); + // disabledButtonWrapper-2Oz3aY span[class*="Button"] { align-self: start; } From 444d94d1a9fe64bae029878f5eee894a83f720a6 Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 6 Sep 2022 21:24:40 +0300 Subject: [PATCH 75/82] Update. Bugfixes. Continue removing classes. Add some border radius to tabs. Add support for new profile update (not tested without it). Radius are now not important when not needed. --- src/fixes.less | 4 ++ src/func.less | 22 +++---- src/hide.less | 23 +++---- src/profile.less | 154 ++++++++++++++++++++++++++-------------------- src/settings.less | 21 ++----- src/style.less | 72 +++++++++++----------- src/ui.less | 16 +++-- 7 files changed, 162 insertions(+), 150 deletions(-) diff --git a/src/fixes.less b/src/fixes.less index 985d72c..63ae6e1 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -75,6 +75,10 @@ div[class^="toolsContainer-"] { // in settings } } +div.page-nvZ_ef { + margin: 0 16px; +} + div[class^="contentContainer-"] div[class*="stickyHeader-"] { padding-left: 0; padding-right: 0; diff --git a/src/func.less b/src/func.less index d7e87b6..346d903 100644 --- a/src/func.less +++ b/src/func.less @@ -1,25 +1,25 @@ .left-border(@r: 0) { - border-top-left-radius: @r !important; - border-bottom-left-radius: @r !important; + border-top-left-radius: @r; + border-bottom-left-radius: @r; } .right-border(@r: 0) { - border-top-right-radius: @r !important; - border-bottom-right-radius: @r !important; + border-top-right-radius: @r; + border-bottom-right-radius: @r; } .bottom-border(@r: 0) { - border-bottom-left-radius: @r !important; - border-bottom-right-radius: @r !important; + border-bottom-left-radius: @r; + border-bottom-right-radius: @r; } .top-border(@r: 0) { - border-top-left-radius: @r !important; - border-top-right-radius: @r !important; + border-top-left-radius: @r; + border-top-right-radius: @r; } .radius(@r: 0) { - border-radius: @r !important; + border-radius: @r; } .hide { @@ -62,9 +62,9 @@ .verify(@id) { div.message-2CShn3 img.avatar-2e8lTP[src*="/@{id}/"] + .header-2jRmjb > .headerText-2z4IhQ::after - { .bot('✓DEV', 16px); } + { .bot('✓', 16px); } // Replies div.repliedMessage-3Z6XBG img.replyAvatar-sHd2sU[src*="/@{id}/"] + span::after - { .bot('✓DEV', 12px); } + { .bot('✓', 12px); } } diff --git a/src/hide.less b/src/hide.less index f5fa381..facfa40 100644 --- a/src/hide.less +++ b/src/hide.less @@ -11,23 +11,16 @@ { &:extend(.hide); } } +// Nicks +.username-1g6Iq1 +{ &: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-"] & { - color: var(--header-primary) !important; - } - :not([class^="headerText-"]) - > div[class*="nameTag-"] &, // outside message - { &:extend(.hide); } -} - [class^="discrimBase-"], div[class^="discordTag-"] [class^="username-"], // friends tab div[class^="nameTag-"], @@ -64,8 +57,8 @@ div[class^="toolbar-3_"] > :nth-child(3) { &:extend(.hide); } // Text area -div[class^="channelTextArea-"] { - div div > div[class^="buttons-"] { // button +div.channelTextArea-1FufC0 { + div.buttons-uaqb-5 { // buttons & > button // gift button, f you { &:extend(.hide); } @@ -74,8 +67,8 @@ div[class^="channelTextArea-"] { { &:extend(.hide); } } } - & > div[class^="scrollableContainer-"] - div[class^="divider-"] // breaks redesigned text area + div.scrollableContainer-15eg7h + div.separator-3ng7S5 // breaks redesigned text area { &:extend(.hide); } } diff --git a/src/profile.less b/src/profile.less index 056a2e9..0c99dcb 100644 --- a/src/profile.less +++ b/src/profile.less @@ -1,23 +1,4 @@ -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-"], // modal profile page @@ -30,34 +11,43 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { top: 0; } } + // fixes + div.overlayBackground-arbZMT, + div.overlayBackground-H1K9ZY { + margin: 8px 0 0 0; + background: none; + padding-right: 8px; + } + div.overlayBackground-H1K9ZY { + // in settings + padding-right: 0; + margin-top: -8px; - div[class^="userPopout-"], - div[class^="profileBannerPreview-"] { - div[class^="avatarWrapper"], - div[class*="avatarUploaderNormal-"] { - position: relative; - top: 8px; - left: 0; - width: max-content; + div.section-3FmfOT:first-child { + // nick margin: 0 auto; } + } + div.status-b9jLr4 { + position: relative; + top: -32px; + left: calc(50% + 8px); + } - div[class^="headerText-"] { - display: flex; - flex-direction: column; - align-items: center; - } + .profileBadges-2pItdR, + .profileBadges-31rDHI { + background: rgba(0, 0, 0, 0.1); + justify-content: left; + position: absolute; + right: 0; + left: 8px; + } - div[class^="profileBadges-"] { - position: static; - justify-content: center; - } - - div[class^="headerTop-"] { - padding: 8px; - margin-top: 8px; - align-self: center; - } + div.avatarWrapper-3y0KZ1, + div.avatarUploader-CHGwK7 { + position: relative; + left: 0; + margin: 0 auto; } } .profile(); @@ -67,17 +57,46 @@ div[class^="pencilContainer-"] { } // Profile card in settings -div[class^="accountProfileCard-"] { - div[class^="field-"]:nth-child(1) { +div.accountProfileCard-lbN7n- { + div.field-21XZwa:first-child { height: 0; - div[class^="constrainedRow-"] { - display: none; - } + div.constrainedRow-3y91Xf + { &:extend(.hide); } button { top: -48pt; left: 300pt; } } + + div.userInfo-regn9W { + justify-content: left; + padding-top: 24px; + height: 56px; + + button { + margin-left: 32px; + margin-top: -8px; + } + } + + div.avatar-3mTjvZ { + background-color: var(--background-tertiary) !important; + .radius(); + border-bottom-right-radius: 16px; + top: 0; + } + + div.container-1gYwHN { + width: max-content; + margin-top: 8px; + margin-left: -22px; + background-color: var(--background-tertiary); + .radius(); + border-bottom-right-radius: 16px; + height: 32px; + padding-top: 4px; + padding-right: 4px; + } } div[class^="banner"] { @@ -93,69 +112,70 @@ div[class^="banner"] { } // 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.root-8LYsGj { // I not love fixed classes, but this selects only modal page +div.root-8LYsGj { flex-direction: row; header { width: 260px; margin: 24px; - div[class^="avatar-"] { + div.avatar-3QF_VA { top: 0; left: 0; position: relative; } - div[class^="headerTop-"] { + div.headerTop-1PNKck { position: unset; justify-content: left; } - div[class^="nameTag"] { + div.nameTag-H6kSJ0 { width: 64px; position: absolute; margin-top: -64px; margin-left: 130px; } - div[class^="customStatus"] { + div.customStatus-kFfkj5 { margin-top: 16px; padding: 0; } } - div[class^="body-"] { + div.body-1Ukv50 { border: none; margin-left: 16px; height: 370px; & > * { padding: 0 !important; } } - div[class^="tabBarContainer"] + div.tabBarContainer-sCZC4w { border: none; } - div[class^="tabBar-"] { + div.tabBar-2hXqzU { flex-direction: column; height: unset; margin: 8px; } - div[class^="tabBarItem-"] { + div.tabBarItem-30Te4- { margin-right: 0; border-bottom: unset; - &:hover, &[class*="selected-"] { + &:hover, &.selected-g-kMVV { border-right: 2px solid var(--interactive-active) !important; } - .top-border(); - .left-border(@round); + .radius() !important; + .left-border(@round) !important; } } -#account-info div.headerTop-3GPUSF { - padding-top: 108px; +#account-info { + div.headerTop-3GPUSF { + padding-top: 108px; + } + div.profileBadges-2pItdR { + width: max-content; + .radius(8px); + padding: 2px; + } } #account-avatar div.avatarWrapperNormal-ahVUaC { diff --git a/src/settings.less b/src/settings.less index c162c84..8dc17a9 100644 --- a/src/settings.less +++ b/src/settings.less @@ -46,20 +46,6 @@ div.standardSidebarView-E9Pc3j { } } -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); } - #my-account-tab > div { .horiz-tab(); & > div:first-child { @@ -113,13 +99,12 @@ div.optionBox-1UOevl:nth-child(2) } } -#connections-tab div.children-1xdcWE { +#passport-tab div.children-1xdcWE { flex-direction: row; flex-flow: row wrap; div.accountList-Wii_T5 { margin-right: @div-width; width: 33%; - height: 100%; // decreases height? 0_0 // auto detect & + div.container-1zDvAE { @@ -130,6 +115,10 @@ div.optionBox-1UOevl:nth-child(2) div.connectionList-11Q_X- { flex-grow: 1; } + + div.connection-YOVI9j { + height: max-content; + } } #appearance-tab div.children-1xdcWE { diff --git a/src/style.less b/src/style.less index 77c7a6c..cbeaca1 100644 --- a/src/style.less +++ b/src/style.less @@ -123,47 +123,49 @@ div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"] div[class^="attachedBars-"] { position: relative; } -div[class^="channelTextArea-"] { - &[class*="channelTextAreaDisabled-"] - button[class^="attachButton-"] { - display: none; - } +div.channelTextArea-1VQBuV { + &.channelTextAreaDisabled-1p2fQv + .attachButton-1ijpt9 + { &:extend(.hide); } - & > div[class^="scrollableContainer-"] { + div.scrollableContainer-15eg7h { background-color: unset; opacity: 1; + } - button[class^="attachButton-"], - div[class^="textArea-"], - div[class^="buttons-"] { - background-color: var(--background-secondary); - border-radius: @roundest !important; - margin: 0; + .attachButton-1ijpt9, + .textArea-2CLwUE, + .buttons-uaqb-5 { + background-color: var(--background-secondary); + .radius(@roundest) !important; + margin: 0; + } + + div.inner-NQg18Y { + padding: 0; + } + + .attachButton-1ijpt9 { + padding: 8px; + width: auto; + height: auto; + margin-right: 8px; + } + + .textArea-2CLwUE { + &:not(.textAreaDisabled-10ObTX) + { .right-border() !important; } + + div > * { + left: (@roundest / 2); } + } - & > div[class^="inner-"] - { padding: 0; } - - button[class^="attachButton-"] { - padding: 8px; - width: auto; - height: auto; - margin-right: 8px; - } - - div[class^="textArea-"] { - &:not([class*="textAreaDisabled-"]) - { .right-border(); } - - div > * { left: (@roundest / 2); } - } - - div[class^="buttons-"] { - height: auto; // to match input height - & > * { - align-items: center; // center buttons - } - .left-border(); + .buttons-uaqb-5 { + height: auto; // to match input height + .left-border() !important; + & > * { + align-items: center; // center buttons } } } diff --git a/src/ui.less b/src/ui.less index d811525..f63882e 100644 --- a/src/ui.less +++ b/src/ui.less @@ -9,7 +9,7 @@ div[class^="slider-"] { width: @rounder; height: @rounder; border: none; - border-radius: @half; + .radius(@half); top: @half * 1.5; margin-top: unset; margin-left: -@half; @@ -19,19 +19,23 @@ div[class^="slider-"] { // tabs div[role="tab"], -div[class^="tabBarItem-"] { - .top-border(16px); - .bottom-border(); +div.tabBarItem-30Te4- { + .top-border(16px) !important; + .bottom-border(4px) !important; margin: 0; margin-top: 8px; margin-right: 16px; padding: 4px 8px; &:hover, - &[class*="selected-"] { + &.selected-g-kMVV { background-color: var(--interactive-muted) !important; color: var(--text-normal) !important; } + + div.textBadge-1fdDPJ { + margin-left: 4px; + } } // slider @@ -46,7 +50,7 @@ div[class^="container-"] { & > svg[class*="slider"] { width: 16px !important; height: 16px !important; - border-radius: 50%; + .radius(50%); margin: 4px 8px; margin-right: 0; background-color: white; From 05765062ecc3be4b474fca654780358dab7bd73b Mon Sep 17 00:00:00 2001 From: Er2 Date: Tue, 6 Sep 2022 21:36:20 +0300 Subject: [PATCH 76/82] backdrop filter already enabled --- readme.org | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/readme.org b/readme.org index 3373187..43f2eaf 100644 --- a/readme.org +++ b/readme.org @@ -9,7 +9,8 @@ Currently it's in beta, more of design was merged into css. ** Firefox -Highly recommend to enable backdrop-filter for acrylic. +Firefox < 103: 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. From b843b50c4400f7ca4dd7674e8e5fdfc83791c5eb Mon Sep 17 00:00:00 2001 From: Er2 Date: Wed, 14 Sep 2022 21:44:10 +0300 Subject: [PATCH 77/82] bugfixes --- src/hide.less | 2 +- src/profile.less | 5 +++++ src/settings.less | 8 +++++++- src/style.less | 5 +++++ 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/hide.less b/src/hide.less index facfa40..fc814c2 100644 --- a/src/hide.less +++ b/src/hide.less @@ -68,7 +68,7 @@ div.channelTextArea-1FufC0 { } } div.scrollableContainer-15eg7h - div.separator-3ng7S5 // breaks redesigned text area + div.divider-2rZFJK // breaks redesigned text area { &:extend(.hide); } } diff --git a/src/profile.less b/src/profile.less index 0c99dcb..0f4b86b 100644 --- a/src/profile.less +++ b/src/profile.less @@ -49,6 +49,10 @@ left: 0; margin: 0 auto; } + + div.avatarPositionPremiumBanner-2nq2Fy { + top: 24px; + } } .profile(); @@ -103,6 +107,7 @@ div[class^="banner"] { position: absolute; width: inherit; max-height: 72px; + min-height: 0; &:extend(.rounder); div[class^="profileBannerPreview-"] &, &[class*="popoutBanner"] { diff --git a/src/settings.less b/src/settings.less index 8dc17a9..47c6a15 100644 --- a/src/settings.less +++ b/src/settings.less @@ -99,9 +99,15 @@ div.optionBox-1UOevl:nth-child(2) } } -#passport-tab div.children-1xdcWE { +#connections-tab div.children-1xdcWE { flex-direction: row; flex-flow: row wrap; + + div.connectionsContainer-3wRUc6 { + row-gap: 8px; + } + + div.connectContainer-1hylYM, div.accountList-Wii_T5 { margin-right: @div-width; width: 33%; diff --git a/src/style.less b/src/style.less index cbeaca1..876e4ee 100644 --- a/src/style.less +++ b/src/style.less @@ -150,6 +150,11 @@ div.channelTextArea-1VQBuV { width: auto; height: auto; margin-right: 8px; + + .icon-2P5yLI { + padding: 0; + margin-top: 2px; + } } .textArea-2CLwUE { From af37e0a02d2853c4f19a3d81b1f961eb8885ccaf Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 17 Sep 2022 12:08:10 +0300 Subject: [PATCH 78/82] bugfixes --- btfl.less | 1 - src/hide.less | 10 ++++- src/settings.less | 13 +------ src/style.less | 96 ++++++++++++++++++++++++++++++++--------------- src/ui.less | 2 +- 5 files changed, 77 insertions(+), 45 deletions(-) diff --git a/btfl.less b/btfl.less index 7464d3f..069cc52 100644 --- a/btfl.less +++ b/btfl.less @@ -5,7 +5,6 @@ @no-nitro: true; @no-banner: false; -@verifies: true; @round: 8px; @rounder: 16px; diff --git a/src/hide.less b/src/hide.less index fc814c2..1327a94 100644 --- a/src/hide.less +++ b/src/hide.less @@ -32,7 +32,10 @@ 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 +.divider-IqmEqJ .content-3spvdd, // date in divider +.spine-29OFwR, // threads svg +.mainContent-20q_Hp .subtitle-3PyFgf, // forum subtitle +.scrollerInner-2PPAp2 div.box-2iMsQm, // start the conversation in forum div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc. h2[class^="privateChannelsHeaderContainer"], // direct messages label @@ -80,3 +83,8 @@ div[class^="overviewSidebar-"], // at community creation, not needed form::before, // message input shadow div[class^="children-"]::after, // shadow at title { &:extend(.hide); } + +.container-3wLKDe { + background: unset !important; +} + diff --git a/src/settings.less b/src/settings.less index 47c6a15..233b701 100644 --- a/src/settings.less +++ b/src/settings.less @@ -78,21 +78,12 @@ div.optionBox-1UOevl:nth-child(2) #privacy-\&-safety-tab { .marginBottom40-fvAlAV { &:first-child div[role=radiogroup], - &:nth-child(3) { .horiz-tab(3); } &:nth-child(2) { .horiz-tab(); } - &:nth-child(3) { - h3 ~ * { - min-width: 100%; - } - } - - &:nth-child(2), &:nth-child(3) { - & > :first-child - { min-width: 100%; } - } + &:nth-child(2) > h5 + { min-width: 100%; } &:last-child { &:extend(.hide); } diff --git a/src/style.less b/src/style.less index 876e4ee..7b2fddc 100644 --- a/src/style.less +++ b/src/style.less @@ -1,5 +1,5 @@ -.round { .radius(@round); } -.rounder { .radius(@rounder); } +.round { .radius(@round) !important; } +.rounder { .radius(@rounder) !important; } // Space between sidebar and chat div[class^="sidebar-"] { @@ -13,7 +13,7 @@ div[class^="repliedMessage-"] { margin: 0; border: none; width: 4px; - border-radius: 2px; + .radius(2px); background: var(--interactive-muted); left: 0; right: 100%; top: 0; bottom: 0; @@ -84,9 +84,9 @@ article[class^="embed"] { 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-"], div.focusLock-2tveLW .wrapper-2bCXfR, + div.avatarWrapper-1B9FTW, { &:extend(.rounder); } div[class^="auditLog"] { @@ -96,9 +96,9 @@ div[class^="auditLog"] { { .top-border(); } } -div[class^="messagesWrapper-"] -div[class^="message-"][class*="mentioned"] -{ .left-border(4px); } +div.content-2a4AW9 +div.message-2CShn3.mentioned-Tre-dv +{ .left-border(4px) !important; } // no shadows section, header, @@ -194,27 +194,35 @@ div.popoutContainer-2wbmiM, } // status picker -#account-status-picker + div.layer-2aCOJ3 div.scroller-1bVxF5 { - display: flex; - flex-flow: row wrap; - justify-content: space-around; - - & > div.item-1OdjEX { - padding: 8px; - margin: 0; - - & > div { - padding: 0; - - & > div.status-2xYiEF, - & > div.description-1Dd2kv, - { &:extend(.hide); } - } +#account-status-picker + div.layer-2aCOJ3 { + div.submenu-1apzyU { + top: -8px; } - svg { - width: 16px; - height: 16px; - margin-left: 4px; + div.scroller-1bVxF5 { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + + .separator-1So4YB + { &:extend(.hide); } + + & > div.item-1OdjEX { + padding: 8px; + margin: 0; + + & > div { + padding: 0; + + & > div.status-2xYiEF, + & > div.description-1Dd2kv, + { &:extend(.hide); } + } + } + svg { + width: 16px; + height: 16px; + margin-left: 2px; + } } } @@ -240,9 +248,35 @@ div[id^="message-accessories-"] { } } -// Verified! -.vrf() when (@verifies = true) { - .verify('785219544364351499'); +div.saveNoticeContainer-3t-pI1 { + width: calc(100% - 60pt); +} + +#channels ul { + & > li.containerDefault-YUSmu3, + & > li.container-1Bj0eq { + margin-left: @round; + } + div.content-1gYQeQ { + margin: 0; + } + .unread-36eUEm { + left: -@round; + } +} + +.spoilerText-27bIiA { + &.hidden-3B-Rum { + &:extend(.acrylic all); + position: relative; + background: unset !important; + user-select: none; + } + .inlineContent-2YnoDy { + opacity: 1 !important; + margin: 0 (@round / 2); + z-index: -2; + position: relative; + } } -.vrf(); diff --git a/src/ui.less b/src/ui.less index f63882e..4b18525 100644 --- a/src/ui.less +++ b/src/ui.less @@ -97,13 +97,13 @@ div.bd-server-card { div[class^="tabBarItem-"], div[class^="checkbox"], button[class*="button"], +code.inline, { &:extend(.round); } // Rounder div[class^="markup-"] pre code, // ```code``` span[class^="spoiler"], span.mention, -code.inline, [class^="item-"], // in settings div[class^="group-"], // radiogroup div[class*="card"], From a2a0f0bb5f0eacb7808d4b252b1edbd8a26ddb5a Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 22 Sep 2022 17:50:35 +0300 Subject: [PATCH 79/82] remove banners --- btfl.less | 1 - src/hide.less | 5 +++++ src/materials.less | 2 +- src/nitro.less | 6 +----- src/profile.less | 35 ++++++++++++++--------------------- src/settings.less | 5 ----- 6 files changed, 21 insertions(+), 33 deletions(-) diff --git a/btfl.less b/btfl.less index 069cc52..e5b2269 100644 --- a/btfl.less +++ b/btfl.less @@ -4,7 +4,6 @@ */ @no-nitro: true; -@no-banner: false; @round: 8px; @rounder: 16px; diff --git a/src/hide.less b/src/hide.less index 1327a94..ddc67fc 100644 --- a/src/hide.less +++ b/src/hide.less @@ -82,6 +82,11 @@ div[class^="overviewSidebar-"], // at community creation, not needed form::before, // message input shadow div[class^="children-"]::after, // shadow at title + +// banners are more buggy every day so it is disabled since now +.bannerSVGWrapper-qc0szY, +[class^="bannerContainer-"], +[class*="banner-"], { &:extend(.hide); } .container-3wLKDe { diff --git a/src/materials.less b/src/materials.less index 9735eaa..0c8fcbb 100644 --- a/src/materials.less +++ b/src/materials.less @@ -70,7 +70,7 @@ div[class^="chat-"] } &::before, &::after { - border-radius: inherit; + .radius(inherit); position: absolute; top: 0; bottom: 0; left: 0; right: 0; diff --git a/src/nitro.less b/src/nitro.less index 4a174a0..9182fab 100644 --- a/src/nitro.less +++ b/src/nitro.less @@ -47,10 +47,6 @@ nav div[class^="animatedContainer-"] { { &:extend(.nitro); } } -} -.nitroblock() when (@no-banner = true) { - [class^="bannerContainer-"], - [class*="banner-"] - { &:extend(.hide); } } .nitroblock(); + diff --git a/src/profile.less b/src/profile.less index 0f4b86b..cf3589c 100644 --- a/src/profile.less +++ b/src/profile.less @@ -4,7 +4,7 @@ [class^="badgeList-"], // modal profile page { &:extend(.nitro); } } -.profile() { // banners +.profile() { div[class^="listItemContents-"] div[class^="userInfo"] { padding-top: 0; div[class^="avatar-"] { @@ -50,6 +50,10 @@ margin: 0 auto; } + div.imageUploaderInner-IIRaFr { + background-color: unset; + } + div.avatarPositionPremiumBanner-2nq2Fy { top: 24px; } @@ -67,8 +71,9 @@ div.accountProfileCard-lbN7n- { div.constrainedRow-3y91Xf { &:extend(.hide); } button { - top: -48pt; - left: 300pt; + position: absolute; + right: 16px; + top: 16px; } } @@ -95,27 +100,14 @@ div.accountProfileCard-lbN7n- { margin-top: 8px; margin-left: -22px; background-color: var(--background-tertiary); - .radius(); - border-bottom-right-radius: 16px; + .radius() !important; + border-bottom-right-radius: 16px !important; height: 32px; padding-top: 4px; padding-right: 4px; } } -div[class^="banner"] { - position: absolute; - width: inherit; - max-height: 72px; - min-height: 0; - &:extend(.rounder); - div[class^="profileBannerPreview-"] &, - &[class*="popoutBanner"] { - .bottom-border(); - width: 100%; - } -} - // Redesigned profile page div.root-8LYsGj { flex-direction: row; @@ -132,6 +124,7 @@ div.root-8LYsGj { div.headerTop-1PNKck { position: unset; justify-content: left; + margin-top: 8px; } div.nameTag-H6kSJ0 { @@ -167,8 +160,8 @@ div.root-8LYsGj { &:hover, &.selected-g-kMVV { border-right: 2px solid var(--interactive-active) !important; } - .radius() !important; - .left-border(@round) !important; + .radius((@round / 4)) !important; + .left-border(@round) !important; } } @@ -178,7 +171,7 @@ div.root-8LYsGj { } div.profileBadges-2pItdR { width: max-content; - .radius(8px); + .radius(@round); padding: 2px; } } diff --git a/src/settings.less b/src/settings.less index 233b701..bcf5071 100644 --- a/src/settings.less +++ b/src/settings.less @@ -243,11 +243,6 @@ div[data-list-id="audit-log"] { } } -#community-tab > div.container-2CHEay { - & > div.banner-3-oqyl - { &:extend(.hide); } -} - #discovery-tab > div.container-26RXEg { .horiz-tab(); // disabledButtonWrapper-2Oz3aY From bef7a8700025bd9cad584b271cdcf5a78916c567 Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 22 Sep 2022 18:21:51 +0300 Subject: [PATCH 80/82] profile bugfixes --- src/profile.less | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/profile.less b/src/profile.less index cf3589c..b061954 100644 --- a/src/profile.less +++ b/src/profile.less @@ -112,7 +112,7 @@ div.accountProfileCard-lbN7n- { div.root-8LYsGj { flex-direction: row; - header { + div.topSection-13QKHs { width: 260px; margin: 24px; @@ -139,15 +139,25 @@ div.root-8LYsGj { padding: 0; } } + + .connectedAccountsColumn-1zdyyx + .connectedAccountsColumn-1zdyyx + { margin: 0; } + + .connectedAccounts-2R5M4w { + flex-direction: column; + } + div.body-1Ukv50 { border: none; - margin-left: 16px; height: 370px; + max-width: 100%; & > * { padding: 0 !important; } } - div.tabBarContainer-sCZC4w - { border: none; } + div.tabBarContainer-sCZC4w { + border: none; + padding: 0; + } div.tabBar-2hXqzU { flex-direction: column; height: unset; From bbabb72d89dc63e5e42112eeeb6779afabe0a652 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 1 Oct 2022 20:14:13 +0300 Subject: [PATCH 81/82] more bugfixes lol --- src/fixes.less | 4 ---- src/people.less | 3 ++- src/profile.less | 53 +++++++++++++++++++++++++++++++++--------------- src/style.less | 16 ++++++++------- 4 files changed, 48 insertions(+), 28 deletions(-) diff --git a/src/fixes.less b/src/fixes.less index 63ae6e1..985d72c 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -75,10 +75,6 @@ div[class^="toolsContainer-"] { // in settings } } -div.page-nvZ_ef { - margin: 0 16px; -} - div[class^="contentContainer-"] div[class*="stickyHeader-"] { padding-left: 0; padding-right: 0; diff --git a/src/people.less b/src/people.less index aa4c9ae..23cfc85 100644 --- a/src/people.less +++ b/src/people.less @@ -7,12 +7,13 @@ &, div.members-3WRCEx { min-width: 48px; width: 0; + padding-bottom: 0; } // remove fixed height div.content-2a4AW9 { height: unset !important; - flex-grow: 0; + margin-bottom: 64px; // omg I love discock } div.member-2gU6Ar { diff --git a/src/profile.less b/src/profile.less index b061954..d679bb4 100644 --- a/src/profile.less +++ b/src/profile.less @@ -11,32 +11,48 @@ top: 0; } } - // fixes - div.overlayBackground-arbZMT, - div.overlayBackground-H1K9ZY { - margin: 8px 0 0 0; - background: none; - padding-right: 8px; - } - div.overlayBackground-H1K9ZY { - // in settings - padding-right: 0; - margin-top: -8px; - div.section-3FmfOT:first-child { + div.customStatus-3Bvsdb, + div.memberSinceContainer-3biwiY { + display: flex; + justify-content: center; + } + + // fixes + div.overlayBackground-1KgwVi { + margin: 24px 0 0 0; +// padding-right: 8px; + background: none; + + & > div.section-3FmfOT:first-child { // nick margin: 0 auto; + padding: 4px 0; + } + + div.scroller-1jBQYo { + display: grid; + h3 + { &:extend(.hide); } + & > .section-3FmfOT:nth-child(2) { + order: -1; + } + } + + .customizationSection-IGy2fS .userPopoutInner-1hXSeY & { + // in settings + padding-right: 0; + margin-top: -8px; } } div.status-b9jLr4 { position: relative; - top: -32px; - left: calc(50% + 8px); + top: -24px; + left: 56px; } - .profileBadges-2pItdR, .profileBadges-31rDHI { - background: rgba(0, 0, 0, 0.1); + background: unset; justify-content: left; position: absolute; right: 0; @@ -175,6 +191,11 @@ div.root-8LYsGj { } } +#account { + max-width: unset; + width: 100%; +} + #account-info { div.headerTop-3GPUSF { padding-top: 108px; diff --git a/src/style.less b/src/style.less index 7b2fddc..8c25526 100644 --- a/src/style.less +++ b/src/style.less @@ -23,11 +23,12 @@ div[class^="repliedMessage-"] { } } -div[class^="role-"] { +div.role-2TIOKu { &:extend(.rounder); padding: 0; - border-width: 2px; - border-style: solid; + // TODO: fix this because roles looks sadly +// border-width: 2px; +// border-style: solid; } article[class^="embed"] { @@ -148,12 +149,12 @@ div.channelTextArea-1VQBuV { .attachButton-1ijpt9 { padding: 8px; width: auto; - height: auto; + height: 24px; + box-sizing: content-box; margin-right: 8px; .icon-2P5yLI { padding: 0; - margin-top: 2px; } } @@ -185,6 +186,7 @@ div[class*="stickyHeader-"], div.emojiPicker-6YCk8a, div.header-1XpmZs, div.popoutContainer-2wbmiM, +div.userPopoutOuter-3AVBmJ, { &:extend(.acrylic all); } @@ -213,8 +215,8 @@ div.popoutContainer-2wbmiM, & > div { padding: 0; - & > div.status-2xYiEF, - & > div.description-1Dd2kv, + & > div.status-qmUf7L, + & > div.description-22_U3B, { &:extend(.hide); } } } From 4c839010e69c22428d982771a3d77d960e9c29f1 Mon Sep 17 00:00:00 2001 From: Er2 Date: Sat, 1 Oct 2022 20:23:34 +0300 Subject: [PATCH 82/82] fix message input in profile --- src/profile.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/profile.less b/src/profile.less index d679bb4..48005ff 100644 --- a/src/profile.less +++ b/src/profile.less @@ -19,6 +19,9 @@ } // fixes + div.section-3FmfOT.section--1D3ev { + padding: 12px; + } div.overlayBackground-1KgwVi { margin: 24px 0 0 0; // padding-right: 8px;