Update.
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.
Revert 8d1bf41e37 status icons.
Remove mobile mode because Discord have own.
TODO: Fix some... mobile things ;)
Change .nitro to .hide in 1 place (no effect in current btfl.less configuration)
Add verify setting.
This commit is contained in:
parent
9e11c79c46
commit
787310c3c9
8 changed files with 55 additions and 96 deletions
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
@no-nitro: true;
|
||||
@no-banner: false;
|
||||
@verifies: true;
|
||||
|
||||
@round: 8px;
|
||||
@rounder: 16px;
|
||||
|
|
@ -19,7 +20,6 @@
|
|||
|
||||
// Optional
|
||||
@import "src/hide";
|
||||
@import "src/mobile";
|
||||
@import "src/nitro";
|
||||
@import "src/bd";
|
||||
|
||||
|
|
|
|||
|
|
@ -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"] {
|
||||
& {
|
||||
background-color: var(--background-secondary) !important;
|
||||
}
|
||||
h3, div[class*="footer-"] {
|
||||
div.downloadApps-14IgKV {
|
||||
background-color: var(--background-secondary) !important;
|
||||
h3, div.footer-2TRYcZ {
|
||||
color: var(--header-primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
// TODO: comment this
|
||||
|
||||
@media screen and (max-device-width: 800px) {
|
||||
/* FIXME: add close buttons to emoji panel */
|
||||
|
||||
[class^="channel-"] { max-width: unset; margin: 0 8px; }
|
||||
[class^="layer-"] { padding: 0; margin: auto; }
|
||||
[class^="layer-"] > [class^="container-"],
|
||||
[class^="standardSidebarView-"] { overflow-x: scroll; }
|
||||
[class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); }
|
||||
[class^="chat-"] { width: 100%; }
|
||||
[class^="tools"] { position: unset !important; }
|
||||
|
||||
[class*="positionLayer-"],
|
||||
[class*="fullscreenOnMobile"] {
|
||||
overflow: auto;
|
||||
width: 100%; min-width: 100%;
|
||||
}
|
||||
[class^="positionLayer-"] {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
[class*="fullscreenOnMobile"] [class^="body"] {
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
|
||||
[class^="side-"] > [class^="item-"] {
|
||||
margin-top: 4px !important;
|
||||
padding: 6px 10px !important;
|
||||
}
|
||||
|
||||
[class^="side-"] > [class^="item-"],
|
||||
:not([class*="pill"]):not([class*="Pill"]) > [class*="item-"],
|
||||
:not([class*="pill"]):not([class*="Pill"]) > [role="tab"],
|
||||
[class^="member-"],
|
||||
#channels li,
|
||||
div[class^="tabBarItem-"] {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
[class^="base-"],
|
||||
[class^="contentRegion-"],
|
||||
div[class^="sidebarRegion-"], // all in settings
|
||||
{
|
||||
width: 200%;
|
||||
min-width: 200%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ div[aria-controls="partner-tab"],
|
|||
}
|
||||
|
||||
&:last-child
|
||||
{ &:extend(.nitro); }
|
||||
{ &:extend(.hide); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,12 +36,6 @@ article[class^="embed"] {
|
|||
background: unset;
|
||||
}
|
||||
|
||||
div[class^="statusItem-"] foreignObject,
|
||||
rect[class^="pointerEvents-"],
|
||||
{
|
||||
mask: url(#svg-mask-status-online);
|
||||
}
|
||||
|
||||
// Round
|
||||
// UI parts
|
||||
li[class^="channel-"],
|
||||
|
|
@ -193,33 +187,27 @@ 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;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 4px;
|
||||
& > div.status-2xYiEF,
|
||||
& > div.description-1Dd2kv,
|
||||
{ &:extend(.hide); }
|
||||
}
|
||||
}
|
||||
#status-picker-custom-status,
|
||||
div[class^="submenuContainer-"] {
|
||||
width: 100%;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -246,5 +234,8 @@ div[id^="message-accessories-"] {
|
|||
}
|
||||
|
||||
// Verified!
|
||||
.verify('785219544364351499');
|
||||
.vrf() when (@verifies = true) {
|
||||
.verify('785219544364351499');
|
||||
}
|
||||
.vrf();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue