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-"] {
padding-left: 0;
padding-right: 0;

View file

@ -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); }
}

View file

@ -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); }
}

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) {
[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 {

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 {
.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 {

View file

@ -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
}
}
}

View file

@ -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;