From 787310c3c9ffa583e2238f129829b5206988673a Mon Sep 17 00:00:00 2001 From: Er2 Date: Sun, 7 Aug 2022 10:47:08 +0300 Subject: [PATCH] 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();