mica from win11

Remove nitro perks at site.

Fix topbar colors.

src/hide.less

@@ -4,6 +4,7 @@
  */
 
 // Site
+[class*="perksContainer-"],
 [class^="DocSearch"], // Algolia, f you
 #app-mount div:not([class]) div[class=""] div:not([class]), // main page content
 #app-mount div:not([class]) div[class=""] div div[class*="background-"], // nitro animation at top
@@ -99,6 +100,8 @@ div[class^="autocompleteShadow-"], // bugged
 [class^="unreadPill-"], // NEW at right, not needed
 div[class^="overviewSidebar-"], // at community creation, not needed
 section div[class^="children-"] div[class^="spacer-"], // to check
+
+div[class^="children-"]::after, // shadow at title
 {
   all: unset    !important;
   display: none !important;

src/settings.less

@@ -8,9 +8,7 @@ div[class^="standardSidebarView-"] {
   flex-direction: column;
 
   div[class^="sidebarRegion-"] {
-    overflow: auto hidden;
+    overflow: hidden;
-    scrollbar-width: thin;
-    background: var(--background-secondary); // bugfix
     flex-basis: unset; // bugfix to normalize height
     flex-grow: 0; // fix scaling
 
@@ -19,13 +17,18 @@ div[class^="standardSidebarView-"] {
     { display: none; }
 
     & > div {
+      background: var(--background-primary);
+      scrollbar-width: thin;
       overflow: auto hidden !important;
       justify-content: left;
       max-width: 100%;
 
       & > nav {
         padding: 0;
+        width: unset; // to increase size
+        background: var(--background-secondary); // bugfix
         & > div {
+          padding-left: @rounder;
           flex-direction: row;
           height: @tab-height;
         }

src/style.less

@@ -20,7 +20,7 @@
   li[class^="channel-"],
   [class^="avatar-"],
   [role="dialog"],
-  div[class^="menu-"] div,
+  div[class^="menu-"] div, // menu elements
   div[class^="role-"],
   div[class^="colorPicker"] div div[class^="saturation"] div,
   #channels ul li div > div[class^="content-"],
@@ -33,6 +33,12 @@
   border-radius: @round !important;
 }
 
+// Blur menus
+[role="menu"] {
+  background-color: unset;
+  backdrop-filter: blur(@round) saturate(100%);
+}
+
 // Rounder
   // Popouts
   [class^="authBox"], // login
@@ -45,7 +51,6 @@
   // UI elements
   [class^="checkboxWrapper-"], // checkbox
   [class*="embed"],
-  div[class^="sidebar-"],
   div[class^="markup-"] pre code, // ```code```
   div[class^="item-"], // in settings
   div[class^="group-"], // radiogroup
@@ -64,8 +69,9 @@
 
   div[class^="select-"],
   div[class^="messagesWrapper-"] div,
-  div[class^="container-"],
+
-  div[class^="chat-"],
+  div[class^="container"] > div,
+  div[class^="chat-"] > div[class^="content-"],
 {
   border-radius: @rounder !important;
 }
@@ -192,4 +198,44 @@ div[class^="channelTextArea-"] {
   }
 }
 
+// Mica-like material from Windows 11
+
+[class^="sidebar-"] {
+  &, & > nav {
+    background-color: transparent;
+  }
+
+  & > nav,
+  & > nav div[class^="scroller-"] {
+    .top-border(@rounder);
+  }
+
+  & > nav div[class^="scroller-"] {
+    background-color: var(--background-secondary);
+  }
+
+  nav[class^="private"] {
+    margin-top: 48px;
+  }
+
+  section { // bottom panel
+    .bottom-border(@rounder);
+  }
+}
+
+div[class^="base-"] > div[class^="content-"] > div[class^="container"],
+div[class^="chat-"]
+{
+  background-color: unset;
+  & > div {
+    background-color: var(--background-primary);
+  }
+}
+
+[class^="sidebar"] header,
+[class^="chat"] > section,
+[class^="container-"] > section {
+  background-color: var(--background-tertiary) !important;
+}
+
 @import "settings";