Started using classes instead of *= selectors.

Switching to new status picker.

Center avatar near status picker.

Fix media embed width.

Fix warning icon in profile.
This commit is contained in:
Er2 2022-08-07 10:47:08 +03:00
parent 9e11c79c46
commit 53ae934dd7
5 changed files with 49 additions and 34 deletions

View file

@ -16,7 +16,7 @@
--input-background: #1e1e1e;
color: var(--header-primary);
& [class*="close-"] {
& .close-1mLglB {
color: var(--interactive-normal);
&:hover
@ -24,24 +24,22 @@
}
}
div[class^="layer-"] div.theme-light,
div[class^="downloadApps-"] {
div.layer-1Ixpg3 div.theme-light,
div.downloadApps-14IgKV {
&:extend(.theme-dimmer all);
div[class*="root-"] {
div.root-g14mjS {
background-color: var(--background-secondary);
}
div[class*="footer-"] {
div.footer-31IekZ {
background-color: var(--background-primary);
}
}
div[class^="downloadApps"] {
& {
div.downloadApps-14IgKV {
background-color: var(--background-secondary) !important;
}
h3, div[class*="footer-"] {
h3, div.footer-2TRYcZ {
color: var(--header-primary);
}
}

View file

@ -1,5 +1,5 @@
// fix guild selector at left part
ul[data-list-id="guildsnav"] div[class^="scroller-"] {
ul[data-list-id="guildsnav"] div.scroller-3X7KbA {
display: flex;
flex-direction: column;
overflow: hidden !important;
@ -30,7 +30,7 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] {
margin-bottom: 8px;
}
div[class^="messagesWrapper-"] div {
div.messagesWrapper-RpOMA3 > div {
scrollbar-width: thin;
}
@ -42,18 +42,18 @@ div[class^="messagesWrapper-"] div {
top: 0; bottom: 0;
left: 0; right: 0;
}
div[class^="wrapper-"] {
div.wrapper-22rqw6 {
top: 0;
border-radius: 8px;
}
}
div[class*="fullscreenOnMobile"] div[class^="flex"] * {
div.fullscreenOnMobile-ixj0e3 div.flex-3BkGQD * {
// fix overflow
overflow: hidden;
}
div[class*="templatesList-"] {
div.templatesList-uohY49 {
// fix tempates list (it was removed)
height: 128px;
}
@ -80,3 +80,14 @@ div[class^="contentContainer-"] div[class*="stickyHeader-"] {
padding-right: 0;
margin: 0;
}
// media embed fixes
div.inlineMediaEmbed-1m3ApS {
width: max-content;
}
// in profile
.warningCircleIcon-mFju_m {
position: fixed;
}

View file

@ -22,6 +22,7 @@ div[class^="characterCount-"] div[class^="root-"], // at many characters
[class^="clickableSticker-"], // stickers
nav[class^="privateChannels-"] div div // Nitro tab at DM
[data-list-item-id$="nitro"],
#account-style-your-profile,
{ &:extend(.nitro); }
#channels > ul {

View file

@ -92,8 +92,10 @@ div[class^="banner"] {
}
}
div[class^="avatarWrapper-"] {
div.container-YkUktl div.avatarWrapper-1B9FTW {
margin-right: auto; // make some space after avatar (sidebar at bottom)
min-width: unset;
padding: unset;
}
// Redesigned profile page
@ -157,3 +159,12 @@ div.root-8LYsGj { // I not love fixed classes, but this selects only modal page
.left-border(@round);
}
}
#account-info div.headerTop-3GPUSF {
padding-top: 108px;
}
#account-avatar div.avatarWrapperNormal-ahVUaC {
left: 35%;
}

View file

@ -193,22 +193,21 @@ div.popoutContainer-2wbmiM,
}
// status picker
#status-picker > div {
#account-status-picker + div.layer-2aCOJ3 div.scroller-1bVxF5 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
#status-picker-online,
#status-picker-idle,
#status-picker-dnd,
#status-picker-invisible {
& > div.item-1OdjEX {
padding: 8px;
margin: 0;
& > div {
padding: 0;
// & > because svg has status- div
& > div[class^="status-"],
& > div[class^="description-"] {
display: none;
& > div.status-2xYiEF,
& > div.description-1Dd2kv,
{ &:extend(.hide); }
}
}
svg {
@ -217,11 +216,6 @@ div.popoutContainer-2wbmiM,
margin-left: 4px;
}
}
#status-picker-custom-status,
div[class^="submenuContainer-"] {
width: 100%;
}
}
// new invite with splash style
div[id^="message-accessories-"] {