Update.
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:
parent
5b91f8f843
commit
444d94d1a9
7 changed files with 162 additions and 150 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
||||
|
|
|
|||
154
src/profile.less
154
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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
16
src/ui.less
16
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue