initial commit

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Cynthia Foxwell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# pxvmc
+
+Combination of things I want from xmc and Pixelvision, and maybe some new things

pxvmc.scss

@@ -0,0 +1,15 @@
+@use "src/color_overrides";
+@use "src/font";
+@use "src/italics";
+@use "src/account_details";
+@use "src/cozy_compact";
+@use "src/textbox";
+@use "src/avatars";
+@use "src/channel_list";
+@use "src/compact";
+@use "src/member_list";
+@use "src/context_menu";
+@use "src/voice_rings";
+@use "src/wide_settings";
+@use "src/private_channels";
+@use "src/embeds";

src/_colors.scss

@@ -0,0 +1,23 @@
+$c0: #2d2d2d;
+$c1: #e83f80;
+$c2: #a2baa8;
+$c3: #eacac0;
+$c4: #9985d1;
+$c5: #e68ac1;
+$c6: #aabae7;
+$c7: #dedbeb;
+
+$c8: #383838;
+$c9: #f55d8f;
+$c10: #bfd1c3;
+$c11: #f0ddd8;
+$c12: #b4a4de;
+$c13: #edabd2;
+$c14: #c4d1f5;
+$c15: #edebf7;
+
+$primary: #1a1a1a;
+$secondary: #171717;
+$tertiary: #141414;
+$accent: #634e75;
+$highlight: #5c5c5c;

src/_images.scss

@@ -0,0 +1,6 @@
+$CategoryArrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAESSURBVFhH7ZVhCsMwCEZ7gh5gvUmPust2T1FJmqRdoJD+yANp/ETzETZchOM4VmLriFUbDfIPsXfEx1rj8mzgHWmPDJPQwp9kPRw2PXTifXx3FTqJvmmgZQD9K2FpgffFoBPoiqUFlO5fgFrThPfFoArUFEszkO8NCNSrJrwvBjWgrlgaIL38BdDH/wau8L4Y1Mk0kBoYuwsEGUbUtl4rntuGrwBH416AZOxvgMP8G04DmQHyYgk1tKoBcsVSxaSz1n4BtLgwPad4H9/iBdCU8zkFqW1AQNeLJUzK8D6+hQEBPTApA/nagECterngfTGoArXq5UL0+aBevC8GdTINpAbG7gJBhhG1rdeK57bhWJblB+ztZShDaI9sAAAAAElFTkSuQmCC");
+$ButtonAdd: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACWSURBVEhL7ZXdCcAgDISdwAF0E0d1WXuRGGr9qYGCffCDo2nCpUdfYoiUkoW8QjYbGbw7KCjk2Cofrxa+cffQMlIeLFJ5UPhcKCk+PENuKBHfCTALgFnksmElAGaJywbxlUU9MNsTAL34FI8E9IYB0GvgkYDWj/9AAbO9AWYUnyxScgLcA+y9BQQtg3pXb6TvruFejLkAPByjZ8PYV1wAAAAASUVORK5CYII=");
+
+$MenuArrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVBhXY4CC/1AaKwBJ4lQAk8SqAFkSQwFOCRDAKQECWCQYGACCnQ/xc1GbJAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+$MenuCheck: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVBhXY8AD/kNpDACSAEuiq4BJwCVhClAkQABZAEUCBnBKwACaBAMDANZXFOzc7AnWAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+$MenuRadio: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAiSURBVBhXY4CC/2gYDNAFYRirIAhjFQRhrIIgDAZoggwMACftH+F43ykVAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");

src/account_details.scss

@@ -0,0 +1,8 @@
+section[class^="panels-"]
+  > [class^="container-"]:last-child
+  [class*="nameTag-"] {
+  & > [class^="panelTitleContainer-"],
+  & > [class^="panelSubtextContainer-"] [class^="hovered-"] {
+    visibility: hidden;
+  }
+}

src/avatars.scss

@@ -0,0 +1,174 @@
+@use "colors";
+
+[class*="avatar-"],
+[class*="avatar-"] [class*="image-"],
+[class*="callAvatar-"],
+[class*="callAvatar-"] [class*="speaking-"],
+[class*="avatarDefault-"],
+[class*="avatarSpeaking-"],
+[class*="avatar-"] [class*="inner-"],
+[class*="callAvatarVoice-"],
+[class*="callAvatarWrapper-"] [class*="speaking-"],
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  [class^="message-"]
+  [class*="header-"]
+  [class*="avatar-"]
+  [class*="large-"],
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  [class^="message-"]
+  [class*="header-"]
+  [class*="avatar-"]
+  [class*="wrapper-"],
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  [class^="message-"]
+  [class*="contents-"]
+  [class*="avatar-"],
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  [class^="wrapper-"]
+  [class*="contents-"]
+  [class*="avatar-"],
+[class^="messageGroupCozy-"] [class*="contents-"] [class*="avatar-"],
+[class*="autocomplete-"]
+  [class*="autocompleteInner-"]
+  [class*="autocompleteRow-"]
+  [class*="content-"]
+  [class*="wrapper-"],
+[class*="guildsWrapper-"]
+  [class*="guilds-"]
+  [class*="guild-"]
+  [class*="guildInner-"],
+div[class^="listItem-"] foreignObject img,
+div[class^="listItem-"] foreignObject a[class^="button-"],
+div[class^="listItem-"] foreignObject [class^="childWrapper-"],
+div[class^="listItem-"] foreignObject [class^="folder-"],
+div[class^="listItem-"] div[class^="wrapperSimple-"],
+[class^="circleIconButton-"],
+[class^="folderIconWrapper-"],
+[class^="avatarContainer-"],
+[class^="executedCommandAvatar-"],
+[class^="folderIconWrapper-"]
+  > [class^="closedFolderIconWrapper-"]
+  > [class^="icon-"],
+[class^="embedAuthorIcon-"] {
+  border-radius: 0% !important;
+}
+
+[class*="avatarMasked-"],
+[class*="maskProfile-"],
+[class*="mask-"],
+[class*="avatar-"] svg[class*="mask-"] > foreignObject,
+[class*="avatarWrapper-"] svg[class*="mask-"] > foreignObject,
+[class*="avatarHint-"] > foreignObject,
+[class*="wrapper-"] svg[class*="mask-"] > foreignObject,
+[class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject,
+div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject,
+[class^="bannerSVGWrapper-"] > foreignObject,
+[class^="avatarDecoration-"] > foreignObject,
+[class^="avatarDecorationHint-"] > foreignObject,
+[class^="viewers-"] > [class*="viewer-"] {
+  mask: none !important;
+  mask-image: none !important;
+  -webkit-mask-image: none !important;
+}
+
+[class*="avatarHint-"],
+[class*="avatarNormal-"],
+[class*="avatarWrapper-"] [class*="wrapper-"],
+[class*="avatarWrapper-"] [class*="image-"],
+[class*="replyAvatar-"] {
+  border: none;
+  border-radius: 0 !important;
+}
+
+[class^="userPopout-"] [class*="avatarWrapper-"] > [class^="avatarHint-"] {
+  display: none;
+}
+
+[class^="userPopout-"]
+  [class*="avatarWrapper-"]
+  > [class^="avatar-"]
+  > svg
+  > foreignObject {
+  x: 8px;
+}
+
+[class^="userPopout-"]
+  [class*="avatarWrapper-"]
+  > [class^="avatar-"]
+  > svg
+  > rect {
+  x: 0;
+  y: 0;
+  width: 8px;
+  height: 100%;
+  mask: none !important;
+}
+
+[class^="accountProfileCard-"] [class^="avatar-"] {
+  border: 0;
+  background-color: transparent;
+}
+
+[class^="avatar-"] > [class^="wrapper-"],
+[class^="avatarHoverTarget-"] > [class^="wrapper-"],
+[class^="wrapper-"][class*="avatar-"],
+[class^="wrapper"][class*="Avatar-"] {
+  --status-color: #{colors.$c0};
+
+  &:not(:has([mask="url(#svg-mask-avatar-default)"]))::after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 0% !important;
+
+    box-shadow: inset 0 0 0 1px var(--status-color),
+      inset 0 0 0 2px #{colors.$tertiary}, inset 0 0 2px 3px #{colors.$primary};
+  }
+  & > svg {
+    border-radius: 0% !important;
+
+    & > rect,
+    & > circle,
+    & > svg[class^="cursorDefault-"] {
+      display: none;
+    }
+
+    &[class^="avatarDecoration-"] {
+      z-index: 10;
+      border-radius: 0 !important;
+
+      [class^="avatar-"] {
+        border-radius: 0 !important;
+      }
+    }
+  }
+
+  &:has(rect[fill="#23a55a"]) {
+    --status-color: #{colors.$c2};
+  }
+  &:has(rect[fill="#f0b232"]) {
+    --status-color: #{colors.$c3};
+  }
+  &:has(rect[fill="#f23f43"]) {
+    --status-color: #{colors.$c5};
+  }
+}
+
+.platform-icons-wrapper > svg path {
+  &[fill="var(--green-360, var(--status-green-600))"] {
+    fill: #{colors.$c2} !important;
+  }
+  &[fill="var(--yellow-300, var(--status-yellow-500))"] {
+    fill: #{colors.$c3} !important;
+  }
+  &[fill="var(--red-400, var(--status-red-500))"] {
+    fill: #{colors.$c5} !important;
+  }
+}

src/channel_list.scss

@@ -0,0 +1,331 @@
+@use "colors";
+@use "images";
+
+[class^="base-"] > [class^="content-"] > [class^="sidebar-"] {
+  border-radius: 0;
+}
+
+[class^="base-"]
+  > [class^="content-"]
+  > [class^="sidebar-"]
+  > [class^="container-"]
+  > [class^="scroller-"]
+  > [class^="content-"] {
+  & > div[style="height: 84px;"],
+  & > div[style="height: 84px;"] + div[style="height: 12px;"],
+  & > div[style="height: 0px;"] + div[style="height: 12px;"],
+  & > [class^="sectionDivider"] + div[style="height: 12px;"] {
+    height: 0px !important;
+  }
+
+  & > [class*="containerWithMargin-"] {
+    margin-bottom: 4px;
+    padding: 0;
+
+    & > [class^="textArea-"] {
+      margin-right: 0;
+    }
+
+    &::after {
+      left: 2px;
+      border-color: colors.$highlight;
+    }
+  }
+
+  [class^="sectionDivider-"] {
+    margin: 4px 2px !important;
+    //background-color: colors.$Divider !important;
+  }
+
+  [class^="spineBorder-"] {
+    display: none;
+  }
+
+  [class^="containerDefault-"] {
+    margin-left: 0;
+    padding: 0;
+
+    [class^="spine-"] {
+      display: none;
+    }
+
+    [class^="iconVisibility-"] {
+      margin-left: 0;
+      padding: 0;
+
+      [class^="link-"] {
+        border-radius: 0;
+        padding: 2px 4px;
+        --channel-icon: var(--text-muted);
+
+        [class^="icon-"] {
+          width: 16px;
+          height: 16px;
+        }
+
+        [class^="iconContainer-"] {
+          margin-right: 3px;
+        }
+
+        [class^="name-"] {
+          font-size: 12px;
+          color: var(--text-muted);
+          line-height: 16px;
+          font-weight: normal;
+        }
+
+        [class^="channelInfo-"] {
+          & > [class^="wrapper-"] {
+            border-radius: 0;
+            line-height: 16px;
+            height: 16px;
+
+            & > [class^="users-"] {
+              background-color: transparent;
+              color: var(--text-normal);
+              padding-right: 6px;
+              width: unset;
+            }
+            & > [class^="total-"] {
+              background-color: transparent;
+              color: var(--text-muted);
+              padding: 0;
+
+              &::after {
+                content: "/";
+                border: none;
+                left: -4px;
+              }
+            }
+          }
+        }
+
+        .channel-typing-indicator {
+          padding: 0 !important;
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &[class*="modeSelected-"] {
+        [class^="link-"] {
+          background-color: colors.$accent;
+          --channel-icon: white;
+
+          [class^="name-"] {
+            color: white;
+          }
+        }
+      }
+      &[class*="modeUnread-"] {
+        [class^="link-"] {
+          --channel-icon: var(--text-normal);
+          [class^="name-"] {
+            color: var(--text-normal);
+          }
+        }
+        &:hover [class^="link-"] {
+          --channel-icon: white !important;
+          [class^="name-"] {
+            color: white !important;
+          }
+        }
+      }
+      &[class*="modeMuted-"] {
+        [class^="link-"] {
+          --channel-icon: #{colors.$c8};
+          --interactive-muted: #{colors.$c8};
+          [class^="name-"] {
+            color: #{colors.$c8};
+          }
+        }
+      }
+      &:hover:not([class*="modeSelected-"]) {
+        [class^="link-"] {
+          background-color: transparent;
+          --channel-icon: var(--text-normal);
+          --interactive-muted: var(--text-normal);
+          [class^="name-"] {
+            color: var(--text-normal);
+          }
+        }
+      }
+
+      &[class*="clickable-"] {
+        height: 21px;
+        background: linear-gradient(
+          to right,
+          colors.$highlight,
+          transparent 75%
+        );
+
+        &:hover {
+          [class^="mainContent-"] > svg {
+            background-position-x: 16px;
+          }
+        }
+
+        &[class*="collapsed-"] {
+          [class^="mainContent-"] > svg {
+            background-position-y: 0px;
+          }
+        }
+
+        [class^="mainContent-"] {
+          height: 21px;
+
+          & > svg {
+            left: 3px;
+            top: 3px;
+            width: 16px;
+            height: 16px;
+            transition: none;
+            transform: none !important;
+            background-image: images.$CategoryArrow;
+            background-position: 0px 16px;
+
+            & > path {
+              display: none;
+            }
+          }
+
+          [class^="name-"] {
+            line-height: 21px;
+            font-weight: normal;
+            font-size: 12px;
+            margin-left: 23px;
+            color: var(--text-normal);
+            text-shadow: 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0,
+              0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
+          }
+        }
+
+        [class^="addButton-"] {
+          min-width: 20px;
+          [class^="addButtonIcon-"] {
+            width: 16px;
+            height: 16px;
+            transition: none;
+            transform: none !important;
+            background-image: images.$ButtonAdd;
+            margin-right: 0;
+
+            &:hover {
+              background-position-x: 16px;
+            }
+
+            & > polygon {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    [class^="link-"] {
+      border-radius: 0;
+      padding: 2px 4px;
+      --channel-icon: var(--text-muted);
+
+      [class^="icon-"] {
+        width: 16px;
+        height: 16px;
+      }
+
+      [class^="iconContainer-"] {
+        margin-right: 3px;
+      }
+
+      [class^="name-"] {
+        font-size: 12px;
+        color: var(--text-muted);
+        line-height: 16px;
+        font-weight: normal;
+      }
+
+      & > [class^="linkBottom-"] {
+        margin-left: 0;
+      }
+
+      [class^="mentionsBadge-"] > [class^="numberBadge-"] {
+        background-color: colors.$c1 !important;
+      }
+    }
+
+    &:has([class^="mentionsBadge-"]) {
+      [class^="link-"] {
+        --channel-icon: #{colors.$c1} !important;
+        --interactive-muted: #{colors.$c1} !important;
+        [class^="name-"] {
+          color: colors.$c1 !important;
+        }
+      }
+    }
+
+    &[class*="modeSelected-"] {
+      [class^="link-"] {
+        //background-color: colors.$Focus;
+        --channel-icon: white;
+
+        [class^="name-"] {
+          color: white;
+        }
+      }
+    }
+    &[class*="modeUnread-"] {
+      [class^="link-"] {
+        --channel-icon: var(--text-normal);
+        [class^="name-"] {
+          color: var(--text-normal);
+        }
+      }
+      &:hover [class^="link-"] {
+        --channel-icon: white;
+        [class^="name-"] {
+          color: white !important;
+        }
+      }
+    }
+    &:hover:not([class*="modeSelected-"]):not([class*="selected-"]) {
+      [class^="link-"] {
+        background-color: transparent;
+        --channel-icon: var(--text-normal);
+        [class^="name-"] {
+          color: colors.$c7;
+        }
+      }
+    }
+
+    & > [class^="list-"] {
+      padding: 2px 4px;
+
+      & > [class^="draggable-"] {
+        height: unset;
+
+        & > [class^="voiceUser-"] {
+          height: unset;
+
+          &:hover > [class^="content-"] {
+            border-radius: 0;
+            background-color: transparent;
+          }
+
+          [class^="userAvatar-"] {
+            margin: 0;
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+          }
+
+          [class*="username-"] {
+            font-size: 12px;
+          }
+
+          [class^="icons-"] {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/compact.scss

@@ -0,0 +1,517 @@
+[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"],
+[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"] > svg,
+[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg),
+[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg) > svg,
+[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"],
+[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"] > svg {
+  width: 32px;
+  height: 32px;
+}
+
+[class*="guilds-"] [class^="listItem-"] > [class^="pill-"],
+[class*="guilds-"]
+  [class^="listItem-"]
+  > [class^="pill-"]
+  > [class^="item-"][style*="height: 40px;"] {
+  height: 32px !important;
+}
+
+[class*="guilds-"],
+[class*="guilds-"] [class^="listItem-"],
+[class*="guilds-"]
+  [class^="wrapper-"]:has(> [class^="expandedFolderBackground-"]) {
+  width: 48px;
+}
+[class*="guilds-"] [class^="unreadMentionsIndicator"] {
+  width: 48px;
+  height: 16px;
+}
+
+[class*="guilds-"] > ul > [class^="scroller-"] {
+  padding-top: 8px !important;
+}
+[class*="guilds-"] [class^="listItem-"] {
+  margin-bottom: 4px;
+}
+
+[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] {
+  width: 32px !important;
+  height: 32px !important;
+  margin-left: 8px;
+}
+
+[class*="guilds-"] [class^="expandedFolderBackground-"] {
+  width: 32px;
+  left: 8px;
+}
+
+[class*="guilds-"] ul[id^="folder-items-"] {
+  height: unset !important;
+}
+
+[class*="guilds-"]
+  ul[class^="tree-"]
+  > [class^="scroller-"]
+  > div[style*="height: 56px;"] {
+  height: unset !important;
+}
+
+[class*="guilds-"]
+  ul[id^="folder-items-"]
+  > [class^="listItem-"]
+  > [class^="pill-"] {
+  left: -8px;
+}
+
+section[class^="panels-"] > [class*="activityPanel-"] [class^="gameIcon-"],
+section[class^="panels-"]
+  > [class*="activityPanel-"]
+  [class^="actions-"]
+  > [class^="panelButtonContainer-"]
+  > button,
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class*="directionRow-"]
+  > button,
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="actionButtons-"]
+  button {
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+}
+
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class*="directionRow-"] {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: grid;
+  grid-gap: 4px;
+  grid-auto-flow: column;
+}
+
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div {
+  padding-left: 20px;
+}
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div
+  > [class^="rtcConnectionStatus-"] {
+  position: absolute;
+  left: 8px;
+}
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div
+  > [class^="rtcConnectionStatus-"]:has(> :nth-child(2)) {
+  top: 12px;
+}
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div
+  > [class^="rtcConnectionStatus-"]
+  > svg[class^="ping-"] {
+  margin-right: 0;
+}
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div
+  > [class^="rtcConnectionStatus-"]
+  > [class^="labelWrapper-"],
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div
+  > [class^="rtcConnectionStatus-"]
+  > [class^="labelWrapper-"]
+  > button {
+  width: 16px;
+  height: 16px;
+}
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div
+  > [class^="rtcConnectionStatus-"]
+  > [class^="labelWrapper-"] {
+  position: relative;
+  left: -16px;
+  z-index: 10;
+}
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="connection-"]
+  > [class^="inner-"]
+  > div
+  > [class^="rtcConnectionStatus-"]
+  > [class^="labelWrapper-"]
+  > button
+  > [class^="contents-"] {
+  display: none;
+}
+
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="actionButtons-"]
+  button {
+  padding: 0;
+  background: transparent;
+}
+section[class^="panels-"]
+  > [class^="wrapper-"]
+  > [class^="container-"]
+  > [class*="actionButtons-"] {
+  grid-gap: 4px;
+  padding-top: 0;
+  grid-template-columns: repeat(auto-fill, minmax(0, 24px));
+  height: 24px;
+}
+
+section[class^="panels-"]
+  > [class^="container-"]
+  > [class*="directionRow-"]
+  > button {
+  width: 24px;
+  height: 24px;
+}
+section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+  padding-right: 4px !important;
+}
+
+.hh2-spotify-controls-player {
+  margin: 4px 4px !important;
+  height: 32px !important;
+}
+.hh2-spotify-controls-album-image {
+  width: 32px !important;
+  height: 32px !important;
+}
+button.hh2-spotify-controls-button {
+  width: 24px !important;
+}
+.hh2-spotify-controls-info-box {
+  margin-left: 4px !important;
+  max-width: 112px !important;
+  margin-right: 4px !important;
+}
+.hh2-spotify-controls-buttons {
+  display: grid !important;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+}
+.hh2-spotify-controls-track-name {
+  font-size: 0.75em;
+}
+.hh2-spotify-controls-album-name span,
+.hh2-spotify-controls-album-name a {
+  color: var(--text-muted) !important;
+}
+
+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%
+  );
+}
+
+[class^="animatedBannerHoverLayer-"] {
+  top: -32px !important;
+  height: 32px !important;
+}
+
+[class^="sidebar-"] header[class^="header-"] {
+  padding: 4px 8px;
+}
+[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^="libraryHeader-"]:before {
+    top: 31px;
+  }
+
+  & > [class^="upperContainer-"] {
+    height: 32px;
+
+    & > [class^="toolbar-"] {
+      display: grid;
+      grid-auto-flow: column;
+      grid-gap: 4px;
+      margin-right: 4px;
+
+      & > [class^="inviteToolbar-"] {
+        display: grid;
+        grid-auto-flow: column;
+        grid-gap: 4px;
+      }
+
+      & > [class^="search-"] [class^="searchBar-"] {
+        height: 24px !important;
+
+        & > .DraftEditor-root & > [class^="icon-"] {
+          margin-top: 0 !important;
+        }
+      }
+
+      [class^="iconWrapper-"] {
+        width: 24px !important;
+        height: 24px !important;
+        margin: 0;
+
+        & > svg {
+          margin: 0 !important;
+          padding: 1px;
+        }
+      }
+
+      & > [class^="icon-"]:has(> [class^="text-md-normal-"]) {
+        margin-left: 4px;
+        margin-right: 0;
+      }
+    }
+    [class^="topic-"] {
+      margin-left: 4px;
+    }
+    [class^="titleWrapper-"] {
+      margin-right: 4px;
+    }
+
+    & > [class^="children-"] > [class^="iconWrapper-"],
+    [class^="divider-"] {
+      margin: 0 4px;
+    }
+
+    & > [class^="children-"] > [class^="iconWrapper-"] > svg {
+      padding: 2px;
+    }
+  }
+}
+
+[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"],
+[class^="chat-"] [class^="toolbar-"] > [class*="search-"] {
+  margin: 0 !important;
+}
+
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="textArea-"]
+  > div
+  > [class*="fontSize16Padding-"] {
+  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-"],
+[class^="channelTextArea-"] [class^="attachWrapper-"],
+[class^="channelTextArea-"] [class^="attachButton-"],
+[class^="channelTextArea-"] > [class^="scrollableContainer-"],
+[class^="channelTextArea-"] [class^="inner-"] > [class^="textArea-"] {
+  min-height: 40px !important;
+}
+[class^="channelTextArea-"] [class^="buttons-"],
+[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;
+}
+[class^="channelTextArea-"]
+  [class^="buttons-"]
+  [class*="buttonContainer-"]
+  > button:not(:has(> [class*="innerButton-"])) {
+  margin: 0;
+}
+[class^="channelTextArea-"] [class^="buttons-"] > [class^="separator-"],
+[class^="channelTextArea-"]
+  [class^="buttons-"]
+  > [class^="separator-"]
+  [class*="innerButton-"] {
+  margin-left: 4px;
+}
+[class^="channelTextArea-"]
+  [class^="buttons-"]
+  > [class^="separator-"]
+  [class*="innerButton-"] {
+  margin-right: 0;
+}
+
+[class*="menu-"] [class^="scroller-"] {
+  padding: 4px;
+}
+[class*="menu-"] [class^="scroller-"]::-webkit-scrollbar {
+  width: 4px;
+}
+[class*="menu-"] [class^="scroller-"] [class^="item-"] {
+  margin: 1px 0;
+  padding: 0 4px;
+  min-height: 24px;
+}
+[class*="menu-"]
+  [class^="scroller-"]
+  [class^="customItem-"][id^="message-quickreact-"]
+  > [class^="button-"] {
+  width: 24px;
+  height: 24px;
+}
+[class*="menu-"]
+  [class^="scroller-"]
+  [class^="wrapper-"]:has(> [class^="customItem-"][id^="message-quickreact-"]) {
+  padding: 0;
+  margin-bottom: 4px;
+}
+[class*="menu-"]
+  [class^="scroller-"]
+  [class^="item-"]
+  > [class^="labelContainer-"],
+[class*="menu-"]
+  [class^="scroller-"]
+  [class^="item-"]
+  > [class^="sliderContainer-"] {
+  padding: 0;
+}
+[class*="menu-"]
+  [class^="scroller-"]
+  [class^="item-"]
+  > [class^="labelContainer-"] {
+  min-height: 24px;
+}
+
+[class^="sidebar-"]
+  > [class^="privateChannels-"]
+  ul[class^="content-"]
+  > [class*="privateChannelsHeaderContainer-"] {
+  padding: 9px 4px 2px 9px;
+  height: 24px;
+}
+
+[class^="sidebar-"] > [class^="privateChannels-"] > [class^="searchBar-"] {
+  height: 32px;
+}
+
+section[class^="panels-"] > [class^="container-"]:last-child {
+  position: relative;
+  margin-bottom: 0;
+}
+
+section[class^="panels-"] > [class^="container-"]:last-child > div:last-child {
+  right: 0;
+  padding-right: 8px;
+}
+
+section[class^="panels-"] > [class^="container-"] {
+  height: 40px;
+  padding: 0 4px;
+}
+section[class^="panels-"]
+  > [class^="container-"]
+  > [class*="directionRow-"]
+  > button {
+  width: 24px;
+  height: 24px;
+}
+section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+  padding-right: 4px !important;
+}
+
+[class*="barBase-"] {
+  padding-bottom: 0 !important;
+  border-radius: 8px;
+  margin: 0;
+  left: 4px;
+  right: 4px;
+
+  &[class^="newMessagesBar-"] {
+    height: 24px;
+  }
+
+  & > button {
+    padding: 0 4px;
+  }
+}

src/context_menu.scss

@@ -0,0 +1,140 @@
+@use "colors";
+@use "images";
+
+[class*="menu-"] {
+  padding: 2px;
+
+  & > [class^="scroller-"] {
+    padding: 1px 1px 4px 1px !important;
+    margin-right: -4px;
+
+    [class^="customItem-"][id^="message-quickreact-"] > [class^="button-"] {
+      border-radius: 0 !important;
+    }
+
+    [class^="separator-"] {
+      margin: 4px 1px;
+      border-bottom: 1px solid colors.$tertiary;
+      border-top: 1px solid colors.$c0;
+    }
+    [class^="item-"] {
+      border-radius: 0 !important;
+      margin: 1px 0;
+      padding: 0 2px !important;
+      min-height: 16px !important;
+      font-size: 12px;
+
+      &:not(:has(> [class^="iconContainer-"] > [class^="icon-"])):not(
+          :has(> [class^="iconContainerLeft-"])
+        ) {
+        padding-inline-start: 20px !important;
+      }
+      &:has(> [class^="iconContainer-"] > [class^="icon-"]) {
+        flex-direction: row-reverse;
+      }
+
+      & > [class^="iconContainer-"]:has(> [class^="icon-"]),
+      & > [class^="iconContainerLeft-"] {
+        margin-left: 0;
+        margin-right: 2px;
+      }
+
+      & > [class^="label-"] {
+        padding-left: 2px;
+
+        & > [class^="subtext-"] {
+          line-height: 12px;
+          margin-top: 0;
+        }
+      }
+
+      & > [class^="iconContainer-"],
+      & > [class^="iconContainer-"] > svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      & > [class^="hintContainer-"] {
+        margin-right: 18px;
+      }
+
+      &[aria-haspopup="true"] > [class^="iconContainer-"] > [class^="caret-"] {
+        display: none;
+      }
+      &[aria-haspopup="true"] > [class^="iconContainer-"]:before {
+        content: "";
+        position: absolute;
+        right: -2px;
+        top: 0px;
+        width: 16px;
+        height: 16px;
+        background-color: colors.$c7;
+        mask-image: images.$MenuArrow;
+        -webkit-mask-image: images.$MenuArrow;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+      }
+
+      &[role="menuitemcheckbox"]
+        > [class^="iconContainer-"]
+        > svg[class^="icon-"] {
+        display: none;
+      }
+      &[role="menuitemcheckbox"][aria-checked="true"]
+        > [class^="iconContainer-"]:before {
+        content: "";
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 16px;
+        height: 16px;
+        background-color: colors.$c7;
+        mask-image: images.$MenuCheck;
+        -webkit-mask-image: images.$MenuCheck;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+      }
+
+      &[role="menuitemradio"]
+        > [class^="iconContainer-"]
+        > svg[class^="icon-"] {
+        display: none;
+      }
+      &[role="menuitemradio"][aria-checked="true"]
+        > [class^="iconContainer-"]:before {
+        content: "";
+        position: absolute;
+        right: -1px;
+        top: 0px;
+        width: 16px;
+        height: 16px;
+        background-color: colors.$c7;
+        mask-image: images.$MenuRadio;
+        -webkit-mask-image: images.$MenuRadio;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+      }
+
+      & > [class^="label-"] > [class^="roleRow-"] > [class^="roleCircle-"] {
+        width: 12px;
+        height: 12px;
+        border-radius: 0;
+        border-top: 1px solid colors.$highlight;
+        border-left: 1px solid colors.$highlight;
+        margin: 0;
+        margin-right: 2px;
+      }
+    }
+  }
+}
+
+[class^="submenuPaddingContainer-"] {
+  padding: 0;
+  margin: -4px;
+}

src/cozy_compact.scss

@@ -0,0 +1,158 @@
+html:not(.a11y-font-scaled-down)
+  [class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]),
+html:not(.a11y-font-scaled-down)
+  [class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="wrapper-"],
+html:not(.a11y-font-scaled-down)
+  [class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="container-"]:not([class*="systemMessage-"]):not(
+    [class*="compact-"]
+  ) {
+  padding: 0 !important;
+  padding-left: 8px !important;
+}
+
+[class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]),
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="wrapper-"]:not([class*="systemMessage-"]):not([class*="compact-"]),
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="container-"]:not([class*="systemMessage-"]):not(
+    [class*="compact-"]
+  ) {
+  padding-left: 8px !important;
+}
+
+[class*="message-"][class*="systemMessage-"] {
+  padding-left: 16px !important;
+}
+
+[class*="message-"][class*="systemMessage-"] [class^="iconContainer-"] {
+  margin-right: 0;
+  width: 24px;
+}
+
+html:not(.a11y-font-scaled-down)
+  [class*="message-"]:not([class*="compact-"])
+  > [class^="contents-"]
+  > [class^="header-"],
+html:not(.a11y-font-scaled-down)
+  [class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="wrapper-"]:not([class*="compact-"])
+  > [class^="contents-"]
+  > [class^="header-"],
+html:not(.a11y-font-scaled-down)
+  [class*="message-"]:not([class*="compact-"])
+  > [class^="wrapper-"]
+  > [class^="contents-"]
+  > [class^="header-"] {
+  padding-left: 0 !important;
+  margin-left: 24px;
+  padding-bottom: 0 !important;
+}
+
+.a11y-font-scaled-down
+  [class*="message-"]:not([class*="compact-"])
+  > [class^="contents-"]
+  > [class^="header-"],
+.a11y-font-scaled-down
+  [class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="wrapper-"]:not([class*="compact-"])
+  > [class^="contents-"]
+  > [class^="header-"]
+  .a11y-font-scaled-down
+  [class*="message-"]:not([class*="compact-"])
+  > [class^="wrapper-"]
+  > [class^="contents-"]
+  > [class^="header-"] {
+  margin-left: calc(24px - 4.5rem);
+}
+
+[class*="message-"]
+  > [class^="wrapper-"]
+  > [class^="contents-"]
+  [class^="avatar-"],
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="wrapper-"]
+  > [class^="contents-"]
+  [class^="avatar-"],
+[class*="message-"] > [class^="contents-"] [class^="avatar-"] {
+  width: 20px;
+  height: 20px;
+  left: 8px;
+}
+
+[class*="message-"]
+  > [class^="wrapper-"]
+  > [class^="contents-"]
+  [class^="avatar-"] {
+  left: 0 !important;
+}
+
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  > [class^="wrapper-"]
+  > [class^="contents-"],
+[class*="message-"] > [class^="contents-"],
+[class*="message-"] > [class^="wrapper-"] > [class^="contents-"] {
+  margin-left: 0;
+  padding: 0;
+}
+
+[class*="message-"][class*="systemMessage-"] > [class^="container-"] {
+  padding: 0;
+}
+
+[class*="cozy-"][class*="hasThread-"]::after {
+  display: none;
+}
+
+[class*="message-"] > [class^="wrapper-"] {
+  padding-left: 0;
+}
+
+[class^="messagesWrapper-"] [class^="scrollerInner-"]:after {
+  height: 4px !important;
+}
+
+[class*="message-"]:not([class*="compact-"])
+  [class^="contents-"]
+  [class*="timestampVisibleOnHover-"] {
+  display: none;
+}
+
+[class^="messagesWrapper-"] [class^="scrollerInner-"] [class^="divider-"] {
+  margin: 4px;
+  height: 8px;
+}
+
+[class^="messagesWrapper-"]
+  [class^="scrollerInner-"]
+  [class*="groupStart-"][class*="cozy-"] {
+  margin-top: 8px;
+}
+
+div[class*="cozyMessage-"] div[class^="repliedMessage-"] {
+  margin-left: 33px;
+}
+
+div[class*="cozyMessage-"] div[class^="repliedMessage-"]:before {
+  --avatar-size: 20px;
+  border-left: var(--spine-width) solid var(--interactive-active);
+  border-bottom: 0 solid var(--interactive-active);
+  border-right: 0 solid var(--interactive-active);
+  border-top: var(--spine-width) solid var(--interactive-active);
+}
+
+[class*="cozyMessage-"] [class^="avatarDecoration-"] {
+  margin-top: calc(24px - 20px * var(--decoration-to-avatar-ratio));
+  left: calc(30px - 20px * var(--decoration-to-avatar-ratio));
+  width: calc(20px * var(--decoration-to-avatar-ratio));
+  height: calc(20px * var(--decoration-to-avatar-ratio));
+}

src/embeds.css

@@ -0,0 +1,34 @@
+[class*="embed-"] {
+  border-radius: 0 0 0 0;
+  border-color: var(--interactive-active);
+}
+[class*="embed-"] [class*="embedInner-"] {
+  border-color: transparent;
+}
+[class*="embed-"] [class*="embedAuthorIcon-"] {
+  border-radius: 0;
+}
+[class*="embed-"] [class^="grid-"] {
+  padding: 8px !important;
+}
+[class*="embed-"] [class*="embedMargin-"] {
+  margin-top: 4px !important;
+}
+[class*="embed-"] [class*="embedMedia-"] {
+  margin-top: 4px !important;
+}
+[class*="embed-"] [class*="embedTitle-"] {
+  font-size: 16px !important;
+  font-weight: 200 !important;
+}
+[class*="embed-"] [class*="embedFieldName-"] {
+  font-weight: 500 !important;
+}
+[class*="embed-"] [class*="embedDescription-"],
+[class*="embed-"] [class*="embedFieldName-"],
+[class*="embed-"] [class*="embedFieldValue-"] {
+  font-size: 16px !important;
+}
+[class*="embed-"] [class*="embedFooterText-"] {
+  font-size: 0.8em;
+}

src/font.css

@@ -0,0 +1,138 @@
+@font-face {
+  font-family: "Unifont";
+  src: local("Unifont"),
+    url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf)
+      format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Terminus (TTF)";
+  src: local("Terminus (TTF)"),
+    url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf)
+      format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "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;
+  font-style: normal;
+}
+@font-face {
+  font-family: "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;
+  font-style: italic;
+}
+@font-face {
+  font-family: "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;
+  font-style: italic;
+}
+
+:root,
+.theme-dark,
+.theme-light {
+  --font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)",
+    "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace,
+    Twemoji !important;
+  --font-display: "Terminus (TTF) for Windows", "Terminus (TTF)",
+    "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace,
+    Twemoji !important;
+  --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
+    "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
+
+  --_font-titlebars: var(--font-primary) !important;
+}
+
+[class*="menu-"] [class^="item-"],
+[class^="containerDefault-"]
+  > [class^="iconVisibility-"]
+  > [class^="content-"]
+  [class^="name-"] {
+  font-size: 16px;
+  text-transform: none;
+  font-weight: 500;
+}
+[class^="containerDefault-"]
+  > [class^="iconVisibility-"]
+  > [class^="mainContent-"]
+  [class^="name-"],
+[class^="membersGroup-"],
+[class^="headerContent-"] > [class^="name-"] {
+  font-size: 16px;
+  text-transform: none;
+  font-weight: 600;
+}
+
+[class^="reaction-"] [class*="reactionCount-"] {
+  font-size: 12px;
+}
+
+.hh2-spotify-controls-album-name,
+.showTag-username {
+  font-size: 12px !important;
+}
+
+[class^="sidebar-"]
+  > [class^="container-"]
+  > [class^="container-"]
+  > [class^="header-"]
+  > [class^="name-"],
+[class*="heading-md-medium-"],
+[class*="heading-md-normal-"] {
+  font-size: 16px !important;
+}
+
+[class*="edited-"],
+[class*="botTag-"] [class*="botText-"],
+span[class="role-tag"],
+.antiDelete-deleted-suffix {
+  font-size: 12px !important;
+}
+
+[class^="latin12CompactTimeStamp-"],
+[class^="latin24CompactTimeStamp-"],
+[class^="asianCompactTimeStamp-"],
+[class^="embedFooterText-"] {
+  font-size: 0.75em !important;
+}
+
+[class^="codeBlockText-"],
+[class^="codeLine-"],
+[class*="after_inlineCode-"],
+[class*="before_inlineCode-"],
+[class^="inlineCode-"] {
+  font-size: 12px !important;
+}
+
+.hljs-ansi-style-bold {
+  font-weight: 0;
+}
+
+[class^="markdown-"] [class^="codeInline-"],
+code.inline,
+.hljs {
+  font-size: 12px !important;
+}
+
+[class^="markdown-"] code,
+[class^="markdown-"] [class^="codeInline-"],
+code.inline {
+  line-height: 12px !important;
+}
+
+[class^="markup-"] ol,
+[class^="markup-"] ul {
+  margin: 4px 0 0 24px !important;
+}

src/italics.css

@@ -0,0 +1,4 @@
+span[data-slate-leaf="true"][class*="italics-"],
+em {
+  color: #f80;
+}

src/member_list.scss

@@ -0,0 +1,43 @@
+@use "colors";
+
+[class^="members-"] {
+  background-color: transparent;
+
+  [class^="member-"] {
+    background-color: transparent;
+    margin-left: 0;
+
+    [class^="memberInner-"] {
+      height: 36px;
+      padding: 0 4px;
+
+      [class^="avatar-"] {
+        margin-right: 6px;
+      }
+    }
+  }
+
+  [class^="membersGroup-"] {
+    padding: 0;
+    padding-left: 4px;
+    height: 21px;
+    background: linear-gradient(to right, colors.$highlight, transparent 75%);
+    line-height: 21px;
+    font-weight: normal;
+    font-size: 12px;
+    color: colors.$c7;
+    text-shadow: 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0,
+      0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
+    font-weight: normal;
+
+    &:not(:has(> [class^="hiddenVisually-"])) {
+      display: flex;
+      align-items: center;
+    }
+
+    &:has(> [class^="hiddenVisually-"]) > span[aria-hidden="true"] {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

src/private_channels.scss

@@ -0,0 +1,155 @@
+@use "colors";
+@use "images";
+
+[class*="baseLayer-"]
+  > [class^="container-"]
+  [class^="base-"]
+  > [class^="content-"]
+  [class^="sidebar-"]
+  > [class^="privateChannels-"] {
+  & > [class^="scroller-"] {
+    & > [class^="content-"] {
+      & > [class^="channel-"] {
+        margin-left: 0;
+        max-width: unset;
+
+        & > [class^="interactive-"] {
+          background-color: transparent;
+          border-radius: 0;
+          padding: 0;
+
+          &[class*="linkButton-"] {
+            [class^="link-"] {
+              & > [class*="layout-"] {
+                height: 16px;
+                padding: 0;
+
+                & > [class*="avatar-"] {
+                  width: 16px;
+                  height: 16px;
+                  margin-right: 4px;
+
+                  & > [class*="linkButtonIcon-"] {
+                    width: 16px;
+                    height: 16px;
+                    color: var(--channel-icon);
+                  }
+                }
+              }
+            }
+          }
+
+          [class^="link-"] {
+            border-radius: 0;
+            padding: 2px 4px;
+            --channel-icon: #{colors.$highlight};
+
+            & > [class*="layout-"] {
+              height: 32px;
+              padding: 0;
+
+              [class^="avatar-"] {
+                margin-right: 6px;
+              }
+            }
+
+            [class^="name-"] {
+              font-size: 12px;
+              color: colors.$highlight;
+              line-height: 16px;
+              font-weight: normal;
+            }
+
+            &[href="/store"] > [class^="badgeContainer-"] {
+              display: none;
+            }
+          }
+
+          &[class*="selected-"] {
+            background-color: colors.$accent;
+            [class^="link-"] {
+              --channel-icon: white;
+
+              [class^="name-"] {
+                color: white;
+              }
+            }
+          }
+          &:hover:not([class*="selected-"]) {
+            [class^="link-"] {
+              background-color: transparent;
+              --channel-icon: #{colors.$c7};
+              [class^="name-"] {
+                color: colors.$c7;
+              }
+            }
+          }
+        }
+      }
+
+      & > [class*="privateChannelsHeaderContainer-"] {
+        padding: 0;
+        height: 22px;
+        flex-direction: row-reverse;
+        background: linear-gradient(
+          to right,
+          colors.$highlight,
+          transparent 75%
+        );
+        align-items: center;
+
+        [class^="headerText-"] {
+          line-height: 21px;
+          font-weight: normal;
+          font-size: 12px;
+          color: colors.$c7;
+          text-shadow: 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0,
+            0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
+          margin-left: 5px;
+        }
+
+        &[aria-expanded] > div {
+          position: relative;
+          left: 3px;
+          top: 0px;
+          width: 16px;
+          height: 16px;
+          transition: none;
+          transform: none !important;
+          background-image: images.$CategoryArrow;
+          background-position: 0px 16px;
+
+          & > svg {
+            display: none;
+          }
+        }
+        &[aria-expanded="false"] > div {
+          background-position-y: 0px;
+        }
+        &[aria-expanded]:hover > div {
+          background-position-x: 16px;
+        }
+
+        & > [class^="privateChannelRecipientsInviteButtonIcon-"] {
+          position: relative;
+          left: 3px;
+          top: 0px;
+          width: 16px;
+          height: 16px;
+          transition: none;
+          transform: none !important;
+          background-image: images.$ButtonAdd;
+          margin-right: 0;
+
+          &:hover {
+            background-position-x: 16px;
+          }
+
+          & > svg > polygon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

src/textbox.scss

@@ -0,0 +1,153 @@
+[class*="chat-"] [class*="chatContent-"] form {
+  position: relative;
+  margin: 0;
+}
+
+[class*="chat-"] form [class*="typing-"] {
+  position: absolute;
+  top: -2px;
+  left: 10px;
+}
+
+[class*="channelTextArea-"] {
+  margin-bottom: 10px !important;
+  margin-top: 24px !important;
+  padding: 0 !important;
+}
+
+[class*="channelTextArea-"] [class*="inner-"] {
+  border-radius: 6px;
+}
+
+[class*="sansAttachButton-"] {
+  padding-left: 10px !important;
+}
+
+.typing .ellipsis,
+[class*="typing-"] span[class*="ellipsis-"] {
+  display: none;
+}
+
+form [class*="typing-"] {
+  background-color: transparent !important;
+}
+
+[class^="scrollerSpacer-"] {
+  height: 4px !important;
+}
+
+[class^="chatContent-"] > form:before {
+  display: none !important;
+}
+
+[class^="chatContent-"] > form {
+  padding: 0 !important;
+  bottom: 0;
+  background-color: var(--background-secondary);
+}
+[class^="chatContent-"] > form [class^="channelTextArea"] {
+  margin-bottom: 0 !important;
+}
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"] {
+  border-radius: 0 !important;
+  border: 0 !important;
+}
+
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="textArea-"],
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="buttons-"],
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="attachWrapper-"],
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="attachWrapper-"]
+  > [class^="attachButton-"] {
+  min-height: 53px;
+}
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="textArea-"]
+  > div
+  > [class*="fontSize16Padding-"] {
+  padding-top: 15px !important;
+  padding-bottom: 15px !important;
+}
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="buttons-"]
+  [class*="emojiButton-"] {
+  max-height: unset;
+}
+[class^="messagesWrapper-"] {
+  margin-bottom: 8px;
+}
+[class^="chatContent-"]
+  > form
+  [class^="channelTextArea"]
+  > [class^="scrollableContainer-"]
+  > [class^="inner-"]
+  > [class^="textArea-"] {
+  height: 40px;
+}
+
+[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"],
+[class^="channelTextArea-"]
+  > [class^="attachedBars-"]
+  [class^="threadSuggestionBar-"] {
+  background: transparent;
+}
+
+[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"] {
+  display: flex;
+  flex-direction: row-reverse;
+  align-self: flex-start;
+}
+[class^="channelTextArea-"]
+  > [class^="attachedBars-"]
+  [class^="replyBar-"]
+  > [class^="actions-"] {
+  flex-direction: row-reverse;
+}
+[class^="channelTextArea-"]
+  > [class^="attachedBars-"]
+  [class^="replyBar-"]
+  [class*="replyLabel-"] {
+  margin-left: 12px;
+}
+
+[class^="channelTextArea-"]
+  > [class^="attachedBars-"]
+  [class^="replyBar-"]
+  > [class^="actions-"]::after {
+  position: relative;
+  content: "";
+  background-color: var(--background-modifier-accent);
+  width: 1px;
+  height: 20px;
+  left: 100%;
+}

src/voice_rings.css

@@ -0,0 +1,9 @@
+[class*="avatarSpeaking-"],
+[class^="avatar-"][class*="speaking-"] {
+  box-shadow: 0 0 0 2px var(--status-online, var(--status-green-600)),
+    0 0 0 3px var(--background-secondary) !important;
+}
+
+[class^="voiceUsers-"] [class^="avatarContainer-"] {
+  overflow: visible;
+}

src/wide_settings.css

@@ -0,0 +1,12 @@
+[class*="standardSidebarView-"]
+  [class*="contentColumn-"]:not([class*="contentColumnWide-"]) {
+  max-width: 100%;
+}
+
+[class*="standardSidebarView-"] [class*="sidebarRegion-"] {
+  flex: 0;
+}
+
+[class^="accountProfileCard-"] {
+  max-width: 660px;
+}