Make Modular

2023-10-08 18:38:42 +00:00 · 2023-10-08 18:38:42 +00:00 · 326d549dde
parent 78f6f5d335
commit 326d549dde
15 changed files with 1017 additions and 78 deletions
--- a/modular/accessible_styles/italics_+_bold.css
+++ b/modular/accessible_styles/italics_+_bold.css
@ -9,5 +9,7 @@ em {
 span[data-slate-leaf="true"][class*="bold-"],
 strong {
  font-weight: 400;
-  text-shadow: 0.1px 0.1px, -0.1px -0.1px;
+  text-shadow:
+    0.1px 0.1px,
+    -0.1px -0.1px;
 }
--- a/modular/base.css
+++ b/modular/base.css
@ -186,7 +186,8 @@

 [class*="modal-"][class*="root-"] {
  background-color: var(--background-primary);
-  box-shadow: var(--deprecated-card-bg) 0px 0px 0px 1px,
+  box-shadow:
+    var(--deprecated-card-bg) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;
 }

--- a/modular/collapsing_sidebar/compact-er_support.css
+++ b/modular/collapsing_sidebar/compact-er_support.css
@ -131,17 +131,16 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"][class*="selected-"]
  [class^="iconVisibility-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class^="children-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="iconVisibility-"][class*="modeSelected-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class^="children-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="iconVisibility-"]:not([class*="typeThread-"])
-  > [class^="content-"]
-  > [class^="mainContent-"]
+  [class^="linkTop-"]
  > [class^="name-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
@ -149,12 +148,12 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="voiceUser-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class^="icons-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="voiceUser-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class*="username-"] {
  display: none;
 }
@ -162,8 +161,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="iconVisibility-"][class*="typeThread-"]
-  > [class^="content-"]
-  > [class^="mainContent-"]
+  [class^="linkTop-"]
  > [class^="name-"] {
  margin-left: 20px;
 }
@ -197,9 +195,32 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  display: none;
 }

+div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+  > nav[class^="container-"]
+  > [class^="container-"][class*="bottom-"]
+  > [class^="containerPadding-"]
+  > [class^="bar-"] {
+  width: 32px !important;
+}
+
+div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+  > nav[class^="container-"]
+  > [class^="container-"][class*="bottom-"]
+  > [class^="containerPadding-"]
+  > [class^="bar-"]
+  > svg {
+  display: none;
+}
+
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class*="unreadBar-"]
-  > span {
+  > span,
+div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+  > nav[class^="container-"]
+  > [class^="container-"][class*="bottom-"]
+  > [class^="containerPadding-"]
+  > [class^="bar-"]
+  > [class*="barText-"] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
--- a/modular/collapsing_sidebar/dynamic.css
+++ b/modular/collapsing_sidebar/dynamic.css
@ -131,17 +131,16 @@
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"][class*="selected-"]
    [class^="iconVisibility-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class^="children-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="iconVisibility-"][class*="modeSelected-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class^="children-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="iconVisibility-"]:not([class*="typeThread-"])
-    > [class^="content-"]
-    > [class^="mainContent-"]
+    [class^="linkTop-"]
    > [class^="name-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
@ -149,12 +148,12 @@
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="voiceUser-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class^="icons-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="voiceUser-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class*="username-"] {
    display: none;
  }
@ -162,8 +161,7 @@
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="iconVisibility-"][class*="typeThread-"]
-    > [class^="content-"]
-    > [class^="mainContent-"]
+    [class^="linkTop-"]
    > [class^="name-"] {
    margin-left: 20px;
  }
@ -197,9 +195,32 @@
    display: none;
  }

+  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+    > nav[class^="container-"]
+    > [class^="container-"][class*="bottom-"]
+    > [class^="containerPadding-"]
+    > [class^="bar-"] {
+    width: 32px !important;
+  }
+
+  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+    > nav[class^="container-"]
+    > [class^="container-"][class*="bottom-"]
+    > [class^="containerPadding-"]
+    > [class^="bar-"]
+    > svg {
+    display: none;
+  }
+
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class*="unreadBar-"]
-    > span {
+    > span,
+  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+    > nav[class^="container-"]
+    > [class^="container-"][class*="bottom-"]
+    > [class^="containerPadding-"]
+    > [class^="bar-"]
+    > [class*="barText-"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
--- a/modular/collapsing_sidebar/dynamic_+_compact-er_support.css
+++ b/modular/collapsing_sidebar/dynamic_+_compact-er_support.css
@ -131,17 +131,16 @@
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"][class*="selected-"]
    [class^="iconVisibility-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class^="children-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="iconVisibility-"][class*="modeSelected-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class^="children-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="iconVisibility-"]:not([class*="typeThread-"])
-    > [class^="content-"]
-    > [class^="mainContent-"]
+    [class^="linkTop-"]
    > [class^="name-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
@ -149,12 +148,12 @@
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="voiceUser-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class^="icons-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="voiceUser-"]
-    > [class^="content-"]
+    [class^="linkTop-"]
    > [class*="username-"] {
    display: none;
  }
@ -162,8 +161,7 @@
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="iconVisibility-"][class*="typeThread-"]
-    > [class^="content-"]
-    > [class^="mainContent-"]
+    [class^="linkTop-"]
    > [class^="name-"] {
    margin-left: 20px;
  }
@ -197,9 +195,32 @@
    display: none;
  }

+  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+    > nav[class^="container-"]
+    > [class^="container-"][class*="bottom-"]
+    > [class^="containerPadding-"]
+    > [class^="bar-"] {
+    width: 32px !important;
+  }
+
+  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+    > nav[class^="container-"]
+    > [class^="container-"][class*="bottom-"]
+    > [class^="containerPadding-"]
+    > [class^="bar-"]
+    > svg {
+    display: none;
+  }
+
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class*="unreadBar-"]
-    > span {
+    > span,
+  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+    > nav[class^="container-"]
+    > [class^="container-"][class*="bottom-"]
+    > [class^="containerPadding-"]
+    > [class^="bar-"]
+    > [class*="barText-"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
--- a/modular/collapsing_sidebar/on.css
+++ b/modular/collapsing_sidebar/on.css
@ -137,17 +137,16 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"][class*="selected-"]
  [class^="iconVisibility-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class^="children-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="iconVisibility-"][class*="modeSelected-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class^="children-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="iconVisibility-"]:not([class*="typeThread-"])
-  > [class^="content-"]
-  > [class^="mainContent-"]
+  [class^="linkTop-"]
  > [class^="name-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
@ -155,12 +154,12 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="voiceUser-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class^="icons-"],
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="voiceUser-"]
-  > [class^="content-"]
+  [class^="linkTop-"]
  > [class*="username-"] {
  display: none;
 }
@ -168,8 +167,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class^="containerDefault-"]
  [class^="iconVisibility-"][class*="typeThread-"]
-  > [class^="content-"]
-  > [class^="mainContent-"]
+  [class^="linkTop-"]
  > [class^="name-"] {
  margin-left: 20px;
 }
@ -203,9 +201,32 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  display: none;
 }

+div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+  > nav[class^="container-"]
+  > [class^="container-"][class*="bottom-"]
+  > [class^="containerPadding-"]
+  > [class^="bar-"] {
+  width: 32px !important;
+}
+
+div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+  > nav[class^="container-"]
+  > [class^="container-"][class*="bottom-"]
+  > [class^="containerPadding-"]
+  > [class^="bar-"]
+  > svg {
+  display: none;
+}
+
 div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
  [class*="unreadBar-"]
-  > span {
+  > span,
+div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
+  > nav[class^="container-"]
+  > [class^="container-"][class*="bottom-"]
+  > [class^="containerPadding-"]
+  > [class^="bar-"]
+  > [class*="barText-"] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
--- a/modular/compacter_mode.css
+++ b/modular/compacter_mode.css
@ -347,8 +347,8 @@ button.hh2-spotify-controls-button {
 [class^="sidebar-"] ul[class^="content-"] > [class^="sectionDivider-"] {
  margin-top: 6px;
 }
-[class^="sidebar-"] [class^="iconVisibility-"] > [class^="content-"] {
-  padding: 0 4px;
+[class^="sidebar-"] [class^="containerDefault-"] [class^="link-"] {
+  padding: 4px;
 }
 [class^="sidebar-"]
  [class^="iconVisibility-"]
@ -384,6 +384,9 @@ button.hh2-spotify-controls-button {
  margin-left: 4px;
  margin-right: 4px;
 }
+[class^="sidebar-"] [class^="containerDefault-"] [class^="spine-"] {
+  top: 2px;
+}
 div[class^="sidebar-"]:not(:has(> [class^="side-"]))
  > nav[class^="container-"]
  > [class^="container-"][class*="clickable-"]
@ -430,25 +433,382 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
 [class^="sidebar-"] header[class^="header-"] {
  padding: 4px 8px;
 }
-[class^="chat-"] > [class^="title-"] {
+[class^="chat-"] > [class^="title-"],
+[class^="chat-"] > section[class*="container-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"] {
+  height: 32px;
+  min-height: 32px;
+  padding: 0;
+}
+[class^="chat-"] > [class^="title-"][class^="libraryHeader-"]:before,
+[class^="chat-"] > section[class*="container-"][class^="libraryHeader-"]:before,
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"][class^="libraryHeader-"]:before,
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"][class^="libraryHeader-"]:before {
+  top: 31px;
+}
+[class^="chat-"] > [class^="title-"] > [class^="upperContainer-"],
+[class^="chat-"] > section[class*="container-"] > [class^="upperContainer-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"] {
  height: 32px;
 }
 [class^="chat-"]
  > [class^="title-"]
-  [class^="toolbar-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"] {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+  margin-right: 4px;
+}
+[class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="inviteToolbar-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="inviteToolbar-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="inviteToolbar-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="inviteToolbar-"] {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+}
+[class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
  > [class^="search-"]
  [class^="searchBar-"] {
  height: 24px !important;
 }
 [class^="chat-"]
  > [class^="title-"]
-  [class^="toolbar-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
  > [class^="search-"]
  [class^="searchBar-"]
-  > .DraftEditor-root,
+  > .DraftEditor-root
+  [class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
 [class^="chat-"]
  > [class^="title-"]
-  [class^="toolbar-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > [class^="icon-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="search-"]
+  [class^="searchBar-"]
+  > .DraftEditor-root
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
  > [class^="search-"]
  [class^="searchBar-"]
  > [class^="icon-"] {
@ -456,54 +816,234 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
 }
 [class^="chat-"]
  > [class^="title-"]
-  [class^="toolbar-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  [class^="iconWrapper-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  [class^="iconWrapper-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  [class^="iconWrapper-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
  [class^="iconWrapper-"] {
  width: 24px !important;
  height: 24px !important;
+  margin: 0;
 }
 [class^="chat-"]
  > [class^="title-"]
-  [class^="toolbar-"]
-  [class*="iconWrapper-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  [class^="iconWrapper-"]
+  > svg,
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  [class^="iconWrapper-"]
+  > svg,
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  [class^="iconWrapper-"]
+  > svg,
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  [class^="iconWrapper-"]
  > svg {
  margin: 0 !important;
  padding: 1px;
 }
-[class^="chat-"] > [class^="title-"] [class^="toolbar-"] {
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 4px;
-}
 [class^="chat-"]
  > [class^="title-"]
-  [class^="toolbar-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="icon-"]:has(> [class^="text-md-normal-"]),
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="icon-"]:has(> [class^="text-md-normal-"]),
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
+  > [class^="icon-"]:has(> [class^="text-md-normal-"]),
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="toolbar-"]
  > [class^="icon-"]:has(> [class^="text-md-normal-"]) {
  margin-left: 4px;
  margin-right: 0;
 }
-[class^="chat-"] > [class^="title-"] [class^="topic-"] {
+[class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  [class^="topic-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="topic-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="topic-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="topic-"] {
  margin-left: 4px;
 }
-[class^="chat-"] > [class^="title-"] [class^="titleWrapper-"] {
+[class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  [class^="titleWrapper-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="titleWrapper-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="titleWrapper-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="titleWrapper-"] {
  margin-right: 4px;
 }
 [class^="chat-"]
  > [class^="title-"]
+  > [class^="upperContainer-"]
  > [class^="children-"]
  > [class^="iconWrapper-"],
-[class^="chat-"] > [class^="title-"] [class^="divider-"] {
+[class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  [class^="divider-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="children-"]
+  > [class^="iconWrapper-"],
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="divider-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="children-"]
+  > [class^="iconWrapper-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="divider-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="children-"]
+  > [class^="iconWrapper-"],
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  [class^="divider-"] {
  margin: 0 4px;
 }
 [class^="chat-"]
  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class^="children-"]
+  > [class^="iconWrapper-"]
+  > svg,
+[class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="children-"]
+  > [class^="iconWrapper-"]
+  > svg,
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class^="children-"]
+  > [class^="iconWrapper-"]
+  > svg,
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
  > [class^="children-"]
  > [class^="iconWrapper-"]
  > svg {
  padding: 2px;
 }
-
-[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"],
-[class^="chat-"] [class^="toolbar-"] > [class*="search-"] {
+[class*="iconWrapper-"]
+  [class^="chat-"]
+  > [class^="title-"]
+  > [class^="upperContainer-"]
+  > [class*="search-"],
+[class*="iconWrapper-"]
+  [class^="chat-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class*="search-"],
+[class*="iconWrapper-"]
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class*="search-"],
+[class*="iconWrapper-"]
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="applicationStore-"]
+  section[class*="container-"]
+  > [class^="upperContainer-"]
+  > [class*="search-"] {
  margin: 0 !important;
 }

@ -531,7 +1071,13 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
  min-height: 40px !important;
 }
 [class^="channelTextArea-"] [class^="buttons-"],
-[class^="channelTextArea-"] [class^="attachWrapper-"] {
+[class^="channelTextArea-"] [class^="attachWrapper-"],
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="textArea-"] {
  height: 40px;
 }
 [class^="channelTextArea-"] [class^="attachWrapper-"] {
--- a/modular/font/terminus.css
+++ b/modular/font/terminus.css
@ -1,6 +1,7 @@
@font-face {
  font-family: "Unifont";
-  src: local("Unifont"),
+  src:
+    local("Unifont"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf)
      format("truetype");
  font-weight: normal;
@ -9,7 +10,8 @@

@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf)
      format("truetype");
  font-weight: normal;
@ -17,7 +19,8 @@
 }
@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold-4.47.0.ttf)
      format("truetype");
  font-weight: bold;
@ -25,7 +28,8 @@
 }
@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold%20Italic-4.47.0.ttf)
      format("truetype");
  font-weight: bold;
@ -33,7 +37,8 @@
 }
@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Italic-4.47.0.ttf)
      format("truetype");
  font-weight: normal;
--- a/modular/font/the_funny.css
+++ b/modular/font/the_funny.css
@ -1,6 +1,7 @@
@font-face {
  font-family: "Pointfree";
-  src: local("Pointfree"),
+  src:
+    local("Pointfree"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf)
      format("truetype");
  font-weight: normal;
@ -9,7 +10,8 @@

@font-face {
  font-family: "Untyped";
-  src: local("Untyped"),
+  src:
+    local("Untyped"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf)
      format("truetype");
  font-weight: normal;
--- a/modular/font/the_funny_(alternate_monospace).css
+++ b/modular/font/the_funny_(alternate_monospace).css
@ -1,6 +1,7 @@
@font-face {
  font-family: "Untyped";
-  src: local("Untyped"),
+  src:
+    local("Untyped"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf)
      format("truetype");
  font-weight: normal;
@ -9,7 +10,8 @@

@font-face {
  font-family: "Pointfree";
-  src: local("Pointfree"),
+  src:
+    local("Pointfree"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf)
      format("truetype");
  font-weight: normal;
--- a/modular/font/unifont.css
+++ b/modular/font/unifont.css
@ -1,6 +1,7 @@
@font-face {
  font-family: "Unifont";
-  src: local("Unifont"),
+  src:
+    local("Unifont"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf)
      format("truetype");
  font-weight: normal;
@ -9,7 +10,8 @@

@font-face {
  font-family: "Unifont";
-  src: local("Unifont"),
+  src:
+    local("Unifont"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf)
      format("truetype");
  font-weight: normal;
@ -18,7 +20,8 @@

@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf)
      format("truetype");
  font-weight: normal;
@ -26,7 +29,8 @@
 }
@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold-4.47.0.ttf)
      format("truetype");
  font-weight: bold;
@ -34,7 +38,8 @@
 }
@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold%20Italic-4.47.0.ttf)
      format("truetype");
  font-weight: bold;
@ -42,7 +47,8 @@
 }
@font-face {
  font-family: "Terminus (TTF)";
-  src: local("Terminus (TTF)"),
+  src:
+    local("Terminus (TTF)"),
    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Italic-4.47.0.ttf)
      format("truetype");
  font-weight: normal;
--- a/modular/scheme/amora.css
+++ b/modular/scheme/amora.css
@ -39,6 +39,8 @@
  --status-dnd: var(--_color5);
  --status-offline: var(--highlight);
  --status-streaming: var(--_color4);
+
+  --status-warning-text: var(--primary) !important;
 }

 #splash {
--- a/modular/scheme/amora_focus.css
+++ b/modular/scheme/amora_focus.css
@ -42,6 +42,8 @@
  --status-offline: var(--highlight);
  --status-streaming: var(--_color4);

+  --status-warning-text: var(--primary) !important;
+
  --titlebar-color: var(--accent);
  --wc-bright: #383838;
 }
--- a/modular/stylings/windows_classic.css
+++ b/modular/stylings/windows_classic.css
@ -415,7 +415,9 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))

 [class^="scroller-"]::-webkit-scrollbar-button:single-button:active,
 [class*="scrollerBase-"]::-webkit-scrollbar-button:single-button:active {
-  box-shadow: inset 1px 1px var(--secondary), inset -1px -1px var(--secondary);
+  box-shadow:
+    inset 1px 1px var(--secondary),
+    inset -1px -1px var(--secondary);
 }
 [class^="scroller-"]:not(
    [class*="thin-"]
@ -498,3 +500,287 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
 [class^="popout-"][role="listbox"] > [class^="option-"]:hover {
  background-color: var(--accent);
 }
+
+[class^="userPopoutOuter-"] {
+  padding: 2px !important;
+  background: var(--primary) !important;
+  border-radius: 0 !important;
+  box-shadow: var(--wc-outer-edge);
+}
+[class^="userPopoutOuter-"] > [class^="userPopoutInner-"],
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class^="userPopoutOverlayBackground-"] {
+  background: transparent;
+}
+[class^="userPopoutOuter-"] > [class^="userPopoutInner-"]:before {
+  display: none;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class*="avatarWrapper-"] {
+  top: 26px;
+  left: 8px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class*="avatarWrapper-"]
+  > [class^="avatarHoverTarget-"]
+  > [class^="wrapper-"] {
+  width: 56px !important;
+  height: 56px !important;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class*="avatarWrapper-"]
+  [class*="avatarHint-"] {
+  width: 48px !important;
+  height: 48px !important;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class*="avatarWrapper-"]
+  > [class^="avatarHoverTarget-"]
+  > [class^="wrapper-"]
+  > svg {
+  width: 55px !important;
+  height: 55px !important;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]:after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  content: "";
+  width: calc(100% - 4px);
+  height: 18px;
+  background: linear-gradient(
+    to right,
+    var(--profile-gradient-primary-color),
+    var(--profile-gradient-secondary-color)
+  );
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
+  > [class^="userPopoutInner-"]
+  [class^="banner-"] {
+  height: 18px !important;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
+  [class^="banner-"] {
+  margin-top: 19px;
+  border-radius: 0;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
+  [class^="banner-"]:after {
+  content: "";
+  background: linear-gradient(to bottom, transparent 32px, var(--primary) 64px);
+  width: 340px;
+  height: 120px;
+  position: absolute;
+  top: 19px;
+  left: 0;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
+  [class^="banner-"] {
+  display: none;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class^="userPopoutOverlayBackground-"] {
+  margin: 0 !important;
+  overflow: visible;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
+  > [class^="userPopoutOverlayBackground-"] {
+  margin-top: -72px !important;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
+  > [class^="userPopoutOverlayBackground-"] {
+  margin-top: -48px !important;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
+  > [class^="userPopoutInner-"]
+  > [class^="userPopoutOverlayBackground-"] {
+  margin-top: -78px !important;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
+  [class*="usernameSection-"] {
+  padding: 0 !important;
+  position: absolute;
+  top: -60px;
+  left: 64px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
+  [class*="usernameSection-"] {
+  padding: 0 !important;
+  position: absolute;
+  top: -56px;
+  left: 64px;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"] {
+  padding: 0 !important;
+  position: absolute;
+  top: -54px;
+  left: 64px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  > div {
+  display: flex;
+  flex-direction: row !important;
+  align-items: center;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  > div
+  > [class^="userText-"]
+  > h1 {
+  font-size: 16px !important;
+  line-height: 16px !important;
+  text-shadow: 1px 1px 0 var(--primary);
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  [class^="userText-"]
+  > div
+  > [class*="userTag-"] {
+  line-height: 16px;
+  width: max-content;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  [class^="userText-"]
+  > div
+  > [class*="userTag-"]
+  > span {
+  text-shadow: 1px 1px 0 var(--primary);
+  font-size: 12px;
+  padding-left: 2px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  [class^="userText-"]
+  > div {
+  position: absolute;
+  top: -26px;
+  left: -62px;
+  z-index: 10;
+  flex-direction: row-reverse !important;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  [class^="userText-"]
+  > div {
+  position: absolute;
+  top: -26px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
+  [class*="usernameSection-"]
+  [class^="userText-"]
+  > div {
+  position: absolute;
+  top: -24px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  [class^="userText-"]
+  > div
+  .platform-icons-wrapper {
+  margin-left: 0 !important;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="usernameSection-"]
+  > div
+  > [class*="pronouns-"] {
+  font-size: 12px;
+  line-height: 12px;
+  padding-top: 0;
+  margin-left: 4px;
+  opacity: 0.75;
+  text-shadow: 1px 1px 0 var(--primary);
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
+  [class*="customStatusSection-"] {
+  padding: 0 !important;
+  position: absolute;
+  top: -38px;
+  left: 64px;
+}
+[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
+  > [class^="userPopoutInner-"]
+  [class*="customStatusSection-"] {
+  padding: 0 !important;
+  position: absolute;
+  top: -30px;
+  left: 64px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
+  [class*="customStatusSection-"] {
+  padding: 0 !important;
+  position: absolute;
+  top: -32px;
+  left: 64px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="customStatusSection-"]
+  > [class^="customStatus-"] {
+  font-size: 12px;
+  line-height: 12px;
+  text-shadow: 1px 1px 0 var(--primary);
+  display: flex;
+  flex-direction: row !important;
+  align-items: center;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="customStatusSection-"]
+  > [class^="customStatus-"]
+  > [class*="customStatusEmoji-"] {
+  width: 16px;
+  height: 16px;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class*="customStatusSection-"]
+  > [class^="customStatus-"]
+  > [class^="customStatusText-"] {
+  max-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  [class^="section-"]:has(> .mutual-guilds) {
+  padding-top: 0;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class^="profileBadges-"] {
+  visibility: hidden;
+  height: 30px !important;
+}
+[class^="userPopoutOuter-"]
+  > [class^="userPopoutInner-"]
+  > [class^="bannerSVGWrapper-"][viewbox$=" 60"] {
+  margin-bottom: 60px;
+}
--- a/modular/voice_rings.css
+++ b/modular/voice_rings.css
@ -1,6 +1,7 @@
 [class*="avatarSpeaking-"],
 [class^="avatar-"][class*="speaking-"] {
-  box-shadow: 0 0 0 2px var(--status-online, var(--status-green-600)),
+  box-shadow:
+    0 0 0 2px var(--status-online, var(--status-green-600)),
    0 0 0 3px var(--background-secondary) !important;
 }