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.
This commit is contained in:
Er2 2022-09-06 21:24:40 +03:00
parent 5b91f8f843
commit 444d94d1a9
7 changed files with 162 additions and 150 deletions

View file

@ -75,6 +75,10 @@ div[class^="toolsContainer-"] { // in settings
} }
} }
div.page-nvZ_ef {
margin: 0 16px;
}
div[class^="contentContainer-"] div[class*="stickyHeader-"] { div[class^="contentContainer-"] div[class*="stickyHeader-"] {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;

View file

@ -1,25 +1,25 @@
.left-border(@r: 0) { .left-border(@r: 0) {
border-top-left-radius: @r !important; border-top-left-radius: @r;
border-bottom-left-radius: @r !important; border-bottom-left-radius: @r;
} }
.right-border(@r: 0) { .right-border(@r: 0) {
border-top-right-radius: @r !important; border-top-right-radius: @r;
border-bottom-right-radius: @r !important; border-bottom-right-radius: @r;
} }
.bottom-border(@r: 0) { .bottom-border(@r: 0) {
border-bottom-left-radius: @r !important; border-bottom-left-radius: @r;
border-bottom-right-radius: @r !important; border-bottom-right-radius: @r;
} }
.top-border(@r: 0) { .top-border(@r: 0) {
border-top-left-radius: @r !important; border-top-left-radius: @r;
border-top-right-radius: @r !important; border-top-right-radius: @r;
} }
.radius(@r: 0) { .radius(@r: 0) {
border-radius: @r !important; border-radius: @r;
} }
.hide { .hide {
@ -62,9 +62,9 @@
.verify(@id) { .verify(@id) {
div.message-2CShn3 img.avatar-2e8lTP[src*="/@{id}/"] + .header-2jRmjb > .headerText-2z4IhQ::after div.message-2CShn3 img.avatar-2e8lTP[src*="/@{id}/"] + .header-2jRmjb > .headerText-2z4IhQ::after
{ .bot('✓DEV', 16px); } { .bot('✓', 16px); }
// Replies // Replies
div.repliedMessage-3Z6XBG img.replyAvatar-sHd2sU[src*="/@{id}/"] + span::after div.repliedMessage-3Z6XBG img.replyAvatar-sHd2sU[src*="/@{id}/"] + span::after
{ .bot('✓DEV', 12px); } { .bot('✓', 12px); }
} }

View file

@ -11,23 +11,16 @@
{ &:extend(.hide); } { &:extend(.hide); }
} }
// Nicks
.username-1g6Iq1
{ &:extend(.hide); }
// Remove background (invite, login) // Remove background (invite, login)
[class*="artwork-"], [class*="artwork-"],
div[class^="characterBackground-"] [class*="rightSplit-"], div[class^="characterBackground-"] [class*="rightSplit-"],
div[class^="art-"], div[class^="art-"],
{ &:extend(.hide); } { &: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-"], [class^="discrimBase-"],
div[class^="discordTag-"] [class^="username-"], // friends tab div[class^="discordTag-"] [class^="username-"], // friends tab
div[class^="nameTag-"], div[class^="nameTag-"],
@ -64,8 +57,8 @@ div[class^="toolbar-3_"] > :nth-child(3)
{ &:extend(.hide); } { &:extend(.hide); }
// Text area // Text area
div[class^="channelTextArea-"] { div.channelTextArea-1FufC0 {
div div > div[class^="buttons-"] { // button div.buttons-uaqb-5 { // buttons
& > button // gift button, f you & > button // gift button, f you
{ &:extend(.hide); } { &:extend(.hide); }
@ -74,8 +67,8 @@ div[class^="channelTextArea-"] {
{ &:extend(.hide); } { &:extend(.hide); }
} }
} }
& > div[class^="scrollableContainer-"] div.scrollableContainer-15eg7h
div[class^="divider-"] // breaks redesigned text area div.separator-3ng7S5 // breaks redesigned text area
{ &:extend(.hide); } { &:extend(.hide); }
} }

View file

@ -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) { .profile() when (@no-nitro = true) {
[class^="botTagVerified-"], [class^="botTagVerified-"],
[class^="badgeList-"], // modal profile page [class^="badgeList-"], // modal profile page
@ -30,34 +11,43 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] {
top: 0; 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.section-3FmfOT:first-child {
div[class^="profileBannerPreview-"] { // nick
div[class^="avatarWrapper"],
div[class*="avatarUploaderNormal-"] {
position: relative;
top: 8px;
left: 0;
width: max-content;
margin: 0 auto; margin: 0 auto;
} }
}
div[class^="headerText-"] { div.status-b9jLr4 {
display: flex; position: relative;
flex-direction: column; top: -32px;
align-items: center; left: calc(50% + 8px);
} }
div[class^="profileBadges-"] { .profileBadges-2pItdR,
position: static; .profileBadges-31rDHI {
justify-content: center; background: rgba(0, 0, 0, 0.1);
justify-content: left;
position: absolute;
right: 0;
left: 8px;
} }
div[class^="headerTop-"] { div.avatarWrapper-3y0KZ1,
padding: 8px; div.avatarUploader-CHGwK7 {
margin-top: 8px; position: relative;
align-self: center; left: 0;
} margin: 0 auto;
} }
} }
.profile(); .profile();
@ -67,17 +57,46 @@ div[class^="pencilContainer-"] {
} }
// Profile card in settings // Profile card in settings
div[class^="accountProfileCard-"] { div.accountProfileCard-lbN7n- {
div[class^="field-"]:nth-child(1) { div.field-21XZwa:first-child {
height: 0; height: 0;
div[class^="constrainedRow-"] { div.constrainedRow-3y91Xf
display: none; { &:extend(.hide); }
}
button { button {
top: -48pt; top: -48pt;
left: 300pt; 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"] { div[class^="banner"] {
@ -93,70 +112,71 @@ div[class^="banner"] {
} }
// Redesigned profile page // Redesigned profile page
header div[class^="nameTagWithCustomStatus-"], div.root-8LYsGj {
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
flex-direction: row; flex-direction: row;
header { header {
width: 260px; width: 260px;
margin: 24px; margin: 24px;
div[class^="avatar-"] { div.avatar-3QF_VA {
top: 0; left: 0; top: 0; left: 0;
position: relative; position: relative;
} }
div[class^="headerTop-"] { div.headerTop-1PNKck {
position: unset; position: unset;
justify-content: left; justify-content: left;
} }
div[class^="nameTag"] { div.nameTag-H6kSJ0 {
width: 64px; width: 64px;
position: absolute; position: absolute;
margin-top: -64px; margin-top: -64px;
margin-left: 130px; margin-left: 130px;
} }
div[class^="customStatus"] { div.customStatus-kFfkj5 {
margin-top: 16px; margin-top: 16px;
padding: 0; padding: 0;
} }
} }
div[class^="body-"] { div.body-1Ukv50 {
border: none; border: none;
margin-left: 16px; margin-left: 16px;
height: 370px; height: 370px;
& > * & > *
{ padding: 0 !important; } { padding: 0 !important; }
} }
div[class^="tabBarContainer"] div.tabBarContainer-sCZC4w
{ border: none; } { border: none; }
div[class^="tabBar-"] { div.tabBar-2hXqzU {
flex-direction: column; flex-direction: column;
height: unset; height: unset;
margin: 8px; margin: 8px;
} }
div[class^="tabBarItem-"] { div.tabBarItem-30Te4- {
margin-right: 0; margin-right: 0;
border-bottom: unset; border-bottom: unset;
&:hover, &[class*="selected-"] { &:hover, &.selected-g-kMVV {
border-right: 2px solid var(--interactive-active) !important; border-right: 2px solid var(--interactive-active) !important;
} }
.top-border(); .radius() !important;
.left-border(@round); .left-border(@round) !important;
} }
} }
#account-info div.headerTop-3GPUSF { #account-info {
div.headerTop-3GPUSF {
padding-top: 108px; padding-top: 108px;
} }
div.profileBadges-2pItdR {
width: max-content;
.radius(8px);
padding: 2px;
}
}
#account-avatar div.avatarWrapperNormal-ahVUaC { #account-avatar div.avatarWrapperNormal-ahVUaC {
left: 35%; left: 35%;

View file

@ -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 { #my-account-tab > div {
.horiz-tab(); .horiz-tab();
& > div:first-child { & > 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-direction: row;
flex-flow: row wrap; flex-flow: row wrap;
div.accountList-Wii_T5 { div.accountList-Wii_T5 {
margin-right: @div-width; margin-right: @div-width;
width: 33%; width: 33%;
height: 100%; // decreases height? 0_0
// auto detect // auto detect
& + div.container-1zDvAE { & + div.container-1zDvAE {
@ -130,6 +115,10 @@ div.optionBox-1UOevl:nth-child(2)
div.connectionList-11Q_X- { div.connectionList-11Q_X- {
flex-grow: 1; flex-grow: 1;
} }
div.connection-YOVI9j {
height: max-content;
}
} }
#appearance-tab div.children-1xdcWE { #appearance-tab div.children-1xdcWE {

View file

@ -123,48 +123,50 @@ div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"]
div[class^="attachedBars-"] div[class^="attachedBars-"]
{ position: relative; } { position: relative; }
div[class^="channelTextArea-"] { div.channelTextArea-1VQBuV {
&[class*="channelTextAreaDisabled-"] &.channelTextAreaDisabled-1p2fQv
button[class^="attachButton-"] { .attachButton-1ijpt9
display: none; { &:extend(.hide); }
}
& > div[class^="scrollableContainer-"] { div.scrollableContainer-15eg7h {
background-color: unset; background-color: unset;
opacity: 1; opacity: 1;
}
button[class^="attachButton-"], .attachButton-1ijpt9,
div[class^="textArea-"], .textArea-2CLwUE,
div[class^="buttons-"] { .buttons-uaqb-5 {
background-color: var(--background-secondary); background-color: var(--background-secondary);
border-radius: @roundest !important; .radius(@roundest) !important;
margin: 0; margin: 0;
} }
& > div[class^="inner-"] div.inner-NQg18Y {
{ padding: 0; } padding: 0;
}
button[class^="attachButton-"] { .attachButton-1ijpt9 {
padding: 8px; padding: 8px;
width: auto; width: auto;
height: auto; height: auto;
margin-right: 8px; margin-right: 8px;
} }
div[class^="textArea-"] { .textArea-2CLwUE {
&:not([class*="textAreaDisabled-"]) &:not(.textAreaDisabled-10ObTX)
{ .right-border(); } { .right-border() !important; }
div > * { left: (@roundest / 2); } div > * {
left: (@roundest / 2);
}
} }
div[class^="buttons-"] { .buttons-uaqb-5 {
height: auto; // to match input height height: auto; // to match input height
.left-border() !important;
& > * { & > * {
align-items: center; // center buttons align-items: center; // center buttons
} }
.left-border();
}
} }
} }

View file

@ -9,7 +9,7 @@ div[class^="slider-"] {
width: @rounder; width: @rounder;
height: @rounder; height: @rounder;
border: none; border: none;
border-radius: @half; .radius(@half);
top: @half * 1.5; top: @half * 1.5;
margin-top: unset; margin-top: unset;
margin-left: -@half; margin-left: -@half;
@ -19,19 +19,23 @@ div[class^="slider-"] {
// tabs // tabs
div[role="tab"], div[role="tab"],
div[class^="tabBarItem-"] { div.tabBarItem-30Te4- {
.top-border(16px); .top-border(16px) !important;
.bottom-border(); .bottom-border(4px) !important;
margin: 0; margin: 0;
margin-top: 8px; margin-top: 8px;
margin-right: 16px; margin-right: 16px;
padding: 4px 8px; padding: 4px 8px;
&:hover, &:hover,
&[class*="selected-"] { &.selected-g-kMVV {
background-color: var(--interactive-muted) !important; background-color: var(--interactive-muted) !important;
color: var(--text-normal) !important; color: var(--text-normal) !important;
} }
div.textBadge-1fdDPJ {
margin-left: 4px;
}
} }
// slider // slider
@ -46,7 +50,7 @@ div[class^="container-"] {
& > svg[class*="slider"] { & > svg[class*="slider"] {
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
border-radius: 50%; .radius(50%);
margin: 4px 8px; margin: 4px 8px;
margin-right: 0; margin-right: 0;
background-color: white; background-color: white;