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.

btfl.less

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

src/dimmer.less

@@ -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.layer-1Ixpg3 div.theme-light,
-div[class^="downloadApps-"] {
+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.footer-2TRYcZ {
-  h3, div[class*="footer-"] {
     color: var(--header-primary);
   }
 }

src/fixes.less

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

src/mobile.less

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

src/nitro.less

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

src/profile.less

@@ -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%;
+}
+

src/settings.less

@@ -134,7 +134,7 @@ div[aria-controls="partner-tab"],
     }
 
     &:last-child
-    { &:extend(.nitro); }
+    { &:extend(.hide); }
   }
 }
 

src/style.less

@@ -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,22 +187,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,
+  & > div.item-1OdjEX {
-  #status-picker-dnd,
-  #status-picker-invisible {
     padding: 8px;
+    margin: 0;
+
     & > div {
       padding: 0;
 
-      // & > because svg has status- div
+      & > div.status-2xYiEF,
-      & > div[class^="status-"],
+      & > div.description-1Dd2kv,
-      & > div[class^="description-"] {
+      { &:extend(.hide); }
-        display: none;
     }
   }
   svg {
@@ -216,11 +209,6 @@ div.popoutContainer-2wbmiM,
     height: 16px;
     margin-left: 4px;
   }
-  }
-  #status-picker-custom-status,
-  div[class^="submenuContainer-"] {
-    width: 100%;
-  }
 }
 
 // new invite with splash style
@@ -246,5 +234,8 @@ div[id^="message-accessories-"] {
 }
 
 // Verified!
-.verify('785219544364351499');
+.vrf() when (@verifies = true) {
+  .verify('785219544364351499');
+}
+.vrf();