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-"] {
|
div[class^="contentContainer-"] div[class*="stickyHeader-"] {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
|
|
|
@ -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); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
148
src/profile.less
148
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) {
|
.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,69 +112,70 @@ 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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
16
src/ui.less
16
src/ui.less
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue