Make Modular

modular/base.css

@@ -1,3 +1,17 @@
+:root,
+.theme-dark,
+.theme-light {
+  --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
+    inset 0 0 0 2px rgba(0, 0, 0, 0.27),
+    0 0 0 1px var(--tertiary, var(--background-tertiary)),
+    0 0 0 2px var(--secondary, var(--background-secondary)),
+    0 0 0 3px var(--primary, var(--background-primary));
+
+  --_font-titlebars: var(--font-primary);
+
+  --titlebar-color: var(--accent);
+}
+
 /* i have no idea what half of these are for anymore */
 /* most of them are probably now-redundant color fixes */
 /* others are things i dont feel like need a toggle at the current moment */

modular/collapsing_sidebar/dynamic_+_compact-er_support.css

@@ -63,7 +63,7 @@
     > nav[class^="container-"]
     > [class^="container-"][class*="clickable-"]
     > [class^="animatedContainer-"] {
-    height: 32px;
+    height: 32px !important;
   }
 
   div[class^="sidebar-"]:not(:has(> [class^="side-"]))
@@ -71,7 +71,7 @@
     > [class^="container-"][class*="clickable-"]
     > [class^="animatedContainer-"]
     > [class^="bannerImage-"] {
-    height: 32px;
+    height: 32px !important;
   }
   div[class^="sidebar-"]:not(:has(> [class^="side-"]))
     > nav[class^="container-"]
@@ -79,7 +79,7 @@
     > [class^="animatedContainer-"]
     > [class^="bannerImage-"]:after {
     content: "";
-    height: 32px;
+    height: 32px !important;
     width: 240px;
     top: 0;
     left: 0;

modular/compacter_mode.css

@@ -348,6 +348,37 @@ button.hh2-spotify-controls-button {
   margin-left: 4px;
   margin-right: 4px;
 }
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="container-"][class*="clickable-"]
+  > [class^="animatedContainer-"] {
+  height: 32px !important;
+}
+
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="container-"][class*="clickable-"]
+  > [class^="animatedContainer-"]
+  > [class^="bannerImage-"] {
+  height: 32px !important;
+}
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="container-"][class*="clickable-"]
+  > [class^="animatedContainer-"]
+  > [class^="bannerImage-"]:after {
+  content: "";
+  height: 32px !important;
+  width: 240px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  background: linear-gradient(
+    0deg,
+    var(--background-secondary) 5%,
+    transparent 100%
+  );
+}
 
 [nop="nop"] [class^="members-"] > [class^="content-"],
 [nop="nop"] [class^="sidebar-"] ul[class^="content-"] {
@@ -430,6 +461,11 @@ button.hh2-spotify-controls-button {
   padding: 2px;
 }
 
+[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"],
+[class^="chat-"] [class^="toolbar-"] > [class*="search-"] {
+  margin: 0 !important;
+}
+
 [class^="chatContent-"] > form [class^="channelTextArea"] {
   margin-bottom: 1px !important;
 }
@@ -444,6 +480,9 @@ button.hh2-spotify-controls-button {
   padding-top: 9px !important;
   padding-bottom: 9px !important;
 }
+[class^="channelTextArea-"] [class^="inner-"] {
+  padding-left: 0 !important;
+}
 [class^="channelTextArea-"],
 [class^="channelTextArea-"] [class^="inner-"],
 [class^="channelTextArea-"] [class^="buttons-"],
@@ -457,6 +496,13 @@ button.hh2-spotify-controls-button {
 [class^="channelTextArea-"] [class^="attachWrapper-"] {
   height: 40px;
 }
+[class^="channelTextArea-"] [class^="attachWrapper-"] {
+  min-width: 40px;
+}
+[class^="channelTextArea-"] [class^="attachWrapper-"] [class^="attachButton-"] {
+  margin-left: 0;
+  padding-top: 0;
+}
 [class^="channelTextArea-"] [class^="attachButton-"],
 [class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] {
   padding: 5px 8px;
@@ -481,41 +527,41 @@ button.hh2-spotify-controls-button {
   margin-right: 0;
 }
 
-[class^="menu-"] [class^="scroller-"] {
+[class*="menu-"] [class^="scroller-"] {
   padding: 4px;
 }
-[class^="menu-"] [class^="scroller-"]::-webkit-scrollbar {
+[class*="menu-"] [class^="scroller-"]::-webkit-scrollbar {
   width: 4px;
 }
-[class^="menu-"] [class^="scroller-"] [class^="item-"] {
+[class*="menu-"] [class^="scroller-"] [class^="item-"] {
   margin: 1px 0;
   padding: 0 4px;
   min-height: 24px;
 }
-[class^="menu-"]
+[class*="menu-"]
   [class^="scroller-"]
   [class^="customItem-"][id^="message-quickreact-"]
   > [class^="button-"] {
   width: 24px;
   height: 24px;
 }
-[class^="menu-"]
+[class*="menu-"]
   [class^="scroller-"]
   [class^="wrapper-"]:has(> [class^="customItem-"][id^="message-quickreact-"]) {
   padding: 0;
   margin-bottom: 4px;
 }
-[class^="menu-"]
+[class*="menu-"]
   [class^="scroller-"]
   [class^="item-"]
   > [class^="labelContainer-"],
-[class^="menu-"]
+[class*="menu-"]
   [class^="scroller-"]
   [class^="item-"]
   > [class^="sliderContainer-"] {
   padding: 0;
 }
-[class^="menu-"]
+[class*="menu-"]
   [class^="scroller-"]
   [class^="item-"]
   > [class^="labelContainer-"] {

modular/font/custom.css

@@ -1,5 +1,6 @@
+:root,
 .theme-dark,
-:root {
+.theme-light {
   --font-primary: var(--xmc_custom_font), sans-serif !important;
   --font-display: var(--font-primary) !important;
   --font-code: var(--xmc_custom_font_mono), monospace !important;

modular/font/revert_rebrand.css

@@ -1,4 +1,5 @@
+:root,
 .theme-dark,
-:root {
+.theme-light {
   --font-display: var(--font-primary) !important;
 }

modular/font/terminus.css

@@ -40,8 +40,9 @@
   font-style: italic;
 }
 
+:root,
 .theme-dark,
-:root {
+.theme-light {
   --font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)",
     "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
   --font-display: "Terminus (TTF) for Windows", "Terminus (TTF)",
@@ -52,7 +53,7 @@
   --_font-titlebars: var(--font-primary) !important;
 }
 
-[class^="menu-"] [class^="item-"],
+[class*="menu-"] [class^="item-"],
 [class^="containerDefault-"]
   > [class^="iconVisibility-"]
   > [class^="content-"]

modular/font/the_funny.css

@@ -16,8 +16,9 @@
   font-style: normal;
 }
 
+:root,
 .theme-dark,
-:root {
+.theme-light {
   --font-primary: "Comic Sans MS", cursive !important;
   --font-display: "Comic Sans MS", cursive !important;
   --font-code: "Pointfree", "Untyped", monospace !important;

modular/font/the_funny_(alternate_monospace).css

@@ -16,8 +16,9 @@
   font-style: normal;
 }
 
+:root,
 .theme-dark,
-:root {
+.theme-light {
   --font-primary: "Comic Sans MS", cursive !important;
   --font-display: "Comic Sans MS", cursive !important;
   --font-code: "Untyped", "Pointfree", monospace !important;

modular/font/unifont.css

@@ -49,17 +49,18 @@
   font-style: italic;
 }
 
+:root,
 .theme-dark,
-:root {
-  --font-primary: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows",
-    "Unifont", monospace, "Twemoji" !important;
-  --font-display: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows",
-    "Unifont", monospace, "Twemoji" !important;
+.theme-light {
+  --font-primary: "UnifontBitmap", "Unifont Windows", "Unifont", monospace,
+    "Twemoji" !important;
+  --font-display: "UnifontBitmap", "Unifont Windows", "Unifont", monospace,
+    "Twemoji" !important;
   --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
     "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
 }
 
-[class^="menu-"] [class^="item-"],
+[class*="menu-"] [class^="item-"],
 [class^="containerDefault-"] [class^="name-"],
 [class^="membersGroup-"] {
   font-size: 16px;

modular/override_titlebar.css

@@ -1,3 +1,5 @@
-:root {
-  --titlebar-color: var(--xmc_titlebar_color) !important;
+:root,
+.theme-dark,
+.theme-light {
+  --titlebar-color: var(--xmc-titlebar-color) !important;
 }

modular/overwrite_colors.css

@@ -1,14 +1,6 @@
 :root,
 .theme-dark,
 .theme-light {
-  --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
-    inset 0 0 0 2px rgba(0, 0, 0, 0.27), 0 0 0 1px var(--background-tertiary),
-    0 0 0 2px var(--background-secondary), 0 0 0 3px var(--background-primary);
-
-  --_font-titlebars: var(--font-primary);
-
-  --titlebar-color: var(--highlight);
-
   --mention-background: rgba(var(--accent-rgb), 0.1);
   --header-primary: var(--text, var(--white-500)) !important;
   --header-secondary: var(--text, var(--primary-dark-300)) !important;
@@ -328,8 +320,8 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
   color: var(--interactive-hover) !important;
 }
 
-[class^="menu-"] [class^="item-"]:active,
-[class^="menu-"] [class^="item-"][class*="focused-"],
+[class*="menu-"] [class^="item-"]:active,
+[class*="menu-"] [class^="item-"][class*="focused-"],
 [class*="lookFilled-"][class*="colorBrand-"]:not([class*="buttonColor-"]),
 [class*="lookFilled-"][class*="colorBrandNew-"]:not([class*="buttonColor-"]),
 [style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch-"]),

modular/scheme/amora_focus.css

@@ -1,5 +1,5 @@
 .theme-dark {
-  --_color0: #28222d;
+  --_color0: #2d2d2d;
   --_color1: #e83f80;
   --_color2: #a2baa8;
   --_color3: #eacac0;
@@ -8,7 +8,7 @@
   --_color6: #aabae7;
   --_color7: #dedbeb;
 
-  --_color8: #302838;
+  --_color8: #383838;
   --_color9: #f55d8f;
   --_color10: #bfd1c3;
   --_color11: #f0ddd8;
@@ -43,6 +43,7 @@
   --status-streaming: var(--_color4);
 
   --titlebar-color: var(--accent);
+  --wc-bright: #383838;
 }
 
 #splash {

modular/scheme/source_engine_-_tools.css

@@ -40,7 +40,9 @@
   --status-offline: var(--tertiary);
   --status-streaming: var(--_color5);
 
-  --status-danger: var(--red);
+  --status-danger: var(--red) !important;
+  --interactive-active: var(--white-500) !important;
+  --interactive-hover: var(--white-500) !important;
 }
 
 #splash {

modular/scheme/valve.css

@@ -40,7 +40,14 @@
   --status-offline: var(--tertiary);
   --status-streaming: var(--_color5);
 
-  --status-danger: var(--red);
+  --status-danger: var(--red) !important;
+  --interactive-active: var(--white-500) !important;
+  --interactive-hover: var(--white-500) !important;
+
+  --titlebar-active: var(--primary);
+  --titlebar-inactive: var(--primary);
+  --titlebar-border-active: var(--primary);
+  --titlebar-border-inactive: var(--primary);
 }
 
 #splash {

modular/stylings/windows_classic.css

@@ -0,0 +1,323 @@
+.theme-dark {
+  --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 0px 0 0 var(--wc-bright, var(--highlight)),
+    0px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary),
+    1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary),
+    2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary),
+    -2px 2px 0 0 var(--tertiary);
+
+  --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary),
+    0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary),
+    1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary),
+    2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--wc-bright, var(--highlight)),
+    1px -2px 0 0 var(--wc-bright, var(--highlight)),
+    2px -2px 0 0 var(--tertiary),
+    -2px 1px 0 0 var(--wc-bright, var(--highlight)),
+    -2px 2px 0 0 var(--tertiary);
+
+  --wc-outer-edge-inset: inset -1px -1px 0 0 var(--tertiary),
+    inset -1px 0px 0 0 var(--tertiary), inset 0px -1px 0 0 var(--tertiary),
+    inset -1px 1px 0 0 var(--wc-bright, var(--highlight)),
+    inset 1px -1px 0 0 var(--wc-bright, var(--highlight)),
+    inset 1px 1px 0 0 var(--wc-bright, var(--highlight)),
+    inset 2px 2px 0 0 var(--primary), inset -2px -2px 0 0 var(--secondary),
+    inset 1px -2px 0 0 var(--secondary), inset 2px -2px 0 0 var(--primary),
+    inset -2px 1px 0 0 var(--secondary), inset -2px 2px 0 0 var(--primary);
+
+  --wc-inner-edge: -1px -1px 0 0 var(--tertiary), -1px 0px 0 0 var(--tertiary),
+    0px -1px 0 0 var(--tertiary), -1px 1px 0 0 var(--primary),
+    1px -1px 0 0 var(--primary), 1px 1px 0 0 var(--primary),
+    2px 2px 0 0 var(--wc-bright, var(--highlight)),
+    -2px -2px 0 0 var(--secondary), 1px -2px 0 0 var(--secondary),
+    2px -2px 0 0 var(--wc-bright, var(--highlight)),
+    -2px 1px 0 0 var(--secondary),
+    -2px 2px 0 0 var(--wc-bright, var(--highlight));
+
+  --wc-inner-edge-inset: inset -1px -1px 0 0 var(--wc-bright, var(--highlight)),
+    inset -1px 0px 0 0 var(--wc-bright, var(--highlight)),
+    inset 0px -1px 0 0 var(--wc-bright, var(--highlight)),
+    inset -1px 1px 0 0 var(--secondary), inset 1px -1px 0 0 var(--secondary),
+    inset 1px 1px 0 0 var(--secondary), inset 2px 2px 0 0 var(--tertiary),
+    inset -2px -2px 0 0 var(--primary), inset 1px -2px 0 0 var(--primary),
+    inset 2px -2px 0 0 var(--tertiary), inset -2px 1px 0 0 var(--primary),
+    inset -2px 2px 0 0 var(--tertiary);
+}
+.theme-light {
+  --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 0px 0 0 var(--wc-bright, var(--highlight)),
+    0px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary),
+    1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary),
+    2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary),
+    -2px 2px 0 0 var(--tertiary);
+
+  --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary),
+    0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary),
+    1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary),
+    2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--wc-bright, var(--highlight)),
+    1px -2px 0 0 var(--wc-bright, var(--highlight)),
+    2px -2px 0 0 var(--tertiary),
+    -2px 1px 0 0 var(--wc-bright, var(--highlight)),
+    -2px 2px 0 0 var(--tertiary);
+
+  --wc-outer-edge-inset: inset -1px -1px 0 0 var(--primary),
+    -1px 0px 0 0 var(--primary), 0px -1px 0 0 var(--primary),
+    -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary),
+    1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--wc-bright, var(--highlight)),
+    1px -2px 0 0 var(--wc-bright, var(--highlight)),
+    2px -2px 0 0 var(--tertiary),
+    -2px 1px 0 0 var(--wc-bright, var(--highlight)),
+    -2px 2px 0 0 var(--tertiary);
+
+  --wc-inner-edge: -1px -1px 0 0 var(--tertiary), -1px 0px 0 0 var(--tertiary),
+    0px -1px 0 0 var(--tertiary),
+    -1px 1px 0 0 var(--wc-bright, var(--highlight)),
+    1px -1px 0 0 var(--wc-bright, var(--highlight)),
+    1px 1px 0 0 var(--wc-bright, var(--highlight)), 2px 2px 0 0 var(--primary),
+    -2px -2px 0 0 var(--secondary), 1px -2px 0 0 var(--secondary),
+    2px -2px 0 0 var(--primary), -2px 1px 0 0 var(--secondary),
+    -2px 2px 0 0 var(--primary);
+}
+
+[class*="button-"][class*="lookFilled-"],
+section[class^="panels-"]
+  [class^="container-"]
+  [class^="flex-"]
+  button[class^="button-"],
+[class^="toolbar-"] [class*="iconWrapper-"] {
+  border-radius: 0;
+  box-shadow: var(--wc-outer-edge-inset) !important;
+}
+[class*="button-"][class*="lookFilled-"]:active,
+section[class^="panels-"]
+  [class^="container-"]
+  [class^="flex-"]
+  button[class^="button-"]:active {
+  box-shadow: var(--wc-inner-edge-inset) !important;
+}
+
+[class^="chat-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > [class^="membersWrap-"] {
+  margin: 2px;
+  box-shadow: var(--wc-inner-edge);
+  height: calc(100% - 4px);
+  max-height: calc(100% - 4px);
+}
+[class^="messagesWrapper-"],
+[class*="guilds-"],
+[class^="sidebar-"] > nav > [class^="scroller-"] {
+  margin: 2px;
+  box-shadow: var(--wc-inner-edge);
+}
+[class^="chat-"] > [class^="content-"] > [class^="container-"],
+[class^="chat-"] > [class^="content-"] > [class^="chatContent-"],
+[class^="standardSidebarView-"] > [class^="contentRegion-"] {
+  margin-left: 2px;
+}
+
+[class^="channelTextArea-"] > [class^="scrollableContainer-"],
+[class^="chat-"]
+  [class^="toolbar-"]
+  > [class^="search-"]
+  > [class^="search-"]
+  > [class^="searchBar-"] {
+  box-shadow: var(--wc-inner-edge-inset);
+  border-radius: 0;
+}
+
+[class^="chat-"] > [class^="content-"]:before {
+  display: none !important;
+}
+
+[class^="standardSidebarView-"]
+  > [class^="sidebarRegion-"]
+  > [class^="sidebarRegionScroller-"],
+[class^="standardSidebarView-"]
+  > [class^="contentRegion-"]
+  [class^="contentTransitionWrap-"] {
+  margin: 2px;
+  box-shadow: var(--wc-inner-edge);
+}
+[class^="standardSidebarView-"] > [class^="contentRegion-"],
+[class^="standardSidebarView-"] > [class^="sidebarRegion-"] {
+  margin-top: 2px;
+}
+[class^="standardSidebarView-"]
+  > [class^="contentRegion-"]
+  [class^="contentTransitionWrap-"] {
+  height: calc(100% - 4px);
+}
+
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="container-"][class*="clickable-"]
+  > [class^="animatedContainer-"] {
+  height: 48px;
+}
+
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="container-"][class*="clickable-"]
+  > [class^="animatedContainer-"]
+  > [class^="bannerImage-"] {
+  height: 48px;
+}
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="container-"][class*="clickable-"]
+  > [class^="animatedContainer-"]
+  > [class^="bannerImage-"]:after {
+  content: "";
+  height: 48px;
+  width: 240px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  background: linear-gradient(
+    0deg,
+    var(--background-secondary) 5%,
+    transparent 100%
+  );
+}
+
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="container-"][class*="clickable-"]
+  > [class^="animatedContainer-"]
+  [class^="bannerImg-"] {
+  top: -67px;
+  position: relative;
+}
+
+div[class^="sidebar-"]:not(:has(> [class^="side-"]))
+  > nav[class^="container-"]
+  > [class^="scroller-"]
+  > ul
+  > div[style="height: 84px;"] {
+  height: 0 !important;
+}
+
+[class*="menu-"] {
+  border-radius: 0;
+  margin: 2px;
+  box-shadow: var(--wc-frame);
+}
+[class*="menu-"] > [class^="scroller-"] {
+  padding: 2px !important;
+}
+[class*="menu-"] > [class^="scroller-"] [class^="item-"] {
+  border-radius: 0 !important;
+  margin: 2px 0;
+}
+[class*="menu-"]
+  > [class^="scroller-"]
+  [class^="customItem-"][id^="message-quickreact-"]
+  > [class^="button-"] {
+  border-radius: 0 !important;
+  box-shadow: var(--wc-outer-edge-inset);
+}
+
+[class^="scroller-"]:not([class*="none-"]):not([class*="thin-"]):not(
+    :not(:hover)[class*="fade-"]
+  )::-webkit-scrollbar,
+[class*="scrollerBase-"]:not([class*="none-"]):not([class*="thin-"]):not(
+    :not(:hover)[class*="fade-"]
+  )::-webkit-scrollbar {
+  min-width: 16px;
+  width: 16px;
+}
+
+[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-track,
+[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-track {
+  background-color: var(--wc-bright, var(--highlight));
+  border: none;
+  border-radius: 0;
+  margin: 0;
+}
+[class^="scroller-"]::-webkit-scrollbar-thumb,
+[class*="scrollerBase-"]::-webkit-scrollbar-thumb,
+[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-button,
+[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-button {
+  border-radius: 0;
+  background: var(--primary);
+  box-shadow: var(--wc-outer-edge-inset);
+  border: none;
+}
+
+[class^="scroller-"][class*="fade-"]:not(
+    [class*="thin-"]
+  )::-webkit-scrollbar-button,
+[class*="scrollerBase-"][class*="fade-"]:not(
+    [class*="thin-"]
+  )::-webkit-scrollbar-button {
+  visibility: hidden;
+}
+[class^="scroller-"][class*="fade-"]:not(
+    [class*="thin-"]
+  ):hover::-webkit-scrollbar-button,
+[class*="scrollerBase-"][class*="fade-"]:not(
+    [class*="thin-"]
+  ):hover::-webkit-scrollbar-button {
+  visibility: visible;
+}
+
+[class^="scroller-"]::-webkit-scrollbar-button:active,
+[class*="scrollerBase-"]::-webkit-scrollbar-button:active {
+  box-shadow: var(--wc-inner-edge-inset);
+}
+
+.postnet-expanded-category,
+.postnet-repo-wrapper,
+[class^="inner-"]:has(> input),
+[class^="inputWrapper-"] > [class*="input-"],
+[class^="colorSwatch-"] > [class^="swatch-"][aria-expanded="true"] {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: var(--wc-inner-edge-inset);
+}
+[class^="colorSwatch-"] > [class^="swatch-"] {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: var(--wc-outer-edge-inset);
+}
+
+[class^="inputWrapper-"] > [class*="input-"] {
+  padding: 2px 2px 2px 4px;
+  height: 22px;
+}
+
+[class^="select-"][class*="lookFilled-"] {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: var(--wc-inner-edge-inset);
+  padding: 2px 2px 2px 4px;
+}
+[class^="select-"][class*="lookFilled-"] > [class^="icons-"] {
+  margin: 2px;
+}
+[class^="select-"][class*="lookFilled-"] > [class^="icons-"] > svg {
+  background: var(--primary);
+  box-shadow: var(--wc-outer-edge-inset);
+  width: 16px;
+  height: 16px;
+}
+[class^="select-"][class*="lookFilled-"][class*="open-"]
+  > [class^="icons-"]
+  > svg {
+  box-shadow: var(--wc-inner-edge-inset);
+}
+[class^="popout-"][role="listbox"] > [class^="option-"] {
+  padding: 2px 2px 2px 4px;
+  margin: 2px 0;
+}
+[class^="popout-"][role="listbox"] > [class^="option-"]:hover {
+  background-color: var(--accent);
+}

modular/stylings/xmc.css

@@ -1,4 +1,6 @@
-:root {
+:root,
+.theme-dark,
+.theme-light {
   --_font-titlebars: "Segoe UI", sans-serif;
 }
 
@@ -59,7 +61,7 @@ section[class^="panels-"]
   [class^="container-"]
   [class^="flex-"]
   button[class^="button-"],
-[class^="toolbar-"] [class^="iconWrapper-"] {
+[class^="toolbar-"] [class*="iconWrapper-"] {
   border-radius: 0;
   color: var(--text) !important;
   background: var(--button-bg) !important;
@@ -103,13 +105,13 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover,
   border-radius: 0;
 }
 
-[class^="toolbar-"] [class^="iconWrapper-"] {
+[class^="toolbar-"] [class*="iconWrapper-"] {
   margin: 0;
   width: 32px;
   height: 32px;
 }
 
-[class^="toolbar-"] [class^="iconWrapper-"] > svg {
+[class^="toolbar-"] [class*="iconWrapper-"] > svg {
   margin: 4px;
 }
 

modular/textarea/fullwidth.css

@@ -102,3 +102,6 @@ form [class*="typing-"] {
   [class*="emojiButton-"] {
   max-height: unset;
 }
+[class^="messagesWrapper-"] {
+  margin-bottom: 8px;
+}

modular/titlebar_icon/msn_messenger_1.0.css

@@ -0,0 +1,3 @@
+:root {
+  --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACYSURBVDhPpZABDsAgCAN5uk/zZ45OahAnmqxJowi9OWVRKW2yyHDpdSILQQxTtVYCNpAQxnBUDtEGBgZEh1B7HQH+BnoyAbA/AjAwVgN4I7wHQGiaCWHoHKYwRHcxdBH+Lf91dbx+/gtoqiEf9uJD6nSA4FD9PpwFY5j6hrgwB3ZaASjMbGYAaIa4MFYCUGdeAMP9apeW9gDxfcZs7l81ZQAAAABJRU5ErkJggg==");
+}

modular/titlebars/windows_classic.css

@@ -0,0 +1,254 @@
+.theme-dark {
+  --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 0px 0 0 var(--wc-bright, var(--highlight)),
+    0px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary),
+    1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary),
+    2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary),
+    -2px 2px 0 0 var(--tertiary);
+
+  --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary),
+    0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary),
+    1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary),
+    2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--wc-bright, var(--highlight)),
+    1px -2px 0 0 var(--wc-bright, var(--highlight)),
+    2px -2px 0 0 var(--tertiary),
+    -2px 1px 0 0 var(--wc-bright, var(--highlight)),
+    -2px 2px 0 0 var(--tertiary);
+}
+.theme-light {
+  --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 0px 0 0 var(--wc-bright, var(--highlight)),
+    0px -1px 0 0 var(--wc-bright, var(--highlight)),
+    -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary),
+    1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary),
+    2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary),
+    -2px 2px 0 0 var(--tertiary);
+
+  --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary),
+    0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary),
+    1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary),
+    2px 2px 0 0 var(--tertiary),
+    -2px -2px 0 0 var(--wc-bright, var(--highlight)),
+    1px -2px 0 0 var(--wc-bright, var(--highlight)),
+    2px -2px 0 0 var(--tertiary),
+    -2px 1px 0 0 var(--wc-bright, var(--highlight)),
+    -2px 2px 0 0 var(--tertiary);
+}
+
+.platform-win #app-mount {
+  margin: 2px;
+  box-shadow: var(--wc-frame);
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+  border: 1px solid var(--titlebar-border-inactive, var(--secondary));
+}
+.platform-win.app-focused #app-mount {
+  border-color: var(--titlebar-border-active, var(--primary)) !important;
+}
+
+[class^="typeWindows-"] {
+  height: 18px !important;
+  margin-top: 0;
+  background: var(--titlebar-inactive, var(--secondary));
+  border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary));
+}
+.app-focused [class^="typeWindows-"] {
+  background: var(
+    --titlebar-active,
+    var(--titlebar-color, var(--accent))
+  ) !important;
+  border-color: var(--titlebar-border-active, var(--primary)) !important;
+}
+
+[class^="winButtonClose-"] > svg,
+[class^="winButtonMinMax-"] > svg,
+[class^="wordmarkWindows-"] > svg {
+  display: none;
+}
+
+[class^="wordmarkWindows-"] {
+  width: 16px !important;
+  height: 16px !important;
+  top: 1px !important;
+  left: 2px !important;
+  padding: 0 !important;
+  background-image: var(--titlebar-icon);
+  background-repeat: no-repeat;
+}
+[class^="wordmarkWindows-"]::after {
+  font-family: var(--_font-titlebars) !important;
+  font-size: 12px !important;
+  color: var(--wc-bright, var(--highlight)) !important;
+  font-weight: bold !important;
+  content: "Discord";
+  position: absolute;
+  top: 2px;
+  left: 18px;
+  height: 17px;
+  opacity: 1;
+}
+.app-focused [class^="wordmarkWindows-"]::after {
+  color: var(--text) !important;
+}
+
+[class*="winButton-"] {
+  top: 2px;
+  width: 12px !important;
+  height: 10px !important;
+  margin: 2px;
+  background: var(--primary) !important;
+  box-shadow: var(--wc-outer-edge);
+}
+
+[class^="winButtonClose-"] {
+  right: 2px;
+}
+[class^="winButtonMinMax-"]:nth-child(3),
+[class^="winButtonMinMax-"]:nth-child(4) {
+  right: 4px;
+}
+
+[class*="winButton-"]::before {
+  width: 12px !important;
+  height: 10px !important;
+  background-color: var(--text);
+  content: "";
+}
+[class^="winButtonClose-"]::before {
+  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+}
+[class^="winButtonMinMax-"]:nth-child(3)::before {
+  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+}
+[class^="winButtonMinMax-"]:nth-child(4)::before {
+  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+}
+
+[class*="recentMentionsPopout-"],
+[class^="messagesPopoutWrap-"],
+[class^="browser-"] {
+  border-radius: 0;
+  margin: 2px;
+  box-shadow: var(--wc-frame);
+  border: 1px solid var(--titlebar-border-active, var(--primary));
+}
+
+[class*="recentMentionsPopout-"] > [class^="header-"] {
+  padding: 0 4px;
+  font-family: var(--_font-titlebars) !important;
+  font-size: 12px !important;
+  color: var(--text) !important;
+  font-weight: bold !important;
+  height: 18px !important;
+  min-height: 18px !important;
+  border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary));
+  background: var(
+    --titlebar-active,
+    var(--titlebar-color, var(--accent))
+  ) !important;
+}
+[class*="recentMentionsPopout-"]
+  > [class^="header-"]
+  > [class^="controls-"]
+  > [class^="button-"] {
+  padding: 0;
+  border-radius: 0;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  background-color: transparent;
+}
+[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] {
+  margin-top: 0 !important;
+  padding: 0px 2px;
+  height: 16px;
+  border-radius: 0;
+  font-size: 12px;
+}
+
+[class^="messagesPopoutWrap-"] > [class^="header-"] {
+  padding: 0;
+}
+[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 {
+  padding: 0 4px;
+  font-family: var(--_font-titlebars) !important;
+  font-size: 12px !important;
+  color: var(--text) !important;
+  font-weight: bold !important;
+  height: 18px !important;
+  border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary));
+  background: var(
+    --titlebar-active,
+    var(--titlebar-color, var(--accent))
+  ) !important;
+}
+
+[class^="browser-"] > [class^="header-"] {
+  padding: 0 4px;
+  font-family: var(--_font-titlebars) !important;
+  font-size: 12px !important;
+  color: var(--text) !important;
+  font-weight: bold !important;
+  height: 18px !important;
+  min-height: 18px !important;
+  border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary));
+  background: var(
+    --titlebar-active,
+    var(--titlebar-color, var(--accent))
+  ) !important;
+}
+[class^="browser-"] > [class^="header-"] > h1 {
+  font-family: var(--_font-titlebars) !important;
+  font-size: 12px !important;
+  color: var(--text) !important;
+  font-weight: bold !important;
+}
+[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] {
+  width: 16px;
+  height: 16px;
+}
+[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] {
+  margin-right: 2px;
+}
+[class^="browser-"] > [class^="header-"] > h1,
+[class^="browser-"] > [class^="header-"] > [class^="divider-"],
+[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] {
+  margin-right: 0;
+}
+
+[class^="browser-"] > [class^="header-"] > [class^="divider-"] {
+  flex-grow: 1;
+  background-color: transparent;
+}
+[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg {
+  display: none;
+}
+[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] {
+  width: 12px !important;
+  min-width: 12px !important;
+  height: 10px !important;
+  min-height: 10px !important;
+  margin: 2px;
+  top: 0px;
+  right: -2px;
+  position: relative;
+  background: var(--primary) !important;
+  box-shadow: var(--wc-outer-edge);
+}
+[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"]::before {
+  width: 12px !important;
+  height: 10px !important;
+  background-color: var(--text);
+  content: "";
+  position: absolute;
+  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+}

modular/titlebars/xmc.css

@@ -1,40 +1,12 @@
-[class^="userPopout-"] [class^="headerContainer-"],
-[class^="userPopout-"] [class^="bodyTitle-"],
-[class^="userPopout-"] [class^="userInfoTitle-"] {
-  padding: unset !important;
-}
-
-[class^="userPopout-"]
-  [class^="activityUserPopout-"]
-  [class*="headerTextNormal-"],
-[class^="userPopout-"] [class*="bodyTitle-"],
-[class^="userPopout-"] [class*="aboutMeTitle-"],
-[class^="userPopout-"] [class*="userInfoTitle-"] {
-  color: var(--text) !important;
-  padding: 0 10px !important;
-  background-color: var(--titlebar-color);
-  box-shadow: var(--titlebar-shadow);
-  margin-bottom: 0;
-  width: 100%;
-  height: 28px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  font-weight: 100;
-  font-family: var(--_font-titlebars) !important;
-  font-size: 12px !important;
-  text-transform: none;
-}
-
 [class*="recentMentionsPopout-"],
 [class^="messagesPopoutWrap-"],
-[class*="root-"][class*="popout-"] {
+[class^="browser-"] {
   border-radius: 0;
 }
 
 [class*="recentMentionsPopout-"] > [class^="header-"] {
   color: var(--text) !important;
-  padding: 0 10px;
+  padding: 0 4px;
   background-color: var(--titlebar-color);
   box-shadow: var(--titlebar-shadow);
   margin-bottom: 0;
@@ -48,10 +20,9 @@
   font-size: 12px !important;
   text-transform: none;
 }
-
 [class*="recentMentionsPopout-"]
   > [class^="header-"]
-  > div
+  > [class^="controls-"]
   > [class^="button-"] {
   padding: 0;
   border-radius: 0;
@@ -61,18 +32,20 @@
   min-height: 16px;
   background-color: transparent;
 }
+[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] {
+  margin-top: 0 !important;
+}
 
 [class^="messagesPopoutWrap-"] > [class^="header-"] {
   padding: 0;
 }
-
-[class^="messagesPopoutWrap-"] > [class^="header-"] > [class^="wrapper-"] {
+[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 {
   color: var(--text) !important;
   padding: 0 10px;
   background-color: var(--titlebar-color);
   box-shadow: var(--titlebar-shadow);
   margin-bottom: 0;
-  height: 28px;
+  height: 28px !important;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -82,6 +55,47 @@
   text-transform: none;
 }
 
+[class^="browser-"] > [class^="header-"] {
+  color: var(--text) !important;
+  padding: 0 4px;
+  background-color: var(--titlebar-color);
+  box-shadow: var(--titlebar-shadow);
+  margin-bottom: 0;
+  height: 28px;
+  min-height: 28px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  font-weight: 100;
+  font-family: var(--_font-titlebars) !important;
+  font-size: 12px !important;
+  text-transform: none;
+}
+[class^="browser-"] > [class^="header-"] > h1 {
+  font-weight: 100;
+  font-family: var(--_font-titlebars) !important;
+  font-size: 12px !important;
+  text-transform: none;
+}
+[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"],
+[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg {
+  width: 16px;
+  height: 16px;
+}
+[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] {
+  margin-right: 2px;
+}
+[class^="browser-"] > [class^="header-"] > h1,
+[class^="browser-"] > [class^="header-"] > [class^="divider-"],
+[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] {
+  margin-right: 0;
+}
+
+[class^="browser-"] > [class^="header-"] > [class^="divider-"] {
+  flex-grow: 1;
+  background-color: transparent;
+}
+
 .platform-win [class*="baseLayer-"] {
   top: -32px;
   padding-top: 32px;