Make Modular

modular/accessible_styles/italics_+_bold.css

@@ -9,5 +9,5 @@ em {
 span[data-slate-leaf="true"][class*="bold-"],
 strong {
   font-weight: 400;
-  text-shadow: 0.25px 0.25px, -0.25px -0.25px;
+  text-shadow: 0.1px 0.1px, -0.1px -0.1px;
 }

modular/accessible_styles/just_italics.css

@@ -0,0 +1,7 @@
+span[data-slate-leaf="true"][class*="italics-"],
+em {
+  font-style: normal;
+  display: inline-block;
+  transform: skewX(-8deg);
+  color: #f80;
+}

modular/base.css

@@ -586,6 +586,10 @@ div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject,
   -webkit-mask-image: none !important;
 }
 
+[class^="accountProfileCard-"] > [class^="userInfo-"] > [class*="avatar-"] {
+  top: 112px;
+}
+
 /* chat box */
 [class*="chat-"] [class*="chatContent-"] form {
   position: relative;
@@ -698,12 +702,12 @@ form [class*="typing-"] {
   display: none;
 }
 
-[class^="userPopout-"] [class^="banner-"] {
-  /*box-shadow: 0 2px 5px 0 var(--background-secondary) !important;*/
-  background-image: url("https://elixi.re/i/5rw87lo8.gif");
-  background-repeat: no-repeat;
-  image-rendering: pixelated;
-}
+/*[class^="userPopout-"] [class^="banner-"] {
+    /*box-shadow: 0 2px 5px 0 var(--background-secondary) !important;*/ /*
+    background-image: url("https://elixi.re/i/5rw87lo8.gif");
+    background-repeat: no-repeat;
+    image-rendering: pixelated;
+  }*/
 [class^="userPopout-"] [class^="body-"] {
   overflow: hidden visible !important;
 }
@@ -1014,14 +1018,14 @@ form [class*="typing-"] {
 }
 
 /* Profiles */
-[class^="focusLock-"][aria-modal="true"]
-  > [class^="root-"]
-  [class*="profileBanner-"] {
-  background: url("https://elixi.re/i/5rw87lo8.gif");
-  background-size: cover;
-  background-repeat: no-repeat;
-  image-rendering: pixelated;
-}
+/*[class^="focusLock-"][aria-modal="true"]
+    > [class^="root-"]
+    [class*="profileBanner-"] {
+    background: url("https://elixi.re/i/5rw87lo8.gif");
+    background-size: cover;
+    background-repeat: no-repeat;
+    image-rendering: pixelated;
+  }*/
 
 [class^="focusLock-"][aria-modal="true"] > [class*="root-"] > [class^="body-"] {
   margin-top: 8px;
@@ -1684,152 +1688,152 @@ code.inline {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-keyword {
-  color: var(--_color5);
+  color: var(--_color5) !important;
 }
 .hljs-built_in {
-  color: var(--_color6);
+  color: var(--_color6) !important;
 }
 .hljs-type {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-literal {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-number {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-regexp {
-  color: var(--_color6);
+  color: var(--_color6) !important;
 }
 .hljs-string {
-  color: var(--_color2);
+  color: var(--_color2) !important;
 }
 .hljs-subst {
-  color: var(--_color1);
+  color: var(--_color1) !important;
 }
 .hljs-symbol {
-  color: var(--_color5);
+  color: var(--_color5) !important;
 }
 .hljs-class {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-function {
-  color: var(--_color4);
+  color: var(--_color4) !important;
 }
 .hljs-title {
-  color: var(--_color4);
+  color: var(--_color4) !important;
 }
 .hljs-params {
-  color: var(--_color1);
+  color: var(--_color1) !important;
 }
 .hljs-comment {
-  color: var(--highlight);
+  color: var(--highlight) !important;
 }
 .hljs-doctag {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-meta {
-  color: var(--_color1);
+  color: var(--_color1) !important;
 }
 .hljs-meta-keyword {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-meta-string {
   color: var(--_color2) !important;
 }
 .hljs-section {
-  color: var(--_color4);
+  color: var(--_color4) !important;
 }
 .hljs-tag {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-name {
-  color: var(--_color1);
+  color: var(--_color1) !important;
 }
 .hljs-builtin-name {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-attr {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-attribute {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-variable {
-  color: var(--_color1);
+  color: var(--_color1) !important;
 }
 .hljs-bullet {
-  color: var(--_color1);
+  color: var(--_color1) !important;
 }
 .hljs-code {
-  color: var(--_color2);
+  color: var(--_color2) !important;
 }
 .hljs-emphasis {
-  color: var(--_color5);
+  color: var(--_color5) !important;
   font-style: italic;
 }
 .hljs-strong {
-  color: var(--_color3);
+  color: var(--_color3) !important;
   font-weight: bold;
 }
 .hljs-formula {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-link {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-quote {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-selector-tag {
-  color: var(--_color1);
+  color: var(--_color1) !important;
 }
 .hljs-selector-id {
-  color: var(--_color4);
+  color: var(--_color4) !important;
 }
 .hljs-selector-class {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-selector-attr {
-  color: var(--_color4);
+  color: var(--_color4) !important;
 }
 .hljs-selector-pseudo {
-  color: var(--_color3);
+  color: var(--_color3) !important;
 }
 .hljs-template-tag {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-template-variable {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-addition {
-  color: #a6e22e;
-  background: #384c10;
+  color: #a6e22e !important;
+  background: #384c10 !important;
 }
 .hljs-deletion {
-  color: #f92672;
-  background: #4c0c23;
+  color: #f92672 !important;
+  background: #4c0c23 !important;
 }
 .hljs-operator {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-pattern-match {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-typing {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-constructor {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-module-access {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-module {
-  color: var(--_colorFG);
+  color: var(--_colorFG) !important;
 }
 .hljs-emphasis {
   font-style: italic !important;

modular/old_roles.css

@@ -8,16 +8,25 @@
   padding-left: 16px;
 }
 
-[class^="roleRemoveButton-"] [class^="roleCircle-"] {
+[class^="roleRemoveButton-"] [class^="roleCircle-"],
+[class^="roleRemoveButton-"] [class^="roleFlowerStar-"] {
   margin: 0 !important;
   border-radius: 5% !important;
-  width: 100%;
-  height: 22px;
+  width: 100% !important;
+  height: 22px !important;
   top: 0;
   left: 0;
-  opacity: 0.25;
   position: absolute;
   z-index: 1;
+  opacity: 0.25;
+}
+
+[class^="roleFlowerStar-"] > svg[class^="linkIcon-"] {
+  z-index: 6;
+  position: absolute;
+  opacity: 1;
+  right: -2px;
+  top: -2px;
 }
 
 [class^="roleRemoveButton-"] {
@@ -29,6 +38,10 @@
   overflow-y: visible;
 }
 
+[class^="role-"] [class^="roleIcon-"] {
+  z-index: 5;
+}
+
 [class^="roleName-"] {
   z-index: 2;
 }

modular/override_titlebar.css

@@ -0,0 +1,3 @@
+:root {
+  --titlebar-color: var(--xmc_titlebar_color) !important;
+}

modular/scheme/amoled.css

@@ -41,5 +41,5 @@
   --status-offline: #747f8d;
   --status-streaming: #593695;
 
-  --titlebar-color: #060606 !important;
+  --titlebar-color: #060606;
 }

modular/scheme/annie_dark.css

@@ -41,5 +41,5 @@
   --status-offline: #747f8d;
   --status-streaming: #593695;
 
-  --titlebar-color: var(--tertiary) !important;
+  --titlebar-color: var(--tertiary);
 }

modular/scheme/catppuccin_frappe.css

@@ -41,7 +41,7 @@
   --status-offline: var(--_color8);
   --status-streaming: var(--_color5);
 
-  --titlebar-color: #414559 !important;
+  --titlebar-color: #414559;
 
   --interactive-hover: var(--_color6) !important;
   --interactive-active: var(--_color7) !important;

modular/scheme/catppuccin_macchiato.css

@@ -41,7 +41,7 @@
   --status-offline: var(--_color8);
   --status-streaming: var(--_color5);
 
-  --titlebar-color: #363a4f !important;
+  --titlebar-color: #363a4f;
 
   --interactive-hover: var(--_color6) !important;
   --interactive-active: var(--_color7) !important;

modular/scheme/catppuccin_mocha.css

@@ -41,7 +41,7 @@
   --status-offline: var(--_color8);
   --status-streaming: var(--_color5);
 
-  --titlebar-color: #313244 !important;
+  --titlebar-color: #313244;
 
   --background-mentioned: rgba(137, 180, 250, 0.2) !important;
   --background-mentioned-hover: rgba(137, 180, 250, 0.15) !important;

modular/scheme/custom.css

@@ -41,8 +41,6 @@
   --status-offline: var(--xmc-custom-status-offline);
   --status-streaming: var(--xmc-custom-status-streaming);
 
-  --titlebar-color: var(--xmc-custom-titlebar) !important;
-
   --interactive-hover: var(--xmc-custom-hover) !important;
   --interactive-active: var(--xmc-custom-active) !important;
 }

modular/scheme/nord.css

@@ -41,5 +41,5 @@
   --status-offline: var(--_color8);
   --status-streaming: var(--_color5);
 
-  --titlebar-color: #4c566a !important;
+  --titlebar-color: #4c566a;
 }

modular/scheme/stock.css

@@ -41,5 +41,5 @@
   --status-offline: #747f8d;
   --status-streaming: #593695;
 
-  --titlebar-color: var(--highlight) !important;
+  --titlebar-color: var(--highlight);
 }

modular/scheme/xmc.css

@@ -41,5 +41,5 @@
   --status-offline: var(--_color8);
   --status-streaming: var(--_color5);
 
-  --titlebar-color: var(--accent) !important;
+  --titlebar-color: var(--accent);
 }

modular/stylings.css

@@ -1,6 +1,6 @@
 .theme-dark,
 :root {
-  --_font-titlebars: "Segoe UI", sans-serif !important;
+  --_font-titlebars: "Segoe UI", sans-serif;
 
   --button-bg: linear-gradient(to bottom, var(--primary), var(--secondary));
   --button-shadow: inset 0 0 0 1px var(--tertiary),
@@ -28,32 +28,24 @@ section[class^="panels-"]
   box-shadow: var(--button-shadow) !important;
 }
 
-div[class^="containerDefault-"][class*="selected-"]
+[class^="containerDefault-"][class*="selected-"]
   [class^="iconVisibility-"]
   > [class^="content-"],
-div[class^="containerDefault-"]
+[class^="containerDefault-"]
   [class^="iconVisibility-"][class*="modeSelected-"]
   > [class^="content-"],
 nav[class^="sidebar-"] div[class^="item-"][class*="selected-"],
-[class^="privateChannels-"]
-  [class^="channel-"][class*="selected-"]
-  [class^="layout-"],
-[class^="member-"][class*="selected-"] > [class^="layout-"],
-.sidebarOverhaul [class^="channel-"][class*="selected-"] [class^="layout-"] {
+[class^="member-"][aria-expanded="true"] > [class^="layout-"],
+[class^="channel-"] [class^="interactive-"][class*="selected-"] {
   border-radius: 0;
   background: var(--button-bg) !important;
   box-shadow: var(--button-shadow) !important;
 }
 
-div[class^="containerDefault-"] [class^="content-"]:hover,
+[class^="containerDefault-"] [class^="content-"]:hover,
 nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover,
-[class^="privateChannels-"]
-  [class^="channel-"]:not([class*="selected-"]):hover
-  [class^="layout-"],
-[class^="member-"]:not([class*="selected-"]):hover > [class^="layout-"],
-.sidebarOverhaul
-  [class^="channel-"]:not([class*="selected-"]):hover
-  [class^="layout-"] {
+[class^="member-"]:not([aria-expanded="true"]):hover > [class^="layout-"],
+[class^="channel-"] [class^="interactive-"]:not([class*="selected-"]):hover {
   border-radius: 0;
   background: var(--hover-bg) !important;
   box-shadow: var(--hover-shadow) !important;

modular/titlebars.css

@@ -93,7 +93,7 @@
 [class^="typeWindows-"] {
   margin: 3px;
   padding: 6px;
-  height: 14px !important;
+  height: 10px !important;
   background: var(--titlebar-color);
   box-shadow: var(--titlebar-shadow);
 }
@@ -114,7 +114,7 @@
   background-color: transparent !important;
   width: 14px !important;
   height: 14px !important;
-  top: -1px !important;
+  top: -2px !important;
   position: relative !important;
   margin-left: 30px;
 }
@@ -191,8 +191,8 @@ html.platform-win:not(.app-focused) [class*="winButton-"]:hover {
 [class^="wordmarkWindows-"] {
   width: 16px !important;
   height: 16px !important;
-  top: 8px !important;
-  left: 9px !important;
+  top: 6px !important;
+  left: 7px !important;
   padding: 0 !important;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM6SURBVDhPhZJrUIxRGMePMUiDkUaMmeRSQy7lMijklg+lBg1DG8Nu6EalJFqxU7JtbcnSZd+tbMm2W3RZpdVlG7GpKJemZqKLiC9tYYsti/17rdf0gRm/mWfmzHPO7z/PnHPI/1A9rRKyLu38tPHgiiFZUV4K0/4b3dCAe6ky/nHF3YIspkXiq6kXXHUw8hu5YAv2giyciQsJl+8x22MYjUZzdXMKgD5ESytwX9MROTzyxX7H7QioDSpU9hXiKBWHmZ4cEDNnjIx8ncuov9Hr9Qviyq6hl47YVwbwMjrkD9qfhGzO40L8rhr8xxVwTcrHtD25IDPC0Nun3cqoY4hkcoUlJwdkay0M34zTdZ91y6cd8YB7Bh9bhBLYBJeBuD4EWZAKeuJJjDZGV1c9L+9mCOKTwvGspSHsV48THfmIrFgHs20BIM4iEGspmlq1USbhD/TU4568yO949VZML4cwikH4cFNxRqh839nd62Pv5qydYOsEMscVvuF8DaON8Wagpb2uR43+4Ud0AGCgK6ZkBIt9xThSwkNO23mklPuDFeeBRbuW4kTUqVqd7uMSRick9/UXsNOvQGdoNwW8pCtCVURXKKg3aXg+WghZcyICqVNYH8LGOPs1ILOXoFajuWgKSNR8794dGYAuQyd0tMxrzIJSS0HSI0PRcDmaR8uRUZ8OjjgOm6K4sPHyo/+DB8jyIPT09nFMIfStTvyOH07F3Q0NordZELTU4FglBeVoDao+VICvvg7vNBFcooWwY8diiuMBjN+SDStPSm8K+ENQHR/BVaWwDroKtioZssF7yOkuRnipFLtEFJzOSWDnL4GFy1lMXHUS5t5qI6MSUveqRehZGAur/Zmw2BcK3+p4iDpvQ9Agg+/NbGxPzMbqqDzYBhbAwk2MSY6HMctPAUYn5JIy85lVaBiIbRosD+3Enls8cDWZOHlHDK90MTbEXMey0wWYH3AHZm5yTHY4C/3Xb9aMTj+n9j07LKegrrJxgBtzi6p3SOCAJY+FjzQRrgIRVp6RYN5xOab6lICsVWCt941+Rv03Ta/bg/mq3Kb9qYKBzbykTy7R0n5Wck2roOilQtM2GPj7FCE/Ab+l9dhxypy/AAAAAElFTkSuQmCC");
   background-repeat: no-repeat;
@@ -205,7 +205,7 @@ html.platform-win:not(.app-focused) [class*="winButton-"]:hover {
   font-weight: 0 !important;
   content: "Discord";
   position: absolute;
-  top: -8px;
+  top: -7px;
   left: 21px;
   height: 17px;
   opacity: 1;