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;