├── .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/ebd41a8dabe32f83e5486989e02881067e36ed06/.github/emojis.webp
--------------------------------------------------------------------------------
/.github/oldcontext.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/.github/oldcontext.webp
--------------------------------------------------------------------------------
/.github/preview.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/.github/preview.webp
--------------------------------------------------------------------------------
/.github/previewLight.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/.github/previewLight.webp
--------------------------------------------------------------------------------
/.github/showeffects.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/.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 | 
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 |  | `@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) |  | `@import url("https://milbits.github.io/oldcord/src/components/showEffects.css");` |
35 | | HeaderPresence |  | 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 |
--------------------------------------------------------------------------------
/src/assets/battle.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/battle.webp
--------------------------------------------------------------------------------
/src/assets/bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/bold.woff2
--------------------------------------------------------------------------------
/src/assets/cursive.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/cursive.woff2
--------------------------------------------------------------------------------
/src/assets/cursiveBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/cursiveBold.woff2
--------------------------------------------------------------------------------
/src/assets/employee.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/epic.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/facebook.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/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/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/kindaBold.woff2
--------------------------------------------------------------------------------
/src/assets/league.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/league.webp
--------------------------------------------------------------------------------
/src/assets/mod.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/normal.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/normal.woff2
--------------------------------------------------------------------------------
/src/assets/normal600.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/normal600.woff2
--------------------------------------------------------------------------------
/src/assets/normal700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/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/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/reddit.webp
--------------------------------------------------------------------------------
/src/assets/riot.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/shapes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/shapes.jpg
--------------------------------------------------------------------------------
/src/assets/skype.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/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/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/thin.woff2
--------------------------------------------------------------------------------
/src/assets/twitch.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/twitch.webp
--------------------------------------------------------------------------------
/src/assets/twitter.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/twitter.webp
--------------------------------------------------------------------------------
/src/assets/veryBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/src/assets/veryBold.woff2
--------------------------------------------------------------------------------
/src/assets/xbox.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/youtube.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milbits/oldcord/ebd41a8dabe32f83e5486989e02881067e36ed06/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.8;
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 / 0.5);
445 | transform: translateY(-40px);
446 | .mosaicItem__6c706:hover &{
447 | transform: translateY(-4px);
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 | }
461 | }
462 |
463 | /* center the download button for audio files and make it permanently visible*/
464 | .wrapperAudio_cf09d8 + .hoverButtonGroup__06ab4 {
465 | top: 25%;
466 | right: 8px;
467 | transform: translateY(-50%);
468 | opacity: 1;
469 | background: none;
470 | }
471 | /* same as above but for file attachments */
472 | .file__0ccae + .hoverButtonGroup__06ab4 {
473 | top: 50%;
474 | transform: translateY(-60%);
475 | opacity: 1;
476 | background: none;
477 | }
478 |
479 | /* shorten the margin by a bit so it doesnt look so separated */
480 | .nonVisualMediaItem_f4758a + .nonVisualMediaItem_f4758a,
481 | .nonVisualMediaItemContainer_f4758a {
482 | margin-top: 4px;
483 | }
484 |
485 | /* revert the bloating of the audio attachments */
486 | .wrapperAudio_cf09d8.newMosaicStyle_cf09d8 {
487 | padding: 10px;
488 | border-radius: 4px;
489 | padding-right: 41px;
490 | }
491 |
492 | /* stretch play bar */
493 | .audioControls_cf09d8 {
494 | width: 108%;
495 | border-radius: 3px !important;
496 | }
497 |
498 | /* revert the bloating of attachments in general */
499 | .file__0ccae {
500 | padding: 10px;
501 | border-radius: 3px;
502 | width: 100%;
503 | padding-right: 71px;
504 | max-width: 520px;
505 | }
506 |
507 | /** forum channel*/
508 | /* tags in create post*/
509 | #app-mount .pill_a2c9e8.selected_a2c9e8 {
510 | background-color: var(--brand-experiment-35a);
511 | border-color: transparent;
512 | transition: 0.1s ease;
513 | color: #fff !important;
514 | }
515 |
516 | #app-mount .pill_a2c9e8.selected_a2c9e8:hover {
517 | background-color: var(--brand-experiment-50a);
518 | transition: 0.1s ease;
519 | }
520 |
521 | .pill_a2c9e8.selected_a2c9e8 .defaultColor__77578 {
522 | color: var(--interactive-active);
523 | transition: 0.1s ease;
524 | }
525 |
526 | .theme-light .pill_a2c9e8 {
527 | background: var(--background-secondary);
528 | }
529 |
530 | /* make the button gray when following*/
531 | .buttonInner__34c2c,
532 | .buttonInner__34c2c.active__34c2c {
533 | transition: 0.17s ease;
534 | color: #fff !important;
535 | background-color: var(--button-secondary-background) !important;
536 | border-radius: 3px;
537 | &:hover {
538 | background-color: var(--button-secondary-background-hover) !important;
539 | }
540 | &:active {
541 | background-color: var(--button-secondary-background-active) !important;
542 | }
543 | }
544 | /*make follow button green*/
545 | .buttonInner__34c2c:has(
546 | [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"]
547 | ) {
548 | background-color: var(--green) !important;
549 | color: var(--white);
550 | border-radius: 3px;
551 | border: none;
552 | transition: 0.17s ease;
553 | &:hover {
554 | background-color: var(--green-hover) !important;
555 | }
556 | &:active {
557 | background-color: var(--green-active) !important;
558 | }
559 | }
560 |
561 | .addReactButton__34c2c {
562 | background-color: transparent !important;
563 | border: none;
564 | font-size: 0px;
565 | padding: 0px;
566 | min-width: 1.5rem;
567 | }
568 |
569 | .submitButton-3B-dZd {
570 | border-radius: 3px !important;
571 | }
572 |
573 | /* change tag backgrounds*/
574 | .container-2qVG6q .pill_a2c9e8 {
575 | background-color: var(--background-tertiary);
576 | }
577 |
578 | .botTagOP__82f07 {
579 | color: var(--blurple);
580 | background-color: transparent;
581 | border: 1px solid var(--blurple);
582 | font-weight: 500;
583 | }
584 |
585 | .theme-dark .children__9293f:after {
586 | display: none;
587 | }
588 |
589 | /* make "search/create post" background the same as the textarea*/
590 | .headerRow_f369db .mainCard_f369db {
591 | background: var(--bg-overlay-3, var(--chat-background-default));
592 | border: none !important;
593 | box-shadow: none !important;
594 | border-radius: 5px;
595 | }
596 |
597 | /* so "revert textfields" wont apply there */
598 | .headerRow_f369db .mainCard_f369db :is(.scrollableContainer_d0696b, .input__0f084) {
599 | background: none !important;
600 | border: none;
601 | }
602 |
603 | /* posts*/
604 | .container__9a337,
605 | .container_faa96b {
606 | transition: 0.17s ease !important;
607 | transform: none !important;
608 | border-radius: 5px;
609 | box-shadow: none !important;
610 | background: var(--deprecated-card-editable-bg);
611 | border: none;
612 | }
613 |
614 | .content__99f8c .container__9a337:hover,
615 | .content__99f8c .container_faa96b:hover {
616 | background-color: var(--background-modifier-hover) !important;
617 | border: none;
618 | }
619 |
620 | .container__9a337:active,
621 | .container_faa96b:active {
622 | background-color: var(--background-modifier-active) !important;
623 | }
624 |
625 | /** Devices Tab*/
626 | /* make description a card*/
627 | .description__803f2 {
628 | background: var(--background-secondary);
629 | border: 1px solid var(--background-tertiary);
630 | border-radius: 5px;
631 | color: var(--text-normal);
632 | font-weight: 400;
633 | font-size: 15px;
634 | padding: 20px;
635 | }
636 | .sessionIcon__803f2 {
637 | width: 50px;
638 | height: 50px;
639 | background: none !important;
640 | }
641 | .sessionIcon__803f2 path {
642 | fill: var(--interactive-normal);
643 | }
644 | .currentSession__803f2 .sessionIcon__803f2 path {
645 | fill: var(--green);
646 | }
647 | .session__803f2 {
648 | gap: 8px;
649 | }
650 | /* Stylize remove button*/
651 | .session__803f2 {
652 | position: relative;
653 | }
654 | .sessionMoreButton__803f2 {
655 | opacity: 0;
656 | position: absolute;
657 | top: -12px;
658 | right: -12px;
659 | width: 24px;
660 | height: 24px;
661 | box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low);
662 | background-color: var(--background-primary);
663 | background-image: url(https://discord.com/assets/b5ad3c52d0699af9b6987839875450d4.svg);
664 | background-position: 50% 50%;
665 | background-repeat: no-repeat;
666 | border-radius: 50%;
667 | transition: opacity 0.1s ease-in-out, box-shadow 0.1s ease-in-out, transform 0.2s ease;
668 | }
669 | .session__803f2:hover .sessionMoreButton__803f2,
670 | .sessionMoreButton__803f2:hover {
671 | opacity: 1;
672 | }
673 | .sessionMoreButton__803f2:active {
674 | transform: translateY(1px);
675 | }
676 | .eyebrow_e5a66c.sessionInfoRow__803f2,
677 | .headerHeading_d80a13.eyebrow_e5a66c,
678 | .sessionInfoRow__803f2 span:last-child {
679 | color: var(--header-secondary);
680 | }
681 | .heading-md-bold__17daa {
682 | font-weight: 600;
683 | }
684 |
685 | /** Connections (in settings > connections)*/
686 | .connectContainer_c7f964 {
687 | border: 1px solid var(--deprecated-text-input-border);
688 | border-radius: 6px;
689 | }
690 | .accountButtonInner_c7f964 {
691 | background-color: var(--background-modifier-hover);
692 | background-size: 32px;
693 | }
694 | .connectHeader_c7f964 {
695 | color: #7b7c80 !important;
696 | font-size: 13px;
697 | font-weight: 600;
698 | text-transform: uppercase;
699 | }
700 | .connectContainer_c7f964 .text-xs-normal_ccc5fb {
701 | color: var(--interactive-hover) !important;
702 | font-size: 13px;
703 | }
704 | .connection_c7f964 {
705 | overflow: hidden;
706 | background: none;
707 | border-radius: 5px;
708 | box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3);
709 | }
710 | .connectionAccountLabel_c7f964 {
711 | color: #fff8 !important;
712 | }
713 | .connectionAccountValue_c7f964 .connectionAccountLabelContainer_c7f964 {
714 | font-size: 16px;
715 | margin-top: 4px;
716 | color: var(--white-500);
717 | font-weight: 400;
718 | }
719 | .metadataContainer_c7f964 {
720 | position: relative;
721 | z-index: 10;
722 | background: #0004;
723 | border: solid 1px #0004;
724 | border-radius: 3px;
725 | }
726 | .metadataContainer_c7f964 .connectedAccountVanityMetadataTag_fffe42 {
727 | border-radius: 3px;
728 | background: none;
729 | border: solid 1px #fff3;
730 | }
731 | .metadataContainer_c7f964 .text-xs-normal_ccc5fb {
732 | color: #fff !important;
733 | }
734 | .metadataContainer_c7f964 .metadataRefreshButton_c7f964 {
735 | background-color: var(--blurple-inverted) !important;
736 | &:hover {
737 | background-color: var(--blurple-inverted-hover) !important;
738 | }
739 | &:active {
740 | background-color: var(--blurple-inverted-active) !important;
741 | }
742 | color: var(--blurple) !important;
743 | transition: 0.17s ease;
744 | }
745 |
746 | .connectionHeader_c7f964:after {
747 | content: "";
748 | position: absolute;
749 | width: 660px;
750 | height: 73px;
751 | background: rgba(0, 0, 0, 0.1);
752 | border-bottom: solid 1px rgba(0, 0, 0, 0.15);
753 | }
754 | .connectionOptionsWrapper_c7f964 .container__0d850,
755 | .connectionDelete_c7f964,
756 | .integrationsWrapper-3a2pGd {
757 | z-index: 50;
758 | }
759 | .connectionOptionSwitch_c7f964 {
760 | margin-top: 2px;
761 | }
762 | .labelRow__0d850 .title__0d850 .text-sm-semibold_a5824d {
763 | font-weight: 500 !important;
764 | color: var(--white-500);
765 | }
766 |
767 | .integration_c7f964 {
768 | z-index: 999;
769 | width: calc(50% - 8px);
770 | position: relative;
771 | background: #0000001a;
772 | border: 1px solid #0000004d;
773 | border-radius: 3px;
774 | padding: 10px;
775 | }
776 | .integration_c7f964 .lookFilled__201d5 {
777 | border: solid 1px #0000004d;
778 | background: #593695;
779 | padding: 5px 16px;
780 | min-height: 0px;
781 | height: auto;
782 | min-width: 0px;
783 | }
784 | .connectionDelete_c7f964 {
785 | width: 32px;
786 | height: 32px;
787 | border: solid 1px rgba(255, 255, 255, 0.3);
788 | border-radius: 3px;
789 | }
790 | .connectionDelete_c7f964 svg {
791 | position: relative;
792 | top: 6px;
793 | left: 6px;
794 | }
795 | .connectionDelete_c7f964 path {
796 | fill: var(--white-500);
797 | transform: scale(1.1);
798 | }
799 | .connectionOptionSwitch_c7f964 .container__87bf1 .input__87bf1:before {
800 | background: #0000;
801 | box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
802 | }
803 | .connectionOptionSwitch_c7f964 .container__87bf1 .input__87bf1:checked:before {
804 | background: rgba(255, 255, 255, 0.3);
805 | box-shadow: none;
806 | }
807 | .connectionHeader_c7f964 [alt] {
808 | margin: -572px -610px -4500px -16px;
809 | padding: 2000px 330px;
810 | background-color: var(--blurple);
811 | background-repeat: no-repeat;
812 | background-size: 32px 32px;
813 | background-position: 20px 20px;
814 | border-radius: 5px;
815 | pointer-events: none;
816 | }
817 | .connectionHeader_c7f964 {
818 | & [alt="Battle.net"] {
819 | background-color: hsl(200, calc(var(--saturation-factor, 1) * 100%), 45%);
820 | background-image: url(https://milbits.github.io/oldcord/src/assets/battle.webp);
821 | }
822 |
823 | & [alt="GitHub"] {
824 | background-color: hsl(0, calc(var(--saturation-factor, 1) * 4%), 9%);
825 | background-image: url(https://milbits.github.io/oldcord/src/assets/github.svg);
826 | }
827 |
828 | & [alt="Reddit"] {
829 | background-color: hsl(16, calc(var(--saturation-factor, 1) * 100%), 50%);
830 | background-image: url(https://milbits.github.io/oldcord/src/assets/reddit.webp);
831 | }
832 |
833 | & [alt="Spotify"] {
834 | background-color: var(--spotify);
835 | background-image: url(https://milbits.github.io/oldcord/src/assets/spotify.svg);
836 | }
837 |
838 | & [alt="Steam"] {
839 | background-color: hsl(215, calc(var(--saturation-factor, 1) * 35%), 15%);
840 | background-image: url(https://milbits.github.io/oldcord/src/assets/steam.svg);
841 | }
842 |
843 | & [alt="Twitch"] {
844 | background-color: var(--twitch);
845 | background-image: url(https://milbits.github.io/oldcord/src/assets/twitch.webp);
846 | }
847 |
848 | & :is([alt="Twitter"], [alt="X"]) {
849 | background-color: hsl(203, calc(var(--saturation-factor, 1) * 89%), 53%);
850 | background-image: url(https://milbits.github.io/oldcord/src/assets/twitter.webp);
851 | }
852 |
853 | & [alt="Xbox"] {
854 | background-color: var(--xbox);
855 | background-image: url(https://milbits.github.io/oldcord/src/assets/xbox.svg);
856 | }
857 |
858 | & [alt="YouTube"] {
859 | background-color: var(--youtube);
860 | background-image: url(https://milbits.github.io/oldcord/src/assets/youtube.webp);
861 | }
862 |
863 | & [alt="Skype"] {
864 | background-color: hsl(196, calc(var(--saturation-factor, 1) * 100%), 42%);
865 | background-image: url(https://milbits.github.io/oldcord/src/assets/skype.webp);
866 | }
867 |
868 | & [alt="League of Legends"] {
869 | background-color: hsl(42, calc(var(--saturation-factor, 1) * 40%), 49%);
870 | background-image: url(https://milbits.github.io/oldcord/src/assets/league.webp);
871 | }
872 |
873 | & [alt="Facebook"] {
874 | background-color: hsl(226, calc(var(--saturation-factor, 1) * 37%), 38%);
875 | background-image: url(https://milbits.github.io/oldcord/src/assets/facebook.webp);
876 | }
877 |
878 | & [alt="PlayStation Network"] {
879 | background-color: var(--playstation);
880 | background-image: url(https://milbits.github.io/oldcord/src/assets/playstation.svg);
881 | }
882 |
883 | & [alt="Epic Games"] {
884 | background-color: hsl(34, calc(var(--saturation-factor, 1) * 6%), 22%);
885 | background-image: url(https://milbits.github.io/oldcord/src/assets/epic.svg);
886 | }
887 |
888 | & [alt="Riot Games"] {
889 | background-color: hsl(356, calc(var(--saturation-factor, 1) * 75%), 39%);
890 | background-image: url(https://milbits.github.io/oldcord/src/assets/riot.svg);
891 | }
892 |
893 | & [alt="Roblox"] {
894 | background-color: hsl(4, calc(var(--saturation-factor, 1) * 75%), 44%);
895 | background-image: url(https://discord.com/assets/a4d8e9b0404a2d00.svg);
896 | }
897 |
898 | & [alt="Bluesky"] {
899 | background-color: hsl(210.63, calc(var(--saturation-factor, 1) * 99.16%), 53.14%);
900 | 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");
901 | }
902 | }
903 |
904 | .imageAccessory__9614b {
905 | left: unset;
906 | right: 6px;
907 | }
908 |
909 | /** Voice Messages*/
910 | .playButtonContainer_a8e786 {
911 | background: none !important;
912 | }
913 | .playButtonContainer_a8e786:active {
914 | transform: translateY(1px) !important;
915 | }
916 | .rippleContainer_a8e786 {
917 | display: none;
918 | }
919 | .playIcon_a8e786 {
920 | color: var(--interactive-normal) !important;
921 | width: 25px;
922 | height: 25px;
923 | }
924 | .playIcon_a8e786:hover {
925 | color: var(--interactive-active) !important;
926 | }
927 |
928 | /* notification settings*/
929 | .notificationSound__6d8e5 {
930 | transform: translateX(-24px);
931 | transition: 0.2s ease-out;
932 | }
933 | .notificationSound__6d8e5:hover {
934 | transform: translateX(-0px);
935 | }
936 | .soundIcon__6d8e5 {
937 | order: -1;
938 | transition: 0.2s ease-out;
939 | }
940 | .notificationSound__6d8e5 .soundIcon__6d8e5 {
941 | opacity: 0 !important;
942 | }
943 | .notificationSound__6d8e5:hover .soundIcon__6d8e5 {
944 | opacity: 0.6 !important;
945 | }
946 |
947 | /* Capitalize titles in settings*/
948 | h2.title_b717a1,
949 | .modalHeader_db81c6 :is([data-text-variant="heading-lg/semibold"]) {
950 | text-transform: uppercase;
951 | font-size: 16px;
952 | }
953 | .header__49fc1 [data-text-variant="heading-lg/semibold"] {
954 | text-transform: uppercase !important;
955 | font-size: 16px;
956 | }
957 | .description__6b700.text-sm\/normal_cf4812 {
958 | color: var(--text-secondary) !important;
959 | font-size: 14px;
960 | line-height: 20px !important;
961 | }
962 |
963 | /* fix headings of all shapes and sizes */
964 | .settingsPage_f131e9 :is(.heading-xl\/semibold_cf4812) {
965 | font-size: 16px;
966 | text-transform: uppercase;
967 | }
968 | .settingsPage_f131e9 :is(.defaultColor__5345c.heading-lg\/semibold_cf4812, .title_b717a1.h3_b717a1, .heading-lg\/semibold_cf4812) {
969 | text-transform: uppercase;
970 | font-size: 12px !important;
971 | font-weight: 600 !important;
972 | color: var(--channels-default) !important;
973 | }
974 |
975 | /* can't this app style modals consistantly EVER */
976 | .modal_ac72c6 {
977 | .header__49fc1 {
978 | .title_ac72c6 {
979 | font-weight: 600;
980 | }
981 | }
982 | .modalContent_ac72c6 {
983 | .sectionTitle_ac72c6 {
984 | color: var(--header-secondary);
985 | }
986 | }
987 |
988 | border-radius: 4px;
989 | }
990 | .root__49fc1 {
991 | .headerContainer_c38e9f > .defaultColor__5345c.heading-md\/semibold_cf4812 {
992 | text-transform: uppercase;
993 | }
994 | .mainContainer_c38e9f > .pauseContainer_c38e9f {
995 | border: none;
996 | padding: unset;
997 | .pauseText_c38e9f {
998 | margin-top: 20px;
999 | [data-text-variant="text-md/semibold"] {
1000 | color: var(--header-primary) !important;
1001 | font-weight: 500;
1002 | }
1003 | [data-text-variant="text-sm/normal"] {
1004 | color: var(--header-secondary) !important;
1005 | }
1006 | }
1007 | .pauseText_c38e9f,
1008 | .input__87bf1 {
1009 | margin-top: 20px;
1010 | }
1011 | }
1012 | .modalHeader_db81c6 {
1013 | .guildName_db81c6 {
1014 | font-size: 12px;
1015 | font-weight: 600;
1016 | }
1017 |
1018 | box-shadow: unset !important;
1019 | }
1020 | .h5_b717a1 {
1021 | color: var(--channels-default);
1022 | }
1023 | .container__9d263 {
1024 | .input__87bf1 {
1025 | margin-top: 20px;
1026 | }
1027 | }
1028 | }
1029 |
1030 | /*Fix favorite button and delete overlap*/
1031 | .imageAccessory_af017a {
1032 | left: unset;
1033 | right: 6px;
1034 | }
1035 |
1036 | /*nitro emoji paywall*/
1037 | .emojiLockIcon_d982c2,
1038 | .categoryItemLockIconContainer__0fa6d {
1039 | display: none;
1040 | }
1041 | .lockedEmoji_d982c2:has(+ .emojiLockIconContainer_d982c2) {
1042 | filter: grayscale(1) !important;
1043 | }
1044 |
1045 | /* pinned messages popout header */
1046 | .titleContainer__45690 {
1047 | .text-lg\/semibold_cf4812 {
1048 | font-size: 15px;
1049 | }
1050 |
1051 | & svg {
1052 | display: none;
1053 | }
1054 | }
1055 |
1056 | /* fix pinned message padding */
1057 | .messageGroupWrapper__45690 .messageGroupCozy__45690 {
1058 | padding-top: 12px !important;
1059 | padding-bottom: 12px !important;
1060 | }
1061 | .header__45690 {
1062 | background: var(--background-tertiary);
1063 | }
1064 | .messagesPopoutWrap__45690 {
1065 | border-radius: 4px;
1066 | }
1067 |
1068 | /* polls */
1069 | .normalStylesDefault_a1443c {
1070 | --custom-poll-style-vote-background: var(--background-secpndary);
1071 | --custom-poll-style-vote-percentage: var(--background-modifier-accent);
1072 | --polls-victor-fill: var(--green-transparent);
1073 | --polls-voted-fill: var(--brand-experiment-25a);
1074 | }
1075 | .answerInner__4c520 {
1076 | background-color: var(--button-secondary-background);
1077 | border-radius: 3px;
1078 | & .label__4c520 {
1079 | color: var(--interactive-active);
1080 | }
1081 | }
1082 | .secondaryButtonPresentation__0be77 {
1083 | background-color: var(--button-secondary-background);
1084 | &:hover {
1085 | background-color: var(--button-secondary-background-hover);
1086 | }
1087 | }
1088 |
1089 | /* polls modal */
1090 | .voteSelected__01c8c {
1091 | background-color: rgba(79, 84, 92, 0.3);
1092 | }
1093 | .side_b3f026 .item_b3f026:is(.voteDefault__01c8c, .voteSelected__01c8c) {
1094 | padding-top: 0px;
1095 | padding-bottom: 0px;
1096 | }
1097 | .header__49fc1 .text-md\/medium_cf4812 {
1098 | font-size: 12px;
1099 | }
1100 |
1101 | /* message buttons */
1102 | .popover_f84418 {
1103 | transform: none !important;
1104 | height: 32px;
1105 | background: var(--background-primary);
1106 | border-radius: 4px;
1107 | padding: 0px;
1108 | box-shadow: var(--elevation-stroke);
1109 | border: none;
1110 | &:hover {
1111 | box-shadow: var(--elevation-stroke), var(--elevation-medium) !important;
1112 | border: none;
1113 | }
1114 |
1115 | /*& .separator_f84418 { // hides emoji separator
1116 | display: none;
1117 | }*/
1118 | }
1119 |
1120 | .hoverBarButton_f84418 {
1121 | border-radius: 0;
1122 | height: 24px;
1123 | padding: 4px;
1124 | &:last-child {
1125 | border-top-right-radius: 4px;
1126 | border-bottom-right-radius: 4px;
1127 | }
1128 | &:first-child {
1129 | border-top-left-radius: 4px;
1130 | border-bottom-left-radius: 4px;
1131 | }
1132 |
1133 | /*&:has(.emoji__040f0) { // hides recommended emojis
1134 | display: none;
1135 | }*/
1136 | }
1137 |
1138 | .buttonContent_f84418,
1139 | .icon_f84418 {
1140 | transform: none !important;
1141 | }
1142 | .hoverBarButton_f84418:active {
1143 | padding-bottom: 3px;
1144 | padding-top: 5px;
1145 | padding-left: 4px;
1146 | padding-right: 4px;
1147 | }
1148 |
1149 | /* forwarding modal */
1150 | :is(.footerButtons__62280, .channelTextArea_d0696b) .messageInput__62280,
1151 | .sendWithMessage__62280 {
1152 | border-radius: 3px;
1153 | height: 38px;
1154 | overflow: hidden;
1155 | & .slateTextArea_ec4baf,
1156 | .placeholder__1b31f {
1157 | line-height: 15px;
1158 | }
1159 | & .expression-picker-chat-input-button {
1160 | margin-right: 5px;
1161 | margin-bottom: 5px;
1162 | }
1163 | }
1164 |
1165 | /*forwarded message*/
1166 | .container__122e4 .quote__122e4 {
1167 | display: none;
1168 | }
1169 | .container__122e4 .content__122e4 {
1170 | padding: 4px 8px;
1171 | border-radius: 3px;
1172 | border: solid 1px var(--background-modifier-accent);
1173 | max-width: 500px;
1174 | overflow: hidden;
1175 | flex-grow: 0;
1176 | }
1177 | .container__122e4 .headerText__122e4 {
1178 | font-size: 12px;
1179 | font-weight: bold;
1180 | font-style: normal;
1181 | text-transform: uppercase;
1182 | }
1183 |
1184 | /* fix emoji picker sizing */
1185 | .emojiItem_fc7141 {
1186 | width: 40px !important;
1187 | height: 40px !important;
1188 | padding: 0;
1189 | margin-left: 4px;
1190 | }
1191 | .emojiItem_fc7141 > :is(.image__1859b, .emojiSpriteImage_d982c2) {
1192 | transform: scale(0.8);
1193 | }
1194 | .emojiListRow_fc7141 {
1195 | height: unset;
1196 | grid-template-columns: repeat(auto-fill, 48px);
1197 | }
1198 | .drawerSizingWrapper__08434 {
1199 | height: 90%;
1200 | bottom: 0;
1201 | }
1202 | .emojiPickerListWrapper_c0e32c .list_c656ac {
1203 | height: 110%;
1204 | }
1205 |
1206 | /* remove emoji nitro upsell */
1207 | .categorySectionNitroLocked_c656ac {
1208 | background-color: transparent;
1209 | }
1210 | .nitroTopDividerContainer_b3fb5f {
1211 | visibility: hidden;
1212 | padding: unset;
1213 | }
1214 | .upsellContainerFloating__0b69f {
1215 | display: none;
1216 | }
1217 |
1218 | /** Game profile */
1219 | /*
1220 | .gameProfileModal__8e830 [data-text-variant="heading-md\/bold"] {
1221 | visibility: hidden;
1222 | }
1223 |
1224 | .gameProfileModal__8e830 .heading-xl\/bold_cf4812 {
1225 | font-weight: 600;
1226 | font-size: 20px;
1227 | margin-left: 55px;
1228 | }
1229 |
1230 | .gameProfileModal__8e830 .sectionHeader__8e830:is(.text-xs\/semibold_cf4812, .text-md\/semibold_cf4812, .text-sm\/semibold_cf4812) {
1231 | text-transform: uppercase !important;
1232 | }
1233 |
1234 | .gameProfileModal__8e830 .text-md\/semibold_cf4812 {
1235 | color: var(--header-secondary) !important;
1236 | font-size: 13px;
1237 | font-weight: 500;
1238 | display: flex;
1239 | align-items: center;
1240 | gap: 8px;
1241 | &:after {
1242 | content: "";
1243 | background: var(--background-modifier-accent);
1244 | flex: 1;
1245 | height: 1px;
1246 | display: block;
1247 | }
1248 | }
1249 |
1250 | .gameProfileModal__8e830 .gapSm__8e830.row__8e830 > .text-sm\/semibold_cf4812 {
1251 | color: var(--header-secondary) !important;
1252 | font-weight: 500;
1253 | margin-left: 55px;
1254 | }
1255 |
1256 | .gameProfileModal__8e830 .lineClamp2Plus__4bd52 {
1257 | max-height: unset;
1258 | }
1259 |
1260 | .gameProfileModal__8e830 .overflowMenu__8e830 {
1261 | background: none;
1262 | backdrop-filter: none;
1263 | }
1264 |
1265 | .gameProfileModal__8e830 .sidebar__8e830 {
1266 | border-left: solid 1px var(--background-modifier-accent);
1267 | }
1268 |
1269 | .gameProfileModal__8e830 .logoWrapper__8e830 {
1270 | background-color: unset;
1271 | border-radius: 4px;
1272 | }
1273 |
1274 | .gameProfileModal__8e830 .friends_b37a75.text-xs\/semibold_cf4812 {
1275 | background: none;
1276 | font-weight: 400;
1277 | font-size: 14px;
1278 | }
1279 | */
1280 | /* move game icon
1281 | .gameProfileModal__8e830 .gameIcon__8e830 {
1282 | position: absolute;
1283 | margin-top: -32px;
1284 | width: 48px;
1285 | height: 48px;
1286 | }
1287 |
1288 | .gameProfileModal__8e830 .platforms__93ebb {
1289 | transform: scale(1.5);
1290 | margin-left: 45px;
1291 | }
1292 | */
1293 | /*change x to twitter (bluesky better [follow me @milbit.bsky.social])*/
1294 | .gameProfileModal__8e830
1295 | .anchor_edefb8
1296 | 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"] {
1297 | d: path(
1298 | "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"
1299 | );
1300 | transform: scale(0.1);
1301 | }
1302 |
1303 | /* linked roles */
1304 | .verifiedRole_e59759 {
1305 | padding: 8px;
1306 | border-radius: 999px;
1307 | background: none;
1308 | border: 2.5px solid var(--background-secondary-alt);
1309 | .container__183c2 {
1310 | order: -1;
1311 | }
1312 | .roleCheckmark_e59759 {
1313 | right: 10px;
1314 | top: 10px;
1315 | }
1316 | }
1317 | .connectionsChecksGroup_a470b4 {
1318 | background: none;
1319 | border-radius: 3px;
1320 | padding: 8px;
1321 | }
1322 | .headerText_a470b4 .heading-xl\/extrabold_cf4812 {
1323 | font-size: 16px;
1324 | letter-spacing: 0.3;
1325 | font-weight: 600;
1326 | text-transform: uppercase;
1327 | }
1328 |
1329 | .scrollerBase_d125d2.thin_d125d2.container_e59759.content__49fc1 > .defaultColor__5345c.heading-md\/semibold_cf4812 {
1330 | font-weight: 500;
1331 | }
1332 |
1333 | /* Today at */
1334 | :is(.timestampInline_c19a55) time[aria-label^="Today at"] {
1335 | visibility: hidden;
1336 | }
1337 | :is(.timestampInline_c19a55) time[aria-label^="Today at"]:before {
1338 | content: attr(aria-label);
1339 | visibility: visible;
1340 | }
1341 |
1342 | /* custom status modal */
1343 | .header_dbc4b7 {
1344 | background-image: url("https://discord.com/assets/7d67842f58b6d155.svg");
1345 | background-size: 200px 120px;
1346 | background-position: center bottom;
1347 | background-repeat: no-repeat;
1348 | top: 0;
1349 | left: 50%;
1350 | transform: translateX(-50%);
1351 | padding-top: 120px !important;
1352 | margin-top: -93px;
1353 | }
1354 | .headerTitle_dbc4b7 .heading-xl\/semibold_cf4812 {
1355 | display: none;
1356 | }
1357 | .scrollerBase_d125d2.thin_d125d2:has(.profilePreview_dbc4b7).content__49fc1:before {
1358 | content: "Set a custom status";
1359 | font-size: 20px;
1360 | line-height: 24px;
1361 | font-weight: 600;
1362 | color: var(--interactive-active);
1363 | margin-left: 28%;
1364 | }
1365 | .profilePreview_dbc4b7 {
1366 | display: none;
1367 | }
1368 | .statusText__19b6d {
1369 | color: var(--header-secondary);
1370 | }
1371 |
1372 | /* clan tags */
1373 | .guildTagContainer__63ed3,
1374 | .clanTagChiplet_c19a55,
1375 | .chipletContainerInline__4a25c,
1376 | .chipletContainerInline__10651,
1377 | .chipletContainerInner__10651,
1378 | .clanTag__5d473 {
1379 | display: none !important;
1380 | }
1381 |
1382 | /* status formatting */
1383 | :is(.subText__20a53, .subText__91a9d, .subtext__0a06e) {
1384 | .container_c9d15c {
1385 | display: flex;
1386 | .icon_c9d15c {
1387 | order: 1;
1388 | }
1389 | .emoji_c9d15c {
1390 | order: -1;
1391 | }
1392 | .dot_c9d15c {
1393 | display: none;
1394 | }
1395 | }
1396 | .container_c9d15c:has(.statusText__19b6d:not(.dot_c9d15c):nth-of-type(3)) .statusText__19b6d:nth-of-type(1) {
1397 | display: none;
1398 | }
1399 | }
1400 | /* new experimental image viewer - this sucks, don't use it
1401 |
1402 | .carouselModal_d3a6f0 {
1403 | align-items: start;
1404 | justify-content: center;
1405 | width: fit-content;
1406 | z-index: 0;
1407 | }
1408 |
1409 | .topBar__6088c {
1410 | z-index: -1;
1411 | }
1412 |
1413 | .closeButton__6088c {
1414 | position: fixed;
1415 | top: 0;
1416 | left: 0;
1417 | right: 0;
1418 | bottom: 0;
1419 | padding: 0;
1420 | opacity: 0;
1421 | cursor: unset;
1422 | }
1423 |
1424 | .messageContents__6088c {
1425 | display: none;
1426 | }
1427 |
1428 | .wrapper_b2eddf {
1429 | flex-grow: unset;
1430 | pointer-events: none;
1431 | }
1432 |
1433 | .mediaWrapper_b2eddf {
1434 | position: unset;
1435 | width: fit-content;
1436 | }
1437 |
1438 | .imageWrapper_af017a {
1439 | pointer-events: all;
1440 | }
1441 |
1442 | .actionButtonContainer_c319f9 {
1443 | margin-top: -10px;
1444 | pointer-events: none;
1445 | }
1446 |
1447 | .actionButtons_cc1819 {
1448 | background-color: transparent;
1449 | border-radius: 0;
1450 | gap: 1;
1451 | padding: 0;
1452 | }
1453 | .actionButtons_cc1819 button {
1454 | background: transparent !important;
1455 | margin: 0;
1456 | padding: 1;
1457 | width: fit-content;
1458 | pointer-events: all;
1459 | svg {
1460 | display: none;
1461 | }
1462 |
1463 | &:after {
1464 | content: attr(aria-label);
1465 | color: var(--white-500) !important;
1466 | font-size: 14px;
1467 | font-weight: 500;
1468 | line-height: 18px;
1469 | transition: opacity 0.15s ease;
1470 | opacity: 0.5;
1471 | }
1472 |
1473 | &:hover:after {
1474 | opacity: 1;
1475 | -webkit-text-decoration: underline;
1476 | text-decoration: underline;
1477 | }
1478 | }
1479 | */
1480 | /*themes in appearance
1481 | stolen and modified from 11pixels' dtm16
1482 | https://github.com/XYZenix/DTM-16
1483 | */
1484 | .themeTitleContainer__3e443 .title__3e443,
1485 | .header__67a11 .titleText__67a11 {
1486 | color: var(--header-secondary);
1487 | font-size: 12px;
1488 | font-weight: 900;
1489 | }
1490 |
1491 | .layers__960e4.layers__160d8
1492 | .layer__960e4:not(.baseLayer__960e4)
1493 | .contentRegion__23e6b
1494 | .contentColumn__23e6b#appearance-tab
1495 | .presets__67a11 {
1496 | & .themeSelectionContainer__36dee {
1497 | width: 132px;
1498 | height: 81px;
1499 | margin-bottom: 15px;
1500 | }
1501 | & .themeSelection__36dee {
1502 | border-radius: 4px;
1503 | box-shadow: none;
1504 | &:after,
1505 | &:before {
1506 | content: "";
1507 | display: block;
1508 | }
1509 | &:before {
1510 | width: 130px;
1511 | height: 60px;
1512 | background-size: 130px 100px;
1513 | border: solid 1px var(--background-secondary-alt);
1514 | border-bottom: none;
1515 | border-radius: 4px 4px 0 0;
1516 | }
1517 | &:after {
1518 | content: attr(aria-label);
1519 | font-weight: 600;
1520 | font-size: 14px;
1521 | background: var(--background-secondary);
1522 | border: solid 1px var(--background-secondary-alt);
1523 | border-radius: 0 0 4px 4px;
1524 | width: 130px;
1525 | height: auto;
1526 | padding: 10px 0;
1527 | color: var(--interactive-active);
1528 | text-align: center;
1529 | }
1530 | &.selected__36dee:before {
1531 | border-color: var(--blurple);
1532 | }
1533 | &.selected__36dee:after {
1534 | background: var(--blurple);
1535 | border-color: var(--blurple);
1536 | }
1537 | }
1538 | }
1539 |
1540 | .themeSelectionContainer__36dee .selectionCircle__36dee,
1541 | .nitroWheel_c5f0dc {
1542 | display: none;
1543 | }
1544 | .themeSelection__36dee .iconWrapper__36dee {
1545 | top: -4.5px;
1546 | left: 35px;
1547 | & svg {
1548 | width: 35px;
1549 | height: 35px;
1550 | }
1551 | }
1552 | /*custom theme*/
1553 | .container__8fea4 {
1554 | display: unset;
1555 | border: none;
1556 | }
1557 | .presets__67a11 :is(.newRing__8fea4, .newBadge__8fea4) {
1558 | display: none;
1559 | }
1560 | .paletteIcon__8fea4 {
1561 | position: absolute;
1562 | top: 13px;
1563 | left: 49px;
1564 | width: 35px;
1565 | height: 35px;
1566 | }
1567 | /*idiots!!!!!!!!!*/
1568 | :is(#equicordthemes-tab, #vencordthemes-tab) .sectionTitle__7bffb:before {
1569 | content: "OldCord note: Using it with other themes may break stuff. Please don't report issues (this is not from vencord)";
1570 | color: #fff;
1571 | padding: 10px;
1572 | background: var(--red-transparent);
1573 | border: 1px solid var(--red);
1574 | border-radius: 3px;
1575 | }
1576 | :is(#themes-tab) .bd-addon-controls:after {
1577 | content: "OldCord note: Using it with other themes may break stuff. Please don't report issues (this is not from betterdiscord)";
1578 | color: #fff;
1579 | margin-top: 10px;
1580 | padding: 10px;
1581 | background: var(--red-transparent);
1582 | border: 1px solid var(--red);
1583 | border-radius: 3px;
1584 | flex: 1 1 100%;
1585 | }
1586 | /*vc/call buttons*/
1587 | .buttonSection__1405b{
1588 | background: var(--background-floating);
1589 | border: none;
1590 | border-radius: 6px;
1591 | & +:not(.redGlow_f1ceac) path{
1592 | fill: var(--interactive-hover) !important;
1593 | }
1594 | }
1595 |
--------------------------------------------------------------------------------
/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 | outline: none;
464 | }
465 | .rootWithShadow__49fc1 {
466 | box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
467 | }
468 | .channelName__754bd div,
469 | .channelName__754bd input {
470 | font-weight: 600;
471 | }
472 | .input__4f074 {
473 | border-radius: 3px;
474 | }
475 | .outer__4f074:hover .input__4f074 {
476 | background-color: unset;
477 | outline: unset;
478 | box-shadow: inset 0 0 0 1px var(--background-tertiary);
479 | }
480 | .input__4f074:focus,
481 | .outer__4f074:hover .input__4f074:focus {
482 | background-color: var(--input-background);
483 | box-shadow: inset 0 0 0 1px var(--background-tertiary);
484 | outline: none;
485 | }
486 |
487 | /* tab bars */
488 | .item_b3f026 {
489 | position: relative;
490 | font-size: 16px;
491 | line-height: 20px;
492 | cursor: pointer;
493 | font-weight: 500;
494 | }
495 | .tab_f8303a {
496 | display: flex;
497 | flex-shrink: 1;
498 | align-items: center;
499 | gap: var(--spacing-8);
500 | padding-bottom: var(--spacing-12);
501 | }
502 | .brand_b3f026.item_b3f026:hover,
503 | .themed_b3f026.item_b3f026:hover {
504 | color: var(--interactive-hover);
505 | }
506 | .top_b3f026 .item_b3f026 {
507 | margin-bottom: unset;
508 | }
509 | .top_b3f026 .item_b3f026.selected_b3f026 {
510 | cursor: default;
511 | color: var(--interactive-active);
512 | }
513 | .top_b3f026 .item_b3f026.selected_b3f026:after,
514 | .top_b3f026 .item_b3f026:hover:after {
515 | border-top-left-radius: unset;
516 | border-top-right-radius: unset;
517 | margin-top: -3px;
518 | }
519 | .topPill_b3f026 .themed_b3f026.selected_b3f026.item_b3f026 {
520 | background-color: var(--background-modifier-selected);
521 | }
522 | .side_b3f026 .themed_b3f026.selected_b3f026.item_b3f026:hover:not(.disabled_b3f026),
523 | .topPill_b3f026 .themed_b3f026.selected_b3f026.item_b3f026:hover:not(.disabled_b3f026) {
524 | background-color: var(--background-modifier-selected);
525 | color: var(--text-primary);
526 | }
527 | .side_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026),
528 | .topPill_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) {
529 | background-color: var(--background-modifier-hover);
530 | }
531 |
532 | /* header text in DMs */
533 | .titleWrapper__9293f > .defaultColor__5345c.text-md\/medium_cf4812 {
534 | text-transform: unset !important;
535 | }
536 | .topic__6ec1a {
537 | color: var(--header-secondary);
538 | }
539 | /* call background */
540 | .root_bfe55a {
541 | background: unset;
542 | }
543 |
544 | /*buttons*/
545 | .button__201d5:is(.bannerColor_fb7f94) {
546 | border: unset;
547 | }
548 | .item_b3f026 {
549 | transition: none !important;
550 | }
551 | :is(.sidebar__23e6b) .selected_b3f026.item_b3f026 {
552 | background: var(--background-modifier-selected) !important;
553 | }
554 | :is(.sidebar__23e6b) .side_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) {
555 | background-color: var(--background-modifier-hover);
556 | }
557 | :is(.sidebar__23e6b) .side_b3f026 .themed_b3f026.item_b3f026:active:not(.disabled_b3f026) {
558 | background-color: var(--background-modifier-active);
559 | color: var(--text-primary);
560 | }
561 | :is(.sidebar__23e6b) .selected_b3f026.item_b3f026:hover {
562 | color: var(--text-primary);
563 | }
564 | .topPill_b3f026 .item_b3f026 {
565 | border-radius: 4px;
566 | margin: 0 8px;
567 | padding: 2px 8px;
568 | min-height: unset;
569 | }
570 | .searchBar__35e86 {
571 | border-bottom: unset;
572 | box-shadow: var(--elevation-low);
573 | }
574 | .searchBar__35e86 .grow__201d5.fullWidth__201d5.sizeSmall__201d5.colorPrimary__201d5.lookFilled__201d5.button__201d5 {
575 | width: 100%;
576 | height: 28px;
577 | min-height: unset;
578 | overflow: hidden;
579 | border-radius: 4px;
580 | background-color: var(--background-tertiary);
581 | box-shadow: none;
582 | .contents__201d5 {
583 | width: 100%;
584 | color: var(--text-muted);
585 | text-align: left;
586 | text-overflow: ellipsis;
587 | font-size: 14px;
588 | font-weight: 500;
589 | line-height: 24px;
590 | white-space: nowrap;
591 | margin-left: -10px;
592 | }
593 | }
594 | .wrapper_f7ecac:not(.popover_c97e55) {
595 | box-shadow: var(--elevation-stroke);
596 | }
597 | .toolbar__9293f {
598 | gap: unset;
599 | padding-left: unset;
600 | }
601 | .iconBadgeBottom__9293f {
602 | right: 2px;
603 | bottom: 0;
604 | --custom-icon-offset: unset;
605 | }
606 | .navButton__08434 {
607 | border-radius: 4px;
608 | color: var(--interactive-normal);
609 | font-size: 16px;
610 | font-weight: 600;
611 | line-height: 20px;
612 | padding: 2px 8px;
613 | transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
614 | }
615 | .navButtonActive__08434 {
616 | color: var(--interactive-active);
617 | background-color: var(--background-modifier-selected);
618 | }
619 | .navButton__08434:hover {
620 | color: var(--interactive-hover);
621 | background-color: var(--background-modifier-hover);
622 | }
623 | button.button__67645.enabled__67645:hover {
624 | background-color: var(--background-modifier-selected);
625 | }
626 | .container__87bf1.checked__87bf1 {
627 | border: none;
628 | }
629 | button.button__67645,
630 | .visual-refresh span.button__67645 {
631 | transition: none;
632 | }
633 | /* mic button */
634 | .micButtonParent__37e49:hover > button {
635 | background-color: rgba(0, 0, 0, 0);
636 | }
637 |
638 | /* search bar(s) */
639 | .medium_a45028 {
640 | height: unset;
641 | .inner_a45028 {
642 | padding: 1px;
643 | .input_a45028 {
644 | padding: 0 8px;
645 | line-height: 32px;
646 | margin: 1px;
647 | }
648 | .iconLayout_a45028 {
649 | width: 32px;
650 | height: 32px;
651 | }
652 | }
653 | }
654 | .container_a45028 {
655 | border: none;
656 | background-color: var(--background-tertiary);
657 | }
658 | .search__49676 {
659 | margin: 0 8px;
660 | }
661 | .searchBar__97492 {
662 | background: var(--bg-overlay-3, var(--background-tertiary));
663 | padding: 0 2px;
664 | height: 24px;
665 | width: 144px;
666 | border-radius: 4px;
667 | border: none;
668 | margin-right: 80px;
669 | .DraftEditor-root {
670 | padding: 2px 0;
671 | line-height: 20px;
672 | }
673 | }
674 | .container__55c99 {
675 | box-shadow: var(--shadow-border), var(--shadow-high);
676 | border-radius: 3px;
677 | border: none;
678 | background: var(--bg-overlay-3, var(--background-primary));
679 | }
680 | .container_fea832 {
681 | background-color: var(--background-tertiary);
682 | border-radius: 4px;
683 | border: none;
684 | }
685 | .searchResult__02a39 {
686 | border: solid 1px var(--background-tertiary);
687 | }
688 | /* dropdowns */
689 | .lookFilled__3f413.select__3f413 {
690 | background-color: var(--input-background);
691 | border-color: var(--input-background);
692 | }
693 | /* border radius 9 list of offenders */
694 | .root__49fc1,
695 | .container_e45859,
696 | .searchBar__5ec2f,
697 | .tooltip__382e7,
698 | .link__2ea32,
699 | .container_a45028,
700 | .container__91a9d,
701 | .option__56fec,
702 | .wrapper_d5f3cd,
703 | .section__00943,
704 | .container__0be77,
705 | .content__07f91 {
706 | border-radius: 4px;
707 | }
708 | .button__201d5:not(.cta_a3a802) {
709 | border-radius: 3px;
710 | &:not(.lookOutlined__201d5, .card__39ec2 .button_fb7f94, .button_fb7f94) {
711 | border: none;
712 | }
713 | .panels_c48ade & {
714 | background: none;
715 | }
716 | }
717 | .button__7d7f7 {
718 | border-radius: 999% !important;
719 | }
720 | .select__3f413 {
721 | border: 1px solid transparent;
722 | cursor: pointer;
723 | box-sizing: border-box;
724 | grid-gap: 8px;
725 | border-radius: 4px;
726 | min-height: unset;
727 | }
728 | .container_f89b2c {
729 | background-color: var(--opacity-black-8);
730 | border-color: var(--opacity-black-28);
731 | min-height: unset;
732 | border-radius: 3px;
733 | }
734 | /* modal footers */
735 | .footer__49fc1 {
736 | border-radius: 0 0 5px 5px;
737 | background-color: var(--modal-footer-background);
738 | }
739 | .footerSeparator__49fc1 {
740 | box-shadow: inset 0 1px 0 hsl(220 calc(1 * 6.522%) 18.039% /0.6);
741 | }
742 | .footer__5be3e {
743 | .channelTextArea__74017 {
744 | box-sizing: border-box;
745 | width: 100%;
746 | height: 40px;
747 | border-radius: 3px;
748 | background-color: var(--deprecated-text-input-bg);
749 | border: 1px solid var(--deprecated-text-input-border);
750 | -webkit-transition: border-color 0.2s ease-in-out;
751 | transition: border-color 0.2s ease-in-out;
752 | }
753 | }
754 |
755 | .member__5d473 {
756 | max-width: 224px;
757 | }
758 | .barButtonAlt__0f481 {
759 | background: none;
760 | &:hover {
761 | background: none;
762 | }
763 | }
764 | .custom-theme-background .container_a99829 {
765 | border: unset;
766 | }
767 | .inlineContainer__74017 {
768 | box-shadow: inherit;
769 | background: unset;
770 | border-color: transparent;
771 | }
772 | .inner_a99829 {
773 | border-radius: 3px;
774 | }
775 | .buttons__74017 {
776 | margin-right: -6px !important;
777 | }
778 | .button__74017 {
779 | padding: 4px;
780 | margin-left: 4px;
781 | margin-right: 4px;
782 | }
783 |
784 | .base_c48ade {
785 | grid-template-areas:
786 | "titleBar titleBar titleBar"
787 | "notice notice notice"
788 | "guildsList channelsList page";
789 | grid-template-rows: [top] 0px [titlebarEnd] min-content [page] 22px [end];
790 | }
791 | .base_c48ade .sidebar_c48ade {
792 | display: grid;
793 | grid-template-areas: "guilds sidebar" "guilds panels";
794 | grid-template-columns: [start] min-content [sidebarStart] unset [end];
795 | grid-template-rows: [start] 1fr [panelsStart] min-content [end];
796 | border-radius: 0;
797 | }
798 | .base_c48ade .sidebar_c48ade > .guilds_c48ade {
799 | grid-area: guilds;
800 | margin-bottom: 0;
801 | }
802 | .base_c48ade .sidebar_c48ade > .sidebarList_c48ade {
803 | grid-area: sidebar;
804 | width: 241px;
805 | --custom-app-panels-height: 0;
806 | }
807 | .base_c48ade .sidebar_c48ade > .sidebarResizeHandle_c48ade,
808 | :root .base_c48ade .sidebar_c48ade:after {
809 | display: none;
810 | }
811 | /*Betterfolders (vencord)*/
812 | .base_c48ade.vc-betterFolders-sidebar-grid {
813 | grid-template-columns: [start] 80px [guilds-end] min-content [betterFoldersSidebar-end] 240px [channelsEnd] 1fr [end];
814 | grid-template-areas: "titleBar titleBar titleBar titleBar" "guildsList betterFoldersSidebar notice notice" "guildsList betterFoldersSidebar channelsList page";
815 | }
816 | .base_c48ade.vc-betterFolders-sidebar-grid .sidebar_c48ade {
817 | grid-template-columns: [start] 80px [guilds-end] min-content [betterFoldersSidebar-end] 240px [end];
818 | grid-template-areas: "guilds betterFoldersSidebar sidebar" "guilds betterFoldersSidebar panels";
819 | width: auto !important;
820 | }
821 | /* ServerFolders (betterdiscord) */
822 | .folderContentIsOpen_ac0584 .base_c48ade {
823 | grid-template-areas:
824 | "titleBar titleBar titleBar titleBar"
825 | "notice notice notice notice"
826 | "guildsList guildsList channelsList page";
827 | grid-template-columns: [start] min-content [guildsEnd] min-content [guildsEnd] min-content [channelsEnd] 1fr [end];
828 | }
829 | .folderContentIsOpen_ac0584 .base_c48ade .sidebar_c48ade {
830 | grid-template-areas:
831 | "guilds guildsFolderList sidebar"
832 | "guilds guildsFolderList panels";
833 | }
834 | /* user panel */
835 | .base_c48ade .sidebar_c48ade > .panels_c48ade {
836 | grid-area: panels;
837 | position: static;
838 | inset: auto;
839 | .avatar__37e49.wrapper__44b0c {
840 | width: 32px !important;
841 | height: 32px !important;
842 | svg {
843 | width: 40px;
844 | height: 40px;
845 | }
846 | }
847 | }
848 | .toolbar__9293f > .iconWrapper__9293f {
849 | height: 24px !important;
850 | width: auto !important;
851 | margin: 0 8px;
852 | svg {
853 | width: 24px;
854 | height: 24px;
855 | }
856 | }
857 | .avatarWrapper__37e49 {
858 | padding-left: 2px;
859 | border-radius: 4px;
860 | transition: none;
861 | &:hover {
862 | background-color: var(--background-modifier-selected);
863 | color: var(--interactive-hover);
864 | }
865 | }
866 | .avatarWrapper__37e49 .nameTag__37e49 {
867 | padding-bottom: 4px;
868 | padding-top: 4px;
869 | }
870 | .nameTag__37e49 {
871 | margin-right: 4px;
872 | }
873 |
874 | /* style dms correctly (refresh edition) */
875 | .channel__972a0 {
876 | .interactive__972a0:active,
877 | .interactiveSelected__972a0 {
878 | background: var(--bg-overlay-selected, var(--background-modifier-selected));
879 | }
880 | .interactiveSelected__972a0 :is(.name__20a53,.subtext__972a0) {
881 | color: var(--interactive-active) !important;
882 | }
883 | .highlighted__20a53 .subtext__972a0 {
884 | color: var(--interactive-active);
885 | }
886 | .interactive_bf202d:hover {
887 | color: var(--interactive-hover) !important;
888 | }
889 | .interactiveSelected__972a0 .subText__20a53 [data-text-variant="text-xs\/medium"] {
890 | color: var(--interactive-active) !important;
891 | }
892 |
893 | &:hover:not(:has(.interactiveSelected__972a0)) .subText__20a53 [data-text-variant="text-xs\/medium"] {
894 | color: var(--interactive-hover) !important;
895 | }
896 |
897 | &:hover .interactiveSelected__972a0 .name__20a53 {
898 | color: var(--interactive-active) !important;
899 | }
900 |
901 | & .subText__20a53 [data-text-variant="text-xs\/medium"] {
902 | color: var(--channels-default) !important;
903 | }
904 |
905 | &:hover:has(.interactiveSelected__972a0) .interactive_bf202d {
906 | background: var(--background-modifier-selected) !important;
907 | }
908 | .interactive__972a0:focus-within {
909 | background: var(--bg-overlay-selected, var(--background-modifier-selected));
910 | }
911 | }
912 |
913 | /* style member list correctly */
914 | .clickable__91a9d.container__91a9d:hover .text_c9d15c,
915 | .clickable__91a9d.container__91a9d:hover .muted__91a9d .text_c9d15c,
916 | .clickable__91a9d.container__91a9d:active .text_c9d15c,
917 | .clickable__91a9d.container__91a9d:active .text_c9d15c,
918 | .highlighted__91a9d.container__91a9d .text_c9d15c,
919 | .selected__91a9d.container__91a9d .text_c9d15c {
920 | color: var(--channels-default);
921 | }
922 |
923 | /* style friends list correctly */
924 | .peopleListItem_cc6179 {
925 | transition: unset !important;
926 | }
927 | .peopleListItem_cc6179.active_cc6179 {
928 | background-color: var(--background-modifier-hover);
929 | }
930 |
931 | .base_c48ade
932 | .text-sm\/medium__13cf1:not(
933 | .title_b6c092,
934 | .text_c9d15c,
935 | .applicationSublabel_e1ecd3 .text-sm\/medium__13cf1,
936 | .lineClamp1__4bd52,
937 | .searchFilter_bd8186,
938 | .searchAnswer_bd8186
939 | ) {
940 | text-transform: uppercase;
941 | font-size: 12px;
942 | line-height: 16px;
943 | letter-spacing: 0.02em;
944 | font-family: var(--font-display);
945 | font-weight: 600;
946 | }
947 | .header__56fec {
948 | text-transform: uppercase;
949 | font-size: 12px;
950 | line-height: 16px;
951 | letter-spacing: 0.02em;
952 | font-family: var(--font-display);
953 | font-weight: 800;
954 | }
955 | .h5_b717a1:not(.isEnabled__2666b) {
956 | color: var(--header-secondary);
957 | }
958 | .eyebrow_b717a1 {
959 | font-family: var(--font-display);
960 | font-size: 12px;
961 | line-height: 1.3333333333333333;
962 | font-weight: 700;
963 | text-transform: uppercase;
964 | letter-spacing: 0.02em;
965 | }
966 | /* turn a dot into a divider */
967 | .dot__9293f {
968 | width: 1px;
969 | height: 24px;
970 | margin: 0 8px;
971 | flex: 0 0 auto;
972 | background: var(--background-modifier-accent);
973 | }
974 |
975 | .sectionDivider__35e86 {
976 | display: none;
977 | }
978 | .privateChannelsHeaderContainer__99e7c {
979 | display: flex;
980 | padding: 18px 8px 4px 18px !important;
981 | height: 40px !important;
982 | }
983 |
984 | /* markdown things */
985 | .markup__75297 code {
986 | line-height: 1.125rem;
987 | text-indent: 0;
988 | background: var(--background-secondary) !important;
989 | border: 1px solid var(--background-tertiary) !important;
990 | }
991 | .markup__75297 code.inline {
992 | font-family: var(--font-code) !important;
993 | }
994 | .embedFull__623de code.inline {
995 | background: var(--background-tertiary) !important;
996 | }
997 |
998 | /* discord logo */
999 | .childWrapper__6e9f8 svg {
1000 | height: 30px !important;
1001 | width: 30px !important;
1002 | }
1003 |
1004 | /* sliders & bars */
1005 | .slider_a562c8 {
1006 | --grabber-size: 16px !important;
1007 | --bar-size: 4px !important;
1008 | }
1009 | .slider_a562c8 .barFill_a562c8 {
1010 | background-color: var(--bg-brand);
1011 | }
1012 | .grabber_a562c8 {
1013 | top: 9px;
1014 | width: 10px;
1015 | height: 24px;
1016 | margin-left: -5px;
1017 | border-radius: 3px;
1018 | background-color: var(--white);
1019 | border: 1px solid var(--border-strong);
1020 | box-shadow: var(--shadow-border), var(--shadow-ledge), var(--shadow-low);
1021 | }
1022 | .slider_a562c8:is(.hasMarks_a562c8) .grabber_a562c8 {
1023 | margin-top: 16px;
1024 | }
1025 | :is(#user-context-user-volume, .column__7072d, .categorySubGroup__9f327) .slider_a562c8 .grabber_a562c8 {
1026 | margin-top: -7px;
1027 | }
1028 | .sliderBar_ac7648.speaking_ac7648 {
1029 | background-color: rgb(105, 196, 154);
1030 | }
1031 | .bar_a562c8 {
1032 | height: 8px;
1033 | }
1034 |
1035 | .radioBar__001a7 {
1036 | padding: 10px !important;
1037 | --checkbox-border-checked: var(--brand-experiment-130);
1038 | --redesign-input-control-selected: none;
1039 | }
1040 | /*
1041 | .radioBar__001a7 .radioIndicatorGroup__001a7:before {
1042 | 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");
1043 | position: relative
1044 | }
1045 | */
1046 | /* chat box */
1047 | .scrollerSpacer__36d07 {
1048 | height: 30px;
1049 | }
1050 | .formWithLoadedChatInput_f75fb0 {
1051 | padding-left: 16px !important;
1052 | padding-right: 16px !important;
1053 | .channelTextArea__74017 {
1054 | border: none;
1055 | }
1056 | .buttons__74017 {
1057 | margin-right: -6px !important;
1058 | gap: unset;
1059 | }
1060 | .button__74017 {
1061 | padding: 4px;
1062 | margin-left: 4px;
1063 | margin-right: 4px;
1064 | }
1065 | .spriteContainer__04eed {
1066 | --custom-emoji-sprite-size: 24px !important;
1067 | }
1068 | .lottieIcon__5eb9b {
1069 | height: unset !important;
1070 | width: unset !important;
1071 | .channelAppLauncher_e6e74f & {
1072 | width: 24px !important;
1073 | }
1074 | }
1075 | .stackedBars__74017 {
1076 | background: var(--background-secondary);
1077 | &:first-child,
1078 | &.floatingBars__74017:empty + .stackedBars__74017:nth-child(2) {
1079 | border-top-left-radius: 8px;
1080 | border-top-right-radius: 8px;
1081 | }
1082 | &:not(:last-child) {
1083 | border: none;
1084 | }
1085 | }
1086 | .channelAttachmentArea_b77158 {
1087 | background-color: unset;
1088 | }
1089 | .upload_aa605f {
1090 | background-color: unset;
1091 | background: var(--bg-overlay-5, var(--background-secondary));
1092 | border: unset;
1093 | border-radius: 4px;
1094 | box-shadow: unset;
1095 | }
1096 | .spoilerContainer__54ab5.attachmentContainer__54ab5 .media__41ea0 {
1097 | border-radius: 3px;
1098 | }
1099 | .slateTextArea_ec4baf {
1100 | margin-left: unset;
1101 | }
1102 | .attachButton__0923f {
1103 | height: 40px;
1104 | padding: 10px 16px;
1105 | }
1106 | .attachButtonInner__0923f {
1107 | svg {
1108 | width: 24px;
1109 | height: 24px;
1110 | }
1111 | }
1112 | }
1113 | .channelTextArea__74017 {
1114 | border: unset;
1115 | border-radius: 4px;
1116 | }
1117 | .separator__49fc1 {
1118 | 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);
1119 | }
1120 | .header__49fc1 {
1121 | padding: var(--modal-vertical-padding) var(--modal-horizontal-padding);
1122 | }
1123 | .autocompleteAttached__6b0e0 {
1124 | left: 0;
1125 | right: 0;
1126 | }
1127 | .cooldownText_b21699 {
1128 | color: var(--font-primary) !important;
1129 | }
1130 | .base_b88801 {
1131 | left: 16px;
1132 | font-size: 14px;
1133 | font-weight: 500;
1134 | line-height: 24px;
1135 | resize: none;
1136 | align-items: center;
1137 | color: var(--text-normal);
1138 | }
1139 |
1140 | /* jump to present bar */
1141 | .jumpToPresentBar__0f481 {
1142 | bottom: 0;
1143 | border-radius: 8px 8px 0 0;
1144 | background-color: var(--background-accent);
1145 | opacity: 0.95 !important;
1146 | padding-bottom: 4px !important;
1147 | color: var(--white-500);
1148 | .barButtonBase__0f481 {
1149 | padding-left: unset;
1150 | padding: 0 12px;
1151 | }
1152 | .button__201d5 {
1153 | flex: 0 0 auto;
1154 | font-weight: 600;
1155 | position: relative;
1156 | background: unset;
1157 | padding-bottom: 6px;
1158 | &:hover {
1159 | background-color: unset !important;
1160 | }
1161 | .contents__201d5:after {
1162 | 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");
1163 | margin-left: 8px;
1164 | }
1165 | }
1166 | }
1167 | .bottomBar__0f481 {
1168 | border: unset;
1169 | padding: unset;
1170 | left: unset;
1171 | right: unset;
1172 | margin: unset;
1173 | width: unset;
1174 | min-width: unset;
1175 | box-shadow: unset;
1176 | min-height: unset;
1177 | box-sizing: unset;
1178 | }
1179 |
1180 | .barBase__0f481 {
1181 | left: 16px;
1182 | right: 16px;
1183 | min-height: 24px;
1184 | opacity: 0.95;
1185 | border: unset;
1186 | }
1187 |
1188 | .embedFull__623de {
1189 | background: var(--background-secondary);
1190 | border-top: unset;
1191 | border-right: unset;
1192 | border-bottom: unset;
1193 | }
1194 |
1195 | .cardPrimary__73069,
1196 | .cardPrimary__73069.editable__73069 {
1197 | background: var(--__card-accent-color);
1198 | }
1199 | .sensitivity_ac7648 {
1200 | min-height: 0px;
1201 | }
1202 |
1203 | /* add emoji button */
1204 | .largeReactionBtn__23977.forceShow__23977 {
1205 | padding: unset;
1206 | }
1207 | .reactionBtn__23977 {
1208 | opacity: 0;
1209 | }
1210 | .reactionBtn__23977:hover {
1211 | background: none;
1212 | }
1213 |
1214 | /* channel category arrow */
1215 | .mainContent__29444 {
1216 | margin-left: -10px;
1217 | }
1218 | .mainContent__29444 .icon__29444 {
1219 | order: -1;
1220 | }
1221 |
1222 | .box_f8c98c {
1223 | background-color: var(--background-secondary);
1224 | box-shadow: var(--elevation-low);
1225 | border-radius: 5px;
1226 | }
1227 | .lookLink__201d5.colorLink__201d5 {
1228 | color: var(--text-link);
1229 | }
1230 |
1231 | /* file embeds */
1232 | .wrapperAudio_cf09d8,
1233 | .file__0ccae,
1234 | .container_a8e786 {
1235 | background-color: var(--background-secondary);
1236 | border: 1px solid var(--background-secondary-alt);
1237 | box-shadow: unset;
1238 | }
1239 | .textContainer__4d95d {
1240 | background-color: var(--background-secondary);
1241 | border: 1px solid var(--background-secondary-alt);
1242 | }
1243 | .footer__4d95d {
1244 | background-color: var(--background-secondary);
1245 | border: 1px solid var(--background-secondary-alt);
1246 | }
1247 | .hljs {
1248 | display: block;
1249 | overflow-x: auto;
1250 | padding: 0.5em;
1251 | border-radius: 4px;
1252 | -webkit-text-size-adjust: none;
1253 | text-size-adjust: none;
1254 | color: var(--text-normal);
1255 | }
1256 | .audioControls_cf09d8 {
1257 | border-radius: 3px;
1258 | background-color: var(--opacity-black-60);
1259 | }
1260 | .colorDefault_c1e9c4.focused_c1e9c4 .caret_c1e9c4,
1261 | .colorDefault_c1e9c4.focused_c1e9c4 .checkbox_c1e9c4,
1262 | .colorDefault_c1e9c4.focused_c1e9c4 .radioSelection_c1e9c4,
1263 | .colorDefault_c1e9c4.focused_c1e9c4 .subtext_c1e9c4,
1264 | .colorDefault_c1e9c4.focused_c1e9c4 .refreshIcon__001a7 {
1265 | color: var(--white);
1266 | fill: var(--white);
1267 | }
1268 |
1269 | /* ping icon */
1270 | .lowerBadge_cc5dd2 {
1271 | border: 5px solid var(--background-tertiary);
1272 | border-radius: 50%;
1273 | margin-bottom: -5px;
1274 | margin-right: -5px;
1275 | }
1276 | .upperBadge_cc5dd2{
1277 | background: var(--background-tertiary); width: 24px; height: 24px;
1278 | position: relative;
1279 | border-radius: 50%;
1280 | left: 28px;
1281 | &>.iconBadge__650eb{
1282 | top: 4px; left: 4px; position: absolute
1283 | }
1284 | }
1285 |
1286 |
1287 | /* voice channel user count */
1288 | .wrapper__260e1 {
1289 | display: flex;
1290 | align-items: stretch;
1291 | line-height: 20px;
1292 | border-radius: 10px;
1293 | color: var(--channels-default);
1294 | border: none;
1295 | }
1296 | .total__260e1 {
1297 | padding: 0 6px 0 0;
1298 | background-color: var(--background-tertiary);
1299 | &:after {
1300 | left: -8px;
1301 | border-right: 8px solid transparent;
1302 | border-right-color: var(--background-tertiary);
1303 | }
1304 | }
1305 | .users__260e1 {
1306 | padding: 0 8px 0 6px;
1307 | background-color: var(--background-primary);
1308 | }
1309 | .total__260e1,
1310 | .users__260e1 {
1311 | font-feature-settings: normal;
1312 | font-variant-numeric: normal;
1313 | }
1314 |
1315 | /* placeholder gray square when moving a server icon */
1316 | .dragInner__87847 {
1317 | background-color: var(--background-primary) !important;
1318 | border: none !important;
1319 | }
1320 | svg.placeholderMask__87847 {
1321 | width: 50px;
1322 | height: 50px;
1323 | }
1324 |
1325 | /* unreads bars */
1326 | .bar__7aaec,
1327 | .voiceBar__7aaec {
1328 | border: unset;
1329 | margin-bottom: 4px;
1330 | background-color: var(--background-accent);
1331 | opacity: 0.9;
1332 | }
1333 | .top__7aaec,
1334 | .unreadTop__629e4 {
1335 | top: 0;
1336 | }
1337 | .bottom__7aaec,
1338 | .unreadBottom__629e4 {
1339 | bottom: 0;
1340 | }
1341 |
1342 | /* invites */
1343 | .wrapper_d5f3cd {
1344 | background-color: var(--background-secondary);
1345 | border: unset;
1346 | }
1347 |
1348 | /* forums */
1349 | .container__01ae2 {
1350 | border-top: unset;
1351 | background: var(--bg-overlay-app-frame, var(--background-base-lowest));
1352 | box-sizing: unset;
1353 | }
1354 | .floating__01ae2 {
1355 | border-left: 1px solid var(--background-secondary);
1356 | width: 400px !important;
1357 | z-index: 103;
1358 | }
1359 | .card_f369db {
1360 | padding-bottom: 8px;
1361 | }
1362 | .grid_f369db > div:first-child,
1363 | .headerRow_f369db,
1364 | .list_f369db > div:first-child {
1365 | min-width: 400px;
1366 | padding-right: var(--spacing-16);
1367 | }
1368 | .list_f369db .header_f369db {
1369 | margin-top: 24px;
1370 | }
1371 | .tagsContainer_f369db {
1372 | padding-top: 24px;
1373 | }
1374 | .mainCard_f369db {
1375 | background: var(--bg-mod-faint);
1376 | border: 1px solid transparent;
1377 | }
1378 | .container_faa96b {
1379 | padding: 12px;
1380 | }
1381 | .container_faa96b:hover {
1382 | background-color: var(--background-modifier-active) !important;
1383 | box-shadow: var(--elevation-high) !important;
1384 | transform: translateY(-2px) !important;
1385 | }
1386 | .container_faa96b.isOpen_faa96b {
1387 | background-color: var(--background-modifier-selected);
1388 | border: unset;
1389 | box-shadow: var(--shadow-low) !important;
1390 | }
1391 | .container__5808f {
1392 | background-color: var(--background-floating);
1393 | border-radius: var(--radius-xs);
1394 | box-shadow: var(--elevation-high);
1395 | padding: 8px;
1396 | }
1397 | .pill_a2c9e8 {
1398 | background-color: var(--background-secondary-alt);
1399 | border: 1px solid transparent;
1400 | color: var(--text-normal);
1401 | }
1402 | .pill_a2c9e8.clickable_a2c9e8:not(.disabled_a2c9e8):hover {
1403 | background-color: var(--background-tertiary);
1404 | cursor: pointer;
1405 | }
1406 | .sortDropdown_f369db,
1407 | .tagsButton_f369db {
1408 | background-color: var(--background-secondary-alt);
1409 | }
1410 | :is(.sortDropdown_f369db, .tagsButton_f369db):hover {
1411 | background-color: var(--background-tertiary);
1412 | }
1413 |
1414 | /* message flash */
1415 | .flash__03436,
1416 | .message__5126c {
1417 | border-bottom-right-radius: unset;
1418 | border-top-right-radius: unset;
1419 | }
1420 | .flash__03436[data-flash="true"],
1421 | .highlighted__5126c,
1422 | .replying__5126c {
1423 | background-color: rgba(114, 137, 218, 0.05);
1424 | }
1425 | :is(.highlighted__5126c, .replying__5126c):hover {
1426 | background-color: rgba(114, 137, 218, 0.1) !important;
1427 | }
1428 |
1429 | /* go live modal */
1430 | .container_a55fdc {
1431 | background: unset;
1432 | box-shadow: unset;
1433 | display: flex;
1434 | flex-direction: column;
1435 | overflow: visible;
1436 | .horizontal__7c0ba > .flex__7c0ba:last-child,
1437 | .horizontal__7c0ba > .flexChild__7c0ba:last-child {
1438 | margin-top: -5px;
1439 | }
1440 | .headerDescription_a55fdc {
1441 | color: var(--text-normal) !important;
1442 | margin-top: -1px;
1443 | }
1444 | }
1445 | .modalSize_a55fdc {
1446 | margin-top: -0.5px;
1447 | width: 410px;
1448 | .sizeSmall__201d5 {
1449 | width: 90px;
1450 | height: 36px;
1451 | }
1452 | .cancelButton_a55fdc {
1453 | margin-right: 180px;
1454 | background: var(--button-secondary-background);
1455 | }
1456 | .modalFooter_a55fdc .button__201d5:not([type="submit"], .lookLink__201d5) {
1457 | display: none;
1458 | }
1459 | }
1460 | .segmentContainer_a2de16 {
1461 | margin: unset;
1462 | padding: unset;
1463 | }
1464 | .segmentControl_a2de16 {
1465 | padding: 0 16px;
1466 | }
1467 | .segmentControlOption_a2de16 {
1468 | align-items: unset;
1469 | display: unset;
1470 | flex: unset;
1471 | justify-content: unset;
1472 | margin-left: unset;
1473 | margin-right: 20px;
1474 | padding-bottom: 8px;
1475 | padding-top: 0;
1476 | }
1477 | .sourceScroller_a2de16 {
1478 | height: 300px;
1479 | }
1480 | .sourceContainer_a2de16 {
1481 | padding: 0px;
1482 | }
1483 | .tile_a2de16 {
1484 | padding: unset;
1485 | margin-top: 12px;
1486 | .sourceThumbnail_a2de16 {
1487 | height: 96px;
1488 | width: 170px;
1489 | border-radius: 4px;
1490 | }
1491 | }
1492 | .qualitySettingsContainer_c6d3dc {
1493 | border-radius: 4px;
1494 | border: 1px solid var(--background-tertiary);
1495 | }
1496 | .refreshedArt_a55fdc {
1497 | content: url(https://static.discord.com/assets/3d0b430b1bae9f90.svg) !important;
1498 | display: inline-block;
1499 | height: var(--custom-go-live-modal-art-height);
1500 | margin: -60px auto 0;
1501 | width: 200px;
1502 | transform: scale(1.4) translateX(-9px);
1503 | }
1504 |
1505 | /* voice panel */
1506 | .container_e131a9 {
1507 | .labelWrapper__06d62 .text-md\/medium_cf4812 {
1508 | font-size: 14px !important;
1509 | font-weight: 600;
1510 | }
1511 | }
1512 | .rtcConnectionStatusWrapper__06d62 .text-sm\/medium_cf4812.lineClamp1__4bd52 {
1513 | font-size: 12px !important;
1514 | color: var(--header-secondary) !important;
1515 | }
1516 | .rtcConnectionStatusConnected__06d62 {
1517 | color: var(--text-positive);
1518 | }
1519 |
1520 | .wrapper_cb9592:has(.idle__2f4f7),
1521 | .wrapper_cb9592:is(.video_cb9592) {
1522 | z-index: 102;
1523 | }
1524 |
1525 | /* hide idle call background */
1526 | .gradientBackground__11664,
1527 | .gradientBackground__41626 {
1528 | display: none;
1529 | }
1530 |
1531 | /* fix notice positioning */
1532 | .notice__6e2b9,
1533 | #bd-notices {
1534 | box-shadow: var(--elevation-low);
1535 | margin-top: 22px;
1536 | margin-bottom: -38px;
1537 | grid-area: channelsList / channelsList / channelsList / page;
1538 | }
1539 | .base_c48ade:has(.notice__6e2b9, .bd-notice) .trailing_c38106 {
1540 | top: 89px;
1541 | .winButtons_c38106 {
1542 | bottom: 73px;
1543 | }
1544 | }
1545 | .base_c48ade:has(.notice__6e2b9, .bd-notice) :is(.sidebarList_c48ade, .page_c48ade) {
1546 | margin-top: 37px;
1547 | }
1548 | .page_c48ade {
1549 | height: auto;
1550 | }
1551 |
1552 | .section__00943 {
1553 | background: #2f3136;
1554 | }
1555 |
1556 | /* polls */
1557 | .container__0be77 {
1558 | background-color: var(--deprecated-card-editable-bg);
1559 | border: unset;
1560 | .buttonPresentation__0be77 {
1561 | border: unset;
1562 | }
1563 | }
1564 | .container_f69538 {
1565 | background-color: var(--background-secondary);
1566 | border-radius: 3px;
1567 | border: unset;
1568 | }
1569 |
1570 | /* call background */
1571 | .wrapper_cb9592.minimum_cb9592 .callContainer_cb9592 {
1572 | background: #202225;
1573 | }
1574 |
1575 | /* friends tab wumpus */
1576 | .addFriendWumpusWrapper__72ba7 {
1577 | display: none;
1578 | }
1579 | .addFriendInputWrapper__72ba7:focus-within {
1580 | border: 1px solid var(--deprecated-text-input-border);
1581 | }
1582 |
1583 | /* inbox */
1584 | .container__2692d,
1585 | .container_fc561d,
1586 | .recentMentionsPopout__95796 {
1587 | background-color: var(--background-secondary);
1588 | .header__45690 {
1589 | border-bottom: unset;
1590 | }
1591 | .header_ab6641 {
1592 | padding: 0 var(--space-md) 0;
1593 | }
1594 | .inboxTitle_ab6641,
1595 | .inboxIcon_ab6641 {
1596 | display: none;
1597 | }
1598 | .controls_ab6641 {
1599 | margin-bottom: -65px;
1600 | .friendRequestsButton__523aa {
1601 | background-color: var(--background-tertiary);
1602 | color: var(--interactive-normal);
1603 | }
1604 | }
1605 | .top_b3f026 .item_b3f026.brand_b3f026 {
1606 | --selected-tab-item-color: unset;
1607 | }
1608 | .tabBar_ab6641 {
1609 | margin-left: 16px;
1610 | .tab_ab6641 {
1611 | padding: 8px 8px;
1612 | margin: 0 8px;
1613 | height: 10px;
1614 | margin-top: 4px;
1615 | margin-bottom: 20px;
1616 | border-radius: 4px;
1617 | background-color: var(--background-primary);
1618 | }
1619 | .tab_ab6641:is(.selected_b3f026) {
1620 | background-color: var(--background-accent);
1621 | }
1622 | .tab_ab6641:nth-of-type(3) {
1623 | order: -2;
1624 | }
1625 | .tab_ab6641:nth-of-type(2) {
1626 | order: -1;
1627 | }
1628 | }
1629 | .channelHeader__35a7e {
1630 | background-color: var(--background-secondary);
1631 | }
1632 | .primary__06eda {
1633 | background-color: var(--background-primary);
1634 | color: var(--interactive-normal);
1635 | }
1636 | .secondary__06eda {
1637 | background-color: var(--background-secondary);
1638 | color: var(--interactive-normal);
1639 | }
1640 | .tertiary__06eda {
1641 | background-color: var(--background-tertiary);
1642 | color: var(--interactive-normal);
1643 | }
1644 | .messages__1ccd1 {
1645 | background-color: var(--background-primary);
1646 | border: unset;
1647 | }
1648 | .messageContainer__95796 {
1649 | background-color: var(--background-primary);
1650 | border: unset;
1651 | }
1652 | .container__0f711 {
1653 | background-color: var(--background-secondary);
1654 | }
1655 | }
1656 |
1657 | /* stupid header bars */
1658 | .container_d08938,
1659 | .outerContainer_e1147e,
1660 | .applicationStore_f07d62,
1661 | .libraryHeader__5a895,
1662 | .chat_f75fb0:has(.pageBody__41ed7) {
1663 | z-index: 102;
1664 | }
1665 |
1666 | .changelog_eae0ef,
1667 | .safetyChecklist_eae0ef {
1668 | background-color: var(--background-secondary);
1669 | }
1670 | .auditLog__43dab {
1671 | background-color: rgba(32, 34, 37, 0.3);
1672 | padding: unset;
1673 | border-radius: 3px;
1674 | border-color: #202225;
1675 | .headerClickable__43dab {
1676 | padding: 10px 20px 10px 10px;
1677 | }
1678 | .headerExpanded__43dab {
1679 | background-color: rgba(32, 34, 37, 0.3);
1680 | }
1681 | .divider__43dab {
1682 | background-color: var(--background-nested-floating);
1683 | }
1684 | }
1685 | .footerPlaceholder__98b95 {
1686 | .card_dc2e44 {
1687 | border-color: var(--background-secondary-alt);
1688 | border-radius: 5px;
1689 | }
1690 | }
1691 |
1692 | /* the pin broke */
1693 | .primaryButton__468a6,
1694 | .secondaryButton__468a6 {
1695 | flex: 1 1 45%;
1696 | }
1697 | .title__468a6,
1698 | .body__468a6 {
1699 | text-align: center;
1700 | }
1701 | .modalContent__468a6 {
1702 | padding-bottom: 20px;
1703 | }
1704 | .form__468a6:has(.alignCenter_abf706) .separator__49fc1 {
1705 | box-shadow: unset;
1706 | align-self: center;
1707 | }
1708 | .form__468a6:has(.alignCenter_abf706) .footer__49fc1 .primaryButton__468a6.sizeMedium__201d5 {
1709 | height: 50px;
1710 | }
1711 | .title__468a6.defaultColor__5345c.heading-lg\/semibold_cf4812.defaultColor__4bd52 {
1712 | align-self: center;
1713 | }
1714 |
1715 | /* quick switcher */
1716 | .quickswitcher_ac6cb0 {
1717 | background-color: var(--background-secondary);
1718 | box-shadow: 0 2px 10px var(--opacity-black-20), 0 0 0 1px #1c242b99;
1719 | border: unset;
1720 | .input_ac6cb0 {
1721 | background-color: var(--deprecated-quickswitcher-input-background);
1722 | border: none;
1723 | border-radius: 5px;
1724 | box-shadow: var(--elevation-high);
1725 | }
1726 | .input_ac6cb0::placeholder {
1727 | font-weight: 600;
1728 | color: #dcddde;
1729 | opacity: 0.5;
1730 | }
1731 | }
1732 |
1733 | /* server banner images */
1734 | .bannerImage_f37cb1, .bannerImg_f37cb1 {
1735 | width: 240px;
1736 | aspect-ratio: unset;
1737 | }
1738 | }
1739 |
1740 | :where(.visual-refresh) .item__001a7,
1741 | :where(.visual-refresh) .item__001a7[aria-checked="true"],
1742 | :where(.visual-refresh) .itemFilled__001a7[aria-checked="true"],
1743 | :where(.visual-refresh) .radioBar__001a7 {
1744 | border-radius: 5px;
1745 | }
1746 | /*ttitle bar. and stufuff. i guess*/
1747 | .bar_c38106:not(.systemBar_c38106):not(:has(.channelTabs-trailing)) {
1748 | padding: 0 12px 0 !important;
1749 | height: 50px;
1750 | margin-top: -33px;
1751 | }
1752 | .bar_c38106 .title_c38106 {
1753 | text-align: start;
1754 | display: block;
1755 | position: absolute;
1756 | margin-bottom: 30px;
1757 | 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");
1758 | background-repeat: no-repeat;
1759 | transform: translateY(40px) translateX(12px) scale(1.01);
1760 | width: 52px;
1761 | .text-sm\/medium_cf4812 {
1762 | display: none;
1763 | }
1764 | svg {
1765 | display: none;
1766 | }
1767 | .guildIcon__85643 {
1768 | display: none;
1769 | }
1770 | }
1771 | .bar_c38106 .trailing_c38106 {
1772 | top: 51px;
1773 | gap: 8px;
1774 | z-index: 102;
1775 | }
1776 | .bar_c38106 .channelTabs-trailing .trailing_c38106 {
1777 | top: 44px;
1778 | right: 10px;
1779 | }
1780 | .channelTabs-trailing .winButtons_c38106 {
1781 | position: absolute;
1782 | top: -53px;
1783 | right: 6px;
1784 | & .winButton_c38106 {
1785 | width: var(--custom-app-top-bar-height);
1786 | height: var(--custom-app-top-bar-height);
1787 | padding-left: 10px;
1788 | padding-right: 10px;
1789 | }
1790 | }
1791 | #channelTabs-settingsMenu {
1792 | position: relative;
1793 | right: 20px;
1794 | }
1795 | .container__01ae2 > .container__9293f {
1796 | z-index: 102;
1797 | }
1798 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f {
1799 | width: 30px;
1800 | height: 30px;
1801 | border-radius: 4px;
1802 | }
1803 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f .icon__9293f {
1804 | width: 24px;
1805 | height: 24px;
1806 | }
1807 |
1808 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f.selected__9293f .icon__9293f {
1809 | opacity: 1;
1810 | }
1811 | .bar_c38106 .trailing_c38106 .iconWrapper__9293f > svg > foreignObject {
1812 | x: -2px;
1813 | y: -2px;
1814 | mask: none !important;
1815 | }
1816 |
1817 | html .bar_c38106 {
1818 | top: 0;
1819 | right: 0;
1820 | z-index: 102;
1821 | }
1822 | .inviteToolbar__133bf > .clickable__9293f.iconWrapper__9293f {
1823 | right: 90px;
1824 | flex-wrap: wrap;
1825 | }
1826 | .inviteToolbar__133bf .iconWrapper__9293f:after {
1827 | border-left: 1px solid var(--border-subtle);
1828 | content: "";
1829 | margin-left: 55px;
1830 | margin-top: -29px;
1831 | height: calc(var(--custom-app-top-bar-height) - var(--space-12));
1832 | }
1833 | .winButtons_c38106 {
1834 | position: absolute;
1835 | gap: unset;
1836 | justify-content: center;
1837 | bottom: 35px;
1838 | left: -12px;
1839 | z-index: 3001;
1840 | -webkit-app-region: no-drag !important;
1841 | .winButton_c38106 {
1842 | align-items: center;
1843 | width: 28px;
1844 | height: 23px;
1845 | }
1846 | }
1847 | .winButtonsWithDivider_c38106:before {
1848 | border: unset;
1849 | }
1850 | .systemBar_c38106 {
1851 | background-color: var(--background-tertiary);
1852 | min-height: 22px;
1853 | .winButtons_c38106 {
1854 | bottom: 39px;
1855 | left: -84px;
1856 | }
1857 | .platform-linux & {
1858 | display: none;
1859 | }
1860 | }
1861 | .channelTabs-tabContainer div {
1862 | margin-bottom: 0 !important;
1863 | }
1864 | /* server list */
1865 | .base_c48ade .sidebar_c48ade > .guilds_c48ade {
1866 | width: 72px;
1867 | .scroller_ef3116 {
1868 | padding-top: 2px;
1869 | gap: 0px !important;
1870 | ul.stack_dbd263 {
1871 | height: auto !important;
1872 | }
1873 | }
1874 | .listItem__650eb:has(.guildSeparator__252b6) {
1875 | margin: 6px 0 8px 0;
1876 | }
1877 | .listItem__650eb {
1878 | margin: 0 0 0px;
1879 | }
1880 | .guildSeparator__252b6 {
1881 | height: 2px;
1882 | }
1883 | .folderIcon__48112 {
1884 | margin-top: 0px;
1885 | margin-left: -1px;
1886 | & svg {
1887 | width: 24px;
1888 | height: 24px;
1889 | }
1890 | }
1891 | }
1892 | .folderGroup__48112 {
1893 | --custom-folder-preview-padding: 6px;
1894 | --custom-folder-color: #7289da;
1895 | }
1896 | .folderGroup__48112:not(.isExpanded__48112) .folderIcon__48112 svg {
1897 | display: none;
1898 | }
1899 | .folderGroupBackground__48112 {
1900 | left: 11px;
1901 | width: 48px;
1902 | bottom: 4px;
1903 | border-radius: 16px 16px 25px 25px;
1904 | background: var(--background-modifier-accent);
1905 | border: none;
1906 | }
1907 | .folderIconWrapper__48112 {
1908 | width: 48px;
1909 | height: 48px;
1910 | overflow: hidden;
1911 | border-radius: 16px;
1912 | --bg-mod-subtle: rgba(114, 137, 218, 0.4) !important;
1913 | }
1914 | .expandedFolderIconWrapper__48112 {
1915 | margin: 0;
1916 | width: 48px;
1917 | height: 48px;
1918 | }
1919 | .folderGroup__48112:is(.isExpanded__48112) .folderPreviewWrapper__48112 {
1920 | display: none;
1921 | }
1922 | .folderPreviewGuildIcon__48112 {
1923 | border-radius: 32px !important;
1924 | }
1925 |
1926 | .listItem__650eb:has(.circleIcon__5bc7e) {
1927 | margin: 6px 0 0 !important;
1928 | .circleIconButton__5bc7e {
1929 | border-radius: 50%;
1930 | width: 48px;
1931 | height: 48px;
1932 | }
1933 | }
1934 | .guildsError_e8d03f {
1935 | width: 48px;
1936 | height: 48px;
1937 | background: (rgba(240, 71, 71, 0.1));
1938 | border-color: var(--red);
1939 | &:hover {
1940 | background: var(--red);
1941 | }
1942 | }
1943 | .mention__3b95d {
1944 | box-sizing: border-box;
1945 | opacity: 0.9;
1946 | border: unset;
1947 | box-shadow: unset;
1948 | right: 1px;
1949 | }
1950 |
1951 | .sidebar_c48ade:after {
1952 | display: none;
1953 | }
1954 |
1955 | /* fix unread dm gap */
1956 | .stack_dbd263#guild-list-unread-dms {
1957 | gap: 16px !important;
1958 | padding-bottom: 10px !important;
1959 | }
1960 |
1961 | /* hides left sidebar when fullscreen mode */
1962 | .base_c48ade[data-fullscreen="true"] {
1963 | .sidebar_c48ade {
1964 | display: none;
1965 | }
1966 | }
1967 |
1968 | .spriteContainer__04eed {
1969 | --custom-emoji-sprite-size: 24px !important;
1970 | }
1971 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------