Make Modular

2024-08-14 22:57:03 +00:00 · 2023-03-18 04:34:32 +00:00 · 2023-03-18 04:34:32 +00:00 · 82ed312dfb
commit 82ed312dfb
parent 8383a37f9a
23 changed files with 747 additions and 78 deletions
--- a/modular/titlebars/old_discord.css
+++ b/modular/titlebars/old_discord.css
@ -0,0 +1,93 @@
+[class*="wordmark-"] {
+  display: none !important;
+}
+[class*="titleBar-"] {
+  margin-top: 0;
+}
+[class*="typeWindows-"] {
+  height: 0px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+[class*="winButton-"] {
+  margin-top: 19px;
+  margin-right: 5px;
+  opacity: 0.3;
+}
+[class*="winButton-"]:hover {
+  opacity: 1;
+}
+
+.platform-win [class*="headerBar-"],
+.platform-win [class^="chat-"] > [class^="title-"],
+.platform-win [class*="activityFeed-"] > [class*="container-"],
+.platform-win [class^="libraryHeader-"],
+.platform-win
+  [class*="spacer-"]
+  > [class*="container-"]
+  > [class*="container-"],
+.platform-win
+  [class^="base-"]
+  > [class^="content-"]
+  > [class^="container-"]
+  > [class^="container-"],
+.platform-win [class^="videoControls-"] [class^="headerWrapper-"] {
+  padding-right: 104px !important;
+}
+
+.platform-win [class^="topControls-"] {
+  top: -4px;
+  position: relative;
+}
+
+[class*="winButtonClose-"],
+[class*="winButtonMinMax-"] {
+  width: 24px !important;
+  height: 24px !important;
+  margin-left: 0 !important;
+  opacity: 1 !important;
+  margin-top: 13px !important;
+  margin-left: 4px !important;
+  background-color: var(--interactive-normal) !important;
+}
+
+[class*="winButtonClose-"] {
+  margin-right: 12px;
+}
+
+[class*="winButtonClose-"] svg,
+[class*="winButtonMinMax-"] svg {
+  display: none;
+}
+[class*="winButtonClose-"] {
+  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==")
+    no-repeat;
+  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==")
+    no-repeat;
+  background-image: none !important;
+}
+[class*="winButtonMinMax-"]:nth-child(3) {
+  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=")
+    no-repeat;
+  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=")
+    no-repeat;
+  background-image: none !important;
+}
+[class*="winButtonMinMax-"]:nth-child(4) {
+  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+")
+    no-repeat;
+  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+")
+    no-repeat;
+  background-image: none !important;
+}
+[class*="winButtonClose-"]:hover,
+[class*="winButtonMinMax-"]:hover {
+  background-color: var(--interactive-hover) !important;
+}
+
+[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"],
+html.platform-win:not(.app-focused) [class*="winButton-"] {
+  opacity: 1 !important;
+}
--- a/modular/titlebars/windows_classic.css
+++ b/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==");
+}
--- a/modular/titlebars/xmc.css
+++ b/modular/titlebars/xmc.css
@ -0,0 +1,309 @@
+[class*="recentMentionsPopout-"],
+[class^="messagesPopoutWrap-"],
+[class^="browser-"] {
+  border-radius: 0;
+}
+
+[class*="recentMentionsPopout-"] > [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*="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;
+}
+
+[class^="messagesPopoutWrap-"] > [class^="header-"] {
+  padding: 0;
+}
+[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 !important;
+  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-"] {
+  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;
+}
+.platform-win [class^="app-"] > [class^="app-"] > [class^="bg-"] {
+  top: -32px;
+}
+
+[class^="typeWindows-"] {
+  margin: 3px;
+  padding: 6px;
+  height: 10px !important;
+  background: var(--titlebar-color);
+  box-shadow: var(--titlebar-shadow);
+}
+
+[class^="typeMacOS-"] {
+  background-color: var(--background-tertiary);
+  height: 32px !important;
+}
+
+[class^="macButtons-"] {
+  padding: 8px !important;
+}
+
+[class*="winButton-"] {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII=");
+  background-size: 42px;
+  background-repeat: no-repeat;
+  background-color: transparent !important;
+  width: 14px !important;
+  height: 14px !important;
+  top: -2px !important;
+  position: relative !important;
+  margin-left: 30px;
+}
+
+[class*="macButton-"] {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII=");
+  background-size: 42px;
+  background-repeat: no-repeat;
+  background-color: transparent !important;
+  width: 14px !important;
+  height: 14px !important;
+  border-radius: 0;
+}
+
+[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"],
+html.platform-win:not(.app-focused) [class*="winButton-"] {
+  opacity: 0.4;
+}
+
+[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"]:hover,
+html.platform-win:not(.app-focused) [class*="winButton-"]:hover {
+  opacity: 1;
+}
+
+[class*="macButton-"] > svg,
+[class*="winButton-"] > svg,
+[class^="wordmarkWindows-"] > svg {
+  display: none;
+}
+
+[class*="winButtonClose-"] {
+  margin-right: 3px;
+}
+
+[class*="macButtonClose-"],
+[class*="winButtonClose-"] {
+  background-position: 0px 0px;
+}
+[class*="macButtonClose-"]:hover,
+[class*="winButtonClose-"]:hover {
+  background-position: 0px -14px;
+}
+[class*="macButtonClose-"]:active,
+[class*="winButtonClose-"]:active {
+  background-position: 0px -28px;
+}
+
+[class*="macButtonMaximize-"],
+[class*="winButtonMinMax-"]:nth-child(3) {
+  background-position: -14px 0px;
+}
+[class*="macButtonMaximize-"]:hover,
+[class*="winButtonMinMax-"]:nth-child(3):hover {
+  background-position: -14px -14px;
+}
+[class*="macButtonMaximize-"]:active,
+[class*="winButtonMinMax-"]:nth-child(3):active {
+  background-position: -14px -28px;
+}
+
+[class*="macButtonMinimize-"],
+[class*="winButtonMinMax-"]:nth-child(4) {
+  background-position: -28px 0px;
+}
+[class*="macButtonMinimize-"]:hover,
+[class*="winButtonMinMax-"]:nth-child(4):hover {
+  background-position: -28px -14px;
+}
+[class*="macButtonMinimize-"]:active,
+[class*="winButtonMinMax-"]:nth-child(4):active {
+  background-position: -28px -28px;
+}
+
+[class^="wordmarkWindows-"] {
+  width: 16px !important;
+  height: 16px !important;
+  top: 6px !important;
+  left: 7px !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;
+  line-height: 250% !important;
+  color: var(--text) !important;
+  font-weight: 0 !important;
+  content: "Discord";
+  position: absolute;
+  top: -7px;
+  left: 21px;
+  height: 17px;
+  opacity: 1;
+}
+
+html.platform-win:not(.app-focused) [class^="wordmarkWindows-"]::after,
+html:not(.platform-win)
+  #app-mount
+  > div:not(.app-focused)
+  [class^="wordmarkWindows-"]::after {
+  opacity: 0.4;
+}
+
+[class^="focusLock-"][aria-modal="true"]
+  > [class*="root-"]
+  > [class^="body-"]
+  > [class^="infoScroller-"]
+  > [class^="userInfoSection-"]
+  > [class*="userInfoSectionHeader-"] {
+  color: var(--text) !important;
+  padding: 0 10px;
+  background-color: var(--titlebar-color);
+  box-shadow: var(--titlebar-shadow);
+  margin-bottom: 0;
+  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^="focusLock-"][aria-modal="true"]
+  > [class*="root-"]
+  > [class^="body-"]
+  > [class^="infoScroller-"]
+  > [class^="connectedAccounts-"]::before {
+  color: var(--text) !important;
+  padding: 0 10px;
+  background-color: var(--titlebar-color);
+  box-shadow: var(--titlebar-shadow);
+  margin-bottom: 0;
+  height: 28px;
+  width: 100%;
+  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;
+  content: "Connected Accounts";
+  position: absolute;
+}
+
+[class^="focusLock-"][aria-modal="true"]
+  > [class*="root-"]
+  > [class^="body-"]
+  > [class^="infoScroller-"]
+  > [class^="connectedAccounts-"]
+  > [class^="connectedAccountsColumn-"] {
+  margin-top: 28px;
+}
+
+[class^="focusLock-"][aria-modal="true"]
+  > [class*="root-"]
+  > [class^="body-"]
+  > [class^="listScroller-"]
+  > [class^="activityProfile-"]
+  [class*="headerTextNormal-"] {
+  color: var(--text) !important;
+  padding: 0 10px;
+  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;
+}