commit bb5934b7f6e9d094412e9a005015c695ef529d98 Author: Cynthia Foxwell Date: Sun Oct 8 12:28:04 2023 -0600 initial commit diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..d8ba3cf --- /dev/null +++ b/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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..0bc0fab --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# pxvmc + +Combination of things I want from xmc and Pixelvision, and maybe some new things diff --git a/pxvmc.scss b/pxvmc.scss new file mode 100644 index 0000000..52ac0da --- /dev/null +++ b/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"; diff --git a/src/_colors.scss b/src/_colors.scss new file mode 100644 index 0000000..2493e2d --- /dev/null +++ b/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; diff --git a/src/_images.scss b/src/_images.scss new file mode 100644 index 0000000..d330b5d --- /dev/null +++ b/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=="); diff --git a/src/account_details.scss b/src/account_details.scss new file mode 100644 index 0000000..d71f4e0 --- /dev/null +++ b/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; + } +} diff --git a/src/avatars.scss b/src/avatars.scss new file mode 100644 index 0000000..1a4472c --- /dev/null +++ b/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; + } +} diff --git a/src/channel_list.scss b/src/channel_list.scss new file mode 100644 index 0000000..2f94b5c --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/src/color_overrides.scss b/src/color_overrides.scss new file mode 100644 index 0000000..50c120c --- /dev/null +++ b/src/color_overrides.scss @@ -0,0 +1,1208 @@ +@use "colors"; +@use "sass:color"; + +$mention-bg: color.adjust(colors.$accent, $alpha: -0.9); +$mention-mentioned: color.adjust(colors.$accent, $alpha: -0.95); +$mention-hover: color.adjust(colors.$accent, $alpha: -0.92); + +$mod-hover: color.adjust(colors.$highlight, $alpha: -0.84); +$mod-active: color.adjust(colors.$highlight, $alpha: -0.8); +$mod-selected: color.adjust(colors.$highlight, $alpha: -0.76); + +$card: color.adjust(colors.$primary, $alpha: -0.4); +$card-edit: color.adjust(colors.$primary, $alpha: -0.7); + +$brand-500: colors.$accent; +$brand-100: color.scale($brand-500, $lightness: 95%); +$brand-130: color.scale($brand-500, $lightness: 91.2%); +$brand-160: color.scale($brand-500, $lightness: 85.9%); +$brand-200: color.scale($brand-500, $lightness: 80%); +$brand-230: color.scale($brand-500, $lightness: 74.3%); +$brand-260: color.scale($brand-500, $lightness: 67.8%); +$brand-300: color.scale($brand-500, $lightness: 60%); +$brand-330: color.scale($brand-500, $lightness: 48.2%); +$brand-360: color.scale($brand-500, $lightness: 36%); +$brand-400: color.scale($brand-500, $lightness: 20%); +$brand-430: color.scale($brand-500, $lightness: 14.6%); +$brand-460: color.scale($brand-500, $lightness: 8%); +$brand-530: color.scale($brand-500, $lightness: -09%); +$brand-560: color.scale($brand-500, $lightness: -19%); +$brand-600: color.scale($brand-500, $lightness: -32%); +$brand-630: color.scale($brand-500, $lightness: -41.1%); +$brand-660: color.scale($brand-500, $lightness: -54.5%); +$brand-700: color.scale($brand-500, $lightness: -60%); +$brand-730: color.scale($brand-500, $lightness: -62.2%); +$brand-760: color.scale($brand-500, $lightness: -65.5%); +$brand-800: color.scale($brand-500, $lightness: -70%); +$brand-830: color.scale($brand-500, $lightness: -76.8%); +$brand-860: color.scale($brand-500, $lightness: -85%); +$brand-900: color.scale($brand-500, $lightness: -95%); +$brand-05a: color.adjust($brand-500, $alpha: -0.95); +$brand-10a: color.adjust($brand-500, $alpha: -0.9); +$brand-15a: color.adjust($brand-500, $alpha: -0.85); +$brand-20a: color.adjust($brand-500, $alpha: -0.8); +$brand-25a: color.adjust($brand-500, $alpha: -0.75); +$brand-30a: color.adjust($brand-500, $alpha: -0.7); +$brand-35a: color.adjust($brand-500, $alpha: -0.65); +$brand-40a: color.adjust($brand-500, $alpha: -0.6); +$brand-45a: color.adjust($brand-500, $alpha: -0.55); +$brand-50a: color.adjust($brand-500, $alpha: -0.5); +$brand-55a: color.adjust($brand-500, $alpha: -0.45); +$brand-60a: color.adjust($brand-500, $alpha: -0.4); +$brand-65a: color.adjust($brand-500, $alpha: -0.35); +$brand-70a: color.adjust($brand-500, $alpha: -0.3); +$brand-75a: color.adjust($brand-500, $alpha: -0.25); +$brand-80a: color.adjust($brand-500, $alpha: -0.2); +$brand-85a: color.adjust($brand-500, $alpha: -0.15); +$brand-90a: color.adjust($brand-500, $alpha: -0.1); +$brand-95a: color.adjust($brand-500, $alpha: -0.05); + +$primary-500: #262626; +$primary-100: color.scale($primary-500, $lightness: 95%); +$primary-130: color.scale($primary-500, $lightness: 91.2%); +$primary-160: color.scale($primary-500, $lightness: 85.9%); +$primary-200: color.scale($primary-500, $lightness: 80%); +$primary-230: color.scale($primary-500, $lightness: 74.3%); +$primary-260: color.scale($primary-500, $lightness: 67.8%); +$primary-300: color.scale($primary-500, $lightness: 60%); +$primary-330: color.scale($primary-500, $lightness: 48.2%); +$primary-345: color.scale($primary-500, $lightness: 40.4%); +$primary-360: color.scale($primary-500, $lightness: 36%); +$primary-400: color.scale($primary-500, $lightness: 20%); +$primary-430: color.scale($primary-500, $lightness: 14.6%); +$primary-460: color.scale($primary-500, $lightness: 8%); +$primary-530: color.scale($primary-500, $lightness: -09%); +$primary-560: color.scale($primary-500, $lightness: -19%); +$primary-600: color.scale($primary-500, $lightness: -32%); +$primary-630: color.scale($primary-500, $lightness: -41.1%); +$primary-645: color.scale($primary-500, $lightness: -48.1%); +$primary-660: color.scale($primary-500, $lightness: -54.5%); +$primary-700: color.scale($primary-500, $lightness: -60%); +$primary-730: color.scale($primary-500, $lightness: -62.2%); +$primary-760: color.scale($primary-500, $lightness: -65.5%); +$primary-800: color.scale($primary-500, $lightness: -70%); +$primary-830: color.scale($primary-500, $lightness: -76.8%); +$primary-860: color.scale($primary-500, $lightness: -85%); +$primary-900: color.scale($primary-500, $lightness: -95%); + +$red-500: #e896c7; +$red-100: color.scale($red-500, $lightness: 95%); +$red-130: color.scale($red-500, $lightness: 91.2%); +$red-160: color.scale($red-500, $lightness: 85.9%); +$red-200: color.scale($red-500, $lightness: 80%); +$red-230: color.scale($red-500, $lightness: 74.3%); +$red-260: color.scale($red-500, $lightness: 67.8%); +$red-300: color.scale($red-500, $lightness: 60%); +$red-330: color.scale($red-500, $lightness: 48.2%); +$red-345: color.scale($red-500, $lightness: 40.4%); +$red-360: color.scale($red-500, $lightness: 36%); +$red-400: color.scale($red-500, $lightness: 20%); +$red-430: color.scale($red-500, $lightness: 14.6%); +$red-460: color.scale($red-500, $lightness: 8%); +$red-530: color.scale($red-500, $lightness: -09%); +$red-560: color.scale($red-500, $lightness: -19%); +$red-600: color.scale($red-500, $lightness: -32%); +$red-630: color.scale($red-500, $lightness: -41.1%); +$red-645: color.scale($red-500, $lightness: -48.1%); +$red-660: color.scale($red-500, $lightness: -54.5%); +$red-700: color.scale($red-500, $lightness: -60%); +$red-730: color.scale($red-500, $lightness: -62.2%); +$red-760: color.scale($red-500, $lightness: -65.5%); +$red-800: color.scale($red-500, $lightness: -70%); +$red-830: color.scale($red-500, $lightness: -76.8%); +$red-860: color.scale($red-500, $lightness: -85%); +$red-900: color.scale($red-500, $lightness: -95%); + +$orange-500: #ffb65e; +$orange-100: color.scale($orange-500, $lightness: 95%); +$orange-130: color.scale($orange-500, $lightness: 91.2%); +$orange-160: color.scale($orange-500, $lightness: 85.9%); +$orange-200: color.scale($orange-500, $lightness: 80%); +$orange-230: color.scale($orange-500, $lightness: 74.3%); +$orange-260: color.scale($orange-500, $lightness: 67.8%); +$orange-300: color.scale($orange-500, $lightness: 60%); +$orange-330: color.scale($orange-500, $lightness: 48.2%); +$orange-345: color.scale($orange-500, $lightness: 40.4%); +$orange-360: color.scale($orange-500, $lightness: 36%); +$orange-400: color.scale($orange-500, $lightness: 20%); +$orange-430: color.scale($orange-500, $lightness: 14.6%); +$orange-460: color.scale($orange-500, $lightness: 8%); +$orange-530: color.scale($orange-500, $lightness: -09%); +$orange-560: color.scale($orange-500, $lightness: -19%); +$orange-600: color.scale($orange-500, $lightness: -32%); +$orange-630: color.scale($orange-500, $lightness: -41.1%); +$orange-645: color.scale($orange-500, $lightness: -48.1%); +$orange-660: color.scale($orange-500, $lightness: -54.5%); +$orange-700: color.scale($orange-500, $lightness: -60%); +$orange-730: color.scale($orange-500, $lightness: -62.2%); +$orange-760: color.scale($orange-500, $lightness: -65.5%); +$orange-800: color.scale($orange-500, $lightness: -70%); +$orange-830: color.scale($orange-500, $lightness: -76.8%); +$orange-860: color.scale($orange-500, $lightness: -85%); +$orange-900: color.scale($orange-500, $lightness: -95%); + +$yellow-500: #ca7a61; +$yellow-100: color.scale($yellow-500, $lightness: 95%); +$yellow-130: color.scale($yellow-500, $lightness: 91.2%); +$yellow-160: color.scale($yellow-500, $lightness: 85.9%); +$yellow-200: color.scale($yellow-500, $lightness: 80%); +$yellow-230: color.scale($yellow-500, $lightness: 74.3%); +$yellow-260: color.scale($yellow-500, $lightness: 67.8%); +$yellow-300: color.scale($yellow-500, $lightness: 60%); +$yellow-330: color.scale($yellow-500, $lightness: 48.2%); +$yellow-345: color.scale($yellow-500, $lightness: 40.4%); +$yellow-360: color.scale($yellow-500, $lightness: 36%); +$yellow-400: color.scale($yellow-500, $lightness: 20%); +$yellow-430: color.scale($yellow-500, $lightness: 14.6%); +$yellow-460: color.scale($yellow-500, $lightness: 8%); +$yellow-530: color.scale($yellow-500, $lightness: -09%); +$yellow-560: color.scale($yellow-500, $lightness: -19%); +$yellow-600: color.scale($yellow-500, $lightness: -32%); +$yellow-630: color.scale($yellow-500, $lightness: -41.1%); +$yellow-645: color.scale($yellow-500, $lightness: -48.1%); +$yellow-660: color.scale($yellow-500, $lightness: -54.5%); +$yellow-700: color.scale($yellow-500, $lightness: -60%); +$yellow-730: color.scale($yellow-500, $lightness: -62.2%); +$yellow-760: color.scale($yellow-500, $lightness: -65.5%); +$yellow-800: color.scale($yellow-500, $lightness: -70%); +$yellow-830: color.scale($yellow-500, $lightness: -76.8%); +$yellow-860: color.scale($yellow-500, $lightness: -85%); +$yellow-900: color.scale($yellow-500, $lightness: -95%); + +$green-500: #6d9377; +$green-100: color.scale($green-500, $lightness: 95%); +$green-130: color.scale($green-500, $lightness: 91.2%); +$green-160: color.scale($green-500, $lightness: 85.9%); +$green-200: color.scale($green-500, $lightness: 80%); +$green-230: color.scale($green-500, $lightness: 74.3%); +$green-260: color.scale($green-500, $lightness: 67.8%); +$green-300: color.scale($green-500, $lightness: 60%); +$green-330: color.scale($green-500, $lightness: 48.2%); +$green-345: color.scale($green-500, $lightness: 40.4%); +$green-360: color.scale($green-500, $lightness: 36%); +$green-400: color.scale($green-500, $lightness: 20%); +$green-430: color.scale($green-500, $lightness: 14.6%); +$green-460: color.scale($green-500, $lightness: 8%); +$green-530: color.scale($green-500, $lightness: -09%); +$green-560: color.scale($green-500, $lightness: -19%); +$green-600: color.scale($green-500, $lightness: -32%); +$green-630: color.scale($green-500, $lightness: -41.1%); +$green-645: color.scale($green-500, $lightness: -48.1%); +$green-660: color.scale($green-500, $lightness: -54.5%); +$green-700: color.scale($green-500, $lightness: -60%); +$green-730: color.scale($green-500, $lightness: -62.2%); +$green-760: color.scale($green-500, $lightness: -65.5%); +$green-800: color.scale($green-500, $lightness: -70%); +$green-830: color.scale($green-500, $lightness: -76.8%); +$green-860: color.scale($green-500, $lightness: -85%); +$green-900: color.scale($green-500, $lightness: -95%); + +$teal-500: #5432b1; +$teal-100: color.scale($teal-500, $lightness: 95%); +$teal-130: color.scale($teal-500, $lightness: 91.2%); +$teal-160: color.scale($teal-500, $lightness: 85.9%); +$teal-200: color.scale($teal-500, $lightness: 80%); +$teal-230: color.scale($teal-500, $lightness: 74.3%); +$teal-260: color.scale($teal-500, $lightness: 67.8%); +$teal-300: color.scale($teal-500, $lightness: 60%); +$teal-330: color.scale($teal-500, $lightness: 48.2%); +$teal-345: color.scale($teal-500, $lightness: 40.4%); +$teal-360: color.scale($teal-500, $lightness: 36%); +$teal-400: color.scale($teal-500, $lightness: 20%); +$teal-430: color.scale($teal-500, $lightness: 14.6%); +$teal-460: color.scale($teal-500, $lightness: 8%); +$teal-530: color.scale($teal-500, $lightness: -09%); +$teal-560: color.scale($teal-500, $lightness: -19%); +$teal-600: color.scale($teal-500, $lightness: -32%); +$teal-630: color.scale($teal-500, $lightness: -41.1%); +$teal-645: color.scale($teal-500, $lightness: -48.1%); +$teal-660: color.scale($teal-500, $lightness: -54.5%); +$teal-700: color.scale($teal-500, $lightness: -60%); +$teal-730: color.scale($teal-500, $lightness: -62.2%); +$teal-760: color.scale($teal-500, $lightness: -65.5%); +$teal-800: color.scale($teal-500, $lightness: -70%); +$teal-830: color.scale($teal-500, $lightness: -76.8%); +$teal-860: color.scale($teal-500, $lightness: -85%); +$teal-900: color.scale($teal-500, $lightness: -95%); + +$blue-500: #9cb1ee; +$blue-100: color.scale($blue-500, $lightness: 95%); +$blue-130: color.scale($blue-500, $lightness: 91.2%); +$blue-160: color.scale($blue-500, $lightness: 85.9%); +$blue-200: color.scale($blue-500, $lightness: 80%); +$blue-230: color.scale($blue-500, $lightness: 74.3%); +$blue-260: color.scale($blue-500, $lightness: 67.8%); +$blue-300: color.scale($blue-500, $lightness: 60%); +$blue-330: color.scale($blue-500, $lightness: 48.2%); +$blue-345: color.scale($blue-500, $lightness: 40.4%); +$blue-360: color.scale($blue-500, $lightness: 36%); +$blue-400: color.scale($blue-500, $lightness: 20%); +$blue-430: color.scale($blue-500, $lightness: 14.6%); +$blue-460: color.scale($blue-500, $lightness: 8%); +$blue-530: color.scale($blue-500, $lightness: -09%); +$blue-560: color.scale($blue-500, $lightness: -19%); +$blue-600: color.scale($blue-500, $lightness: -32%); +$blue-630: color.scale($blue-500, $lightness: -41.1%); +$blue-645: color.scale($blue-500, $lightness: -48.1%); +$blue-660: color.scale($blue-500, $lightness: -54.5%); +$blue-700: color.scale($blue-500, $lightness: -60%); +$blue-730: color.scale($blue-500, $lightness: -62.2%); +$blue-760: color.scale($blue-500, $lightness: -65.5%); +$blue-800: color.scale($blue-500, $lightness: -70%); +$blue-830: color.scale($blue-500, $lightness: -76.8%); +$blue-860: color.scale($blue-500, $lightness: -85%); +$blue-900: color.scale($blue-500, $lightness: -95%); + +$white-500: colors.$c7; +$white-100: color.scale($white-500, $lightness: 95%); +$white-130: color.scale($white-500, $lightness: 91.2%); +$white-160: color.scale($white-500, $lightness: 85.9%); +$white-200: color.scale($white-500, $lightness: 80%); +$white-230: color.scale($white-500, $lightness: 74.3%); +$white-260: color.scale($white-500, $lightness: 67.8%); +$white-300: color.scale($white-500, $lightness: 60%); +$white-345: color.scale($white-500, $lightness: 40.4%); +$white-330: color.scale($white-500, $lightness: 48.2%); +$white-360: color.scale($white-500, $lightness: 36%); +$white-400: color.scale($white-500, $lightness: 20%); +$white-430: color.scale($white-500, $lightness: 14.6%); +$white-460: color.scale($white-500, $lightness: 8%); +$white-530: color.scale($white-500, $lightness: -09%); +$white-560: color.scale($white-500, $lightness: -19%); +$white-600: color.scale($white-500, $lightness: -32%); +$white-630: color.scale($white-500, $lightness: -41.1%); +$white-645: color.scale($white-500, $lightness: -48.1%); +$white-660: color.scale($white-500, $lightness: -54.5%); +$white-700: color.scale($white-500, $lightness: -60%); +$white-730: color.scale($white-500, $lightness: -62.2%); +$white-760: color.scale($white-500, $lightness: -65.5%); +$white-800: color.scale($white-500, $lightness: -70%); +$white-830: color.scale($white-500, $lightness: -76.8%); +$white-860: color.scale($white-500, $lightness: -85%); +$white-900: color.scale($white-500, $lightness: -95%); + +$black-500: #121212; +$black-100: color.scale($black-500, $lightness: 95%); +$black-130: color.scale($black-500, $lightness: 91.2%); +$black-160: color.scale($black-500, $lightness: 85.9%); +$black-200: color.scale($black-500, $lightness: 80%); +$black-230: color.scale($black-500, $lightness: 74.3%); +$black-260: color.scale($black-500, $lightness: 67.8%); +$black-300: color.scale($black-500, $lightness: 60%); +$black-330: color.scale($black-500, $lightness: 48.2%); +$black-345: color.scale($black-500, $lightness: 40.4%); +$black-360: color.scale($black-500, $lightness: 36%); +$black-400: color.scale($black-500, $lightness: 20%); +$black-430: color.scale($black-500, $lightness: 14.6%); +$black-460: color.scale($black-500, $lightness: 8%); +$black-530: color.scale($black-500, $lightness: -09%); +$black-560: color.scale($black-500, $lightness: -19%); +$black-600: color.scale($black-500, $lightness: -32%); +$black-630: color.scale($black-500, $lightness: -41.1%); +$black-645: color.scale($black-500, $lightness: -48.1%); +$black-660: color.scale($black-500, $lightness: -54.5%); +$black-700: color.scale($black-500, $lightness: -60%); +$black-730: color.scale($black-500, $lightness: -62.2%); +$black-760: color.scale($black-500, $lightness: -65.5%); +$black-800: color.scale($black-500, $lightness: -70%); +$black-830: color.scale($black-500, $lightness: -76.8%); +$black-860: color.scale($black-500, $lightness: -85%); +$black-900: color.scale($black-500, $lightness: -95%); + +#splash { + background-color: #{colors.$primary}; +} + +:root, +.theme-dark, +.theme-light { + --mention-foreground: #{colors.$accent}; + --mention-background: #{$mention-bg}; + --background-mentioned: #{$mention-mentioned} !important; + --background-mentioned-hover: #{$mention-hover} !important; + --scrollbar-thin-thumb: #{colors.$c7} !important; + --scrollbar-thin-track: transparent !important; + --scrollbar-auto-thumb: #{colors.$c7} !important; + --scrollbar-auto-track: transparent !important; + --scrollbar-auto-scrollbar-color-thumb: #{colors.$c7} !important; + --scrollbar-auto-scrollbar-color-track: transparent !important; + --channel-text-area-placeholder: #{colors.$highlight}; + + --interactive-normal: #{colors.$c7}; + --interactive-active: #{colors.$c15}; + --text-normal: #{colors.$c7} !important; + --text-link: #{colors.$c6} !important; + --text-muted: #{colors.$highlight} !important; + --header-primary: #{colors.$c7} !important; + --header-secondary: #{colors.$c7} !important; + + --background-primary: #{colors.$primary} !important; + --background-secondary: #{colors.$secondary} !important; + --background-secondary-alt: #{colors.$tertiary} !important; + --background-tertiary: #{colors.$tertiary} !important; + --background-accent: #{colors.$highlight} !important; + --background-floating: #{colors.$primary} !important; + --background-modifier-hover: #{$mod-hover} !important; + --background-modifier-active: #{$mod-active} !important; + --background-modifier-selected: #{$mod-selected} !important; + --background-modifier-accent: #{$mod-selected} !important; + --input-background: #{colors.$tertiary} !important; + --channeltextarea-background: #{colors.$tertiary} !important; + + --status-positive-text: #{colors.$c7}; + --status-danger-text: #{colors.$c7}; + --status-warning-text: #{colors.$c7}; + --button-secondary-background: #{colors.$primary}; + --button-secondary-background-hover: #{colors.$highlight}; + --button-secondary-background-active: #{colors.$highlight}; + --button-secondary-background-disabled: #{colors.$secondary}; + --text-danger: #{colors.$c1}; + --status-danger: #{colors.$c1}; + --status-danger-background: #{colors.$c1}; + --button-danger-background: #{colors.$c1}; + --button-danger-background-hover: #{colors.$c9}; + --button-danger-background-active: #{colors.$c9}; + --button-outline-danger-border: #{colors.$c1}; + --button-outline-danger-border-hover: #{colors.$c9}; + --button-outline-danger-border-active: #{colors.$c9}; + --button-outline-danger-background-hover: #{colors.$c9}; + --button-outline-danger-background-active: #{colors.$c9}; + --text-positive: #{colors.$c2}; + --status-positive: #{colors.$c2}; + --status-positive-background: #{colors.$c2}; + --button-positive-background: #{colors.$c2}; + --button-positive-background-hover: #{colors.$c10}; + --button-positive-background-active: #{colors.$c10}; + --button-outline-positive-border: #{colors.$c2}; + --button-outline-positive-border-hover: #{colors.$c10}; + --button-outline-positive-border-active: #{colors.$c10}; + --button-outline-positive-background-hover: #{colors.$c10}; + --button-outline-positive-background-active: #{colors.$c10}; + --text-warning: #{colors.$c3}; + --status-warning: #{colors.$c3}; + --status-warning-background: #{colors.$c3}; + + --brand-experiment: #{$brand-500} !important; + --brand-100: #{$brand-100} !important; + --brand-130: #{$brand-130} !important; + --brand-160: #{$brand-160} !important; + --brand-200: #{$brand-200} !important; + --brand-230: #{$brand-230} !important; + --brand-260: #{$brand-260} !important; + --brand-300: #{$brand-300} !important; + --brand-330: #{$brand-330} !important; + --brand-360: #{$brand-360} !important; + --brand-400: #{$brand-400} !important; + --brand-430: #{$brand-430} !important; + --brand-460: #{$brand-460} !important; + --brand-500: #{$brand-500} !important; + --brand-530: #{$brand-530} !important; + --brand-560: #{$brand-560} !important; + --brand-600: #{$brand-600} !important; + --brand-630: #{$brand-630} !important; + --brand-660: #{$brand-660} !important; + --brand-700: #{$brand-700} !important; + --brand-730: #{$brand-730} !important; + --brand-760: #{$brand-760} !important; + --brand-800: #{$brand-800} !important; + --brand-830: #{$brand-830} !important; + --brand-860: #{$brand-860} !important; + --brand-900: #{$brand-900} !important; + --brand-new-100: #{$brand-100} !important; + --brand-new-130: #{$brand-130} !important; + --brand-new-160: #{$brand-160} !important; + --brand-new-200: #{$brand-200} !important; + --brand-new-230: #{$brand-230} !important; + --brand-new-260: #{$brand-260} !important; + --brand-new-300: #{$brand-300} !important; + --brand-new-330: #{$brand-330} !important; + --brand-new-360: #{$brand-360} !important; + --brand-new-400: #{$brand-400} !important; + --brand-new-430: #{$brand-430} !important; + --brand-new-460: #{$brand-460} !important; + --brand-new-500: #{$brand-500} !important; + --brand-new-530: #{$brand-530} !important; + --brand-new-560: #{$brand-560} !important; + --brand-new-600: #{$brand-600} !important; + --brand-new-630: #{$brand-630} !important; + --brand-new-660: #{$brand-660} !important; + --brand-new-700: #{$brand-700} !important; + --brand-new-730: #{$brand-730} !important; + --brand-new-760: #{$brand-760} !important; + --brand-new-800: #{$brand-800} !important; + --brand-new-830: #{$brand-830} !important; + --brand-new-860: #{$brand-860} !important; + --brand-new-900: #{$brand-900} !important; + --brand-experiment-100: #{$brand-100} !important; + --brand-experiment-130: #{$brand-130} !important; + --brand-experiment-160: #{$brand-160} !important; + --brand-experiment-200: #{$brand-200} !important; + --brand-experiment-230: #{$brand-230} !important; + --brand-experiment-260: #{$brand-260} !important; + --brand-experiment-300: #{$brand-300} !important; + --brand-experiment-330: #{$brand-330} !important; + --brand-experiment-360: #{$brand-360} !important; + --brand-experiment-400: #{$brand-400} !important; + --brand-experiment-430: #{$brand-430} !important; + --brand-experiment-460: #{$brand-460} !important; + --brand-experiment-500: #{$brand-500} !important; + --brand-experiment-530: #{$brand-530} !important; + --brand-experiment-560: #{$brand-560} !important; + --brand-experiment-600: #{$brand-600} !important; + --brand-experiment-630: #{$brand-630} !important; + --brand-experiment-660: #{$brand-660} !important; + --brand-experiment-700: #{$brand-700} !important; + --brand-experiment-730: #{$brand-730} !important; + --brand-experiment-760: #{$brand-760} !important; + --brand-experiment-800: #{$brand-800} !important; + --brand-experiment-830: #{$brand-830} !important; + --brand-experiment-860: #{$brand-860} !important; + --brand-experiment-900: #{$brand-900} !important; + --brand-experiment-05a: #{$brand-05a} !important; + --brand-experiment-10a: #{$brand-10a} !important; + --brand-experiment-15a: #{$brand-15a} !important; + --brand-experiment-20a: #{$brand-20a} !important; + --brand-experiment-25a: #{$brand-25a} !important; + --brand-experiment-30a: #{$brand-30a} !important; + --brand-experiment-35a: #{$brand-35a} !important; + --brand-experiment-40a: #{$brand-40a} !important; + --brand-experiment-45a: #{$brand-45a} !important; + --brand-experiment-50a: #{$brand-50a} !important; + --brand-experiment-55a: #{$brand-55a} !important; + --brand-experiment-60a: #{$brand-60a} !important; + --brand-experiment-65a: #{$brand-65a} !important; + --brand-experiment-70a: #{$brand-70a} !important; + --brand-experiment-75a: #{$brand-75a} !important; + --brand-experiment-80a: #{$brand-80a} !important; + --brand-experiment-85a: #{$brand-85a} !important; + --brand-experiment-90a: #{$brand-90a} !important; + --brand-experiment-95a: #{$brand-95a} !important; + + --primary-100: #{$primary-100} !important; + --primary-130: #{$primary-130} !important; + --primary-160: #{$primary-160} !important; + --primary-200: #{$primary-200} !important; + --primary-230: #{$primary-230} !important; + --primary-260: #{$primary-260} !important; + --primary-300: #{$primary-300} !important; + --primary-330: #{$primary-330} !important; + --primary-345: #{$primary-345} !important; + --primary-360: #{$primary-360} !important; + --primary-400: #{$primary-400} !important; + --primary-430: #{$primary-430} !important; + --primary-460: #{$primary-460} !important; + --primary-500: #{$primary-500} !important; + --primary-530: #{$primary-530} !important; + --primary-560: #{$primary-560} !important; + --primary-600: #{$primary-600} !important; + --primary-630: #{$primary-630} !important; + --primary-645: #{$primary-645} !important; + --primary-660: #{$primary-660} !important; + --primary-700: #{$primary-700} !important; + --primary-730: #{$primary-730} !important; + --primary-760: #{$primary-760} !important; + --primary-800: #{$primary-800} !important; + --primary-830: #{$primary-830} !important; + --primary-860: #{$primary-860} !important; + --primary-900: #{$primary-900} !important; + + --red-100: #{$red-100} !important; + --red-130: #{$red-130} !important; + --red-160: #{$red-160} !important; + --red-200: #{$red-200} !important; + --red-230: #{$red-230} !important; + --red-260: #{$red-260} !important; + --red-300: #{$red-300} !important; + --red-330: #{$red-330} !important; + --red-345: #{$red-345} !important; + --red-360: #{$red-360} !important; + --red-400: #{$red-400} !important; + --red-430: #{$red-430} !important; + --red-460: #{$red-460} !important; + --red-500: #{$red-500} !important; + --red-530: #{$red-530} !important; + --red-560: #{$red-560} !important; + --red-600: #{$red-600} !important; + --red-630: #{$red-630} !important; + --red-645: #{$red-645} !important; + --red-660: #{$red-660} !important; + --red-700: #{$red-700} !important; + --red-730: #{$red-730} !important; + --red-760: #{$red-760} !important; + --red-800: #{$red-800} !important; + --red-830: #{$red-830} !important; + --red-860: #{$red-860} !important; + --red-900: #{$red-900} !important; + + --orange-100: #{$orange-100} !important; + --orange-130: #{$orange-130} !important; + --orange-160: #{$orange-160} !important; + --orange-200: #{$orange-200} !important; + --orange-230: #{$orange-230} !important; + --orange-260: #{$orange-260} !important; + --orange-300: #{$orange-300} !important; + --orange-330: #{$orange-330} !important; + --orange-345: #{$orange-345} !important; + --orange-360: #{$orange-360} !important; + --orange-400: #{$orange-400} !important; + --orange-430: #{$orange-430} !important; + --orange-460: #{$orange-460} !important; + --orange-500: #{$orange-500} !important; + --orange-530: #{$orange-530} !important; + --orange-560: #{$orange-560} !important; + --orange-600: #{$orange-600} !important; + --orange-630: #{$orange-630} !important; + --orange-645: #{$orange-645} !important; + --orange-660: #{$orange-660} !important; + --orange-700: #{$orange-700} !important; + --orange-730: #{$orange-730} !important; + --orange-760: #{$orange-760} !important; + --orange-800: #{$orange-800} !important; + --orange-830: #{$orange-830} !important; + --orange-860: #{$orange-860} !important; + --orange-900: #{$orange-900} !important; + + --yellow-100: #{$yellow-100} !important; + --yellow-130: #{$yellow-130} !important; + --yellow-160: #{$yellow-160} !important; + --yellow-200: #{$yellow-200} !important; + --yellow-230: #{$yellow-230} !important; + --yellow-260: #{$yellow-260} !important; + --yellow-300: #{$yellow-300} !important; + --yellow-330: #{$yellow-330} !important; + --yellow-345: #{$yellow-345} !important; + --yellow-360: #{$yellow-360} !important; + --yellow-400: #{$yellow-400} !important; + --yellow-430: #{$yellow-430} !important; + --yellow-460: #{$yellow-460} !important; + --yellow-500: #{$yellow-500} !important; + --yellow-530: #{$yellow-530} !important; + --yellow-560: #{$yellow-560} !important; + --yellow-600: #{$yellow-600} !important; + --yellow-630: #{$yellow-630} !important; + --yellow-645: #{$yellow-645} !important; + --yellow-660: #{$yellow-660} !important; + --yellow-700: #{$yellow-700} !important; + --yellow-730: #{$yellow-730} !important; + --yellow-760: #{$yellow-760} !important; + --yellow-800: #{$yellow-800} !important; + --yellow-830: #{$yellow-830} !important; + --yellow-860: #{$yellow-860} !important; + --yellow-900: #{$yellow-900} !important; + + --green-100: #{$green-100} !important; + --green-130: #{$green-130} !important; + --green-160: #{$green-160} !important; + --green-200: #{$green-200} !important; + --green-230: #{$green-230} !important; + --green-260: #{$green-260} !important; + --green-300: #{$green-300} !important; + --green-330: #{$green-330} !important; + --green-345: #{$green-345} !important; + --green-360: #{$green-360} !important; + --green-400: #{$green-400} !important; + --green-430: #{$green-430} !important; + --green-460: #{$green-460} !important; + --green-500: #{$green-500} !important; + --green-530: #{$green-530} !important; + --green-560: #{$green-560} !important; + --green-600: #{$green-600} !important; + --green-630: #{$green-630} !important; + --green-645: #{$green-645} !important; + --green-660: #{$green-660} !important; + --green-700: #{$green-700} !important; + --green-730: #{$green-730} !important; + --green-760: #{$green-760} !important; + --green-800: #{$green-800} !important; + --green-830: #{$green-830} !important; + --green-860: #{$green-860} !important; + --green-900: #{$green-900} !important; + + --teal-100: #{$teal-100} !important; + --teal-130: #{$teal-130} !important; + --teal-160: #{$teal-160} !important; + --teal-200: #{$teal-200} !important; + --teal-230: #{$teal-230} !important; + --teal-260: #{$teal-260} !important; + --teal-300: #{$teal-300} !important; + --teal-330: #{$teal-330} !important; + --teal-345: #{$teal-345} !important; + --teal-360: #{$teal-360} !important; + --teal-400: #{$teal-400} !important; + --teal-430: #{$teal-430} !important; + --teal-460: #{$teal-460} !important; + --teal-500: #{$teal-500} !important; + --teal-530: #{$teal-530} !important; + --teal-560: #{$teal-560} !important; + --teal-600: #{$teal-600} !important; + --teal-630: #{$teal-630} !important; + --teal-645: #{$teal-645} !important; + --teal-660: #{$teal-660} !important; + --teal-700: #{$teal-700} !important; + --teal-730: #{$teal-730} !important; + --teal-760: #{$teal-760} !important; + --teal-800: #{$teal-800} !important; + --teal-830: #{$teal-830} !important; + --teal-860: #{$teal-860} !important; + --teal-900: #{$teal-900} !important; + + --blue-100: #{$blue-100} !important; + --blue-130: #{$blue-130} !important; + --blue-160: #{$blue-160} !important; + --blue-200: #{$blue-200} !important; + --blue-230: #{$blue-230} !important; + --blue-260: #{$blue-260} !important; + --blue-300: #{$blue-300} !important; + --blue-330: #{$blue-330} !important; + --blue-345: #{$blue-345} !important; + --blue-360: #{$blue-360} !important; + --blue-400: #{$blue-400} !important; + --blue-430: #{$blue-430} !important; + --blue-460: #{$blue-460} !important; + --blue-500: #{$blue-500} !important; + --blue-530: #{$blue-530} !important; + --blue-560: #{$blue-560} !important; + --blue-600: #{$blue-600} !important; + --blue-630: #{$blue-630} !important; + --blue-645: #{$blue-645} !important; + --blue-660: #{$blue-660} !important; + --blue-700: #{$blue-700} !important; + --blue-730: #{$blue-730} !important; + --blue-760: #{$blue-760} !important; + --blue-800: #{$blue-800} !important; + --blue-830: #{$blue-830} !important; + --blue-860: #{$blue-860} !important; + --blue-900: #{$blue-900} !important; + + --white-100: #{$white-100} !important; + --white-130: #{$white-130} !important; + --white-160: #{$white-160} !important; + --white-200: #{$white-200} !important; + --white-230: #{$white-230} !important; + --white-260: #{$white-260} !important; + --white-300: #{$white-300} !important; + --white-330: #{$white-330} !important; + --white-345: #{$white-345} !important; + --white-360: #{$white-360} !important; + --white-400: #{$white-400} !important; + --white-430: #{$white-430} !important; + --white-460: #{$white-460} !important; + --white-500: #{$white-500} !important; + --white-530: #{$white-530} !important; + --white-560: #{$white-560} !important; + --white-600: #{$white-600} !important; + --white-630: #{$white-630} !important; + --white-645: #{$white-645} !important; + --white-660: #{$white-660} !important; + --white-700: #{$white-700} !important; + --white-730: #{$white-730} !important; + --white-760: #{$white-760} !important; + --white-800: #{$white-800} !important; + --white-830: #{$white-830} !important; + --white-860: #{$white-860} !important; + --white-900: #{$white-900} !important; + + --black-100: #{$black-100} !important; + --black-130: #{$black-130} !important; + --black-160: #{$black-160} !important; + --black-200: #{$black-200} !important; + --black-230: #{$black-230} !important; + --black-260: #{$black-260} !important; + --black-300: #{$black-300} !important; + --black-330: #{$black-330} !important; + --black-345: #{$black-345} !important; + --black-360: #{$black-360} !important; + --black-400: #{$black-400} !important; + --black-430: #{$black-430} !important; + --black-460: #{$black-460} !important; + --black-500: #{$black-500} !important; + --black-530: #{$black-530} !important; + --black-560: #{$black-560} !important; + --black-600: #{$black-600} !important; + --black-630: #{$black-630} !important; + --black-645: #{$black-645} !important; + --black-660: #{$black-660} !important; + --black-700: #{$black-700} !important; + --black-730: #{$black-730} !important; + --black-760: #{$black-760} !important; + --black-800: #{$black-800} !important; + --black-830: #{$black-830} !important; + --black-860: #{$black-860} !important; + --black-900: #{$black-900} !important; +} + +/*[class^="appMount-"], +[class^="bg-"], +[class^="layers-"] > [class^="layer-"], +[class^="app-"] { + background-color: transparent !important; +} + +html:not(.overlay) body { + background-color: transparent !important; +}*/ + +rect[fill="#43b581"], +path[fill="#43b581"], +rect[fill="#3ba55c"], +path[fill="#3ba55c"], +rect[fill="#23a55a"], +path[fill="#23a55a"], +rect[fill="rgba(67, 181, 129, 1)"], +rect[fill="rgba(59, 165, 92, 1)"], +rect[mask="url(#svg-mask-status-online)"][fill="#ffffff"], +rect[mask="url(#svg-mask-status-online-mobile)"][fill="#ffffff"], +rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], +path[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"] { + fill: var(--status-online); +} + +rect[fill="#faa61a"], +path[fill="#faa61a"], +rect[fill="#f0b232"], +path[fill="#f0b232"], +rect[fill="rgba(250, 166, 26, 1)"], +rect[mask="url(#svg-mask-status-idle)"][fill="#ffffff"], +rect[mask="url(#svg-mask-status-idle-mobile)"][fill="#ffffff"], +rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], +path[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"] { + fill: var(--status-idle); +} + +rect[fill="#f04747"], +path[fill="#f04747"], +rect[fill="#ed4245"], +path[fill="#ed4245"], +rect[fill="#f23f43"], +path[fill="#f23f43"], +rect[fill="rgba(240, 71, 71, 1)"], +rect[mask="url(#svg-mask-status-dnd)"][fill="#ffffff"], +rect[mask="url(#svg-mask-status-dnd-mobile)"][fill="#ffffff"], +rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], +path[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"] { + fill: var(--status-dnd); +} + +rect[fill="#747f8d"], +path[fill="#747f8d"], +rect[fill="#82858f"], +path[fill="#82858f"], +rect[fill="#80848e"], +path[fill="#80848e"], +rect[mask="url(#svg-mask-status-offline)"][fill="#ffffff"], +rect[mask="url(#svg-mask-status-offline-mobile)"][fill="#ffffff"], +rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"] { + fill: var(--status-offline); +} + +rect[fill="#593695"], +path[fill="#593695"], +rect[fill="rgba(89, 54, 149, 1)"], +rect[mask="url(#svg-mask-status-streaming)"][fill="#ffffff"], +rect[mask="url(#svg-mask-status-streaming-mobile)"][fill="#ffffff"], +rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { + fill: var(--status-streaming); +} + +[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-"]), +[class^="slider-"] [class^="bar-"] [class^="barFill-"], +[class^="control-"] + [class^="container-"][style*="background-color: rgb(67, 181, 129);"] { + background-color: #{colors.$accent} !important; +} + +[style*="border-color: rgb(114, 137, 218)"], +[class*="lookOutlined-"][class*="colorBrand-"] { + border-color: #{colors.$accent} !important; +} + +[class*="lookOutlined-"][class*="colorBrand-"], +[class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"], +[class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"], +[class*="colorDefault-"][class*="focused-"] [class^="check-"] { + color: #{colors.$accent} !important; +} + +[class*="mentioned-"]:before { + background-color: #{colors.$accent}; +} + +[class^="slider-"] [class^="bar-"], +[class^="control-"] + [class^="container-"][style*="background-color: rgb(114, 118, 125);"] { + background-color: var(--background-secondary) !important; +} + +.mention[class*="wrapper-"] { + color: #{colors.$accent}; + background: #{$mention-bg}; +} + +.mention[class*="wrapper-"]:hover { + color: #ffffff; + background: #{colors.$accent}; +} + +[class*="mentioned-"] .mention.interactive:hover { + color: #{colors.$accent} !important; +} + +[class^="mediaBarGrabber-"], +[class^="mediaBarProgress-"], +[class^="mediaBarProgress-"]:after, +[class^="mediaBarProgress-"]:before { + background-color: #{colors.$accent} !important; +} + +[class^="reaction-"] { + background-color: var(--background-secondary); + border: none; + border-radius: 4px !important; +} + +[class^="reaction-"]:hover, +[class^="reaction-"][class*="reactionMe-"] { + background-color: #{colors.$highlight}; +} + +[class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], +[class^="reaction-"]:hover [class*="reactionCount-"] { + color: var(--white-500) !important; +} + +[class^="reaction-"] [class*="reactionCount-"] { + color: var(--text-normal); +} + +[class*="progressBarHeader-"] > [class^="container-"]:not([class*="checked-"]), +[class^="control-"] > [class^="container-"]:not([class*="checked-"]) { + background-color: #{colors.$highlight} !important; +} +[class*="progressBarHeader-"] > [class^="container-"][class*="checked-"], +[class^="control-"] > [class^="container-"][class*="checked-"] { + background-color: #{colors.$c2} !important; +} + +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { + --radio-bar-accent-color: #{colors.$c2} !important; +} +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] { + --radio-bar-accent-color: #{colors.$c3} !important; +} +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { + --radio-bar-accent-color: #{colors.$c1} !important; +} + +span[style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);"] { + background-color: #{colors.$accent} !important; +} +span[style*="background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { + background-color: #{colors.$c1} !important; +} + +[class^="updateIconForeground-"] { + fill: #{colors.$c2}; +} + +[class*="tierHeaderLocked-"], +[class*="tierHeaderUnlocked-"] { + background-color: var(--background-secondary) !important; +} + +[class*="tierAccomplished-"], +[class*="tierCurrent-"], +[class*="tierFirst-"] { + background: #{colors.$c13} !important; +} + +[class^="progressWithSubscriptions-"] > svg > g > rect[class^="background-"] { + color: var(--background-secondary); +} + +[class^="tierIcon-"], +[class^="unlockedIcon-"], +[class^="progressWithSubscriptions-"] > svg > g > rect[class^="foreground-"] { + color: #{colors.$c13} !important; +} +svg[fill="#FF73FA"] { + fill: #{colors.$c13} !important; +} + +[class^="activeCircle-"] { + background-color: #{colors.$c2} !important; +} + +[class*="allow-"][class*="selected-"] { + background-color: var(--status-positive) !important; +} + +[class^="item-"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { + background-color: #{colors.$c2} !important; +} + +[class*="unreadBar-"][class*="mention-"], +[class^="numberBadge-"] { + background-color: #{colors.$c1} !important; +} + +[class*="bar-"][class*="mention-"] { + background-color: #{colors.$c1}; +} + +a[class^="anchor-"]:not([aria-controls^="popout_"]) { + color: var(--text-link) !important; +} + +.theme-light [class*="button-"][class*="lookFilled-"][class*="colorPrimary-"] { + color: var(--text-normal) !important; +} + +.postnet-repo-wrapper, +.postnet-expanded-category { + border-color: var(--background-tertiary) !important; + background: var(--deprecated-card-bg) !important; +} + +.hh2-spotify-controls-album-name, +.showTag-username { + color: #{colors.$highlight} !important; +} + +[class^="markdown-"] [class^="codeInline-"], +code.inline, +.hljs { + color: #{colors.$c7} !important; +} +[class^="markdown-"] code, +.hljs { + background: var(--background-secondary) !important; +} +.hljs-keyword { + color: #{colors.$c5} !important; +} +.hljs-built_in { + color: #{colors.$c6} !important; +} +.hljs-type { + color: #{colors.$c3} !important; +} +.hljs-literal { + color: #{colors.$c3} !important; +} +.hljs-number { + color: #{colors.$c3} !important; +} +.hljs-regexp { + color: #{colors.$c6} !important; +} +.hljs-string { + color: #{colors.$c2} !important; +} +.hljs-subst { + color: #{colors.$c1} !important; +} +.hljs-symbol { + color: #{colors.$c5} !important; +} +.hljs-class { + color: #{colors.$c3} !important; +} +.hljs-function { + color: #{colors.$c4} !important; +} +.hljs-title { + color: #{colors.$c4} !important; +} +.hljs-params { + color: #{colors.$c1} !important; +} +.hljs-comment { + color: #{colors.$highlight} !important; +} +.hljs-doctag { + color: #{colors.$c7} !important; +} +.hljs-meta { + color: #{colors.$c1} !important; +} +.hljs-meta-keyword { + color: #{colors.$c3} !important; +} +.hljs-meta-string { + color: #{colors.$c2} !important; +} +.hljs-section { + color: #{colors.$c4} !important; +} +.hljs-tag { + color: #{colors.$c7} !important; +} +.hljs-name { + color: #{colors.$c1} !important; +} +.hljs-builtin-name { + color: #{colors.$c7} !important; +} +.hljs-attr { + color: #{colors.$c3} !important; +} +.hljs-attribute { + color: #{colors.$c7} !important; +} +.hljs-variable { + color: #{colors.$c1} !important; +} +.hljs-bullet { + color: #{colors.$c1} !important; +} +.hljs-code { + color: #{colors.$c2} !important; +} +.hljs-emphasis { + color: #{colors.$c5} !important; +} +.hljs-strong { + color: #{colors.$c3} !important; +} +.hljs-formula { + color: #{colors.$c7} !important; +} +.hljs-link { + color: #{colors.$c3} !important; +} +.hljs-quote { + color: #{colors.$c3} !important; +} +.hljs-selector-tag { + color: #{colors.$c1} !important; +} +.hljs-selector-id { + color: #{colors.$c4} !important; +} +.hljs-selector-class { + color: #{colors.$c3} !important; +} +.hljs-selector-attr { + color: #{colors.$c4} !important; +} +.hljs-selector-pseudo { + color: #{colors.$c3} !important; +} +.hljs-template-tag { + color: #{colors.$c7} !important; +} +.hljs-template-variable { + color: #{colors.$c7} !important; +} +.hljs-addition { + color: #a6e22e !important; + background: #384c10 !important; +} +.hljs-deletion { + color: #f92672 !important; + background: #4c0c23 !important; +} +.hljs-operator { + color: #{colors.$c7} !important; +} +.hljs-pattern-match { + color: #{colors.$c7} !important; +} +.hljs-typing { + color: #{colors.$c7} !important; +} +.hljs-constructor { + color: #{colors.$c7} !important; +} +.hljs-module-access { + color: #{colors.$c7} !important; +} +.hljs-module { + color: #{colors.$c7} !important; +} +.hljs-ansi-foreground-black [class^="hljs-ansi-background-"], +.hljs-ansi-foreground-black { + color: #{colors.$c0} !important; +} +.hljs-ansi-foreground-red { + color: #{colors.$c1} !important; +} +.hljs-ansi-foreground-green { + color: #{colors.$c2} !important; +} +.hljs-ansi-foreground-yellow { + color: #{colors.$c3} !important; +} +.hljs-ansi-foreground-blue { + color: #{colors.$c4} !important; +} +.hljs-ansi-foreground-magenta { + color: #{colors.$c5} !important; +} +.hljs-ansi-foreground-cyan { + color: #{colors.$c6} !important; +} +.hljs-ansi-foreground-white [class^="hljs-ansi-background-"], +.hljs-ansi-foreground-white { + color: #{colors.$c7} !important; +} +.hljs-ansi-foreground-black .hljs-ansi-style-bold, +.hljs-ansi-foreground-black.hljs-ansi-style-bold { + color: #{colors.$c8} !important; +} +.hljs-ansi-foreground-red .hljs-ansi-style-bold, +.hljs-ansi-foreground-red.hljs-ansi-style-bold { + color: #{colors.$c9} !important; +} +.hljs-ansi-foreground-green .hljs-ansi-style-bold, +.hljs-ansi-foreground-green.hljs-ansi-style-bold { + color: #{colors.$c10} !important; +} +.hljs-ansi-foreground-yellow .hljs-ansi-style-bold, +.hljs-ansi-foreground-yellow.hljs-ansi-style-bold { + color: #{colors.$c11} !important; +} +.hljs-ansi-foreground-blue .hljs-ansi-style-bold, +.hljs-ansi-foreground-blue.hljs-ansi-style-bold { + color: #{colors.$c12} !important; +} +.hljs-ansi-foreground-magenta .hljs-ansi-style-bold, +.hljs-ansi-foreground-magenta.hljs-ansi-style-bold { + color: #{colors.$c13} !important; +} +.hljs-ansi-foreground-cyan .hljs-ansi-style-bold, +.hljs-ansi-foreground-cyan.hljs-ansi-style-bold { + color: #{colors.$c14} !important; +} +.hljs-ansi-foreground-white .hljs-ansi-style-bold, +.hljs-ansi-foreground-white.hljs-ansi-style-bold { + color: #{colors.$c15} !important; +} +.hljs-ansi-background-black { + background-color: #{colors.$c0} !important; +} +.hljs-ansi-background-red { + background-color: #{colors.$c1} !important; +} +.hljs-ansi-background-green { + background-color: #{colors.$c2} !important; +} +.hljs-ansi-background-yellow { + background-color: #{colors.$c3} !important; +} +.hljs-ansi-background-blue { + background-color: #{colors.$c4} !important; +} +.hljs-ansi-background-magenta { + background-color: #{colors.$c5} !important; +} +.hljs-ansi-background-cyan { + background-color: #{colors.$c6} !important; +} +.hljs-ansi-background-white { + background-color: #{colors.$c7} !important; +} diff --git a/src/compact.scss b/src/compact.scss new file mode 100644 index 0000000..d788f8c --- /dev/null +++ b/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; + } +} diff --git a/src/context_menu.scss b/src/context_menu.scss new file mode 100644 index 0000000..ca28c2f --- /dev/null +++ b/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; +} diff --git a/src/cozy_compact.scss b/src/cozy_compact.scss new file mode 100644 index 0000000..8f916e3 --- /dev/null +++ b/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)); +} diff --git a/src/embeds.css b/src/embeds.css new file mode 100644 index 0000000..6270667 --- /dev/null +++ b/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; +} diff --git a/src/font.css b/src/font.css new file mode 100644 index 0000000..4e090cc --- /dev/null +++ b/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; +} diff --git a/src/italics.css b/src/italics.css new file mode 100644 index 0000000..418a5b7 --- /dev/null +++ b/src/italics.css @@ -0,0 +1,4 @@ +span[data-slate-leaf="true"][class*="italics-"], +em { + color: #f80; +} diff --git a/src/member_list.scss b/src/member_list.scss new file mode 100644 index 0000000..c1c4234 --- /dev/null +++ b/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; + } + } +} diff --git a/src/private_channels.scss b/src/private_channels.scss new file mode 100644 index 0000000..7cf6d1f --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/src/textbox.scss b/src/textbox.scss new file mode 100644 index 0000000..578ff06 --- /dev/null +++ b/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%; +} diff --git a/src/voice_rings.css b/src/voice_rings.css new file mode 100644 index 0000000..6035965 --- /dev/null +++ b/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; +} diff --git a/src/wide_settings.css b/src/wide_settings.css new file mode 100644 index 0000000..723fe89 --- /dev/null +++ b/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; +}