├── .gitignore
├── LICENCE
├── README.md
├── _variables.scss
├── app.scss
├── assets
├── banner.png
├── icon.png
├── modal.png
├── preview.png
└── status_picker.png
├── betterdiscord
├── app.css
└── couve.theme.css
└── stuff
├── _channel-bar.scss
├── _channel-list.scss
├── _chat.scss
├── _friends.scss
├── _member-list.scss
├── _other.scss
├── _plugins_support.scss
├── _server-list.scss
├── _settings.scss
└── _user-area.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | prepros.config
2 | .vscode
3 | .prettierignore
4 | node_modules
5 | .parcel-cache
6 | dist
7 | /.idea/
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) [year] [fullname]
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
18 |
19 | ## 📥 Installation
20 |
21 |
22 |
23 |

24 |
BetterDiscord
25 |
Open Settings > Themes > Themes folder and copy the file downloaded here
26 |
27 |
28 |
29 |

30 |
Vencord
31 |
Copy https://nyri4.github.io/Couve/betterdiscord/couve.theme.css
into the box in Settings > Themes > Themes tab
32 |
33 |
34 | ## 🖌️ Customization
35 |
36 |
37 |
38 |

39 |
BetterDiscord
40 |
Open Settings > Themes > Themes folder and open couve.theme.css
41 |
42 |
43 |
44 |

45 |
Vencord
46 |
You need to have the theme in local, not online, then same steps as BetterDiscord
47 |
48 |
49 | ## 🫰 Credits
50 |
51 | Of course all credits goes to abUwUser/A user, the original creator of this theme and AAGaming that maintained the theme, see his github profile [here](https://github.com/abUwUser)
--------------------------------------------------------------------------------
/_variables.scss:
--------------------------------------------------------------------------------
1 | @use "app.scss";
2 |
3 | // ==> User vars <==
4 |
5 | // Settings
6 | :root {
7 | --version: "2.3.0";
8 |
9 | // Colors
10 | --main-color: #419e85;
11 |
12 | // Borders
13 | --avatar-radius: 8px;
14 | }
15 |
16 | // Dark/Light vars
17 | .theme-dark {
18 | // BGs
19 | --background-primary: #252a3e;
20 | --background-secondary: #1e2337;
21 | --background-secondary-alt: #1c2438;
22 | --background-secondary-alt-alt: #1b1d31;
23 | --background-tertiary: #060c24;
24 |
25 | --deprecated-store-bg: var(--background-primary);
26 | --background-floating: var(--background-secondary);
27 | --background-mobile-primary: var(--background-primary);
28 | --activity-card-background: var(--background-secondary);
29 | --input-background: var(--background-secondary);
30 | --modal-background: var(--background-primary);
31 |
32 | --colortransparency: #0003;
33 |
34 | // Cards
35 | --card: #212332;
36 |
37 | // Other stuff
38 | --textcolor: #fff;
39 | --epicshadow1: #fff3;
40 |
41 | // Font
42 | --font-display: var(--font-primary) !important;
43 | }
44 |
45 | .theme-light {
46 | // BGs
47 | --background-primary: #fafafa;
48 | --background-secondary: #f7f7f7;
49 | --background-secondary-alt: #fff;
50 | --background-secondary-alt-alt: #eee;
51 | --background-tertiary: #fff;
52 |
53 | --deprecated-store-bg: var(--background-primary);
54 | --background-floating: var(--background-secondary);
55 | --background-mobile-primary: var(--background-primary);
56 | --activity-card-background: var(--background-secondary);
57 | --modal-background: var(--background-primary);
58 |
59 | --colortransparency: #0001;
60 |
61 | // Cards
62 | --card: #aaaaaa;
63 |
64 | // Other stuff
65 | --textcolor: #000;
66 | --epicshadow1: #0003;
67 | }
--------------------------------------------------------------------------------
/app.scss:
--------------------------------------------------------------------------------
1 | @forward "stuff/chat";
2 | @forward "stuff/server-list";
3 | @forward "stuff/channel-list";
4 | @forward "stuff/channel-bar";
5 | @forward "stuff/member-list";
6 | @forward "stuff/settings";
7 | @forward "stuff/user-area";
8 | @forward "stuff/friends";
9 | @forward "stuff/other";
10 | @forward "stuff/plugins_support";
11 |
12 | // Premium shit
13 | @import url("https://nyri4.github.io/donators/donators.css");
14 |
15 | // Font Importing
16 | @import url("https://fonts.googleapis.com/css2?family=Material+Icons");
--------------------------------------------------------------------------------
/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NYRI4/Couve/13216f9811c976c516f799afacff3e824161918e/assets/banner.png
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NYRI4/Couve/13216f9811c976c516f799afacff3e824161918e/assets/icon.png
--------------------------------------------------------------------------------
/assets/modal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NYRI4/Couve/13216f9811c976c516f799afacff3e824161918e/assets/modal.png
--------------------------------------------------------------------------------
/assets/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NYRI4/Couve/13216f9811c976c516f799afacff3e824161918e/assets/preview.png
--------------------------------------------------------------------------------
/assets/status_picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NYRI4/Couve/13216f9811c976c516f799afacff3e824161918e/assets/status_picker.png
--------------------------------------------------------------------------------
/betterdiscord/app.css:
--------------------------------------------------------------------------------
1 | @import url("https://nyri4.github.io/donators/donators.css");
2 | @import url("https://fonts.googleapis.com/css2?family=Material+Icons");
3 | :root .messagesWrapper_e2e187 {
4 | flex-direction: column;
5 | }
6 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca {
7 | padding-left: 50px;
8 | }
9 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca.groupStart_d5deea .contents_f9f2ca::after {
10 | left: 48px;
11 | width: 30px;
12 | height: 30px;
13 | }
14 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .avatar_f9f2ca {
15 | position: relative;
16 | left: -2px;
17 | width: 30px;
18 | height: 30px;
19 | border-radius: var(--avatar-radius);
20 | }
21 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .avatarDecoration_f9f2ca {
22 | left: 43px;
23 | width: 40px;
24 | height: 40px;
25 | }
26 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .header_f9f2ca {
27 | left: 38px;
28 | margin-top: -30px;
29 | margin-bottom: 10px;
30 | width: 100%;
31 | }
32 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .timestamp_f9f2ca.alt_f9f2ca {
33 | position: absolute;
34 | font-size: 0.6875rem !important;
35 | right: 10px;
36 | left: unset;
37 | opacity: 0;
38 | }
39 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca:hover .timestamp_f9f2ca {
40 | opacity: 1;
41 | }
42 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .iconContainer_d76df7 {
43 | position: unset;
44 | width: unset;
45 | margin-right: 10px;
46 | }
47 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .repliedMessage_f9f2ca {
48 | margin-left: 48px;
49 | }
50 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .repliedMessage_f9f2ca .replyAvatar_f9f2ca {
51 | border-radius: calc(var(--avatar-radius) - 3px);
52 | }
53 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .blockquoteContainer_f8f345 .blockquoteDivider_f8f345 {
54 | display: none;
55 | }
56 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .blockquoteContainer_f8f345 blockquote {
57 | padding: 12px;
58 | background: var(--background-secondary);
59 | border-radius: 4px;
60 | width: 100%;
61 | }
62 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .shiki-container {
63 | background-color: transparent;
64 | }
65 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca .shiki-container .shiki-root {
66 | background-color: var(--background-secondary) !important;
67 | border-radius: 8px;
68 | overflow: hidden;
69 | }
70 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca.hasThread_f9f2ca::after {
71 | top: 2.5rem;
72 | left: 3.5rem;
73 | }
74 | :root .messagesWrapper_e2e187 .cozy_f9f2ca.wrapper_f9f2ca.hasThread_f9f2ca .container_c15230 {
75 | margin-left: 48px;
76 | border-radius: 8px;
77 | }
78 | :root .messagesWrapper_e2e187 .scroller_e2e187::-webkit-scrollbar {
79 | display: none;
80 | }
81 | :root .wrapper_f7e168 {
82 | border: none;
83 | box-shadow: none;
84 | background: var(--background-secondary);
85 | }
86 | :root .wrapper_f7e168:hover {
87 | box-shadow: none;
88 | }
89 | :root .botTagRegular_a9e77f {
90 | border-radius: 5px;
91 | background: var(--main-color);
92 | }
93 | :root .botTagOP_e48ddb {
94 | color: white;
95 | }
96 | :root .wrapper_d4fa29 {
97 | background: transparent !important;
98 | position: relative;
99 | color: var(--main-color) !important;
100 | }
101 | :root .wrapper_d4fa29.mention {
102 | border-radius: 5px;
103 | }
104 | :root .wrapper_d4fa29:hover::after {
105 | opacity: 0.2;
106 | }
107 | :root .wrapper_d4fa29::after {
108 | content: "";
109 | position: absolute;
110 | top: 0;
111 | left: 0;
112 | width: 100%;
113 | height: 100%;
114 | background-color: var(--main-color);
115 | opacity: 0.08;
116 | border-radius: 5px;
117 | transition: opacity 200ms;
118 | pointer-events: none;
119 | }
120 | :root .newMessagesBar_cf58b5 {
121 | position: static;
122 | margin: 5px 40px 0 40px;
123 | padding: 5px;
124 | background: var(--background-secondary);
125 | border-radius: 7px;
126 | opacity: 1;
127 | }
128 | :root .newMessagesBar_cf58b5 .barButtonMain_cf58b5 {
129 | opacity: 0.6;
130 | }
131 | :root .newMessagesBar_cf58b5 .barButtonAlt_cf58b5 {
132 | display: none;
133 | }
134 | :root .divider_c2654d {
135 | margin: 0 56px;
136 | border: none;
137 | height: unset;
138 | background: transparent;
139 | }
140 | :root .divider_c2654d.isUnread_c2654d:not(.hasContent_c2654d) {
141 | margin: 10px 47px;
142 | margin-top: 5px !important;
143 | margin-bottom: 5px !important;
144 | }
145 | :root .divider_c2654d .content_c2654d, :root .divider_c2654d#---new-messages-bar .unreadPill_c2654d {
146 | background: var(--background-secondary);
147 | width: 100%;
148 | padding: 10px;
149 | text-align: center;
150 | border-radius: 5px;
151 | height: unset;
152 | }
153 | :root .divider_c2654d .unreadPill_c2654d {
154 | position: relative;
155 | color: #f04747;
156 | top: 0;
157 | }
158 | :root .divider_c2654d .unreadPill_c2654d .unreadPillCap_c2654d {
159 | display: none;
160 | }
161 | :root .divider_c2654d#---new-messages-bar .content_c2654d {
162 | border-radius: 5px 0 0 5px;
163 | }
164 | :root .divider_c2654d#---new-messages-bar .content_c2654d + .unreadPill_c2654d {
165 | border-radius: 0 5px 5px 0;
166 | padding-top: 12px;
167 | padding-bottom: 12px;
168 | }
169 | :root .jumpToPresentBar_cf58b5 {
170 | bottom: 15px;
171 | left: unset;
172 | height: 40px;
173 | padding-bottom: 0;
174 | background: var(--background-secondary);
175 | border-radius: 8px;
176 | }
177 | :root .jumpToPresentBar_cf58b5 .barButtonAlt_cf58b5 {
178 | text-indent: -10000px;
179 | font-size: 0;
180 | padding: 0 6px;
181 | }
182 | :root .jumpToPresentBar_cf58b5 .barButtonAlt_cf58b5 .barButtonIcon_cf58b5 {
183 | margin-left: 0;
184 | width: 28px;
185 | height: 28px;
186 | }
187 | :root .jumpToPresentBar_cf58b5 .barButtonMain_cf58b5 {
188 | display: none;
189 | }
190 | :root .jumpToPresentBar_cf58b5 .spinner_cf58b5 {
191 | padding: 0 5px;
192 | }
193 | :root .resizeHandle_af5dbb::before {
194 | content: "";
195 | position: fixed;
196 | top: 0;
197 | left: 0;
198 | width: 100%;
199 | height: calc(100% + 36px);
200 | background: rgba(0, 0, 0, 0.3333333333);
201 | border-radius: 8px;
202 | opacity: 0;
203 | pointer-events: none;
204 | transition: opacity 0.3s;
205 | }
206 | :root .resizeHandle_af5dbb:active::before {
207 | opacity: 1;
208 | pointer-events: all;
209 | }
210 | :root .navButtonActive_af5dbb {
211 | background: var(--background-primary);
212 | }
213 | :root #emoji-picker-tab-panel {
214 | border-radius: 8px 8px 0 0;
215 | }
216 | :root #emoji-picker-tab-panel .header_c6ee36 {
217 | box-shadow: none;
218 | }
219 | :root #emoji-picker-tab-panel .premiumPromo_ca9b56 {
220 | background: var(--background-secondary);
221 | opacity: 1;
222 | animation: fade 0.3s ease, zoom 0.3s ease;
223 | }
224 | :root #emoji-picker-tab-panel.wrapper_c6ee36 {
225 | margin-bottom: 8px;
226 | }
227 | :root #emoji-picker-tab-panel .container_effbe2,
228 | :root #emoji-picker-tab-panel .emojiItem_fbfedd.emojiItemSelected_fbfedd {
229 | background: var(--background-primary);
230 | }
231 | :root #emoji-picker-tab-panel .imageLoading_b000dd {
232 | background-image: none !important;
233 | background-color: var(--background-primary);
234 | border-radius: 8px;
235 | }
236 | :root #emoji-picker-tab-panel .inspector_c3120f {
237 | position: absolute;
238 | top: -50px;
239 | right: 0;
240 | padding: 0 8px;
241 | justify-content: end;
242 | width: unset;
243 | max-width: 220px;
244 | background: transparent;
245 | }
246 | :root #emoji-picker-tab-panel .diversitySelectorOptions_cce80d {
247 | background: var(--background-primary);
248 | border: none;
249 | }
250 | :root #emoji-picker-tab-panel:not(.emojiPickerInExpressionPicker-2nOwH8) .inspector_c3120f {
251 | position: absolute;
252 | top: unset;
253 | bottom: 0;
254 | right: 0;
255 | left: 48px;
256 | padding: 0 16px;
257 | max-width: unset;
258 | background: linear-gradient(transparent, var(--background-secondary));
259 | }
260 | :root #emoji-picker-tab-panel .wrapper_dc0b29 {
261 | background: var(--background-secondary);
262 | }
263 | :root #emoji-picker-tab-panel .wrapper_dc0b29 .scroller_d53d65::-webkit-scrollbar {
264 | display: none;
265 | }
266 | :root #emoji-picker-tab-panel .badgeLabel_c3120f {
267 | display: none;
268 | }
269 | :root .positionContainer_af5dbb {
270 | height: 414px;
271 | bottom: calc(100% - 8px);
272 | transform: translateZ(0);
273 | }
274 | :root .contentWrapper_af5dbb .header_b56bbc {
275 | box-shadow: none;
276 | }
277 | :root .contentWrapper_af5dbb .header_b56bbc .inner__999f6 {
278 | height: 34px;
279 | background: var(--background-primary);
280 | }
281 | :root .contentWrapper_af5dbb .header_b56bbc .inner__999f6 .iconLayout__67261 {
282 | width: 30px;
283 | height: 30px;
284 | }
285 | :root #sticker-picker-tab-panel .header_d8cdac {
286 | box-shadow: none;
287 | }
288 | :root #sticker-picker-tab-panel .container_effbe2 {
289 | background-color: var(--background-primary);
290 | }
291 | :root #sticker-picker-tab-panel .wrapper_dc0b29 {
292 | background: var(--background-secondary);
293 | }
294 | :root #sticker-picker-tab-panel .wrapper_dc0b29 .scroller_d53d65::-webkit-scrollbar {
295 | display: none;
296 | }
297 | :root .uploadModal_f82cc7 {
298 | background: var(--background-primary);
299 | box-shadow: unset;
300 | width: 1000px;
301 | height: 400px;
302 | border-radius: 15px;
303 | }
304 | :root .uploadModal_f82cc7 .inner_f82cc7 .comment_f82cc7,
305 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .description_f82cc7 {
306 | margin-left: 55%;
307 | margin-right: 30px;
308 | }
309 | :root .uploadModal_f82cc7 .inner_f82cc7 .comment_f82cc7 .label_f82cc7 {
310 | text-transform: unset;
311 | font-size: 12px;
312 | opacity: 0.8;
313 | }
314 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 {
315 | height: 75px;
316 | }
317 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .description_f82cc7 {
318 | margin-top: 15px;
319 | }
320 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .description_f82cc7 .filename_f82cc7 {
321 | font-weight: 550;
322 | }
323 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .icon_f82cc7 {
324 | background-color: var(--background-secondary);
325 | background-size: 70px;
326 | }
327 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .icon_f82cc7.video_f82cc7 {
328 | background-image: url(https://cdn.discordapp.com/attachments/539180316447997974/705623014334791720/videocam-white-18dp.svg);
329 | }
330 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .icon_f82cc7.acrobat_f82cc7 {
331 | background-image: url(https://cdn.discordapp.com/attachments/539180316447997974/705623972791975936/picture_as_pdf-white-18dp.svg);
332 | }
333 | :root .uploadModal_f82cc7 .footer_f82cc7 {
334 | background-color: transparent;
335 | box-shadow: unset;
336 | position: absolute;
337 | right: 20px;
338 | bottom: 10px;
339 | }
340 | :root .uploadModal_f82cc7 .checkboxWrapper_f6cde8 .checkbox_f6cde8 {
341 | opacity: 0;
342 | visibility: hidden;
343 | transition: 0.2s;
344 | }
345 | :root .uploadModal_f82cc7 .checkboxWrapper_f6cde8 .checkbox_f6cde8.checked_f6cde8::before {
346 | color: var(--textcolor);
347 | content: "visibility_off";
348 | }
349 | :root .uploadModal_f82cc7 .checkboxWrapper_f6cde8 .checkbox_f6cde8:hover,
350 | :root .uploadModal_f82cc7 .checkboxWrapper_f6cde8 .checkbox_f6cde8 .checked_f6cde8 {
351 | opacity: 1;
352 | }
353 | :root .uploadModal_f82cc7 .checkboxWrapper_f6cde8 .checkbox_f6cde8::before {
354 | content: "visibility";
355 | position: absolute;
356 | top: 0;
357 | left: 0;
358 | width: 100%;
359 | height: 100%;
360 | background: rgba(0, 0, 0, 0.5333333333);
361 | text-align: center;
362 | line-height: 350px;
363 | color: rgba(255, 255, 255, 0.4);
364 | font-size: 72px;
365 | font-family: "Material Icons", sans-serif;
366 | visibility: visible;
367 | border-radius: 19px;
368 | }
369 | :root .uploadModal_f82cc7 .labelForward_f6cde8 {
370 | display: none;
371 | }
372 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .icon_f82cc7.image_f82cc7,
373 | :root .uploadModal_f82cc7 .checkboxWrapper_f6cde8,
374 | :root .uploadModal_f82cc7 .inner_f82cc7 .file_f82cc7 .icon_f82cc7 {
375 | position: fixed;
376 | top: 20px;
377 | left: 10px;
378 | width: 48% !important;
379 | height: 350px !important;
380 | margin-top: 0 !important;
381 | margin-left: 16px !important;
382 | margin-right: 16px !important;
383 | box-shadow: unset;
384 | border-radius: 20px;
385 | }
386 | :root .uploadModal_f82cc7 .scrollableContainer_d0696b.webkit__8d35a {
387 | max-height: 215px;
388 | }
389 | :root .autocomplete_bcc24e {
390 | background: var(--background-secondary);
391 | bottom: calc(100% - 8px);
392 | border-radius: 8px 8px 0 0;
393 | }
394 | :root .autocomplete_bcc24e .categoryHeader_fe2299 {
395 | background-color: var(--background-tertiary);
396 | border-radius: 6px;
397 | }
398 | :root .autocomplete_bcc24e .categoryHeader_fe2299::after {
399 | content: none;
400 | }
401 | :root .autocomplete_bcc24e .contentTitle_bcc24e {
402 | color: var(--textcolor);
403 | }
404 | :root .autocomplete_bcc24e .scroller_d53d65 {
405 | overflow: visible !important;
406 | }
407 | :root .wrapperAudio_f316dd {
408 | background: var(--background-secondary);
409 | border: none;
410 | border-radius: 7px;
411 | padding: 0;
412 | }
413 | :root .wrapperAudio_f316dd .audioMetadata_f316dd {
414 | padding: 10px;
415 | }
416 | :root .wrapperAudio_f316dd .audioControls_f316dd {
417 | background: transparent;
418 | }
419 | :root .wrapperAudio_f316dd .audioControls_f316dd .mediaBarWrapper_f7877e:hover {
420 | box-shadow: none;
421 | }
422 | :root .wrapperAudio_f316dd .audioControls_f316dd .mediaBarWrapper_f7877e .mediaBarProgress_f7877e,
423 | :root .wrapperAudio_f316dd .audioControls_f316dd .mediaBarWrapper_f7877e .mediaBarProgress_f7877e:after,
424 | :root .wrapperAudio_f316dd .audioControls_f316dd .mediaBarWrapper_f7877e .mediaBarProgress_f7877e:before,
425 | :root .wrapperAudio_f316dd .audioControls_f316dd .mediaBarWrapper_f7877e .mediaBarGrabber_f7877e {
426 | background: var(--main-color) !important;
427 | }
428 | :root .embedFull_b0068a {
429 | width: calc(100% + 100px);
430 | max-width: unset !important;
431 | left: -50px;
432 | border-radius: 0;
433 | border-color: var(--background-secondary-alt-alt);
434 | position: relative;
435 | overflow: hidden;
436 | }
437 | :root .embedFull_b0068a .grid_b0068a {
438 | margin-left: 34px;
439 | margin-right: 12px;
440 | }
441 | :root .embedFull_b0068a .grid_b0068a .embedSuppressButton_b0068a {
442 | top: 12px;
443 | right: 12px;
444 | }
445 | :root .theme-light .embedFull_b0068a {
446 | background: var(--background-secondary-alt-alt);
447 | border-color: var(--card);
448 | }
449 | :root .wrapper_a71a1c {
450 | background: var(--background-secondary);
451 | border-radius: 10px;
452 | }
453 | :root .wrapper_a71a1c .header_a71a1c {
454 | display: none;
455 | }
456 | :root .wrapper_a71a1c .count_a71a1c {
457 | font-weight: 500;
458 | color: var(--textcolor);
459 | }
460 | :root .markup_f8f345 code {
461 | border: none;
462 | background: var(--colortransparency);
463 | border-radius: 10px;
464 | }
465 | :root .hljs .powercord-lines:after,
466 | :root .powercord-codeblock-lang {
467 | border: none;
468 | }
469 | :root .powercord-codeblock-lang {
470 | padding: 3px 10px;
471 | }
472 | :root .textContainer_d8e2d0,
473 | :root .footer_d8e2d0 {
474 | border: none;
475 | }
476 | :root .textContainer_d8e2d0 .scrollbar_c858ce::-webkit-scrollbar,
477 | :root .footer_d8e2d0 .scrollbar_c858ce::-webkit-scrollbar {
478 | display: none;
479 | }
480 | :root .textContainer_d8e2d0 {
481 | border-radius: 10px 10px 0 0;
482 | }
483 | :root .footer_d8e2d0 {
484 | border-radius: 0 0 10px 10px;
485 | }
486 | :root .spoilerText-27bIiA.hidden-3B-Rum,
487 | :root .spoilerText-27bIiA.hidden-3B-Rum:hover {
488 | background-color: var(--background-secondary);
489 | }
490 | :root .embedSpotify_b0068a {
491 | border-radius: 5px;
492 | }
493 | :root .invite_f61cb8 {
494 | background: var(--background-secondary);
495 | border: none;
496 | }
497 | :root .tile_ab47a1 {
498 | transform: translateZ(0);
499 | overflow: hidden;
500 | background: var(--background-secondary);
501 | }
502 | :root .tile_ab47a1:hover {
503 | background: var(--background-secondary-alt-alt);
504 | }
505 | :root .tile_ab47a1 .invalidPoop_ff31dd {
506 | background: var(--background-secondary-alt-alt);
507 | position: relative;
508 | }
509 | :root .tile_ab47a1 .invalidPoop_ff31dd::after {
510 | content: ">_<";
511 | animation: blink 2.5s;
512 | animation-iteration-count: infinite;
513 | font-size: 50px;
514 | color: var(--textcolor);
515 | position: absolute;
516 | top: 50%;
517 | left: 50%;
518 | transform: translate(-50%, -50%);
519 | }
520 | :root .tile_ab47a1 .description_ab47a1 {
521 | color: #fff;
522 | }
523 | :root .tile_ab47a1 .description_ab47a1 .tagline_ab47a1 {
524 | color: #eee;
525 | }
526 | :root .tile_ab47a1 .splash_cbd9b6 {
527 | content: "";
528 | position: fixed;
529 | top: 0;
530 | left: 0;
531 | width: 100%;
532 | height: 100%;
533 | background-image: inherit;
534 | background-repeat: no-repeat;
535 | background-size: cover;
536 | background-position: 50% 50%;
537 | z-index: -1;
538 | opacity: 0.3;
539 | filter: blur(20px);
540 | mask-image: linear-gradient(rgba(0, 0, 0, 0.7333333333), rgba(0, 0, 0, 0.7333333333));
541 | -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.7333333333), rgba(0, 0, 0, 0.7333333333));
542 | }
543 | :root .popoutTopLeft-3B0mFf.noArrow-2foL9g.noShadow-3pu20z {
544 | margin-bottom: 0;
545 | margin-top: 8px;
546 | }
547 | :root .attachment_b52bef {
548 | background: var(--background-secondary);
549 | border: none;
550 | border-radius: 7px;
551 | }
552 | :root .attachment_b52bef .progressBar-1T6LYX {
553 | border-radius: 0;
554 | background: #419e85 !important;
555 | }
556 | :root .scrollableContainer_d0696b,
557 | :root .wrapper_faf5ab {
558 | background: var(--background-secondary);
559 | }
560 | :root .scrollableContainer_d0696b .lookFilled-yCfaCM.colorPrimary-2AuQVo,
561 | :root .wrapper_faf5ab .lookFilled-yCfaCM.colorPrimary-2AuQVo {
562 | background-color: var(--main-color);
563 | }
564 | :root .attachButtonPlus_f298d4,
565 | :root .attachButton_f298d4:hover .attachButtonPlus_f298d4 {
566 | fill: var(--main-color);
567 | }
568 | :root .form_a7d72e:before {
569 | background: linear-gradient(180deg, transparent 0, var(--background-primary));
570 | }
571 | :root .typing_d7ebeb {
572 | z-index: 0;
573 | }
574 | :root .button_df39bd {
575 | background-color: var(--background-secondary);
576 | }
577 | :root .contentWrapper_f7506e {
578 | background-color: var(--background-primary);
579 | }
580 | :root .container_e5da8b, :root .clickable_b78bb6 {
581 | background-color: var(--background-secondary);
582 | }
583 | :root .container_c18ec9 {
584 | border-radius: 8px;
585 | }
586 | :root .message_ddcc45 {
587 | background: var(--background-secondary);
588 | box-shadow: none;
589 | }
590 | :root .reaction_f61c73 {
591 | background: var(--colortransparency);
592 | }
593 | :root .container_f2bfbb,
594 | :root .reactors_f2bfbb {
595 | background: var(--background-secondary);
596 | }
597 | :root .container_f2bfbb .scroller_f2bfbb,
598 | :root .reactors_f2bfbb .scroller_f2bfbb {
599 | background: var(--background-primary);
600 | }
601 | :root .container_a6d69a {
602 | background-color: var(--background-primary);
603 | }
604 | :root .container_a6d69a .tagsContainer_a6d69a button,
605 | :root .container_a6d69a .tagsContainer_a6d69a .tag_a6d69a {
606 | background-color: var(--background-secondary-alt-alt);
607 | }
608 | :root .container_a6d69a .mainCard_a6d69a {
609 | background-color: var(--background-secondary);
610 | }
611 | :root .container_a6d69a::-webkit-scrollbar {
612 | display: none;
613 | }
614 |
615 | :root .guilds_a4d4d9 {
616 | width: 90px;
617 | margin-top: -40px;
618 | }
619 | :root .guilds_a4d4d9.hidden_fea3ef {
620 | width: 0 !important;
621 | }
622 | :root .guilds_a4d4d9::before {
623 | content: "";
624 | position: absolute;
625 | bottom: 135px;
626 | left: 0;
627 | z-index: 1;
628 | width: 90px;
629 | height: 100px;
630 | background: linear-gradient(360deg, var(--background-tertiary), transparent);
631 | pointer-events: none;
632 | }
633 | :root .guilds_a4d4d9 .scroller_fea3ef {
634 | padding: 30px 0;
635 | }
636 | :root .guilds_a4d4d9 .scroller_fea3ef > .tutorialContainer_c96c45:first-child > .listItem_c96c45 .childWrapper_a6ce15 {
637 | background: var(--main-color);
638 | color: #fff;
639 | }
640 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 {
641 | width: 90px;
642 | margin: 0 0 12px;
643 | }
644 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .wrapper_c5f96a,
645 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .svg_c5f96a {
646 | width: 42px;
647 | height: 42px;
648 | }
649 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .upperBadge_c5f96a {
650 | top: 2px;
651 | right: -1px;
652 | }
653 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .lowerBadge_c5f96a {
654 | bottom: 4px;
655 | right: -5px;
656 | }
657 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .lowerBadge_c5f96a .numberBadge_df8943 {
658 | min-width: 25px;
659 | background: var(--main-color) !important;
660 | font-size: 8px;
661 | }
662 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .lowerBadge_c5f96a:last-child .numberBadge_df8943 {
663 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5333333333);
664 | }
665 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .wrapper__8436d.selected_ae80f7 .childWrapper_a6ce15, :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .wrapper__8436d:hover .childWrapper_a6ce15 {
666 | background: var(--main-color);
667 | }
668 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 .wrapper__8436d .childWrapper_a6ce15 {
669 | background: var(--background-secondary);
670 | }
671 | :root .guilds_a4d4d9 .scroller_fea3ef .listItem_c96c45 defs g:last-child {
672 | display: none;
673 | }
674 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 {
675 | width: 90px;
676 | }
677 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .expandedFolderBackground_bc7085 {
678 | --custom-folder-item-guild-icon-margin: 12px !important;
679 | left: 21px;
680 | }
681 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .expandedFolderBackground_bc7085 ~ ul .wrapper_c5f96a {
682 | width: 42px;
683 | height: 42px;
684 | border-radius: 50%;
685 | overflow: hidden;
686 | }
687 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .folderIconWrapper_bc7085 {
688 | transition: border-radius 200ms;
689 | }
690 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .folderIconWrapper_bc7085:hover {
691 | border-radius: 12px;
692 | }
693 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .wrapper_c5f96a {
694 | width: 42px;
695 | }
696 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .wrapper_c5f96a > svg > foreignObject {
697 | mask: none;
698 | }
699 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .wrapper_c5f96a > svg > foreignObject .folder_bc7085 {
700 | background: transparent;
701 | }
702 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapper_bc7085 .wrapper_c5f96a > svg > foreignObject.expanded .expandedFolderBackground_bc7085 {
703 | background: var(--background-secondary);
704 | }
705 | :root .guilds_a4d4d9 .scroller_fea3ef .circleIconButton_db6521 {
706 | border-radius: 999px;
707 | border: dashed 2px var(--epicshadow1);
708 | background: transparent;
709 | color: var(--epicshadow1);
710 | transition: all 0.2s;
711 | }
712 | :root .guilds_a4d4d9 .scroller_fea3ef .tutorialContainer_c96c45:hover .circleIconButton_db6521, :root .guilds_a4d4d9 .scroller_fea3ef .tutorialContainer_c96c45 + .listItem_c96c45:hover .circleIconButton_db6521 {
713 | background: transparent;
714 | color: var(--main-color);
715 | border-color: var(--main-color);
716 | }
717 | :root .guilds_a4d4d9 .scroller_fea3ef .tutorialContainer_c96c45 svg > foreignObject, :root .guilds_a4d4d9 .scroller_fea3ef .tutorialContainer_c96c45 + .listItem_c96c45 svg > foreignObject {
718 | mask: none;
719 | }
720 | :root .guilds_a4d4d9 .scroller_fea3ef .wrapperSimple_c5f96a foreignObject {
721 | mask: none;
722 | }
723 | :root .guilds_a4d4d9 .scroller_fea3ef > div:last-child {
724 | margin-bottom: 80px;
725 | }
726 | :root .guilds_a4d4d9 .scroller_fea3ef::-webkit-scrollbar {
727 | display: none;
728 | }
729 | :root .guilds_a4d4d9 .footer_aa1bff {
730 | width: 100%;
731 | padding-bottom: 70px;
732 | }
733 | :root .guilds_a4d4d9 .footer_aa1bff .listItem_c96c45 {
734 | width: 100%;
735 | }
736 | :root .guilds_a4d4d9 .mention_edf32f {
737 | height: 100%;
738 | background: linear-gradient(360deg, transparent, var(--background-tertiary));
739 | transition: color 0.2s;
740 | opacity: 1;
741 | text-transform: capitalize;
742 | color: var(--textcolor);
743 | animation: fade 0.5s;
744 | border-radius: 0;
745 | }
746 | :root .guilds_a4d4d9 .mention_edf32f:hover {
747 | color: var(--main-color);
748 | }
749 | :root .guilds_a4d4d9 .unreadMentionsIndicatorBottom_fea3ef .mention_edf32f {
750 | background: transparent;
751 | }
752 | :root .guilds_a4d4d9 .unreadMentionsIndicatorTop_fea3ef,
753 | :root .guilds_a4d4d9 .unreadMentionsIndicatorBottom_fea3ef {
754 | width: 100%;
755 | height: 30px;
756 | padding: 0;
757 | }
758 |
759 | :root .header_fd6364 {
760 | box-shadow: none;
761 | padding: 25px;
762 | border-radius: 8px;
763 | background: transparent !important;
764 | }
765 | :root #channels div[style="height: 12px;"], :root #channels div[style="height: 16px;"] {
766 | display: none;
767 | }
768 | :root .channelNotice-tO6Tus,
769 | :root .channelNotice-3DDmsB {
770 | box-shadow: none;
771 | width: 170px;
772 | background: transparent;
773 | margin: 15px;
774 | padding: 20px;
775 | background: var(--background-primary);
776 | border-radius: 10px;
777 | position: absolute;
778 | top: 0;
779 | z-index: 10;
780 | height: 60px;
781 | transition: height 400ms;
782 | }
783 | :root .channelNotice-tO6Tus::before,
784 | :root .channelNotice-3DDmsB::before {
785 | content: "announcement";
786 | position: absolute;
787 | top: 50%;
788 | left: 50%;
789 | transform: translateX(-50%) translateY(-50%);
790 | opacity: 1;
791 | color: var(--textcolor);
792 | z-index: 1;
793 | font-size: 24px;
794 | font-family: "Material Icons", sans-serif;
795 | transition: opacity 200ms;
796 | }
797 | :root .channelNotice-tO6Tus .message-3KLVy1,
798 | :root .channelNotice-3DDmsB .message-3KLVy1 {
799 | opacity: 0;
800 | pointer-events: none;
801 | transition: opacity 400ms;
802 | position: absolute;
803 | top: 50%;
804 | left: 50%;
805 | transform: translateY(-50%) translateX(-50%);
806 | width: 100%;
807 | margin-bottom: auto;
808 | }
809 | :root .channelNotice-tO6Tus .message-3KLVy1 .btn-38SvSS,
810 | :root .channelNotice-tO6Tus .message-3KLVy1 .btn-38SvSS:hover,
811 | :root .channelNotice-3DDmsB .message-3KLVy1 .btn-38SvSS,
812 | :root .channelNotice-3DDmsB .message-3KLVy1 .btn-38SvSS:hover {
813 | background: var(--background-secondary-alt-alt);
814 | margin: 0 auto;
815 | margin-top: 20px;
816 | z-index: 1;
817 | width: unset;
818 | }
819 | :root .channelNotice-tO6Tus .message-3KLVy1 > div,
820 | :root .channelNotice-3DDmsB .message-3KLVy1 > div {
821 | margin-bottom: auto;
822 | }
823 | :root .channelNotice-tO6Tus .message-39hdqk,
824 | :root .channelNotice-3DDmsB .message-39hdqk {
825 | opacity: 0;
826 | margin-top: 30px;
827 | pointer-events: none;
828 | width: calc(100% + 20px);
829 | transition: opacity 400ms;
830 | }
831 | :root .channelNotice-tO6Tus .button_dd4f85,
832 | :root .channelNotice-3DDmsB .button_dd4f85 {
833 | background: var(--background-secondary-alt-alt);
834 | opacity: 0;
835 | pointer-events: none;
836 | transition: opacity 400ms;
837 | }
838 | :root .channelNotice-tO6Tus:hover,
839 | :root .channelNotice-3DDmsB:hover {
840 | height: 160px;
841 | }
842 | :root .channelNotice-tO6Tus:hover .message-3KLVy1,
843 | :root .channelNotice-tO6Tus:hover .message-39hdqk,
844 | :root .channelNotice-3DDmsB:hover .message-3KLVy1,
845 | :root .channelNotice-3DDmsB:hover .message-39hdqk {
846 | pointer-events: all;
847 | opacity: 1;
848 | }
849 | :root .channelNotice-tO6Tus:hover::before,
850 | :root .channelNotice-3DDmsB:hover::before {
851 | opacity: 0;
852 | }
853 | :root .channelNotice-tO6Tus:hover .button_dd4f85,
854 | :root .channelNotice-3DDmsB:hover .button_dd4f85 {
855 | opacity: 1;
856 | pointer-events: all;
857 | }
858 | :root .wrapper_a08117 {
859 | padding: 0 22px;
860 | }
861 | :root .container_a5ad5c {
862 | color: var(--textcolor);
863 | text-transform: unset;
864 | font-size: 14px;
865 | }
866 | :root .icon_a08117 {
867 | display: none;
868 | }
869 | :root .wrapper_d8bfb3 {
870 | height: 30px;
871 | margin: 0;
872 | }
873 | :root .wrapper_d8bfb3 .link_d8bfb3 {
874 | padding: 6px 20px;
875 | border-radius: 0;
876 | }
877 | :root .unread_d8bfb3 {
878 | left: 0;
879 | }
880 | :root .typeThread_d8bfb3 .name_d8bfb3 {
881 | padding-left: 28px;
882 | }
883 | :root .containerPadding_eba0ba {
884 | padding: 0;
885 | margin: 0 0 4px 0;
886 | }
887 | :root .containerPadding_eba0ba .bar_eba0ba {
888 | padding: 8px;
889 | border-radius: 4px;
890 | background: var(--main-color);
891 | }
892 | :root .containerPadding_eba0ba .bar_eba0ba .barText_eba0ba, :root .containerPadding_eba0ba .bar_eba0ba .unreadIcon_eba0ba {
893 | color: white !important;
894 | }
895 | :root .scroller_c43953::-webkit-scrollbar,
896 | :root .scroller_fea3ef::-webkit-scrollbar,
897 | :root #channels::-webkit-scrollbar {
898 | display: none;
899 | }
900 | :root .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 {
901 | background-color: var(--background-primary);
902 | margin: 12px;
903 | padding: 0;
904 | border-radius: 12px;
905 | }
906 | :root .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 .draggable_ac3629, :root .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 .voiceUser_d80634 {
907 | height: 40px;
908 | }
909 | :root .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 .content_d80634 {
910 | padding-left: 2px;
911 | height: 100%;
912 | border-radius: 0;
913 | }
914 | :root .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 .content_d80634 .avatar_d80634 {
915 | border-radius: var(--avatar-radius);
916 | }
917 | :root .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 .draggable_ac3629:first-child .content_d80634 {
918 | border-radius: 12px 12px 0 0;
919 | }
920 | :root .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 .draggable_ac3629:last-child .content_d80634 {
921 | border-radius: 0 0 12px 12px;
922 | }
923 |
924 | :root .toolbar_fc4f04 > :last-child[href="https://support.discord.com"],
925 | :root .searchLearnMore_b0286e {
926 | display: none;
927 | }
928 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) {
929 | z-index: 1;
930 | background: transparent;
931 | width: calc(100% - 240px);
932 | }
933 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .toolbar_fc4f04,
934 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .topic_bf3bbb {
935 | -webkit-app-region: no-drag;
936 | }
937 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .icon_fc4f04 {
938 | -webkit-app-region: unset;
939 | }
940 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .followButton_a7d72e,
941 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .children_fc4f04:after {
942 | display: none;
943 | }
944 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .search_ff5f90 {
945 | position: fixed;
946 | right: 10px;
947 | }
948 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .search_ff5f90 .searchBar_a46bef {
949 | background: var(--background-primary);
950 | width: 200px;
951 | height: 28px;
952 | padding: 2px 10px;
953 | border-radius: 4px;
954 | }
955 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .search_ff5f90 .searchBar_a46bef .searchFilter_b0fa94,
956 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .search_ff5f90 .searchBar_a46bef .searchAnswer_b0fa94 {
957 | background: transparent;
958 | }
959 | :root .container_fc4f04.title_a7d72e:not(.minimum_d880dc) .search_ff5f90 .searchBar_a46bef .icon_effbe2 {
960 | color: var(--main-color);
961 | }
962 | :root .container_eedf95 {
963 | background: var(--background-secondary-alt-alt);
964 | box-shadow: none;
965 | }
966 | :root .container_eedf95 .resultsGroup_b0286e .option_b0286e {
967 | padding: 0 20px;
968 | margin: 0;
969 | border-radius: 0;
970 | }
971 | :root .container_eedf95 .resultsGroup_b0286e .option_b0286e.selected-rZcOL-, :root .container_eedf95 .resultsGroup_b0286e .option_b0286e[aria-selected=true] {
972 | background: var(--background-secondary);
973 | }
974 | :root .container_eedf95 .resultsGroup_b0286e .option_b0286e:after {
975 | display: none;
976 | }
977 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker {
978 | background: transparent;
979 | border-radius: 0;
980 | }
981 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker .react-datepicker__header {
982 | background: transparent;
983 | }
984 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker .react-datepicker__header .react-datepicker__current-month {
985 | border-bottom: none;
986 | }
987 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker__navigation--next, :root .container_eedf95 .calendarPicker_be05cd .react-datepicker__navigation--previous {
988 | border: none;
989 | border-radius: 50%;
990 | }
991 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker__navigation--next:hover, :root .container_eedf95 .calendarPicker_be05cd .react-datepicker__navigation--previous:hover {
992 | background-color: var(--epicshadow1);
993 | }
994 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker [class^=react-datepicker__day] {
995 | background: transparent;
996 | }
997 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker .react-datepicker__day {
998 | border-color: var(--background-tertiary);
999 | }
1000 | :root .container_eedf95 .calendarPicker_be05cd .react-datepicker .react-datepicker__day--selected:after, :root .container_eedf95 .calendarPicker_be05cd .react-datepicker .react-datepicker__day--selected:hover, :root .container_eedf95 .calendarPicker_be05cd .react-datepicker .react-datepicker__day:hover {
1001 | background: var(--main-color);
1002 | }
1003 | :root .container_eedf95 .datePickerHint_b0286e .hintValue_b0286e {
1004 | background: var(--main-color);
1005 | }
1006 | :root .searchResultsWrap_c2b47d {
1007 | background: var(--background-secondary);
1008 | top: -48px;
1009 | padding-top: 48px;
1010 | width: 480px;
1011 | height: 100%;
1012 | }
1013 | :root .searchResultsWrap_c2b47d .searchHeader_b7c924 {
1014 | position: absolute;
1015 | width: 100%;
1016 | background: linear-gradient(180deg, var(--background-secondary), transparent);
1017 | }
1018 | :root .searchResultsWrap_c2b47d .scroller_c2b47d {
1019 | padding: 0;
1020 | padding-top: 48px;
1021 | }
1022 | :root .searchResultsWrap_c2b47d .scroller_c2b47d > div {
1023 | padding: 0 14px 0 20px;
1024 | }
1025 | :root .searchResultsWrap_c2b47d .scroller_c2b47d .channelName-3w2Y3c {
1026 | background: transparent;
1027 | padding: 8px 0;
1028 | }
1029 | :root .searchResultsWrap_c2b47d .scroller_c2b47d .searchResult_ddc613 {
1030 | border: none;
1031 | box-shadow: none;
1032 | border-radius: 10px;
1033 | }
1034 | :root .searchResultsWrap_c2b47d .scroller_c2b47d .pageButton_b48941 {
1035 | background-color: var(--background-primary);
1036 | }
1037 | :root .searchResultsWrap_c2b47d .scroller_c2b47d .pageButton_b48941.activeButton_b48941 {
1038 | background-color: var(--main-color);
1039 | }
1040 | :root .recentMentionsPopout_ddb5b4 {
1041 | position: fixed;
1042 | top: 0;
1043 | right: 0;
1044 | min-height: 100%;
1045 | max-height: 100% !important;
1046 | border-radius: 0;
1047 | background: var(--background-secondary);
1048 | box-shadow: var(--elevation-high);
1049 | }
1050 | :root .recentMentionsPopout_ddb5b4 .header_ac90a2 {
1051 | background-color: var(--background-tertiary);
1052 | }
1053 | :root .recentMentionsPopout_ddb5b4 .item_a0 {
1054 | margin-bottom: 0 !important;
1055 | }
1056 | :root .recentMentionsPopout_ddb5b4 .item_a0.brand_a0.selected_a0.item_a0, :root .recentMentionsPopout_ddb5b4 .item_a0.brand_a0.item_a0:active {
1057 | border-bottom-color: var(--main-color) !important;
1058 | }
1059 | :root .recentMentionsPopout_ddb5b4 .row_fd8ff1 {
1060 | background: var(--background-primary);
1061 | margin: 12px;
1062 | border-radius: 12px;
1063 | }
1064 | :root .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) {
1065 | position: fixed;
1066 | top: 84px;
1067 | left: 330px;
1068 | width: calc(100% - 570px);
1069 | max-height: calc(100% - 84px) !important;
1070 | height: 100%;
1071 | box-shadow: unset;
1072 | background: var(--background-primary);
1073 | border-radius: 0;
1074 | }
1075 | :root .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) .header_ac90a2 {
1076 | background: var(--background-primary);
1077 | text-align: center;
1078 | box-shadow: none;
1079 | }
1080 | :root .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) .messagesPopout_ac90a2 {
1081 | padding: 12px 0 0 12px;
1082 | }
1083 | :root .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) .messagesPopout_ac90a2 .messageGroupWrapper_ac90a2 {
1084 | padding: 8px;
1085 | margin-bottom: 12px;
1086 | border: none;
1087 | background: var(--background-secondary);
1088 | border-radius: 12px;
1089 | }
1090 | :root .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) .messagesPopout_ac90a2::-webkit-scrollbar {
1091 | width: 8px;
1092 | margin-left: 5px;
1093 | }
1094 | :root .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) .messagesPopout_ac90a2::-webkit-scrollbar-thumb {
1095 | border: none;
1096 | background: var(--background-secondary) !important;
1097 | border-radius: 6px 0 0 6px;
1098 | }
1099 | :root .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) .messagesPopout_ac90a2::-webkit-scrollbar-track-piece {
1100 | display: none;
1101 | }
1102 |
1103 | :root .membersWrap_cbd271 {
1104 | margin-top: -48px;
1105 | max-height: calc(100% + 48px);
1106 | }
1107 | :root .membersWrap_cbd271 .members_cbd271 {
1108 | padding-top: 48px;
1109 | }
1110 | :root .membersWrap_cbd271 .members_cbd271 .member_a31c43 {
1111 | margin: 0;
1112 | }
1113 | :root .membersWrap_cbd271 .members_cbd271 .member_a31c43 .layout_d808b0 {
1114 | padding: 0 22px;
1115 | width: calc(100% - 22px);
1116 | border-radius: 0;
1117 | }
1118 | :root .membersWrap_cbd271 .members_cbd271::-webkit-scrollbar {
1119 | display: none;
1120 | }
1121 | :root .loadingPopout-1feYe_ {
1122 | background: var(--background-secondary);
1123 | }
1124 | :root .userPopoutOuter_c69a7b {
1125 | border-radius: 8px;
1126 | overflow: unset;
1127 | }
1128 | :root .userPopoutOuter_c69a7b .userProfileInner_c69a7b {
1129 | background-color: var(--background-tertiary);
1130 | overflow: unset;
1131 | }
1132 | :root .userPopoutOuter_c69a7b .header_b8cc6d {
1133 | min-height: 210px;
1134 | }
1135 | :root .userPopoutOuter_c69a7b .header_b8cc6d > .mask_d5fdb1 {
1136 | overflow: visible;
1137 | min-height: unset !important;
1138 | contain: unset;
1139 | }
1140 | :root .userPopoutOuter_c69a7b .header_b8cc6d > .mask_d5fdb1 .banner_d5fdb1 {
1141 | position: absolute;
1142 | height: 200px !important;
1143 | -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.7607843137), rgba(0, 0, 0, 0.7607843137));
1144 | clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), 50% 100%, 0 calc(100% - 25px));
1145 | }
1146 | :root .userPopoutOuter_c69a7b .header_b8cc6d > .mask_d5fdb1 > foreignObject {
1147 | mask: none;
1148 | }
1149 | :root .userPopoutOuter_c69a7b .wrapper_cb78f1 {
1150 | flex-direction: column;
1151 | }
1152 | :root .userPopoutOuter_c69a7b .addCustomStatusButtonBubble_d22603, :root .userPopoutOuter_c69a7b .statusBubbleOuter_d22603 + .visibleContainer_d22603 {
1153 | position: absolute;
1154 | top: -60px;
1155 | --custom-status-bubble-background: var(--background-tertiary);
1156 | }
1157 | :root .userPopoutOuter_c69a7b .statusBubbleOuter_d22603:before {
1158 | top: 28px;
1159 | }
1160 | :root .userPopoutOuter_c69a7b .statusBubbleOuter_d22603:after {
1161 | top: 50px;
1162 | left: 25px;
1163 | }
1164 | :root .userPopoutOuter_c69a7b .avatar_f94206 {
1165 | top: 15px !important;
1166 | left: calc(50% - 40px);
1167 | }
1168 | :root .userPopoutOuter_c69a7b .avatar_f94206 .overlay_f94206:after {
1169 | border-radius: var(--avatar-radius);
1170 | }
1171 | :root .userPopoutOuter_c69a7b .avatar_f94206 .avatarPopover_a64b81 {
1172 | top: 0;
1173 | left: 0;
1174 | border-radius: calc(var(--avatar-radius) * 2) !important;
1175 | }
1176 | :root .userPopoutOuter_c69a7b .avatar_f94206 .avatarPopover_a64b81 foreignObject {
1177 | mask: none !important;
1178 | }
1179 | :root .userPopoutOuter_c69a7b .avatar_f94206 .avatarPopover_a64b81 foreignObject .avatarHintInner_f89da9 {
1180 | font-size: 0;
1181 | text-transform: none;
1182 | }
1183 | :root .userPopoutOuter_c69a7b .avatar_f94206 .avatarPopover_a64b81 foreignObject .avatarHintInner_f89da9::after {
1184 | white-space: normal;
1185 | text-align: center;
1186 | content: var(--avatar-hint-text);
1187 | color: var(--avatar-hint-color);
1188 | font-size: var(--avatar-hint-size);
1189 | font-family: var(--avatar-hint-font);
1190 | }
1191 | :root .userPopoutOuter_c69a7b .mask_c51b4e foreignObject {
1192 | border-radius: calc(var(--avatar-radius) * 2) !important;
1193 | }
1194 | :root .userPopoutOuter_c69a7b .mask_c51b4e circle,
1195 | :root .userPopoutOuter_c69a7b .mask_c51b4e rect[fill=black] {
1196 | display: none;
1197 | }
1198 | :root .userPopoutOuter_c69a7b .body_b8cc6d {
1199 | position: static;
1200 | }
1201 | :root .userPopoutOuter_c69a7b .container_c32acf {
1202 | position: absolute;
1203 | top: 115px;
1204 | left: 20px;
1205 | width: calc(100% - 38px);
1206 | }
1207 | :root .userPopoutOuter_c69a7b .usernameRow_c32acf .clickableUsername_c32acf {
1208 | width: 100%;
1209 | }
1210 | :root .userPopoutOuter_c69a7b .usernameRow_c32acf .clickableUsername_c32acf h1 {
1211 | display: block;
1212 | text-align: center;
1213 | }
1214 | :root .userPopoutOuter_c69a7b .usernameRow_c32acf .nicknameIcons_c32acf {
1215 | display: none;
1216 | }
1217 | :root .userPopoutOuter_c69a7b .tags_c32acf {
1218 | margin-top: 5px;
1219 | justify-content: center;
1220 | }
1221 | :root .userPopoutOuter_c69a7b .tags_c32acf .container_b64375 {
1222 | border: none;
1223 | background: transparent;
1224 | }
1225 | :root .root_b9fccc.root_f9a4c9.small_f9a4c9 {
1226 | width: 800px;
1227 | height: 400px;
1228 | }
1229 | :root .root_b9fccc.root_f9a4c9.small_f9a4c9 > div, :root .root_b9fccc.root_f9a4c9.small_f9a4c9 .userProfileModalOuter_c69a7b {
1230 | width: 100%;
1231 | height: 100%;
1232 | box-sizing: border-box;
1233 | }
1234 | :root .userProfileModalInner_c69a7b {
1235 | width: 100%;
1236 | height: 100%;
1237 | flex-direction: row;
1238 | overflow: hidden;
1239 | position: relative;
1240 | border-radius: 8px;
1241 | }
1242 | :root .userProfileModalInner_c69a7b::before {
1243 | width: 100%;
1244 | height: 100%;
1245 | }
1246 | :root .userProfileModalInner_c69a7b header {
1247 | width: calc(55% - 16px);
1248 | height: 100%;
1249 | }
1250 | :root .userProfileModalInner_c69a7b header > .mask_d5fdb1 {
1251 | min-width: unset !important;
1252 | min-height: unset !important;
1253 | width: 100%;
1254 | height: 100%;
1255 | }
1256 | :root .userProfileModalInner_c69a7b header > .mask_d5fdb1 .banner_d5fdb1 {
1257 | position: absolute;
1258 | top: 0;
1259 | left: 0;
1260 | width: 100%;
1261 | height: 100% !important;
1262 | z-index: -1;
1263 | opacity: 0.6;
1264 | border-radius: 10px 0 0 10px;
1265 | mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2862745098));
1266 | -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2862745098));
1267 | }
1268 | :root .userProfileModalInner_c69a7b header > .mask_d5fdb1 > foreignObject {
1269 | mask: none;
1270 | }
1271 | :root .userProfileModalInner_c69a7b header > .mask_d5fdb1[viewBox="0 0 600 106"] > foreignObject {
1272 | y: -350px;
1273 | height: 800px;
1274 | }
1275 | :root .userProfileModalInner_c69a7b header > .mask_d5fdb1[viewBox="0 0 600 210"] > foreignObject {
1276 | y: -250px;
1277 | height: 700px;
1278 | }
1279 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc {
1280 | position: static;
1281 | }
1282 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .avatar_f94206 {
1283 | top: 16px;
1284 | left: 16px;
1285 | }
1286 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .avatar_f94206 circle,
1287 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .avatar_f94206 rect[fill=black] {
1288 | display: none;
1289 | }
1290 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 {
1291 | position: absolute;
1292 | top: unset;
1293 | left: unset;
1294 | bottom: 0;
1295 | right: 0;
1296 | z-index: 2;
1297 | width: calc(45% + 16px);
1298 | padding: 20px;
1299 | backdrop-filter: blur(8px);
1300 | box-sizing: border-box;
1301 | border-bottom-right-radius: 5px;
1302 | }
1303 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 > .statusBubbleOuter_d22603, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 > .statusBubbleOuter_d22603 {
1304 | border: none;
1305 | box-shadow: none;
1306 | background: transparent;
1307 | min-width: unset;
1308 | max-width: unset;
1309 | }
1310 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 > .statusBubbleOuter_d22603::before, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 > .statusBubbleOuter_d22603::after, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 > .statusBubbleOuter_d22603::before, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 > .statusBubbleOuter_d22603::after {
1311 | display: none;
1312 | }
1313 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 > .statusBubbleOuter_d22603 > .statusBubble_d22603, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 > .statusBubbleOuter_d22603 > .statusBubble_d22603 {
1314 | padding: 0;
1315 | background: transparent;
1316 | }
1317 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 > .statusBubbleOuter_d22603 > .statusBubble_d22603 > .content_d22603, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 > .statusBubbleOuter_d22603 > .statusBubble_d22603 > .content_d22603 {
1318 | text-align: left;
1319 | }
1320 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603.activityProfile_c1d9fd, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603.activityProfile_c1d9fd {
1321 | right: unset;
1322 | bottom: -140px;
1323 | left: 5px;
1324 | width: 750px;
1325 | padding: 20px;
1326 | }
1327 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 .customStatus_b2ca13, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 .customStatus_b2ca13 {
1328 | margin-top: 0;
1329 | }
1330 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 .assetsLargeImageActivityFeed_c1d9fd,
1331 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 .assetsLargeImageActivityFeedXbox_c1d9fd,
1332 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .addCustomStatusButtonBubble_d22603 .assetsLargeImageProfile_c1d9fd, :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 .assetsLargeImageActivityFeed_c1d9fd,
1333 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 .assetsLargeImageActivityFeedXbox_c1d9fd,
1334 | :root .userProfileModalInner_c69a7b .headerInner_b9fccc .statusBubbleOuter_d22603 + .visibleContainer_d22603 .assetsLargeImageProfile_c1d9fd {
1335 | width: 40px;
1336 | height: 40px;
1337 | }
1338 | :root .userProfileModalInner_c69a7b .headerButtons_b9fccc {
1339 | position: fixed;
1340 | bottom: 15px;
1341 | left: 15px;
1342 | z-index: 1;
1343 | }
1344 | :root .userProfileModalInner_c69a7b .mask_c51b4e foreignObject {
1345 | border-radius: calc(var(--avatar-radius) * 2.1) !important;
1346 | }
1347 | :root .userProfileModalInner_c69a7b .body_b9fccc {
1348 | width: calc(45% + 16px);
1349 | margin: 0;
1350 | overflow: visible;
1351 | background-color: var(--background-primary);
1352 | border-radius: 0;
1353 | }
1354 | :root .userProfileModalInner_c69a7b .body_b9fccc .fullSizeOverlayBackground_c69a7b {
1355 | position: static;
1356 | background: transparent;
1357 | border: none;
1358 | }
1359 | :root .userProfileModalInner_c69a7b .body_b9fccc .fullSizeOverlayBackground_c69a7b .container_ecc04c {
1360 | height: 100%;
1361 | }
1362 | :root .userProfileModalInner_c69a7b .body_b9fccc .container_c32acf {
1363 | position: absolute;
1364 | top: 25px;
1365 | left: 153px;
1366 | z-index: 1;
1367 | max-width: 250px;
1368 | }
1369 | :root .userProfileModalInner_c69a7b .body_b9fccc .container_c32acf .container_b64375 {
1370 | border: none;
1371 | }
1372 | :root .userProfileModalInner_c69a7b .body_b9fccc .tabBar_ecc04c {
1373 | position: absolute;
1374 | bottom: 65px;
1375 | left: 5px;
1376 | z-index: 1;
1377 | border-bottom: unset;
1378 | flex-direction: column;
1379 | gap: 15px;
1380 | }
1381 | :root .userProfileModalInner_c69a7b .body_b9fccc .tabBar_ecc04c .item_a0 {
1382 | height: 20px;
1383 | border-bottom: unset;
1384 | }
1385 | :root .userProfileModalInner_c69a7b .body_b9fccc .tabBar_ecc04c .item_a0 > div {
1386 | transition: font-weight 200ms;
1387 | }
1388 | :root .userProfileModalInner_c69a7b .body_b9fccc .tabBar_ecc04c .item_a0.selected_a0 > div {
1389 | font-weight: bold;
1390 | }
1391 | :root .userProfileModalInner_c69a7b .body_b9fccc .section_ba4d80:nth-last-child(3) {
1392 | margin-bottom: 50px;
1393 | }
1394 | :root .userProfileModalInner_c69a7b .body_b9fccc .connectedAccountContainer_ab12c6 {
1395 | border: none;
1396 | background-color: rgba(255, 255, 255, 0.05);
1397 | }
1398 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb {
1399 | display: grid;
1400 | grid-template-columns: 1fr 1fr;
1401 | grid-template-rows: repeat(20, 0fr);
1402 | gap: 10px;
1403 | padding-left: 8px;
1404 | }
1405 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb .listRow_d2d6cb {
1406 | position: relative;
1407 | z-index: 1;
1408 | height: 44px;
1409 | margin: 0;
1410 | padding-left: 10px;
1411 | border-radius: 8px;
1412 | overflow: hidden;
1413 | background-color: rgba(255, 255, 255, 0.0274509804);
1414 | }
1415 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb .listRow_d2d6cb .listAvatar_d2d6cb {
1416 | position: absolute;
1417 | right: 0;
1418 | z-index: -1;
1419 | width: 62% !important;
1420 | height: 250% !important;
1421 | margin-right: 0;
1422 | border-radius: 0;
1423 | -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7960784314));
1424 | }
1425 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb .listRow_d2d6cb .listAvatar_d2d6cb svg {
1426 | position: relative;
1427 | width: 100%;
1428 | height: 100%;
1429 | }
1430 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb .listRow_d2d6cb .listAvatar_d2d6cb svg foreignObject {
1431 | width: 100%;
1432 | height: 100%;
1433 | }
1434 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb .listRow_d2d6cb .listAvatar_d2d6cb svg rect {
1435 | display: none;
1436 | }
1437 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb .empty_d2d6cb {
1438 | grid-column: 1/3;
1439 | grid-row: 1/22;
1440 | position: relative;
1441 | z-index: 0;
1442 | overflow: hidden;
1443 | margin: 0;
1444 | padding-left: 10px;
1445 | border-radius: 8px;
1446 | }
1447 | :root .userProfileModalInner_c69a7b .body_b9fccc .listScroller_d2d6cb .empty_d2d6cb .emptyIconFriends_d2d6cb {
1448 | position: absolute;
1449 | z-index: -1;
1450 | width: 80%;
1451 | height: 80%;
1452 | margin-left: -10px;
1453 | opacity: 0.2;
1454 | background-size: 100%;
1455 | }
1456 | :root .userProfileModalInner_c69a7b .body_b9fccc .input-2g-os5 {
1457 | background-color: transparent;
1458 | }
1459 | :root .userProfileModalInner_c69a7b .userProfileModalOverlayBackground_c69a7b {
1460 | background-color: transparent;
1461 | }
1462 |
1463 | :root .layer_d4b6c5 {
1464 | transform: unset !important;
1465 | }
1466 | :root .layer_d4b6c5.baseLayer_d4b6c5 {
1467 | opacity: 1 !important;
1468 | }
1469 | :root .layer_d4b6c5.baseLayer_d4b6c5.stop-animations {
1470 | transform: scale(1) !important;
1471 | }
1472 | :root .layer_d4b6c5:not(.baseLayer_d4b6c5) {
1473 | margin-left: 90px;
1474 | }
1475 | :root .layer_d4b6c5 .sidebarRegion_c25c6d {
1476 | flex: unset;
1477 | background: var(--background-tertiary);
1478 | }
1479 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d {
1480 | justify-content: flex-start;
1481 | border-radius: 8px 0 0;
1482 | }
1483 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d {
1484 | width: 240px;
1485 | }
1486 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .searchBar_e7c031 {
1487 | margin: 0 30px 15px 30px;
1488 | border-radius: 8px;
1489 | }
1490 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .side_a0 .header_a0 {
1491 | color: var(--textcolor);
1492 | }
1493 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .bd-sidebar-header-label {
1494 | color: var(--textcolor);
1495 | padding: 0;
1496 | }
1497 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .side_a0 .header_a0,
1498 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .side_a0 .item_a0,
1499 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .bd-sidebar-header {
1500 | padding: 6px 30px;
1501 | border-radius: 0;
1502 | }
1503 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .socialLinks_c44e94 {
1504 | justify-content: center;
1505 | display: flex;
1506 | flex-direction: row;
1507 | }
1508 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d .info_c5a741 {
1509 | padding-left: 30px;
1510 | }
1511 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .sidebar_c25c6d,
1512 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d .flexChild_dc333f {
1513 | padding-left: 0 !important;
1514 | padding-right: 0 !important;
1515 | }
1516 | :root .layer_d4b6c5 .sidebarRegion_c25c6d .sidebarRegionScroller_c25c6d::-webkit-scrollbar {
1517 | display: none;
1518 | }
1519 | :root .layer_d4b6c5 .contentColumn_c25c6d,
1520 | :root .layer_d4b6c5 .customColumn_c25c6d {
1521 | min-width: unset;
1522 | max-width: 95%;
1523 | }
1524 | :root .layer_d4b6c5 .toolsContainer_c25c6d {
1525 | position: absolute;
1526 | right: 0px;
1527 | }
1528 | :root .layer_d4b6c5 .toolsContainer_c25c6d .closeButton_df5532:active {
1529 | transform: none;
1530 | }
1531 | :root .layer_d4b6c5 .toolsContainer_c25c6d .closeButton_df5532::before {
1532 | content: "";
1533 | position: fixed;
1534 | top: 0;
1535 | left: 0;
1536 | width: 90px;
1537 | height: 100%;
1538 | z-index: 100;
1539 | }
1540 | :root .noticeRegion_c25c6d {
1541 | right: 0;
1542 | max-width: 100%;
1543 | }
1544 | :root .noticeRegion_c25c6d .container_b6cd66 {
1545 | background-color: var(--background-secondary) !important;
1546 | }
1547 | @media (max-width: 1465px) {
1548 | :root .accountProfileCard_b69b77 {
1549 | flex-direction: column;
1550 | }
1551 | :root .accountProfileCard_b69b77 .mask_d5fdb1 {
1552 | position: absolute;
1553 | min-height: 150px !important;
1554 | max-width: 100% !important;
1555 | }
1556 | :root .accountProfileCard_b69b77 .mask_d5fdb1 mask {
1557 | display: none;
1558 | }
1559 | :root .accountProfileCard_b69b77 .mask_d5fdb1 foreignObject {
1560 | y: -51px !important;
1561 | }
1562 | :root .accountProfileCard_b69b77 .banner_d5fdb1 {
1563 | border-radius: 8px 8px 0 0 !important;
1564 | height: 200px !important;
1565 | flex: unset !important;
1566 | }
1567 | :root .accountProfileCard_b69b77 .userInfo_b69b77 {
1568 | height: 150px !important;
1569 | margin-left: 0 !important;
1570 | justify-content: space-evenly !important;
1571 | }
1572 | :root .accountProfileCard_b69b77 .userInfo_b69b77 .container_b64375 {
1573 | justify-content: center;
1574 | }
1575 | :root .accountProfileCard_b69b77 .background_b69b77 {
1576 | margin-top: 150px !important;
1577 | flex: unset !important;
1578 | }
1579 | }
1580 | :root .accountProfileCard_b69b77 {
1581 | display: flex;
1582 | background-color: var(--background-secondary);
1583 | }
1584 | :root .accountProfileCard_b69b77 .mask_d5fdb1 mask {
1585 | display: none;
1586 | }
1587 | :root .accountProfileCard_b69b77 .mask_d5fdb1 foreignObject {
1588 | y: -110px;
1589 | }
1590 | :root .accountProfileCard_b69b77 .banner_d5fdb1 {
1591 | -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.7607843137), rgba(0, 0, 0, 0.7607843137));
1592 | border-radius: 8px 0 0 8px;
1593 | height: 320px !important;
1594 | flex: 1;
1595 | }
1596 | :root .accountProfileCard_b69b77 .userInfo_b69b77 {
1597 | position: absolute;
1598 | display: grid;
1599 | grid-template-areas: "avatar username" "avatar button";
1600 | gap: 20px;
1601 | overflow: hidden;
1602 | height: 100%;
1603 | padding: 0;
1604 | justify-content: flex-start;
1605 | margin-left: 40px;
1606 | }
1607 | :root .accountProfileCard_b69b77 .userInfo_b69b77 .avatar_b69b77 {
1608 | grid-area: avatar;
1609 | position: static;
1610 | width: 120px !important;
1611 | height: 120px !important;
1612 | border: none;
1613 | background: none;
1614 | align-self: center;
1615 | }
1616 | :root .accountProfileCard_b69b77 .userInfo_b69b77 .avatar_b69b77 .mask_c51b4e {
1617 | width: 120px;
1618 | height: 120px;
1619 | }
1620 | :root .accountProfileCard_b69b77 .userInfo_b69b77 .badgeList_b69b77 {
1621 | background-color: transparent;
1622 | }
1623 | :root .accountProfileCard_b69b77 .userInfo_b69b77 > div:nth-child(2) {
1624 | grid-area: username;
1625 | align-self: flex-end;
1626 | }
1627 | :root .accountProfileCard_b69b77 .userInfo_b69b77 button:last-child {
1628 | grid-area: button;
1629 | }
1630 | :root .accountProfileCard_b69b77 .background_b69b77 {
1631 | margin: 0;
1632 | flex: 1;
1633 | }
1634 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 > :first-child {
1635 | flex: 2 auto;
1636 | }
1637 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .userPopoutInner_c69a7b:before {
1638 | width: calc(100% - 8px) !important;
1639 | }
1640 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .header_f4c122 {
1641 | min-height: 210px;
1642 | }
1643 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .header_f4c122 > .mask_d5fdb1 {
1644 | overflow: visible;
1645 | min-height: unset !important;
1646 | contain: unset;
1647 | }
1648 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .header_f4c122 > .mask_d5fdb1 .banner_d5fdb1 {
1649 | position: absolute;
1650 | height: 200px !important;
1651 | -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.7607843137), rgba(0, 0, 0, 0.7607843137));
1652 | clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), 50% 100%, 0 calc(100% - 25px));
1653 | }
1654 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .header_f4c122 > .mask_d5fdb1 > foreignObject {
1655 | mask: none;
1656 | }
1657 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .avatar_f18fcb {
1658 | top: 15px;
1659 | left: 50%;
1660 | margin-left: -40px;
1661 | }
1662 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .avatar_f18fcb .avatarUploaderInner_ab876d {
1663 | border: none;
1664 | border-radius: var(--avatar-radius);
1665 | }
1666 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .avatar_f18fcb .imageUploaderIcon_de76e4 {
1667 | display: none;
1668 | }
1669 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .avatar_f18fcb .status_ab876d {
1670 | background-color: transparent;
1671 | }
1672 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .customStatus__3aa7f {
1673 | padding-top: 12px;
1674 | }
1675 | :root .profileCustomizationSection_bad983 .baseLayout_bad983 .divider-1wtgZ3 {
1676 | display: none;
1677 | }
1678 | :root .bioTextArea_ccf27d {
1679 | border-radius: 8px;
1680 | }
1681 | :root .item-2idW98 {
1682 | background: var(--background-secondary);
1683 | transition: transform 200ms;
1684 | }
1685 | :root .item-2idW98:hover {
1686 | background: var(--background-secondary);
1687 | }
1688 | :root #family-center-tab .max-width_d00e26, :root #family-center-tab .max-width_a2e886, :root #requests-tab .container_f70f48 {
1689 | max-width: unset;
1690 | }
1691 | :root .connectionHeader_e2a436 {
1692 | background: transparent;
1693 | }
1694 | :root .connectionHeader_e2a436 .connectionDelete_e2a436 {
1695 | border-color: transparent;
1696 | border-radius: 50%;
1697 | padding: 8px 8px 5px 8px;
1698 | transition: background 100ms;
1699 | }
1700 | :root .connectionHeader_e2a436 .connectionDelete_e2a436:hover {
1701 | background: rgba(255, 255, 255, 0.1333333333);
1702 | }
1703 | :root .premiumLabel_ae3c77 {
1704 | flex-direction: row-reverse;
1705 | justify-content: flex-end;
1706 | }
1707 | :root .premiumLabel_ae3c77 svg {
1708 | margin-right: 8px;
1709 | }
1710 | :root .premiumLabel_ae3c77 + .selectedBackground_ae3c77 {
1711 | background-color: var(--background-modifier-selected);
1712 | border-radius: 0;
1713 | }
1714 | :root .cardWrapper_f9902b {
1715 | transform: translateZ(0);
1716 | overflow: hidden;
1717 | background: rgba(0, 0, 0, 0.5333333333);
1718 | --header-primary: #fff;
1719 | }
1720 | :root .cardWrapper_f9902b .tierLabel__41356 {
1721 | color: #fff;
1722 | font-weight: 500;
1723 | }
1724 | :root .cardWrapper_f9902b .gemIndicatorContainer_b03ca0 {
1725 | background: transparent;
1726 | backdrop-filter: blur(5px);
1727 | }
1728 | :root .cardWrapper_f9902b .gemIndicatorContainer_b03ca0 .gemWithoutLabel__6225b {
1729 | color: #999;
1730 | }
1731 | :root .cardWrapper_f9902b .icon_a64689 {
1732 | border-radius: 8px;
1733 | }
1734 | :root .cardWrapper_f9902b .icon_a64689::before {
1735 | content: "";
1736 | position: fixed;
1737 | top: 0;
1738 | left: 0;
1739 | width: 100%;
1740 | height: 100%;
1741 | background-image: inherit;
1742 | background-repeat: no-repeat;
1743 | background-size: cover;
1744 | background-position: 50% 50%;
1745 | z-index: -1;
1746 | opacity: 0.5;
1747 | filter: blur(20px);
1748 | }
1749 | :root .promotionCard_e8af36 {
1750 | border-radius: 8px;
1751 | }
1752 | :root .paymentPane_f66684,
1753 | :root .codeRedemptionRedirect_cb70f4 {
1754 | background: var(--background-secondary);
1755 | border: none;
1756 | }
1757 | :root .paymentPane_f66684 .paginator_f66684,
1758 | :root .paymentPane_f66684 .bottomDivider_f66684,
1759 | :root .codeRedemptionRedirect_cb70f4 .paginator_f66684,
1760 | :root .codeRedemptionRedirect_cb70f4 .bottomDivider_f66684 {
1761 | background: transparent;
1762 | }
1763 | :root .paymentPane_f66684 .paymentRow_f66684,
1764 | :root .codeRedemptionRedirect_cb70f4 .paymentRow_f66684 {
1765 | border: none;
1766 | }
1767 | :root .paymentPane_f66684 .paymentRow_f66684 .expandedInfo_a28a08,
1768 | :root .codeRedemptionRedirect_cb70f4 .paymentRow_f66684 .expandedInfo_a28a08 {
1769 | background: var(--background-primary);
1770 | }
1771 | :root .micTest_ca3055 .notches_e5cdf3.gray_e5cdf3 {
1772 | color: var(--background-primary);
1773 | }
1774 | :root .addGamePopout_fd966d {
1775 | background: var(--background-secondary);
1776 | box-shadow: none;
1777 | }
1778 | :root .addGamePopout_fd966d .divider_b8ab18 {
1779 | display: none;
1780 | }
1781 | :root .gameNameInput_fd966d {
1782 | padding: 8px;
1783 | }
1784 | :root .gameNameInput_fd966d:focus, :root .gameNameInput_fd966d:hover {
1785 | background-color: var(--background-primary);
1786 | border: none;
1787 | }
1788 | :root .notificationSettings-1U0JsJ {
1789 | max-width: unset;
1790 | }
1791 | :root .notificationSettings-1U0JsJ .wrapper_b877fa {
1792 | border: none;
1793 | background: var(--background-secondary);
1794 | border-radius: 20px;
1795 | }
1796 | :root .notificationSettings-1U0JsJ .wrapper_b877fa .option_b877fa {
1797 | margin: 10px;
1798 | border-radius: 16px;
1799 | background: var(--epicshadow1);
1800 | }
1801 | :root .notificationSettings-1U0JsJ .wrapper_b877fa .option_b877fa:hover {
1802 | background: var(--main-color);
1803 | opacity: 0.4;
1804 | }
1805 | :root .notificationSettings-1U0JsJ .wrapper_b877fa .option_b877fa.selected_b877fa {
1806 | background: var(--main-color);
1807 | box-shadow: unset;
1808 | }
1809 | :root .membershipDialog-2wAdpQ {
1810 | border-radius: 10px;
1811 | }
1812 | :root .membershipDialog-2wAdpQ:after {
1813 | left: 5px;
1814 | }
1815 | :root .videoWrapper_b8e00f {
1816 | background: transparent;
1817 | }
1818 | :root .videoWrapper_b8e00f iframe {
1819 | margin: auto;
1820 | border-radius: 10px;
1821 | }
1822 | :root .avatarUploaderInner_f0a9ff {
1823 | border-radius: 16px;
1824 | box-shadow: none;
1825 | }
1826 | :root .imageUploaderIcon_de76e4 {
1827 | display: none;
1828 | }
1829 | :root .customScroller_c25c6d > div,
1830 | :root .contentWidth_bd05f1 {
1831 | max-width: unset;
1832 | }
1833 | :root .customColorPicker_bbc020 {
1834 | background: var(--background-secondary);
1835 | border: none;
1836 | border-radius: 8px;
1837 | }
1838 | :root .customColorPicker_bbc020 .customColorPickerInputContainer_e467bb .input_f8bc55 {
1839 | background-color: var(--background-secondary);
1840 | }
1841 | :root .emojiAliasInput-1y-NBz .emojiInput-1aLNse {
1842 | background: var(--background-primary);
1843 | }
1844 | :root .auditLog_eebd33 {
1845 | border: none;
1846 | border-radius: 8px;
1847 | overflow: hidden;
1848 | }
1849 | :root .auditLog_eebd33 .header_eebd33,
1850 | :root .auditLog_eebd33 .changeDetails_eebd33 {
1851 | background: var(--background-secondary);
1852 | }
1853 | :root .auditLog_eebd33 .divider_eebd33 {
1854 | display: none;
1855 | }
1856 | :root .copyInput_d7e343 {
1857 | border: none;
1858 | border-radius: 8px;
1859 | }
1860 | :root .directoryContainer_da3f59 {
1861 | background-color: var(--background-primary);
1862 | }
1863 | :root .modal-1gWd9S .footer_ffaecb,
1864 | :root .container_a74b6f .footer_ffaecb {
1865 | border-bottom-left-radius: 0 !important;
1866 | }
1867 | :root .editCircle-2uL_D3,
1868 | :root .editCircle-ityklj {
1869 | background: var(--background-primary);
1870 | }
1871 | :root .formFieldWrapper-2LV3S6 {
1872 | border: none;
1873 | }
1874 | :root .sparkles-2XXTZO {
1875 | z-index: unset;
1876 | }
1877 | :root .background_bfac79 {
1878 | color: var(--background-secondary);
1879 | }
1880 | :root .tierInProgress_bfac79,
1881 | :root .tierBody_da77bd,
1882 | :root .tierHeaderLocked_da77bd,
1883 | :root .tierHeaderUnlocked_da77bd {
1884 | background: var(--background-secondary);
1885 | }
1886 | :root .overflowRolesPopout_e4010c,
1887 | :root .overflowRolesPopoutArrow_e4010c {
1888 | background: var(--background-secondary);
1889 | box-shadow: none;
1890 | }
1891 |
1892 | :root .panels_a4d4d9 {
1893 | position: relative;
1894 | z-index: unset;
1895 | }
1896 | :root .panels_a4d4d9 .activityPanel_a4d4d9 {
1897 | position: absolute;
1898 | bottom: 20px;
1899 | right: 105px;
1900 | padding: 0;
1901 | border-radius: 8px;
1902 | }
1903 | :root .panels_a4d4d9 .activityPanel_a4d4d9 .gameWrapper_bf1a22 {
1904 | display: none;
1905 | }
1906 | :root .panels_a4d4d9 .activityPanel_a4d4d9 .actions_bf1a22 {
1907 | margin: 0;
1908 | }
1909 | :root .panels_a4d4d9 .activityPanel_a4d4d9 .actions_bf1a22 .button_dd4f85 {
1910 | color: var(--main-color);
1911 | }
1912 | :root .panels_a4d4d9 .activityPanel_a4d4d9:hover {
1913 | background-color: var(--background-modifier-selected);
1914 | }
1915 | :root .panels_a4d4d9 > .container_b2ca13 {
1916 | padding: 10px 8px;
1917 | }
1918 | :root .panels_a4d4d9 > .container_b2ca13 .avatarWrapper_b2ca13[aria-expanded] .wrapper_c51b4e {
1919 | position: fixed;
1920 | left: 29px;
1921 | bottom: 23px;
1922 | z-index: 1;
1923 | }
1924 | :root .panels_a4d4d9 > .container_b2ca13 .avatarWrapper_b2ca13[aria-expanded]:hover {
1925 | background-color: transparent;
1926 | }
1927 | :root .panels_a4d4d9 > .container_b2ca13 .title-3XlmeX {
1928 | font-weight: 500;
1929 | }
1930 | :root .panels_a4d4d9 > .container_b2ca13 .button_adca65 {
1931 | color: #888;
1932 | }
1933 | :root .panels_a4d4d9 > .container_b2ca13 .button_adca65[aria-checked=false].enabled_adca65 {
1934 | color: var(--main-color);
1935 | }
1936 | :root .noChat_d880dc.wrapper_d880dc {
1937 | background: #000;
1938 | margin: 0;
1939 | border-radius: 0;
1940 | animation: unset;
1941 | }
1942 | :root .noChat_d880dc.wrapper_d880dc .headerWrapper_d880dc .container_fc4f04 {
1943 | width: unset;
1944 | }
1945 | :root .noChat_d880dc.wrapper_d880dc .border_ba4b17.speaking_ba4b17 {
1946 | box-shadow: inset 0 0 0 2.5px #43b581, inset 0 0 0 4.5px var(--background-secondary);
1947 | }
1948 | :root .noChat_d880dc.wrapper_d880dc .wrapper_b6e2f9 .button_dd4f85 {
1949 | border-radius: 50%;
1950 | }
1951 | :root .noChat_d880dc.wrapper_d880dc .colorable_ef18ee.primaryDark_ef18ee,
1952 | :root .noChat_d880dc.wrapper_d880dc .participantsButton_b83b18,
1953 | :root .noChat_d880dc.wrapper_d880dc .participantsButton_b83b18:hover {
1954 | background: var(--background-secondary);
1955 | }
1956 | :root .noChat_d880dc.wrapper_d880dc .css-1k9nrkn {
1957 | background: transparent;
1958 | }
1959 | :root .noChat_d880dc.wrapper_d880dc .controlButton_b6e2f9 foreignObject {
1960 | mask: none;
1961 | }
1962 |
1963 | :root .searchBar_f0963d {
1964 | position: absolute;
1965 | top: 0;
1966 | left: 0;
1967 | width: calc(100% - 20px);
1968 | background: linear-gradient(180deg, var(--background-secondary), transparent);
1969 | box-shadow: none;
1970 | }
1971 | :root .searchBar_f0963d .searchBarComponent_f0963d {
1972 | background: var(--background-primary);
1973 | border-radius: 20px;
1974 | font-size: 10px;
1975 | text-align: center;
1976 | }
1977 | :root .input_f4e139 {
1978 | background: var(--background-primary);
1979 | }
1980 | :root .privateChannels_f0963d > .scroller_c47fa9 {
1981 | padding-top: 48px;
1982 | background: transparent;
1983 | }
1984 | :root .privateChannels_f0963d > .scroller_c47fa9::-webkit-scrollbar {
1985 | display: none;
1986 | }
1987 | :root .channel_c91bad {
1988 | margin: 0;
1989 | max-width: unset;
1990 | border-radius: 0;
1991 | }
1992 | :root .channel_c91bad .layout_ec8679 {
1993 | padding: 0 22px;
1994 | width: calc(100% - 22px);
1995 | border-radius: 0;
1996 | }
1997 | :root .container_c2739c {
1998 | background: var(--background-primary);
1999 | }
2000 | :root .container_c2739c .actionButton_e01b91 {
2001 | background: transparent;
2002 | }
2003 | :root .container_c2739c .actionButton_e01b91:hover {
2004 | background: var(--background-primary);
2005 | }
2006 | :root .container_c2739c .peopleColumn_c2739c ::-webkit-scrollbar {
2007 | display: none;
2008 | }
2009 | :root .container_c2739c .tabBody_c2739c::before,
2010 | :root .container_c2739c .libraryHeader_cb9493::before {
2011 | content: none;
2012 | }
2013 | :root .container_c2739c .header_c6ee36,
2014 | :root .container_c2739c .header_d8cdac,
2015 | :root .container_c2739c .header-JHwfVI {
2016 | display: none;
2017 | }
2018 | :root .container_c2739c .nowPlayingColumn_c2739c {
2019 | background: transparent;
2020 | margin: 3px 0 10px 0;
2021 | }
2022 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a {
2023 | background: var(--background-secondary);
2024 | border-radius: 15px 0 0 15px;
2025 | }
2026 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a {
2027 | border: none;
2028 | padding: 16px 0 !important;
2029 | margin: 0;
2030 | }
2031 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a .header_bf550a {
2032 | text-align: center;
2033 | }
2034 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a .emptyCard_f02fcf {
2035 | margin: 16px;
2036 | }
2037 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a .outer_ac5d22 {
2038 | background: transparent;
2039 | }
2040 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a .wrapper_cd82a7 {
2041 | background: var(--background-secondary);
2042 | margin: 16px;
2043 | border-radius: 10px;
2044 | border: none;
2045 | }
2046 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a .wrapper_cd82a7 .body_cd82a7 > :nth-last-child(3) {
2047 | border-radius: 8px 8px 0 0;
2048 | }
2049 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a .wrapper_cd82a7 .body_cd82a7 .separator_cd82a7 {
2050 | display: none;
2051 | }
2052 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a .wrapper_cd82a7 .body_cd82a7 > :nth-child(3) {
2053 | border-radius: 0 0 8px 8px;
2054 | }
2055 | :root .container_c2739c .nowPlayingColumn_c2739c .container_bf550a .scroller_bf550a::-webkit-scrollbar {
2056 | display: none;
2057 | }
2058 | :root .akaBadge__27cd4 {
2059 | background: var(--main-color);
2060 | color: #fff;
2061 | }
2062 | :root .wrapper_d880dc:not(.video_d880dc) {
2063 | background: var(--background-secondary);
2064 | margin: 15px;
2065 | border-radius: 10px;
2066 | animation: callzoom 2s ease;
2067 | }
2068 | :root .wrapper_d880dc:not(.video_d880dc) .tile_dc5fc4 {
2069 | background: var(--background-primary);
2070 | }
2071 | :root .wrapper_d880dc:not(.video_d880dc) .tile_dc5fc4 .button_e5cc00,
2072 | :root .wrapper_d880dc:not(.video_d880dc) .tile_dc5fc4 .buttonColor_d4af21 {
2073 | background-color: var(--main-color);
2074 | }
2075 | :root .wrapper_d880dc:not(.video_d880dc) .videoWrapper_ba4b17 {
2076 | background: var(--background-primary);
2077 | }
2078 | :root .wrapper_d880dc:not(.video_d880dc) .border_db83a2.speaking_db83a2 {
2079 | box-shadow: inset 0 0 0 2.5px #43b581, inset 0 0 0 6px var(--background-secondary);
2080 | }
2081 | :root .wrapper_d880dc:not(.video_d880dc) .colorable_ef18ee.primaryDark_ef18ee,
2082 | :root .wrapper_d880dc:not(.video_d880dc) .leftTrayIcon_d880dc {
2083 | background: var(--background-primary);
2084 | }
2085 | :root .wrapper_d880dc:not(.video_d880dc) .wrapper_b6e2f9 > .controlButton_b6e2f9 > svg > foreignObject {
2086 | mask: none;
2087 | }
2088 | :root .quickSelectPopout_abbf45 {
2089 | background: var(--background-primary);
2090 | }
2091 | :root .applicationStore_cecc86 .container_fc4f04 {
2092 | width: calc(100% - 240px);
2093 | position: absolute;
2094 | top: 0;
2095 | background: linear-gradient(180deg, var(--background-primary), transparent);
2096 | z-index: 1;
2097 | }
2098 | :root .userPanelOuter_c69a7b .scrollerBase_eed6a8 {
2099 | overflow: unset !important;
2100 | }
2101 | :root .userPanelOuter_c69a7b .bannerSVGWrapper_b32cc2 {
2102 | overflow: visible;
2103 | min-height: 180px !important;
2104 | contain: unset;
2105 | max-width: 340px;
2106 | }
2107 | :root .userPanelOuter_c69a7b .bannerSVGWrapper_b32cc2 .banner_d5fdb1 {
2108 | position: absolute;
2109 | height: 200px;
2110 | -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.7607843137), rgba(0, 0, 0, 0.7607843137));
2111 | clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), 50% 100%, 0 calc(100% - 25px));
2112 | }
2113 | :root .userPanelOuter_c69a7b .bannerSVGWrapper_b32cc2[viewBox="0 0 340 60"] > foreignObject {
2114 | transform: translateY(-60px);
2115 | }
2116 | :root .userPanelOuter_c69a7b .bannerSVGWrapper_b32cc2[viewBox="0 0 340 120"] > foreignObject {
2117 | transform: translateY(-30px);
2118 | }
2119 | :root .userPanelOuter_c69a7b .bannerSVGWrapper_b32cc2[viewBox="0 0 340 90"] > foreignObject {
2120 | transform: translateY(-45px);
2121 | }
2122 | :root .userPanelOuter_c69a7b .bannerSVGWrapper_b32cc2 > foreignObject {
2123 | mask: none;
2124 | }
2125 | :root .userPanelOuter_c69a7b .divider_ae36e5 {
2126 | display: none;
2127 | }
2128 | :root .userPanelOuter_c69a7b .badgelistGroup_ab525a {
2129 | min-height: 10px;
2130 | }
2131 | :root .userPanelOuter_c69a7b .badgeList_ab525a {
2132 | position: absolute;
2133 | top: 160px;
2134 | left: 0;
2135 | width: 340px;
2136 | height: unset;
2137 | max-width: unset;
2138 | padding: 0;
2139 | justify-content: center;
2140 | background-color: transparent;
2141 | }
2142 | :root .userPanelOuter_c69a7b .section_d7a21f {
2143 | padding-top: 0;
2144 | padding-bottom: 12px;
2145 | }
2146 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) {
2147 | position: static;
2148 | }
2149 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .section_d7a21f .userText_c9ccf6 {
2150 | position: absolute;
2151 | top: 110px;
2152 | left: 0;
2153 | width: 340px;
2154 | box-sizing: border-box;
2155 | text-align: center;
2156 | }
2157 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .section_d7a21f .userText_c9ccf6 .discrimBase_c9ccf6 {
2158 | color: white;
2159 | }
2160 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .pronouns_c9ccf6 {
2161 | position: relative;
2162 | margin-top: 8px;
2163 | }
2164 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .scroller_d2b491::-webkit-scrollbar {
2165 | display: none;
2166 | }
2167 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e {
2168 | z-index: 1;
2169 | }
2170 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .assetsLargeImageSpotify_c1d9fd {
2171 | border-radius: 8px !important;
2172 | margin-left: 6px;
2173 | }
2174 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .null {
2175 | margin-right: 8px;
2176 | }
2177 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .button_da7790 {
2178 | background-color: var(--main-color);
2179 | opacity: 1;
2180 | }
2181 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .platformIcon_c1d9fd {
2182 | display: none;
2183 | }
2184 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .timeBarUserPopoutV2_c1d9fd {
2185 | position: absolute;
2186 | top: 7px;
2187 | left: 0;
2188 | z-index: -1;
2189 | width: 100%;
2190 | height: 70px;
2191 | border-radius: 8px;
2192 | }
2193 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .timeBarUserPopoutV2_c1d9fd .bar_ec2fa7 {
2194 | border-radius: 8px;
2195 | height: 100%;
2196 | }
2197 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .timeBarUserPopoutV2_c1d9fd .barInner_ec2fa7 {
2198 | border-radius: 8px 0 0 8px;
2199 | opacity: 0.2;
2200 | }
2201 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .activity__20c1e .timeBarUserPopoutV2_c1d9fd > :last-child {
2202 | display: none;
2203 | }
2204 | :root .userPanelOuter_c69a7b .userPanelOverlayBackground_a2b6ae:nth-child(2) .input-2g-os5 {
2205 | background-color: transparent !important;
2206 | }
2207 | :root .userPanelOuter_c69a7b.userProfileOuterThemed_c69a7b .usernameSection_d2b491 {
2208 | left: 4px;
2209 | }
2210 | :root .userPanelOuter_c69a7b .avatarWrapper_f89da9 {
2211 | top: 15px !important;
2212 | left: calc(50% - 40px);
2213 | }
2214 | :root .userPanelOuter_c69a7b .avatarWrapper_f89da9 .avatarHint_f89da9 {
2215 | top: 0;
2216 | left: 0;
2217 | border-radius: calc(var(--avatar-radius) * 2) !important;
2218 | }
2219 | :root .userPanelOuter_c69a7b .avatarWrapper_f89da9 .avatarHint_f89da9 foreignObject {
2220 | mask: none !important;
2221 | }
2222 | :root .userPanelOuter_c69a7b .avatarWrapper_f89da9 .avatarHint_f89da9 foreignObject .avatarHintInner_f89da9 {
2223 | font-size: 0;
2224 | text-transform: none;
2225 | }
2226 | :root .userPanelOuter_c69a7b .avatarWrapper_f89da9 .avatarHint_f89da9 foreignObject .avatarHintInner_f89da9::after {
2227 | white-space: normal;
2228 | text-align: center;
2229 | content: var(--avatar-hint-text);
2230 | color: var(--avatar-hint-color);
2231 | font-size: var(--avatar-hint-size);
2232 | font-family: var(--avatar-hint-font);
2233 | }
2234 | :root .userPanelOuter_c69a7b .mask_c51b4e foreignObject {
2235 | border-radius: calc(var(--avatar-radius) * 2) !important;
2236 | }
2237 | :root .userPanelOuter_c69a7b .mask_c51b4e circle,
2238 | :root .userPanelOuter_c69a7b .mask_c51b4e rect[fill=black] {
2239 | display: none;
2240 | }
2241 |
2242 | body {
2243 | background: transparent;
2244 | }
2245 |
2246 | .withFrame_a934d8 {
2247 | background: var(--background-tertiary);
2248 | padding: 8px 16px;
2249 | height: 24px;
2250 | margin-top: unset;
2251 | position: relative;
2252 | left: 90px;
2253 | width: calc(100% - 122px);
2254 | z-index: 1;
2255 | pointer-events: none;
2256 | }
2257 | .withFrame_a934d8 .wordmark_a934d8 {
2258 | top: unset;
2259 | left: 16px;
2260 | color: transparent;
2261 | }
2262 | .withFrame_a934d8 .winButton_a934d8 {
2263 | color: var(--textcolor);
2264 | top: -8px;
2265 | right: -16px;
2266 | height: 40px;
2267 | width: 56px;
2268 | }
2269 | .withFrame_a934d8 .winButtonClose_a934d8 + .winButtonMinMax_a934d8::before {
2270 | content: "";
2271 | position: absolute;
2272 | top: 10px;
2273 | left: 18px;
2274 | width: 18px;
2275 | height: 18px;
2276 | background: url("https://cdn.discordapp.com/attachments/539180316447997974/713920529622630411/aaaaaaaaa.svg") no-repeat;
2277 | background-size: contain;
2278 | opacity: 0;
2279 | }
2280 |
2281 | .theme-light .winButtonClose_a934d8 + .winButtonMinMax_a934d8::before {
2282 | background-image: url("https://cdn.discordapp.com/attachments/539180316447997974/713920227582279810/aaaaaaaaa.svg");
2283 | }
2284 |
2285 | body.maximized .winButtonClose_a934d8 + .winButtonMinMax_a934d8 svg {
2286 | opacity: 0;
2287 | }
2288 | body.maximized .winButtonClose_a934d8 + .winButtonMinMax_a934d8::before {
2289 | opacity: 1;
2290 | }
2291 |
2292 | .platform-win .chat_a7d72e .wrapper_d880dc:not(.minimum_d880dc) .search_ff5f90 {
2293 | top: 50px;
2294 | }
2295 | .platform-win .appMount_ea7e65 .app_bd26cc .scroller_fea3ef {
2296 | padding-top: 20px;
2297 | }
2298 | .platform-win .appMount_ea7e65 .app_bd26cc .content_a4d4d9::after {
2299 | content: "";
2300 | position: absolute;
2301 | top: -5px;
2302 | left: -5px;
2303 | z-index: 2;
2304 | width: 30px;
2305 | height: 30px;
2306 | border: solid var(--background-tertiary);
2307 | border-width: 5px 0 0 5px;
2308 | border-radius: 15px 0 0 0;
2309 | box-sizing: border-box;
2310 | }
2311 | .platform-win .layers_a01fb1,
2312 | .platform-win .layers_d4b6c5,
2313 | .platform-win .layers_a01fb1 > .layer_d4b6c5,
2314 | .platform-win .container_a4d4d9 {
2315 | overflow: visible;
2316 | }
2317 | .platform-win .recentMentionsPopout_ddb5b4,
2318 | .platform-win .root_fccaa9 {
2319 | top: 40px;
2320 | }
2321 |
2322 | html:not(.platform-linux) body:not(.maximized).transparent .appMount_ea7e65 {
2323 | overflow: hidden;
2324 | border-radius: 8px;
2325 | box-shadow: 0 0 10px 0 var(--background-tertiary);
2326 | top: 10px;
2327 | left: 10px;
2328 | width: calc(100% - 20px);
2329 | height: calc(100% - 20px);
2330 | transform: translateZ(0);
2331 | }
2332 |
2333 | .platform-osx .typeMacOS_a934d8 {
2334 | width: 90px;
2335 | }
2336 | .platform-osx .typeMacOS_a934d8 .macButtons_a934d8 {
2337 | width: 90px;
2338 | padding: 10px 20px 10px 20px;
2339 | }
2340 | .platform-osx .unreadMentionsIndicatorTop_fea3ef {
2341 | top: 20px;
2342 | }
2343 | .platform-osx .unreadMentionsIndicatorTop_fea3ef .mention_edf32f {
2344 | background: transparent;
2345 | }
2346 | .platform-osx .guilds_a4d4d9 {
2347 | margin: 0;
2348 | }
2349 | .platform-osx .guilds_a4d4d9 .scroller_fea3ef {
2350 | padding-top: 40px;
2351 | }
2352 | .platform-osx .guilds_a4d4d9::after {
2353 | content: "";
2354 | position: absolute;
2355 | width: 100%;
2356 | height: 32px;
2357 | top: 0;
2358 | left: 0;
2359 | background: linear-gradient(180deg, var(--background-tertiary), transparent);
2360 | }
2361 |
2362 | :root *::-webkit-scrollbar {
2363 | width: 8px;
2364 | }
2365 | :root *::-webkit-scrollbar-thumb {
2366 | background: var(--background-secondary);
2367 | border-radius: 20px;
2368 | }
2369 | :root *::-webkit-scrollbar-track-piece {
2370 | display: none;
2371 | }
2372 | :root .info_c5a741 [class^="text-xs/normal_dc00ef"]:last-child::after {
2373 | content: "\a Couve v" var(--version);
2374 | text-transform: none;
2375 | white-space: pre;
2376 | }
2377 | :root .categoryItem_c72b37 {
2378 | margin: 3px 0 3px 8px;
2379 | }
2380 | :root .categoryItem_c72b37.selectedCategoryItem_c72b37 .itemInner_c72b37 {
2381 | background: var(--epicshadow1);
2382 | }
2383 | :root .pageWrapper_a3a4ce {
2384 | background: var(--background-primary);
2385 | }
2386 | :root .pageWrapper_a3a4ce .search-25t1e9 .searchBox-31Zv9h {
2387 | background: var(--background-secondary);
2388 | }
2389 | :root .pageWrapper_a3a4ce .search-25t1e9 .searchBox-31Zv9h .input_f8bc55 {
2390 | color: white;
2391 | }
2392 | :root .pageWrapper_a3a4ce .search-25t1e9 .searchBox-31Zv9h .searchIcon-3X4BYL {
2393 | margin-left: 8px;
2394 | }
2395 | :root .pageWrapper_a3a4ce .card_e90879,
2396 | :root .pageWrapper_a3a4ce .iconMask_e90879 {
2397 | background-color: var(--card);
2398 | }
2399 | :root .pageWrapper_a3a4ce .card_e90879:hover, :root .pageWrapper_a3a4ce .card_e90879:hover .iconMask_e90879,
2400 | :root .pageWrapper_a3a4ce .iconMask_e90879:hover,
2401 | :root .pageWrapper_a3a4ce .iconMask_e90879:hover .iconMask_e90879 {
2402 | background: var(--background-secondary);
2403 | }
2404 | :root .root_fccaa9 {
2405 | top: 40px;
2406 | left: 330px;
2407 | contain: unset;
2408 | }
2409 | :root .root_fccaa9 .perksModal-CLcR1c {
2410 | background-color: var(--background-primary);
2411 | }
2412 | :root .root_fccaa9 .perksModal-CLcR1c .ctaBar-Nhk8yY {
2413 | background: var(--background-secondary);
2414 | border-radius: 10px;
2415 | }
2416 | :root .root_fccaa9 .perksModal-CLcR1c .progressBar-20NUv9 {
2417 | z-index: 1;
2418 | }
2419 | :root .root_fccaa9 .perksModal-CLcR1c .progressBar-20NUv9 .bar-1g-wqp {
2420 | border-radius: 0;
2421 | }
2422 | :root .root_fccaa9 .perksModal-CLcR1c .progressBar-20NUv9 .tierMarkerBackground-G8FoN4 {
2423 | z-index: -10;
2424 | }
2425 | :root .root_fccaa9 .perksModal-CLcR1c .progressBar-20NUv9 .tierMarkerBackground-G8FoN4,
2426 | :root .root_fccaa9 .perksModal-CLcR1c .progressBar-20NUv9 .barBackground-unEPDT {
2427 | background: var(--background-secondary-alt-alt);
2428 | }
2429 | :root .root_fccaa9 .perksModal-CLcR1c .progressBar-20NUv9 .tierMarkerInProgress-2Tdxjz {
2430 | background: var(--background-primary) !important;
2431 | }
2432 | :root .root_fccaa9 .perksModal-CLcR1c .carouselContainerVisible-bGCrdY {
2433 | left: -15%;
2434 | }
2435 | :root .root_fccaa9 .perksModal-CLcR1c .carouselContainerVisible-bGCrdY .tierHeaderUnlocked-1IvR2R {
2436 | background: #b377f3;
2437 | }
2438 | :root .root_fccaa9 .perksModal-CLcR1c .carouselContainerVisible-bGCrdY .tierHeaderUnlocked-1IvR2R .tierUnlocked-1yG5Ic {
2439 | background: rgba(0, 0, 0, 0.4);
2440 | color: #fff;
2441 | }
2442 | :root .root_fccaa9 .perksModal-CLcR1c .carouselContainerVisible-bGCrdY .tierHeaderLocked-3ItHYn {
2443 | background: var(--background-secondary-alt-alt);
2444 | }
2445 | :root .root_fccaa9 .perksModal-CLcR1c .carouselContainerVisible-bGCrdY .tierBody-3ju-rc {
2446 | background: var(--background-secondary);
2447 | }
2448 | :root .root_fccaa9 .perksModal-CLcR1c .perk-19D_HN {
2449 | background: var(--background-secondary);
2450 | }
2451 | :root .root_fccaa9 .closeWrapper-1aVqeP {
2452 | padding-top: 72px;
2453 | }
2454 | :root .root_fccaa9 .closeWrapper-1aVqeP .closeButton_df5532:active {
2455 | transform: none;
2456 | }
2457 | :root .root_fccaa9 .closeWrapper-1aVqeP .closeButton_df5532::before {
2458 | content: "";
2459 | position: fixed;
2460 | top: 0;
2461 | left: -330px;
2462 | width: 330px;
2463 | height: 100%;
2464 | z-index: 100;
2465 | }
2466 | :root .role_f9575e,
2467 | :root .sidebar_e87574 .list_e87574 .item_a0,
2468 | :root .container_ac201b .item_eef3ef,
2469 | :root .roleRow-3HnunM {
2470 | position: relative;
2471 | overflow: hidden;
2472 | height: unset;
2473 | z-index: 1;
2474 | border: none;
2475 | padding: 5px;
2476 | border-radius: 20px;
2477 | margin-right: 4px;
2478 | margin-left: 0;
2479 | }
2480 | :root .role_f9575e .roleCircle_a26d7b::before,
2481 | :root .sidebar_e87574 .list_e87574 .item_a0 .roleCircle_a26d7b::before,
2482 | :root .container_ac201b .item_eef3ef .roleCircle_a26d7b::before,
2483 | :root .roleRow-3HnunM .roleCircle_a26d7b::before {
2484 | content: "";
2485 | position: absolute;
2486 | top: 0;
2487 | left: 0;
2488 | width: 100%;
2489 | height: 100%;
2490 | background: inherit;
2491 | opacity: 0.2;
2492 | z-index: -1;
2493 | pointer-events: none;
2494 | }
2495 | :root .roleRemoveButton_f9575e {
2496 | position: unset;
2497 | }
2498 | :root .roleRemoveButton_f9575e .roleRemoveIcon_e4010c {
2499 | left: 15px;
2500 | }
2501 | :root .container_ac201b {
2502 | border: none;
2503 | }
2504 | :root .container_ac201b .item_eef3ef {
2505 | margin-right: 5px;
2506 | }
2507 | :root .container_ac201b .container_c18ec9 {
2508 | border-radius: 8px;
2509 | }
2510 | :root .sidebar_e87574 {
2511 | border: none;
2512 | }
2513 | :root .sidebar_e87574 .list_e87574 {
2514 | padding-left: 16px;
2515 | }
2516 | :root .sidebar_e87574 .list_e87574 .item_a0 {
2517 | padding: 6px 10px;
2518 | margin-bottom: 6px;
2519 | border-radius: 25px;
2520 | }
2521 | :root #user-context-roles + .layer_cd0de5 .item_d90b3d {
2522 | flex-direction: row-reverse;
2523 | }
2524 | :root #user-context-roles + .layer_cd0de5 .item_d90b3d .iconContainer-1-SsTR {
2525 | margin: 0 8px 0 0;
2526 | }
2527 | :root #user-context-roles + .layer_cd0de5 .item_d90b3d .roleRow-3HnunM {
2528 | border-radius: 25px;
2529 | }
2530 | :root #user-context-roles + .layer_cd0de5 .item_d90b3d .roleRow-3HnunM .roleDot-2gCDg5 {
2531 | filter: none;
2532 | margin-right: 4px;
2533 | }
2534 | :root .root_f9a4c9,
2535 | :root .modal_c97cbd {
2536 | background: var(--background-primary);
2537 | box-shadow: unset;
2538 | border-radius: 10px;
2539 | }
2540 | :root .root_f9a4c9::-webkit-scrollbar,
2541 | :root .modal_c97cbd::-webkit-scrollbar {
2542 | display: none;
2543 | }
2544 | :root .root_f9a4c9 form,
2545 | :root .modal_c97cbd form {
2546 | display: flex;
2547 | flex-direction: column;
2548 | }
2549 | :root .root_f9a4c9.small_f9a4c9,
2550 | :root .modal_c97cbd.small_f9a4c9 {
2551 | min-height: unset;
2552 | }
2553 | :root .root_f9a4c9 .header_f9a4c9,
2554 | :root .modal_c97cbd .header_f9a4c9 {
2555 | text-align: center;
2556 | }
2557 | :root .root_f9a4c9 .separator_f9a4c9,
2558 | :root .modal_c97cbd .separator_f9a4c9 {
2559 | box-shadow: none;
2560 | }
2561 | :root .root_f9a4c9 .footer_f9a4c9,
2562 | :root .modal_c97cbd .footer_f9a4c9 {
2563 | padding: 0;
2564 | text-align: center;
2565 | background: transparent;
2566 | box-shadow: none;
2567 | min-height: 45px;
2568 | overflow: hidden;
2569 | border-radius: 0 0 10px 10px;
2570 | }
2571 | :root .root_f9a4c9 .footer_f9a4c9 button,
2572 | :root .modal_c97cbd .footer_f9a4c9 button {
2573 | flex-grow: 1;
2574 | margin: 0;
2575 | padding: 2px 16px;
2576 | box-shadow: none !important;
2577 | border-radius: 0;
2578 | min-height: 45px;
2579 | }
2580 | :root .root_f9a4c9 .footer_f9a4c9 .lookLink-15mFoz,
2581 | :root .modal_c97cbd .footer_f9a4c9 .lookLink-15mFoz {
2582 | background: rgba(255, 255, 255, 0.0666666667);
2583 | }
2584 | :root .root_f9a4c9 .footer_f9a4c9 > *,
2585 | :root .modal_c97cbd .footer_f9a4c9 > * {
2586 | width: 100%;
2587 | margin: 0;
2588 | }
2589 | :root .root_f9a4c9 .footer_f9a4c9 .cancelButton-kOgwem,
2590 | :root .root_f9a4c9 .footer_f9a4c9 .cancel-1Ph_Z1,
2591 | :root .modal_c97cbd .footer_f9a4c9 .cancelButton-kOgwem,
2592 | :root .modal_c97cbd .footer_f9a4c9 .cancel-1Ph_Z1 {
2593 | margin-right: 0;
2594 | }
2595 | :root .root_f9a4c9 .footer_f9a4c9 .minorContainer_acae5d,
2596 | :root .modal_c97cbd .footer_f9a4c9 .minorContainer_acae5d {
2597 | order: -1;
2598 | margin-bottom: 16px;
2599 | }
2600 | :root .root_f9a4c9 .qualitySettingsContainer-30AsSH,
2601 | :root .modal_c97cbd .qualitySettingsContainer-30AsSH {
2602 | border: none;
2603 | padding: 0;
2604 | }
2605 | :root .root_f9a4c9 .card-1SdQ2-,
2606 | :root .root_f9a4c9 .item-2OyinQ,
2607 | :root .modal_c97cbd .card-1SdQ2-,
2608 | :root .modal_c97cbd .item-2OyinQ {
2609 | border: none;
2610 | background: var(--background-secondary);
2611 | }
2612 | :root .root_f9a4c9 .changeButton-3QdaoH,
2613 | :root .modal_c97cbd .changeButton-3QdaoH {
2614 | border-radius: 3px;
2615 | }
2616 | :root .root_f9a4c9 .art-2OaYX0 + form > :nth-child(3) > :last-child,
2617 | :root .root_f9a4c9 .changeButton-3QdaoH,
2618 | :root .modal_c97cbd .art-2OaYX0 + form > :nth-child(3) > :last-child,
2619 | :root .modal_c97cbd .changeButton-3QdaoH {
2620 | background: rgba(255, 255, 255, 0.0666666667) !important;
2621 | }
2622 | :root .root_f9a4c9 .selectorButtonSelected-3Z0WNU,
2623 | :root .modal_c97cbd .selectorButtonSelected-3Z0WNU {
2624 | background: var(--main-color);
2625 | }
2626 | :root .root_f9a4c9 .primaryActions_ffaecb,
2627 | :root .modal_c97cbd .primaryActions_ffaecb {
2628 | flex-grow: 1;
2629 | }
2630 | :root .root_f9a4c9 .primaryActions_ffaecb .shinyButton_d5e126,
2631 | :root .modal_c97cbd .primaryActions_ffaecb .shinyButton_d5e126 {
2632 | width: 100%;
2633 | height: 100%;
2634 | border-radius: 0;
2635 | }
2636 | :root .root_f9a4c9.carouselModal-1eUFoq,
2637 | :root .modal_c97cbd.carouselModal-1eUFoq {
2638 | background: none;
2639 | }
2640 | :root .popout-1KHNAq {
2641 | border: none;
2642 | }
2643 | :root .popout-1KHNAq .option-2eIyOn {
2644 | background: var(--background-secondary);
2645 | }
2646 | :root .button_dd4f85 {
2647 | border-radius: 8px;
2648 | transition: box-shadow 200ms;
2649 | }
2650 | :root .lookFilled_dd4f85.colorBrand_dd4f85,
2651 | :root .lookFilled_dd4f85.colorBrand_dd4f85:hover {
2652 | background: var(--main-color) !important;
2653 | }
2654 | :root .item-2idW98[style*=background-color] {
2655 | background: var(--main-color) !important;
2656 | }
2657 | :root .checked_cebd1c {
2658 | border: none;
2659 | }
2660 | :root .checkbox-f1HnKB {
2661 | border-radius: 50%;
2662 | }
2663 | :root .bar_c7a159 {
2664 | background: var(--background-secondary-alt-alt);
2665 | }
2666 | :root .bar_c7a159 .barFill_c7a159 {
2667 | background: var(--main-color);
2668 | }
2669 | :root .grabber_c7a159 {
2670 | border: none;
2671 | background: transparent !important;
2672 | box-shadow: none;
2673 | }
2674 | :root .cardPrimary_a298b8,
2675 | :root .cardPrimaryEditable-2mz_3i,
2676 | :root .cardPrimaryOutline-1ofwVz {
2677 | border: none;
2678 | background: var(--background-secondary);
2679 | border-radius: 10px;
2680 | }
2681 | :root .card_ea2a21::before {
2682 | background-color: var(--background-secondary);
2683 | border: none;
2684 | }
2685 | :root .default_a467ac {
2686 | background-color: var(--background-secondary);
2687 | }
2688 | :root .input_f8bc55 {
2689 | border: none;
2690 | border-radius: 8px;
2691 | transition: background 0.4s;
2692 | }
2693 | :root .select_f6639d,
2694 | :root .item_eb92a8 {
2695 | border: none;
2696 | border-radius: 8px;
2697 | }
2698 | :root .popout_f6639d {
2699 | border: none;
2700 | border-radius: 8px;
2701 | margin-top: 5px;
2702 | }
2703 | :root .popout_f6639d.popoutPositionTop_f6639d {
2704 | margin-bottom: 5px;
2705 | }
2706 | :root .popout_f6639d::-webkit-scrollbar {
2707 | display: none;
2708 | }
2709 | :root .input_cebd1c,
2710 | :root .container_cebd1c {
2711 | border-radius: 8px;
2712 | }
2713 | :root .input_cebd1c rect,
2714 | :root .container_cebd1c rect {
2715 | rx: 8px;
2716 | }
2717 | :root .option_f6639d:hover {
2718 | background: rgba(255, 255, 255, 0.05) !important;
2719 | }
2720 | :root .option_f6639d:hover {
2721 | background: rgba(255, 255, 255, 0.05) !important;
2722 | }
2723 | :root .styleFixed-2_NfVL {
2724 | background: var(--background-primary);
2725 | box-shadow: unset;
2726 | }
2727 | :root .styleFlexible-x0_sIC,
2728 | :root .submenu_d90b3d {
2729 | overflow: hidden;
2730 | background: var(--background-secondary-alt);
2731 | box-shadow: unset;
2732 | }
2733 | :root .submenuPaddingContainer_d90b3d {
2734 | margin-left: -8px;
2735 | margin-right: -8px;
2736 | }
2737 | :root .button_a24e84,
2738 | :root .button_a24e84:hover {
2739 | background: var(--background-primary);
2740 | }
2741 | :root .item_d90b3d {
2742 | margin: 0;
2743 | padding: 8px 16px;
2744 | border-radius: 0;
2745 | transition: background 200ms;
2746 | }
2747 | :root .item_d90b3d:hover, :root .item_d90b3d.focused_d90b3d, :root .item_d90b3d:active:not(.hideInteraction_d90b3d) {
2748 | background-color: rgba(255, 255, 255, 0.05);
2749 | }
2750 | :root .accountProfilePopoutWrapper_b2ca13 {
2751 | position: fixed;
2752 | top: 0;
2753 | left: 0;
2754 | height: 100%;
2755 | }
2756 | :root .accountProfilePopoutWrapper_b2ca13 > div, :root .accountProfilePopoutWrapper_b2ca13 .userProfileInner_c69a7b {
2757 | height: 100%;
2758 | max-height: unset;
2759 | }
2760 | :root .accountProfilePopoutWrapper_b2ca13 .popoutContainer_ad5fac {
2761 | display: block;
2762 | height: 100%;
2763 | }
2764 | :root .accountProfilePopoutWrapper_b2ca13 .popoutContainer_ad5fac > div {
2765 | height: 100%;
2766 | }
2767 | :root .accountProfilePopoutWrapper_b2ca13 .container__0ec3c {
2768 | background: var(--background-tertiary);
2769 | }
2770 | :root .accountProfilePopoutWrapper_b2ca13 .container__0ec3c > .ctaContainer__95bd7 {
2771 | background-color: transparent;
2772 | }
2773 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b {
2774 | width: 330px;
2775 | height: 100%;
2776 | max-height: unset;
2777 | animation: sidebarStatusTransalteX 0.5s ease, fade 0.4s ease;
2778 | border-radius: 0;
2779 | background: var(--background-tertiary);
2780 | margin-right: 0;
2781 | padding: 0;
2782 | }
2783 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .userPopoutInner_c69a7b {
2784 | max-height: unset;
2785 | }
2786 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .userPopoutInner_c69a7b::before {
2787 | width: 100% !important;
2788 | height: 100% !important;
2789 | }
2790 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .userProfileInnerThemedNonPremium_c69a7b {
2791 | background: transparent;
2792 | }
2793 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .header_b8cc6d {
2794 | min-height: 230px;
2795 | }
2796 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .avatarWrapper_f89da9 {
2797 | left: calc(50% - 35px);
2798 | }
2799 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .body_ad5fac {
2800 | position: static;
2801 | }
2802 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .addCustomStatusButtonBubble_d0a252 {
2803 | left: 340px;
2804 | --custom-status-bubble-background: var(--background-tertiary);
2805 | }
2806 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .menus_ad5fac .menuOverlay_ad5fac {
2807 | padding: 0;
2808 | }
2809 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .menus_ad5fac .menuOverlay_ad5fac .button_f9d37d {
2810 | height: unset;
2811 | border-radius: 0;
2812 | }
2813 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .menus_ad5fac .menuOverlay_ad5fac .button_f9d37d .menuItemInner_ad5fac {
2814 | padding: 16px;
2815 | }
2816 | :root .accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b .menus_ad5fac .menuOverlay_ad5fac .menuDivider_ad5fac {
2817 | display: none;
2818 | }
2819 | :root div[role=group]:not(.profileGroup-1yKk23) .item_d90b3d.colorDefault-CDqZdO.focused_d90b3d, :root div[role=group]:not(.profileGroup-1yKk23) .item_d90b3d.colorDefault-CDqZdO:hover:not(.hideInteraction_d90b3d) {
2820 | background: var(--epicshadow1);
2821 | }
2822 | :root::-webkit-scrollbar-thumb {
2823 | background: var(--epicshadow1);
2824 | }
2825 | :root.full-motion .animatorTop-3ltI52 {
2826 | transition: unset !important;
2827 | }
2828 | :root .scroller_d90b3d {
2829 | overflow-y: auto !important;
2830 | padding-left: 0;
2831 | }
2832 | :root .scroller_d90b3d::-webkit-scrollbar-thumb {
2833 | background: var(--epicshadow1);
2834 | }
2835 | :root .avatarWrapper_b2ca13 .avatarSpeaking_c51b4e {
2836 | border-radius: var(--avatar-radius);
2837 | }
2838 | :root .streamPreview_adbea6 {
2839 | background: var(--background-secondary);
2840 | width: 330px;
2841 | }
2842 | :root .streamPreview_adbea6 .previewContainer_adbea6 {
2843 | background: var(--background-secondary);
2844 | height: 200px;
2845 | }
2846 | :root .tooltip-14MtrL {
2847 | background: var(--background-secondary-alt);
2848 | }
2849 | :root .tooltipPointer_b6c360 {
2850 | border-top-color: var(--background-secondary-alt) !important;
2851 | }
2852 | :root .modal-atz_3z .header_f9a4c9 {
2853 | box-shadow: none;
2854 | }
2855 | :root .modal-atz_3z .container__33507 {
2856 | background-color: var(--background-secondary);
2857 | }
2858 | :root .modal-atz_3z .title-3hptVQ {
2859 | margin: 8px;
2860 | }
2861 | :root .modal-atz_3z .input-2g-os5 {
2862 | border-radius: 0;
2863 | }
2864 | :root .modal-atz_3z .inviteRowButton-3hcOhY {
2865 | width: fit-content;
2866 | border: none;
2867 | }
2868 | :root .modal-atz_3z > .footer-1hTRRZ > .content-3nJg0c .inviteBannerUpsell-1t_LYM {
2869 | order: 3;
2870 | margin-top: 0;
2871 | }
2872 | :root .modal-atz_3z > .footer-1hTRRZ > .content-3nJg0c .footerText-2QLGHU {
2873 | margin: 8px 8px 16px;
2874 | order: 2;
2875 | }
2876 | :root .modal-atz_3z > .footer-1hTRRZ > .content-3nJg0c .input_f8bc55 {
2877 | order: 4;
2878 | }
2879 | :root .modal-atz_3z > .footer-1hTRRZ > .content-3nJg0c .marginBottom8_f7730b {
2880 | margin: 8px;
2881 | order: 1;
2882 | }
2883 | :root .modal-atz_3z .content-3nJg0c:before,
2884 | :root .modal-atz_3z .title-3hptVQ {
2885 | display: none;
2886 | }
2887 | :root .container_a4d79f {
2888 | background-color: var(--background-primary);
2889 | border-radius: 8px;
2890 | --background-primary: #252a3e;
2891 | --background-secondary: #1e2337;
2892 | --background-secondary-alt-alt: #1b1d31;
2893 | --header-primary: #d0d0d0;
2894 | --header-secondary: #fff;
2895 | --text-normal: #dcddde;
2896 | --text-muted: #dcddde;
2897 | --interactive-normal: #fff9f9;
2898 | --primary-400: #fff;
2899 | }
2900 | :root .container_a4d79f .container_a47d49 {
2901 | border: none;
2902 | background-color: var(--background-modifier-hover);
2903 | }
2904 | :root .container_a4d79f .input_f8bc55,
2905 | :root .container_a4d79f .input_e8a9c7 {
2906 | background-color: var(--background-secondary);
2907 | }
2908 | :root .container_a4d79f .footer_f9a4c9 .button_dd4f85.lookBlank_dd4f85 {
2909 | color: var(--header-secondary);
2910 | }
2911 | :root .container_f1fd9c,
2912 | :root .background_e85cee,
2913 | :root .header_f1fd9c,
2914 | :root .emptyPage_c6b11b,
2915 | :root .scrollerContainer_c6b11b,
2916 | :root .container_c2efea,
2917 | :root .container_d20375,
2918 | :root .page_d20375,
2919 | :root .pageBody_c2efea {
2920 | background-color: var(--background-primary) !important;
2921 | }
2922 | :root .row_b53f4f,
2923 | :root .container__33507,
2924 | :root .channelRow_f04d06 {
2925 | background-color: var(--background-secondary);
2926 | }
2927 | :root .container_b6cd66 {
2928 | background-color: var(--background-tertiary) !important;
2929 | }
2930 | :root .inviteButton_d32e26 {
2931 | background-color: var(--main-color);
2932 | }
2933 | :root .mainTableContainer_e23072 {
2934 | background-color: var(--background-secondary);
2935 | }
2936 | :root .tableHeaderRow_e6d0a5:first-child:after {
2937 | box-shadow: none;
2938 | }
2939 | :root .checkbox_f6cde8 {
2940 | background-color: var(--background-primary);
2941 | border: none;
2942 | }
2943 | :root .contentWrapper_ed5743 {
2944 | background: var(--background-primary);
2945 | }
2946 | :root .keyboardShortcutsModal_ad95dc {
2947 | background: var(--background-primary);
2948 | }
2949 | :root .keyboardShortcutsModal_ad95dc .keybindShortcut-3zF1P9 span {
2950 | background: var(--main-color);
2951 | }
2952 | :root .container__13b2a {
2953 | border-radius: 12px;
2954 | overflow: hidden;
2955 | }
2956 | :root .container__13b2a .header-2C89wJ {
2957 | background-color: var(--background-tertiary);
2958 | }
2959 | :root .container__13b2a section {
2960 | background-color: var(--background-primary);
2961 | }
2962 | :root .pictureInPictureWindow_e0c856 {
2963 | z-index: 10000;
2964 | }
2965 | :root .pictureInPictureVideo_cadaa5 .container_fc4f04 {
2966 | width: 100%;
2967 | }
2968 | :root .content_a7d72e:before,
2969 | :root .divider_fc4f04,
2970 | :root .separator_d90b3d {
2971 | display: none;
2972 | }
2973 | :root .attachWrapper_f298d4,
2974 | :root .panel_bf1a22,
2975 | :root .peopleListItem_d51464,
2976 | :root .rowWrapper_f1629a + .rowWrapper_f1629a .row_f1629a,
2977 | :root .header_f1629a,
2978 | :root .headerCell_f1629a,
2979 | :root .containerBackground_ccd3df {
2980 | border: none;
2981 | }
2982 | :root .headerText_c1d9fd,
2983 | :root .bodyTitle-Y0qMQz,
2984 | :root .userInfoSectionHeader-CBvMDh,
2985 | :root .title-3hptVQ,
2986 | :root .contentTitle_bcc24e,
2987 | :root .header-3A13BX,
2988 | :root .calendarPicker_be05cd .react-datepicker__current-month,
2989 | :root :root .react-datepicker__day-name,
2990 | :root .subSectionHeader-1bsAit {
2991 | text-transform: unset;
2992 | }
2993 | :root .mask_c51b4e img {
2994 | border-radius: 0 !important;
2995 | }
2996 | :root .mask_c51b4e foreignObject {
2997 | mask: none !important;
2998 | border-radius: var(--avatar-radius) !important;
2999 | }
3000 | :root .pointerEvents_c51b4e {
3001 | mask: none !important;
3002 | rx: 30;
3003 | }
3004 | :root .pointerEvents_c51b4e[mask="url(#svg-mask-status-typing)"] {
3005 | rx: 6;
3006 | }
3007 | :root .pointerEvents_c51b4e[mask="url(#svg-mask-status-online-mobile)"] {
3008 | rx: 4;
3009 | }
3010 | :root .ready_e40c16 {
3011 | display: none;
3012 | }
3013 | :root .ready_e40c16 + .text_e40c16 {
3014 | top: 82px;
3015 | }
3016 | :root .ready_e40c16 + .text_e40c16::before {
3017 | content: "";
3018 | position: absolute;
3019 | bottom: 100px;
3020 | left: 50px;
3021 | width: 200px;
3022 | height: 200px;
3023 | background: url("https://i.imgur.com/2XrlegJ.png") center/80% no-repeat;
3024 | animation: jump 1s infinite;
3025 | }
3026 | @keyframes jump {
3027 | 0% {
3028 | transform: translateY(0);
3029 | }
3030 | 20% {
3031 | transform: translateY(-25px);
3032 | }
3033 | 40% {
3034 | transform: translateY(0);
3035 | }
3036 | 60% {
3037 | transform: translateY(-12px);
3038 | }
3039 | 100% {
3040 | transform: translateY(0);
3041 | }
3042 | }
3043 | :root.full-motion .translate-PeW1wK {
3044 | transform: translateZ(0);
3045 | animation: zoom 0.3s ease, fade 0.3s ease;
3046 | }
3047 | @keyframes sidebarStatusTransalteX {
3048 | from {
3049 | transform: translateX(-15%);
3050 | }
3051 | to {
3052 | transform: none;
3053 | }
3054 | }
3055 | @keyframes sidebarStatusTransalteXReverse {
3056 | from {
3057 | transform: translateX(15%);
3058 | }
3059 | to {
3060 | transform: none;
3061 | }
3062 | }
3063 | @keyframes fade {
3064 | 0% {
3065 | opacity: 0;
3066 | }
3067 | 100% {
3068 | opacity: 1;
3069 | }
3070 | }
3071 | @keyframes zoom {
3072 | from {
3073 | transform: scale(1.05);
3074 | }
3075 | to {
3076 | transform: scale(1);
3077 | }
3078 | }
3079 | @keyframes callzoom {
3080 | from {
3081 | background: var(--background-primary);
3082 | margin: 0;
3083 | border-radius: 0;
3084 | opacity: 0;
3085 | }
3086 | to {
3087 | background: var(--background-secondary);
3088 | margin: 15px;
3089 | border-radius: 10px;
3090 | opacity: 1;
3091 | }
3092 | }
3093 | @keyframes blink {
3094 | 79% {
3095 | content: ">_<";
3096 | }
3097 | 80% {
3098 | content: "-_-";
3099 | }
3100 | 90% {
3101 | content: ">_<";
3102 | }
3103 | 100% {
3104 | content: "-_-";
3105 | }
3106 | }
3107 |
3108 | :root {
3109 | --brand-400: var(--main-color);
3110 | --brand-500: var(--main-color);
3111 | --text-brand: var(--main-color);
3112 | --control-brand-foreground: var(--main-color);
3113 | --card-secondary-bg: var(--background-secondary);
3114 | }
3115 |
3116 | :root .scale-3UGUBw.didRender-2SiRlm {
3117 | transform: scale(1) !important;
3118 | }
3119 | :root #status-picker.menu_d90b3d #status-picker-custom-status .labelContainer-2vJzYL {
3120 | padding: 0 16px;
3121 | }
3122 | :root #status-picker.menu_d90b3d #status-picker-custom-status + .layer_cd0de5 {
3123 | top: 432px !important;
3124 | left: 359px !important;
3125 | }
3126 | :root #status-picker.menu_d90b3d #status-picker-custom-status + .layer_cd0de5 .submenu-1apzyU {
3127 | background: var(--background-tertiary);
3128 | border-radius: 0 8px 8px 0;
3129 | }
3130 | :root .gameActivityToggleAdded-Yd-YxC > div:last-child button:first-child {
3131 | color: var(--main-color);
3132 | }
3133 | :root .activityPanel_a4d4d9 ~ .gameActivityToggleAdded-Yd-YxC > div:last-child button:first-child {
3134 | margin-right: 35px;
3135 | }
3136 | :root #MemberCount {
3137 | top: 48px;
3138 | }
3139 | :root #MemberCount .membersGroup_cbd271 {
3140 | margin-top: 0;
3141 | padding: 18px 8px 0 16px;
3142 | }
3143 | :root #MemberCount + .members_cbd271 {
3144 | margin-top: 0;
3145 | padding-top: 70px;
3146 | }
3147 | :root .mask_c51b4e > svg > mask > :not(:first-child) {
3148 | display: none;
3149 | }
3150 | :root .notice__5fd4c[id] {
3151 | margin: -30px 240px 0px 90px;
3152 | border-radius: 8px 8px 0 0 !important;
3153 | }
3154 | :root .notice__5fd4c[id] ~ .layers_d4b6c5 .sidebar_a4d4d9 {
3155 | border-radius: 0;
3156 | }
3157 | :root .ChannelDms-channelmembers-wrap {
3158 | width: 240px;
3159 | }
3160 | :root .ChannelDms-channelmembers-wrap .ChannelDms-channelmembers-header {
3161 | margin-top: -48px;
3162 | padding-top: 48px;
3163 | max-height: calc(100% + 48px);
3164 | background: var(--background-secondary);
3165 | border-bottom-width: 0px;
3166 | }
3167 | :root .ChannelDms-channelmembers-wrap .ChannelDms-channelmembers-header + div .membersWrap_cbd271 {
3168 | margin-top: 0;
3169 | max-height: unset;
3170 | }
3171 | :root .ChannelDms-channelmembers-wrap .ChannelDms-channelmembers-header + div .membersWrap_cbd271 .members_cbd271 {
3172 | padding-top: 0;
3173 | }
3174 | :root #channelTabs-container {
3175 | position: relative;
3176 | left: 80px;
3177 | width: calc(100% - 96px);
3178 | background-color: var(--background-tertiary);
3179 | }
3180 | :root #channelTabs-container ~ .layers_d4b6c5 .guilds_a4d4d9 {
3181 | margin-top: -85px;
3182 | }
3183 | :root ul[data-list-id=guildfoldersnav] {
3184 | margin-top: 12px;
3185 | }
3186 | :root .vc-addon-name-author {
3187 | white-space: nowrap;
3188 | overflow: hidden;
3189 | text-overflow: ellipsis;
3190 | }
3191 |
--------------------------------------------------------------------------------
/betterdiscord/couve.theme.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @name Couve
3 | * @author A user#8169, Nyria#3863
4 | * @description A new look to discord
5 | * @invite rtBQX5D3bD
6 | * @version 2.3.0
7 | */
8 |
9 | @import url("https://nyri4.github.io/Couve/betterdiscord/app.css");
10 |
11 | /* Settings */
12 | :root {
13 | --version: "2.3.0";
14 |
15 | /* Colors */
16 | --main-color: #419e85;
17 |
18 | /* Borders */
19 | --avatar-radius: 8px;
20 | }
21 |
22 | /* Dark/Light vars */
23 | .theme-dark {
24 | /* BGs */
25 | --background-primary: #252a3e;
26 | --background-secondary: #1e2337;
27 | --background-secondary-alt: #1c2438;
28 | --background-secondary-alt-alt: #1b1d31;
29 | --background-tertiary: #060c24;
30 |
31 | --deprecated-store-bg: var(--background-primary);
32 | --background-floating: var(--background-secondary);
33 | --background-mobile-primary: var(--background-primary);
34 | --activity-card-background: var(--background-secondary);
35 | --input-background: var(--background-secondary);
36 | --modal-background: var(--background-primary);
37 |
38 | --colortransparency: #0003;
39 |
40 | /* Cards */
41 | --card: #212332;
42 |
43 | /* Other stuff */
44 | --textcolor: #fff;
45 | --epicshadow1: #fff3;
46 |
47 | /* Font */
48 | --font-display: var(--font-primary) !important;
49 | }
50 |
51 | .theme-light {
52 | /* BGs */
53 | --background-primary: #fafafa;
54 | --background-secondary: #f7f7f7;
55 | --background-secondary-alt: #fff;
56 | --background-secondary-alt-alt: #eee;
57 | --background-tertiary: #fff;
58 |
59 | --deprecated-store-bg: var(--background-primary);
60 | --background-floating: var(--background-secondary);
61 | --background-mobile-primary: var(--background-primary);
62 | --activity-card-background: var(--background-secondary);
63 | --modal-background: var(--background-primary);
64 |
65 | --colortransparency: #0001;
66 |
67 | /* Cards */
68 | --card: #aaaaaa;
69 |
70 | /* Other stuff */
71 | --textcolor: #000;
72 | --epicshadow1: #0003;
73 | }
74 |
--------------------------------------------------------------------------------
/stuff/_channel-bar.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // Removing help buttons
3 | .toolbar_fc4f04 > :last-child[href="https://support.discord.com"],
4 | .searchLearnMore_b0286e {
5 | display: none;
6 | }
7 |
8 | // Top bar
9 | .container_fc4f04.title_a7d72e:not(.minimum_d880dc) {
10 | z-index: 1;
11 | background: transparent;
12 | width: calc(100% - 240px);
13 |
14 | .toolbar_fc4f04,
15 | .topic_bf3bbb {
16 | -webkit-app-region: no-drag;
17 | }
18 | .icon_fc4f04 {
19 | -webkit-app-region: unset;
20 | }
21 | .followButton_a7d72e,
22 | .children_fc4f04:after {
23 | display: none;
24 | }
25 |
26 | // Search bar
27 | .search_ff5f90 {
28 | position: fixed;
29 | right: 10px;
30 |
31 | .searchBar_a46bef {
32 | background: var(--background-primary);
33 | width: 200px;
34 | height: 28px;
35 | padding: 2px 10px;
36 | border-radius: 4px;
37 |
38 | .searchFilter_b0fa94,
39 | .searchAnswer_b0fa94 {
40 | background: transparent;
41 | }
42 | .icon_effbe2 {
43 | color: var(--main-color);
44 | }
45 | }
46 | }
47 | }
48 |
49 | // Search popout
50 | .container_eedf95 {
51 | background: var(--background-secondary-alt-alt);
52 | box-shadow: none;
53 |
54 | .resultsGroup_b0286e {
55 | // Options
56 | .option_b0286e {
57 | padding: 0 20px;
58 | margin: 0;
59 | border-radius: 0;
60 |
61 | &.selected-rZcOL-,
62 | &[aria-selected="true"] {
63 | background: var(--background-secondary);
64 | }
65 | &:after {
66 | display: none;
67 | }
68 | }
69 | }
70 |
71 | // Datepicker (yeah this exist)
72 | .calendarPicker_be05cd .react-datepicker {
73 | background: transparent;
74 | border-radius: 0;
75 |
76 | // Header
77 | .react-datepicker__header {
78 | background: transparent;
79 |
80 | .react-datepicker__current-month {
81 | border-bottom: none;
82 | }
83 | }
84 |
85 | &__navigation--next,
86 | &__navigation--previous {
87 | border: none;
88 | border-radius: 50%;
89 |
90 | &:hover {
91 | background-color: var(--epicshadow1);
92 | }
93 | }
94 |
95 | [class^="react-datepicker__day"] {
96 | background: transparent;
97 | }
98 | .react-datepicker__day {
99 | border-color: var(--background-tertiary);
100 |
101 | &--selected:after,
102 | &--selected:hover,
103 | &:hover {
104 | background: var(--main-color);
105 | }
106 | }
107 | }
108 | .datePickerHint_b0286e .hintValue_b0286e {
109 | background: var(--main-color);
110 | }
111 | }
112 |
113 | // Search results
114 | .searchResultsWrap_c2b47d {
115 | background: var(--background-secondary);
116 | top: -48px;
117 | padding-top: 48px;
118 | width: 480px;
119 | height: 100%;
120 |
121 | .searchHeader_b7c924 {
122 | position: absolute;
123 | width: 100%;
124 | background: linear-gradient(
125 | 180deg,
126 | var(--background-secondary),
127 | transparent
128 | );
129 | }
130 |
131 | .scroller_c2b47d {
132 | padding: 0;
133 | padding-top: 48px;
134 |
135 | & > div {
136 | padding: 0 14px 0 20px;
137 | }
138 |
139 | .channelName-3w2Y3c {
140 | background: transparent;
141 | padding: 8px 0;
142 | }
143 |
144 | .searchResult_ddc613 {
145 | border: none;
146 | box-shadow: none;
147 | border-radius: 10px;
148 | }
149 |
150 | .pageButton_b48941 {
151 | background-color: var(--background-primary);
152 |
153 | &.activeButton_b48941 {
154 | background-color: var(--main-color);
155 | }
156 | }
157 | }
158 | }
159 |
160 | // Inbox
161 | .recentMentionsPopout_ddb5b4 {
162 | position: fixed;
163 | top: 0;
164 | right: 0;
165 | min-height: 100%;
166 | max-height: 100% !important;
167 | //animation: sidebarStatusTransalteXReverse 0.5s ease, fade 0.4s ease;
168 | border-radius: 0;
169 | background: var(--background-secondary);
170 | box-shadow: var(--elevation-high);
171 |
172 | // Header
173 | .header_ac90a2 {
174 | background-color: var(--background-tertiary);
175 | }
176 |
177 | .item_a0 {
178 | margin-bottom: 0 !important;
179 |
180 | &.brand_a0.selected_a0.item_a0, &.brand_a0.item_a0:active {
181 | border-bottom-color: var(--main-color) !important;
182 | }
183 | }
184 |
185 | // For you tab > Friend requests
186 | .row_fd8ff1 {
187 | background: var(--background-primary);
188 | margin: 12px;
189 | border-radius: 12px;
190 | }
191 | }
192 |
193 | // Pinned messages
194 | .messagesPopoutWrap_ac90a2:not(.recentMentionsPopout_ddb5b4) {
195 | position: fixed;
196 | top: 84px;
197 | left: 330px;
198 | width: calc(100% - 570px);
199 | max-height: calc(100% - 84px) !important;
200 | height: 100%;
201 | box-shadow: unset;
202 | background: var(--background-primary);
203 | border-radius: 0;
204 |
205 | .header_ac90a2 {
206 | background: var(--background-primary);
207 | text-align: center;
208 | box-shadow: none;
209 | }
210 |
211 | .messagesPopout_ac90a2 {
212 | padding: 12px 0 0 12px;
213 |
214 | .messageGroupWrapper_ac90a2 {
215 | padding: 8px;
216 | margin-bottom: 12px;
217 | border: none;
218 | background: var(--background-secondary);
219 | border-radius: 12px;
220 | }
221 |
222 | &::-webkit-scrollbar {
223 | width: 8px;
224 | margin-left: 5px;
225 |
226 | &-thumb {
227 | border: none;
228 | background: var(--background-secondary) !important;
229 | border-radius: 6px 0 0 6px;
230 | }
231 |
232 | &-track-piece {
233 | display: none;
234 | }
235 | }
236 | }
237 | }
238 | }
--------------------------------------------------------------------------------
/stuff/_channel-list.scss:
--------------------------------------------------------------------------------
1 | :root {
2 |
3 | // Server name
4 | .header_fd6364 {
5 | box-shadow: none;
6 | padding: 25px;
7 | border-radius: 8px;
8 | background: transparent !important;
9 | }
10 |
11 | // Discord weird way to make space between server name and channels
12 | #channels div[style="height: 12px;"], #channels div[style="height: 16px;"] {
13 | display: none;
14 | }
15 |
16 | // Channel notice
17 | .channelNotice-tO6Tus,
18 | .channelNotice-3DDmsB {
19 | box-shadow: none;
20 | width: 170px;
21 | background: transparent;
22 | margin: 15px;
23 | padding: 20px;
24 | background: var(--background-primary);
25 | border-radius: 10px;
26 | position: absolute;
27 | top: 0;
28 | z-index: 10;
29 | height: 60px;
30 | transition: height 400ms;
31 |
32 | &::before {
33 | content: "announcement";
34 | position: absolute;
35 | top: 50%;
36 | left: 50%;
37 | transform: translateX(-50%) translateY(-50%);
38 | opacity: 1;
39 | color: var(--textcolor);
40 | z-index: 1;
41 | font-size: 24px;
42 | font-family: "Material Icons", sans-serif;
43 | transition: opacity 200ms;
44 | }
45 |
46 | .message-3KLVy1 {
47 | opacity: 0;
48 | pointer-events: none;
49 | transition: opacity 400ms;
50 | position: absolute;
51 | top: 50%;
52 | left: 50%;
53 | transform: translateY(-50%) translateX(-50%);
54 | width: 100%;
55 | margin-bottom: auto;
56 |
57 | .btn-38SvSS,
58 | .btn-38SvSS:hover {
59 | background: var(--background-secondary-alt-alt);
60 | margin: 0 auto;
61 | margin-top: 20px;
62 | z-index: 1;
63 | width: unset;
64 | }
65 |
66 | & > div {
67 | margin-bottom: auto;
68 | }
69 | }
70 |
71 | .message-39hdqk {
72 | opacity: 0;
73 | margin-top: 30px;
74 | pointer-events: none;
75 | width: calc(100% + 20px);
76 | transition: opacity 400ms;
77 | }
78 |
79 | .button_dd4f85 {
80 | background: var(--background-secondary-alt-alt);
81 | opacity: 0;
82 | pointer-events: none;
83 | transition: opacity 400ms;
84 | }
85 |
86 | &:hover {
87 | height: 160px;
88 |
89 | .message-3KLVy1,
90 | .message-39hdqk {
91 | pointer-events: all;
92 | opacity: 1;
93 | }
94 | &::before {
95 | opacity: 0;
96 | }
97 | .button_dd4f85 {
98 | opacity: 1;
99 | pointer-events: all;
100 | }
101 | }
102 | }
103 |
104 | // Categories
105 | .wrapper_a08117 {
106 | padding: 0 22px;
107 | }
108 |
109 | .container_a5ad5c {
110 | color: var(--textcolor);
111 | text-transform: unset;
112 | font-size: 14px;
113 | }
114 |
115 | // No arrows for categories
116 | .icon_a08117 {
117 | display: none;
118 | }
119 |
120 | // Channels
121 | .wrapper_d8bfb3 {
122 | height: 30px;
123 | margin: 0;
124 |
125 | .link_d8bfb3 {
126 | padding: 6px 20px;
127 | border-radius: 0;
128 | }
129 | }
130 | .unread_d8bfb3 {
131 | left: 0;
132 | }
133 |
134 | // Thread channels
135 | .typeThread_d8bfb3 .name_d8bfb3 {
136 | padding-left: 28px;
137 | }
138 |
139 | // New message bar
140 | .containerPadding_eba0ba {
141 | padding: 0;
142 | margin: 0 0 4px 0;
143 |
144 | .bar_eba0ba {
145 | padding: 8px;
146 | border-radius: 4px;
147 | background: var(--main-color);
148 |
149 | .barText_eba0ba, .unreadIcon_eba0ba {
150 | color: white !important;
151 | }
152 | }
153 | }
154 |
155 | // No scrollbars
156 | .scroller_c43953,
157 | .scroller_fea3ef,
158 | #channels {
159 | &::-webkit-scrollbar {
160 | display: none;
161 | }
162 | }
163 |
164 | // List of people on call channels
165 | .containerDefault_f6f816:has(.linkBottom_d8bfb3) .list_a478e5 {
166 | background-color: var(--background-primary);
167 | margin: 12px;
168 | padding: 0;
169 | border-radius: 12px;
170 |
171 | .draggable_ac3629, .voiceUser_d80634 {
172 | height: 40px;
173 | }
174 |
175 | .content_d80634 {
176 | padding-left: 2px;
177 | height: 100%;
178 | border-radius: 0;
179 |
180 | .avatar_d80634 {
181 | border-radius: var(--avatar-radius);
182 | }
183 | }
184 |
185 | // me when no overflow: hidden
186 | .draggable_ac3629:first-child .content_d80634 {
187 | border-radius: 12px 12px 0 0;
188 | }
189 | .draggable_ac3629:last-child .content_d80634 {
190 | border-radius: 0 0 12px 12px;
191 | }
192 | }
193 | }
--------------------------------------------------------------------------------
/stuff/_chat.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // Messages
3 | .messagesWrapper_e2e187 {
4 | flex-direction: column;
5 |
6 | .cozy_f9f2ca.wrapper_f9f2ca {
7 | padding-left: 50px;
8 |
9 | &.groupStart_d5deea .contents_f9f2ca::after {
10 | left: 48px;
11 | width: 30px;
12 | height: 30px;
13 | }
14 |
15 | // Avatar
16 | .avatar_f9f2ca {
17 | position: relative;
18 | left: -2px;
19 | width: 30px;
20 | height: 30px;
21 | border-radius: var(--avatar-radius);
22 | }
23 |
24 | .avatarDecoration_f9f2ca {
25 | left: 43px;
26 | width: 40px;
27 | height: 40px;
28 | }
29 |
30 | // Username
31 | .header_f9f2ca {
32 | left: 38px;
33 | margin-top: -30px;
34 | margin-bottom: 10px;
35 | width: 100%;
36 | }
37 |
38 | // Timestamps
39 | .timestamp_f9f2ca.alt_f9f2ca {
40 | position: absolute;
41 | font-size: 0.6875rem !important;
42 | right: 10px;
43 | left: unset;
44 | opacity: 0;
45 | }
46 | &:hover .timestamp_f9f2ca {
47 | opacity: 1;
48 | }
49 |
50 | // Pins
51 | .iconContainer_d76df7 {
52 | position: unset;
53 | width: unset;
54 | margin-right: 10px;
55 | }
56 |
57 | // Replied messages
58 | .repliedMessage_f9f2ca {
59 | margin-left: 48px;
60 |
61 | .replyAvatar_f9f2ca {
62 | border-radius: calc(var(--avatar-radius) - 3px);
63 | }
64 | }
65 |
66 | // Blockquotes
67 | .blockquoteContainer_f8f345 {
68 | .blockquoteDivider_f8f345 {
69 | display: none;
70 | }
71 |
72 | blockquote {
73 | padding: 12px;
74 | background: var(--background-secondary);
75 | border-radius: 4px;
76 | width: 100%;
77 | }
78 | }
79 |
80 | .shiki-container {
81 | background-color: transparent;
82 |
83 | .shiki-root {
84 | background-color: var(--background-secondary) !important;
85 | border-radius: 8px;
86 | overflow: hidden;
87 | }
88 | }
89 |
90 | // Threads
91 | &.hasThread_f9f2ca {
92 | &::after {
93 | top: 2.5rem;
94 | left: 3.5rem;
95 | }
96 |
97 | & > .contents_f9f2ca > [id^="message-content-"] {
98 |
99 | }
100 |
101 | .container_c15230 {
102 | margin-left: 48px;
103 | border-radius: 8px;
104 | }
105 | }
106 | }
107 |
108 | .scroller_e2e187::-webkit-scrollbar {
109 | display: none;
110 | }
111 | }
112 |
113 | // Message buttons
114 | .wrapper_f7e168 {
115 | border: none;
116 | box-shadow: none;
117 | background: var(--background-secondary);
118 |
119 | &:hover {
120 | box-shadow: none;
121 | }
122 | }
123 |
124 | // Bots tag
125 | .botTagRegular_a9e77f {
126 | border-radius: 5px;
127 | background: var(--main-color);
128 | }
129 |
130 | // botTagOP_e48ddb
131 | .botTagOP_e48ddb {
132 | color: white;
133 | }
134 |
135 | // Mentions
136 | .wrapper_d4fa29 {
137 | background: transparent !important;
138 | position: relative;
139 | color: var(--main-color) !important;
140 |
141 | &.mention {
142 | border-radius: 5px;
143 | }
144 |
145 | &:hover::after {
146 | opacity: 0.2;
147 | }
148 |
149 | &::after {
150 | content: "";
151 | position: absolute;
152 | top: 0;
153 | left: 0;
154 | width: 100%;
155 | height: 100%;
156 | background-color: var(--main-color);
157 | opacity: 0.08;
158 | border-radius: 5px;
159 | transition: opacity 200ms;
160 | pointer-events: none;
161 | }
162 | }
163 |
164 | // New Messages
165 | .newMessagesBar_cf58b5 {
166 | position: static;
167 | margin: 5px 40px 0 40px;
168 | padding: 5px;
169 | background: var(--background-secondary);
170 | border-radius: 7px;
171 | opacity: 1;
172 |
173 | .barButtonMain_cf58b5 {
174 | opacity: 0.6;
175 | }
176 | .barButtonAlt_cf58b5 {
177 | display: none;
178 | }
179 | }
180 |
181 | // Mesage Dividers
182 | .divider_c2654d {
183 | margin: 0 56px;
184 | border: none;
185 | height: unset;
186 | background: transparent;
187 |
188 | &.isUnread_c2654d:not(.hasContent_c2654d) {
189 | margin: 10px 47px;
190 | margin-top: 5px !important;
191 | margin-bottom: 5px !important;
192 | }
193 |
194 | .content_c2654d,
195 | ---new-messages-bar .unreadPill_c2654d {
196 | background: var(--background-secondary);
197 | width: 100%;
198 | padding: 10px;
199 | text-align: center;
200 | border-radius: 5px;
201 | height: unset;
202 | }
203 |
204 | .unreadPill_c2654d {
205 | position: relative;
206 | color: #f04747;
207 | top: 0;
208 |
209 | .unreadPillCap_c2654d {
210 | display: none;
211 | }
212 | }
213 |
214 | ---new-messages-bar .content_c2654d {
215 | border-radius: 5px 0 0 5px;
216 |
217 | & + .unreadPill_c2654d {
218 | border-radius: 0 5px 5px 0;
219 | padding-top: 12px;
220 | padding-bottom: 12px;
221 | }
222 | }
223 | }
224 |
225 | // Jump to present
226 | .jumpToPresentBar_cf58b5 {
227 | bottom: 15px;
228 | left: unset;
229 | height: 40px;
230 | padding-bottom: 0;
231 | background: var(--background-secondary);
232 | border-radius: 8px;
233 |
234 | .barButtonAlt_cf58b5 {
235 | text-indent: -10000px;
236 | font-size: 0;
237 | padding: 0 6px;
238 |
239 | .barButtonIcon_cf58b5 {
240 | margin-left: 0;
241 | width: 28px;
242 | height: 28px;
243 | }
244 | }
245 | .barButtonMain_cf58b5 {
246 | display: none;
247 | }
248 |
249 | .spinner_cf58b5 {
250 | padding: 0 5px;
251 | }
252 | }
253 |
254 | // Emoji picker
255 |
256 | // Resizing
257 | .resizeHandle_af5dbb {
258 | &::before {
259 | content: "";
260 | position: fixed;
261 | top: 0;
262 | left: 0;
263 | width: 100%;
264 | height: calc(100% + 36px);
265 | background: #0005;
266 | border-radius: 8px;
267 | opacity: 0;
268 | pointer-events: none;
269 | transition: opacity 0.3s;
270 | }
271 |
272 | &:active::before {
273 | opacity: 1;
274 | pointer-events: all;
275 | }
276 | }
277 |
278 | .navButtonActive_af5dbb {
279 | background: var(--background-primary);
280 | }
281 |
282 | #emoji-picker-tab-panel {
283 | border-radius: 8px 8px 0 0;
284 |
285 | .header_c6ee36 {
286 | box-shadow: none;
287 | }
288 |
289 | // Discord's capitalism
290 | .premiumPromo_ca9b56 {
291 | background: var(--background-secondary);
292 | opacity: 1;
293 | animation:
294 | fade 0.3s ease,
295 | zoom 0.3s ease;
296 | }
297 |
298 | &.wrapper_c6ee36 {
299 | margin-bottom: 8px;
300 | }
301 |
302 | .container_effbe2,
303 | .emojiItem_fbfedd.emojiItemSelected_fbfedd {
304 | background: var(--background-primary);
305 | }
306 |
307 | .imageLoading_b000dd {
308 | background-image: none !important;
309 | background-color: var(--background-primary);
310 | border-radius: 8px;
311 | }
312 |
313 | .inspector_c3120f {
314 | position: absolute;
315 | top: -50px;
316 | right: 0;
317 | padding: 0 8px;
318 | justify-content: end;
319 | width: unset;
320 | max-width: 220px;
321 | background: transparent;
322 | }
323 |
324 | .diversitySelectorOptions_cce80d {
325 | background: var(--background-primary);
326 | border: none;
327 | }
328 |
329 | &:not(.emojiPickerInExpressionPicker-2nOwH8) {
330 | .inspector_c3120f {
331 | position: absolute;
332 | top: unset;
333 | bottom: 0;
334 | right: 0;
335 | left: 48px;
336 | padding: 0 16px;
337 | max-width: unset;
338 | background: linear-gradient(transparent, var(--background-secondary));
339 | }
340 | }
341 |
342 | .wrapper_dc0b29 {
343 | background: var(--background-secondary);
344 |
345 | .scroller_d53d65::-webkit-scrollbar {
346 | display: none;
347 | }
348 | }
349 |
350 | .badgeLabel_c3120f {
351 | display: none;
352 | }
353 | }
354 |
355 | .positionContainer_af5dbb {
356 | height: 414px;
357 | bottom: calc(100% - 8px);
358 | transform: translateZ(0);
359 | }
360 |
361 | // GIF
362 | .contentWrapper_af5dbb .header_b56bbc {
363 | box-shadow: none;
364 |
365 | .inner__999f6 {
366 | height: 34px;
367 | background: var(--background-primary);
368 |
369 | .iconLayout__67261 {
370 | width: 30px;
371 | height: 30px;
372 | }
373 | }
374 | }
375 |
376 | // Stickers
377 | #sticker-picker-tab-panel {
378 | .header_d8cdac {
379 | box-shadow: none;
380 | }
381 |
382 | & .container_effbe2 {
383 | background-color: var(--background-primary);
384 | }
385 |
386 | .wrapper_dc0b29 {
387 | background: var(--background-secondary);
388 |
389 | .scroller_d53d65::-webkit-scrollbar {
390 | display: none;
391 | }
392 | }
393 | }
394 |
395 | // -- Upload Modal --
396 | .uploadModal_f82cc7 {
397 | background: var(--background-primary);
398 | box-shadow: unset;
399 | width: 1000px;
400 | height: 400px;
401 | border-radius: 15px;
402 |
403 | .inner_f82cc7 .comment_f82cc7,
404 | .inner_f82cc7 .file_f82cc7 .description_f82cc7 {
405 | margin-left: 55%;
406 | margin-right: 30px;
407 | }
408 |
409 | .inner_f82cc7 {
410 | .comment_f82cc7 .label_f82cc7 {
411 | text-transform: unset;
412 | font-size: 12px;
413 | opacity: 0.8;
414 | }
415 |
416 | .file_f82cc7 {
417 | height: 75px;
418 |
419 | .description_f82cc7 {
420 | margin-top: 15px;
421 |
422 | .filename_f82cc7 {
423 | font-weight: 550;
424 | }
425 | }
426 |
427 | .icon_f82cc7 {
428 | background-color: var(--background-secondary);
429 | background-size: 70px;
430 |
431 | &.video_f82cc7 {
432 | background-image: url(https://cdn.discordapp.com/attachments/539180316447997974/705623014334791720/videocam-white-18dp.svg);
433 | }
434 | &.acrobat_f82cc7 {
435 | background-image: url(https://cdn.discordapp.com/attachments/539180316447997974/705623972791975936/picture_as_pdf-white-18dp.svg);
436 | }
437 | }
438 | }
439 | }
440 |
441 | .footer_f82cc7 {
442 | background-color: transparent;
443 | box-shadow: unset;
444 | position: absolute;
445 | right: 20px;
446 | bottom: 10px;
447 | }
448 |
449 | .checkboxWrapper_f6cde8 .checkbox_f6cde8 {
450 | opacity: 0;
451 | visibility: hidden;
452 | transition: 0.2s;
453 |
454 | &.checked_f6cde8::before {
455 | color: var(--textcolor);
456 | content: "visibility_off";
457 | }
458 |
459 | &:hover,
460 | .checked_f6cde8 {
461 | opacity: 1;
462 | }
463 |
464 | &::before {
465 | content: "visibility";
466 | position: absolute;
467 | top: 0;
468 | left: 0;
469 | width: 100%;
470 | height: 100%;
471 | background: #0008;
472 | text-align: center;
473 | line-height: 350px;
474 | color: #fff6;
475 | font-size: 72px;
476 | font-family: "Material Icons", sans-serif;
477 | visibility: visible;
478 | border-radius: 19px;
479 | }
480 | }
481 |
482 | .labelForward_f6cde8 {
483 | display: none;
484 | }
485 |
486 | .inner_f82cc7 .file_f82cc7 .icon_f82cc7.image_f82cc7,
487 | .checkboxWrapper_f6cde8,
488 | .inner_f82cc7 .file_f82cc7 .icon_f82cc7 {
489 | position: fixed;
490 | top: 20px;
491 | left: 10px;
492 | width: 48% !important;
493 | height: 350px !important;
494 | margin-top: 0 !important;
495 | margin-left: 16px !important;
496 | margin-right: 16px !important;
497 | box-shadow: unset;
498 | border-radius: 20px;
499 | }
500 |
501 | .scrollableContainer_d0696b.webkit__8d35a {
502 | max-height: 215px;
503 | }
504 | }
505 |
506 | // Autocomplete
507 | .autocomplete_bcc24e {
508 | background: var(--background-secondary);
509 | bottom: calc(100% - 8px);
510 | border-radius: 8px 8px 0 0;
511 |
512 | .categoryHeader_fe2299 {
513 | background-color: var(--background-tertiary);
514 | border-radius: 6px;
515 |
516 | &::after {
517 | content: none;
518 | }
519 | }
520 |
521 | .contentTitle_bcc24e {
522 | color: var(--textcolor);
523 | }
524 |
525 | .scroller_d53d65 {
526 | overflow: visible !important;
527 | }
528 | }
529 |
530 | // Audio files
531 | .wrapperAudio_f316dd {
532 | background: var(--background-secondary);
533 | border: none;
534 | border-radius: 7px;
535 | padding: 0;
536 |
537 | .audioMetadata_f316dd {
538 | padding: 10px;
539 | }
540 | .audioControls_f316dd {
541 | background: transparent;
542 |
543 | .mediaBarWrapper_f7877e {
544 | &:hover {
545 | box-shadow: none;
546 | }
547 |
548 | .mediaBarProgress_f7877e,
549 | .mediaBarProgress_f7877e:after,
550 | .mediaBarProgress_f7877e:before,
551 | .mediaBarGrabber_f7877e {
552 | background: var(--main-color) !important;
553 | }
554 | }
555 | }
556 | }
557 |
558 | // Embeds
559 | .embedFull_b0068a {
560 | width: calc(100% + 100px);
561 | max-width: unset !important;
562 | left: -50px;
563 | border-radius: 0;
564 | border-color: var(--background-secondary-alt-alt);
565 | position: relative;
566 | overflow: hidden;
567 |
568 | .grid_b0068a {
569 | margin-left: 34px;
570 | margin-right: 12px;
571 |
572 | .embedSuppressButton_b0068a {
573 | top: 12px;
574 | right: 12px;
575 | }
576 | }
577 | }
578 |
579 | .theme-light .embedFull_b0068a {
580 | background: var(--background-secondary-alt-alt);
581 | border-color: var(--card);
582 | }
583 |
584 | // Server invite
585 | .wrapper_a71a1c {
586 | background: var(--background-secondary);
587 | border-radius: 10px;
588 |
589 | .header_a71a1c {
590 | display: none;
591 | }
592 |
593 | .count_a71a1c {
594 | font-weight: 500;
595 | color: var(--textcolor);
596 | }
597 | }
598 |
599 | // Codeblocks
600 | .markup_f8f345 code {
601 | border: none;
602 | background: var(--colortransparency);
603 | border-radius: 10px;
604 | }
605 | .hljs .powercord-lines:after,
606 | .powercord-codeblock-lang {
607 | border: none;
608 | }
609 | .powercord-codeblock-lang {
610 | padding: 3px 10px;
611 | }
612 |
613 | .textContainer_d8e2d0,
614 | .footer_d8e2d0 {
615 | border: none;
616 |
617 | .scrollbar_c858ce::-webkit-scrollbar {
618 | display: none;
619 | }
620 | }
621 | .textContainer_d8e2d0 {
622 | border-radius: 10px 10px 0 0;
623 | }
624 | .footer_d8e2d0 {
625 | border-radius: 0 0 10px 10px;
626 | }
627 |
628 | // Spoilers
629 | .spoilerText-27bIiA.hidden-3B-Rum,
630 | .spoilerText-27bIiA.hidden-3B-Rum:hover {
631 | background-color: var(--background-secondary);
632 | }
633 |
634 | // Spotify embeds
635 | .embedSpotify_b0068a {
636 | border-radius: 5px;
637 | }
638 |
639 | // Spotify invites
640 | .invite_f61cb8 {
641 | background: var(--background-secondary);
642 | border: none;
643 | }
644 |
645 | // Gifts
646 | .tile_ab47a1 {
647 | transform: translateZ(0);
648 | overflow: hidden;
649 | background: var(--background-secondary);
650 |
651 | &:hover {
652 | background: var(--background-secondary-alt-alt);
653 | }
654 |
655 | .invalidPoop_ff31dd {
656 | background: var(--background-secondary-alt-alt);
657 | position: relative;
658 |
659 | &::after {
660 | content: ">_<";
661 | animation: blink 2.5s;
662 | animation-iteration-count: infinite;
663 | font-size: 50px;
664 | color: var(--textcolor);
665 | position: absolute;
666 | top: 50%;
667 | left: 50%;
668 | transform: translate(-50%, -50%);
669 | }
670 | }
671 |
672 | .description_ab47a1 {
673 | color: #fff;
674 |
675 | .tagline_ab47a1 {
676 | color: #eee;
677 | }
678 | }
679 |
680 | .splash_cbd9b6 {
681 | content: "";
682 | position: fixed;
683 | top: 0;
684 | left: 0;
685 | width: 100%;
686 | height: 100%;
687 | background-image: inherit;
688 | background-repeat: no-repeat;
689 | background-size: cover;
690 | background-position: 50% 50%;
691 | z-index: -1;
692 | opacity: 0.3;
693 | filter: blur(20px);
694 | mask-image: linear-gradient(#000b, #000b); // vscode thing
695 | -webkit-mask-image: linear-gradient(#000b, #000b);
696 | }
697 | }
698 |
699 | // Attach or create invite
700 | .popoutTopLeft-3B0mFf.noArrow-2foL9g.noShadow-3pu20z {
701 | margin-bottom: 0;
702 | margin-top: 8px;
703 | }
704 |
705 | // Uploading
706 | .attachment_b52bef {
707 | background: var(--background-secondary);
708 | border: none;
709 | border-radius: 7px;
710 |
711 | .progressBar-1T6LYX {
712 | border-radius: 0;
713 | background: #419e85 !important;
714 | }
715 | }
716 |
717 | // Annoucement channels
718 | .scrollableContainer_d0696b,
719 | .wrapper_faf5ab {
720 | background: var(--background-secondary);
721 |
722 | .lookFilled-yCfaCM.colorPrimary-2AuQVo {
723 | background-color: var(--main-color);
724 | }
725 | }
726 |
727 | // Attach button
728 | .attachButtonPlus_f298d4,
729 | .attachButton_f298d4:hover .attachButtonPlus_f298d4 {
730 | fill: var(--main-color);
731 | }
732 |
733 | .form_a7d72e:before {
734 | background: linear-gradient(
735 | 180deg,
736 | transparent 0,
737 | var(--background-primary)
738 | );
739 | }
740 |
741 | // Typing
742 | .typing_d7ebeb {
743 | z-index: 0;
744 | }
745 |
746 | // App launcher
747 | .button_df39bd {
748 | background-color: var(--background-secondary);
749 | }
750 | .contentWrapper_f7506e {
751 | background-color: var(--background-primary);
752 | }
753 | .container_e5da8b, .clickable_b78bb6 {
754 | background-color: var(--background-secondary);
755 | }
756 | .container_c18ec9 {
757 | border-radius: 8px;
758 | }
759 |
760 | // Delete message popout
761 | .message_ddcc45 {
762 | background: var(--background-secondary);
763 | box-shadow: none;
764 | }
765 |
766 | // Reaction
767 | .reaction_f61c73 {
768 | background: var(--colortransparency);
769 | }
770 |
771 | .container_f2bfbb,
772 | .reactors_f2bfbb {
773 | background: var(--background-secondary);
774 |
775 | .scroller_f2bfbb {
776 | background: var(--background-primary);
777 | }
778 | }
779 |
780 | // Threads
781 | .container_a6d69a {
782 | background-color: var(--background-primary);
783 |
784 | .tagsContainer_a6d69a button,
785 | .tagsContainer_a6d69a .tag_a6d69a {
786 | background-color: var(--background-secondary-alt-alt);
787 | }
788 |
789 | .mainCard_a6d69a {
790 | background-color: var(--background-secondary);
791 | }
792 |
793 | &::-webkit-scrollbar {
794 | display: none;
795 | }
796 | }
797 | }
--------------------------------------------------------------------------------
/stuff/_friends.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // Left bar
3 | .searchBar_f0963d {
4 | position: absolute;
5 | top: 0;
6 | left: 0;
7 | width: calc(100% - 20px);
8 | background: linear-gradient(
9 | 180deg,
10 | var(--background-secondary),
11 | transparent
12 | );
13 | box-shadow: none;
14 |
15 | .searchBarComponent_f0963d {
16 | background: var(--background-primary);
17 | border-radius: 20px;
18 | font-size: 10px;
19 | text-align: center;
20 | }
21 | }
22 |
23 | .input_f4e139 {
24 | background: var(--background-primary);
25 | }
26 |
27 | .privateChannels_f0963d > .scroller_c47fa9 {
28 | padding-top: 48px;
29 | background: transparent;
30 |
31 | &::-webkit-scrollbar {
32 | display: none;
33 | }
34 | }
35 |
36 | // Channels
37 | .channel_c91bad {
38 | margin: 0;
39 | max-width: unset;
40 | border-radius: 0;
41 |
42 | .layout_ec8679 {
43 | padding: 0 22px;
44 | width: calc(100% - 22px);
45 | border-radius: 0;
46 | }
47 | }
48 |
49 | // Wide friend list
50 | .container_c2739c {
51 | background: var(--background-primary);
52 |
53 | // Buttons
54 | .actionButton_e01b91 {
55 | background: transparent;
56 |
57 | &:hover {
58 | background: var(--background-primary);
59 | }
60 | }
61 |
62 | // Scrollbar
63 | .peopleColumn_c2739c ::-webkit-scrollbar {
64 | display: none;
65 | }
66 |
67 | // Get rid of box-shadow
68 | .tabBody_c2739c::before,
69 | .libraryHeader_cb9493::before {
70 | content: none;
71 | }
72 | .header_c6ee36,
73 | .header_d8cdac,
74 | .header-JHwfVI {
75 | display: none;
76 | }
77 |
78 | // Now playing
79 | .nowPlayingColumn_c2739c {
80 | background: transparent;
81 | margin: 3px 0 10px 0;
82 |
83 | .container_bf550a {
84 | background: var(--background-secondary);
85 | border-radius: 15px 0 0 15px;
86 |
87 | .scroller_bf550a {
88 | border: none;
89 | padding: 16px 0 !important;
90 | margin: 0;
91 |
92 | .header_bf550a {
93 | text-align: center;
94 | }
95 |
96 | .emptyCard_f02fcf {
97 | margin: 16px;
98 | }
99 | .outer_ac5d22 {
100 | background: transparent;
101 | }
102 |
103 | .wrapper_cd82a7 {
104 | background: var(--background-secondary);
105 | margin: 16px;
106 | border-radius: 10px;
107 | border: none;
108 |
109 | .body_cd82a7 {
110 | & > :nth-last-child(3) {
111 | border-radius: 8px 8px 0 0;
112 | }
113 | .separator_cd82a7 {
114 | display: none;
115 | }
116 | & > :nth-child(3) {
117 | border-radius: 0 0 8px 8px;
118 | }
119 | }
120 | }
121 |
122 | &::-webkit-scrollbar {
123 | display: none;
124 | }
125 | }
126 | }
127 | }
128 | }
129 |
130 | // Aka badge
131 | .akaBadge__27cd4 {
132 | background: var(--main-color);
133 | color: #fff;
134 | }
135 |
136 | // Call
137 | .wrapper_d880dc:not(.video_d880dc) {
138 | background: var(--background-secondary);
139 | margin: 15px;
140 | border-radius: 10px;
141 | animation: callzoom 2s ease;
142 |
143 | .tile_dc5fc4 {
144 | background: var(--background-primary);
145 |
146 | .button_e5cc00,
147 | .buttonColor_d4af21 {
148 | background-color: var(--main-color);
149 | }
150 | }
151 |
152 | // Video background
153 | .videoWrapper_ba4b17 {
154 | background: var(--background-primary);
155 | }
156 |
157 | // Speaking ring
158 | .border_db83a2.speaking_db83a2 {
159 | box-shadow: inset 0 0 0 2.5px #43b581,
160 | inset 0 0 0 6px var(--background-secondary);
161 | }
162 |
163 | // Call buttons
164 | .colorable_ef18ee.primaryDark_ef18ee,
165 | .leftTrayIcon_d880dc {
166 | background: var(--background-primary);
167 | }
168 |
169 | .wrapper_b6e2f9 > .controlButton_b6e2f9 > svg > foreignObject {
170 | mask: none;
171 | }
172 | }
173 |
174 | // Call region selector
175 | .quickSelectPopout_abbf45 {
176 | background: var(--background-primary);
177 | }
178 |
179 | // Nitro
180 | .applicationStore_cecc86 .container_fc4f04 {
181 | width: calc(100% - 240px);
182 | position: absolute;
183 | top: 0;
184 | background: linear-gradient(180deg, var(--background-primary), transparent);
185 | z-index: 1;
186 | }
187 |
188 | // User profile
189 | .userPanelOuter_c69a7b {
190 |
191 | .scrollerBase_eed6a8 {
192 | overflow: unset !important
193 | }
194 |
195 | // Banner
196 | .bannerSVGWrapper_b32cc2 {
197 | overflow: visible;
198 | min-height: 180px !important;
199 | contain: unset;
200 | max-width: 340px;
201 |
202 | .banner_d5fdb1 {
203 | position: absolute;
204 | height: 200px;
205 | -webkit-mask-image: linear-gradient(#000000c2, #000000c2);
206 | clip-path: polygon(
207 | 0 0,
208 | 100% 0,
209 | 100% calc(100% - 25px),
210 | 50% 100%,
211 | 0 calc(100% - 25px)
212 | );
213 | }
214 |
215 | // Normal banners
216 | &[viewBox="0 0 340 60"] > foreignObject {
217 | transform: translateY(-60px);
218 | }
219 |
220 | // Premium banners with image
221 | &[viewBox="0 0 340 120"] > foreignObject {
222 | transform: translateY(-30px);
223 | }
224 |
225 | // Premium banners with colours
226 | &[viewBox="0 0 340 90"] > foreignObject {
227 | transform: translateY(-45px);
228 | }
229 |
230 | & > foreignObject {
231 | mask: none;
232 | }
233 | }
234 |
235 | .divider_ae36e5 {
236 | display: none;
237 | }
238 |
239 | // Badges
240 | .badgelistGroup_ab525a {
241 | min-height: 10px;
242 | }
243 | .badgeList_ab525a {
244 | position: absolute;
245 | top: 160px;
246 | left: 0;
247 | width: 340px;
248 | height: unset;
249 | max-width: unset;
250 | padding: 0;
251 | justify-content: center;
252 | background-color: transparent;
253 | }
254 |
255 | .section_d7a21f {
256 | padding-top: 0;
257 | padding-bottom: 12px;
258 | }
259 |
260 | .userPanelOverlayBackground_a2b6ae:nth-child(2) {
261 | position: static;
262 |
263 | .section_d7a21f .userText_c9ccf6 {
264 | position: absolute;
265 | top: 110px;
266 | left: 0;
267 | width: 340px;
268 | box-sizing: border-box;
269 | text-align: center;
270 |
271 | .discrimBase_c9ccf6 {
272 | color: white;
273 | }
274 | }
275 |
276 | .pronouns_c9ccf6 {
277 | position: relative;
278 | margin-top: 8px;
279 | }
280 |
281 | .scroller_d2b491::-webkit-scrollbar {
282 | display: none;
283 | }
284 |
285 | // Activities
286 | .activity__20c1e {
287 | z-index: 1;
288 |
289 | .assetsLargeImageSpotify_c1d9fd {
290 | border-radius: 8px !important;
291 | margin-left: 6px;
292 | }
293 |
294 | .null {
295 | margin-right: 8px;
296 | }
297 |
298 | // Button
299 | .button_da7790 {
300 | background-color: var(--main-color);
301 | opacity: 1;
302 | }
303 |
304 | // Platform icon
305 | .platformIcon_c1d9fd {
306 | display: none;
307 | }
308 |
309 | // Time bar
310 | .timeBarUserPopoutV2_c1d9fd {
311 | position: absolute;
312 | top: 7px;
313 | left: 0;
314 | z-index: -1;
315 | width: 100%;
316 | height: 70px;
317 | border-radius: 8px;
318 |
319 | .bar_ec2fa7 {
320 | border-radius: 8px;
321 | height: 100%;
322 | }
323 |
324 | .barInner_ec2fa7 {
325 | border-radius: 8px 0 0 8px;
326 | opacity: 0.2;
327 | }
328 | & > :last-child {
329 | display: none;
330 | }
331 | }
332 | }
333 |
334 | .input-2g-os5 {
335 | background-color: transparent !important;
336 | }
337 | }
338 |
339 | // Username adjustements for premium popouts
340 | &.userProfileOuterThemed_c69a7b .usernameSection_d2b491 {
341 | left: 4px;
342 | }
343 |
344 | // Avatar
345 | .avatarWrapper_f89da9 {
346 | top: 15px !important;
347 | left: calc(50% - 40px);
348 |
349 | // View profile mask
350 | .avatarHint_f89da9 {
351 | top: 0;
352 | left: 0;
353 | border-radius: calc(var(--avatar-radius) * 2) !important;
354 |
355 | foreignObject {
356 | mask: none !important;
357 |
358 | // Custom Avatar Hint
359 | .avatarHintInner_f89da9 {
360 | font-size: 0;
361 | text-transform: none;
362 |
363 | &::after {
364 | white-space: normal;
365 | text-align: center;
366 | content: var(--avatar-hint-text);
367 | color: var(--avatar-hint-color);
368 | font-size: var(--avatar-hint-size);
369 | font-family: var(--avatar-hint-font);
370 | }
371 | }
372 | }
373 | }
374 | }
375 |
376 | // Avatar mask
377 | .mask_c51b4e {
378 | foreignObject {
379 | border-radius: calc(var(--avatar-radius) * 2) !important;
380 | }
381 | circle,
382 | rect[fill="black"] {
383 | display: none;
384 | }
385 | }
386 | }
387 | }
--------------------------------------------------------------------------------
/stuff/_member-list.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | .membersWrap_cbd271 {
3 | margin-top: -48px;
4 | max-height: calc(100% + 48px);
5 |
6 | .members_cbd271 {
7 | padding-top: 48px;
8 |
9 | // Members
10 | .member_a31c43 {
11 | margin: 0;
12 |
13 | .layout_d808b0 {
14 | padding: 0 22px;
15 | width: calc(100% - 22px);
16 | border-radius: 0;
17 | }
18 | }
19 |
20 | &::-webkit-scrollbar {
21 | display: none;
22 | }
23 | }
24 | }
25 |
26 | // -- User popout --
27 | .loadingPopout-1feYe_ {
28 | background: var(--background-secondary);
29 | }
30 |
31 | .userPopoutOuter_c69a7b {
32 | border-radius: 8px;
33 | overflow: unset;
34 |
35 | .userProfileInner_c69a7b {
36 | background-color: var(--background-tertiary);
37 | overflow: unset;
38 | }
39 |
40 | // Banner
41 | .header_b8cc6d {
42 | min-height: 210px;
43 | }
44 |
45 | .header_b8cc6d > .mask_d5fdb1 {
46 | overflow: visible;
47 | min-height: unset !important;
48 | contain: unset;
49 |
50 | .banner_d5fdb1 {
51 | position: absolute;
52 | height: 200px !important;
53 | -webkit-mask-image: linear-gradient(#000000c2, #000000c2);
54 | clip-path: polygon(
55 | 0 0,
56 | 100% 0,
57 | 100% calc(100% - 25px),
58 | 50% 100%,
59 | 0 calc(100% - 25px)
60 | );
61 | }
62 |
63 | & > foreignObject {
64 | mask: none;
65 | }
66 | }
67 |
68 | // Action buttons
69 | .wrapper_cb78f1 {
70 | flex-direction: column;
71 | }
72 |
73 | // Bubble goofy thing
74 | .addCustomStatusButtonBubble_d22603, .statusBubbleOuter_d22603 + .visibleContainer_d22603 {
75 | position: absolute;
76 | top: -60px;
77 |
78 | --custom-status-bubble-background: var(--background-tertiary);
79 | }
80 | .statusBubbleOuter_d22603:before { top: 28px;}
81 | .statusBubbleOuter_d22603:after {
82 | top: 50px;
83 | left: 25px;
84 | }
85 |
86 | // Avatar
87 | .avatar_f94206 {
88 | top: 15px !important;
89 | left: calc(50% - 40px);
90 |
91 | .overlay_f94206:after {
92 | border-radius: var(--avatar-radius);
93 | }
94 |
95 | // View profile mask
96 | .avatarPopover_a64b81 {
97 | top: 0;
98 | left: 0;
99 | border-radius: calc(var(--avatar-radius) * 2) !important;
100 |
101 | foreignObject {
102 | mask: none !important;
103 |
104 | // Custom Avatar Hint
105 | .avatarHintInner_f89da9 {
106 | font-size: 0;
107 | text-transform: none;
108 |
109 | &::after {
110 | white-space: normal;
111 | text-align: center;
112 | content: var(--avatar-hint-text);
113 | color: var(--avatar-hint-color);
114 | font-size: var(--avatar-hint-size);
115 | font-family: var(--avatar-hint-font);
116 | }
117 | }
118 | }
119 | }
120 | }
121 |
122 | // Avatar mask
123 | .mask_c51b4e {
124 | foreignObject {
125 | border-radius: calc(var(--avatar-radius) * 2) !important;
126 | }
127 | circle,
128 | rect[fill="black"] {
129 | display: none;
130 | }
131 | }
132 |
133 | .body_b8cc6d {
134 | position: static;
135 | }
136 |
137 | // Username
138 | .container_c32acf {
139 | position: absolute;
140 | top: 115px;
141 | left: 20px;
142 | width: calc(100% - 38px);
143 | }
144 | .usernameRow_c32acf .clickableUsername_c32acf {
145 | width: 100%;
146 |
147 | h1 {
148 | display: block;
149 | text-align: center;
150 | }
151 | }
152 | .usernameRow_c32acf .nicknameIcons_c32acf {
153 | display: none;
154 | }
155 |
156 | // uuh old name and pronouns and badges and ...
157 | .tags_c32acf {
158 | margin-top: 5px;
159 | justify-content: center;
160 |
161 | // badges
162 | .container_b64375 {
163 | border: none;
164 | background: transparent;
165 | }
166 | }
167 | }
168 |
169 |
170 |
171 | // -- User modal --
172 | .root_b9fccc.root_f9a4c9.small_f9a4c9 {
173 | width: 800px;
174 | height: 400px;
175 |
176 | & > div, .userProfileModalOuter_c69a7b {
177 | width: 100%;
178 | height: 100%;
179 | box-sizing: border-box;
180 | }
181 | }
182 |
183 | .userProfileModalInner_c69a7b {
184 | width: 100%;
185 | height: 100%;
186 | flex-direction: row;
187 | overflow: hidden;
188 | position: relative;
189 | border-radius: 8px;
190 |
191 | &::before {
192 | width: 100%;
193 | height: 100%;
194 | }
195 |
196 | // Header
197 | header {
198 | width: calc(55% - 16px);
199 | height: 100%;
200 | }
201 |
202 | header > .mask_d5fdb1 {
203 | min-width: unset !important;
204 | min-height: unset !important;
205 | width: 100%;
206 | height: 100%;
207 |
208 | .banner_d5fdb1 {
209 | position: absolute;
210 | top: 0;
211 | left: 0;
212 | width: 100%;
213 | height: 100% !important;
214 | z-index: -1;
215 | opacity: 0.6;
216 | border-radius: 10px 0 0 10px;
217 | mask-image: linear-gradient(90deg, #000c, #00000049); // vscode thing
218 | -webkit-mask-image: linear-gradient(90deg, #000000cc, #00000049);
219 | }
220 |
221 | & > foreignObject {
222 | mask: none;
223 | }
224 |
225 | &[viewBox="0 0 600 106"] > foreignObject {
226 | y: -350px;
227 | height: 800px;
228 | }
229 |
230 | &[viewBox="0 0 600 210"] > foreignObject {
231 | y: -250px;
232 | height: 700px;
233 | }
234 | }
235 |
236 | .headerInner_b9fccc {
237 | position: static;
238 |
239 | // Avatar
240 | .avatar_f94206 {
241 | top: 16px;
242 | left: 16px;
243 |
244 | circle,
245 | rect[fill="black"] {
246 | display: none;
247 | }
248 | }
249 |
250 | .addCustomStatusButtonBubble_d22603, .statusBubbleOuter_d22603 + .visibleContainer_d22603 {
251 | position: absolute;
252 | top: unset;
253 | left: unset;
254 | bottom: 0;
255 | right: 0;
256 | z-index: 2;
257 | width: calc(45% + 16px);
258 | padding: 20px;
259 | backdrop-filter: blur(8px);
260 | box-sizing: border-box;
261 | border-bottom-right-radius: 5px;
262 |
263 | & > .statusBubbleOuter_d22603 {
264 | border: none;
265 | box-shadow: none;
266 | background: transparent;
267 | min-width: unset;
268 | max-width: unset;
269 |
270 | &::before, &::after {
271 | display: none;
272 | }
273 |
274 | & > .statusBubble_d22603 {
275 | padding: 0;
276 | background: transparent;
277 |
278 | & > .content_d22603 {
279 | text-align: left;
280 | }
281 | }
282 | }
283 |
284 | &.activityProfile_c1d9fd {
285 | right: unset;
286 | bottom: -140px;
287 | left: 5px;
288 | width: 750px;
289 | padding: 20px;
290 | }
291 |
292 | .customStatus_b2ca13 {
293 | margin-top: 0;
294 | }
295 |
296 | // Player
297 | .assetsLargeImageActivityFeed_c1d9fd,
298 | .assetsLargeImageActivityFeedXbox_c1d9fd,
299 | .assetsLargeImageProfile_c1d9fd {
300 | width: 40px;
301 | height: 40px;
302 | }
303 | }
304 | }
305 |
306 | .headerButtons_b9fccc {
307 | position: fixed;
308 | bottom: 15px;
309 | left: 15px;
310 | z-index: 1;
311 | }
312 |
313 | // Avatar mask
314 | .mask_c51b4e foreignObject {
315 | border-radius: calc(var(--avatar-radius) * 2.1) !important;
316 | }
317 |
318 | // Body
319 | .body_b9fccc {
320 | width: calc(45% + 16px);
321 | margin: 0;
322 | overflow: visible;
323 | background-color: var(--background-primary);
324 | border-radius: 0;
325 |
326 | .fullSizeOverlayBackground_c69a7b {
327 | position: static;
328 | background: transparent;
329 | border: none;
330 |
331 | .container_ecc04c {
332 | height: 100%;
333 | }
334 | }
335 |
336 | // Username + old username + ....
337 | .container_c32acf {
338 | position: absolute;
339 | top: 25px;
340 | left: 153px;
341 | z-index: 1;
342 | max-width: 250px;
343 |
344 | // Badges
345 | .container_b64375 {
346 | border: none;
347 | }
348 | }
349 |
350 | // Menu
351 | .tabBar_ecc04c {
352 | position: absolute;
353 | bottom: 65px;
354 | left: 5px;
355 | z-index: 1;
356 | border-bottom: unset;
357 | flex-direction: column;
358 | gap: 15px;
359 |
360 | .item_a0 {
361 | height: 20px;
362 | border-bottom: unset;
363 |
364 | & > div {
365 | transition: font-weight 200ms;
366 | }
367 |
368 | &.selected_a0 > div {
369 | font-weight: bold;
370 | }
371 | }
372 | }
373 |
374 | .section_ba4d80:nth-last-child(3) {
375 | margin-bottom: 50px;
376 | }
377 |
378 | // Connected account
379 | .connectedAccountContainer_ab12c6 {
380 | border: none;
381 | background-color: rgba(255, 255, 255, 0.05);
382 | }
383 |
384 | // Mutuals
385 | .listScroller_d2d6cb {
386 | display: grid;
387 | grid-template-columns: 1fr 1fr;
388 | grid-template-rows: repeat(20, 0fr);
389 | gap: 10px;
390 | padding-left: 8px;
391 |
392 | .listRow_d2d6cb {
393 | position: relative;
394 | z-index: 1;
395 | height: 44px;
396 | margin: 0;
397 | padding-left: 10px;
398 | border-radius: 8px;
399 | overflow: hidden;
400 | background-color: #ffffff07;
401 |
402 | .listAvatar_d2d6cb {
403 | position: absolute;
404 | right: 0;
405 | z-index: -1;
406 | width: 62% !important;
407 | height: 250% !important;
408 | margin-right: 0;
409 | border-radius: 0;
410 | -webkit-mask-image: linear-gradient(90deg, #00000000, #000000cb);
411 |
412 | svg {
413 | position: relative;
414 | width: 100%;
415 | height: 100%;
416 |
417 | foreignObject {
418 | width: 100%;
419 | height: 100%;
420 | }
421 | rect {
422 | display: none;
423 | }
424 | }
425 | }
426 | }
427 |
428 | .empty_d2d6cb {
429 | grid-column: 1/3;
430 | grid-row: 1/22;
431 | position: relative;
432 | z-index: 0;
433 | overflow: hidden;
434 | margin: 0;
435 | padding-left: 10px;
436 | border-radius: 8px;
437 |
438 | .emptyIconFriends_d2d6cb {
439 | position: absolute;
440 | z-index: -1;
441 | width: 80%;
442 | height: 80%;
443 | margin-left: -10px;
444 | opacity: 0.2;
445 | background-size: 100%;
446 | }
447 | }
448 | }
449 |
450 | .input-2g-os5 {
451 | background-color: transparent;
452 | }
453 | }
454 | }
455 |
456 | .userProfileModalInner_c69a7b .userProfileModalOverlayBackground_c69a7b {
457 | background-color: transparent;
458 | }
459 | }
--------------------------------------------------------------------------------
/stuff/_other.scss:
--------------------------------------------------------------------------------
1 | // -- Ruindows support --
2 | body {
3 | background: transparent;
4 | }
5 |
6 | .withFrame_a934d8 {
7 | background: var(--background-tertiary);
8 | padding: 8px 16px;
9 | height: 24px;
10 | margin-top: unset;
11 | position: relative;
12 | left: 90px;
13 | width: calc(100% - 122px);
14 | z-index: 1;
15 | pointer-events: none;
16 |
17 | // Discord
18 | .wordmark_a934d8 {
19 | top: unset;
20 | left: 16px;
21 | color: transparent;
22 | }
23 |
24 | // Windows buttons
25 | .winButton_a934d8 {
26 | color: var(--textcolor);
27 | top: -8px;
28 | right: -16px;
29 | height: 40px;
30 | width: 56px;
31 | }
32 |
33 | // Not maximised icon
34 | .winButtonClose_a934d8 + .winButtonMinMax_a934d8::before {
35 | content: "";
36 | position: absolute;
37 | top: 10px;
38 | left: 18px;
39 | width: 18px;
40 | height: 18px;
41 | background: url("https://cdn.discordapp.com/attachments/539180316447997974/713920529622630411/aaaaaaaaa.svg")
42 | no-repeat;
43 | background-size: contain;
44 | opacity: 0;
45 | }
46 | }
47 |
48 | .theme-light .winButtonClose_a934d8 + .winButtonMinMax_a934d8::before {
49 | background-image: url("https://cdn.discordapp.com/attachments/539180316447997974/713920227582279810/aaaaaaaaa.svg");
50 | }
51 |
52 | // When maximised
53 | body.maximized .winButtonClose_a934d8 + .winButtonMinMax_a934d8 {
54 | svg {
55 | opacity: 0;
56 | }
57 | &::before {
58 | opacity: 1;
59 | }
60 | }
61 |
62 | // Pushing things lower
63 | .platform-win {
64 | .chat_a7d72e .wrapper_d880dc:not(.minimum_d880dc) .search_ff5f90 {
65 | top: 50px;
66 | }
67 |
68 | .appMount_ea7e65 .app_bd26cc {
69 | .scroller_fea3ef {
70 | padding-top: 20px;
71 | }
72 | .content_a4d4d9::after {
73 | content: "";
74 | position: absolute;
75 | top: -5px;
76 | left: -5px;
77 | z-index: 2;
78 | width: 30px;
79 | height: 30px;
80 | border: solid var(--background-tertiary);
81 | border-width: 5px 0 0 5px;
82 | border-radius: 15px 0 0 0;
83 | box-sizing: border-box;
84 | }
85 | }
86 | .layers_a01fb1,
87 | .layers_d4b6c5,
88 | .layers_a01fb1 > .layer_d4b6c5,
89 | .container_a4d4d9 {
90 | overflow: visible;
91 | }
92 |
93 | // Recent mentions
94 | .recentMentionsPopout_ddb5b4,
95 | .root_fccaa9 {
96 | top: 40px;
97 | }
98 | }
99 |
100 | // Window effect
101 | html:not(.platform-linux) body:not(.maximized).transparent .appMount_ea7e65 {
102 | overflow: hidden;
103 | border-radius: 8px;
104 | box-shadow: 0 0 10px 0 var(--background-tertiary);
105 | top: 10px;
106 | left: 10px;
107 | width: calc(100% - 20px);
108 | height: calc(100% - 20px);
109 | transform: translateZ(0);
110 | }
111 |
112 | // MacOS Support
113 | .platform-osx {
114 | .typeMacOS_a934d8 {
115 | width: 90px;
116 |
117 | .macButtons_a934d8 {
118 | width: 90px;
119 | padding: 10px 20px 10px 20px;
120 | }
121 | }
122 |
123 | .unreadMentionsIndicatorTop_fea3ef {
124 | top: 20px;
125 |
126 | .mention_edf32f {
127 | background: transparent;
128 | }
129 | }
130 |
131 | .guilds_a4d4d9 {
132 | margin: 0;
133 |
134 | .scroller_fea3ef {
135 | padding-top: 40px;
136 | }
137 |
138 | &::after {
139 | content: "";
140 | position: absolute;
141 | width: 100%;
142 | height: 32px;
143 | top: 0;
144 | left: 0;
145 | background: linear-gradient(
146 | 180deg,
147 | var(--background-tertiary),
148 | transparent
149 | );
150 | }
151 | }
152 | }
153 |
154 | :root {
155 | // Scrollbars
156 | *::-webkit-scrollbar {
157 | width: 8px;
158 |
159 | &-thumb {
160 | background: var(--background-secondary);
161 | border-radius: 20px;
162 | }
163 |
164 | &-track-piece {
165 | display: none;
166 | }
167 | }
168 |
169 | // Version
170 | .info_c5a741 [class^="text-xs/normal_dc00ef"]:last-child::after {
171 | content: "\a Couve v" var(--version);
172 | text-transform: none;
173 | white-space: pre;
174 | }
175 |
176 | // Discover
177 | .categoryItem_c72b37 {
178 | margin: 3px 0 3px 8px;
179 |
180 | &.selectedCategoryItem_c72b37 .itemInner_c72b37 {
181 | background: var(--epicshadow1);
182 | }
183 | }
184 |
185 | .pageWrapper_a3a4ce {
186 | background: var(--background-primary);
187 |
188 | .search-25t1e9 .searchBox-31Zv9h {
189 | background: var(--background-secondary);
190 |
191 | .input_f8bc55 {
192 | color: white;
193 | }
194 |
195 | .searchIcon-3X4BYL {
196 | margin-left: 8px;
197 | }
198 | }
199 |
200 | .card_e90879,
201 | .iconMask_e90879 {
202 | background-color: var(--card);
203 |
204 | &:hover,
205 | &:hover .iconMask_e90879 {
206 | background: var(--background-secondary);
207 | }
208 | }
209 | }
210 |
211 | // Server boost
212 | .root_fccaa9 {
213 | top: 40px;
214 | left: calc(90px + 240px);
215 | contain: unset;
216 |
217 | .perksModal-CLcR1c {
218 | background-color: var(--background-primary);
219 |
220 | // Card
221 | .ctaBar-Nhk8yY {
222 | background: var(--background-secondary);
223 | border-radius: 10px;
224 | }
225 |
226 | // Slide
227 | .progressBar-20NUv9 {
228 | z-index: 1;
229 |
230 | .bar-1g-wqp {
231 | border-radius: 0;
232 | }
233 |
234 | .tierMarkerBackground-G8FoN4 {
235 | z-index: -10;
236 | }
237 | .tierMarkerBackground-G8FoN4,
238 | .barBackground-unEPDT {
239 | background: var(--background-secondary-alt-alt);
240 | }
241 |
242 | .tierMarkerInProgress-2Tdxjz {
243 | background: var(--background-primary) !important;
244 | }
245 | }
246 |
247 | // Carousel
248 | .carouselContainerVisible-bGCrdY {
249 | left: -15%;
250 |
251 | .tierHeaderUnlocked-1IvR2R {
252 | background: #b377f3;
253 |
254 | .tierUnlocked-1yG5Ic {
255 | background: #0006;
256 | color: #fff;
257 | }
258 | }
259 |
260 | .tierHeaderLocked-3ItHYn {
261 | background: var(--background-secondary-alt-alt);
262 | }
263 | .tierBody-3ju-rc {
264 | background: var(--background-secondary);
265 | }
266 | }
267 |
268 | // Perks
269 | .perk-19D_HN {
270 | background: var(--background-secondary);
271 | }
272 | }
273 |
274 | .closeWrapper-1aVqeP {
275 | padding-top: 72px;
276 |
277 | .closeButton_df5532 {
278 | &:active {
279 | transform: none;
280 | }
281 |
282 | &::before {
283 | content: "";
284 | position: fixed;
285 | top: 0;
286 | left: -330px;
287 | width: 330px;
288 | height: 100%;
289 | z-index: 100;
290 | }
291 | }
292 | }
293 | }
294 |
295 | // Roles
296 | .role_f9575e,
297 | .sidebar_e87574 .list_e87574 .item_a0,
298 | .container_ac201b .item_eef3ef,
299 | .roleRow-3HnunM {
300 | position: relative;
301 | overflow: hidden;
302 | height: unset;
303 | z-index: 1;
304 | border: none;
305 | padding: 5px;
306 | border-radius: 20px;
307 | margin-right: 4px;
308 | margin-left: 0;
309 | }
310 |
311 | .role_f9575e .roleCircle_a26d7b::before,
312 | .sidebar_e87574 .list_e87574 .item_a0 .roleCircle_a26d7b::before,
313 | .container_ac201b .item_eef3ef .roleCircle_a26d7b::before,
314 | .roleRow-3HnunM .roleCircle_a26d7b::before {
315 | content: "";
316 | position: absolute;
317 | top: 0;
318 | left: 0;
319 | width: 100%;
320 | height: 100%;
321 | background: inherit;
322 | opacity: 0.2;
323 | z-index: -1;
324 | pointer-events: none;
325 | }
326 |
327 | .roleRemoveButton_f9575e {
328 | position: unset;
329 |
330 | .roleRemoveIcon_e4010c {
331 | left: 15px;
332 | }
333 | }
334 |
335 | // Role popout
336 | .container_ac201b {
337 | border: none;
338 |
339 | .item_eef3ef {
340 | margin-right: 5px;
341 | }
342 |
343 | .container_c18ec9 {
344 | border-radius: 8px;
345 | }
346 | }
347 |
348 | // Roles in settings
349 | .sidebar_e87574 {
350 | border: none;
351 |
352 | .list_e87574 {
353 | padding-left: 16px;
354 |
355 | .item_a0 {
356 | padding: 6px 10px;
357 | margin-bottom: 6px;
358 | border-radius: 25px;
359 | }
360 | }
361 | }
362 |
363 | // Roles scroller
364 | #user-context-roles + .layer_cd0de5 .item_d90b3d {
365 | flex-direction: row-reverse;
366 |
367 | .iconContainer-1-SsTR {
368 | margin: 0 8px 0 0;
369 | }
370 |
371 | .roleRow-3HnunM {
372 | border-radius: 25px;
373 |
374 | .roleDot-2gCDg5 {
375 | filter: none;
376 | margin-right: 4px;
377 | }
378 | }
379 | }
380 |
381 | // Commom popout modal
382 | .root_f9a4c9,
383 | .modal_c97cbd {
384 | background: var(--background-primary);
385 | box-shadow: unset;
386 | border-radius: 10px;
387 |
388 | &::-webkit-scrollbar {
389 | display: none;
390 | }
391 |
392 | form {
393 | display: flex;
394 | flex-direction: column;
395 | }
396 |
397 | &.small_f9a4c9 {
398 | min-height: unset;
399 | }
400 |
401 | // Header
402 | .header_f9a4c9 {
403 | text-align: center;
404 | }
405 |
406 | .separator_f9a4c9 {
407 | box-shadow: none;
408 | }
409 |
410 | // Footer
411 | .footer_f9a4c9 {
412 | padding: 0;
413 | text-align: center;
414 | background: transparent;
415 | box-shadow: none;
416 | min-height: 45px;
417 | overflow: hidden;
418 | border-radius: 0 0 10px 10px;
419 |
420 | button {
421 | flex-grow: 1;
422 | margin: 0;
423 | padding: 2px 16px;
424 | box-shadow: none !important;
425 | border-radius: 0;
426 | min-height: 45px;
427 | }
428 |
429 | .lookLink-15mFoz {
430 | background: #fff1;
431 | }
432 |
433 | & > * {
434 | width: 100%;
435 | margin: 0;
436 | }
437 |
438 | .cancelButton-kOgwem,
439 | .cancel-1Ph_Z1 {
440 | margin-right: 0;
441 | }
442 | .minorContainer_acae5d {
443 | order: -1;
444 | margin-bottom: 16px;
445 | }
446 | }
447 |
448 | // Stream / Screenshare popout
449 | .qualitySettingsContainer-30AsSH {
450 | border: none;
451 | padding: 0;
452 | }
453 |
454 | .card-1SdQ2-,
455 | .item-2OyinQ {
456 | border: none;
457 | background: var(--background-secondary);
458 | }
459 |
460 | .changeButton-3QdaoH {
461 | border-radius: 3px;
462 | }
463 | .art-2OaYX0 + form > :nth-child(3) > :last-child,
464 | .changeButton-3QdaoH {
465 | background: #fff1 !important;
466 | }
467 | .selectorButtonSelected-3Z0WNU {
468 | background: var(--main-color);
469 | }
470 |
471 | // Change quality nitro popout
472 | .primaryActions_ffaecb {
473 | flex-grow: 1;
474 |
475 | .shinyButton_d5e126 {
476 | width: 100%;
477 | height: 100%;
478 | border-radius: 0;
479 | }
480 | }
481 |
482 | // Remove background for image carrousel
483 | &.carouselModal-1eUFoq {
484 | background: none;
485 | }
486 | }
487 |
488 | .popout-1KHNAq {
489 | border: none;
490 |
491 | .option-2eIyOn {
492 | background: var(--background-secondary);
493 | }
494 | }
495 |
496 | // Buttons and specific elements
497 | .button_dd4f85 {
498 | border-radius: 8px;
499 | transition: box-shadow 200ms;
500 | }
501 |
502 | .lookFilled_dd4f85.colorBrand_dd4f85,
503 | .lookFilled_dd4f85.colorBrand_dd4f85:hover {
504 | background: var(--main-color) !important;
505 | }
506 |
507 | .item-2idW98[style*="background-color"] {
508 | background: var(--main-color) !important;
509 | }
510 |
511 | // Checkbox
512 | .checked_cebd1c {
513 | border: none;
514 | }
515 | .checkbox-f1HnKB {
516 | border-radius: 50%;
517 | }
518 |
519 | // Slider
520 | .bar_c7a159 {
521 | background: var(--background-secondary-alt-alt);
522 |
523 | .barFill_c7a159 {
524 | background: var(--main-color);
525 | }
526 | }
527 | .grabber_c7a159 {
528 | border: none;
529 | background: transparent !important;
530 | box-shadow: none;
531 | }
532 |
533 | // Cards
534 | .cardPrimary_a298b8,
535 | .cardPrimaryEditable-2mz_3i,
536 | .cardPrimaryOutline-1ofwVz {
537 | border: none;
538 | background: var(--background-secondary);
539 | border-radius: 10px;
540 | }
541 | .card_ea2a21::before {
542 | background-color: var(--background-secondary);
543 | border: none;
544 | }
545 | .default_a467ac {
546 | background-color: var(--background-secondary);
547 | }
548 |
549 | // Inputs & selects
550 | .input_f8bc55 {
551 | border: none;
552 | border-radius: 8px;
553 | transition: background 0.4s;
554 | }
555 |
556 | .select_f6639d,
557 | .item_eb92a8 {
558 | border: none;
559 | border-radius: 8px;
560 | }
561 |
562 | .popout_f6639d {
563 | border: none;
564 | border-radius: 8px;
565 |
566 | &.popoutPositionTop_f6639d {
567 | margin-bottom: 5px;
568 | }
569 | margin-top: 5px;
570 |
571 | &::-webkit-scrollbar {
572 | display: none;
573 | }
574 | }
575 |
576 | .input_cebd1c,
577 | .container_cebd1c {
578 | border-radius: 8px;
579 |
580 | rect {
581 | rx: 8px;
582 | }
583 | }
584 |
585 | .option_f6639d:hover {
586 | background: rgba(255, 255, 255, 0.05) !important;
587 | }
588 | .option_f6639d:hover {
589 | background: rgba(255, 255, 255, 0.05) !important;
590 | }
591 |
592 | // Specific menus
593 | .styleFixed-2_NfVL {
594 | background: var(--background-primary);
595 | box-shadow: unset;
596 | }
597 |
598 | .styleFlexible-x0_sIC,
599 | .submenu_d90b3d {
600 | overflow: hidden;
601 | background: var(--background-secondary-alt);
602 | box-shadow: unset;
603 | }
604 |
605 | .submenuPaddingContainer_d90b3d {
606 | margin-left: -8px;
607 | margin-right: -8px;
608 | }
609 |
610 | .button_a24e84,
611 | .button_a24e84:hover {
612 | background: var(--background-primary);
613 | }
614 |
615 | .item_d90b3d {
616 | margin: 0;
617 | padding: 8px 16px;
618 | border-radius: 0;
619 | transition: background 200ms;
620 |
621 | &:hover,
622 | &.focused_d90b3d,
623 | &:active:not(.hideInteraction_d90b3d) {
624 | background-color: rgba(255, 255, 255, 0.05);
625 | }
626 | }
627 |
628 | // Account profile
629 | .accountProfilePopoutWrapper_b2ca13 {
630 | position: fixed;
631 | top: 0;
632 | left: 0;
633 | height: 100%;
634 |
635 | & > div, .userProfileInner_c69a7b {
636 | height: 100%;
637 | max-height: unset;
638 | }
639 |
640 | .popoutContainer_ad5fac {
641 | display: block;
642 | height: 100%;
643 |
644 | & > div {
645 | height: 100%;
646 | }
647 | }
648 |
649 | // New decorations thingy
650 | .container__0ec3c {
651 | background: var(--background-tertiary);
652 |
653 | & > .ctaContainer__95bd7 {
654 | background-color: transparent;
655 | }
656 | }
657 |
658 | .userPopoutOuter_c69a7b {
659 | width: 330px;
660 | height: 100%;
661 | max-height: unset;
662 | animation:
663 | sidebarStatusTransalteX 0.5s ease,
664 | fade 0.4s ease;
665 | border-radius: 0;
666 | background: var(--background-tertiary);
667 | margin-right: 0;
668 | padding: 0;
669 |
670 | .userPopoutInner_c69a7b {
671 | max-height: unset;
672 |
673 | &::before {
674 | width: 100% !important;
675 | height: 100% !important;
676 | }
677 | }
678 |
679 | .userProfileInnerThemedNonPremium_c69a7b {
680 | background: transparent;
681 | }
682 |
683 | // Banner
684 | .header_b8cc6d {
685 | min-height: 230px;
686 | }
687 |
688 | // Avatar
689 | .avatarWrapper_f89da9 {
690 | left: calc(50% - 35px);
691 | }
692 |
693 | // Username section
694 | .body_ad5fac {
695 | position: static;
696 | }
697 |
698 | // Bubble status thingy
699 | .addCustomStatusButtonBubble_d0a252 {
700 | left: 340px;
701 |
702 | --custom-status-bubble-background: var(--background-tertiary);
703 | }
704 |
705 | .menus_ad5fac .menuOverlay_ad5fac {
706 | padding: 0;
707 |
708 | .button_f9d37d {
709 | height: unset;
710 | border-radius: 0;
711 |
712 | .menuItemInner_ad5fac {
713 | padding: 16px;
714 | }
715 | }
716 |
717 | .menuDivider_ad5fac {
718 | display: none;
719 | }
720 | }
721 | }
722 | }
723 |
724 | // Inner container (menu items, dividers, etc)
725 | div[role="group"]:not(.profileGroup-1yKk23) .item_d90b3d {
726 | &.colorDefault-CDqZdO.focused_d90b3d,
727 | &.colorDefault-CDqZdO:hover:not(.hideInteraction_d90b3d) {
728 | background: var(--epicshadow1);
729 | }
730 | }
731 |
732 | &::-webkit-scrollbar-thumb {
733 | background: var(--epicshadow1);
734 | }
735 |
736 | &.full-motion .animatorTop-3ltI52 {
737 | transition: unset !important;
738 | }
739 |
740 | .scroller_d90b3d {
741 | overflow-y: auto !important;
742 | padding-left: 0;
743 |
744 | &::-webkit-scrollbar-thumb {
745 | background: var(--epicshadow1);
746 | }
747 | }
748 |
749 | .avatarWrapper_b2ca13 .avatarSpeaking_c51b4e {
750 | border-radius: var(--avatar-radius);
751 | }
752 |
753 | // Stream previews
754 | .streamPreview_adbea6 {
755 | background: var(--background-secondary);
756 | width: 330px;
757 |
758 | .previewContainer_adbea6 {
759 | background: var(--background-secondary);
760 | height: 200px;
761 | }
762 | }
763 |
764 | // Tooltips
765 | .tooltip-14MtrL {
766 | background: var(--background-secondary-alt);
767 | }
768 | .tooltipPointer_b6c360 {
769 | border-top-color: var(--background-secondary-alt) !important;
770 | }
771 |
772 | // Invite modal
773 | .modal-atz_3z {
774 | .header_f9a4c9 {
775 | box-shadow: none;
776 | }
777 | .container__33507 {
778 | background-color: var(--background-secondary);
779 | }
780 | .title-3hptVQ {
781 | margin: 8px;
782 | }
783 | .input-2g-os5 {
784 | border-radius: 0;
785 | }
786 | .inviteRowButton-3hcOhY {
787 | width: fit-content;
788 | border: none;
789 | }
790 |
791 | & > .footer-1hTRRZ > .content-3nJg0c {
792 | .inviteBannerUpsell-1t_LYM {
793 | order: 3;
794 | margin-top: 0;
795 | }
796 |
797 | .footerText-2QLGHU {
798 | margin: 8px 8px 16px;
799 | order: 2;
800 | }
801 |
802 | .input_f8bc55 {
803 | order: 4;
804 | }
805 |
806 | .marginBottom8_f7730b {
807 | margin: 8px;
808 | order: 1;
809 | }
810 | }
811 | .content-3nJg0c:before,
812 | .title-3hptVQ {
813 | display: none;
814 | }
815 | }
816 |
817 | // Create a server
818 | .container_a4d79f {
819 | background-color: var(--background-primary);
820 | border-radius: 8px;
821 |
822 | --background-primary: #252a3e;
823 | --background-secondary: #1e2337;
824 | --background-secondary-alt-alt: #1b1d31;
825 | --header-primary: #d0d0d0;
826 | --header-secondary: #fff;
827 | --text-normal: #dcddde;
828 | --text-muted: #dcddde;
829 | --interactive-normal: #fff9f9;
830 | --primary-400: #fff;
831 |
832 | .container_a47d49 {
833 | border: none;
834 | background-color: var(--background-modifier-hover);
835 | }
836 |
837 | .input_f8bc55,
838 | .input_e8a9c7 {
839 | background-color: var(--background-secondary);
840 | }
841 |
842 | .footer_f9a4c9 .button_dd4f85.lookBlank_dd4f85 {
843 | color: var(--header-secondary);
844 | }
845 | }
846 |
847 | // New channels and role thing and member thing
848 | .container_f1fd9c,
849 | .background_e85cee,
850 | .header_f1fd9c,
851 | .emptyPage_c6b11b,
852 | .scrollerContainer_c6b11b,
853 | .container_c2efea,
854 | .container_d20375,
855 | .page_d20375,
856 | .pageBody_c2efea {
857 | background-color: var(--background-primary) !important;
858 | }
859 | .row_b53f4f,
860 | .container__33507,
861 | .channelRow_f04d06 {
862 | background-color: var(--background-secondary);
863 | }
864 |
865 | .container_b6cd66 {
866 | background-color: var(--background-tertiary) !important;
867 | }
868 |
869 | .inviteButton_d32e26 {
870 | background-color: var(--main-color);
871 | }
872 |
873 | .mainTableContainer_e23072 {
874 | background-color: var(--background-secondary);
875 | }
876 |
877 | .tableHeaderRow_e6d0a5:first-child:after {
878 | box-shadow: none;
879 | }
880 |
881 | .checkbox_f6cde8 {
882 | background-color: var(--background-primary);
883 | border: none;
884 | }
885 |
886 | // Welcome popout
887 | .contentWrapper_ed5743 {
888 | background: var(--background-primary);
889 | }
890 |
891 | // Keyboard Combos modal
892 | .keyboardShortcutsModal_ad95dc {
893 | background: var(--background-primary);
894 |
895 | .keybindShortcut-3zF1P9 span {
896 | background: var(--main-color);
897 | }
898 | }
899 |
900 | // SCTR connection
901 | .container__13b2a {
902 | border-radius: 12px;
903 | overflow: hidden;
904 |
905 | .header-2C89wJ {
906 | background-color: var(--background-tertiary);
907 | }
908 | section {
909 | background-color: var(--background-primary);
910 | }
911 | }
912 |
913 | // Picture-in-picture
914 | .pictureInPictureWindow_e0c856 {
915 | z-index: 10000;
916 | }
917 | .pictureInPictureVideo_cadaa5 .container_fc4f04 {
918 | width: 100%;
919 | }
920 |
921 | // no dividers thx
922 | .content_a7d72e:before,
923 | .divider_fc4f04,
924 | .separator_d90b3d {
925 | display: none;
926 | }
927 |
928 | // Removing borders
929 | .attachWrapper_f298d4,
930 | .panel_bf1a22,
931 | .peopleListItem_d51464,
932 | .rowWrapper_f1629a + .rowWrapper_f1629a .row_f1629a,
933 | .header_f1629a,
934 | .headerCell_f1629a,
935 | .containerBackground_ccd3df {
936 | border: none;
937 | }
938 |
939 | // UNSET TEXT TRANSFORM SOMETIMES IS BETTER THAN UPPERCASE TEXT TRANSFORM
940 | .headerText_c1d9fd,
941 | .bodyTitle-Y0qMQz,
942 | .userInfoSectionHeader-CBvMDh,
943 | .title-3hptVQ,
944 | .contentTitle_bcc24e,
945 | .header-3A13BX,
946 | .calendarPicker_be05cd .react-datepicker__current-month,
947 | :root .react-datepicker__day-name,
948 | .subSectionHeader-1bsAit {
949 | text-transform: unset;
950 | }
951 |
952 | // masks are wild
953 | .mask_c51b4e {
954 | img {
955 | border-radius: 0 !important;
956 | }
957 |
958 | foreignObject {
959 | mask: none !important;
960 | border-radius: var(--avatar-radius) !important;
961 | }
962 | }
963 |
964 | // Status masks
965 | .pointerEvents_c51b4e {
966 | mask: none !important;
967 | rx: 30;
968 |
969 | &[mask="url(#svg-mask-status-typing)"] {
970 | rx: 6;
971 | }
972 | &[mask="url(#svg-mask-status-online-mobile)"] {
973 | rx: 4;
974 | }
975 | }
976 |
977 | // Loading screen
978 | .ready_e40c16 {
979 | display: none;
980 |
981 | & + .text_e40c16 {
982 | top: 82px;
983 |
984 | &::before {
985 | content: "";
986 | position: absolute;
987 | bottom: 100px;
988 | left: 50px;
989 | width: 200px;
990 | height: 200px;
991 | background: url("https://i.imgur.com/2XrlegJ.png") center/80% no-repeat;
992 | animation: jump 1s infinite;
993 |
994 | @keyframes jump {
995 | 0% {
996 | transform: translateY(0);
997 | }
998 | 20% {
999 | transform: translateY(-25px);
1000 | }
1001 | 40% {
1002 | transform: translateY(0);
1003 | }
1004 | 60% {
1005 | transform: translateY(-12px);
1006 | }
1007 | 100% {
1008 | transform: translateY(0);
1009 | }
1010 | }
1011 | }
1012 | }
1013 | }
1014 |
1015 | // Animation
1016 | &.full-motion .translate-PeW1wK {
1017 | transform: translateZ(0);
1018 | animation:
1019 | zoom 0.3s ease,
1020 | fade 0.3s ease;
1021 | }
1022 |
1023 | // ==> Keyframes <==
1024 |
1025 | @keyframes sidebarStatusTransalteX {
1026 | from {
1027 | transform: translateX(-15%);
1028 | }
1029 | to {
1030 | transform: none;
1031 | }
1032 | }
1033 |
1034 | @keyframes sidebarStatusTransalteXReverse {
1035 | from {
1036 | transform: translateX(15%);
1037 | }
1038 | to {
1039 | transform: none;
1040 | }
1041 | }
1042 |
1043 | @keyframes fade {
1044 | 0% {
1045 | opacity: 0;
1046 | }
1047 | 100% {
1048 | opacity: 1;
1049 | }
1050 | }
1051 |
1052 | @keyframes zoom {
1053 | from {
1054 | transform: scale(1.05);
1055 | }
1056 | to {
1057 | transform: scale(1);
1058 | }
1059 | }
1060 |
1061 | @keyframes callzoom {
1062 | from {
1063 | background: var(--background-primary);
1064 | margin: 0;
1065 | border-radius: 0;
1066 | opacity: 0;
1067 | }
1068 | to {
1069 | background: var(--background-secondary);
1070 | margin: 15px;
1071 | border-radius: 10px;
1072 | opacity: 1;
1073 | }
1074 | }
1075 |
1076 | @keyframes blink {
1077 | 79% {
1078 | content: ">_<";
1079 | }
1080 | 80% {
1081 | content: "-_-";
1082 | }
1083 | 90% {
1084 | content: ">_<";
1085 | }
1086 | 100% {
1087 | content: "-_-";
1088 | }
1089 | }
1090 | }
1091 |
1092 | // Replacing the brand colors and adding dumb colors from Discord
1093 | :root {
1094 | --brand-400: var(--main-color);
1095 | --brand-500: var(--main-color);
1096 | --text-brand: var(--main-color);
1097 | --control-brand-foreground: var(--main-color);
1098 | --card-secondary-bg: var(--background-secondary);
1099 | }
--------------------------------------------------------------------------------
/stuff/_plugins_support.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // CustomStatusPresets
3 | .scale-3UGUBw.didRender-2SiRlm {
4 | transform: scale(1) !important;
5 | }
6 |
7 | #status-picker.menu_d90b3d #status-picker-custom-status {
8 | .labelContainer-2vJzYL {
9 | padding: 0 16px;
10 | }
11 |
12 | & + .layer_cd0de5 {
13 | top: 432px !important;
14 | left: 359px !important;
15 |
16 | .submenu-1apzyU {
17 | background: var(--background-tertiary);
18 | border-radius: 0 8px 8px 0;
19 | }
20 | }
21 | }
22 |
23 | // Game Activity Toggle - BetterDiscord - Thanks DevilBro
24 | .gameActivityToggleAdded-Yd-YxC > div:last-child button:first-child {
25 | color: var(--main-color);
26 | }
27 |
28 | .activityPanel_a4d4d9
29 | ~ .gameActivityToggleAdded-Yd-YxC
30 | > div:last-child
31 | button:first-child {
32 | margin-right: 35px;
33 | }
34 |
35 | // MemberCount
36 | #MemberCount {
37 | top: 48px;
38 |
39 | .membersGroup_cbd271 {
40 | margin-top: 0;
41 | padding: 18px 8px 0 16px;
42 | }
43 |
44 | & + .members_cbd271 {
45 | margin-top: 0;
46 | padding-top: 70px;
47 | }
48 | }
49 |
50 | // Status weird behavior with BetterDiscord
51 | .mask_c51b4e > svg > mask > :not(:first-child) {
52 | display: none;
53 | }
54 |
55 | // BDFDB notifications
56 | .notice__5fd4c[id] {
57 | margin: -30px 240px 0px 90px;
58 | border-radius: 8px 8px 0 0 !important;
59 |
60 | & ~ .layers_d4b6c5 .sidebar_a4d4d9 {
61 | border-radius: 0;
62 | }
63 | }
64 |
65 | // ChannelDms
66 | .ChannelDms-channelmembers-wrap {
67 | width: 240px;
68 |
69 | .ChannelDms-channelmembers-header {
70 | margin-top: -48px;
71 | padding-top: 48px;
72 | max-height: calc(100% + 48px);
73 | background: var(--background-secondary);
74 | border-bottom-width: 0px;
75 |
76 | & + div .membersWrap_cbd271 {
77 | margin-top: 0;
78 | max-height: unset;
79 |
80 | .members_cbd271 {
81 | padding-top: 0;
82 | }
83 | }
84 | }
85 | }
86 |
87 | // ChannelsTabs
88 | #channelTabs-container {
89 | position: relative;
90 | left: 80px;
91 | width: calc(100% - 96px);
92 | background-color: var(--background-tertiary);
93 |
94 | & ~ .layers_d4b6c5 .guilds_a4d4d9 {
95 | margin-top: -85px;
96 | }
97 | }
98 |
99 | // ServerFolders
100 | ul[data-list-id="guildfoldersnav"] {
101 | margin-top: 12px;
102 | }
103 |
104 | // Vendetta plugins
105 | .vc-addon-name-author {
106 | white-space: nowrap;
107 | overflow: hidden;
108 | text-overflow: ellipsis;
109 | }
110 | }
--------------------------------------------------------------------------------
/stuff/_server-list.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | .guilds_a4d4d9 {
3 | width: 90px;
4 | margin-top: -40px;
5 |
6 | // When full-screen video
7 | &.hidden_fea3ef {
8 | width: 0 !important;
9 | }
10 |
11 | &::before {
12 | content: "";
13 | position: absolute;
14 | bottom: 135px;
15 | left: 0;
16 | z-index: 1;
17 | width: 90px;
18 | height: 100px;
19 | background: linear-gradient(
20 | 360deg,
21 | var(--background-tertiary),
22 | transparent
23 | );
24 | pointer-events: none;
25 | }
26 |
27 | .scroller_fea3ef {
28 | padding: 30px 0;
29 |
30 | // Home button
31 | &
32 | > .tutorialContainer_c96c45:first-child
33 | > .listItem_c96c45
34 | .childWrapper_a6ce15 {
35 | background: var(--main-color);
36 | color: #fff;
37 | }
38 |
39 | // Server
40 | .listItem_c96c45 {
41 | width: 90px;
42 | margin: 0 0 12px;
43 |
44 | .wrapper_c5f96a,
45 | .svg_c5f96a {
46 | width: 42px;
47 | height: 42px;
48 | }
49 |
50 | .upperBadge_c5f96a {
51 | top: 2px;
52 | right: -1px;
53 | }
54 |
55 | // Mention badge
56 | .lowerBadge_c5f96a {
57 | bottom: 4px;
58 | right: -5px;
59 |
60 | .numberBadge_df8943 {
61 | min-width: 25px;
62 | background: var(--main-color) !important;
63 | font-size: 8px;
64 | }
65 | &:last-child .numberBadge_df8943 {
66 | box-shadow: 0 0 10px 0 #0008;
67 | }
68 | }
69 |
70 | // Server icon
71 | .wrapper__8436d {
72 | &.selected_ae80f7 .childWrapper_a6ce15,
73 | &:hover .childWrapper_a6ce15 {
74 | background: var(--main-color);
75 | }
76 |
77 | .childWrapper_a6ce15 {
78 | background: var(--background-secondary);
79 | }
80 | }
81 |
82 | defs g:last-child {
83 | display: none;
84 | }
85 | }
86 |
87 | // Server Folders
88 | .wrapper_bc7085 {
89 | width: 90px;
90 |
91 | .expandedFolderBackground_bc7085 {
92 | --custom-folder-item-guild-icon-margin: 12px !important;
93 |
94 | left: 21px;
95 |
96 | & ~ ul {
97 | .wrapper_c5f96a {
98 | width: 42px;
99 | height: 42px;
100 | border-radius: 50%;
101 | overflow: hidden;
102 | }
103 | }
104 | }
105 |
106 | .folderIconWrapper_bc7085 {
107 | transition: border-radius 200ms;
108 |
109 | &:hover {
110 | border-radius: calc(16px - 4px);
111 | }
112 | }
113 |
114 | .wrapper_c5f96a {
115 | width: 42px;
116 |
117 | & > svg > foreignObject {
118 | mask: none;
119 |
120 | .folder_bc7085 {
121 | background: transparent;
122 | }
123 |
124 | &.expanded {
125 | .expandedFolderBackground_bc7085 {
126 | background: var(--background-secondary);
127 | }
128 | }
129 | }
130 | }
131 | }
132 |
133 | // Create server + Discover buttons
134 | .circleIconButton_db6521 {
135 | border-radius: 999px;
136 | border: dashed 2px var(--epicshadow1);
137 | background: transparent;
138 | color: var(--epicshadow1);
139 | transition: all 0.2s;
140 | }
141 |
142 | .tutorialContainer_c96c45 {
143 | &:hover .circleIconButton_db6521,
144 | & + .listItem_c96c45:hover .circleIconButton_db6521 {
145 | background: transparent;
146 | color: var(--main-color);
147 | border-color: var(--main-color);
148 | }
149 |
150 | svg > foreignObject,
151 | & + .listItem_c96c45 svg > foreignObject {
152 | mask: none;
153 | }
154 | }
155 | .wrapperSimple_c5f96a foreignObject {
156 | mask: none;
157 | }
158 |
159 | // Some space for the avatar
160 | & > div:last-child {
161 | margin-bottom: 80px;
162 | }
163 |
164 | &::-webkit-scrollbar {
165 | display: none;
166 | }
167 | }
168 |
169 | .footer_aa1bff {
170 | width: 100%;
171 | padding-bottom: 70px;
172 |
173 | .listItem_c96c45 {
174 | width: 100%;
175 | }
176 | }
177 |
178 | // Mentions & Unread
179 | .mention_edf32f {
180 | height: 100%;
181 | background: linear-gradient(
182 | 360deg,
183 | transparent,
184 | var(--background-tertiary)
185 | );
186 | transition: color 0.2s;
187 | opacity: 1;
188 | text-transform: capitalize;
189 | color: var(--textcolor);
190 | animation: fade 0.5s;
191 | border-radius: 0;
192 |
193 | &:hover {
194 | color: var(--main-color);
195 | }
196 | }
197 | .unreadMentionsIndicatorBottom_fea3ef .mention_edf32f {
198 | background: transparent;
199 | }
200 |
201 | // In server
202 | .unreadMentionsIndicatorTop_fea3ef,
203 | .unreadMentionsIndicatorBottom_fea3ef {
204 | width: 100%;
205 | height: 30px;
206 | padding: 0;
207 | }
208 | }
209 | }
--------------------------------------------------------------------------------
/stuff/_settings.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | .layer_d4b6c5 {
3 | transform: unset !important;
4 |
5 | &.baseLayer_d4b6c5 {
6 | opacity: 1 !important;
7 |
8 | &.stop-animations {
9 | transform: scale(1) !important;
10 | }
11 | }
12 | &:not(.baseLayer_d4b6c5) {
13 | margin-left: 90px;
14 | }
15 |
16 | // Scroller
17 | .sidebarRegion_c25c6d {
18 | flex: unset;
19 | background: var(--background-tertiary);
20 |
21 | .sidebarRegionScroller_c25c6d {
22 | justify-content: flex-start;
23 | border-radius: 8px 0 0;
24 |
25 | .sidebar_c25c6d {
26 | width: 240px;
27 |
28 | // New search bar
29 | .searchBar_e7c031 {
30 | margin: 0 30px 15px 30px;
31 | border-radius: 8px;
32 | }
33 |
34 | .side_a0 .header_a0 {
35 | color: var(--textcolor);
36 | }
37 |
38 | .bd-sidebar-header-label {
39 | color: var(--textcolor);
40 | padding: 0;
41 | }
42 |
43 | .side_a0 .header_a0,
44 | .side_a0 .item_a0,
45 | .bd-sidebar-header {
46 | padding: 6px 30px;
47 | border-radius: 0;
48 | }
49 |
50 | // Discord social stuff
51 | .socialLinks_c44e94 {
52 | justify-content: center;
53 | display: flex;
54 | flex-direction: row;
55 | }
56 |
57 | // Client informations
58 | .info_c5a741 {
59 | padding-left: 30px;
60 | }
61 | }
62 | .sidebar_c25c6d,
63 | .flexChild_dc333f {
64 | padding-left: 0 !important;
65 | padding-right: 0 !important;
66 | }
67 |
68 | &::-webkit-scrollbar {
69 | display: none;
70 | }
71 | }
72 | }
73 |
74 | // Panel
75 | .contentColumn_c25c6d,
76 | .customColumn_c25c6d {
77 | min-width: unset;
78 | max-width: 95%;
79 | }
80 |
81 | // Close button
82 | .toolsContainer_c25c6d {
83 | position: absolute;
84 | right: 0px;
85 |
86 | .closeButton_df5532 {
87 | &:active {
88 | transform: none;
89 | }
90 |
91 | &::before {
92 | content: "";
93 | position: fixed;
94 | top: 0;
95 | left: 0;
96 | width: 90px;
97 | height: 100%;
98 | z-index: 100;
99 | }
100 | }
101 | }
102 | }
103 |
104 | // Save bar
105 | .noticeRegion_c25c6d {
106 | right: 0;
107 | max-width: 100%;
108 |
109 | .container_b6cd66 {
110 | background-color: var(--background-secondary) !important;
111 | }
112 | }
113 |
114 | // -- User settings --
115 |
116 | // My account
117 | @media (max-width: 1465px) {
118 | .accountProfileCard_b69b77 {
119 | flex-direction: column;
120 |
121 | .mask_d5fdb1 {
122 | position: absolute;
123 | min-height: 150px !important;
124 | max-width: 100% !important;
125 |
126 | mask {
127 | display: none;
128 | }
129 | foreignObject {
130 | y: -51px !important;
131 | }
132 | }
133 |
134 | // Banner
135 | .banner_d5fdb1 {
136 | border-radius: 8px 8px 0 0 !important;
137 | height: 200px !important;
138 | flex: unset !important;
139 | }
140 |
141 | // User info
142 | .userInfo_b69b77 {
143 | height: 150px !important;
144 | margin-left: 0 !important;
145 | justify-content: space-evenly !important;
146 |
147 | // Badges
148 | .container_b64375 {
149 | justify-content: center;
150 | }
151 | }
152 |
153 | .background_b69b77 {
154 | margin-top: 150px !important;
155 | flex: unset !important;
156 | }
157 | }
158 | }
159 |
160 | .accountProfileCard_b69b77 {
161 | display: flex;
162 | background-color: var(--background-secondary);
163 |
164 | .mask_d5fdb1 {
165 | mask {
166 | display: none;
167 | }
168 | foreignObject {
169 | y: -110px;
170 | }
171 | }
172 |
173 | // Banner
174 | .banner_d5fdb1 {
175 | -webkit-mask-image: linear-gradient(
176 | rgba(0, 0, 0, 0.7607843137),
177 | rgba(0, 0, 0, 0.7607843137)
178 | );
179 | border-radius: 8px 0 0 8px;
180 | height: 320px !important;
181 | flex: 1;
182 | }
183 |
184 | // User info
185 | .userInfo_b69b77 {
186 | position: absolute;
187 | display: grid;
188 | grid-template-areas:
189 | "avatar username"
190 | "avatar button";
191 | gap: 20px;
192 | overflow: hidden;
193 | height: 100%;
194 | padding: 0;
195 | justify-content: flex-start;
196 | margin-left: 40px;
197 |
198 | // Avatar
199 | .avatar_b69b77 {
200 | grid-area: avatar;
201 | position: static;
202 | width: 120px !important;
203 | height: 120px !important;
204 | border: none;
205 | background: none;
206 | align-self: center;
207 |
208 | .mask_c51b4e {
209 | width: 120px;
210 | height: 120px;
211 | }
212 | }
213 |
214 | .badgeList_b69b77 {
215 | background-color: transparent;
216 | }
217 |
218 | // Username
219 | & > div:nth-child(2) {
220 | grid-area: username;
221 | align-self: flex-end;
222 | }
223 |
224 | // Edit profile
225 | button:last-child {
226 | grid-area: button;
227 | }
228 | }
229 |
230 | .background_b69b77 {
231 | margin: 0;
232 | flex: 1;
233 | }
234 | }
235 |
236 | // User profile
237 | .profileCustomizationSection_bad983 .baseLayout_bad983 {
238 | & > :first-child {
239 | flex: 2 auto;
240 | }
241 |
242 | .userPopoutInner_c69a7b:before {
243 | width: calc(100% - 8px) !important;
244 | }
245 |
246 | // Banner
247 | .header_f4c122 {
248 | min-height: 210px;
249 | }
250 | .header_f4c122 > .mask_d5fdb1 {
251 | overflow: visible;
252 | min-height: unset !important;
253 | contain: unset;
254 |
255 | .banner_d5fdb1 {
256 | position: absolute;
257 | height: 200px !important;
258 | -webkit-mask-image: linear-gradient(#000000c2, #000000c2);
259 | clip-path: polygon(
260 | 0 0,
261 | 100% 0,
262 | 100% calc(100% - 25px),
263 | 50% 100%,
264 | 0 calc(100% - 25px)
265 | );
266 | }
267 |
268 | & > foreignObject {
269 | mask: none;
270 | }
271 | }
272 |
273 | // Avatar
274 | .avatar_f18fcb {
275 | top: 15px;
276 | left: 50%;
277 | margin-left: -40px;
278 |
279 | .avatarUploaderInner_ab876d {
280 | border: none;
281 | border-radius: var(--avatar-radius);
282 | }
283 |
284 | .imageUploaderIcon_de76e4 {
285 | display: none;
286 | }
287 | .status_ab876d {
288 | background-color: transparent;
289 | }
290 | }
291 |
292 | // User infos
293 |
294 |
295 | // Status + About Me
296 | .customStatus__3aa7f {
297 | padding-top: 12px;
298 | }
299 |
300 | .divider-1wtgZ3 {
301 | display: none;
302 | }
303 | }
304 |
305 | .bioTextArea_ccf27d {
306 | border-radius: 8px;
307 | }
308 |
309 | // Privacy & Safety
310 | .item-2idW98 {
311 | background: var(--background-secondary);
312 | transition: transform 200ms;
313 |
314 | &:hover {
315 | background: var(--background-secondary);
316 | }
317 | }
318 |
319 | // Family center
320 | #family-center-tab .max-width_d00e26, #family-center-tab .max-width_a2e886, #requests-tab .container_f70f48 {
321 | max-width: unset;
322 | }
323 |
324 | // Connections
325 | .connectionHeader_e2a436 {
326 | background: transparent;
327 |
328 | .connectionDelete_e2a436 {
329 | border-color: transparent;
330 | border-radius: 50%;
331 | padding: 8px 8px 5px 8px;
332 | transition: background 100ms;
333 |
334 | &:hover {
335 | background: #fff2;
336 | }
337 | }
338 | }
339 |
340 | // Nitro
341 | .premiumLabel_ae3c77 {
342 | flex-direction: row-reverse;
343 | justify-content: flex-end;
344 |
345 | svg {
346 | margin-right: 8px;
347 | }
348 |
349 | & + .selectedBackground_ae3c77 {
350 | background-color: var(--background-modifier-selected);
351 | border-radius: 0;
352 | }
353 | }
354 |
355 | // Boost
356 | .cardWrapper_f9902b {
357 | transform: translateZ(0);
358 | overflow: hidden;
359 | background: #0008;
360 | --header-primary: #fff;
361 |
362 | .tierLabel__41356 {
363 | color: #fff;
364 | font-weight: 500;
365 | }
366 | .gemIndicatorContainer_b03ca0 {
367 | background: transparent;
368 | backdrop-filter: blur(5px);
369 |
370 | .gemWithoutLabel__6225b {
371 | color: #999;
372 | }
373 | }
374 |
375 | .icon_a64689 {
376 | border-radius: 8px;
377 |
378 | &::before {
379 | content: "";
380 | position: fixed;
381 | top: 0;
382 | left: 0;
383 | width: 100%;
384 | height: 100%;
385 | background-image: inherit;
386 | background-repeat: no-repeat;
387 | background-size: cover;
388 | background-position: 50% 50%;
389 | z-index: -1;
390 | opacity: 0.5;
391 | filter: blur(20px);
392 | }
393 | }
394 | }
395 |
396 | // Gift Inventory
397 | .promotionCard_e8af36 {
398 | border-radius: 8px;
399 | }
400 |
401 | // Billing
402 | .paymentPane_f66684,
403 | .codeRedemptionRedirect_cb70f4 {
404 | background: var(--background-secondary);
405 | border: none;
406 |
407 | .paginator_f66684,
408 | .bottomDivider_f66684 {
409 | background: transparent;
410 | }
411 | .paymentRow_f66684 {
412 | border: none;
413 |
414 | .expandedInfo_a28a08 {
415 | background: var(--background-primary);
416 | }
417 | }
418 | }
419 |
420 | // Voice settings
421 | .micTest_ca3055 .notches_e5cdf3.gray_e5cdf3 {
422 | color: var(--background-primary);
423 | }
424 |
425 | // Activity status
426 | .addGamePopout_fd966d {
427 | background: var(--background-secondary);
428 | box-shadow: none;
429 |
430 | .divider_b8ab18 {
431 | display: none;
432 | }
433 | }
434 | .gameNameInput_fd966d {
435 | padding: 8px;
436 |
437 | &:focus,
438 | &:hover {
439 | background-color: var(--background-primary);
440 | border: none;
441 | }
442 | }
443 |
444 | // Game overlay
445 | .notificationSettings-1U0JsJ {
446 | max-width: unset;
447 |
448 | .wrapper_b877fa {
449 | border: none;
450 | background: var(--background-secondary);
451 | border-radius: 20px;
452 |
453 | .option_b877fa {
454 | margin: 10px;
455 | border-radius: 16px;
456 | background: var(--epicshadow1);
457 |
458 | &:hover {
459 | background: var(--main-color);
460 | opacity: 0.4;
461 | }
462 | &.selected_b877fa {
463 | background: var(--main-color);
464 | box-shadow: unset;
465 | }
466 | }
467 | }
468 | }
469 |
470 | // Hypesquad
471 | .membershipDialog-2wAdpQ {
472 | border-radius: 10px;
473 |
474 | &:after {
475 | left: 5px;
476 | }
477 | }
478 | .videoWrapper_b8e00f {
479 | background: transparent;
480 |
481 | iframe {
482 | margin: auto;
483 | border-radius: 10px;
484 | }
485 | }
486 |
487 | // -- Server settings --
488 |
489 | // Overview
490 | .avatarUploaderInner_f0a9ff {
491 | border-radius: 16px;
492 | box-shadow: none;
493 | }
494 |
495 | .imageUploaderIcon_de76e4 {
496 | display: none;
497 | }
498 |
499 | // Roles
500 | .customScroller_c25c6d > div,
501 | .contentWidth_bd05f1 {
502 | max-width: unset;
503 | }
504 | .customColorPicker_bbc020 {
505 | background: var(--background-secondary);
506 | border: none;
507 | border-radius: 8px;
508 |
509 | .customColorPickerInputContainer_e467bb .input_f8bc55 {
510 | background-color: var(--background-secondary);
511 | }
512 | }
513 |
514 | // Emoji
515 | .emojiAliasInput-1y-NBz .emojiInput-1aLNse {
516 | background: var(--background-primary);
517 | }
518 |
519 | // Audit log
520 | .auditLog_eebd33 {
521 | border: none;
522 | border-radius: 8px;
523 | overflow: hidden;
524 |
525 | .header_eebd33,
526 | .changeDetails_eebd33 {
527 | background: var(--background-secondary);
528 | }
529 | .divider_eebd33 {
530 | display: none;
531 | }
532 | }
533 |
534 | // Widget
535 | .copyInput_d7e343 {
536 | border: none;
537 | border-radius: 8px;
538 | }
539 |
540 | // App directory
541 | .directoryContainer_da3f59 {
542 | background-color: var(--background-primary);
543 | }
544 |
545 | // Discovery
546 | .modal-1gWd9S,
547 | .container_a74b6f {
548 | .footer_ffaecb {
549 | border-bottom-left-radius: 0 !important;
550 | }
551 | }
552 |
553 | // Membership Screening
554 | .editCircle-2uL_D3,
555 | .editCircle-ityklj {
556 | background: var(--background-primary);
557 | }
558 | .formFieldWrapper-2LV3S6 {
559 | border: none;
560 | }
561 |
562 | // Discovery
563 | .sparkles-2XXTZO {
564 | z-index: unset;
565 | }
566 |
567 | // Server Boost Status
568 | .background_bfac79 {
569 | color: var(--background-secondary);
570 | }
571 | .tierInProgress_bfac79,
572 | .tierBody_da77bd,
573 | .tierHeaderLocked_da77bd,
574 | .tierHeaderUnlocked_da77bd {
575 | background: var(--background-secondary);
576 | }
577 |
578 | // Members
579 | .overflowRolesPopout_e4010c,
580 | .overflowRolesPopoutArrow_e4010c {
581 | background: var(--background-secondary);
582 | box-shadow: none;
583 | }
584 | }
--------------------------------------------------------------------------------
/stuff/_user-area.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | .panels_a4d4d9 {
3 | position: relative;
4 | z-index: unset;
5 |
6 | // Game part
7 | .activityPanel_a4d4d9 {
8 | position: absolute;
9 | bottom: 20px;
10 | right: 105px;
11 | padding: 0;
12 | border-radius: 8px;
13 |
14 | .gameWrapper_bf1a22 {
15 | display: none;
16 | }
17 | .actions_bf1a22 {
18 | margin: 0;
19 |
20 | .button_dd4f85 {
21 | color: var(--main-color);
22 | }
23 | }
24 |
25 | &:hover {
26 | background-color: var(--background-modifier-selected);
27 | }
28 | }
29 |
30 | & > .container_b2ca13 {
31 | padding: 10px 8px;
32 |
33 | // Avatar
34 | .avatarWrapper_b2ca13[aria-expanded] {
35 | .wrapper_c51b4e {
36 | position: fixed;
37 | left: 29px;
38 | bottom: 23px;
39 | z-index: 1;
40 | }
41 |
42 | &:hover {
43 | background-color: transparent;
44 | }
45 | }
46 |
47 | // Username
48 | .title-3XlmeX {
49 | font-weight: 500;
50 | }
51 |
52 | // Buttons
53 | .button_adca65 {
54 | color: #888;
55 |
56 | &[aria-checked="false"].enabled_adca65 {
57 | color: var(--main-color);
58 | }
59 | }
60 | }
61 | }
62 |
63 | // Server call
64 | .noChat_d880dc {
65 | &.wrapper_d880dc {
66 | background: #000;
67 | margin: 0;
68 | border-radius: 0;
69 | animation: unset;
70 |
71 | // Header top
72 | .headerWrapper_d880dc .container_fc4f04 {
73 | width: unset;
74 | }
75 |
76 | // Speaking ring
77 | .border_ba4b17.speaking_ba4b17 {
78 | box-shadow: inset 0 0 0 2.5px #43b581,
79 | inset 0 0 0 4.5px var(--background-secondary);
80 | }
81 |
82 | // Button
83 | .wrapper_b6e2f9 .button_dd4f85 {
84 | border-radius: 50%;
85 | }
86 | .colorable_ef18ee.primaryDark_ef18ee,
87 | .participantsButton_b83b18,
88 | .participantsButton_b83b18:hover {
89 | background: var(--background-secondary);
90 | }
91 | .css-1k9nrkn {
92 | background: transparent;
93 | }
94 | .controlButton_b6e2f9 foreignObject {
95 | mask: none;
96 | }
97 | }
98 | }
99 | }
--------------------------------------------------------------------------------