update

Nitro banner fixed.

Compact sidebar and its opening animation.

Old roles and replies.

Remade status picker.

Fixed semi-transparent text area.

src/nitro.less

@@ -35,6 +35,16 @@ nav[class^="privateChannels-"] div div // Nitro tab at DM
     padding-top: 0;
   }
 }
+
+nav div[class^="animatedContainer-"] {
+  background: unset;
+  div[class^="bannerImage-"]::before {
+    background: unset !important;
+  }
+  [class^="bannerImg-"]
+  { &:extend(.nitro); }
+}
+
 }
 .nitroblock() when (@no-banner = true) {
   [class^="bannerContainer-"],

src/style.less

@@ -4,9 +4,53 @@
 // Space between sidebar and chat
 div[class^="sidebar-"] {
   margin-right: @div-width;
+
+  &, li, li div {
+    transition: ease-out 0.25s;
+  }
+
+  &:not(:hover) {
+    width: 48px;
+    overflow: hidden;
+    li {
+      margin-left: -4px;
+      div[class^="interactive-"] {
+        margin-left: 8px;
+      }
+      div[class^="layout-"] {
+        padding-left: 2px;
+      }
+      a + div[class^="children-"] {
+        display: none;
+      }
+    }
+  }
+}
+
+// Old-school
+
+div[class^="repliedMessage-"] {
+  &::before {
+    margin: 0;
+    border: none;
+    width: 4px;
+    border-radius: 2px;
+    background: var(--interactive-muted);
+    left: 0; right: 100%;
+    top: 0; bottom: 0;
+  }
+  & > img {
+    margin-left: 16px;
+  }
+}
+
+div[class^="role-"] {
+  &:extend(.rounder);
+  padding: 0;
+  border-width: 2px;
+  border-style: solid;
 }
 
-// Old-school embed
 [class*="embed"] {
   .left-border(3px);
   max-width: unset;
@@ -19,7 +63,6 @@ div[class^="sidebar-"] {
   [class^="avatar-"],
   [role="dialog"],
   div[class^="menu-"] [role="menuitem"],
-  div[class^="role-"],
   div[class^="colorPicker"] div div[class^="saturation"] div,
   #channels ul li div > div[class^="content-"],
 
@@ -103,6 +146,7 @@ div[class^="attachedBars-"]
 div[class^="channelTextArea-"] {
   & > div[class^="scrollableContainer-"] {
     background-color: unset;
+    opacity: 1;
 
     button[class^="attachButton-"],
     div[class^="textArea-"],
@@ -147,3 +191,34 @@ div[class*="stickyHeader-"],
 {
   &:extend(.acrylic all);
 }
+
+// status picker
+#status-picker > div {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  #status-picker-online,
+  #status-picker-idle,
+  #status-picker-dnd,
+  #status-picker-invisible {
+    margin: 8px;
+    & > div {
+      padding: 0;
+
+      // & > because svg has status- div
+      & > div[class^="status-"],
+      & > div[class^="description-"] {
+        display: none;
+      }
+    }
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-left: 4px;
+    }
+  }
+  #status-picker-custom-status,
+  div[class^="submenuContainer-"] {
+    width: 100%;
+  }
+}