├── .github ├── emojis.webp ├── oldcontext.webp ├── preview.webp ├── previewLight.webp └── showeffects.webp ├── OldCord.theme.css ├── README.md └── src ├── assets ├── DiscordWordmark.svg ├── battle.webp ├── bold.woff2 ├── cursive.woff2 ├── cursiveBold.woff2 ├── employee.svg ├── epic.svg ├── facebook.webp ├── gif_tag.svg ├── github.svg ├── kindaBold.woff2 ├── league.webp ├── mod.svg ├── normal.woff2 ├── normal600.woff2 ├── normal700.woff2 ├── oldHoldingBack.svg ├── oldPlead.svg ├── partner.svg ├── playstation.svg ├── reddit.webp ├── riot.svg ├── shapes.jpg ├── skype.webp ├── spotify.svg ├── steam.svg ├── system.svg ├── thin.woff2 ├── twitch.webp ├── twitter.webp ├── veryBold.woff2 ├── xbox.svg └── youtube.webp ├── components ├── color.css ├── imgs.css ├── miyamoto.css ├── oldContext.css ├── oldEmojis.css ├── other.css ├── profile.css ├── profileV2.css ├── redesign.css ├── showEffects.css └── vars.css └── main.css /.github/emojis.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/.github/emojis.webp -------------------------------------------------------------------------------- /.github/oldcontext.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/.github/oldcontext.webp -------------------------------------------------------------------------------- /.github/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/.github/preview.webp -------------------------------------------------------------------------------- /.github/previewLight.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/.github/previewLight.webp -------------------------------------------------------------------------------- /.github/showeffects.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/.github/showeffects.webp -------------------------------------------------------------------------------- /OldCord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name OldCord 3 | * @version 2.0 4 | * @author milbit, kinggamingyt 5 | * @source https://github.com/milbits/oldcord 6 | * @website https://github.com/milbits/oldcord 7 | * @description Restores discord's 2020 UI 8 | */ 9 | 10 | /*Main theme components*/ 11 | @import url("https://milbits.github.io/oldcord/src/main.css"); 12 | 13 | /*If you want to enable/disable each part (like disable profile theming), remove the above line 14 | and a [slash]* below. Always enable vars.css though please please pelasse plealslelle*/ 15 | 16 | /* @import url("https://milbits.github.io/oldcord/src/components/vars.css"); */ /* !IMPORTANT! */ 17 | /* @import url("https://milbits.github.io/oldcord/src/components/color.css"); */ 18 | /* @import url("https://milbits.github.io/oldcord/src/components/imgs.css"); */ 19 | /* @import url("https://milbits.github.io/oldcord/src/components/other.css"); */ 20 | /* @import url("https://milbits.github.io/oldcord/src/components/profile.css"); */ 21 | /* @import url("https://milbits.github.io/oldcord/src/components/redesign.css"); */ /*Changes the overall layout*/ 22 | 23 | 24 | /* 25 | * Addons 26 | * remove a "/*" below to enable one 27 | */ 28 | 29 | /*@import url("https://milbits.github.io/oldcord/src/components/oldEmojis.css");*/ 30 | /*@import url("https://milbits.github.io/oldcord/src/components/oldContext.css");*/ 31 | /*@import url("https://milbits.github.io/oldcord/src/components/showEffects.css");*/ 32 | 33 | 34 | /*this one sucks dont use it*/ 35 | /*@import url("https://milbits.github.io/oldcord/src/components/miyamoto.css");*/ 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OldCord 2 | 3 | A theme for Discord that brings the **2020** (NOT pre-2025 refresh) UI back without removing features 4 | 5 | By default, it completely removes profile effects (like banners). See addons below to get them back! 6 | 7 | ![Preview](https://raw.githubusercontent.com/milbits/oldcord/master/.github/preview.webp) 8 | 9 | > [!IMPORTANT] 10 | > - Enable "Sync Profile Themes" in `Settings > Accessibility` to fix broken profile colors 11 | > - UI Density should be on default, i wont support the other 2 options (they still kinda work though) 12 | > - To have the old gray colors, use the "Ash" theme in appearance settings 13 | 14 |
Light mode (shit) 15 | 16 | Light mode is currently not properly supported, please give me a trillion euros so i work on it :3 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 |

Addons

 25 | 26 | ## By OldCord 27 | 28 | These are usually included in oldcord.theme.css, so all you need to do is remove `/*` in the file for each addon you want to use 29 | 30 | | Name | Preview | CSS | 31 | | ---------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | 32 | | Old Plead Emoji | ![Image](https://raw.githubusercontent.com/milbits/oldcord/master/.github/emojis.webp) | `@import url("https://milbits.github.io/oldcord/src/components/oldEmojis.css");` | 33 | | Context Menu hover bg. | | `@import url("https://milbits.github.io/oldcord/src/components/oldContext.css");` | 34 | | Show Profile Cosmetics (Light theme not supported for now) | ![Image](https://raw.githubusercontent.com/milbits/oldcord/master/.github/showeffects.webp) | `@import url("https://milbits.github.io/oldcord/src/components/showEffects.css");` | 35 | | HeaderPresence | ![Image](https://github.com/user-attachments/assets/1a809f81-0d76-4146-ad25-941b4332bcbd) | https://betterdiscord.app/plugin/HeaderPresence | 36 | | [Tanza3D & KingGamingYT's NoMosaic plugin (BetterDiscord)](https://github.com/KingGamingYT/discord-no-mosaic) | Restores the old image layout | 37 | 38 | If you use custom/quickcss, paste the CSS at the very top! 39 | 40 | ## 3rd party 41 | 42 | | Name | Description | 43 | | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | 44 | | [Vencord's NoMosaic plugin](https://vencord.dev/plugins/NoMosaic) | Restores the old image layout | 45 | | [NoSuperReactions](https://github.com/xenrelle/Xens-BD-Dump/tree/main/plugins/NoSuperReactions) | Removes super reactions | 46 | | [OldFileUpload](https://github.com/xenrelle/Xens-BD-Dump/tree/main/plugins/OldFileUpload) | Open the file picker with just one click | 47 | | [hide-nitro-upselling](https://github.com/D3SOX/complementary-discord-theme/blob/master/hide-nitro-upselling.betterdiscord.theme.css) | Hides nitro ads, could cause lag | 48 | | [Icon Revert](https://github.com/davart154/Icon-Revert-2023/blob/main/2023%20Icon%20Revert.theme.css) | Reverts all icons to pre-2023. Can cause huge lag (see #37) | 49 | 50 | --- 51 | 52 |
53 | 54 | # Installation 55 | 56 | ## 🚮[BetterDiscord](https://betterdiscord.app/) 57 | 58 | 1. Download [OldCord.theme.css](https://raw.githubusercontent.com/milbits/oldcord/main/OldCord.theme.css) (right-click > "Save As") 59 | 2. Save the file to the BetterDiscord theme folder: 60 | 61 | - Windows: `%appdata%/BetterDiscord/themes` 62 | - Linux: `~/.config/BetterDiscord/themes` 63 | 64 | ## 😺[Vencord](https://github.com/Vendicated/Vencord) 65 | 66 | #### Local method 67 | 68 | 1. Download [OldCord.theme.css](https://raw.githubusercontent.com/milbits/oldcord/main/OldCord.theme.css) (right-click > "Save As") 69 | 2. Move the file to the Vencord theme folder: 70 | 71 | - `Settings > Themes > Open theme folder` 72 | 73 | #### Online method 74 | 75 | Paste the following in `Settings > Themes`: 76 | 77 | - `https://milbits.github.io/oldcord/src/main.css` 78 | 79 | ## 🎛️ Other 80 | 81 | 1. Paste the following at **the top** of the CSS file/window: 82 | 83 | ```css 84 | @import url("https://milbits.github.io/oldcord/src/main.css"); 85 | ``` 86 | 87 | 88 | -------------------------------------------------------------------------------- /src/assets/DiscordWordmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/assets/battle.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/battle.webp -------------------------------------------------------------------------------- /src/assets/bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/bold.woff2 -------------------------------------------------------------------------------- /src/assets/cursive.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/cursive.woff2 -------------------------------------------------------------------------------- /src/assets/cursiveBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/cursiveBold.woff2 -------------------------------------------------------------------------------- /src/assets/employee.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/epic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/facebook.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/facebook.webp -------------------------------------------------------------------------------- /src/assets/gif_tag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/kindaBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/kindaBold.woff2 -------------------------------------------------------------------------------- /src/assets/league.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/league.webp -------------------------------------------------------------------------------- /src/assets/mod.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/normal.woff2 -------------------------------------------------------------------------------- /src/assets/normal600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/normal600.woff2 -------------------------------------------------------------------------------- /src/assets/normal700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/normal700.woff2 -------------------------------------------------------------------------------- /src/assets/oldHoldingBack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/oldPlead.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/partner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/playstation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/reddit.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/reddit.webp -------------------------------------------------------------------------------- /src/assets/riot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/shapes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/shapes.jpg -------------------------------------------------------------------------------- /src/assets/skype.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/skype.webp -------------------------------------------------------------------------------- /src/assets/spotify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/steam.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/system.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/thin.woff2 -------------------------------------------------------------------------------- /src/assets/twitch.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/twitch.webp -------------------------------------------------------------------------------- /src/assets/twitter.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/twitter.webp -------------------------------------------------------------------------------- /src/assets/veryBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/veryBold.woff2 -------------------------------------------------------------------------------- /src/assets/xbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/youtube.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milbits/oldcord/e28eaba35c0e3e3947cc1f43ed29eb2c4c727db5/src/assets/youtube.webp -------------------------------------------------------------------------------- /src/components/color.css: -------------------------------------------------------------------------------- 1 | /*WIP: clean that shit up jesus christtdfgnbijsdfbgbdfsguoibsd*/ 2 | /* 3 | [fill="#3ba55c"], 4 | [fill="#3BA55C"], 5 | [fill="rgba(59, 165, 92, 1)"], 6 | [fill="#23a55a"], 7 | [fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], 8 | [fill="rgba(35, 165, 90, 1)"] { 9 | fill: var(--green) !important; 10 | } 11 | [style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"], 12 | [style*="background-color: rgb(59, 165, 92);"], 13 | [style="background: rgb(35 165 90);"] { 14 | background-color: var(--green) !important; 15 | } 16 | [style*="color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"]:not(.themed-2-lozF) { 17 | color: var(--green) !important; 18 | } 19 | 20 | [fill="#3ba55c"], 21 | [style="background-color: rgb(237, 66, 69);"], 22 | .red_f1ceac { 23 | background-color: var(--red) !important; 24 | } 25 | .topGuildEmojiBadge_aeaaeb { 26 | background: var(--red); 27 | } 28 | [fill="#ed4245"] { 29 | fill: var(--red); 30 | } 31 | 32 | [fill="#6370f4"] { 33 | fill: var(--brand-experiment-530); 34 | } 35 | [fill="#5865f2"], 36 | [fill="#5865F2"], 37 | [fill="hsl(234.94,85.56%,64.71%)"], 38 | [fill="hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%)"] { 39 | fill: var(--brand-experiment); 40 | } 41 | [style^="color: rgb(88, 101, 242);"] { 42 | color: var(--brand-experiment) !important; 43 | } 44 | 45 | [style*="background-color: rgb(88, 101, 242);"], 46 | .lookFilled__201d5.colorBrand__201d5:disabled, 47 | [style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);"], 48 | .barFill_a562c8 { 49 | background-color: var(--brand-experiment) !important; 50 | } 51 | 52 | [fill="#23a55a"] { 53 | fill: var(--green) !important; 54 | } 55 | */ 56 | /*discovery and add button*/ 57 | .circleIcon__5bc7e{ 58 | color: var(--green); 59 | .selected__5bc7e &{ 60 | color:#fff 61 | } 62 | } 63 | .circleIconButton__5bc7e.selected__5bc7e{ 64 | color: #fff; 65 | background-color: var(--green) 66 | } 67 | 68 | 69 | :is(.lookFilled__201d5.colorBrand__201d5, .lookFilled__201d5.colorBrand__201d5:disabled) { 70 | background-color: var(--blurple); 71 | &:hover { 72 | background-color: var(--blurple-hover) !important; 73 | } 74 | &:active { 75 | background-color: var(--blurple-active) !important; 76 | } 77 | } 78 | 79 | /*context menu*/ 80 | .colorDefault_c1e9c4.focused_c1e9c4 { 81 | background: var(--brand-experiment-560); 82 | &:active { 83 | background: var(--brand-experiment-600) !important; 84 | } 85 | } 86 | /** Dropdown*/ 87 | .popout__3f413{ 88 | background: var(--background-secondary); 89 | margin-top: 0 !important; 90 | border: none; 91 | border-radius: 0 0px 4px 4px !important; 92 | box-shadow:var(--legacy-elevation-border), var(--legacy-elevation-high); 93 | } 94 | .option__3f413 { 95 | color: var(--interactive-active) !important; 96 | &:is(:hover, :focus) { 97 | background-color: var(--background-secondary-alt) !important; 98 | } 99 | &[aria-selected="true"] { 100 | background-color: var(--background-tertiary) !important; 101 | } 102 | } 103 | 104 | .lookFilled__201d5.colorRed__201d5, 105 | .colorDanger_c1e9c4.focused_c1e9c4 { 106 | background-color: var(--red); 107 | &:hover { 108 | background-color: var(--red-hover); 109 | } 110 | &:active { 111 | background-color: var(--red-active) !important; 112 | } 113 | } 114 | 115 | .buttonColor_e131a9 { 116 | background-color: var(--background-primary) !important; 117 | color: var(--interactive-active); 118 | &:hover { 119 | background-color: var(--background-secondary) !important; 120 | } 121 | } 122 | 123 | .tipTitle_a2f514 { 124 | color: var(--brand-experiment) !important; 125 | } 126 | 127 | /*.lookOutlined__201d5.colorGreen__201d5:not(:hover):not(:active) { 128 | border-color: hsla(153, calc(var(--saturation-factor, 1) * 46%), 49%, 0.302); 129 | }*/ 130 | 131 | .lookFilled__201d5.colorGreen__201d5 { 132 | background-color: var(--green); 133 | &:hover { 134 | background-color: var(--green-hover); 135 | } 136 | &:active { 137 | background-color: var(--green-active); 138 | } 139 | } 140 | 141 | /* Green Speaking Border in Maximized Voice Chats */ 142 | .border__2f4f7.speaking__2f4f7 { 143 | box-shadow: inset 0 0 0 2px var(--green-360); 144 | } 145 | 146 | .newlyAddedBadge_aeaaeb { 147 | background: var(--green); 148 | } 149 | 150 | .button_e131a9 .buttonColor_e131a9:disabled { 151 | background-color: var(--background-primary); 152 | color: var(--interactive-active); 153 | opacity: 0.3; 154 | } 155 | 156 | .lookOutlined__201d5.colorPrimary__201d5 { 157 | color: var(--interactive-active) !important; 158 | border-color: var(--interactive-active) !important; 159 | } 160 | .lookOutlined__201d5.colorPrimary__201d5:hover { 161 | background: none; 162 | } 163 | .lookOutlined__201d5.colorPrimary__201d5:active { 164 | background-color: var(--primary-transparent); 165 | } 166 | 167 | /*.folderIconWrapper__48112[style="background-color: rgba(88, 101, 242, 0.4);"] { 168 | background-color: var(--brand-experiment-40a) !important; 169 | }*/ 170 | 171 | .mentionButton__841c8 { 172 | --text-link: var(--brand-experiment); 173 | } 174 | 175 | /** Add Friend Chip*/ 176 | .addFriend__133bf.selected_b3f026 { 177 | color: var(--green) !important; 178 | background-color: var(--green-transparent) !important; 179 | } 180 | .addFriend__133bf { 181 | background-color: var(--green) !important; 182 | } 183 | 184 | .barFill-2Bh7CX { 185 | background: var(--brand-experiment); 186 | height: 100%; 187 | } 188 | 189 | .partnered__09691:not(.disableColor-2z9rkr) { 190 | color: var(--brand-experiment); 191 | } 192 | 193 | /**Search page*/ 194 | /*search menu thing*/ 195 | .container__55c99 { 196 | background: var(--bg-overlay-3, var(--background-primary)); 197 | } 198 | .container__55c99 .option__56fec:hover { 199 | background: var(--bg-overlay-1, var(--background-tertiary)); 200 | } 201 | /*search results*/ 202 | .searchHeader_f3b986 { 203 | background: var(--bg-overlay-chat); 204 | box-shadow: var(--elevation-low); 205 | height: 48px; 206 | padding: 0 20px; 207 | } 208 | .searchHeaderTabList_f3b986 [aria-selected="true"] { 209 | box-shadow: inset 0 -2px var(--interactive-active); 210 | } 211 | .searchHeaderTabList_f3b986 .item_b3f026 { 212 | padding: 15px 8px; 213 | border-radius: 0; 214 | background-color: transparent !important; 215 | font-size: 14px; 216 | border-radius: 0 !important; 217 | } 218 | 219 | .searchResultGroup_c68065:before { 220 | content: ""; 221 | width: 100%; 222 | height: 1px; 223 | display: block; 224 | background: var(--background-modifier-accent); 225 | position: relative; 226 | top: 12px; 227 | } 228 | 229 | .searchResult__02a39 { 230 | border: solid 1px var(--background-tertiary); 231 | border-radius: 4px; 232 | } 233 | 234 | /** Mentions/Pings*/ 235 | .wrapper_f61d60 { 236 | font-weight: 500; 237 | color: var(--brand-experiment-460); 238 | background: var(--brand-experiment-10a); 239 | padding: 0 2px; 240 | } 241 | .wrapper_f61d60:hover { 242 | background: var(--brand-experiment); 243 | color: var(--brand-experiment-100); 244 | } 245 | 246 | .interactive { 247 | transition: background-color 50ms ease-out, color 50ms ease-out; 248 | cursor: pointer; 249 | text-decoration: none !important; 250 | } 251 | .mentioned__5126c .interactive { 252 | /* make background transparent when mentioned*/ 253 | background: transparent; 254 | } 255 | .interactive:hover { 256 | color: var(--white-500); 257 | background-color: var(--brand-experiment); 258 | } 259 | 260 | .icon_b75563:has( 261 | [d="M10.99 3.16A1 1 0 1 0 9 2.84L8.15 8H4a1 1 0 0 0 0 2h3.82l-.67 4H3a1 1 0 1 0 0 2h3.82l-.8 4.84a1 1 0 0 0 1.97.32L8.85 16h4.97l-.8 4.84a1 1 0 0 0 1.97.32l.86-5.16H20a1 1 0 1 0 0-2h-3.82l.67-4H21a1 1 0 1 0 0-2h-3.82l.8-4.84a1 1 0 1 0-1.97-.32L15.15 8h-4.97l.8-4.84ZM14.15 14l.67-4H9.85l-.67 4h4.97Z"] 262 | ) { 263 | display: none; 264 | } 265 | .channelWithIcon:has( 266 | [d="M10.99 3.16A1 1 0 1 0 9 2.84L8.15 8H4a1 1 0 0 0 0 2h3.82l-.67 4H3a1 1 0 1 0 0 2h3.82l-.8 4.84a1 1 0 0 0 1.97.32L8.85 16h4.97l-.8 4.84a1 1 0 0 0 1.97.32l.86-5.16H20a1 1 0 1 0 0-2h-3.82l.67-4H21a1 1 0 1 0 0-2h-3.82l.8-4.84a1 1 0 1 0-1.97-.32L15.15 8h-4.97l.8-4.84ZM14.15 14l.67-4H9.85l-.67 4h4.97Z"] 267 | ) 268 | > .name_b75563:before { 269 | content: "#"; 270 | } 271 | 272 | /** Log Out, Server Boost, Delete Server Buttons*/ 273 | .side_b3f026 .item_b3f026 { 274 | border-radius: 3px; 275 | } 276 | .side_b3f026 277 | .themed_b3f026.item_b3f026:has( 278 | [d="M15.3 16.7a1 1 0 0 1 1.4-1.4l4.3 4.29V16a1 1 0 1 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 1 1 0-2h3.59l-4.3-4.3Z"], 279 | [d="M14.25 1c.41 0 .75.34.75.75V3h5.25c.41 0 .75.34.75.75v.5c0 .41-.34.75-.75.75H3.75A.75.75 0 0 1 3 4.25v-.5c0-.41.34-.75.75-.75H9V1.75c0-.41.34-.75.75-.75h4.5Z"] 280 | ) { 281 | color: var(--red) !important; 282 | } 283 | .side_b3f026 284 | .themed_b3f026.item_b3f026:has( 285 | [d="M15.3 16.7a1 1 0 0 1 1.4-1.4l4.3 4.29V16a1 1 0 1 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 1 1 0-2h3.59l-4.3-4.3Z"], 286 | [d="M14.25 1c.41 0 .75.34.75.75V3h5.25c.41 0 .75.34.75.75v.5c0 .41-.34.75-.75.75H3.75A.75.75 0 0 1 3 4.25v-.5c0-.41.34-.75.75-.75H9V1.75c0-.41.34-.75.75-.75h4.5Z"] 287 | ):hover { 288 | background-color: var(--red-transparent) !important; 289 | } 290 | .side_b3f026 291 | .themed_b3f026.item_b3f026:has( 292 | [d="M15.3 16.7a1 1 0 0 1 1.4-1.4l4.3 4.29V16a1 1 0 1 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 1 1 0-2h3.59l-4.3-4.3Z"], 293 | [d="M14.25 1c.41 0 .75.34.75.75V3h5.25c.41 0 .75.34.75.75v.5c0 .41-.34.75-.75.75H3.75A.75.75 0 0 1 3 4.25v-.5c0-.41.34-.75.75-.75H9V1.75c0-.41.34-.75.75-.75h4.5Z"] 294 | ):active { 295 | background-color: var(--red) !important; 296 | color: var(--white-500) !important; 297 | } 298 | 299 | .side_b3f026 .themed_b3f026.item_b3f026:has([d="M5 0.5L0 5.5V10.5L5 15.5L10 10.5V5.5L5 0.5ZM8.75 9.9875L5 13.7375L1.25 9.9875V6.0125L5 2.2625L8.75 6.0125V9.9875Z"]) { 300 | color: var(--blurple) !important; 301 | } 302 | .side_b3f026 .themed_b3f026.item_b3f026:has([d="M5 0.5L0 5.5V10.5L5 15.5L10 10.5V5.5L5 0.5ZM8.75 9.9875L5 13.7375L1.25 9.9875V6.0125L5 2.2625L8.75 6.0125V9.9875Z"]):hover { 303 | background-color: var(--brand-experiment-10a) !important; 304 | } 305 | .side_b3f026 306 | .themed_b3f026.item_b3f026:has([d="M5 0.5L0 5.5V10.5L5 15.5L10 10.5V5.5L5 0.5ZM8.75 9.9875L5 13.7375L1.25 9.9875V6.0125L5 2.2625L8.75 6.0125V9.9875Z"]):active { 307 | color: var(--white-500) !important; 308 | background-color: var(--blurple) !important; 309 | } 310 | 311 | /*! Reactions*/ 312 | /*selectors for forums and normal messages*/ 313 | 314 | @keyframes reactionAnim { 315 | 0% { 316 | transform: scale(0); 317 | } 318 | 100% { 319 | transform: scale(1); 320 | } 321 | } 322 | .reactions__23977 { 323 | padding-top: 0; 324 | margin-top: -0.125rem; 325 | } 326 | .reaction_f8896c, 327 | .reaction__23977, 328 | .reactionBtn__23977 { 329 | animation: cubic-bezier(0.1, 1, 0.9, 1.1) reactionAnim 0.1s; 330 | animation-iteration-count: var(--reaction-animation, 0); 331 | } 332 | .theme-dark .reactionBtn__23977 { 333 | border-radius: 2px; 334 | margin-bottom: 1px; 335 | background: none; 336 | border: none; 337 | } 338 | .reactionBtn__23977.forceShowLook_ec6b19:hover { 339 | background-color: unset; 340 | } 341 | 342 | .reaction_f8896c, 343 | .reaction__23977 { 344 | border-radius: 0.25rem; 345 | border: none; 346 | margin-bottom: 0.125rem; 347 | transition: background-color 0.1s ease; 348 | background: var(--background-modifier-accent) !important; 349 | &:hover { 350 | background-color: var(--background-modifier-selected) !important; 351 | } 352 | } 353 | .reaction_f8896c:hover, 354 | .reaction__23977:hover { 355 | background-color: var(--background-modifier-selected) !important; 356 | } 357 | .mentioned__5126c .reaction_f8896c, 358 | .mentioned__5126c .reaction_f8896c:hover { 359 | background-color: var(--background-modifier-accent); 360 | } 361 | 362 | .reaction__23977:hover .reactionCount__23977, 363 | .reaction_f8896c:hover .reactionCount_f8896c { 364 | color: var(--interactive-active) !important; 365 | } 366 | 367 | .mentioned__5126c .reaction_f8896c.reactionMe_f8896c, 368 | .mentioned__5126c .reactionMe_f8896c.reaction_f8896c:hover, 369 | .reaction_f8896c.reactionMe_f8896c, 370 | .reaction__23977.reactionMe__23977 { 371 | background-color: var(--brand-experiment-30a) !important; 372 | } 373 | 374 | .reactionInner__23977, 375 | .reaction_f8896c.reactionInner_f8896c { 376 | padding: 0 0.375rem !important; 377 | } 378 | .reaction_f8896c.reactionMe_f8896c .reactionCount_f8896c, 379 | .reaction__23977.reactionMe__23977 .reactionCount__23977 { 380 | color: var(--brand-experiment) !important; 381 | } 382 | 383 | .reactionCount__23977, 384 | .reactionCount_f8896c { 385 | font-weight: 500; 386 | color: var(--text-muted); 387 | } 388 | 389 | /** Select Menus*/ 390 | .select__3f413, 391 | .copyInput_fffc15 { 392 | background-color: var(--background-secondary) !important; 393 | border-radius: 3px; 394 | transition: border 0.2s ease-in-out; 395 | cursor: default; 396 | } 397 | .open__3f413 { 398 | border-color: var(--deprecated-text-input-border-hover) !important; 399 | } 400 | /* icon*/ 401 | .select__3f413 [d="M7.41 16.0001L12 11.4201L16.59 16.0001L18 14.5901L12 8.59006L6 14.5901L7.41 16.0001Z"] { 402 | d: path("M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z"); 403 | } 404 | .icons__3f413 { 405 | color: var(--text-muted); 406 | } 407 | .select__3f413.open__3f413 .icons__3f413 { 408 | color: var(--interactive-active); 409 | } 410 | 411 | /** Close Button*/ 412 | .closeButton_c2b141 [d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"] { 413 | d: path("M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12"); 414 | } 415 | .theme-light .closeButton_c2b141 { 416 | color: #dcddde !important; 417 | background: #0000 !important; 418 | &:hover { 419 | background: #f6f6f7 !important; 420 | color: #dcddde !important; 421 | } 422 | & svg { 423 | color: #72767d !important; 424 | } 425 | } 426 | .theme-dark .closeButton_c2b141 { 427 | color: #72767d !important; 428 | background: #0000 !important; 429 | & svg { 430 | color: #dcddde !important; 431 | transform: scale(1.15); 432 | } 433 | &:hover { 434 | background: #72767e4d !important; 435 | color: #72767d !important; 436 | } 437 | } 438 | .keybind_c2b141 { 439 | color: #72767d !important; 440 | } 441 | 442 | .lookOutlined__201d5.colorBrand__201d5 { 443 | color: var(--brand-experiment) !important; 444 | border-color: var(--brand-experiment) !important; 445 | background: transparent !important; 446 | } 447 | .lookOutlined__201d5.colorBrand__201d5:active { 448 | background: var(--brand-experiment-10a) !important; 449 | } 450 | 451 | .lookOutlined__201d5.colorRed__201d5 { 452 | background: transparent !important; 453 | color: var(--red) !important; 454 | border-color: var(--text-danger) !important; 455 | } 456 | .lookOutlined__201d5.colorRed__201d5:active { 457 | background: var(--red-transparent) !important; 458 | } 459 | 460 | html:not(.custom-theme-background) .icon__2ea32:not(.modeMuted__2ea32 .icon__2ea32) { 461 | color: var(--text-muted); 462 | } 463 | 464 | /* revert new unread bar*/ 465 | .bar__7aaec { 466 | padding-left: 71px; 467 | margin-top: 8px; 468 | width: 146px !important; 469 | background-color: var(--background-accent); 470 | opacity: 0.9; 471 | font-family: var(--font-display); 472 | box-shadow: 0 2px 6px hsl(var(--black-500-hsl) / 0.24); 473 | &:active { 474 | top: 1px; 475 | } 476 | } 477 | 478 | .unread__3b95d { 479 | background-color: var(--background-accent); 480 | opacity: 0.9; 481 | } 482 | .barText__7aaec { 483 | color: var(--white-500) !important; 484 | } 485 | /* unread bar in channels*/ 486 | .newMessagesBar__0f481 { 487 | height: 0; 488 | } 489 | 490 | /* revert tab focus color*/ 491 | .focus-rings-ring { 492 | box-shadow: 0 0 0 4px var(--brand-experiment); 493 | } 494 | 495 | /*channels and roles*/ 496 | .container__0b563, 497 | .header__0b563 { 498 | background-color: var(--background-primary) !important; 499 | } 500 | .channelRow_e4503a:hover { 501 | background-color: var(--background-modifier-hover) !important; 502 | } 503 | 504 | .optionButtonWrapper__270d7 { 505 | transition: 0.1s ease-in-out; 506 | border-radius: 4px; 507 | } 508 | 509 | /** active now in friends tab*/ 510 | .nowPlayingColumn__133bf .container__7d20c, 511 | .profileCard__5d7c9, 512 | .prompt__5d7c9 { 513 | background-color: var(--background-secondary); 514 | } 515 | .scroller__7d20c { 516 | border: none; 517 | } 518 | .nowPlayingColumn__133bf .header__7d20c { 519 | color: var(--header-secondary); 520 | text-transform: uppercase; 521 | font-size: 12px; 522 | margin: 0; 523 | margin-bottom: var(--space-16); 524 | font-weight: 600; 525 | } 526 | .wrapper__00943 { 527 | border: none; 528 | background: var(--background-tertiary); 529 | border-radius: 4px; 530 | } 531 | 532 | /*GIF Selector*/ 533 | .result__2dc39:hover:after { 534 | box-shadow: inset 0 0 0 2px var(--brand-experiment), inset 0 0 0 3px var(--primary-630); 535 | } 536 | .result__2dc39:after { 537 | background: none !important; 538 | z-index: 10; 539 | } 540 | 541 | .categoryFade_d02962 { 542 | background: hsl(var(--black-500-hsl) / 0.4); 543 | transition: background-color.15s ease-out; 544 | &:hover { 545 | backdrop-filter: none; 546 | background: rgba(0, 0, 0, 0.7); 547 | } 548 | } 549 | .categoryFadeBlurple_d02962 { 550 | transition: background-color.15s ease-out; 551 | &:hover { 552 | background: var(--brand-experiment-95a); 553 | backdrop-filter: none; 554 | } 555 | } 556 | -------------------------------------------------------------------------------- /src/components/miyamoto.css: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | --background-primary: url("https://cdn.discordapp.com/attachments/1056211378882498641/1373479248517660703/1200px-Shigeru_Miyamoto_2019-137347526.jpg?ex=682a8fba&is=68293e3a&hm=d2676459a43abc64e361255c86bb54d45ad45a7c752f6107b5c034459375dcd3&") !important; 3 | --background-secondary: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages6.alphacoders.com%2F445%2F445791.jpg&f=1&ipt=3bab04ff81c2291346ac3af3b23f2246360bfce67e047985cf2582dc0eed2d8d") !important; 4 | --background-secondary-alt:url(https://nationaltoday.com/wp-content/uploads/2022/09/Shigeru-Miyamoto.jpg.webp) !important; 5 | --background-tertiary:url("https://cdn.discordapp.com/attachments/1056211378882498641/1373483703233151016/shigeru_miyamoto_cloud-2419184245.jpg?ex=682a93e0&is=68294260&hm=b707e1782f66c68ea57a04ef25713dd84dafbecd7f1146b7839eaeb592665d08&") !important; 6 | --text-normal: red !important; 7 | } 8 | .guilds_c48ade{ 9 | background: url(https://cdn.discordapp.com/attachments/1056211378882498641/1373485850771587113/unknown.png?ex=682a95e0&is=68294460&hm=26b06ab046ec8821d1678637f6f8fa3caaf2111a44b2182fb5799a36961cafec&) 10 | } 11 | .childWrapperNoHoverBg__6e9f8 { 12 | content: url("https://preview.redd.it/official-nintendo-switch-2-logo-with-and-without-background-v0-db06bgkbbfde1.png?width=640&crop=smart&auto=webp&s=43517c3d91972d27bcc50f7d2234e09cf6638834") 13 | } 14 | -------------------------------------------------------------------------------- /src/components/oldContext.css: -------------------------------------------------------------------------------- 1 | .focused_c1e9c4{background-color: var(--background-modifier-hover) !important;} 2 | .focused_c1e9c4.colorDanger_c1e9c4{color: var(--red) !important;background-color: var(--background-modifier-hover) !important;} 3 | -------------------------------------------------------------------------------- /src/components/oldEmojis.css: -------------------------------------------------------------------------------- 1 | /*plead 🥺*/ 2 | [src="/assets/059679850d492e83.svg"]{content: url("https://milbits.github.io/oldcord/src/assets/oldPlead.svg");} 3 | /*holding back 🥹*/ 4 | [src="/assets/5df2da052fc1ddc6.svg"]{content: url("https://milbits.github.io/oldcord/src/assets/oldHoldingBack.svg");} 5 | -------------------------------------------------------------------------------- /src/components/other.css: -------------------------------------------------------------------------------- 1 | /** Fonts*/ 2 | @font-face { 3 | font-family: "Whitney"; 4 | font-weight: 300; 5 | src: url(https://milbits.github.io/oldcord/src/assets/thin.woff2) format("woff2"); 6 | } 7 | @font-face { 8 | font-family: "Whitney"; 9 | src: url(https://milbits.github.io/oldcord/src/assets/normal.woff2); 10 | } 11 | @font-face { 12 | font-family: "Whitney"; 13 | font-style: italic; 14 | src: url(https://milbits.github.io/oldcord/src/assets/cursive.woff2); 15 | } 16 | @font-face { 17 | font-weight: 500; 18 | font-family: "Whitney"; 19 | src: url(https://milbits.github.io/oldcord/src/assets/kindaBold.woff2); 20 | } 21 | @font-face { 22 | font-family: "Whitney"; 23 | font-weight: 600; 24 | src: url(https://milbits.github.io/oldcord/src/assets/bold.woff2) format("woff2"); 25 | } 26 | @font-face { 27 | font-weight: 700; 28 | font-family: "Whitney"; 29 | src: url(https://milbits.github.io/oldcord/src/assets/veryBold.woff2); 30 | } 31 | @font-face { 32 | font-weight: 700; 33 | font-style: italic; 34 | font-family: "Whitney"; 35 | src: url(https://milbits.github.io/oldcord/src/assets/cursiveBold.woff2); 36 | } 37 | code { 38 | font-family: "Source Code Pro"; 39 | } 40 | .eyebrow /*rare NORMAL class??!?!??!?!!*/ { 41 | font-weight: 600; 42 | text-transform: uppercase; 43 | font-size: 12px; 44 | } 45 | 46 | .activityText__5d473 { 47 | color: var(--channels-default) !important; 48 | } 49 | .peopleListItem_cc6179 .text__19b6d.text-sm\/medium_cf4812 { 50 | color: var(--header-secondary) !important; 51 | } 52 | 53 | /* style dms correctly */ 54 | .channel__972a0 { 55 | .interactiveSelected__972a0 .subText__20a53 [data-text-variant="text-xs\/medium"] { 56 | color: var(--interactive-active) !important; 57 | } 58 | &:hover:not(:has(.interactiveSelected__972a0)) .subText__20a53 [data-text-variant="text-xs\/medium"] { 59 | color: var(--interactive-hover) !important; 60 | } 61 | &:hover .interactiveSelected__972a0 .name__20a53 { 62 | color: var(--interactive-active) !important; 63 | } 64 | & .subText__20a53 [data-text-variant="text-xs\/medium"] { 65 | color: var(--channels-default) !important; 66 | } 67 | &:hover:has(.interactiveSelected__972a0) .interactive_bf202d { 68 | background: var(--background-modifier-selected) !important; 69 | } 70 | &:hover .muted__20a53 { 71 | color: var(--interactive-hover) !important; 72 | & .avatar__20a53 { 73 | opacity: 1; 74 | } 75 | } 76 | } 77 | 78 | /*bot tag*/ 79 | :not(.botTagOP__82f07, .botTagRemix__82f07) > .botText__82f07 { 80 | visibility: hidden; 81 | font-size: 0 !important; 82 | &:before { 83 | content: "BOT"; 84 | font-size: 10px; 85 | line-height: 20px; 86 | visibility: visible; 87 | } 88 | } 89 | .botTag__82f07 { 90 | border-radius: 3px !important; 91 | } 92 | .botTagRemix__82f07 { 93 | border: 1px solid var(--blurple); 94 | background: transparent; 95 | color: var(--blurple); 96 | } 97 | 98 | /** revert reactions modal*/ 99 | .theme-dark .reactionSelected_cc2dff { 100 | background-color: rgba(79, 84, 92, 0.3); 101 | border-radius: 2px; 102 | margin-bottom: 1px; 103 | } 104 | .reactionLarge.emoji { 105 | width: 1rem; 106 | height: 1rem; 107 | } 108 | .reactionDefault_cc2dff { 109 | border-radius: 2px; 110 | margin-bottom: 1px; 111 | } 112 | 113 | /** revert switches*/ 114 | .container__87bf1 .input__87bf1 { 115 | &:before { 116 | content: ""; 117 | box-shadow: inset 0 1px 1px #00000026; 118 | width: 42px; 119 | height: 24px; 120 | background: #72767d; 121 | display: block; 122 | border-radius: 50px; 123 | margin-top: -3px; 124 | margin-left: -6px; 125 | } 126 | 127 | &:after { 128 | content: ""; 129 | display: block; 130 | width: 18px; 131 | height: 18px; 132 | position: absolute; 133 | top: 0; 134 | left: -3px; 135 | background: var(--white-500); 136 | border-radius: 50px; 137 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 138 | } 139 | 140 | &:checked:before { 141 | background: var(--brand-experiment); 142 | } 143 | 144 | &:checked:after { 145 | transform: translate3d(18px, 0, 0); 146 | } 147 | } 148 | 149 | /* change color to green just for the role permissions form */ 150 | .permissionsForm__16663 .container__87bf1 .input__87bf1 { 151 | &:checked:before { 152 | background: #43b581; 153 | } 154 | 155 | &:checked:active:before { 156 | background: var(--green-hover); 157 | } 158 | } 159 | 160 | /* revert channel role permissions (beta), looks kinda bad when zoomed in but i'll try to fix that */ 161 | .group__344e6 { 162 | background-color: var(--background-tertiary); 163 | width: 108px; 164 | grid-gap: 1px; 165 | } 166 | .passthrough__344e6 { 167 | &.selected__344e6 { 168 | background-color: #787e8a; 169 | } 170 | 171 | &svg { 172 | display: none; 173 | } 174 | 175 | &:not(.selected__344e6)::after { 176 | content: url("data:image/svg+xml,"); 177 | height: 16px; 178 | width: 16px; 179 | rotate: 45deg; 180 | } 181 | 182 | &.selected__344e6::after { 183 | content: url("data:image/svg+xml,"); 184 | height: 16px; 185 | width: 16px; 186 | rotate: 45deg; 187 | } 188 | } 189 | .item__344e6 { 190 | cursor: pointer; 191 | } 192 | .container__87bf1 .input__87bf1 { 193 | opacity: 1; 194 | width: 0; 195 | &:active:before { 196 | background: #676a71; 197 | } 198 | 199 | &:active:after { 200 | width: 26px; 201 | } 202 | 203 | &:checked:active:before { 204 | background: var(--blurple-hover); 205 | } 206 | 207 | &:checked:active:after { 208 | left: -11px; 209 | width: 26px; 210 | } 211 | 212 | &:before, 213 | &:after { 214 | transition: 0.1s; 215 | } 216 | } 217 | .container__87bf1 { 218 | background: #0000 !important; 219 | } 220 | 221 | /* checkboxes*/ 222 | .checkbox_f525d3 { 223 | &:not(.round_f525d3) { 224 | border-color: #72767d !important ; 225 | border-radius: 3px; 226 | border-width: 1px !important; 227 | } 228 | 229 | &.checked_f525d3 { 230 | border: none !important; 231 | } 232 | } 233 | 234 | .channelTextAreaInner_fb64c9.channelTextAreaInnerFocused__42399 .scrollableContainer_d0696b .webkit__8d35a { 235 | border-color: var(--brand-experiment); 236 | } 237 | 238 | /** display:none graveyard*/ 239 | .sessionMoreButton__803f2 svg, .newMemberBadge_f80704, .option__56fec:after, .premiumLabel_e681d1 > svg, .banner_ec75b3, .unreadIcon__7aaec /* new unread bar icon*/ 240 | , .container__87bf1 svg, .communityInfoPill_f37cb1, .item_b3f026 svg { 241 | display: none; 242 | } 243 | 244 | .characterBackground_eb4069 .logoWithText_eb4069 { 245 | top: 24px; 246 | left: 24px; 247 | margin: 0; 248 | } 249 | 250 | /** Mute/Account switch notification */ 251 | .toast__3fde7 { 252 | background: var(--green) !important; 253 | transform: translateY(10px); 254 | padding: 6px 10px !important; 255 | border-radius: 5px !important; 256 | box-shadow: var(--elevation-medium), var(--elevation-stroke) !important; 257 | font-weight: 500; 258 | color: var(--header-primary) !important; 259 | margin-top: 10px; 260 | border: none !important; 261 | } 262 | .toast__3fde7 .icon__3fde7 > path { 263 | d: none !important; 264 | } 265 | .toast__3fde7 .icon__3fde7 { 266 | height: 20px !important; 267 | width: 20px !important; 268 | margin-top: 0 !important; 269 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz48L3N2Zz4=); 270 | background-size: 20px 20px; 271 | } 272 | 273 | /** radiobars (like channel type)*/ 274 | /*event creation double check thing*/ 275 | .item__001a7.itemFilled__001a7 .icon__001a7 { 276 | display: none; 277 | } 278 | .item__001a7 { 279 | border-radius: 5px; 280 | background: #0000 !important; 281 | } 282 | .item__001a7[aria-checked="false"] .text-md\/medium_cf4812 { 283 | color: var(--radio-bar-accent-color) !important; 284 | } 285 | .item__001a7 .radioBar__001a7 { 286 | border: solid 1px var(--background-tertiary); 287 | background: var(--deprecated-card-editable-bg); 288 | grid-gap: 10px; 289 | --radio-bar-accent-color: var(--interactive-active); 290 | & > .radioIndicatorGroup__001a7 { 291 | justify-content: flex-start; 292 | align-self: flex-start; 293 | height: 24px; 294 | } 295 | } 296 | 297 | .radioLabelDescription_ac72c6 { 298 | /*Only applies to channel creation*/ 299 | display: none; 300 | } 301 | .radioLabelName_ac72c6 { 302 | color: var(--header-primary); 303 | } 304 | [aria-checked="false"] .text-sm\/normal_cf4812 { 305 | color: var(--interactive-normal); 306 | } 307 | 308 | .theme-dark .item__001a7[aria-checked="false"] .radioBar__001a7:hover { 309 | border-color: #000; 310 | background: rgba(0, 0, 0, 0.2); 311 | } 312 | .theme-light .item__001a7[aria-checked="false"] .radioBar__001a7:hover { 313 | border-color: #b9bbbe; 314 | background: rgba(247, 248, 248, 0.6); 315 | } 316 | .item__001a7[aria-checked="true"] .radioBar__001a7 { 317 | --radio-bar-accent-color: var(--blurple); 318 | background-color: var(--radio-bar-accent-color); 319 | border-color: var(--radio-bar-accent-color); 320 | } 321 | 322 | /* Replace "dont scan" text with how it was before. only for german and english*/ 323 | /*i love lag (i thinb) 324 | html:is([lang="DE"], [lang="en-us"], [lang="en-gb"]) .radioBar__001a7[style="--radio-bar-accent-color: var(--red-400); padding: 10px;"] { 325 | 326 | &.text-md\/medium_cf4812:before { 327 | font-size: 16px; 328 | line-height: 20px; 329 | } 330 | 331 | &.text-sm\/normal_cf4812:before { 332 | font-size: 14px; 333 | line-height: 18px; 334 | } 335 | } 336 | 337 | html[lang="DE"] .radioBar__001a7[style="--radio-bar-accent-color: var(--red-400); padding: 10px;"] { 338 | &.text-md\/medium_dc00ef:before { 339 | content: "Ich lebe am Limit"; 340 | } 341 | 342 | &.text-sm\/normal_cf4812:before { 343 | content: "Schalte diese Option aus. Durchsuche nichts. Geh direkt zur dunklen Seite."; 344 | } 345 | } 346 | 347 | html:is([lang="en-us"], [lang="en-gb"]) .radioBar__001a7[style="--radio-bar-accent-color: var(--red-400); padding: 10px;"] { 348 | &.text-md\/medium_cf4812:before { 349 | content: "I live on the edge"; 350 | } 351 | 352 | &.text-sm\/normal_cf4812:before { 353 | content: "Turn this off. Don't scan anything. Go straight to the dark side."; 354 | } 355 | } 356 | */ 357 | /** revert text fields*/ 358 | /*add friends weird font fix*/ 359 | .inputText__72ba7 { 360 | letter-spacing: unset; 361 | } 362 | 363 | .input__0f084:not( 364 | .textarea_dde0a8, 365 | .searchBoxInput__56498, 366 | .addFriendInput__72ba7 > .input__72ba7, 367 | .note_fcb628 textarea, 368 | .profileNote__9c3be textarea 369 | ), 370 | .bioTextArea__6a919 { 371 | border-radius: 3px; 372 | color: var(--text-normal) !important; 373 | background-color: var(--deprecated-text-input-bg); 374 | border: 1px solid var(--deprecated-text-input-border); 375 | transition: border-color 0.2s ease-in-out; 376 | &:focus { 377 | border-color: var(--blurple) !important; 378 | } 379 | } 380 | .select__3f413:hover:not([aria-disabled="true"]), 381 | .input__0f084:hover, 382 | .bioTextArea__6a919:hover { 383 | border-color: var(--deprecated-text-input-border-hover) !important; 384 | } 385 | .input__0f084::-webkit-input-placeholder:not(.textarea_dde0a8) { 386 | color: var(--text-muted); 387 | } 388 | 389 | .emojiInput_e7d73e { 390 | padding: 0 !important; 391 | background-color: #303339 !important; 392 | } 393 | 394 | /* revert text files*/ 395 | .nonVisualMediaItem_f4758a .mosaicItemMediaMosaic__6c706 { 396 | max-width: 100% !important; 397 | } 398 | 399 | .newMosaicStyle_cf09d8 .codeView__4d95d { 400 | margin: 0 0 0; 401 | padding: 7px; 402 | } 403 | 404 | .newMosaicStyle_cf09d8 .footer__4d95d { 405 | border-radius: 0 0 4px 4px; 406 | padding: 0 10px; 407 | } 408 | 409 | .newMosaicStyle_cf09d8 .textContainer__4d95d { 410 | border-radius: 4px 4px 0 0; 411 | } 412 | 413 | .codeIcon__4d95d { 414 | cursor: pointer; 415 | } 416 | 417 | /* tweak hover buttons*/ 418 | .hoverButtonGroup__06ab4 { 419 | border-radius: 0px 0px 0px 4px; 420 | background-color: transparent; 421 | transition: 0.12s ease-in-out; 422 | outline: none; 423 | opacity: 1; 424 | right: 0px; 425 | 426 | } 427 | /*fuck ai!! rahhh*/ 428 | .hoverButton__06ab4:has(.lottieIcon__5eb9b) { 429 | display: none; 430 | } 431 | .removeMosaicItemHoverButton__6c706 { 432 | color: var(--red) !important; 433 | opacity: 0.7; 434 | &:hover { 435 | opacity: 1; 436 | } 437 | &:active { 438 | color: #fff !important; 439 | background: var(--red-active) !important; 440 | } 441 | } 442 | /* keep the translucent background for stuff like images and videos bc it looks better */ 443 | .visualMediaItemContainer_f4758a .hoverButtonGroup__06ab4 { 444 | background-color: rgb(0 0 0 / 25%); 445 | transform: translateY(-40px); 446 | .mosaicItem__6c706:hover &{ 447 | transform: translateY(0px); 448 | 449 | } 450 | } 451 | /* make download button bigger */ 452 | .downloadHoverButtonIcon__6c706 { 453 | width: 24px !important; 454 | height: 24px !important; 455 | } 456 | /* remove background hover */ 457 | .hoverButton__06ab4{ 458 | &:hover { 459 | background: none; 460 | color: rgb(255 255 255 / 100%); 461 | } 462 | color: rgb(255 255 255 / 90%); !important; 463 | } 464 | 465 | /* center the download button for audio files and make it permanently visible*/ 466 | .wrapperAudio_cf09d8 + .hoverButtonGroup__06ab4 { 467 | top: 25%; 468 | right: 8px; 469 | transform: translateY(-50%); 470 | opacity: 1; 471 | background: none; 472 | } 473 | /* same as above but for file attachments */ 474 | .file__0ccae + .hoverButtonGroup__06ab4 { 475 | top: 50%; 476 | transform: translateY(-60%); 477 | opacity: 1; 478 | background: none; 479 | } 480 | 481 | /* shorten the margin by a bit so it doesnt look so separated */ 482 | .nonVisualMediaItem_f4758a + .nonVisualMediaItem_f4758a, 483 | .nonVisualMediaItemContainer_f4758a { 484 | margin-top: 4px; 485 | } 486 | 487 | /* revert the bloating of the audio attachments */ 488 | .wrapperAudio_cf09d8.newMosaicStyle_cf09d8 { 489 | padding: 10px; 490 | border-radius: 4px; 491 | padding-right: 41px; 492 | } 493 | 494 | /* stretch play bar */ 495 | .audioControls_cf09d8 { 496 | width: 108%; 497 | border-radius: 3px !important; 498 | } 499 | 500 | /* revert the bloating of attachments in general */ 501 | .file__0ccae { 502 | padding: 10px; 503 | border-radius: 3px; 504 | width: 100%; 505 | padding-right: 71px; 506 | max-width: 520px; 507 | } 508 | 509 | /** forum channel*/ 510 | /* tags in create post*/ 511 | #app-mount .pill_a2c9e8.selected_a2c9e8 { 512 | background-color: var(--brand-experiment-35a); 513 | border-color: transparent; 514 | transition: 0.1s ease; 515 | color: #fff !important; 516 | } 517 | 518 | #app-mount .pill_a2c9e8.selected_a2c9e8:hover { 519 | background-color: var(--brand-experiment-50a); 520 | transition: 0.1s ease; 521 | } 522 | 523 | .pill_a2c9e8.selected_a2c9e8 .defaultColor__77578 { 524 | color: var(--interactive-active); 525 | transition: 0.1s ease; 526 | } 527 | 528 | .theme-light .pill_a2c9e8 { 529 | background: var(--background-secondary); 530 | } 531 | 532 | /* make the button gray when following*/ 533 | .buttonInner__34c2c, 534 | .buttonInner__34c2c.active__34c2c { 535 | transition: 0.17s ease; 536 | color: #fff !important; 537 | background-color: var(--button-secondary-background) !important; 538 | border-radius: 3px; 539 | &:hover { 540 | background-color: var(--button-secondary-background-hover) !important; 541 | } 542 | &:active { 543 | background-color: var(--button-secondary-background-active) !important; 544 | } 545 | } 546 | /*make follow button green*/ 547 | .buttonInner__34c2c:has( 548 | [d="M9.7 2.89c.18-.07.32-.24.37-.43a2 2 0 0 1 3.86 0c.05.2.19.36.38.43A7 7 0 0 1 19 9.5v2.09c0 .12.05.24.13.33l1.1 1.22a3 3 0 0 1 .77 2.01v.28c0 .67-.34 1.29-.95 1.56-1.31.6-4 1.51-8.05 1.51-4.05 0-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3 3 0 0 1 .77-2l1.1-1.23a.5.5 0 0 0 .13-.33V9.5a7 7 0 0 1 4.7-6.61ZM9.18 19.84A.16.16 0 0 0 9 20a3 3 0 1 0 6 0c0-.1-.09-.17-.18-.16a24.86 24.86 0 0 1-5.64 0Z"] 549 | ) { 550 | background-color: var(--green) !important; 551 | color: var(--white); 552 | border-radius: 3px; 553 | border: none; 554 | transition: 0.17s ease; 555 | &:hover { 556 | background-color: var(--green-hover) !important; 557 | } 558 | &:active { 559 | background-color: var(--green-active) !important; 560 | } 561 | } 562 | 563 | .addReactButton__34c2c { 564 | background-color: transparent !important; 565 | border: none; 566 | font-size: 0px; 567 | padding: 0px; 568 | min-width: 1.5rem; 569 | } 570 | 571 | .submitButton-3B-dZd { 572 | border-radius: 3px !important; 573 | } 574 | 575 | /* change tag backgrounds*/ 576 | .container-2qVG6q .pill_a2c9e8 { 577 | background-color: var(--background-tertiary); 578 | } 579 | 580 | .botTagOP__82f07 { 581 | color: var(--blurple); 582 | background-color: transparent; 583 | border: 1px solid var(--blurple); 584 | font-weight: 500; 585 | } 586 | 587 | .theme-dark .children__9293f:after { 588 | display: none; 589 | } 590 | 591 | /* make "search/create post" background the same as the textarea*/ 592 | .headerRow_f369db .mainCard_f369db { 593 | background: var(--bg-overlay-3, var(--chat-background-default)); 594 | border: none !important; 595 | box-shadow: none !important; 596 | border-radius: 5px; 597 | } 598 | 599 | /* so "revert textfields" wont apply there */ 600 | .headerRow_f369db .mainCard_f369db :is(.scrollableContainer_d0696b, .input__0f084) { 601 | background: none !important; 602 | border: none; 603 | } 604 | 605 | /* posts*/ 606 | .container__9a337, 607 | .container_faa96b { 608 | transition: 0.17s ease !important; 609 | transform: none !important; 610 | border-radius: 5px; 611 | box-shadow: none !important; 612 | background: var(--deprecated-card-editable-bg); 613 | border: none; 614 | } 615 | 616 | .content__99f8c .container__9a337:hover, 617 | .content__99f8c .container_faa96b:hover { 618 | background-color: var(--background-modifier-hover) !important; 619 | border: none; 620 | } 621 | 622 | .container__9a337:active, 623 | .container_faa96b:active { 624 | background-color: var(--background-modifier-active) !important; 625 | } 626 | 627 | /** Devices Tab*/ 628 | /* make description a card*/ 629 | .description__803f2 { 630 | background: var(--background-secondary); 631 | border: 1px solid var(--background-tertiary); 632 | border-radius: 5px; 633 | color: var(--text-normal); 634 | font-weight: 400; 635 | font-size: 15px; 636 | padding: 20px; 637 | } 638 | .sessionIcon__803f2 { 639 | width: 50px; 640 | height: 50px; 641 | background: none !important; 642 | } 643 | .sessionIcon__803f2 path { 644 | fill: var(--interactive-normal); 645 | } 646 | .currentSession__803f2 .sessionIcon__803f2 path { 647 | fill: var(--green); 648 | } 649 | .session__803f2 { 650 | gap: 8px; 651 | } 652 | /* Stylize remove button*/ 653 | .session__803f2 { 654 | position: relative; 655 | } 656 | .sessionMoreButton__803f2 { 657 | opacity: 0; 658 | position: absolute; 659 | top: -12px; 660 | right: -12px; 661 | width: 24px; 662 | height: 24px; 663 | box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low); 664 | background-color: var(--background-primary); 665 | background-image: url(https://discord.com/assets/b5ad3c52d0699af9b6987839875450d4.svg); 666 | background-position: 50% 50%; 667 | background-repeat: no-repeat; 668 | border-radius: 50%; 669 | transition: opacity 0.1s ease-in-out, box-shadow 0.1s ease-in-out, transform 0.2s ease; 670 | } 671 | .session__803f2:hover .sessionMoreButton__803f2, 672 | .sessionMoreButton__803f2:hover { 673 | opacity: 1; 674 | } 675 | .sessionMoreButton__803f2:active { 676 | transform: translateY(1px); 677 | } 678 | .eyebrow_e5a66c.sessionInfoRow__803f2, 679 | .headerHeading_d80a13.eyebrow_e5a66c, 680 | .sessionInfoRow__803f2 span:last-child { 681 | color: var(--header-secondary); 682 | } 683 | .heading-md-bold__17daa { 684 | font-weight: 600; 685 | } 686 | 687 | /** Connections (in settings > connections)*/ 688 | .connectContainer_c7f964 { 689 | border: 1px solid var(--deprecated-text-input-border); 690 | border-radius: 6px; 691 | } 692 | .accountButtonInner_c7f964 { 693 | background-color: var(--background-modifier-hover); 694 | background-size: 32px; 695 | } 696 | .connectHeader_c7f964 { 697 | color: #7b7c80 !important; 698 | font-size: 13px; 699 | font-weight: 600; 700 | text-transform: uppercase; 701 | } 702 | .connectContainer_c7f964 .text-xs-normal_ccc5fb { 703 | color: var(--interactive-hover) !important; 704 | font-size: 13px; 705 | } 706 | .connection_c7f964 { 707 | overflow: hidden; 708 | background: none; 709 | border-radius: 5px; 710 | box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3); 711 | } 712 | .connectionAccountLabel_c7f964 { 713 | color: #fff8 !important; 714 | } 715 | .connectionAccountValue_c7f964 .connectionAccountLabelContainer_c7f964 { 716 | font-size: 16px; 717 | margin-top: 4px; 718 | color: var(--white-500); 719 | font-weight: 400; 720 | } 721 | .metadataContainer_c7f964 { 722 | position: relative; 723 | z-index: 10; 724 | background: #0004; 725 | border: solid 1px #0004; 726 | border-radius: 3px; 727 | } 728 | .metadataContainer_c7f964 .connectedAccountVanityMetadataTag_fffe42 { 729 | border-radius: 3px; 730 | background: none; 731 | border: solid 1px #fff3; 732 | } 733 | .metadataContainer_c7f964 .text-xs-normal_ccc5fb { 734 | color: #fff !important; 735 | } 736 | .metadataContainer_c7f964 .metadataRefreshButton_c7f964 { 737 | background-color: var(--blurple-inverted) !important; 738 | &:hover { 739 | background-color: var(--blurple-inverted-hover) !important; 740 | } 741 | &:active { 742 | background-color: var(--blurple-inverted-active) !important; 743 | } 744 | color: var(--blurple) !important; 745 | transition: 0.17s ease; 746 | } 747 | 748 | .connectionHeader_c7f964:after { 749 | content: ""; 750 | position: absolute; 751 | width: 660px; 752 | height: 73px; 753 | background: rgba(0, 0, 0, 0.1); 754 | border-bottom: solid 1px rgba(0, 0, 0, 0.15); 755 | } 756 | .connectionOptionsWrapper_c7f964 .container__0d850, 757 | .connectionDelete_c7f964, 758 | .integrationsWrapper-3a2pGd { 759 | z-index: 50; 760 | } 761 | .connectionOptionSwitch_c7f964 { 762 | margin-top: 2px; 763 | } 764 | .labelRow__0d850 .title__0d850 .text-sm-semibold_a5824d { 765 | font-weight: 500 !important; 766 | color: var(--white-500); 767 | } 768 | 769 | .integration_c7f964 { 770 | z-index: 999; 771 | width: calc(50% - 8px); 772 | position: relative; 773 | background: #0000001a; 774 | border: 1px solid #0000004d; 775 | border-radius: 3px; 776 | padding: 10px; 777 | } 778 | .integration_c7f964 .lookFilled__201d5 { 779 | border: solid 1px #0000004d; 780 | background: #593695; 781 | padding: 5px 16px; 782 | min-height: 0px; 783 | height: auto; 784 | min-width: 0px; 785 | } 786 | .connectionDelete_c7f964 { 787 | width: 32px; 788 | height: 32px; 789 | border: solid 1px rgba(255, 255, 255, 0.3); 790 | border-radius: 3px; 791 | } 792 | .connectionDelete_c7f964 svg { 793 | position: relative; 794 | top: 6px; 795 | left: 6px; 796 | } 797 | .connectionDelete_c7f964 path { 798 | fill: var(--white-500); 799 | transform: scale(1.1); 800 | } 801 | .connectionOptionSwitch_c7f964 .container__87bf1 .input__87bf1:before { 802 | background: #0000; 803 | box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); 804 | } 805 | .connectionOptionSwitch_c7f964 .container__87bf1 .input__87bf1:checked:before { 806 | background: rgba(255, 255, 255, 0.3); 807 | box-shadow: none; 808 | } 809 | .connectionHeader_c7f964 [alt] { 810 | margin: -572px -610px -4500px -16px; 811 | padding: 2000px 330px; 812 | background-color: var(--blurple); 813 | background-repeat: no-repeat; 814 | background-size: 32px 32px; 815 | background-position: 20px 20px; 816 | border-radius: 5px; 817 | pointer-events: none; 818 | } 819 | .connectionHeader_c7f964 { 820 | & [alt="Battle.net"] { 821 | background-color: hsl(200, calc(var(--saturation-factor, 1) * 100%), 45%); 822 | background-image: url(https://milbits.github.io/oldcord/src/assets/battle.webp); 823 | } 824 | 825 | & [alt="GitHub"] { 826 | background-color: hsl(0, calc(var(--saturation-factor, 1) * 4%), 9%); 827 | background-image: url(https://milbits.github.io/oldcord/src/assets/github.svg); 828 | } 829 | 830 | & [alt="Reddit"] { 831 | background-color: hsl(16, calc(var(--saturation-factor, 1) * 100%), 50%); 832 | background-image: url(https://milbits.github.io/oldcord/src/assets/reddit.webp); 833 | } 834 | 835 | & [alt="Spotify"] { 836 | background-color: var(--spotify); 837 | background-image: url(https://milbits.github.io/oldcord/src/assets/spotify.svg); 838 | } 839 | 840 | & [alt="Steam"] { 841 | background-color: hsl(215, calc(var(--saturation-factor, 1) * 35%), 15%); 842 | background-image: url(https://milbits.github.io/oldcord/src/assets/steam.svg); 843 | } 844 | 845 | & [alt="Twitch"] { 846 | background-color: var(--twitch); 847 | background-image: url(https://milbits.github.io/oldcord/src/assets/twitch.webp); 848 | } 849 | 850 | & :is([alt="Twitter"], [alt="X"]) { 851 | background-color: hsl(203, calc(var(--saturation-factor, 1) * 89%), 53%); 852 | background-image: url(https://milbits.github.io/oldcord/src/assets/twitter.webp); 853 | } 854 | 855 | & [alt="Xbox"] { 856 | background-color: var(--xbox); 857 | background-image: url(https://milbits.github.io/oldcord/src/assets/xbox.svg); 858 | } 859 | 860 | & [alt="YouTube"] { 861 | background-color: var(--youtube); 862 | background-image: url(https://milbits.github.io/oldcord/src/assets/youtube.webp); 863 | } 864 | 865 | & [alt="Skype"] { 866 | background-color: hsl(196, calc(var(--saturation-factor, 1) * 100%), 42%); 867 | background-image: url(https://milbits.github.io/oldcord/src/assets/skype.webp); 868 | } 869 | 870 | & [alt="League of Legends"] { 871 | background-color: hsl(42, calc(var(--saturation-factor, 1) * 40%), 49%); 872 | background-image: url(https://milbits.github.io/oldcord/src/assets/league.webp); 873 | } 874 | 875 | & [alt="Facebook"] { 876 | background-color: hsl(226, calc(var(--saturation-factor, 1) * 37%), 38%); 877 | background-image: url(https://milbits.github.io/oldcord/src/assets/facebook.webp); 878 | } 879 | 880 | & [alt="PlayStation Network"] { 881 | background-color: var(--playstation); 882 | background-image: url(https://milbits.github.io/oldcord/src/assets/playstation.svg); 883 | } 884 | 885 | & [alt="Epic Games"] { 886 | background-color: hsl(34, calc(var(--saturation-factor, 1) * 6%), 22%); 887 | background-image: url(https://milbits.github.io/oldcord/src/assets/epic.svg); 888 | } 889 | 890 | & [alt="Riot Games"] { 891 | background-color: hsl(356, calc(var(--saturation-factor, 1) * 75%), 39%); 892 | background-image: url(https://milbits.github.io/oldcord/src/assets/riot.svg); 893 | } 894 | 895 | & [alt="Roblox"] { 896 | background-color: hsl(4, calc(var(--saturation-factor, 1) * 75%), 44%); 897 | background-image: url(https://discord.com/assets/a4d8e9b0404a2d00.svg); 898 | } 899 | 900 | & [alt="Bluesky"] { 901 | background-color: hsl(210.63, calc(var(--saturation-factor, 1) * 99.16%), 53.14%); 902 | background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z' fill='%23fff'/%3E%3C/svg%3E"); 903 | } 904 | } 905 | 906 | .imageAccessory__9614b { 907 | left: unset; 908 | right: 6px; 909 | } 910 | 911 | /** Voice Messages*/ 912 | .playButtonContainer_a8e786 { 913 | background: none !important; 914 | } 915 | .playButtonContainer_a8e786:active { 916 | transform: translateY(1px) !important; 917 | } 918 | .rippleContainer_a8e786 { 919 | display: none; 920 | } 921 | .playIcon_a8e786 { 922 | color: var(--interactive-normal) !important; 923 | width: 25px; 924 | height: 25px; 925 | } 926 | .playIcon_a8e786:hover { 927 | color: var(--interactive-active) !important; 928 | } 929 | 930 | /* notification settings*/ 931 | .notificationSound__6d8e5 { 932 | transform: translateX(-24px); 933 | transition: 0.2s ease-out; 934 | } 935 | .notificationSound__6d8e5:hover { 936 | transform: translateX(-0px); 937 | } 938 | .soundIcon__6d8e5 { 939 | order: -1; 940 | transition: 0.2s ease-out; 941 | } 942 | .notificationSound__6d8e5 .soundIcon__6d8e5 { 943 | opacity: 0 !important; 944 | } 945 | .notificationSound__6d8e5:hover .soundIcon__6d8e5 { 946 | opacity: 0.6 !important; 947 | } 948 | 949 | /* Capitalize titles in settings*/ 950 | h2.title_b717a1, 951 | .modalHeader_db81c6 :is([data-text-variant="heading-lg/semibold"]) { 952 | text-transform: uppercase; 953 | font-size: 16px; 954 | } 955 | .header__49fc1 [data-text-variant="heading-lg/semibold"] { 956 | text-transform: uppercase !important; 957 | font-size: 16px; 958 | } 959 | .description__6b700.text-sm\/normal_cf4812 { 960 | color: var(--text-secondary) !important; 961 | font-size: 14px; 962 | line-height: 20px !important; 963 | } 964 | 965 | /* fix headings of all shapes and sizes */ 966 | .settingsPage_f131e9 :is(.heading-xl\/semibold_cf4812) { 967 | font-size: 16px; 968 | text-transform: uppercase; 969 | } 970 | .settingsPage_f131e9 :is(.defaultColor__5345c.heading-lg\/semibold_cf4812, .title_b717a1.h3_b717a1, .heading-lg\/semibold_cf4812) { 971 | text-transform: uppercase; 972 | font-size: 12px !important; 973 | font-weight: 600 !important; 974 | color: var(--channels-default) !important; 975 | } 976 | 977 | /* can't this app style modals consistantly EVER */ 978 | .modal_ac72c6 { 979 | .header__49fc1 { 980 | .title_ac72c6 { 981 | font-weight: 600; 982 | } 983 | } 984 | .modalContent_ac72c6 { 985 | .sectionTitle_ac72c6 { 986 | color: var(--header-secondary); 987 | } 988 | } 989 | 990 | border-radius: 4px; 991 | } 992 | .root__49fc1 { 993 | .headerContainer_c38e9f > .defaultColor__5345c.heading-md\/semibold_cf4812 { 994 | text-transform: uppercase; 995 | } 996 | .mainContainer_c38e9f > .pauseContainer_c38e9f { 997 | border: none; 998 | padding: unset; 999 | .pauseText_c38e9f { 1000 | margin-top: 20px; 1001 | [data-text-variant="text-md/semibold"] { 1002 | color: var(--header-primary) !important; 1003 | font-weight: 500; 1004 | } 1005 | [data-text-variant="text-sm/normal"] { 1006 | color: var(--header-secondary) !important; 1007 | } 1008 | } 1009 | .pauseText_c38e9f, 1010 | .input__87bf1 { 1011 | margin-top: 20px; 1012 | } 1013 | } 1014 | .modalHeader_db81c6 { 1015 | .guildName_db81c6 { 1016 | font-size: 12px; 1017 | font-weight: 600; 1018 | } 1019 | 1020 | box-shadow: unset !important; 1021 | } 1022 | .h5_b717a1 { 1023 | color: var(--channels-default); 1024 | } 1025 | .container__9d263 { 1026 | .input__87bf1 { 1027 | margin-top: 20px; 1028 | } 1029 | } 1030 | } 1031 | 1032 | /*Fix favorite button and delete overlap*/ 1033 | .imageAccessory_af017a { 1034 | left: unset; 1035 | right: 6px; 1036 | } 1037 | 1038 | /*nitro emoji paywall*/ 1039 | .emojiLockIcon_d982c2, 1040 | .categoryItemLockIconContainer__0fa6d { 1041 | display: none; 1042 | } 1043 | .lockedEmoji_d982c2:has(+ .emojiLockIconContainer_d982c2) { 1044 | filter: grayscale(1) !important; 1045 | } 1046 | 1047 | /* pinned messages popout header */ 1048 | .titleContainer__45690 { 1049 | .text-lg\/semibold_cf4812 { 1050 | font-size: 15px; 1051 | } 1052 | 1053 | & svg { 1054 | display: none; 1055 | } 1056 | } 1057 | 1058 | /* fix pinned message padding */ 1059 | .messageGroupWrapper__45690 .messageGroupCozy__45690 { 1060 | padding-top: 12px !important; 1061 | padding-bottom: 12px !important; 1062 | } 1063 | .header__45690 { 1064 | background: var(--background-tertiary); 1065 | } 1066 | .messagesPopoutWrap__45690 { 1067 | border-radius: 4px; 1068 | } 1069 | 1070 | /* polls */ 1071 | .normalStylesDefault_a1443c { 1072 | --custom-poll-style-vote-background: var(--background-secpndary); 1073 | --custom-poll-style-vote-percentage: var(--background-modifier-accent); 1074 | --polls-victor-fill: var(--green-transparent); 1075 | --polls-voted-fill: var(--brand-experiment-25a); 1076 | } 1077 | .answerInner__4c520 { 1078 | background-color: var(--button-secondary-background); 1079 | border-radius: 3px; 1080 | & .label__4c520 { 1081 | color: var(--interactive-active); 1082 | } 1083 | } 1084 | .secondaryButtonPresentation__0be77 { 1085 | background-color: var(--button-secondary-background); 1086 | &:hover { 1087 | background-color: var(--button-secondary-background-hover); 1088 | } 1089 | } 1090 | 1091 | /* polls modal */ 1092 | .voteSelected__01c8c { 1093 | background-color: rgba(79, 84, 92, 0.3); 1094 | } 1095 | .side_b3f026 .item_b3f026:is(.voteDefault__01c8c, .voteSelected__01c8c) { 1096 | padding-top: 0px; 1097 | padding-bottom: 0px; 1098 | } 1099 | .header__49fc1 .text-md\/medium_cf4812 { 1100 | font-size: 12px; 1101 | } 1102 | 1103 | /* message buttons */ 1104 | .popover_f84418 { 1105 | transform: none !important; 1106 | height: 32px; 1107 | background: var(--background-primary); 1108 | border-radius: 4px; 1109 | padding: 0px; 1110 | box-shadow: var(--elevation-stroke); 1111 | border: none; 1112 | &:hover { 1113 | box-shadow: var(--elevation-stroke), var(--elevation-medium) !important; 1114 | border: none; 1115 | } 1116 | 1117 | /*& .separator_f84418 { // hides emoji separator 1118 | display: none; 1119 | }*/ 1120 | } 1121 | 1122 | .hoverBarButton_f84418 { 1123 | border-radius: 0; 1124 | height: 24px; 1125 | padding: 4px; 1126 | &:last-child { 1127 | border-top-right-radius: 4px; 1128 | border-bottom-right-radius: 4px; 1129 | } 1130 | &:first-child { 1131 | border-top-left-radius: 4px; 1132 | border-bottom-left-radius: 4px; 1133 | } 1134 | 1135 | /*&:has(.emoji__040f0) { // hides recommended emojis 1136 | display: none; 1137 | }*/ 1138 | } 1139 | 1140 | .buttonContent_f84418, 1141 | .icon_f84418 { 1142 | transform: none !important; 1143 | } 1144 | .hoverBarButton_f84418:active { 1145 | padding-bottom: 3px; 1146 | padding-top: 5px; 1147 | padding-left: 4px; 1148 | padding-right: 4px; 1149 | } 1150 | 1151 | /* forwarding modal */ 1152 | :is(.footerButtons__62280, .channelTextArea_d0696b) .messageInput__62280, 1153 | .sendWithMessage__62280 { 1154 | border-radius: 3px; 1155 | height: 38px; 1156 | overflow: hidden; 1157 | & .slateTextArea_ec4baf, 1158 | .placeholder__1b31f { 1159 | line-height: 15px; 1160 | } 1161 | & .expression-picker-chat-input-button { 1162 | margin-right: 5px; 1163 | margin-bottom: 5px; 1164 | } 1165 | } 1166 | 1167 | /*forwarded message*/ 1168 | .container__122e4 .quote__122e4 { 1169 | display: none; 1170 | } 1171 | .container__122e4 .content__122e4 { 1172 | padding: 4px 8px; 1173 | border-radius: 3px; 1174 | border: solid 1px var(--background-modifier-accent); 1175 | max-width: 500px; 1176 | overflow: hidden; 1177 | flex-grow: 0; 1178 | } 1179 | .container__122e4 .headerText__122e4 { 1180 | font-size: 12px; 1181 | font-weight: bold; 1182 | font-style: normal; 1183 | text-transform: uppercase; 1184 | } 1185 | 1186 | /* fix emoji picker sizing */ 1187 | .emojiItem_fc7141 { 1188 | width: 40px !important; 1189 | height: 40px !important; 1190 | padding: 0; 1191 | margin-left: 4px; 1192 | } 1193 | .emojiItem_fc7141 > :is(.image__1859b, .emojiSpriteImage_d982c2) { 1194 | transform: scale(0.8); 1195 | } 1196 | .emojiListRow_fc7141 { 1197 | height: unset; 1198 | grid-template-columns: repeat(auto-fill, 48px); 1199 | } 1200 | .drawerSizingWrapper__08434 { 1201 | height: 90%; 1202 | bottom: 0; 1203 | } 1204 | .emojiPickerListWrapper_c0e32c .list_c656ac { 1205 | height: 110%; 1206 | } 1207 | 1208 | /* remove emoji nitro upsell */ 1209 | .categorySectionNitroLocked_c656ac { 1210 | background-color: transparent; 1211 | } 1212 | .nitroTopDividerContainer_b3fb5f { 1213 | visibility: hidden; 1214 | padding: unset; 1215 | } 1216 | .upsellContainerFloating__0b69f { 1217 | display: none; 1218 | } 1219 | 1220 | /** Game profile */ 1221 | /* 1222 | .gameProfileModal__8e830 [data-text-variant="heading-md\/bold"] { 1223 | visibility: hidden; 1224 | } 1225 | 1226 | .gameProfileModal__8e830 .heading-xl\/bold_cf4812 { 1227 | font-weight: 600; 1228 | font-size: 20px; 1229 | margin-left: 55px; 1230 | } 1231 | 1232 | .gameProfileModal__8e830 .sectionHeader__8e830:is(.text-xs\/semibold_cf4812, .text-md\/semibold_cf4812, .text-sm\/semibold_cf4812) { 1233 | text-transform: uppercase !important; 1234 | } 1235 | 1236 | .gameProfileModal__8e830 .text-md\/semibold_cf4812 { 1237 | color: var(--header-secondary) !important; 1238 | font-size: 13px; 1239 | font-weight: 500; 1240 | display: flex; 1241 | align-items: center; 1242 | gap: 8px; 1243 | &:after { 1244 | content: ""; 1245 | background: var(--background-modifier-accent); 1246 | flex: 1; 1247 | height: 1px; 1248 | display: block; 1249 | } 1250 | } 1251 | 1252 | .gameProfileModal__8e830 .gapSm__8e830.row__8e830 > .text-sm\/semibold_cf4812 { 1253 | color: var(--header-secondary) !important; 1254 | font-weight: 500; 1255 | margin-left: 55px; 1256 | } 1257 | 1258 | .gameProfileModal__8e830 .lineClamp2Plus__4bd52 { 1259 | max-height: unset; 1260 | } 1261 | 1262 | .gameProfileModal__8e830 .overflowMenu__8e830 { 1263 | background: none; 1264 | backdrop-filter: none; 1265 | } 1266 | 1267 | .gameProfileModal__8e830 .sidebar__8e830 { 1268 | border-left: solid 1px var(--background-modifier-accent); 1269 | } 1270 | 1271 | .gameProfileModal__8e830 .logoWrapper__8e830 { 1272 | background-color: unset; 1273 | border-radius: 4px; 1274 | } 1275 | 1276 | .gameProfileModal__8e830 .friends_b37a75.text-xs\/semibold_cf4812 { 1277 | background: none; 1278 | font-weight: 400; 1279 | font-size: 14px; 1280 | } 1281 | */ 1282 | /* move game icon 1283 | .gameProfileModal__8e830 .gameIcon__8e830 { 1284 | position: absolute; 1285 | margin-top: -32px; 1286 | width: 48px; 1287 | height: 48px; 1288 | } 1289 | 1290 | .gameProfileModal__8e830 .platforms__93ebb { 1291 | transform: scale(1.5); 1292 | margin-left: 45px; 1293 | } 1294 | */ 1295 | /*change x to twitter (bluesky better [follow me @milbit.bsky.social])*/ 1296 | .gameProfileModal__8e830 1297 | .anchor_edefb8 1298 | path[d="M13.86 10.47 21.15 2h-1.73l-6.33 7.35L8.04 2H2.22l7.64 11.12L2.22 22h1.72l6.68-7.77L15.96 22h5.82l-7.92-11.53Zm-2.36 2.75-.78-1.11L4.57 3.3h2.65l4.97 7.11.77 1.1 6.46 9.25h-2.65l-5.27-7.54Z"] { 1299 | d: path( 1300 | "M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z" 1301 | ); 1302 | transform: scale(0.1); 1303 | } 1304 | 1305 | /* linked roles */ 1306 | .verifiedRole_e59759 { 1307 | padding: 8px; 1308 | border-radius: 999px; 1309 | background: none; 1310 | border: 2.5px solid var(--background-secondary-alt); 1311 | .container__183c2 { 1312 | order: -1; 1313 | } 1314 | .roleCheckmark_e59759 { 1315 | right: 10px; 1316 | top: 10px; 1317 | } 1318 | } 1319 | .connectionsChecksGroup_a470b4 { 1320 | background: none; 1321 | border-radius: 3px; 1322 | padding: 8px; 1323 | } 1324 | .headerText_a470b4 .heading-xl\/extrabold_cf4812 { 1325 | font-size: 16px; 1326 | letter-spacing: 0.3; 1327 | font-weight: 600; 1328 | text-transform: uppercase; 1329 | } 1330 | 1331 | .scrollerBase_d125d2.thin_d125d2.container_e59759.content__49fc1 > .defaultColor__5345c.heading-md\/semibold_cf4812 { 1332 | font-weight: 500; 1333 | } 1334 | 1335 | /* Today at */ 1336 | :is(.timestampInline_c19a55) time[aria-label^="Today at"] { 1337 | visibility: hidden; 1338 | } 1339 | :is(.timestampInline_c19a55) time[aria-label^="Today at"]:before { 1340 | content: attr(aria-label); 1341 | visibility: visible; 1342 | } 1343 | 1344 | /* custom status modal */ 1345 | .header_dbc4b7 { 1346 | background-image: url("https://discord.com/assets/7d67842f58b6d155.svg"); 1347 | background-size: 200px 120px; 1348 | background-position: center bottom; 1349 | background-repeat: no-repeat; 1350 | top: 0; 1351 | left: 50%; 1352 | transform: translateX(-50%); 1353 | padding-top: 120px !important; 1354 | margin-top: -93px; 1355 | } 1356 | .headerTitle_dbc4b7 .heading-xl\/semibold_cf4812 { 1357 | display: none; 1358 | } 1359 | .scrollerBase_d125d2.thin_d125d2:has(.profilePreview_dbc4b7).content__49fc1:before { 1360 | content: "Set a custom status"; 1361 | font-size: 20px; 1362 | line-height: 24px; 1363 | font-weight: 600; 1364 | color: var(--interactive-active); 1365 | margin-left: 28%; 1366 | } 1367 | .profilePreview_dbc4b7 { 1368 | display: none; 1369 | } 1370 | .statusText__19b6d { 1371 | color: var(--header-secondary); 1372 | } 1373 | 1374 | /* clan tags */ 1375 | .guildTagContainer__63ed3, 1376 | .clanTagChiplet_c19a55, 1377 | .chipletContainerInline__4a25c, 1378 | .chipletContainerInline__10651, 1379 | .chipletContainerInner__10651, 1380 | .clanTag__5d473 { 1381 | display: none !important; 1382 | } 1383 | 1384 | /* status formatting */ 1385 | :is(.subText__20a53, .subText__91a9d, .subtext__0a06e) { 1386 | .container_c9d15c { 1387 | display: flex; 1388 | .icon_c9d15c { 1389 | order: 1; 1390 | } 1391 | .emoji_c9d15c { 1392 | order: -1; 1393 | } 1394 | .dot_c9d15c { 1395 | display: none; 1396 | } 1397 | } 1398 | .container_c9d15c:has(.statusText__19b6d:not(.dot_c9d15c):nth-of-type(3)) .statusText__19b6d:nth-of-type(1) { 1399 | display: none; 1400 | } 1401 | } 1402 | /* new experimental image viewer - this sucks, don't use it 1403 | 1404 | .carouselModal_d3a6f0 { 1405 | align-items: start; 1406 | justify-content: center; 1407 | width: fit-content; 1408 | z-index: 0; 1409 | } 1410 | 1411 | .topBar__6088c { 1412 | z-index: -1; 1413 | } 1414 | 1415 | .closeButton__6088c { 1416 | position: fixed; 1417 | top: 0; 1418 | left: 0; 1419 | right: 0; 1420 | bottom: 0; 1421 | padding: 0; 1422 | opacity: 0; 1423 | cursor: unset; 1424 | } 1425 | 1426 | .messageContents__6088c { 1427 | display: none; 1428 | } 1429 | 1430 | .wrapper_b2eddf { 1431 | flex-grow: unset; 1432 | pointer-events: none; 1433 | } 1434 | 1435 | .mediaWrapper_b2eddf { 1436 | position: unset; 1437 | width: fit-content; 1438 | } 1439 | 1440 | .imageWrapper_af017a { 1441 | pointer-events: all; 1442 | } 1443 | 1444 | .actionButtonContainer_c319f9 { 1445 | margin-top: -10px; 1446 | pointer-events: none; 1447 | } 1448 | 1449 | .actionButtons_cc1819 { 1450 | background-color: transparent; 1451 | border-radius: 0; 1452 | gap: 1; 1453 | padding: 0; 1454 | } 1455 | .actionButtons_cc1819 button { 1456 | background: transparent !important; 1457 | margin: 0; 1458 | padding: 1; 1459 | width: fit-content; 1460 | pointer-events: all; 1461 | svg { 1462 | display: none; 1463 | } 1464 | 1465 | &:after { 1466 | content: attr(aria-label); 1467 | color: var(--white-500) !important; 1468 | font-size: 14px; 1469 | font-weight: 500; 1470 | line-height: 18px; 1471 | transition: opacity 0.15s ease; 1472 | opacity: 0.5; 1473 | } 1474 | 1475 | &:hover:after { 1476 | opacity: 1; 1477 | -webkit-text-decoration: underline; 1478 | text-decoration: underline; 1479 | } 1480 | } 1481 | */ 1482 | /*themes in appearance 1483 | stolen and modified from 11pixels' dtm16 1484 | https://github.com/XYZenix/DTM-16 1485 | */ 1486 | .themeTitleContainer__3e443 .title__3e443, 1487 | .header__67a11 .titleText__67a11 { 1488 | color: var(--header-secondary); 1489 | font-size: 12px; 1490 | font-weight: 900; 1491 | } 1492 | 1493 | .layers__960e4.layers__160d8 1494 | .layer__960e4:not(.baseLayer__960e4) 1495 | .contentRegion__23e6b 1496 | .contentColumn__23e6b#appearance-tab 1497 | .presets__67a11 { 1498 | & .themeSelectionContainer__36dee { 1499 | width: 132px; 1500 | height: 81px; 1501 | margin-bottom: 15px; 1502 | } 1503 | & .themeSelection__36dee { 1504 | border-radius: 4px; 1505 | box-shadow: none; 1506 | &:after, 1507 | &:before { 1508 | content: ""; 1509 | display: block; 1510 | } 1511 | &:before { 1512 | width: 130px; 1513 | height: 60px; 1514 | background-size: 130px 100px; 1515 | border: solid 1px var(--background-secondary-alt); 1516 | border-bottom: none; 1517 | border-radius: 4px 4px 0 0; 1518 | } 1519 | &:after { 1520 | content: attr(aria-label); 1521 | font-weight: 600; 1522 | font-size: 14px; 1523 | background: var(--background-secondary); 1524 | border: solid 1px var(--background-secondary-alt); 1525 | border-radius: 0 0 4px 4px; 1526 | width: 130px; 1527 | height: auto; 1528 | padding: 10px 0; 1529 | color: var(--interactive-active); 1530 | text-align: center; 1531 | } 1532 | &.selected__36dee:before { 1533 | border-color: var(--blurple); 1534 | } 1535 | &.selected__36dee:after { 1536 | background: var(--blurple); 1537 | border-color: var(--blurple); 1538 | } 1539 | } 1540 | } 1541 | 1542 | .themeSelectionContainer__36dee .selectionCircle__36dee, 1543 | .nitroWheel_c5f0dc { 1544 | display: none; 1545 | } 1546 | .themeSelection__36dee .iconWrapper__36dee { 1547 | top: -4.5px; 1548 | left: 35px; 1549 | & svg { 1550 | width: 35px; 1551 | height: 35px; 1552 | } 1553 | } 1554 | /*custom theme*/ 1555 | .container__8fea4 { 1556 | display: unset; 1557 | border: none; 1558 | } 1559 | .presets__67a11 :is(.newRing__8fea4, .newBadge__8fea4) { 1560 | display: none; 1561 | } 1562 | .paletteIcon__8fea4 { 1563 | position: absolute; 1564 | top: 13px; 1565 | left: 49px; 1566 | width: 35px; 1567 | height: 35px; 1568 | } 1569 | /*idiots!!!!!!!!!*/ 1570 | :is(#equicordthemes-tab, #vencordthemes-tab) .sectionTitle__7bffb:before { 1571 | content: "OldCord note: Using it with other themes may break stuff. Please don't report issues (this is not from vencord)"; 1572 | color: #fff; 1573 | padding: 10px; 1574 | background: var(--red-transparent); 1575 | border: 1px solid var(--red); 1576 | border-radius: 3px; 1577 | } 1578 | :is(#themes-tab) .bd-addon-controls:after { 1579 | content: "OldCord note: Using it with other themes may break stuff. Please don't report issues (this is not from betterdiscord)"; 1580 | color: #fff; 1581 | margin-top: 10px; 1582 | padding: 10px; 1583 | background: var(--red-transparent); 1584 | border: 1px solid var(--red); 1585 | border-radius: 3px; 1586 | flex: 1 1 100%; 1587 | } 1588 | /*vc/call buttons*/ 1589 | .buttonSection__1405b{ 1590 | background: var(--background-floating); 1591 | border: none; 1592 | border-radius: 6px; 1593 | & +:not(.redGlow_f1ceac) path{ 1594 | fill: var(--interactive-hover) !important; 1595 | } 1596 | } 1597 | -------------------------------------------------------------------------------- /src/components/redesign.css: -------------------------------------------------------------------------------- 1 | 2 | .theme-light:not(html.custom-theme-background, :has(#clientThemeVars)){ 3 | --bg-brand: var(--blurple); 4 | --background-base-low: var(--background-primary); 5 | --background-base-lower: var(--background-primary); 6 | --background-base-lowest: var(--background-secondary); 7 | --background-surface-highest: var(--background-primary); 8 | --background-surface-higher: var(--background-floating); 9 | --bg-base-tertiary: var(--background-tertiary); 10 | --custom-channel-members-bg: var(--background-secondary); 11 | --background-mod-subtle: var(--background-modifier-hover); 12 | 13 | 14 | }.theme-dark:not(html.custom-theme-background, :has(#clientThemeVars)) { 15 | --background-base-low: var(--background-primary); 16 | --background-base-lower: var(--background-primary); 17 | --background-base-lowest: var(--background-secondary); 18 | --background-surface-highest: var(--background-primary); 19 | --background-surface-higher: var(--background-floating); 20 | --bg-base-tertiary: var(--background-tertiary); 21 | --custom-channel-members-bg: var(--background-secondary); 22 | --background-mod-subtle: var(--background-modifier-hover); 23 | --bg-brand: var(--blurple); 24 | --modal-footer-background: color-mix(in oklab, var(--primary-630) 100%, var(--theme-base-color, #000) var(--theme-base-color-amount, 0%)); 25 | --checkbox-background-checked: var(--blurple); 26 | --text-normal: color-mix(in oklab, var(--primary-230) 100%, var(--theme-text-color, #000) var(--theme-text-color-amount, 0%)); 27 | --__spoiler-background-color--hidden: var(--primary-700); 28 | --__spoiler-background-color--hidden--hover: hsl(var(--primary-700-hsl) / 0.8); 29 | --__spoiler-background-color--revealed: hsl(var(--white-500-hsl) / 0.1); 30 | --__spoiler-text-color--hidden: transparent; 31 | --__spoiler-warning-text-color: var(--primary-200); 32 | --__spoiler-warning-text-color--hover: var(--white-500); 33 | --__spoiler-warning-background-color: hsl(var(--black-500-hsl) / 0.6); 34 | --__spoiler-warning-background-color--hover: hsl(var(--black-500-hsl) / 0.9); 35 | --__spoiler-container-box-shadow-color: hsl(var(--black-500-hsl) / 0.1); 36 | } 37 | 38 | .theme-darker { 39 | --header-secondary: color-mix(in oklab,var(--neutral-5) 70%,var(--theme-text-color,#000) var(--theme-text-color-amount,0%)) !important; 40 | --background-secondary-alt: color-mix(in oklab, var(--neutral-86) 30%, var(--theme-base-color, #000) var(--theme-base-color-amount, 0%)); 41 | --chat-background-default: hsl(218 4% 18% / 1) !important; 42 | } 43 | .theme-midnight { 44 | --chat-background-default: hsl(0 0% 11% / 1) !important; 45 | --background-secondary-alt: color-mix(in oklab, var(--neutral-86) 60%, var(--theme-base-color, #000) var(--theme-base-color-amount, 0%)); 46 | } 47 | html.theme-dark:not(.theme-darker, .theme-midnight, .custom-theme-background) .interactive__972a0 { 48 | color: var(--channels-default); 49 | } 50 | .chat_f75fb0,.container__133bf, 51 | html:is(.theme-darker, .theme-midnight, .custom-theme-background) 52 | :is(.content_f75fb0, .subtitleContainer_f75fb0, .sidebarList_c48ade, .container_c8ffbb) { 53 | border: none !important; 54 | } 55 | 56 | .sidebarRegionScroller__23e6b{ 57 | background: none !important 58 | } 59 | /* remove the title bar on web & linux */ 60 | .platform-web, 61 | .platform-linux { 62 | .base_c48ade { 63 | grid-template-areas: "titleBar titleBar titleBar" "notice notice notice" "guildsList channelsList page"; 64 | grid-template-rows: [top] 0px [titlebarEnd] min-content [page] 0px [end] !important; 65 | } 66 | .bar_c38106 .title_c38106 { 67 | display: none; 68 | } 69 | .bar_c38106 .trailing_c38106 { 70 | top: 33px !important; 71 | } 72 | .scroller_ef3116 { 73 | padding-top: 12px !important; 74 | } 75 | .notice__6e2b9, 76 | #bd-notices { 77 | margin-top: 0px !important; 78 | } 79 | .base_c48ade:has(.notice__6e2b9, .bd-notice) .bar_c38106 .trailing_c38106 { 80 | top: 69px !important; 81 | } 82 | } 83 | /* platform-specific fixes */ 84 | .platform-osx .base_c48ade { 85 | grid-template-areas: 86 | "titleBar titleBar titleBar" 87 | "notice notice notice" 88 | "guildsList channelsList page"; 89 | grid-template-rows: [top] 0px [titlebarEnd] min-content [page] 0px [end] !important; 90 | .sidebar_c48ade > .guilds_c48ade { 91 | margin-top: 32px; 92 | } 93 | .bar_c38106 .trailing_c38106 { 94 | top: 67px; 95 | } 96 | .notice__6e2b9, 97 | #bd-notices { 98 | margin-top: 22px; 99 | margin-bottom: -27px; 100 | } 101 | &:has(.notice__6e2b9, .bd-notice) .trailing_c38106 { 102 | top: 94px !important; 103 | } 104 | &:has(.notice__6e2b9, .bd-notice) :is(.sidebarList_c48ade, .page_c48ade) { 105 | margin-top: 27px !important; 106 | } 107 | } 108 | .platform-osx .systemBar_c38106 { 109 | background: none; 110 | } 111 | html.platform-win .sidebarListRounded_c48ade { 112 | border-top-left-radius: 8px !important; 113 | } 114 | html.platform-win .trailing_c38106 :is(.recentsIcon_c99c29, .anchor_edefb8) { 115 | transform: translateY(3px); 116 | } 117 | html.platform-osx .title_c38106 { 118 | display: none !important; 119 | } 120 | #app-mount .h5_b717a1.eyebrow_b717a1 { 121 | text-transform: uppercase !important; 122 | } 123 | /*codeblock*/ 124 | 125 | .theme-dark .hljs-addition { 126 | background-color: #033a16; 127 | color: #aff5b4; 128 | } 129 | .theme-dark .hljs-deletion { 130 | background-color: #67060c; 131 | color: #ffdcd7; 132 | } 133 | .theme-dark 134 | :is( 135 | .hljs-attr, 136 | .hljs-attribute, 137 | .hljs-literal, 138 | .hljs-meta, 139 | .hljs-number, 140 | .hljs-operator, 141 | .hljs-selector-attr, 142 | .hljs-selector-class, 143 | .hljs-selector-id, 144 | .hljs-variable 145 | ) { 146 | color: #79c0ff; 147 | } 148 | .theme-light 149 | :is( 150 | .hljs-attr, 151 | .hljs-attribute, 152 | .hljs-literal, 153 | .hljs-meta, 154 | .hljs-number, 155 | .hljs-operator, 156 | .hljs-selector-attr, 157 | .hljs-selector-class, 158 | .hljs-selector-id, 159 | .hljs-variable 160 | ) { 161 | color: #005cc5; 162 | } 163 | .theme-dark :is(.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_) { 164 | color: #d2a8ff; 165 | } 166 | .theme-light :is(.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_) { 167 | color: #6f42c1; 168 | } 169 | .theme-dark :is(.hljs-code, .hljs-comment, .hljs-formula) { 170 | color: #8b949e; 171 | } 172 | .theme-light :is(.hljs-code, .hljs-comment, .hljs-formula) { 173 | color: #6a737d; 174 | } 175 | .theme-dark :is(.hljs-built_in, .hljs-symbol) { 176 | color: #ffa657; 177 | } 178 | .theme-light :is(.hljs-built_in, .hljs-symbol) { 179 | color: #e36209; 180 | } 181 | .theme-dark :is(.hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag) { 182 | color: #7ee787; 183 | } 184 | .theme-light :is(.hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag) { 185 | color: #22863a; 186 | } 187 | .theme-dark :is(.hljs-meta .hljs-string, .hljs-regexp, .hljs-string) { 188 | color: #a5d6ff; 189 | } 190 | .theme-light :is(.hljs-meta .hljs-string, .hljs-regexp, .hljs-string) { 191 | color: #032f62; 192 | } 193 | 194 | .visual-refresh { 195 | /*servers and channels*/ 196 | .childWrapperNoHoverBg__6e9f8 { 197 | background-color: var(--background-primary); 198 | } 199 | .sidebarListRounded_c48ade { 200 | border-top-left-radius: unset; 201 | } 202 | /*weird line on the bottom*/ 203 | .sidebar_c48ade:after { 204 | display: none; 205 | } 206 | 207 | .panels_c48ade { 208 | display: flex; 209 | width: 242px; 210 | flex-direction: column; 211 | border: none; 212 | border-radius: 0; 213 | background: var(--bg-overlay-2, var(--background-secondary-alt)); 214 | } 215 | 216 | .menu_c1e9c4 { 217 | box-shadow: var(--shadow-high); 218 | border-radius: 4px; 219 | border: none; 220 | } 221 | 222 | &:not(html:is(.density-cozy,.density-compact)) :is(.scroller_c1e9c4, 223 | .labelContainer_c1e9c4) { 224 | padding: 6px 8px; 225 | } 226 | .wrapper_f563df { 227 | gap: unset; 228 | padding: 4px 0 6px 2px; 229 | .button_f563df { 230 | border-radius: 50%; 231 | width: 32px; 232 | height: 32px; 233 | padding: 4px; 234 | } 235 | } 236 | html:not(.density-cozy,.density-compact) .item_c1e9c4 { 237 | margin: 2px 0; 238 | } 239 | .sidebar__23e6b:not(.selected_b3f026, :hover) { 240 | color: var(--interactive-normal); 241 | } 242 | .colorDefault_c1e9c4 .label_c1e9c4 { 243 | color: unset; 244 | } 245 | .colorDefault_c1e9c4:active:not(.hideInteraction_c1e9c4) { 246 | background-color: var(--menu-item-default-active-bg); 247 | } 248 | .colorDefault_c1e9c4.focused_c1e9c4 { 249 | border-radius: 2px; 250 | } 251 | .colorDanger_c1e9c4, 252 | .colorDanger_c1e9c4 .checkbox_c1e9c4, 253 | .colorDanger_c1e9c4 .radioSelection_c1e9c4 { 254 | color: var(--status-danger); 255 | } 256 | .colorDanger_c1e9c4.focused_c1e9c4 { 257 | color: var(--white); 258 | } 259 | .colorDefault_c1e9c4.focused_c1e9c4:not(.checkboxContainer_c1e9c4) path { 260 | fill: var(--white); 261 | } 262 | .iconContainer_c1e9c4 { 263 | width: 18px; 264 | height: 18px; 265 | } 266 | .separator_c1e9c4 { 267 | margin: 4px; 268 | } 269 | .iconContainer_c1e9c4 { 270 | svg.radioIcon_c1e9c4 { 271 | width: 16px; 272 | height: 16px; 273 | margin-top: 2px; 274 | } 275 | .refreshIconFill__001a7 { 276 | fill: transparent; 277 | stroke: white; 278 | stroke-width: 2; 279 | r: 10; 280 | } 281 | .refreshIconStroke__001a7 { 282 | stroke-width: 0; 283 | } 284 | .refreshIcon__001a7 { 285 | fill: var(--blurple); 286 | r: 6; 287 | } 288 | } 289 | .icon__9293f { 290 | height: 24px; 291 | width: 24px; 292 | } 293 | .caret_c1e9c4 { 294 | width: 16px; 295 | height: 16px; 296 | } 297 | .buttons__37e49 { 298 | gap: 1px; 299 | } 300 | 301 | .wrapper_cc5dd2, 302 | .childWrapper__6e9f8, 303 | .icon__6e9f8 { 304 | width: 50px !important; 305 | height: 50px !important; 306 | } 307 | .wrapper_cc5dd2 > .svg_cc5dd2 { 308 | inset: auto; 309 | contain: none; 310 | } 311 | .wrapper_cc5dd2 > .svg_cc5dd2 foreignObject { 312 | mask: none; 313 | overflow: visible; 314 | x: -4; 315 | y: -4; 316 | } 317 | .wrapper_cc5dd2 > .svg_cc5dd2 foreignObject[width="48"] { 318 | x: 0; 319 | y: 0; 320 | } 321 | .wrapper_cc5dd2 .wrapper__6e9f8 { 322 | width: 48px; 323 | height: 48px; 324 | border-radius: 25px; 325 | overflow: hidden; 326 | transition: border-radius 0.2s ease; 327 | } 328 | .wrapper__6e9f8.selected__6e9f8 { 329 | border-radius: 15px !important; 330 | } 331 | .outer_bf1984 { 332 | background: var(--background-tertiary); 333 | } 334 | .outer_bf1984.interactive_bf1984:hover { 335 | background-color: var(--background-floating); 336 | } 337 | .container_f37cb1:not(.hasBanner_f37cb1) .header_f37cb1 { 338 | border: unset; 339 | box-shadow: var(--shadow-ledge); 340 | } 341 | .bannerVisible_f37cb1 .header_f37cb1 { 342 | border-bottom-color: transparent; 343 | } 344 | .headerGlass_f37cb1 { 345 | display: none; 346 | } 347 | .container__9293f { 348 | border: unset; 349 | box-shadow: var(--shadow-ledge); 350 | } 351 | .title_f75fb0 { 352 | padding-left: 8px; 353 | } 354 | .lookLink__201d5.colorPrimary__201d5 { 355 | color: var(--text-normal); 356 | } 357 | /* Emojis/GIF Picker */ 358 | .drawerSizingWrapper__08434 { 359 | right: 0px !important; 360 | } 361 | .contentWrapper__08434 { 362 | background-color: var(--background-secondary); 363 | border-radius: 8px; 364 | box-shadow: var(--shadow-border), var(--shadow-high); 365 | border: unset; 366 | } 367 | .header_fed6d3, 368 | .soundboardHeader__08434 { 369 | background-color: var(--background-secondary); 370 | box-shadow: var(--shadow-ledge); 371 | border-bottom: unset; 372 | } 373 | .emojiPicker_c0e32c { 374 | background-color: var(--background-secondary); 375 | box-shadow: var(--shadow-border), var(--shadow-high); 376 | border-bottom-right-radius: var(--custom-emoji-picker-border-radius); 377 | border-bottom-left-radius: var(--custom-emoji-picker-border-radius); 378 | grid-template-columns: 48px auto; 379 | grid-template-rows: auto 1fr auto; 380 | height: var(--custom-emoji-picker-constants-emoji-picker-height); 381 | width: var(--custom-emoji-picker-constants-min-emoji-picker-width); 382 | } 383 | .emojiPickerHasTabWrapper_c0e32c .emojiPicker_c0e32c { 384 | background-color: transparent; 385 | border-bottom-right-radius: 0; 386 | border-bottom-left-radius: 0; 387 | box-shadow: none; 388 | flex: 1 1 auto; 389 | grid-template-rows: auto 1fr auto; 390 | height: 100%; 391 | width: auto; 392 | } 393 | .categoryList_c0e32c { 394 | top: 58px; 395 | } 396 | .expressionPickerCategoryList_a1e0e0 { 397 | top: 50px; 398 | } 399 | .inspector_aeaaeb { 400 | background-color: var(--background-secondary-alt); 401 | border-top: unset; 402 | } 403 | .emojiPickerHasTabWrapper_c0e32c .categoryList_c0e32c { 404 | top: 50px; 405 | } 406 | .unicodeShortcut_b9ee0c { 407 | box-sizing: unset; 408 | border-top: unset; 409 | } 410 | .wrapper__14245 { 411 | background-color: var(--background-secondary); 412 | } 413 | .wrapper__4e6ce { 414 | background-color: var(--background-tertiary); 415 | } 416 | .header_c0e32c { 417 | background-color: var(--background-secondary); 418 | box-shadow: var(--shadow-low); 419 | margin: 0 -1px; 420 | padding: 12px; 421 | border-bottom: unset; 422 | } 423 | .childContainer__91a9d { 424 | padding: 2px 0; 425 | } 426 | .clickable__9293f .icon__9293f { 427 | color: var(--interactive-normal); 428 | } 429 | .popoutContainer__0f481 { 430 | background-color: var(--background-floating); 431 | box-shadow: var(--elevation-low); 432 | -webkit-backdrop-filter: unset; 433 | backdrop-filter: unset; 434 | } 435 | /* channel menus */ 436 | .header__45690 { 437 | background: var(--background-tertiary); 438 | border-bottom: 2px solid var(--background-modifier-accent); 439 | } 440 | .messagesPopoutWrap__45690 { 441 | background-color: var(--background-secondary); 442 | border-radius: 8px; 443 | max-height: 91vh !important; 444 | } 445 | .messageGroupWrapper__45690 { 446 | border: 1px solid var(--background-tertiary); 447 | border-radius: 4px; 448 | -webkit-user-select: none; 449 | background: var(--background-primary); 450 | margin-right: unset; 451 | } 452 | .searchHeader_f3b986 { 453 | background: var(--bg-overlay-chat); 454 | height: 48px; 455 | padding: 0 20px; 456 | border: unset; 457 | } 458 | .content__49fc1 { 459 | padding-top: unset; 460 | } 461 | .root__49fc1 { 462 | border: none; 463 | } 464 | .rootWithShadow__49fc1 { 465 | box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high); 466 | } 467 | .channelName__754bd div, 468 | .channelName__754bd input { 469 | font-weight: 600; 470 | } 471 | .input__4f074 { 472 | border-radius: 3px; 473 | } 474 | .outer__4f074:hover .input__4f074 { 475 | background-color: unset; 476 | outline: unset; 477 | box-shadow: inset 0 0 0 1px var(--background-tertiary); 478 | } 479 | .input__4f074:focus, 480 | .outer__4f074:hover .input__4f074:focus { 481 | background-color: var(--input-background); 482 | box-shadow: inset 0 0 0 1px var(--background-tertiary); 483 | outline: none; 484 | } 485 | 486 | /* tab bars */ 487 | .item_b3f026 { 488 | position: relative; 489 | font-size: 16px; 490 | line-height: 20px; 491 | cursor: pointer; 492 | font-weight: 500; 493 | } 494 | .tab_f8303a { 495 | display: flex; 496 | flex-shrink: 1; 497 | align-items: center; 498 | gap: var(--spacing-8); 499 | padding-bottom: var(--spacing-12); 500 | } 501 | .brand_b3f026.item_b3f026:hover, 502 | .themed_b3f026.item_b3f026:hover { 503 | color: var(--interactive-hover); 504 | } 505 | .top_b3f026 .item_b3f026 { 506 | margin-bottom: unset; 507 | } 508 | .top_b3f026 .item_b3f026.selected_b3f026 { 509 | cursor: default; 510 | color: var(--interactive-active); 511 | } 512 | .top_b3f026 .item_b3f026.selected_b3f026:after, 513 | .top_b3f026 .item_b3f026:hover:after { 514 | border-top-left-radius: unset; 515 | border-top-right-radius: unset; 516 | margin-top: -3px; 517 | } 518 | .topPill_b3f026 .themed_b3f026.selected_b3f026.item_b3f026 { 519 | background-color: var(--background-modifier-selected); 520 | } 521 | .side_b3f026 .themed_b3f026.selected_b3f026.item_b3f026:hover:not(.disabled_b3f026), 522 | .topPill_b3f026 .themed_b3f026.selected_b3f026.item_b3f026:hover:not(.disabled_b3f026) { 523 | background-color: var(--background-modifier-selected); 524 | color: var(--text-primary); 525 | } 526 | .side_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026), 527 | .topPill_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) { 528 | background-color: var(--background-modifier-hover); 529 | } 530 | 531 | /* header text in DMs */ 532 | .titleWrapper__9293f > .defaultColor__5345c.text-md\/medium_cf4812 { 533 | text-transform: unset !important; 534 | } 535 | .topic__6ec1a { 536 | color: var(--header-secondary); 537 | } 538 | /* call background */ 539 | .root_bfe55a { 540 | background: unset; 541 | } 542 | 543 | /*buttons*/ 544 | .button__201d5:is(.bannerColor_fb7f94) { 545 | border: unset; 546 | } 547 | .item_b3f026 { 548 | transition: none !important; 549 | } 550 | :is(.sidebar__23e6b) .selected_b3f026.item_b3f026 { 551 | background: var(--background-modifier-selected) !important; 552 | } 553 | :is(.sidebar__23e6b) .side_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) { 554 | background-color: var(--background-modifier-hover); 555 | } 556 | :is(.sidebar__23e6b) .side_b3f026 .themed_b3f026.item_b3f026:active:not(.disabled_b3f026) { 557 | background-color: var(--background-modifier-active); 558 | color: var(--text-primary); 559 | } 560 | :is(.sidebar__23e6b) .selected_b3f026.item_b3f026:hover { 561 | color: var(--text-primary); 562 | } 563 | .topPill_b3f026 .item_b3f026 { 564 | border-radius: 4px; 565 | margin: 0 8px; 566 | padding: 2px 8px; 567 | min-height: unset; 568 | } 569 | .searchBar__35e86 { 570 | border-bottom: unset; 571 | box-shadow: var(--elevation-low); 572 | } 573 | .searchBar__35e86 .grow__201d5.fullWidth__201d5.sizeSmall__201d5.colorPrimary__201d5.lookFilled__201d5.button__201d5 { 574 | width: 100%; 575 | height: 28px; 576 | min-height: unset; 577 | overflow: hidden; 578 | border-radius: 4px; 579 | background-color: var(--background-tertiary); 580 | box-shadow: none; 581 | .contents__201d5 { 582 | width: 100%; 583 | color: var(--text-muted); 584 | text-align: left; 585 | text-overflow: ellipsis; 586 | font-size: 14px; 587 | font-weight: 500; 588 | line-height: 24px; 589 | white-space: nowrap; 590 | margin-left: -10px; 591 | } 592 | } 593 | .wrapper_f7ecac:not(.popover_c97e55) { 594 | box-shadow: var(--elevation-stroke); 595 | } 596 | .toolbar__9293f { 597 | gap: unset; 598 | padding-left: unset; 599 | } 600 | .iconBadgeBottom__9293f { 601 | right: 2px; 602 | bottom: 0; 603 | --custom-icon-offset: unset; 604 | } 605 | .navButton__08434 { 606 | border-radius: 4px; 607 | color: var(--interactive-normal); 608 | font-size: 16px; 609 | font-weight: 600; 610 | line-height: 20px; 611 | padding: 2px 8px; 612 | transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; 613 | } 614 | .navButtonActive__08434 { 615 | color: var(--interactive-active); 616 | background-color: var(--background-modifier-selected); 617 | } 618 | .navButton__08434:hover { 619 | color: var(--interactive-hover); 620 | background-color: var(--background-modifier-hover); 621 | } 622 | button.button__67645.enabled__67645:hover { 623 | background-color: var(--background-modifier-selected); 624 | } 625 | .container__87bf1.checked__87bf1 { 626 | border: none; 627 | } 628 | button.button__67645, 629 | .visual-refresh span.button__67645 { 630 | transition: none; 631 | } 632 | /* mic button */ 633 | .micButtonParent__37e49:hover > button { 634 | background-color: rgba(0, 0, 0, 0); 635 | } 636 | 637 | /* search bar(s) */ 638 | .medium_a45028 { 639 | height: unset; 640 | .inner_a45028 { 641 | padding: 1px; 642 | .input_a45028 { 643 | padding: 0 8px; 644 | line-height: 32px; 645 | margin: 1px; 646 | } 647 | .iconLayout_a45028 { 648 | width: 32px; 649 | height: 32px; 650 | } 651 | } 652 | } 653 | .container_a45028 { 654 | border: none; 655 | background-color: var(--background-tertiary); 656 | } 657 | .search__49676 { 658 | margin: 0 8px; 659 | } 660 | .searchBar__97492 { 661 | background: var(--bg-overlay-3, var(--background-tertiary)); 662 | padding: 0 2px; 663 | height: 24px; 664 | width: 144px; 665 | border-radius: 4px; 666 | border: none; 667 | margin-right: 80px; 668 | .DraftEditor-root { 669 | padding: 2px 0; 670 | line-height: 20px; 671 | } 672 | } 673 | .container__55c99 { 674 | box-shadow: var(--shadow-border), var(--shadow-high); 675 | border-radius: 3px; 676 | border: none; 677 | background: var(--bg-overlay-3, var(--background-primary)); 678 | } 679 | .container_fea832 { 680 | background-color: var(--background-tertiary); 681 | border-radius: 4px; 682 | border: none; 683 | } 684 | .searchResult__02a39 { 685 | border: solid 1px var(--background-tertiary); 686 | } 687 | /* dropdowns */ 688 | .lookFilled__3f413.select__3f413 { 689 | background-color: var(--input-background); 690 | border-color: var(--input-background); 691 | } 692 | /* border radius 9 list of offenders */ 693 | .root__49fc1, 694 | .container_e45859, 695 | .searchBar__5ec2f, 696 | .tooltip__382e7, 697 | .link__2ea32, 698 | .container_a45028, 699 | .container__91a9d, 700 | .option__56fec, 701 | .wrapper_d5f3cd, 702 | .section__00943, 703 | .container__0be77, 704 | .content__07f91 { 705 | border-radius: 4px; 706 | } 707 | .button__201d5:not(.cta_a3a802) { 708 | border-radius: 3px; 709 | &:not(.lookOutlined__201d5, .card__39ec2 .button_fb7f94, .button_fb7f94) { 710 | border: none; 711 | } 712 | .panels_c48ade & { 713 | background: none; 714 | } 715 | } 716 | .button__7d7f7 { 717 | border-radius: 999% !important; 718 | } 719 | .select__3f413 { 720 | border: 1px solid transparent; 721 | cursor: pointer; 722 | box-sizing: border-box; 723 | grid-gap: 8px; 724 | border-radius: 4px; 725 | min-height: unset; 726 | } 727 | .container_f89b2c { 728 | background-color: var(--opacity-black-8); 729 | border-color: var(--opacity-black-28); 730 | min-height: unset; 731 | border-radius: 3px; 732 | } 733 | /* modal footers */ 734 | .footer__49fc1 { 735 | border-radius: 0 0 5px 5px; 736 | background-color: var(--modal-footer-background); 737 | } 738 | .footerSeparator__49fc1 { 739 | box-shadow: inset 0 1px 0 hsl(220 calc(1 * 6.522%) 18.039% /0.6); 740 | } 741 | .footer__5be3e { 742 | .channelTextArea__74017 { 743 | box-sizing: border-box; 744 | width: 100%; 745 | height: 40px; 746 | border-radius: 3px; 747 | background-color: var(--deprecated-text-input-bg); 748 | border: 1px solid var(--deprecated-text-input-border); 749 | -webkit-transition: border-color 0.2s ease-in-out; 750 | transition: border-color 0.2s ease-in-out; 751 | } 752 | } 753 | 754 | .member__5d473 { 755 | max-width: 224px; 756 | } 757 | .barButtonAlt__0f481 { 758 | background: none; 759 | &:hover { 760 | background: none; 761 | } 762 | } 763 | .custom-theme-background .container_a99829 { 764 | border: unset; 765 | } 766 | .inlineContainer__74017 { 767 | box-shadow: inherit; 768 | background: unset; 769 | border-color: transparent; 770 | } 771 | .inner_a99829 { 772 | border-radius: 3px; 773 | } 774 | .buttons__74017 { 775 | margin-right: -6px !important; 776 | } 777 | .button__74017 { 778 | padding: 4px; 779 | margin-left: 4px; 780 | margin-right: 4px; 781 | } 782 | 783 | .base_c48ade { 784 | grid-template-areas: 785 | "titleBar titleBar titleBar" 786 | "notice notice notice" 787 | "guildsList channelsList page"; 788 | grid-template-rows: [top] 0px [titlebarEnd] min-content [page] 22px [end]; 789 | } 790 | .base_c48ade .sidebar_c48ade { 791 | display: grid; 792 | grid-template-areas: "guilds sidebar" "guilds panels"; 793 | grid-template-columns: [start] min-content [sidebarStart] unset [end]; 794 | grid-template-rows: [start] 1fr [panelsStart] min-content [end]; 795 | border-radius: 0; 796 | } 797 | .base_c48ade .sidebar_c48ade > .guilds_c48ade { 798 | grid-area: guilds; 799 | margin-bottom: 0; 800 | } 801 | .base_c48ade .sidebar_c48ade > .sidebarList_c48ade { 802 | grid-area: sidebar; 803 | width: 241px; 804 | --custom-app-panels-height: 0; 805 | } 806 | .base_c48ade .sidebar_c48ade > .sidebarResizeHandle_c48ade, 807 | :root .base_c48ade .sidebar_c48ade:after { 808 | display: none; 809 | } 810 | /*Betterfolders (vencord)*/ 811 | .base_c48ade.vc-betterFolders-sidebar-grid { 812 | grid-template-columns: [start] 80px [guilds-end] min-content [betterFoldersSidebar-end] 240px [channelsEnd] 1fr [end]; 813 | grid-template-areas: "titleBar titleBar titleBar titleBar" "guildsList betterFoldersSidebar notice notice" "guildsList betterFoldersSidebar channelsList page"; 814 | } 815 | .base_c48ade.vc-betterFolders-sidebar-grid .sidebar_c48ade { 816 | grid-template-columns: [start] 80px [guilds-end] min-content [betterFoldersSidebar-end] 240px [end]; 817 | grid-template-areas: "guilds betterFoldersSidebar sidebar" "guilds betterFoldersSidebar panels"; 818 | width: auto !important; 819 | } 820 | /* ServerFolders (betterdiscord) */ 821 | .folderContentIsOpen_ac0584 .base_c48ade { 822 | grid-template-areas: 823 | "titleBar titleBar titleBar titleBar" 824 | "notice notice notice notice" 825 | "guildsList guildsList channelsList page"; 826 | grid-template-columns: [start] min-content [guildsEnd] min-content [guildsEnd] min-content [channelsEnd] 1fr [end]; 827 | } 828 | .folderContentIsOpen_ac0584 .base_c48ade .sidebar_c48ade { 829 | grid-template-areas: 830 | "guilds guildsFolderList sidebar" 831 | "guilds guildsFolderList panels"; 832 | } 833 | /* user panel */ 834 | .base_c48ade .sidebar_c48ade > .panels_c48ade { 835 | grid-area: panels; 836 | position: static; 837 | inset: auto; 838 | .avatar__37e49.wrapper__44b0c { 839 | width: 32px !important; 840 | height: 32px !important; 841 | svg { 842 | width: 40px; 843 | height: 40px; 844 | } 845 | } 846 | } 847 | .toolbar__9293f > .iconWrapper__9293f { 848 | height: 24px !important; 849 | width: auto !important; 850 | margin: 0 8px; 851 | svg { 852 | width: 24px; 853 | height: 24px; 854 | } 855 | } 856 | .avatarWrapper__37e49 { 857 | padding-left: 2px; 858 | border-radius: 4px; 859 | transition: none; 860 | &:hover { 861 | background-color: var(--background-modifier-selected); 862 | color: var(--interactive-hover); 863 | } 864 | } 865 | .avatarWrapper__37e49 .nameTag__37e49 { 866 | padding-bottom: 4px; 867 | padding-top: 4px; 868 | } 869 | .nameTag__37e49 { 870 | margin-right: 4px; 871 | } 872 | 873 | /* style dms correctly (refresh edition) */ 874 | .channel__972a0 { 875 | .interactive__972a0:active, 876 | .interactiveSelected__972a0 { 877 | background: var(--bg-overlay-selected, var(--background-modifier-selected)); 878 | } 879 | .interactiveSelected__972a0 :is(.name__20a53,.subtext__972a0) { 880 | color: var(--interactive-active) !important; 881 | } 882 | .highlighted__20a53 .subtext__972a0 { 883 | color: var(--interactive-active); 884 | } 885 | .interactive_bf202d:hover { 886 | color: var(--interactive-hover) !important; 887 | } 888 | .interactiveSelected__972a0 .subText__20a53 [data-text-variant="text-xs\/medium"] { 889 | color: var(--interactive-active) !important; 890 | } 891 | 892 | &:hover:not(:has(.interactiveSelected__972a0)) .subText__20a53 [data-text-variant="text-xs\/medium"] { 893 | color: var(--interactive-hover) !important; 894 | } 895 | 896 | &:hover .interactiveSelected__972a0 .name__20a53 { 897 | color: var(--interactive-active) !important; 898 | } 899 | 900 | & .subText__20a53 [data-text-variant="text-xs\/medium"] { 901 | color: var(--channels-default) !important; 902 | } 903 | 904 | &:hover:has(.interactiveSelected__972a0) .interactive_bf202d { 905 | background: var(--background-modifier-selected) !important; 906 | } 907 | .interactive__972a0:focus-within { 908 | background: var(--bg-overlay-selected, var(--background-modifier-selected)); 909 | } 910 | } 911 | 912 | /* style member list correctly */ 913 | .clickable__91a9d.container__91a9d:hover .text_c9d15c, 914 | .clickable__91a9d.container__91a9d:hover .muted__91a9d .text_c9d15c, 915 | .clickable__91a9d.container__91a9d:active .text_c9d15c, 916 | .clickable__91a9d.container__91a9d:active .text_c9d15c, 917 | .highlighted__91a9d.container__91a9d .text_c9d15c, 918 | .selected__91a9d.container__91a9d .text_c9d15c { 919 | color: var(--channels-default); 920 | } 921 | 922 | /* style friends list correctly */ 923 | .peopleListItem_cc6179 { 924 | transition: unset !important; 925 | } 926 | .peopleListItem_cc6179.active_cc6179 { 927 | background-color: var(--background-modifier-hover); 928 | } 929 | 930 | .base_c48ade 931 | .text-sm\/medium__13cf1:not( 932 | .title_b6c092, 933 | .text_c9d15c, 934 | .applicationSublabel_e1ecd3 .text-sm\/medium__13cf1, 935 | .lineClamp1__4bd52, 936 | .searchFilter_bd8186, 937 | .searchAnswer_bd8186 938 | ) { 939 | text-transform: uppercase; 940 | font-size: 12px; 941 | line-height: 16px; 942 | letter-spacing: 0.02em; 943 | font-family: var(--font-display); 944 | font-weight: 600; 945 | } 946 | .header__56fec { 947 | text-transform: uppercase; 948 | font-size: 12px; 949 | line-height: 16px; 950 | letter-spacing: 0.02em; 951 | font-family: var(--font-display); 952 | font-weight: 800; 953 | } 954 | .h5_b717a1:not(.isEnabled__2666b) { 955 | color: var(--header-secondary); 956 | } 957 | .eyebrow_b717a1 { 958 | font-family: var(--font-display); 959 | font-size: 12px; 960 | line-height: 1.3333333333333333; 961 | font-weight: 700; 962 | text-transform: uppercase; 963 | letter-spacing: 0.02em; 964 | } 965 | /* turn a dot into a divider */ 966 | .dot__9293f { 967 | width: 1px; 968 | height: 24px; 969 | margin: 0 8px; 970 | flex: 0 0 auto; 971 | background: var(--background-modifier-accent); 972 | } 973 | 974 | .sectionDivider__35e86 { 975 | display: none; 976 | } 977 | .privateChannelsHeaderContainer__99e7c { 978 | display: flex; 979 | padding: 18px 8px 4px 18px !important; 980 | height: 40px !important; 981 | } 982 | 983 | /* markdown things */ 984 | .markup__75297 code { 985 | line-height: 1.125rem; 986 | text-indent: 0; 987 | background: var(--background-secondary) !important; 988 | border: 1px solid var(--background-tertiary) !important; 989 | } 990 | .markup__75297 code.inline { 991 | font-family: var(--font-code) !important; 992 | } 993 | .embedFull__623de code.inline { 994 | background: var(--background-tertiary) !important; 995 | } 996 | 997 | /* discord logo */ 998 | .childWrapper__6e9f8 svg { 999 | height: 30px !important; 1000 | width: 30px !important; 1001 | } 1002 | 1003 | /* sliders & bars */ 1004 | .slider_a562c8 { 1005 | --grabber-size: 16px !important; 1006 | --bar-size: 4px !important; 1007 | } 1008 | .slider_a562c8 .barFill_a562c8 { 1009 | background-color: var(--bg-brand); 1010 | } 1011 | .grabber_a562c8 { 1012 | top: 9px; 1013 | width: 10px; 1014 | height: 24px; 1015 | margin-left: -5px; 1016 | border-radius: 3px; 1017 | background-color: var(--white); 1018 | border: 1px solid var(--border-strong); 1019 | box-shadow: var(--shadow-border), var(--shadow-ledge), var(--shadow-low); 1020 | } 1021 | .slider_a562c8:is(.hasMarks_a562c8) .grabber_a562c8 { 1022 | margin-top: 16px; 1023 | } 1024 | :is(#user-context-user-volume, .column__7072d, .categorySubGroup__9f327) .slider_a562c8 .grabber_a562c8 { 1025 | margin-top: -7px; 1026 | } 1027 | .sliderBar_ac7648.speaking_ac7648 { 1028 | background-color: rgb(105, 196, 154); 1029 | } 1030 | .bar_a562c8 { 1031 | height: 8px; 1032 | } 1033 | 1034 | .radioBar__001a7 { 1035 | padding: 10px !important; 1036 | --checkbox-border-checked: var(--brand-experiment-130); 1037 | --redesign-input-control-selected: none; 1038 | } 1039 | /* 1040 | .radioBar__001a7 .radioIndicatorGroup__001a7:before { 1041 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 28 28'%3E%3Cpath d='M3 0C1.34326 0 0 1.34277 0 3V21C0 22.6572 1.34326 24 3 24H21C22.6567 24 24 22.6572 24 21V3C24 1.34277 22.6567 0 21 0H3ZM3 1C1.89551 1 1 1.89551 1 3V21C1 22.1045 1.89551 23 3 23H21C22.1045 23 23 22.1045 23 21V3C23 1.89551 22.1045 1 21 1H3Z' stroke='' stroke-width='' fill='%2372767d' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E"); 1042 | position: relative 1043 | } 1044 | */ 1045 | /* chat box */ 1046 | .scrollerSpacer__36d07 { 1047 | height: 30px; 1048 | } 1049 | .formWithLoadedChatInput_f75fb0 { 1050 | padding-left: 16px !important; 1051 | padding-right: 16px !important; 1052 | .channelTextArea__74017 { 1053 | border: none; 1054 | } 1055 | .buttons__74017 { 1056 | margin-right: -6px !important; 1057 | gap: unset; 1058 | } 1059 | .button__74017 { 1060 | padding: 4px; 1061 | margin-left: 4px; 1062 | margin-right: 4px; 1063 | } 1064 | .spriteContainer__04eed { 1065 | --custom-emoji-sprite-size: 24px !important; 1066 | } 1067 | .lottieIcon__5eb9b { 1068 | height: unset !important; 1069 | width: unset !important; 1070 | .channelAppLauncher_e6e74f & { 1071 | width: 24px !important; 1072 | } 1073 | } 1074 | .stackedBars__74017 { 1075 | background: var(--background-secondary); 1076 | &:first-child, 1077 | &.floatingBars__74017:empty + .stackedBars__74017:nth-child(2) { 1078 | border-top-left-radius: 8px; 1079 | border-top-right-radius: 8px; 1080 | } 1081 | &:not(:last-child) { 1082 | border: none; 1083 | } 1084 | } 1085 | .channelAttachmentArea_b77158 { 1086 | background-color: unset; 1087 | } 1088 | .upload_aa605f { 1089 | background-color: unset; 1090 | background: var(--bg-overlay-5, var(--background-secondary)); 1091 | border: unset; 1092 | border-radius: 4px; 1093 | box-shadow: unset; 1094 | } 1095 | .spoilerContainer__54ab5.attachmentContainer__54ab5 .media__41ea0 { 1096 | border-radius: 3px; 1097 | } 1098 | .slateTextArea_ec4baf { 1099 | margin-left: unset; 1100 | } 1101 | .attachButton__0923f { 1102 | height: 40px; 1103 | padding: 10px 16px; 1104 | } 1105 | .attachButtonInner__0923f { 1106 | svg { 1107 | width: 24px; 1108 | height: 24px; 1109 | } 1110 | } 1111 | } 1112 | .channelTextArea__74017 { 1113 | border: unset; 1114 | border-radius: 4px; 1115 | } 1116 | .separator__49fc1 { 1117 | box-shadow: 0 1px 0 0 hsl(240 calc(1 * 5.263%) 7.451% /0.3), 0 1px 2px 0 hsl(240 calc(1 * 5.263%) 7.451% /0.3); 1118 | } 1119 | .header__49fc1 { 1120 | padding: var(--modal-vertical-padding) var(--modal-horizontal-padding); 1121 | } 1122 | .autocompleteAttached__6b0e0 { 1123 | left: 0; 1124 | right: 0; 1125 | } 1126 | .cooldownText_b21699 { 1127 | color: var(--font-primary) !important; 1128 | } 1129 | .base_b88801 { 1130 | left: 16px; 1131 | font-size: 14px; 1132 | font-weight: 500; 1133 | line-height: 24px; 1134 | resize: none; 1135 | align-items: center; 1136 | color: var(--text-normal); 1137 | } 1138 | 1139 | /* jump to present bar */ 1140 | .jumpToPresentBar__0f481 { 1141 | bottom: 0; 1142 | border-radius: 8px 8px 0 0; 1143 | background-color: var(--background-accent); 1144 | opacity: 0.95 !important; 1145 | padding-bottom: 4px !important; 1146 | color: var(--white-500); 1147 | .barButtonBase__0f481 { 1148 | padding-left: unset; 1149 | padding: 0 12px; 1150 | } 1151 | .button__201d5 { 1152 | flex: 0 0 auto; 1153 | font-weight: 600; 1154 | position: relative; 1155 | background: unset; 1156 | padding-bottom: 6px; 1157 | &:hover { 1158 | background-color: unset !important; 1159 | } 1160 | .contents__201d5:after { 1161 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 16'%3E%3Cpath d='M7 10L12 15 17 10'%3E%3C/path%3E%3C/svg%3E"); 1162 | margin-left: 8px; 1163 | } 1164 | } 1165 | } 1166 | .bottomBar__0f481 { 1167 | border: unset; 1168 | padding: unset; 1169 | left: unset; 1170 | right: unset; 1171 | margin: unset; 1172 | width: unset; 1173 | min-width: unset; 1174 | box-shadow: unset; 1175 | min-height: unset; 1176 | box-sizing: unset; 1177 | } 1178 | 1179 | .barBase__0f481 { 1180 | left: 16px; 1181 | right: 16px; 1182 | min-height: 24px; 1183 | opacity: 0.95; 1184 | border: unset; 1185 | } 1186 | 1187 | .embedFull__623de { 1188 | background: var(--background-secondary); 1189 | border-top: unset; 1190 | border-right: unset; 1191 | border-bottom: unset; 1192 | } 1193 | 1194 | .cardPrimary__73069, 1195 | .cardPrimary__73069.editable__73069 { 1196 | background: var(--__card-accent-color); 1197 | } 1198 | .sensitivity_ac7648 { 1199 | min-height: 0px; 1200 | } 1201 | 1202 | /* add emoji button */ 1203 | .largeReactionBtn__23977.forceShow__23977 { 1204 | padding: unset; 1205 | } 1206 | .reactionBtn__23977 { 1207 | opacity: 0; 1208 | } 1209 | .reactionBtn__23977:hover { 1210 | background: none; 1211 | } 1212 | 1213 | /* channel category arrow */ 1214 | .mainContent__29444 { 1215 | margin-left: -10px; 1216 | } 1217 | .mainContent__29444 .icon__29444 { 1218 | order: -1; 1219 | } 1220 | 1221 | .box_f8c98c { 1222 | background-color: var(--background-secondary); 1223 | box-shadow: var(--elevation-low); 1224 | border-radius: 5px; 1225 | } 1226 | .lookLink__201d5.colorLink__201d5 { 1227 | color: var(--text-link); 1228 | } 1229 | 1230 | /* file embeds */ 1231 | .wrapperAudio_cf09d8, 1232 | .file__0ccae, 1233 | .container_a8e786 { 1234 | background-color: var(--background-secondary); 1235 | border: 1px solid var(--background-secondary-alt); 1236 | box-shadow: unset; 1237 | } 1238 | .textContainer__4d95d { 1239 | background-color: var(--background-secondary); 1240 | border: 1px solid var(--background-secondary-alt); 1241 | } 1242 | .footer__4d95d { 1243 | background-color: var(--background-secondary); 1244 | border: 1px solid var(--background-secondary-alt); 1245 | } 1246 | .hljs { 1247 | display: block; 1248 | overflow-x: auto; 1249 | padding: 0.5em; 1250 | border-radius: 4px; 1251 | -webkit-text-size-adjust: none; 1252 | text-size-adjust: none; 1253 | color: var(--text-normal); 1254 | } 1255 | .audioControls_cf09d8 { 1256 | border-radius: 3px; 1257 | background-color: var(--opacity-black-60); 1258 | } 1259 | .colorDefault_c1e9c4.focused_c1e9c4 .caret_c1e9c4, 1260 | .colorDefault_c1e9c4.focused_c1e9c4 .checkbox_c1e9c4, 1261 | .colorDefault_c1e9c4.focused_c1e9c4 .radioSelection_c1e9c4, 1262 | .colorDefault_c1e9c4.focused_c1e9c4 .subtext_c1e9c4, 1263 | .colorDefault_c1e9c4.focused_c1e9c4 .refreshIcon__001a7 { 1264 | color: var(--white); 1265 | fill: var(--white); 1266 | } 1267 | 1268 | /* ping icon */ 1269 | .lowerBadge_cc5dd2 { 1270 | border: 5px solid var(--background-tertiary); 1271 | border-radius: 50%; 1272 | margin-bottom: -5px; 1273 | margin-right: -5px; 1274 | } 1275 | .upperBadge_cc5dd2{ 1276 | background: var(--background-tertiary); width: 24px; height: 24px; 1277 | position: relative; 1278 | border-radius: 50%; 1279 | left: 28px; 1280 | &>.iconBadge__650eb{ 1281 | top: 4px; left: 4px; position: absolute 1282 | } 1283 | } 1284 | 1285 | 1286 | /* voice channel user count */ 1287 | .wrapper__260e1 { 1288 | display: flex; 1289 | align-items: stretch; 1290 | line-height: 20px; 1291 | border-radius: 10px; 1292 | color: var(--channels-default); 1293 | border: none; 1294 | } 1295 | .total__260e1 { 1296 | padding: 0 6px 0 0; 1297 | background-color: var(--background-tertiary); 1298 | &:after { 1299 | left: -8px; 1300 | border-right: 8px solid transparent; 1301 | border-right-color: var(--background-tertiary); 1302 | } 1303 | } 1304 | .users__260e1 { 1305 | padding: 0 8px 0 6px; 1306 | background-color: var(--background-primary); 1307 | } 1308 | .total__260e1, 1309 | .users__260e1 { 1310 | font-feature-settings: normal; 1311 | font-variant-numeric: normal; 1312 | } 1313 | 1314 | /* placeholder gray square when moving a server icon */ 1315 | .dragInner__87847 { 1316 | background-color: var(--background-primary) !important; 1317 | border: none !important; 1318 | } 1319 | svg.placeholderMask__87847 { 1320 | width: 50px; 1321 | height: 50px; 1322 | } 1323 | 1324 | /* unreads bars */ 1325 | .bar__7aaec, 1326 | .voiceBar__7aaec { 1327 | border: unset; 1328 | margin-bottom: 4px; 1329 | background-color: var(--background-accent); 1330 | opacity: 0.9; 1331 | } 1332 | .top__7aaec, 1333 | .unreadTop__629e4 { 1334 | top: 0; 1335 | } 1336 | .bottom__7aaec, 1337 | .unreadBottom__629e4 { 1338 | bottom: 0; 1339 | } 1340 | 1341 | /* invites */ 1342 | .wrapper_d5f3cd { 1343 | background-color: var(--background-secondary); 1344 | border: unset; 1345 | } 1346 | 1347 | /* forums */ 1348 | .container__01ae2 { 1349 | border-top: unset; 1350 | background: var(--bg-overlay-app-frame, var(--background-base-lowest)); 1351 | box-sizing: unset; 1352 | } 1353 | .floating__01ae2 { 1354 | border-left: 1px solid var(--background-secondary); 1355 | width: 400px !important; 1356 | z-index: 103; 1357 | } 1358 | .card_f369db { 1359 | padding-bottom: 8px; 1360 | } 1361 | .grid_f369db > div:first-child, 1362 | .headerRow_f369db, 1363 | .list_f369db > div:first-child { 1364 | min-width: 400px; 1365 | padding-right: var(--spacing-16); 1366 | } 1367 | .list_f369db .header_f369db { 1368 | margin-top: 24px; 1369 | } 1370 | .tagsContainer_f369db { 1371 | padding-top: 24px; 1372 | } 1373 | .mainCard_f369db { 1374 | background: var(--bg-mod-faint); 1375 | border: 1px solid transparent; 1376 | } 1377 | .container_faa96b { 1378 | padding: 12px; 1379 | } 1380 | .container_faa96b:hover { 1381 | background-color: var(--background-modifier-active) !important; 1382 | box-shadow: var(--elevation-high) !important; 1383 | transform: translateY(-2px) !important; 1384 | } 1385 | .container_faa96b.isOpen_faa96b { 1386 | background-color: var(--background-modifier-selected); 1387 | border: unset; 1388 | box-shadow: var(--shadow-low) !important; 1389 | } 1390 | .container__5808f { 1391 | background-color: var(--background-floating); 1392 | border-radius: var(--radius-xs); 1393 | box-shadow: var(--elevation-high); 1394 | padding: 8px; 1395 | } 1396 | .pill_a2c9e8 { 1397 | background-color: var(--background-secondary-alt); 1398 | border: 1px solid transparent; 1399 | color: var(--text-normal); 1400 | } 1401 | .pill_a2c9e8.clickable_a2c9e8:not(.disabled_a2c9e8):hover { 1402 | background-color: var(--background-tertiary); 1403 | cursor: pointer; 1404 | } 1405 | .sortDropdown_f369db, 1406 | .tagsButton_f369db { 1407 | background-color: var(--background-secondary-alt); 1408 | } 1409 | :is(.sortDropdown_f369db, .tagsButton_f369db):hover { 1410 | background-color: var(--background-tertiary); 1411 | } 1412 | 1413 | /* message flash */ 1414 | .flash__03436, 1415 | .message__5126c { 1416 | border-bottom-right-radius: unset; 1417 | border-top-right-radius: unset; 1418 | } 1419 | .flash__03436[data-flash="true"], 1420 | .highlighted__5126c, 1421 | .replying__5126c { 1422 | background-color: rgba(114, 137, 218, 0.05); 1423 | } 1424 | :is(.highlighted__5126c, .replying__5126c):hover { 1425 | background-color: rgba(114, 137, 218, 0.1) !important; 1426 | } 1427 | 1428 | /* go live modal */ 1429 | .container_a55fdc { 1430 | background: unset; 1431 | box-shadow: unset; 1432 | display: flex; 1433 | flex-direction: column; 1434 | overflow: visible; 1435 | .horizontal__7c0ba > .flex__7c0ba:last-child, 1436 | .horizontal__7c0ba > .flexChild__7c0ba:last-child { 1437 | margin-top: -5px; 1438 | } 1439 | .headerDescription_a55fdc { 1440 | color: var(--text-normal) !important; 1441 | margin-top: -1px; 1442 | } 1443 | } 1444 | .modalSize_a55fdc { 1445 | margin-top: -0.5px; 1446 | width: 410px; 1447 | .sizeSmall__201d5 { 1448 | width: 90px; 1449 | height: 36px; 1450 | } 1451 | .cancelButton_a55fdc { 1452 | margin-right: 180px; 1453 | background: var(--button-secondary-background); 1454 | } 1455 | .modalFooter_a55fdc .button__201d5:not([type="submit"], .lookLink__201d5) { 1456 | display: none; 1457 | } 1458 | } 1459 | .segmentContainer_a2de16 { 1460 | margin: unset; 1461 | padding: unset; 1462 | } 1463 | .segmentControl_a2de16 { 1464 | padding: 0 16px; 1465 | } 1466 | .segmentControlOption_a2de16 { 1467 | align-items: unset; 1468 | display: unset; 1469 | flex: unset; 1470 | justify-content: unset; 1471 | margin-left: unset; 1472 | margin-right: 20px; 1473 | padding-bottom: 8px; 1474 | padding-top: 0; 1475 | } 1476 | .sourceScroller_a2de16 { 1477 | height: 300px; 1478 | } 1479 | .sourceContainer_a2de16 { 1480 | padding: 0px; 1481 | } 1482 | .tile_a2de16 { 1483 | padding: unset; 1484 | margin-top: 12px; 1485 | .sourceThumbnail_a2de16 { 1486 | height: 96px; 1487 | width: 170px; 1488 | border-radius: 4px; 1489 | } 1490 | } 1491 | .qualitySettingsContainer_c6d3dc { 1492 | border-radius: 4px; 1493 | border: 1px solid var(--background-tertiary); 1494 | } 1495 | .refreshedArt_a55fdc { 1496 | content: url(https://static.discord.com/assets/3d0b430b1bae9f90.svg) !important; 1497 | display: inline-block; 1498 | height: var(--custom-go-live-modal-art-height); 1499 | margin: -60px auto 0; 1500 | width: 200px; 1501 | transform: scale(1.4) translateX(-9px); 1502 | } 1503 | 1504 | /* voice panel */ 1505 | .container_e131a9 { 1506 | .labelWrapper__06d62 .text-md\/medium_cf4812 { 1507 | font-size: 14px !important; 1508 | font-weight: 600; 1509 | } 1510 | } 1511 | .rtcConnectionStatusWrapper__06d62 .text-sm\/medium_cf4812.lineClamp1__4bd52 { 1512 | font-size: 12px !important; 1513 | color: var(--header-secondary) !important; 1514 | } 1515 | .rtcConnectionStatusConnected__06d62 { 1516 | color: var(--text-positive); 1517 | } 1518 | 1519 | .wrapper_cb9592:has(.idle__2f4f7), 1520 | .wrapper_cb9592:is(.video_cb9592) { 1521 | z-index: 102; 1522 | } 1523 | 1524 | /* hide idle call background */ 1525 | .gradientBackground__11664, 1526 | .gradientBackground__41626 { 1527 | display: none; 1528 | } 1529 | 1530 | /* fix notice positioning */ 1531 | .notice__6e2b9, 1532 | #bd-notices { 1533 | box-shadow: var(--elevation-low); 1534 | margin-top: 22px; 1535 | margin-bottom: -38px; 1536 | grid-area: channelsList / channelsList / channelsList / page; 1537 | } 1538 | .base_c48ade:has(.notice__6e2b9, .bd-notice) .trailing_c38106 { 1539 | top: 89px; 1540 | .winButtons_c38106 { 1541 | bottom: 73px; 1542 | } 1543 | } 1544 | .base_c48ade:has(.notice__6e2b9, .bd-notice) :is(.sidebarList_c48ade, .page_c48ade) { 1545 | margin-top: 37px; 1546 | } 1547 | .page_c48ade { 1548 | height: auto; 1549 | } 1550 | 1551 | .section__00943 { 1552 | background: #2f3136; 1553 | } 1554 | 1555 | /* polls */ 1556 | .container__0be77 { 1557 | background-color: var(--deprecated-card-editable-bg); 1558 | border: unset; 1559 | .buttonPresentation__0be77 { 1560 | border: unset; 1561 | } 1562 | } 1563 | .container_f69538 { 1564 | background-color: var(--background-secondary); 1565 | border-radius: 3px; 1566 | border: unset; 1567 | } 1568 | 1569 | /* call background */ 1570 | .wrapper_cb9592.minimum_cb9592 .callContainer_cb9592 { 1571 | background: #202225; 1572 | } 1573 | 1574 | /* friends tab wumpus */ 1575 | .addFriendWumpusWrapper__72ba7 { 1576 | display: none; 1577 | } 1578 | .addFriendInputWrapper__72ba7:focus-within { 1579 | border: 1px solid var(--deprecated-text-input-border); 1580 | } 1581 | 1582 | /* inbox */ 1583 | .container__2692d, 1584 | .container_fc561d, 1585 | .recentMentionsPopout__95796 { 1586 | background-color: var(--background-secondary); 1587 | .header__45690 { 1588 | border-bottom: unset; 1589 | } 1590 | .header_ab6641 { 1591 | padding: 0 var(--space-md) 0; 1592 | } 1593 | .inboxTitle_ab6641, 1594 | .inboxIcon_ab6641 { 1595 | display: none; 1596 | } 1597 | .controls_ab6641 { 1598 | margin-bottom: -65px; 1599 | .friendRequestsButton__523aa { 1600 | background-color: var(--background-tertiary); 1601 | color: var(--interactive-normal); 1602 | } 1603 | } 1604 | .top_b3f026 .item_b3f026.brand_b3f026 { 1605 | --selected-tab-item-color: unset; 1606 | } 1607 | .tabBar_ab6641 { 1608 | margin-left: 16px; 1609 | .tab_ab6641 { 1610 | padding: 8px 8px; 1611 | margin: 0 8px; 1612 | height: 10px; 1613 | margin-top: 4px; 1614 | margin-bottom: 20px; 1615 | border-radius: 4px; 1616 | background-color: var(--background-primary); 1617 | } 1618 | .tab_ab6641:is(.selected_b3f026) { 1619 | background-color: var(--background-accent); 1620 | } 1621 | .tab_ab6641:nth-of-type(3) { 1622 | order: -2; 1623 | } 1624 | .tab_ab6641:nth-of-type(2) { 1625 | order: -1; 1626 | } 1627 | } 1628 | .channelHeader__35a7e { 1629 | background-color: var(--background-secondary); 1630 | } 1631 | .primary__06eda { 1632 | background-color: var(--background-primary); 1633 | color: var(--interactive-normal); 1634 | } 1635 | .secondary__06eda { 1636 | background-color: var(--background-secondary); 1637 | color: var(--interactive-normal); 1638 | } 1639 | .tertiary__06eda { 1640 | background-color: var(--background-tertiary); 1641 | color: var(--interactive-normal); 1642 | } 1643 | .messages__1ccd1 { 1644 | background-color: var(--background-primary); 1645 | border: unset; 1646 | } 1647 | .messageContainer__95796 { 1648 | background-color: var(--background-primary); 1649 | border: unset; 1650 | } 1651 | .container__0f711 { 1652 | background-color: var(--background-secondary); 1653 | } 1654 | } 1655 | 1656 | /* stupid header bars */ 1657 | .container_d08938, 1658 | .outerContainer_e1147e, 1659 | .applicationStore_f07d62, 1660 | .libraryHeader__5a895, 1661 | .chat_f75fb0:has(.pageBody__41ed7) { 1662 | z-index: 102; 1663 | } 1664 | 1665 | .changelog_eae0ef, 1666 | .safetyChecklist_eae0ef { 1667 | background-color: var(--background-secondary); 1668 | } 1669 | .auditLog__43dab { 1670 | background-color: rgba(32, 34, 37, 0.3); 1671 | padding: unset; 1672 | border-radius: 3px; 1673 | border-color: #202225; 1674 | .headerClickable__43dab { 1675 | padding: 10px 20px 10px 10px; 1676 | } 1677 | .headerExpanded__43dab { 1678 | background-color: rgba(32, 34, 37, 0.3); 1679 | } 1680 | .divider__43dab { 1681 | background-color: var(--background-nested-floating); 1682 | } 1683 | } 1684 | .footerPlaceholder__98b95 { 1685 | .card_dc2e44 { 1686 | border-color: var(--background-secondary-alt); 1687 | border-radius: 5px; 1688 | } 1689 | } 1690 | 1691 | /* the pin broke */ 1692 | .primaryButton__468a6, 1693 | .secondaryButton__468a6 { 1694 | flex: 1 1 45%; 1695 | } 1696 | .title__468a6, 1697 | .body__468a6 { 1698 | text-align: center; 1699 | } 1700 | .modalContent__468a6 { 1701 | padding-bottom: 20px; 1702 | } 1703 | .form__468a6:has(.alignCenter_abf706) .separator__49fc1 { 1704 | box-shadow: unset; 1705 | align-self: center; 1706 | } 1707 | .form__468a6:has(.alignCenter_abf706) .footer__49fc1 .primaryButton__468a6.sizeMedium__201d5 { 1708 | height: 50px; 1709 | } 1710 | .title__468a6.defaultColor__5345c.heading-lg\/semibold_cf4812.defaultColor__4bd52 { 1711 | align-self: center; 1712 | } 1713 | 1714 | /* quick switcher */ 1715 | .quickswitcher_ac6cb0 { 1716 | background-color: var(--background-secondary); 1717 | box-shadow: 0 2px 10px var(--opacity-black-20), 0 0 0 1px #1c242b99; 1718 | border: unset; 1719 | .input_ac6cb0 { 1720 | background-color: var(--deprecated-quickswitcher-input-background); 1721 | border: none; 1722 | border-radius: 5px; 1723 | box-shadow: var(--elevation-high); 1724 | } 1725 | .input_ac6cb0::placeholder { 1726 | font-weight: 600; 1727 | color: #dcddde; 1728 | opacity: 0.5; 1729 | } 1730 | } 1731 | 1732 | /* server banner images */ 1733 | .bannerImage_f37cb1, .bannerImg_f37cb1 { 1734 | width: 240px; 1735 | aspect-ratio: unset; 1736 | } 1737 | } 1738 | 1739 | :where(.visual-refresh) .item__001a7, 1740 | :where(.visual-refresh) .item__001a7[aria-checked="true"], 1741 | :where(.visual-refresh) .itemFilled__001a7[aria-checked="true"], 1742 | :where(.visual-refresh) .radioBar__001a7 { 1743 | border-radius: 5px; 1744 | } 1745 | /*ttitle bar. and stufuff. i guess*/ 1746 | .bar_c38106:not(.systemBar_c38106):not(:has(.channelTabs-trailing)) { 1747 | padding: 0 12px 0 !important; 1748 | height: 50px; 1749 | margin-top: -33px; 1750 | } 1751 | .bar_c38106 .title_c38106 { 1752 | text-align: start; 1753 | display: block; 1754 | position: absolute; 1755 | margin-bottom: 30px; 1756 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2.38419e-7 52.99 10'%3E%3Cpath d=' M3.57642276,0.141304348 L0,0.141304348 L0,4.22826087 L2.38069106,6.40217391 L2.38069106,2.43478261 L3.66260163,2.43478261 C4.47052846,2.43478261 4.86910569,2.83695652 4.86910569,3.4673913 L4.86910569,6.5 C4.86910569,7.13043478 4.49207317,7.55434783 3.66260163,7.55434783 L0,7.55434783 L0,9.85869565 L3.57642276,9.85869565 C5.49390244,9.86956522 7.29288618,8.90217391 7.29288618,6.66304348 L7.29288618,3.39130435 C7.29288618,1.13043478 5.49390244,0.141304348 3.57642276,0.141304348 Z M22.3310976,6.67391304 L22.3310976,3.32608696 C22.3310976,2.11956522 24.4640244,1.83695652 25.1103659,3.05434783 L27.0817073,2.23913043 C26.3168699,0.510869565 24.8949187,0 23.7207317,0 C21.803252,0 19.9073171,1.13043478 19.9073171,3.32608696 L19.9073171,6.67391304 C19.9073171,8.88043478 21.803252,10 23.6776423,10 C24.8841463,10 26.3276423,9.39130435 27.1247967,7.81521739 L25.0134146,6.82608696 C24.4963415,8.17391304 22.3310976,7.84782609 22.3310976,6.67391304 Z M15.8030488,3.7826087 C15.0597561,3.61956522 14.5642276,3.34782609 14.5319106,2.88043478 C14.575,1.75 16.2878049,1.7173913 17.2896341,2.79347826 L18.8731707,1.55434783 C17.8821138,0.326086957 16.7617886,0 15.598374,0 C13.8424797,0 12.1404472,1 12.1404472,2.91304348 C12.1404472,4.77173913 13.5408537,5.76086957 15.0813008,6 C15.8676829,6.10869565 16.7402439,6.42391304 16.7186992,6.97826087 C16.654065,8.02173913 14.5426829,7.9673913 13.5839431,6.7826087 L12.0650407,8.23913043 C12.9591463,9.40217391 14.1764228,10 15.3182927,10 C17.074187,10 19.0239837,8.9673913 19.0993902,7.08695652 C19.2071138,4.69565217 17.5050813,4.09782609 15.8030488,3.7826087 Z M8.59634146,9.85869565 L11.0093496,9.85869565 L11.0093496,0.141304348 L8.59634146,0.141304348 L8.59634146,9.85869565 Z M49.2835366,0.141304348 L45.7071138,0.141304348 L45.7071138,4.22826087 L48.0878049,6.40217391 L48.0878049,2.43478261 L49.3589431,2.43478261 C50.1668699,2.43478261 50.5654472,2.83695652 50.5654472,3.4673913 L50.5654472,6.5 C50.5654472,7.13043478 50.1884146,7.55434783 49.3589431,7.55434783 L45.6963415,7.55434783 L45.6963415,9.85869565 L49.2727642,9.85869565 C51.1902439,9.86956522 52.9892276,8.90217391 52.9892276,6.66304348 L52.9892276,3.39130435 C53,1.13043478 51.2010163,0.141304348 49.2835366,0.141304348 Z M31.7353659,0 C29.753252,0 27.7819106,1.09782609 27.7819106,3.33695652 L27.7819106,6.66304348 C27.7819106,8.89130435 29.7640244,10 31.7569106,10 C33.7390244,10 35.7103659,8.89130435 35.7103659,6.66304348 L35.7103659,3.33695652 C35.7103659,1.10869565 33.7174797,0 31.7353659,0 Z M33.2865854,6.66304348 C33.2865854,7.35869565 32.5109756,7.7173913 31.7461382,7.7173913 C30.9705285,7.7173913 30.1949187,7.36956522 30.1949187,6.66304348 L30.1949187,3.33695652 C30.1949187,2.61956522 30.9489837,2.23913043 31.7030488,2.23913043 C32.4894309,2.23913043 33.2865854,2.58695652 33.2865854,3.33695652 L33.2865854,6.66304348 Z M44.3605691,3.33695652 C44.3067073,1.05434783 42.7770325,0.141304348 40.8056911,0.141304348 L36.9815041,0.141304348 L36.9815041,9.86956522 L39.4268293,9.86956522 L39.4268293,6.77173913 L39.8577236,6.77173913 L42.0768293,9.85869565 L45.0930894,9.85869565 L42.4861789,6.52173913 C43.6495935,6.15217391 44.3605691,5.14130435 44.3605691,3.33695652 Z M40.8487805,4.65217391 L39.4268293,4.65217391 L39.4268293,2.43478261 L40.8487805,2.43478261 C42.3784553,2.43478261 42.3784553,4.65217391 40.8487805,4.65217391 Z%0A' fill='%2372767d'/%3E%3C/svg%3E"); 1757 | background-repeat: no-repeat; 1758 | transform: translateY(40px) translateX(12px) scale(1.01); 1759 | width: 52px; 1760 | .text-sm\/medium_cf4812 { 1761 | display: none; 1762 | } 1763 | svg { 1764 | display: none; 1765 | } 1766 | .guildIcon__85643 { 1767 | display: none; 1768 | } 1769 | } 1770 | .bar_c38106 .trailing_c38106 { 1771 | top: 51px; 1772 | gap: 8px; 1773 | z-index: 102; 1774 | } 1775 | .bar_c38106 .channelTabs-trailing .trailing_c38106 { 1776 | top: 44px; 1777 | right: 10px; 1778 | } 1779 | .channelTabs-trailing .winButtons_c38106 { 1780 | position: absolute; 1781 | top: -53px; 1782 | right: 6px; 1783 | & .winButton_c38106 { 1784 | width: var(--custom-app-top-bar-height); 1785 | height: var(--custom-app-top-bar-height); 1786 | padding-left: 10px; 1787 | padding-right: 10px; 1788 | } 1789 | } 1790 | #channelTabs-settingsMenu { 1791 | position: relative; 1792 | right: 20px; 1793 | } 1794 | .container__01ae2 > .container__9293f { 1795 | z-index: 102; 1796 | } 1797 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f { 1798 | width: 30px; 1799 | height: 30px; 1800 | border-radius: 4px; 1801 | } 1802 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f .icon__9293f { 1803 | width: 24px; 1804 | height: 24px; 1805 | } 1806 | 1807 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f.selected__9293f .icon__9293f { 1808 | opacity: 1; 1809 | } 1810 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f > svg > foreignObject { 1811 | x: -2px; 1812 | y: -2px; 1813 | mask: none !important; 1814 | } 1815 | 1816 | html .bar_c38106 { 1817 | top: 0; 1818 | right: 0; 1819 | z-index: 102; 1820 | } 1821 | .inviteToolbar__133bf > .clickable__9293f.iconWrapper__9293f { 1822 | right: 90px; 1823 | flex-wrap: wrap; 1824 | } 1825 | .inviteToolbar__133bf .iconWrapper__9293f:after { 1826 | border-left: 1px solid var(--border-subtle); 1827 | content: ""; 1828 | margin-left: 55px; 1829 | margin-top: -29px; 1830 | height: calc(var(--custom-app-top-bar-height) - var(--space-12)); 1831 | } 1832 | .winButtons_c38106 { 1833 | position: absolute; 1834 | gap: unset; 1835 | justify-content: center; 1836 | bottom: 35px; 1837 | left: -12px; 1838 | z-index: 3001; 1839 | -webkit-app-region: no-drag !important; 1840 | .winButton_c38106 { 1841 | align-items: center; 1842 | width: 28px; 1843 | height: 23px; 1844 | } 1845 | } 1846 | .winButtonsWithDivider_c38106:before { 1847 | border: unset; 1848 | } 1849 | .systemBar_c38106 { 1850 | background-color: var(--background-tertiary); 1851 | min-height: 22px; 1852 | .winButtons_c38106 { 1853 | bottom: 39px; 1854 | left: -84px; 1855 | } 1856 | .platform-linux & { 1857 | display: none; 1858 | } 1859 | } 1860 | .channelTabs-tabContainer div { 1861 | margin-bottom: 0 !important; 1862 | } 1863 | /* server list */ 1864 | .base_c48ade .sidebar_c48ade > .guilds_c48ade { 1865 | width: 72px; 1866 | .scroller_ef3116 { 1867 | padding-top: 2px; 1868 | gap: 0px !important; 1869 | ul.stack_dbd263 { 1870 | height: auto !important; 1871 | } 1872 | } 1873 | .listItem__650eb:has(.guildSeparator__252b6) { 1874 | margin: 6px 0 8px 0; 1875 | } 1876 | .listItem__650eb { 1877 | margin: 0 0 0px; 1878 | } 1879 | .guildSeparator__252b6 { 1880 | height: 2px; 1881 | } 1882 | .folderIcon__48112 { 1883 | margin-top: 0px; 1884 | margin-left: -1px; 1885 | & svg { 1886 | width: 24px; 1887 | height: 24px; 1888 | } 1889 | } 1890 | } 1891 | .folderGroup__48112 { 1892 | --custom-folder-preview-padding: 6px; 1893 | --custom-folder-color: #7289da; 1894 | } 1895 | .folderGroup__48112:not(.isExpanded__48112) .folderIcon__48112 svg { 1896 | display: none; 1897 | } 1898 | .folderGroupBackground__48112 { 1899 | left: 11px; 1900 | width: 48px; 1901 | bottom: 4px; 1902 | border-radius: 16px 16px 25px 25px; 1903 | background: var(--background-modifier-accent); 1904 | border: none; 1905 | } 1906 | .folderIconWrapper__48112 { 1907 | width: 48px; 1908 | height: 48px; 1909 | overflow: hidden; 1910 | border-radius: 16px; 1911 | --bg-mod-subtle: rgba(114, 137, 218, 0.4) !important; 1912 | } 1913 | .expandedFolderIconWrapper__48112 { 1914 | margin: 0; 1915 | width: 48px; 1916 | height: 48px; 1917 | } 1918 | .folderGroup__48112:is(.isExpanded__48112) .folderPreviewWrapper__48112 { 1919 | display: none; 1920 | } 1921 | .folderPreviewGuildIcon__48112 { 1922 | border-radius: 32px !important; 1923 | } 1924 | 1925 | .listItem__650eb:has(.circleIcon__5bc7e) { 1926 | margin: 6px 0 0 !important; 1927 | .circleIconButton__5bc7e { 1928 | border-radius: 50%; 1929 | width: 48px; 1930 | height: 48px; 1931 | } 1932 | } 1933 | .guildsError_e8d03f { 1934 | width: 48px; 1935 | height: 48px; 1936 | background: (rgba(240, 71, 71, 0.1)); 1937 | border-color: var(--red); 1938 | &:hover { 1939 | background: var(--red); 1940 | } 1941 | } 1942 | .mention__3b95d { 1943 | box-sizing: border-box; 1944 | opacity: 0.9; 1945 | border: unset; 1946 | box-shadow: unset; 1947 | right: 1px; 1948 | } 1949 | 1950 | .sidebar_c48ade:after { 1951 | display: none; 1952 | } 1953 | 1954 | /* fix unread dm gap */ 1955 | .stack_dbd263#guild-list-unread-dms { 1956 | gap: 16px !important; 1957 | padding-bottom: 10px !important; 1958 | } 1959 | 1960 | /* hides left sidebar when fullscreen mode */ 1961 | .base_c48ade[data-fullscreen="true"] { 1962 | .sidebar_c48ade { 1963 | display: none; 1964 | } 1965 | } 1966 | 1967 | .spriteContainer__04eed { 1968 | --custom-emoji-sprite-size: 24px !important; 1969 | } 1970 | -------------------------------------------------------------------------------- /src/components/showEffects.css: -------------------------------------------------------------------------------- 1 | /*make cosmetics show again*/ 2 | .avatarDecoration__44b0c,.avatarDecoration_c19a55,.profileEffects__01370,.mask__68edb,.nameplated__91a9d{ 3 | display: unset !important; 4 | } 5 | .animatorTop_faf9c0 .mask__68edb{ 6 | display: none !important 7 | } 8 | /*adjust profile effect opacity*/ 9 | .profileEffects__01370{ 10 | opacity: 0.2 11 | } 12 | .bannerColor_fb7f94{ 13 | background: #00000085 !important 14 | } 15 | 16 | /*move that weird circle to the middle*/ 17 | .mask__68edb mask circle{ 18 | transform: translateX(69.5px); 19 | } 20 | :has(.custom-theme-background) .mask__68edb mask circle{ 21 | transform: translateX(73px) translateY(5px); 22 | } 23 | .user-profile-modal .mask__68edb mask circle{ 24 | display: none !important 25 | } 26 | .user-profile-modal-v2 .mask__68edb mask circle{ 27 | display: none !important 28 | } 29 | /*fix some overlaying stuff*/ 30 | .header__5be3e{ 31 | z-index: 2 32 | } 33 | /*make banners not so zoomed-in*/ 34 | .userPopoutOuter_c69a7b .banner__68edb{ 35 | max-width: 250px; 36 | } 37 | 38 | /*fix for reaction stuff*/ 39 | .avatar__75742{ 40 | position: absolute !important; 41 | top: 53px !important; 42 | } 43 | /*move usernames etc. a bit down*/ 44 | .outer_c0bea0:is(.user-profile-popout.outer_c0bea0) .container__63ed3{ 45 | padding-top: 44px; 46 | } 47 | .user-profile-popout .container_ab8609 { 48 | top: 140px 49 | } 50 | .user-profile-popout.outer_c0bea0:has(.pronouns__63ed3) .container_ab8609 { 51 | top: 157px !important; 52 | } 53 | 54 | /*add colors back (but without that annoying border ew)*/ 55 | .custom-profile-theme .user-profile-popout .inner_c0bea0{ 56 | --profile-gradient-overlay-color: rgb(0 0 0 / 40%); 57 | background: linear-gradient(color-mix(in oklab,var(--profile-gradient-overlay-color)100%,var(--profile-gradient-primary-color)),color-mix(in oklab,var(--profile-gradient-overlay-color)100%,var(--profile-gradient-primary-color)),color-mix(in oklab,var(--profile-gradient-overlay-color)100%,var(--profile-gradient-secondary-color))) !important; 58 | & .container__63ed3,.mutuals__530ce { 59 | background: var(--play, linear-gradient(color-mix(in oklab,var(--profile-gradient-overlay-color)100%,var(--profile-gradient-primary-color)),color-mix(in oklab,var(--profile-gradient-overlay-color)100%,var(--profile-gradient-primary-color)),color-mix(in oklab,var(--profile-gradient-overlay-color)100%,var(--profile-gradient-secondary-color)))) !important 60 | } 61 | } 62 | 63 | 64 | .custom-profile-theme .footer__5be3e .themedBackground__74017{ 65 | background: var(--profile-gradient-overlay-color) !important 66 | } 67 | 68 | 69 | /* banners behind headers */ 70 | .user-profile-modal .inner_c0bea0 .mask__68edb { 71 | position: absolute; 72 | z-index: 0; 73 | opacity: 25%; 74 | mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); 75 | } 76 | .user-profile-modal .inner_c0bea0 .headerInner__24502 { 77 | background: transparent !important; 78 | } 79 | 80 | .user-profile-modal.inner_c0bea0:has(.mask__68edb) .body__24502 { 81 | & .fullSizeOverlayBackground_c69a7b { 82 | z-index: 2; 83 | } 84 | & .container__63ed3 { 85 | background: transparent !important; 86 | } 87 | } 88 | /* banners behind headers (profilesv2) */ 89 | .user-profile-modal-v2 .inner_c0bea0 .mask__68edb { 90 | position: absolute; 91 | z-index: 0; 92 | opacity: 25%; 93 | mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); 94 | } 95 | .user-profile-modal-v2 .inner_c0bea0 .headerInner__24502 { 96 | background: transparent !important; 97 | } 98 | 99 | .user-profile-modal-v2:has(.mask__68edb) { 100 | :is(.profileButtons__9c3be, .tabBar__37bfc) { 101 | z-index: 2; 102 | } 103 | :where(.banner__68edb) { 104 | border-radius: 0px; 105 | } 106 | } 107 | 108 | /* tinted text & profile */ 109 | .inner_c0bea0:is(.user-profile-popout, .user-profile-modal) 110 | .outer_c0bea0.user-profile-modal, 111 | .custom-profile-theme { 112 | --theme-base-color-amount: 50% !important; 113 | --theme-text-color-amount: 25% !important; 114 | } 115 | 116 | /* apply ONLY if they have an avatar deco*/ 117 | .user-profile-popout div:has(.avatarDecoration__44b0c) .avatar__75742 { 118 | position: absolute !important; 119 | top: 31px !important; 120 | } 121 | 122 | .accountProfileCard__1fed1 :is(.banner__68edb, .mask__68edb) { 123 | display: none !important; 124 | } 125 | 126 | /* clan tags */ 127 | .guildTagContainer__63ed3, 128 | .clanTagChiplet_c19a55, 129 | .chipletContainerInline__4a25c, 130 | .chipletContainerInline__10651, 131 | .chipletContainerInner__10651, 132 | .clanTag__5d473 { 133 | display: unset !important; 134 | } 135 | -------------------------------------------------------------------------------- /src/components/vars.css: -------------------------------------------------------------------------------- 1 | .theme-dark:not(html.custom-theme-background, :has(#clientThemeVars),.theme-darker,.theme-midnight) { 2 | --autocomplete-bg: color-mix(in oklab, var(--primary-630) 100%, var(--theme-base-color, #000) var(--theme-base-color-amount, 0%)); 3 | --chat-background-default: hsl(218, calc(var(--saturation-factor, 1) * 8%), 27%); 4 | --header-primary: var(--white-500); 5 | --header-secondary: #b9bbbe; 6 | --channels-default: #8e9297; 7 | --interactive-normal: #b9bbbe; 8 | --interactive-hover: #dcddde; 9 | --interactive-active: var(--white-500); 10 | --interactive-muted: hsl(217, calc(var(--saturation-factor, 1) * 8%), 34%); 11 | --background-primary: hsl(220, calc(var(--saturation-factor, 1) * 8%), 23%); 12 | --modal-background: var(--background-primary); 13 | --primary-600: var(--background-primary); 14 | --primary-630: var(--background-secondary); 15 | --background-secondary: hsl(223, calc(var(--saturation-factor, 1) * 7%), 20%); 16 | --background-secondary-alt: hsl(220, calc(var(--saturation-factor, 1) * 7%), 17%); 17 | --background-tertiary: hsl(216, calc(var(--saturation-factor, 1) * 7%), 14%); 18 | --background-accent: hsl(217, calc(var(--saturation-factor, 1) * 8%), 34%); 19 | --background-floating: #18191c; 20 | --background-modifier-hover: #4f545c29; 21 | --background-modifier-active: #4f545c3d; 22 | --background-modifier-selected: #4f545c52; 23 | --background-modifier-accent: #ffffff0f; 24 | --background-mentioned: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.051); 25 | --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.078); 26 | --background-message-hover: #04040512; 27 | --background-help-warning: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.102); 28 | --background-help-info: #00b0f41a; 29 | --scrollbar-thin-thumb: #202225; 30 | --scrollbar-thin-track: transparent; 31 | --scrollbar-auto-thumb: #202225; 32 | --scrollbar-auto-track: #2e3338; 33 | --scrollbar-auto-scrollbar-color-thumb: #202225; 34 | --scrollbar-auto-scrollbar-color-track: #2f3136; 35 | --elevation-stroke: 0 0 0 1px #04040526; 36 | --elevation-low: 0 1px 0 #04040533, 0 1.5px 0 #0606070d, 0 2px 0 #0404050d; 37 | --elevation-medium: 0 4px 4px #00000029; 38 | --elevation-high: 0 8px 16px #0000003d; 39 | 40 | --legacy-elevation-low: 0 1px 5px 0 hsl(var(--black-500-hsl) / 0.3); 41 | --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.2); 42 | --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl) / 0.6); 43 | 44 | --logo-primary: var(--white-500); 45 | --focus-primary: var(--brand-experiment); 46 | --deprecated-card-bg: hsla(216, calc(var(--saturation-factor, 1) * 7%), 14%, 0.6); 47 | --deprecated-card-editable-bg: #2022254d; 48 | --deprecated-store-bg: var(--background-primary); 49 | --deprecated-quickswitcher-input-background: #72767d; 50 | --deprecated-quickswitcher-input-placeholder: #ffffff4d; 51 | --deprecated-text-input-bg: #0000001a; 52 | --deprecated-text-input-border: #0000004d; 53 | --deprecated-text-input-border-hover: #040405; 54 | --deprecated-text-input-border-disabled: #202225; 55 | --deprecated-text-input-prefix: #dcddde; 56 | --button-secondary-background: #4f545c; 57 | --button-secondary-background-hover: #72767d; 58 | --button-secondary-background-active: #72767d; 59 | --primary-transparent: #ffffff1a; 60 | 61 | --search-popout-option-user-nickname: var(--text-normal); 62 | --search-popout-option-user-username: var(--text-muted); 63 | --search-popout-option-filter-text: var(--primary-400); 64 | --search-popout-option-non-text-color: #caccce; 65 | --search-popout-option-filter-color: #caccce; 66 | --search-popout-option-answer-color: #caccce; 67 | --search-popout-date-picker-border: 1px solid hsl(228 calc(1*6.667%) 14.706% /0.3); 68 | --search-popout-date-picker-hint-text: #caccce; 69 | --search-popout-date-picker-hint-value-text: #fff; 70 | --search-popout-date-picker-hint-value-background: var(--brand-500); 71 | --search-popout-date-picker-hint-value-background-hover: var(--brand-430); 72 | 73 | --shadow-border: 0 0 0 1px hsl(none 0% 100%/0.08); 74 | --shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 100%/0.08)); 75 | --shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0%/0.24); 76 | --shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24)); 77 | --shadow-high: 0 12px 24px 0 hsl(none 0% 0%/0.24); 78 | --shadow-high-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24)); 79 | --shadow-ledge: 0 2px 0 0 hsl(none 0% 0%/0.05), 0 1.5px 0 0 hsl(none 0% 0%/0.05), 0 1px 0 0 hsl(none 0% 0%/0.16); 80 | --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0%/0.24)); 81 | --shadow-low: 0 1px 4px 0 hsl(none 0% 0%/0.14); 82 | --shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0%/0.14)); 83 | --shadow-low-active: 0 0 4px 0 hsl(none 0% 0%/0.14); 84 | --shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0%/0.14)); 85 | --shadow-low-hover: 0 4px 10px 0 hsl(none 0% 0%/0.14); 86 | --shadow-low-hover-filter: drop-shadow(0 4px 10px hsl(none 0% 0%/0.14)); 87 | --shadow-medium: 0 4px 8px 0 hsl(none 0% 0%/0.16); 88 | --shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0%/0.16)); 89 | --shadow-mobile-navigator-x: 0 0 10px 0 hsl(none 0% 0%/0.22); 90 | --shadow-mobile-navigator-x-filter: drop-shadow(0 0 10px hsl(none 0% 0%/0.22)); 91 | --shadow-top-high: 0 -12px 32px 0 hsl(none 0% 0%/0.24); 92 | --shadow-top-high-filter: drop-shadow(0 -12px 32px hsl(none 0% 0%/0.24)); 93 | --shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0%/0.05), 0 -1.5px 0 0 hsl(none 0% 0%/0.05), 0 -1px 0 0 hsl(none 0% 0%/0.16); 94 | --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0%/0.24)); 95 | --shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0%/0.14); 96 | --shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0%/0.14)); 97 | --text-muted: #72767d; 98 | } 99 | 100 | .theme-light:not(html.custom-theme-background, :has(#clientThemeVars)) { 101 | --chat-background-default: #ebedef; 102 | --background-modifier-accent: #06060714; 103 | --background-mentioned: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.1); 104 | --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1) * 96%), 54%, 0.2); 105 | --background-message-hover: rgba(6, 6, 7, 0.02); 106 | --elevation-stroke: 0 0 0 1px rgba(6, 6, 7, 0.08); 107 | --elevation-low: 0 1px 0 rgba(6, 6, 7, 0.1), 0 1.5px 0 rgba(6, 6, 7, 0.025), 0 2px 0 rgba(6, 6, 7, 0.025); 108 | --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.08); 109 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.16); 110 | 111 | --legacy-elevation-low: 0 1px 5px hsl(var(--black-500-hsl) / 0.2); 112 | --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1); 113 | --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3); 114 | 115 | --logo-primary: var(--brand-experiment); 116 | --focus-primary: var(--brand-experiment); 117 | --radio-group-dot-foreground: hsl(227, calc(var(--saturation-factor, 1) * 31%), 44%); 118 | --primary-transparent: hsla(214, calc(var(--saturation-factor, 1) * 10%), 50%, 0.102); 119 | } 120 | body { 121 | --text-muted: #72767d; 122 | --font-primary: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif; 123 | --font-display: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif !important; 124 | --font-headline: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif; 125 | --blurple: var(--brand-experiment); 126 | --blurple-hover: hsl(227, calc(var(--saturation-factor, 1) * 44%), 59%); 127 | --blurple-active: hsl(226, calc(var(--saturation-factor, 1) * 34%), 52%); 128 | --blurple-inverted: #fff; 129 | --blurple-inverted-hover: hsl(228, calc(var(--saturation-factor, 1) * 56%), 98%); 130 | --blurple-inverted-active: hsl(229, calc(var(--saturation-factor, 1) * 60%), 93%); 131 | --text-brand: var(--blurple); 132 | --bg-brand: var(--blurple); 133 | --brand-260: var(--brand-experiment-260); 134 | --brand-360: var(--brand-experiment-360); 135 | --brand-460: var(--brand-experiment-460); 136 | --brand-500: var(--brand-experiment); 137 | --brand-new-500: var(--blurple); 138 | --brand-530: var(--brand-experiment-530); 139 | --brand-560: var(--brand-experiment-560); 140 | --brand-new-560: var(--brand-560); 141 | --brand-600: var(--brand-experiment-600); 142 | --brand-experiment-100: hsl(228, calc(var(--saturation-factor, 1) * 56%), 98%); 143 | --brand-experiment-130: hsl(228, calc(var(--saturation-factor, 1) * 63%), 97%); 144 | --brand-experiment-160: hsl(228, calc(var(--saturation-factor, 1) * 60%), 95%); 145 | --brand-experiment-200: hsl(229, calc(var(--saturation-factor, 1) * 60%), 93%); 146 | --brand-experiment-230: hsl(227, calc(var(--saturation-factor, 1) * 57%), 91%); 147 | --brand-experiment-260: hsl(226, calc(var(--saturation-factor, 1) * 59%), 89%); 148 | --brand-experiment-300: hsl(227, calc(var(--saturation-factor, 1) * 58%), 86%); 149 | --brand-experiment-330: hsl(227, calc(var(--saturation-factor, 1) * 59%), 82%); 150 | --brand-experiment-360: hsl(227, calc(var(--saturation-factor, 1) * 58%), 78%); 151 | --brand-experiment-400: hsl(226, calc(var(--saturation-factor, 1) * 58%), 72%); 152 | --brand-experiment-430: hsl(227, calc(var(--saturation-factor, 1) * 58%), 70%); 153 | --brand-experiment-460: hsl(227, calc(var(--saturation-factor, 1) * 59%), 68%); 154 | --brand-experiment: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%); 155 | --brand-experiment-500: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%); 156 | --brand-experiment-530: hsl(227, calc(var(--saturation-factor, 1) * 45%), 59%); 157 | --brand-experiment-560: hsl(227, calc(var(--saturation-factor, 1) * 35%), 53%); 158 | --brand-experiment-600: hsl(227, calc(var(--saturation-factor, 1) * 31%), 44%); 159 | --brand-experiment-630: hsl(226, calc(var(--saturation-factor, 1) * 31%), 38%); 160 | --brand-experiment-660: hsl(226, calc(var(--saturation-factor, 1) * 31%), 34%); 161 | --brand-experiment-700: hsl(227, calc(var(--saturation-factor, 1) * 31%), 26%); 162 | --brand-experiment-730: hsl(228, calc(var(--saturation-factor, 1) * 31%), 25%); 163 | --brand-experiment-760: hsl(227, calc(var(--saturation-factor, 1) * 32%), 22%); 164 | --brand-experiment-800: hsl(226, calc(var(--saturation-factor, 1) * 31%), 19%); 165 | --brand-experiment-830: hsl(225, calc(var(--saturation-factor, 1) * 32%), 15%); 166 | --brand-experiment-860: hsl(225, calc(var(--saturation-factor, 1) * 32%), 10%); 167 | --brand-experiment-900: hsl(228, calc(var(--saturation-factor, 1) * 29%), 3%); 168 | --brand-experiment-05a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 5%); 169 | --brand-experiment-10a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 10%); 170 | --brand-experiment-15a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 15%); 171 | --brand-experiment-20a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 20%); 172 | --brand-experiment-25a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 25%); 173 | --brand-experiment-30a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 30%); 174 | --brand-experiment-35a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 35%); 175 | --brand-experiment-40a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 40%); 176 | --brand-experiment-45a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 45%); 177 | --brand-experiment-50a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 50%); 178 | --brand-experiment-55a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 55%); 179 | --brand-experiment-60a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 60%); 180 | --brand-experiment-65a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 65%); 181 | --brand-experiment-70a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 70%); 182 | --brand-experiment-75a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 75%); 183 | --brand-experiment-80a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 80%); 184 | --brand-experiment-85a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 85%); 185 | --brand-experiment-90a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 90%); 186 | --brand-experiment-95a: hsl(227, calc(var(--saturation-factor, 1) * 58%), 65%, 95%); 187 | --red-inverted: hsl(0, calc(var(--saturation-factor, 1) * 80%), 98%); 188 | --red-inverted-active: hsl(0, calc(var(--saturation-factor, 1) * 85%), 92%); 189 | --yellow: hsl(38, calc(var(--saturation-factor, 1) * 96%), 54%); 190 | --yellow-360: var(--yellow); 191 | --status-yellow-560: var(--yellow); 192 | --yellow-hover: #e19517; 193 | --yellow-inverted: #fffbf4; 194 | --yellow-inverted-active: #feedd1; 195 | --green-inverted: #f6fbf9; 196 | --green-inverted-active: #d9f0e6; 197 | --green: hsl(153, calc(var(--saturation-factor, 1) * 46%), 49%); 198 | --status-green-600: var(--green); 199 | --green-360: var(--green); 200 | --green-hover: hsl(153, calc(var(--saturation-factor, 1) * 46%), 44%); 201 | --green-active: hsl(152, calc(var(--saturation-factor, 1) * 46%), 39%); 202 | --green-transparent: hsl(153, calc(var(--saturation-factor, 1) * 46%), 49%, 20%); 203 | --blue-345: hsl(199.524 calc(1*100%) 49.412% /1); 204 | --info-positive-foreground: var(--green); 205 | --text-positive: var(--green); 206 | --status-positive-background: var(--green); 207 | --red: hsl(0deg, calc(var(--saturation-factor, 1) * 85%), 61%); 208 | --red-hover: hsl(0deg, calc(var(--saturation-factor, 1) * 66%), 55%); 209 | --red-active: hsl(0deg, calc(var(--saturation-factor, 1) * 54%), 49%); 210 | --red-transparent: hsl(0, calc(var(--saturation-factor, 1) * 85%), 61%, 10%); 211 | --button-danger-background-active: var(--red-active); 212 | --button-danger-background: var(--red); 213 | --text-danger: var(--red); 214 | --info-danger-foreground: var(--red); 215 | --status-danger-background: var(--red); 216 | --font-display: var(--font-primary); 217 | --control-brand-foreground: var(--brand-experiment); 218 | --bdfdb-green: var(--green); 219 | /* activity colors*/ 220 | --twitch-dark: hsl(262, calc(var(--saturation-factor, 1) * 47%), 36%); 221 | --twitch: hsl(262, calc(var(--saturation-factor, 1) * 47%), 40%); 222 | --youtube-dark: hsl(0, calc(var(--saturation-factor, 1) * 73%), 41%); 223 | --youtube: hsl(0deg, calc(var(--saturation-factor, 1) * 73%), 46%); 224 | --spotify: hsl(141, calc(var(--saturation-factor, 1) * 72%), 42%); 225 | --spotify-dark: hsl(141, calc(var(--saturation-factor, 1) * 72%), 40%); 226 | --xbox-dark: hsl(120, calc(var(--saturation-factor, 1) * 77%), 26%); 227 | --xbox2: hsl(120, calc(var(--saturation-factor, 1) * 77%), 27%); 228 | --playstation-dark: hsl(220, calc(var(--saturation-factor, 1) * 96%), 27%); 229 | --playstation2: hsl(220, calc(var(--saturation-factor, 1) * 96%), 31%); 230 | --crunchyroll-dark: hsl(29, calc(var(--saturation-factor, 1) * 93%), 55%); 231 | --crunchyroll: hsl(29, calc(var(--saturation-factor, 1) * 93%), 60%); 232 | --text-link: color-mix(in oklab, var(--blue-345) 100%, var(--theme-text-color, #000) var(--theme-text-color-amount, 0%)); 233 | --text-warning: #faa61a; 234 | --notice-background-warning: #f26522; 235 | --notice-text-warning: #fff; 236 | --notice-background-critical: #f23f42; 237 | --notice-text-critical: #fff; 238 | --background-surface-high: var(--background-secondary); 239 | --bg-base-secondary: var(--background-secondary); 240 | --bg-base-tertiary: var(--background-tertiary); 241 | } 242 | 243 | .cardPrimary__73069 { 244 | --__card-accent-color: var(--background-secondary) !important; 245 | } 246 | 247 | .colorDanger__6e2b9 { 248 | --custom-notice-background: var(--status-danger-background) !important; 249 | --custom-notice-text: var(--status-danger-text) !important; 250 | --custom-notice-button-hover: var(--text-danger) !important; 251 | } 252 | 253 | :root { 254 | --custom-channel-header-height: 48px; 255 | --custom-member-list-width: 240px; 256 | --custom-guild-list-width: 72px; 257 | --custom-guild-sidebar-width: 375px; 258 | --custom-app-panels-height: 52.984375px; 259 | --custom-add-permissions-modal-focus-ring-width: 4px; 260 | --custom-custom-role-icon-form-item-role-icon-preview-size: 32px; 261 | --custom-guild-settings-roles-edit-shared-sidebar-width: 232px; 262 | --custom-guild-settings-roles-intro-roles-transition: 250ms; 263 | --custom-guild-settings-roles-intro-pause-transition: 166ms; 264 | --custom-guild-settings-roles-intro-background-transition: 500ms; 265 | --custom-guild-settings-roles-intro-banner-transition-delay: calc(var(--custom-guild-settings-roles-intro-roles-transition) + var(--custom-guild-settings-roles-intro-pause-transition)); 266 | --custom-guild-settings-roles-intro-roles-transition-delay: calc(var(--custom-guild-settings-roles-intro-roles-transition) + var(--custom-guild-settings-roles-intro-pause-transition)* 2 + var(--custom-guild-settings-roles-intro-background-transition)); 267 | --custom-guild-settings-community-intro-content-spacing: 32px; 268 | --custom-guild-settings-community-intro-hover-distance: -12px; 269 | --custom-guild-settings-community-intro-text-spacing: 8px; 270 | --custom-guild-settings-discovery-landing-page-max-width-tab: 905px; 271 | --custom-guild-settings-discovery-landing-page-settings-max-width: 520px; 272 | --custom-guild-settings-partner-content-spacing: 32px; 273 | --custom-event-detail-info-tab-base-spacing: 8px; 274 | --custom-subscription-listing-previews-carousel-cards-get-cut-off-width: 724px; 275 | --custom-editable-benefits-list-emoji-size: 24px; 276 | --custom-edit-benefit-modal-emoji-size: 22px; 277 | --custom-edit-benefit-modal-emoji-margin: 10px; 278 | --custom-guild-settings-role-subscriptions-max-width: 905px; 279 | --custom-guild-settings-role-subscriptions-overview-settings-max-width: 520px; 280 | --custom-guild-settings-store-page-settings-max-width: 520px; 281 | --custom-importable-benefits-list-listing-image-size: 40px; 282 | --custom-import-benefits-modal-icon-size: 24px; 283 | --custom-import-benefits-modal-role-icon-size: 40px; 284 | --custom-role-icon-uploader-icon-size: 24px; 285 | --custom-guild-role-subscription-style-constants-cover-image-aspect-ratio: 4; 286 | --custom-historic-earnings-table-toggle-expand-column-width: 30px; 287 | --custom-guild-role-subscription-card-basic-info-tier-image-size: 80px; 288 | --custom-guild-role-subscription-card-basic-info-tier-image-size-mobile: 48px; 289 | --custom-guild-role-subscriptions-overview-page-page-max-width: 1180px; 290 | --custom-guild-dialog-popout-width: 250px; 291 | --custom-guild-dialog-splash-ratio: 1.77778; 292 | --custom-guild-dialog-icon-size: 84px; 293 | --custom-guild-dialog-icon-padding: 4px; 294 | --custom-guild-product-download-modal-header-image-width: 119px; 295 | --custom-guild-onboarding-home-page-max-page-width: 1128px; 296 | --custom-guild-onboarding-home-page-max-single-column-width: 704px; 297 | --custom-home-resource-channels-obscured-blur-radius: 20px; 298 | --custom-guild-member-application-review-sidebar-width: 29vw; 299 | --custom-featured-items-popout-featured-items-popout-footer-height: 120px; 300 | --custom-guild-boosting-sidebar-display-conditional-bottom-margin: 12px; 301 | --custom-guild-boosting-marketing-progress-bar-marker-dimensions: 32px; 302 | --custom-guild-boosting-marketing-progress-bar-end-markers-margin: 4px; 303 | --custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions: 32px; 304 | --custom-guild-boosting-marketing-tier-cards-tier-card-border-radius: 16px; 305 | --custom-go-live-modal-art-height: 112px; 306 | --custom-gif-picker-gutter-size: 0 16px 12px 16px; 307 | --custom-gif-picker-search-results-desired-item-width: 160px; 308 | --custom-forum-composer-attachments-attachment-size: 78px; 309 | --custom-forum-post-obscured-blur-radius: 20px; 310 | --custom-forum-post-grid-view-obscured-blur-radius: 20px; 311 | --custom-demo-forum-channel-padding-large: 20px; 312 | --custom-demo-forum-channel-post-padding: 12px; 313 | --custom-demo-forum-channel-gap-size: 8px; 314 | --custom-feedback-modal-emoji-size: 64px; 315 | --custom-feedback-modal-close-button-margin: 12px; 316 | --custom-expression-suggestions-container-padding: 8px; 317 | --custom-expression-suggestions-sticker-suggestion-size: 48px; 318 | --custom-expression-suggestions-sticker-suggestion-margin: 8px; 319 | --custom-expression-picker-constants-expression-picker-list-section-heading-height: 32px; 320 | --custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions: 28px; 321 | --custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions: 32px; 322 | --custom-expression-picker-constants-expression-picker-inspector-bar-height: 48px; 323 | --custom-emoji-picker-border-radius: 8px; 324 | --custom-emoji-picker-constants-min-emoji-picker-width: 498px; 325 | --custom-emoji-picker-constants-emoji-size-medium: 40px; 326 | --custom-emoji-picker-constants-emoji-size-large: 48px; 327 | --custom-emoji-picker-constants-emoji-container-padding-horizontal: 4px; 328 | --custom-emoji-picker-constants-emoji-container-padding-vertical: 4px; 329 | --custom-emoji-picker-constants-emoji-picker-height: 440px; 330 | --custom-emoji-picker-constants-emoji-section-margin-bottom: 12px; 331 | --custom-emoji-picker-constants-emoji-list-padding-top: 0; 332 | --custom-emoji-picker-constants-emoji-list-padding-right: 0; 333 | --custom-emoji-picker-constants-emoji-list-padding-bottom: 8px; 334 | --custom-emoji-picker-constants-emoji-list-padding-left: 8px; 335 | --custom-emoji-picker-constants-emoji-list-search-results-padding-top: 8px; 336 | --custom-emoji-picker-constants-unicode-category-icon-margin-vertical: 2px; 337 | --custom-emoji-picker-constants-unicode-category-icon-size: 24px; 338 | --custom-emoji-picker-constants-unicode-category-icon-padding: 4px; 339 | --custom-emoji-picker-constants-unicode-category-shortcut-height: 48px; 340 | --custom-emoji-picker-constants-guild-category-icon-size: 32px; 341 | --custom-emoji-picker-constants-guild-category-icon-margin-verical: 8px; 342 | --custom-emoji-picker-constants-category-separator-size: 1px; 343 | --custom-emoji-picker-constants-category-separator-margin-vertical: 12px; 344 | --custom-emoji-picker-constants-diversity-emoji-size: 24px; 345 | --custom-emoji-picker-constants-emoji-premium-upsell-height: 54px; 346 | --custom-emoji-picker-constants-emoji-premium-upsell-margin-top: 16px; 347 | --custom-emoji-picker-constants-newly-added-emoji-badge-height: 16px; 348 | --custom-discover-static-guild-card-card-height: 258px; 349 | --custom-discover-featured-guilds-section-card-height: 320px; 350 | --custom-discover-featured-guilds-section-min-card-width: 248px; 351 | --custom-discover-featured-guilds-section-gutter-size: 16px; 352 | --custom-discover-search-results-max-search-bar-width: 720px; 353 | --custom-guild-directory-min-card-width: 248px; 354 | --custom-guild-directory-gutter-size: 16px; 355 | --custom-guild-directory-min-content-width: 320px; 356 | --custom-guild-directory-max-page-width: 1608px; 357 | --custom-guild-directory-entry-card-card-height: 274px; 358 | --custom-guild-directory-landing-min-header-height: 200px; 359 | --custom-guild-shop-page-two-column-max-width: 1439px; 360 | --custom-aspect-stable-image-container-padding: 20px; 361 | --custom-monetization-info-table-expandable-rows-toggle-expand-column-width: 30px; 362 | --custom-guild-shop-content-width: 1044px; 363 | --custom-guild-shop-content-width-reduced: 788px; 364 | --custom-guild-shop-content-width-minimum: 688px; 365 | --custom-guild-shop-channel-row-gradient: linear-gradient(113deg, #2f3570 1.98%, #422c70 94.48%); 366 | --custom-guild-shop-channel-row-gradient-hover: linear-gradient(113deg, #383f86 1.98%, #4d3385 94.48%); 367 | --custom-guild-shop-channel-row-border-gradient: linear-gradient(113deg, #6591ff, #d150ff); 368 | --custom-guild-shop-channel-row-glow: 0 0 4px rgba(189, 149, 255, 0.5); 369 | --custom-guild-shop-preview-pill-shadow-dark: -4px 5px #1d1d1d; 370 | --custom-guild-shop-preview-pill-shadow-light: -4px 5px #d7dce8; 371 | --custom-guild-shop-gradient-start: #686bff; 372 | --custom-guild-shop-gradient-end: #c356fd; 373 | --custom-guild-role-connections-modal-close-button-margin: 12px; 374 | --custom-clips-enabled-indicator-medium-break-point: 920px; 375 | --custom-clips-enabled-indicator-badge-icon-dimension-override: 20px; 376 | --custom-client-themes-editor-content-width: calc(var(--custom-theme-selection-selection-size)* 3 + var(--custom-theme-selection-group-column-gap)* 2); 377 | --custom-client-themes-editor-editor-padding: 16px; 378 | --custom-theme-selection-selection-size: 60px; 379 | --custom-theme-selection-group-column-gap: 24px; 380 | --custom-channel-attachment-upload-spoiler-blur-radius: 44px; 381 | --custom-channel-attachment-upload-mini-attachment-size: 78px; 382 | --custom-channel-textarea-text-area-height: 44px; 383 | --custom-channel-textarea-text-area-max-height: 50vh; 384 | --custom-channel-textarea-app-launcher-button-gap: 8px; 385 | --custom-channel-notice-icon-size: 16px; 386 | --custom-channel-notice-padding: 12px; 387 | --custom-channel-call-participants-popout-padding-value: 16px; 388 | --custom-stream-upsell-modal-art-height: 149px; 389 | --custom-voice-channel-status-modal-emoji-size: 22px; 390 | --custom-voice-channel-status-modal-emoji-margin: 10px; 391 | --custom-broadcasting-tooltip-image-offset: 40px; 392 | --custom-application-directory-content-min-width: 600px; 393 | --custom-application-directory-content-max-width: 1024px; 394 | --custom-guild-count-small-icon-size: 16px; 395 | --custom-guild-count-large-icon-size: 20px; 396 | --custom-collection-gallery-text-container-width: 400px; 397 | --custom-collection-gallery-media-breakpoint: 1024px; 398 | --custom-collection-gallery-column-card-height: 600px; 399 | --custom-collection-gallery-row-card-height: 283px; 400 | --custom-collection-list-card-gap: 16px; 401 | --custom-collection-list-with-image-grid-gap: 16px; 402 | --custom-collections-collection-gap: 32px; 403 | --custom-application-directory-profile-sidebar-width: 192px; 404 | --custom-application-directory-profile-sidebar-margin-right: 48px; 405 | --custom-application-directory-profile-icon-size: 122px; 406 | --custom-application-directory-search-sidebar-width: 200px; 407 | --custom-application-directory-search-sidebar-margin-right: 32px; 408 | --custom-activity-bookmark-embed-image-width: 356px; 409 | --custom-activity-bookmark-embed-image-height: 200px; 410 | --custom-activity-bookmark-embed-content-height: 400px; 411 | --custom-activity-shelf-item-activity-item-height: 230px; 412 | --custom-activity-shelf-item-large-activity-item-height: 143px; 413 | --custom-activity-shelf-modal-modal-padding: 80px; 414 | --custom-activity-shelf-modal-modal-width: 496px; 415 | --custom-activity-shelf-modal-modal-min-width: 496px; 416 | --custom-activity-shelf-modal-modal-max-width: 1024px; 417 | --custom-activity-shelf-modal-modal-header-height: 92px; 418 | --custom-activity-shelf-modal-modal-header-without-description-height: 74px; 419 | --custom-activity-shelf-modal-modal-footer-height: 50px; 420 | --custom-activity-shelf-modal-modal-art-height: 64px; 421 | --custom-activity-shelf-modal-modal-max-height: 720px; 422 | --custom-activity-shelf-modal-modal-header-developer-controls-height: 176px; 423 | --custom-activity-shelf-modal-dividers-height: 2px; 424 | --custom-activity-shelf-modal-divider-height: 1px; 425 | --custom-activity-shelf-slide-activity-directory-shelf-grid-gap: 16px; 426 | --custom-accept-invite-modal-invite-modal-height: 420px; 427 | --custom-accept-invite-modal-small-screen-width: 720px; 428 | --custom-avatar-avatar-decoration-border-position: calc((0.5 - var(--decoration-to-avatar-ratio) / 2)* 100%); 429 | --custom-button-button-xl-width: 148px; 430 | --custom-button-button-xl-height: 50px; 431 | --custom-button-button-lg-width: 130px; 432 | --custom-button-button-lg-height: 44px; 433 | --custom-button-button-md-width: 96px; 434 | --custom-button-button-md-height: 38px; 435 | --custom-button-button-sm-width: 60px; 436 | --custom-button-button-sm-height: 32px; 437 | --custom-button-button-tn-height: 24px; 438 | --custom-button-button-tn-width: 52px; 439 | --custom-button-link-underline-width: 1px; 440 | --custom-button-link-underline-offset: 1px; 441 | --custom-button-link-underline-stop: calc(var(--custom-button-link-underline-width) + var(--custom-button-link-underline-offset)); 442 | --custom-button-filled-hover: 0.1; 443 | --custom-button-filled-active: 0.2; 444 | --custom-button-transition-duration: 170ms; 445 | --custom-modal-min-width-large: 800px; 446 | --custom-special-markdown-small-break-point: 600px; 447 | --custom-special-markdown-medium-break-point: 768px; 448 | --custom-user-profile-hype-squad-badge-icon-size: 24px; 449 | --custom-user-profile-hype-squad-badge-shine-size-offset: 64px; 450 | --custom-guild-discovery-gutter-size: 16px; 451 | --custom-guild-discovery-max-page-width: 1608px; 452 | --custom-dropdown-button-small-dropdown-size: 16px; 453 | --custom-dropdown-button-medium-dropdown-size: 24px; 454 | --custom-dropdown-button-large-dropdown-size: 32px; 455 | --custom-dropdown-button-separator-padding: 4px; 456 | --custom-dropdown-button-hitbox-padding: 8px; 457 | --custom-responsive-embed-tile-loading-background-width: 271px; 458 | --custom-game-install-locations-item-padding: 20px; 459 | --custom-game-list-row-min-height: 62px; 460 | --custom-game-list-linked-to-glow-duration: 2000ms; 461 | --custom-application-store-home-store-home-width: 1245px; 462 | --custom-application-store-listing-body-max-width: 880px; 463 | --custom-store-colors-primary-750: #191b1d; 464 | --custom-store-colors-premium-gradient: linear-gradient(90deg, var(--premium-tier-2-purple), var(--premium-tier-2-pink)); 465 | --custom-member-list-item-avatar-decoration-padding: 2px; 466 | --custom-messages-popout-messages-popout-footer-height: 120px; 467 | --custom-radio-image-border-thickness: 2px; 468 | --custom-standard-sidebar-view-sidebar-content-width: 192px; 469 | --custom-standard-sidebar-view-standard-padding: 20px; 470 | --custom-standard-sidebar-view-sidebar-content-scrollbar-padding: 6px; 471 | --custom-standard-sidebar-view-sidebar-total-width: calc(var(--custom-standard-sidebar-view-sidebar-content-width) + var(--custom-standard-sidebar-view-standard-padding) + var(--custom-standard-sidebar-view-sidebar-content-scrollbar-padding)); 472 | } -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | @import url("https://milbits.github.io/oldcord/src/components/vars.css");@import url("https://milbits.github.io/oldcord/src/components/color.css");@import url("https://milbits.github.io/oldcord/src/components/imgs.css");@import url("https://milbits.github.io/oldcord/src/components/other.css");@import url("https://milbits.github.io/oldcord/src/components/profile.css");@import url("https://milbits.github.io/oldcord/src/components/redesign.css"); 2 | --------------------------------------------------------------------------------