update

btfl.less

@@ -3,6 +3,7 @@
  * Zlib License
  */
 
+@macos-like: false; // for BD's window buttons
 @no-nitro:  true;
 @no-banner: false;
 
@@ -12,6 +13,7 @@
 
 @div-width: (@rounder / 2);
 @tab-height: 40px;
+@mem-width: 48px; // members side panel width (48px is recommend)
 
 // Required
 @import "src/func";

src/bd.less

@@ -3,6 +3,49 @@
 div[class^="bd-"]
 { &:extend(.round); }
 
+button.bd-addon-button {
+  margin: 4px;
+}
+
+div.floating-window {
+  &:extend(.round);
+  box-shadow: none;
+  padding: 0 !important;
+  max-width:  100% !important;
+  max-height: 100% !important;
+  min-width:  256px !important;
+  min-height: 32px !important;
+}
+
+div.floating-window-buttons {
+  & when (@macos-like = true)
+  { order: -1; }
+
+  .button {
+    & > svg {
+      padding: 2px;
+      border-radius: 50%;
+    }
+    &:hover {
+      background-color: unset;
+      color: var(--background-tertiary); // icons color
+    }
+  }
+
+  .maximize-button:hover > svg {
+    background-color: #3ba55d;
+  }
+
+  .close-button {
+    & when (@macos-like = true)
+    { order: -1; }
+
+    &:hover > svg {
+      background-color: #ed4245;
+    }
+  }
+}
+
 div.bd-search-wrapper,
 div.bd-changelog-button {
   align-self: center;
@@ -35,3 +78,7 @@ div[class^="standardSidebarView-"] {
 div.bd-addon-list:not(.bd-grid-view) {
   .horiz-tab();
 }
+
+div.ChannelDms-channelpopout-headerName {
+  font-size: 12pt !important;
+}

src/fixes.less

@@ -35,6 +35,7 @@ div[class^="messagesWrapper-"] div {
 }
 
 #emoji-picker-tab-panel {
+  position: sticky;
   &:not([role="dialog"]) {
     // if add reaction (role=dialog), it breaks
     position: absolute;
@@ -42,12 +43,21 @@ div[class^="messagesWrapper-"] div {
     left: 0; right: 0;
   }
 
-  div[class^="wrapper-"] {
+  & > div[class^="wrapper-"] {
+    background-color: var(--background-tertiary);
     top: 0;
     border-radius: 5px 0 0 5px; // for add reaction
   }
 }
 
+#emoji-picker-grid {
+  div[class^="wrapper-"] {
+    border-radius: 16px;
+    top: 4px;
+    &:extend(.acrylic all);
+  }
+}
+
 div[class*="fullscreenOnMobile"] div[class^="flex"] * {
   // fix overflow
   overflow: hidden;
@@ -75,8 +85,30 @@ div[class^="toolsContainer-"] { // in settings
   }
 }
 
+div[class^="newMessagesBar-"] {
+  margin-top: 8px;
+}
+
 div[class^="contentContainer-"] div[class*="stickyHeader-"] {
   padding-left: 0;
   padding-right: 0;
   margin: 0;
 }
+
+// fix border radius
+div[class^="messageAttachment-"] div[class^="embedWrapper-"] {
+  div[class^="textContainer-"] {
+    .bottom-border();
+
+    & ~ div[class*="footer-"] {
+      .top-border();
+    }
+  }
+}
+
+div[class^="auditLog"] {
+  div[class^="headerExpanded-"]
+  { .bottom-border(); }
+  div[class^="changeDetails-"]
+  { .top-border(); }
+}

src/func.less

@@ -29,3 +29,18 @@
   height:  0    !important;
 }
 
+.horiz-tab(@cols: 2, @offset: 0) {
+  @gap: @div-width * 2;
+  @el-width: calc(unit((100% / @cols), %) - unit((@gap + @offset), px));
+  display: flex;
+  flex-flow: row wrap;
+  column-gap: @gap;
+  row-gap: (@gap / 2);
+  & > * {
+    width: @el-width;
+  }
+
+  div[class^="divider"]:empty {
+    display: none;
+  }
+}

src/hide.less

@@ -18,16 +18,7 @@ div[class^="art-"],
 { &:extend(.hide); }
 
 // Nicks
-[class^="username-"] {
-  li[class^="messageListItem-"]
-   [class*="cozyMessage-"] &,   // inside message
-  :not([class^="headerText-"])
-   > div[class*="nameTag-"] &, // outside message
-  { &:extend(.hide); }
-}
-
 [class^="discrimBase-"],
-div[class^="discordTag-"] [class^="username-"], // friends tab
 div[class^="nameTag-"],
 [class^="usernameInnerRow-"], // at settings
 { &:extend(.hide); }
@@ -67,8 +58,8 @@ div[class^="channelTextArea-"] {
     & > button // gift button, f you
     { &:extend(.hide); }
 
-    & > div.expression-picker-chat-input-button {
-      &:not(:nth-child(4)) // except emoji (and send button, if exists)
+    & > div.expression-picker-chat-input-button > button {
+      &:not([class^="emojiButton"]) // hide except emoji (and send button, if exists)
       { &:extend(.hide); }
     }
   }

src/materials.less

@@ -46,6 +46,7 @@ div[class^="chat-"]
   background-color: var(--background-tertiary) !important;
 }
 
+// Xbox-like glowing
 @keyframes glow {
   from { box-shadow: 0 0 2px 4px var(--interactive-normal); }
   to   { box-shadow: 0 0 1px 2px var(--interactive-muted); }
@@ -74,6 +75,7 @@ div[class^="chat-"]
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
+    width: 100%; height: 100%;
     content: "";
     z-index: -1;
   }

src/people.less

@@ -2,21 +2,35 @@
 [class^="membersGroup-"] // groups (roles)
 { &:extend(.hide); }
 
-[class^="membersWrap-"] {
+div[class^="content-"] > main ~ div {
+  &:not(.ChannelDms-channelmembers-wrap) {
     // make it shorter
-  &, div[class^="members-"] {
-    min-width: 48px;
-    width: 0;
+    min-width: @mem-width;
+    width:     @mem-width;
   }
 
-  // remove fixed height
-  div[class^="content-"] {
-    height: unset !important;
-    flex-grow: 0;
+  aside {
+    height: 100%;
   }
 
   div[class^="member-"] {
     padding: 0;
-    margin-left: 0;
+    margin: 0;
   }
 }
+
+span[class^="username-"] {
+  font-weight: 500;
+}
+
+// friends tab
+div[class^="peopleList-"] > div {
+  @margin: 4px;
+
+  & > *, & > *:hover {
+    border: none;
+    padding: 8px !important;
+    margin: @margin !important;
+  }
+  .horiz-tab(2, @margin * 2);
+}

src/profile.less

@@ -48,6 +48,10 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] {
       align-items: center;
     }
 
+    svg[class^="warningCircleIcon-"] {
+      position: fixed;
+    }
+
     div[class^="profileBadges-"] {
       position: static;
       justify-content: center;
@@ -68,6 +72,9 @@ div[class^="pencilContainer-"] {
 
 // Profile card in settings
 div[class^="accountProfileCard-"] {
+  span[class^="username-"]
+  { &:extend(.hide); }
+
   div[class^="field-"]:nth-child(1) {
     height: 0;
     div[class^="constrainedRow-"] {
@@ -106,6 +113,9 @@ header div[class^="nameTagNoCustomStatus-"] {
 div.root-8LYsGj { // I not love fixed classes, but this selects only modal page
   flex-direction: row;
 
+  span[class^="username-"]
+  { &:extend(.hide); }
+
   header {
     width: 260px;
     margin: 24px;
@@ -134,10 +144,13 @@ div.root-8LYsGj { // I not love fixed classes, but this selects only modal page
   }
   div[class^="body-"] {
     border: none;
-    margin-left: 16px;
+    margin: 0 16px;
+    width: 100%;
     height: 370px;
-    & > *
-    { padding: 0 !important; }
+    & > * {
+      padding: 0;
+      margin: 0;
+    }
   }
   div[class^="tabBarContainer"]
   { border: none; }

src/settings.less

@@ -22,11 +22,12 @@ div[class^="standardSidebarView-"] {
       scrollbar-width: thin;
       overflow: auto hidden !important;
       justify-content: left;
+      width: max-content;
       max-width: 100%;
 
       & > nav {
         padding: 0;
-        width: unset; // to increase size
+        width: max-content; // to increase size
         background: var(--background-secondary); // bugfix
         & > div {
           padding-left: @rounder;
@@ -61,22 +62,6 @@ div[aria-controls="analytics-tab"],
 div[aria-controls="partner-tab"],
 { &:extend(.hide); }
 
-.horiz-tab(@cols: 2) {
-  @gap: @div-width * 2;
-  @el-width: calc(100% / @cols - @gap);
-  display: flex;
-  flex-flow: row wrap;
-  column-gap: @gap;
-  row-gap: (@gap / 2);
-  & > * {
-    width: @el-width;
-  }
-
-  div[class^="divider"]:empty {
-    display: none;
-  }
-}
-
 #my-account-tab > div {
   .horiz-tab();
   & > div:first-child {

src/style.less

@@ -67,9 +67,11 @@ rect[class^="pointerEvents-"],
   div[class*="Popout"],
   div[class*="fullscreenOnMobile"],
   div[class*="root"] div[class^="flex-"],
+  div[class*="root"] div[class^="footer-"],
 
   // UI parts
   div[class^="chat-"],
+  div[class^="attachedBars-"], // like reply to *user*
   div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar
   [class^="resultsGroup-"], // search
   div[class^="auditLog-"],
@@ -94,13 +96,6 @@ rect[class^="pointerEvents-"],
   div[class^="chat-"] > div[class^="content-"],
 { &:extend(.rounder); }
 
-div[class^="auditLog"] {
-  div[class^="headerExpanded-"]
-  { .bottom-border(); }
-  div[class^="changeDetails-"]
-  { .top-border(); }
-}
-
 div[class^="messagesWrapper-"]
 div[class^="message-"][class*="mentioned"]
 { .left-border(4px); }
@@ -111,8 +106,9 @@ div[class^="content-"]::before,
 div[class^="tabBody-"]::before
 { box-shadow: unset !important; }
 
-// Pins
-div[class^="messageGroupWrapper-"] {
+div[class^="contentWrapper-"],
+div[class^="messageGroupWrapper-"], // Pins
+{
   border: none;
   background: unset;
 }
@@ -173,6 +169,7 @@ div[class^="channelTextArea-"] {
   }
 }
 
+div[class^="contentWrapper-"] > div,
 [role="menu"],
 [role="dialog"]:not([class^="focusLock-"]),
 div[class^="focusLock-"] > div,
@@ -235,3 +232,57 @@ div[id^="message-accessories-"] {
     }
   }
 }
+
+// new attachment area
+ul[class^="channelAttachmentArea-"] {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 16px;
+  height: 216px;
+  flex-flow: row wrap;
+  overflow: hidden auto;
+
+  & > li
+  { &:extend(.rounder); }
+
+  div[class^="actionBarContainer-"] {
+    position: static;
+    margin-top: 8px;
+
+    & > div {
+      position: static;
+      display: inline;
+
+      & > div {
+        margin: 0 auto;
+        width: max-content;
+
+        &, & > *
+        { &:extend(.rounder); }
+      }
+    }
+  }
+}
+
+div[class^="uploadModal-"] {
+  div[class^="file-"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    & > img {
+      position: relative;
+      &:extend(.rounder);
+    }
+  }
+}
+
+// jump to present
+div[class^="jumpToPresentBar-"] {
+  width: max-content;
+  margin-left: auto;
+
+  & > button:first-child {
+    display: none;
+  }
+}

src/ui.less

@@ -63,8 +63,9 @@ div[class^="radioBar-"] {
 
 div[class^="card-"],
 div.bd-server-card {
-  & > div[class*="header"],
-  & > div[class*="Header"] {
+  .bd-server-header,
+  & > div[class^="header-"],
+  & > div[class^="cardHeader"] {
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
@@ -96,6 +97,7 @@ button[class*="button"],
 { &:extend(.round); }
 
 // Rounder
+div[class*="navRow-"], // in account login switcher
 div[class^="markup-"] pre code, // ```code```
 span[class^="spoiler"],
 span.mention,
@@ -106,3 +108,7 @@ div[class*="card"],
 div[class^="categoryItem-"] > *, // in Discovery
 div[class^="content-"] img[class^="image-"],
 { &:extend(.rounder); }
+
+div[class*="navRow-"] {
+  background-color: unset !important;
+}