From 7e72aadc06108a0a0abe106deebafcdeff99664e Mon Sep 17 00:00:00 2001 From: Er2 Date: Thu, 24 Mar 2022 19:19:00 +0300 Subject: [PATCH] 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(); + } + } +}