Tetszik 0
Fork 0

Utoljára aktív 1774340228

CSS themes for Fluxer

scss web

Revízió 712699f0ced912190f21640cdb5616b8cbc3572a

breeze-dark.css Eredeti
1* { border-radius: 5px !important; }
2
3:root { --background-secondary: #141618; }
4:root { --background-primary: #202326; }
5:root { --background-secondary-alt: #292C30; }
6:root { --background-tertiary: #141618; }
7:root { --background-textarea: #141618; }
8:root { --background-header-secondary: #202326; }
9:root { --background-header-primary-hover: #292C30; }
10:root { --background-modifier-hover: #292C30; }
11:root { --guild-list-foreground: #141618; }
12:root { --background-modifier-accent: #A1A9B1; }
13:root { }
14:root { --brand-primary: #1E5774; }
15:root { --brand-secondary: #3DAEE9; }
16:root { --brand-primary-light: #3DAEE9; }
17:root { --brand-primary-fill: #FCFCFC; }
18:root { --status-online: #6EC137; }
19:root { --status-idle: #C65C00; }
20:root { --status-danger: #DA4453; }
21:root { --status-dnd: #B03745; }
22:root { --status-offline: #A1A9B1; }
23:root { }
24:root { --text-secondary: #A1A9B1; }
25:root { --text-tertiary: #A1A9B1; }
26:root { --text-primary-muted: #A1A9B1; }
27:root { --text-chat-muted: #A1A9B1; }
28:root { --text-chat: #FCFCFC; }
29:root { --text-link: #1D99F3; }
30:root { --text-tertiary-muted: #A1A9B1; }
31:root { --text-tertiary-secondary: #A1A9B1; }
32:root { --border-color: #A1A9B1; }
33:root { --border-color-hover: #1E5774; }
34:root { --border-color-focus: #3DAEE9; }
35:root { --accent-success: #27AE60; }
36:root { --accent-warning: #F67400; }
37:root { --accent-danger: #DA4453; }
38:root { --alert-note-color: #3DAEE9; }
39:root { --accent-purple: #9B59B6; }
40:root { --alert-tip-color: #6EC137; }
41:root { --alert-important-color: #AC8DD9; }
42:root { --alert-warning-color: #DF6D44; }
43:root { --alert-caution-color: #DD575C; }
44:root { --markup-mention-text: #FCFCFC; }
45:root { --markup-mention-fill: #1E5774; }
46:root { --markup-interactive-hover-fill: #3DAEE9; }
47:root { --markup-interactive-hover-text: #FCFCFC; }
48:root { --button-primary-fill: #292C30; }
49:root { --button-primary-active-fill: #3DAEE9; }
50:root { --button-primary-text: #FCFCFC; }
51:root { --button-inverted-text: #141618; }
52:root { --button-secondary-fill: #1D1F22; }
53:root { --button-secondary-active-fill: #1E5774; }
54:root { --button-secondary-text: #FCFCFC; }
55:root { --button-danger-fill: #292C30; }
56:root { --button-danger-active-fill: #DA4453; }
57:root { --button-danger-outline-border: #DA4453; }
58:root { --button-danger-outline-active-fill: #DA4453; }
59:root { --button-danger-text: #FCFCFC; }
60:root { --button-danger-outline-text: #FCFCFC; }
61:root { --button-danger-outline-active-border: #A1A9B1; }
62:root { --button-outline-border: #A1A9B1; }
63:root { --button-outline-text: #FCFCFC; }
64:root { --button-outline-active-fill: #FCFCFC; }
65:root { --button-outline-active-border: #3DAEE9; }
66:root { --bg-code-block: #121417; }
67:root { --bg-blockquote: #292C30; }
68:root { --bg-table-row-odd: #141618; }
69:root { --bg-table-row-even: #292C30; }
70:root { --background-modifier-selected: #1E5774; }
71:root { --text-primary: #FCFCFC; }
72:root { --background-modifier-accent-focus: #3DAEE9; }
73
breeze-light.css Eredeti
1* { border-radius: 5px !important; }
2
3:root { --background-primary: #EFF0F1; }
4:root { --background-secondary: #FFFFFF; }
5:root { --background-secondary-alt: #F7F7F7; }
6:root { --background-tertiary: #E3E5E7; }
7:root { --background-textarea: #FFFFFF; }
8:root { --background-header-primary: #DEE0E2; }
9:root { --background-header-secondary: #EFF0F1; }
10:root { --background-header-primary-hover: #E3E5E7; }
11:root { --background-modifier-hover: #E3E5E7; }
12:root { --background-modifier-accent: #707D8A; }
13:root { --brand-primary: #3DAEE9; }
14:root { --brand-secondary: #A3D4FA; }
15:root { --brand-primary-light: #A3D4FA; }
16:root { }
17:root { --text-on-brand-primary: #232629; }
18:root { --background-modifier-selected: #3DAEE9; }
19:root { --text-primary-muted: #707D8A; }
20:root { --text-chat-muted: #707D8A; }
21:root { --text-tertiary-muted: #707D8A; }
22:root { --border-color-focus: #3DAEE9; }
23:root { --status-online: #27AE60; }
24:root { --status-idle: #C65C00; }
25:root { --status-dnd: #B03745; }
26:root { --status-offline: #707D8A; }
27:root { --status-danger: #DA4453; }
28:root { --text-secondary: #707D8A; }
29:root { --button-inverted-fill: #2A2E32; }
30:root { --button-ghost-text: #232629; }
31:root { --guild_list-foreground: #232629; }
32:root { --text-primary: #232629; }
33:root { --text-chat: #232629; }
34:root { --button-secondary-fill: #A3D4FA; }
35:root { --button-secondary-active-fill: #3DAEE9; }
36:root { --button-secondary-text: #232629; }
37:root { --button-secondary-active-text: #232629; }
38:root { --button-inverted-text: #FCFCFC; }
39:root { --button-outline-text: #232629; }
40:root { --button-primary-text: #232629; }
41:root { --button-danger-text: #232629; }
42:root { --text-link: #2980B9; }
43:root { --brand-primary-fill: #232629; }
44:root { --accent-warning: #F67400; }
45:root { --accent-danger: #DA4453; }
46:root { --alert-note-color: #3DAEE9; }
47:root { --alert-tip-color: #27AE60; }
48:root { --accent-purple: #9B59B6; }
49:root { --alert-warning-color: #F67400; }
50:root { --alert-caution-color: #DA4453; }
51:root { --alert-important-color: #9B59B6; }
52:root { --markup-mention-text: #232629; }
53:root { --markup-mention-fill: #A3D4FA; }
54:root { --markup-interactive-hover-fill: #3DAEE9; }
55:root { --markup-interactive-hover-text: #232629; }
56:root { --button-primary-fill: #FCFCFC; }
57:root { --button-primary-active-fill: #3DAEE9; }
58:root { --button-danger-fill: #FCFCFC; }
59:root { --button-danger-outline-border: #DA4453; }
60:root { --button-danger-active-fill: #DA4453; }
61:root { --button-danger-outline-text: #232629; }
62:root { --button-danger-outline-active-fill: #DA4453; }
63:root { --button-outline-border: #2A2E32; }
64:root { --button-outline-active-fill: #3DAEE9; }
65:root { --button-outline-active-border: #3DAEE9; }
66:root { --background-modifier-accent-focus: #3DAEE9; }
67
memphis-storm.css Eredeti
1/* ═══════════════════════════════════════════════════
2 * Memphis Storm theme based on
3 * WINDOWS 95 — FLUXER THEME v3
4 * Built from real inspected class names only.
5 * ═══════════════════════════════════════════════════ */
6
7/* ─────────────────────────────────────────────────
8 * CHAT BACKGROUND
9 * ───────────────────────────────────────────────── */
10[class*="chatContent___"],
11[class*="messagesWrapper___"] {
12 background: white !important;
13}
14
15/* ─────────────────────────────────────────────────
16 * GUILD LIST (far left icon rail)
17 * ───────────────────────────────────────────────── */
18[class*="guildListScrollerWrapper___XzkwZG"],
19[class*="guildListScrollContainer___XzkwZG"],
20[class*="guildListContent___XzkwZG"],
21[class*="guildListTopSection___XzkwZG"],
22[class*="guildListGuildsSection___XzkwZG"] {
23 background: #c0c0c0 !important;
24}
25
26[class*="guildListScrollerWrapper___XzkwZG"] {
27 border-right: 2px solid #808080 !important;
28}
29
30[class*="guildIndicatorBar___XzkwZG"] {
31 background: #800080 !important;
32}
33
34[class*="guildDivider___XzkwZG"] {
35 background: #808080 !important;
36 border-bottom: 1px solid #ffffff !important;
37}
38
39[class*="addGuildButtonIcon___XzkwZG"] {
40 background: #c0c0c0 !important;
41 border-top: 2px solid #ffffff !important;
42 border-left: 2px solid #ffffff !important;
43 border-bottom: 2px solid #000000 !important;
44 border-right: 2px solid #000000 !important;
45 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
46 border-radius: 0 !important;
47 color: #800080 !important;
48}
49
50[class*="addGuildButtonIcon___XzkwZG"]:hover {
51 background: #c0c0c0 !important;
52 border-top: 2px solid #000000 !important;
53 border-left: 2px solid #000000 !important;
54 border-bottom: 2px solid #ffffff !important;
55 border-right: 2px solid #ffffff !important;
56 box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important;
57}
58
59[class*="fluxerButtonIcon___XzkwZG"] {
60 background: #c0c0c0 !important;
61 border-top: 2px solid #ffffff !important;
62 border-left: 2px solid #ffffff !important;
63 border-bottom: 2px solid #000000 !important;
64 border-right: 2px solid #000000 !important;
65 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
66 border-radius: 0 !important;
67 color: #800080 !important;
68}
69
70[class*="fluxerButton___XzkwZG"]:hover [class*="fluxerButtonIcon___XzkwZG"] {
71 border-top: 2px solid #000000 !important;
72 border-left: 2px solid #000000 !important;
73 border-bottom: 2px solid #ffffff !important;
74 border-right: 2px solid #ffffff !important;
75}
76
77/* ─────────────────────────────────────────────────
78 * DM LIST PANEL (Direct Messages column)
79 * ───────────────────────────────────────────────── */
80
81/* Outer column wrapper */
82.DMLayout\.module__dmListColumn___ZmIwOG,
83[class="DMLayout.module__dmListColumn___ZmIwOG"],
84div[class*="dmListColumn___ZmIwOG"] {
85 background: #c0c0c0 !important;
86}
87
88/* Main container + scroller */
89div[class*="dmListContainer___XzM3ZG"],
90div[class*="desktopScroller___XzM3ZG"],
91div[class*="scrollerContent___XzM3ZG"],
92div[class*="dmChannelList___XzM3ZG"] {
93 background: #c0c0c0 !important;
94}
95
96/* Quick Switcher header */
97button[class*="dmListHeader___XzM3ZG"] {
98 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
99 border-bottom: 2px solid #000000 !important;
100 border-top: 1px solid #a0a0ff !important;
101 width: 100% !important;
102}
103
104span[class*="dmListHeaderText___XzM3ZG"] {
105 color: #ffffff !important;
106}
107
108/* Ctrl+K kbd badges */
109div[class*="dmListHeaderShortcut___XzM3ZG"],
110kbd[class*="key___XzViNG"],
111span[class*="keybindHint___XzViNG"] {
112 background: #c0c0c0 !important;
113 color: #000000 !important;
114 border-top: 1px solid #ffffff !important;
115 border-left: 1px solid #ffffff !important;
116 border-bottom: 1px solid #000000 !important;
117 border-right: 1px solid #000000 !important;
118 border-radius: 0 !important;
119}
120
121/* Friends / Personal Notes / Plutonium nav buttons */
122button[class*="clickableItem___XzM3ZG"] {
123 background: #c0c0c0 !important;
124 border-top: 2px solid #ffffff !important;
125 border-left: 2px solid #ffffff !important;
126 border-bottom: 2px solid #000000 !important;
127 border-right: 2px solid #000000 !important;
128 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
129 border-radius: 0 !important;
130 margin: 2px 4px !important;
131 transition: none !important;
132 width: calc(100% - 8px) !important;
133}
134
135button[class*="clickableItem___XzM3ZG"]:hover {
136 background: #800080 !important;
137 border-top: 2px solid #000000 !important;
138 border-left: 2px solid #000000 !important;
139 border-bottom: 2px solid #ffffff !important;
140 border-right: 2px solid #ffffff !important;
141}
142
143button[class*="clickableItem___XzM3ZG"]:hover * {
144 color: #ffffff !important;
145}
146
147span[class*="clickableItemText___XzM3ZG"],
148div[class*="clickableItemIcon___XzM3ZG"] {
149 color: #000000 !important;
150}
151
152/* "Direct Messages" section separator */
153div[class*="dmSectionSeparator___XzM3ZG"] {
154 background: #808080 !important;
155 border-bottom: 1px solid #ffffff !important;
156 height: 2px !important;
157 margin: 4px 0 !important;
158}
159
160/* "Direct Messages" section header row */
161div[class*="dmSectionHeader___XzM3ZG"] {
162 background: #c0c0c0 !important;
163 border-top: 1px solid #808080 !important;
164 border-bottom: 1px solid #ffffff !important;
165 padding: 2px 8px !important;
166}
167
168span[class*="dmSectionHeaderLabel___XzM3ZG"] {
169 color: #000000 !important;
170 text-transform: uppercase !important;
171 letter-spacing: 0.05em !important;
172}
173
174/* + New DM button */
175button[class*="dmCreateButton___XzM3ZG"] {
176 background: #c0c0c0 !important;
177 border-top: 2px solid #ffffff !important;
178 border-left: 2px solid #ffffff !important;
179 border-bottom: 2px solid #000000 !important;
180 border-right: 2px solid #000000 !important;
181 box-shadow: inset -1px -1px 0 #808080 !important;
182 border-radius: 0 !important;
183 color: #000000 !important;
184}
185
186button[class*="dmCreateButton___XzM3ZG"]:hover {
187 border-top: 2px solid #000000 !important;
188 border-left: 2px solid #000000 !important;
189 border-bottom: 2px solid #ffffff !important;
190 border-right: 2px solid #ffffff !important;
191}
192
193/* DM conversation items — normal */
194button[class*="dmItem___XzM3ZG"] {
195 background: #c0c0c0 !important;
196 border-top: 2px solid #ffffff !important;
197 border-left: 2px solid #ffffff !important;
198 border-bottom: 2px solid #000000 !important;
199 border-right: 2px solid #000000 !important;
200 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
201 border-radius: 0 !important;
202 margin: 2px 4px !important;
203 transition: none !important;
204 width: calc(100% - 8px) !important;
205}
206
207button[class*="dmItem___XzM3ZG"]:hover {
208 background: #c0c0c0 !important;
209 outline: 1px dotted #800080 !important;
210 outline-offset: -2px !important;
211}
212
213/* DM item — SELECTED/active — sunken */
214button[class*="dmItemSelected___XzM3ZG"] {
215 background: #c0c0c0 !important;
216 border-top: 2px solid #000000 !important;
217 border-left: 2px solid #000000 !important;
218 border-bottom: 2px solid #ffffff !important;
219 border-right: 2px solid #ffffff !important;
220 box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important;
221}
222
223button[class*="dmItemSelected___XzM3ZG"] span[class*="dmItemNameText___XzM3ZG"] {
224 text-decoration: underline !important;
225}
226
227/* DM item text */
228span[class*="dmItemName___XzM3ZG"],
229span[class*="dmItemNameText___XzM3ZG"] {
230 color: #000000 !important;
231}
232
233/* Close X button on DM items */
234div[class*="dmItemCloseButton___XzM3ZG"] {
235 background: #c0c0c0 !important;
236 border-top: 2px solid #ffffff !important;
237 border-left: 2px solid #ffffff !important;
238 border-bottom: 2px solid #000000 !important;
239 border-right: 2px solid #000000 !important;
240 box-shadow: inset -1px -1px 0 #808080 !important;
241 border-radius: 0 !important;
242 color: #000000 !important;
243}
244
245div[class*="dmItemCloseButton___XzM3ZG"]:hover {
246 border-top: 2px solid #000000 !important;
247 border-left: 2px solid #000000 !important;
248 border-bottom: 2px solid #ffffff !important;
249 border-right: 2px solid #ffffff !important;
250}
251
252/* System tag badge (e.g. "SYSTEM" on Fluxer bot) */
253span[class*="tag___XzM2Zm"] {
254 background: #800080 !important;
255 color: #ffffff !important;
256 border-radius: 0 !important;
257 padding: 1px 4px !important;
258}
259
260span[class*="text___XzM2Zm"] {
261 color: #ffffff !important;
262}
263
264/* ─────────────────────────────────────────────────
265 * CHANNEL LIST PANEL — silver chrome
266 * ───────────────────────────────────────────────── */
267[class*="channelListScrollerWrapper___XzdlNz"] {
268 background: #c0c0c0 !important;
269 border-right: 2px solid #808080 !important;
270}
271
272[class*="channelListScroller___XzdlNz"] {
273 background: #c0c0c0 !important;
274}
275
276[class*="navigationContainer___XzdlNz"],
277[class*="channelGroupsContainer___XzdlNz"],
278[class*="channelGroup___XzdlNz"],
279[class*="membersSection___XzdlNz"] {
280 background: transparent !important;
281}
282
283/* ─────────────────────────────────────────────────
284 * GUILD HEADER — title bar
285 * ───────────────────────────────────────────────── */
286[class*="headerWrapper___ZGNlOD"] {
287 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
288 border-top: 2px solid #ffffff !important;
289 border-left: 2px solid #ffffff !important;
290 border-bottom: 2px solid #000000 !important;
291 border-right: 2px solid #000000 !important;
292 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #a0a0ff !important;
293 padding: 0 !important;
294}
295
296[class*="headerContainer___ZGNlOD"] {
297 background: transparent !important;
298 border: none !important;
299 box-shadow: none !important;
300}
301
302[class*="headerContent___ZGNlOD"] {
303 padding: 4px 8px !important;
304}
305
306[class*="guildName___ZGNlOD"] {
307 color: #ffffff !important;;
308 text-shadow: 1px 1px 0 #000040 !important;
309}
310
311[class*="caretIcon___ZGNlOD"] {
312 background: #c0c0c0 !important;
313 color: #000000 !important;
314 border-top: 2px solid #ffffff !important;
315 border-left: 2px solid #ffffff !important;
316 border-bottom: 2px solid #000000 !important;
317 border-right: 2px solid #000000 !important;
318 box-shadow: inset -1px -1px 0 #808080 !important;
319 border-radius: 0 !important;
320 padding: 2px !important;
321 width: 16px !important;
322 height: 14px !important;
323}
324
325[class*="headerContent___ZGNlOD"]:hover [class*="caretIcon___ZGNlOD"] {
326 border-top: 2px solid #000000 !important;
327 border-left: 2px solid #000000 !important;
328 border-bottom: 2px solid #ffffff !important;
329 border-right: 2px solid #ffffff !important;
330}
331
332/* ─────────────────────────────────────────────────
333 * CHANNEL HEADER BAR (top of chat)
334 * ──────────────────────────────�────────────────── */
335[class*="headerWrapper___XzkyNm"] {
336 background: #c0c0c0 !important;
337 border-bottom: 2px solid #808080 !important;
338 border-top: 1px solid #ffffff !important;
339}
340
341[class*="headerContainer___XzkyNm"] {
342 background: transparent !important;
343}
344
345/* Channel name + icon */
346[class*="channelName___XzkyNm"] {
347 color: #000000 !important;
348}
349
350[class*="channelIcon___XzkyNm"] {
351 color: #800080 !important;
352}
353
354/* Topic divider dot */
355[class*="topicDivider___XzkyNm"] {
356 color: #808080 !important;
357}
358
359/* Topic text */
360[class*="topicContainer___XzkyNm"],
361[class*="topicButton___XzkyNm"],
362[class*="topicButton___XzkyNm"] * {
363 color: #444444 !important;
364}
365
366/* Header icon buttons (star, bell, pin, members, search) */
367[class*="iconButton___XzkyNm"] {
368 background: #c0c0c0 !important;
369 border-top: 2px solid #ffffff !important;
370 border-left: 2px solid #ffffff !important;
371 border-bottom: 2px solid #000000 !important;
372 border-right: 2px solid #000000 !important;
373 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
374 border-radius: 0 !important;
375 color: #000000 !important;
376 transition: none !important;
377}
378
379[class*="iconButton___XzkyNm"]:hover {
380 background: #c0c0c0 !important;
381 border-top: 2px solid #000000 !important;
382 border-left: 2px solid #000000 !important;
383 border-bottom: 2px solid #ffffff !important;
384 border-right: 2px solid #ffffff !important;
385 box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important;
386}
387
388/* Selected/active icon button (members panel toggle when open) */
389[class*="iconButtonSelected___XzkyNm"] {
390 background: #c0c0c0 !important;
391 border-top: 2px solid #000000 !important;
392 border-left: 2px solid #000000 !important;
393 border-bottom: 2px solid #ffffff !important;
394 border-right: 2px solid #ffffff !important;
395 box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important;
396 border-radius: 0 !important;
397 color: #000000 !important;
398}
399
400[class*="buttonIcon___XzkyNm"] {
401 color: #000000 !important;
402}
403
404/* Back button */
405[class*="backButton___XzkyNm"] {
406 background: #c0c0c0 !important;
407 border-top: 2px solid #ffffff !important;
408 border-left: 2px solid #ffffff !important;
409 border-bottom: 2px solid #000000 !important;
410 border-right: 2px solid #000000 !important;
411 box-shadow: inset -1px -1px 0 #808080 !important;
412 border-radius: 0 !important;
413 color: #000000 !important;
414}
415
416/* Search bar inside header */
417[class*="inputContainer___XzZhZj"] {
418 background: #ffffff !important;
419 border-top: 2px solid #808080 !important;
420 border-left: 2px solid #808080 !important;
421 border-bottom: 2px solid #dfdfdf !important;
422 border-right: 2px solid #dfdfdf !important;
423 box-shadow: inset 1px 1px 0 #000000 !important;
424 border-radius: 0 !important;
425}
426
427[class*="input___XzZhZj"] {
428 background: transparent !important;
429 color: #000000 !important;
430}
431
432[class*="input___XzZhZj"]::placeholder {
433 color: #808080 !important;
434}
435
436[class*="scopeButton___XzZhZj"] {
437 background: transparent !important;
438 color: #800080 !important;
439}
440
441/* ─────────────────────────────────────────────────
442 * CHANNEL ITEMS — raised buttons
443 * ───────────────────────────────────────────────── */
444[class*="container___Xzk5Zm"] {
445 margin: 2px 4px !important;
446 background: transparent !important;
447}
448
449[class*="channelItemSurface___YTdjZW"] {
450 background: #c0c0c0 !important;
451 border-top: 2px solid #ffffff !important;
452 border-left: 2px solid #ffffff !important;
453 border-bottom: 2px solid #000000 !important;
454 border-right: 2px solid #000000 !important;
455 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
456 border-radius: 0 !important;
457 padding: 3px 8px !important;
458 gap: 6px !important;
459 transition: none !important;
460}
461
462[class*="channelItemSurface___YTdjZW"]:hover {
463 background: #c0c0c0 !important;
464 outline: 1px dotted #800080 !important;
465 outline-offset: -2px !important;
466}
467
468[class*="channelItemSurface___YTdjZW"]:hover [class*="channelName___Xzk5Zm"] {
469 color: #800080 !important;
470}
471
472[class*="channelItemSurfaceSelected___YTdjZW"] {
473 background: #c0c0c0 !important;
474 border-top: 2px solid #000000 !important;
475 border-left: 2px solid #000000 !important;
476 border-bottom: 2px solid #ffffff !important;
477 border-right: 2px solid #ffffff !important;
478 box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important;
479}
480
481[class*="channelItemSurfaceSelected___YTdjZW"] [class*="channelName___Xzk5Zm"] {
482 color: #000000 !important;
483 text-decoration: underline !important;
484}
485
486[class*="channelItemCategory___Xzk5Zm"] {
487 background: #c0c0c0 !important;
488 border-top: 1px solid #808080 !important;
489 border-bottom: 1px solid #ffffff !important;
490 border-left: none !important;
491 border-right: none !important;
492 box-shadow: none !important;
493 padding: 2px 8px !important;
494 margin-top: 4px !important;
495}
496
497[class*="channelItemCategory___Xzk5Zm"]:hover {
498 outline: none !important;
499 background: #c0c0c0 !important;
500}
501
502[class*="categoryName___Xzk5Zm"] {
503 color: #000000 !important;
504 text-transform: uppercase !important;
505 letter-spacing: 0.05em !important;
506}
507
508[class*="channelName___Xzk5Zm"] {
509 color: #000000 !important;
510}
511
512[class*="channelItemIcon___Xzk5Zm"] {
513 color: #800080 !important;
514}
515
516[class*="channelItemIconSelected___Xzk5Zm"] {
517 color: #000000 !important;
518}
519
520[class*="iconButton___XzJiN2"] {
521 background: #c0c0c0 !important;
522 border-top: 2px solid #ffffff !important;
523 border-left: 2px solid #ffffff !important;
524 border-bottom: 2px solid #000000 !important;
525 border-right: 2px solid #000000 !important;
526 box-shadow: inset -1px -1px 0 #808080 !important;
527 border-radius: 0 !important;
528 color: #000000 !important;
529}
530
531[class*="iconButton___XzJiN2"]:hover {
532 border-top: 2px solid #000000 !important;
533 border-left: 2px solid #000000 !important;
534 border-bottom: 2px solid #ffffff !important;
535 border-right: 2px solid #ffffff !important;
536}
537
538/* ─────────────────────────────────────────────────
539 * MEMBER LIST (far right panel)
540 * ───────────────────────────────────────────────── */
541[class*="memberListContainer___XzM3MW"],
542[class*="memberListScroller___XzM3MW"] {
543 background: #c0c0c0 !important;
544}
545
546[class*="frame___ZmU4ZG"],
547[class*="contentWrapper___ZmU4ZG"],
548[class*="body___ZmU4ZG"] {
549 background: #c0c0c0 !important;
550}
551
552[class*="groupHeader___Yjk5ZT"] {
553 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
554 color: #ffffff !important;
555 text-transform: uppercase !important;
556 letter-spacing: 0.05em !important;
557 padding: 2px 8px !important;
558 border-top: 1px solid #a0a0ff !important;
559 border-bottom: 1px solid #000040 !important;
560}
561
562[class*="button___YTg2NG"] {
563 background: #c0c0c0 !important;
564 border-top: 2px solid #ffffff !important;
565 border-left: 2px solid #ffffff !important;
566 border-bottom: 2px solid #000000 !important;
567 border-right: 2px solid #000000 !important;
568 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
569 border-radius: 0 !important;
570 margin: 2px 4px !important;
571 transition: none !important;
572}
573
574[class*="button___YTg2NG"]:hover {
575 background: #800080 !important;
576 border-top: 2px solid #000000 !important;
577 border-left: 2px solid #000000 !important;
578 border-bottom: 2px solid #ffffff !important;
579 border-right: 2px solid #ffffff !important;
580}
581
582[class*="button___YTg2NG"]:hover [class*="name___YTg2NG"],
583[class*="button___YTg2NG"]:hover [class*="truncatedText___XzM5NG"] {
584 color: #ffffff !important;
585 -webkit-text-fill-color: #ffffff !important;
586}
587
588[class*="truncatedText___XzM5NG"] {
589 color: #808080 !important;
590}
591
592[class*="track___YzkyYz"] {
593 background: #c0c0c0 !important;
594 border-left: 1px solid #808080 !important;
595}
596
597[class*="thumb___YzkyYz"] {
598 background: #c0c0c0 !important;
599 border-top: 2px solid #ffffff !important;
600 border-left: 2px solid #ffffff !important;
601 border-bottom: 2px solid #000000 !important;
602 border-right: 2px solid #000000 !important;
603 box-shadow: inset -1px -1px 0 #808080 !important;
604 border-radius: 0 !important;
605}
606
607/* ─────────────────────────────────────────────────
608 * USER AREA
609 * ───────────────────────────────────────────────── */
610[class*="userAreaContainer"] {
611 background: #c0c0c0 !important;
612 border-top: 2px solid #808080 !important;
613 border-radius: 0 !important;
614 margin: 0 !important;
615 max-width: 100% !important;
616}
617
618[class*="userAreaInnerWrapper"],
619[class*="userAreaWrapper"] {
620 background: transparent !important;
621}
622
623[class*="userName"] {
624 color: #000000 !important;
625 text-shadow: none !important;
626}
627
628[class*="userStatus"],
629[class*="userStatusLabel"] {
630 color: #808080 !important;
631}
632
633[class*="userInfo"]:hover {
634 background: #800080 !important;
635 border-radius: 0 !important;
636 animation: none !important;
637}
638
639[class*="userInfo"]:hover * {
640 color: #ffffff !important;
641}
642
643[class*="controlButton"] {
644 background: #c0c0c0 !important;
645 border-top: 2px solid #ffffff !important;
646 border-left: 2px solid #ffffff !important;
647 border-bottom: 2px solid #000000 !important;
648 border-right: 2px solid #000000 !important;
649 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
650 border-radius: 0 !important;
651 color: #000000 !important;
652 width: 24px !important;
653 height: 24px !important;
654 min-width: 24px !important;
655 min-height: 24px !important;
656 animation: none !important;
657}
658
659[class*="controlButton"] svg {
660 color: #000000 !important;
661 width: 13px !important;
662 height: 13px !important;
663 filter: none !important;
664}
665
666[class*="controlButton"]:hover {
667 background: #c0c0c0 !important;
668 border-top: 2px solid #000000 !important;
669 border-left: 2px solid #000000 !important;
670 border-bottom: 2px solid #ffffff !important;
671 border-right: 2px solid #ffffff !important;
672 box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important;
673 animation: none !important;
674}
675
676[class*="controlsContainer"] {
677 gap: 3px !important;
678 padding: 3px 4px !important;
679 background: transparent !important;
680}
681
682/* ─────────────────────────────────────────────────
683 * MESSAGE EDIT TEXTAREA
684 * ───────────────────────────────────────────────── */
685[class*="mainWrapperEditing___XzI3Mz"] {
686 background: #ffffff !important;
687 border-top: 2px solid #808080 !important;
688 border-left: 2px solid #808080 !important;
689 border-bottom: 2px solid #dfdfdf !important;
690 border-right: 2px solid #dfdfdf !important;
691 box-shadow: inset 1px 1px 0 #000000 !important;
692 border-radius: 0 !important;
693 padding: 4px !important;
694}
695
696[class*="contentAreaEditing___XzI3Mz"],
697[class*="scroller___ZTdjNm"],
698[class*="flexColumnContainer___ZTdjNm"] {
699 background: transparent !important;
700}
701
702[class*="textarea___XzI3Mz"] {
703 background: transparent !important;
704 color: #000000 !important;
705 -webkit-text-fill-color: #000000 !important;
706 caret-color: #000000 !important;
707}
708
709[class*="textarea___XzI3Mz"]::placeholder {
710 color: #808080 !important;
711 -webkit-text-fill-color: #808080 !important;
712}
713
714/* Emoji button inside edit box */
715[class*="buttonCompact___XzMzZT"],
716[class*="button___XzMzZT"] {
717 background: #c0c0c0 !important;
718 border-top: 2px solid #ffffff !important;
719 border-left: 2px solid #ffffff !important;
720 border-bottom: 2px solid #000000 !important;
721 border-right: 2px solid #000000 !important;
722 box-shadow: inset -1px -1px 0 #808080 !important;
723 border-radius: 0 !important;
724 color: #000000 !important;
725}
726
727[class*="buttonCompact___XzMzZT"]:hover,
728[class*="button___XzMzZT"]:hover {
729 border-top: 2px solid #000000 !important;
730 border-left: 2px solid #000000 !important;
731 border-bottom: 2px solid #ffffff !important;
732 border-right: 2px solid #ffffff !important;
733}
734
735[class*="buttonContainerEditing___XzI3Mz"] {
736 background: transparent !important;
737}
738
739/* ─────────────────────────────────────────────────
740 * TEXTAREA
741 * ───────────────────────────────────────────────── */
742[class*="textareaOuter"] {
743 background: #ffffff !important;
744 border-top: 2px solid #808080 !important;
745 border-left: 2px solid #808080 !important;
746 border-bottom: 2px solid #dfdfdf !important;
747 border-right: 2px solid #dfdfdf !important;
748 box-shadow: inset 1px 1px 0 #000000 !important;
749 border-radius: 0 !important;
750 margin: 4px !important;
751}
752
753[class*="textareaArea"] {
754 background: #c0c0c0 !important;
755}
756
757textarea[data-channel-textarea="true"] {
758 background: transparent !important;
759 color: #000000 !important;
760 -webkit-text-fill-color: #000000 !important;
761 caret-color: #000000 !important;
762}
763
764textarea[data-channel-textarea="true"]::placeholder {
765 color: #808080 !important;
766 -webkit-text-fill-color: #808080 !important;
767 opacity: 1 !important;
768}
769
770[class*="placeholder"] {
771 color: #808080 !important;
772 -webkit-text-fill-color: #808080 !important;
773 opacity: 1 !important;
774}
775
776/* ────────────────────�────────────────────────────
777 * MESSAGE BUBBLES
778 * ───────────────────────────────────────────────── */
779[class*="messageContent"] {
780 background: rgba(192,192,192,0.92) !important;
781 border-top: 2px solid #ffffff !important;
782 border-left: 2px solid #ffffff !important;
783 border-bottom: 2px solid #000000 !important;
784 border-right: 2px solid #000000 !important;
785 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 2px 2px 0 rgba(0,0,0,0.3) !important;
786 border-radius: 0 !important;
787 padding: 5px 10px !important;
788 backdrop-filter: none !important;
789 color: #000000 !important;
790}
791
792[class*="messageContent"] * {
793 color: #000000 !important;
794 text-shadow: none !important;
795}
796
797/* Code blocks (triple backtick) */
798[class*="messageContent"] pre,
799[class*="messageContent"] code,
800pre[class*="hljs"],
801code[class*="hljs"],
802[class*="codeBlock"],
803[class*="markup___"] pre,
804[class*="markup___"] code {
805 background: #ffffff !important;
806 color: #000000 !important;
807 -webkit-text-fill-color: #000000 !important;
808 border-top: 2px solid #808080 !important;
809 border-left: 2px solid #808080 !important;
810 border-bottom: 2px solid #dfdfdf !important;
811 border-right: 2px solid #dfdfdf !important;
812 box-shadow: inset 1px 1px 0 #000000 !important;
813 border-radius: 0 !important;
814 font-family: monospace !important;
815 padding: 6px 8px !important;
816}
817
818/* Inline backtick code */
819[class*="messageContent"] code:not(pre code),
820[class*="markup___"] code:not(pre code) {
821 background: #dfdfdf !important;
822 color: #000000 !important;
823 -webkit-text-fill-color: #000000 !important;
824 border-top: 1px solid #808080 !important;
825 border-left: 1px solid #808080 !important;
826 border-bottom: 1px solid #ffffff !important;
827 border-right: 1px solid #ffffff !important;
828 box-shadow: none !important;
829 padding: 1px 4px !important;
830 font-family: monospace !important;
831}
832
833/* Syntax highlight token colors — readable on white */
834.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #800080 !important; -webkit-text-fill-color: #800080 !important; }
835.hljs-string, .hljs-attr { color: #800000 !important; -webkit-text-fill-color: #800000 !important; }
836.hljs-number, .hljs-literal { color: #008000 !important; -webkit-text-fill-color: #008000 !important; }
837.hljs-comment { color: #808080 !important; -webkit-text-fill-color: #808080 !important; font-style: italic !important; }
838.hljs-function, .hljs-title { color: #800080 !important; -webkit-text-fill-color: #800080 !important; }
839.hljs-variable, .hljs-name { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
840
841[class*="username___"],
842[class*="usernameBlock"] {
843 color: #800080 !important;
844}
845
846[class*="timestamp"] {
847 color: #808080 !important;
848}
849
850/* ─────────────────────────────────────────────────
851 * PROFILE POPOUT (quick card on member click)
852 * ───────────────────────────────────────────────── */
853[class*="popout___XzkxYm"] {
854 background: #c0c0c0 !important;
855 border-top: 2px solid #ffffff !important;
856 border-left: 2px solid #ffffff !important;
857 border-bottom: 2px solid #000000 !important;
858 border-right: 2px solid #000000 !important;
859 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 4px 4px 0 #000000 !important;
860 border-radius: 0 !important;
861}
862
863/* Profile card inner container */
864[class*="profileCard___XzE1MW"] {
865 background: #c0c0c0 !important;
866 border: none !important;
867 border-radius: 0 !important;
868}
869
870/* Banner area — W98 title bar gradient */
871[class*="headerSection___XzU1Zj"] {
872 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
873 border-bottom: 2px solid #000000 !important;
874}
875
876[class*="bannerWrapper___XzU1Zj"] {
877 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
878}
879
880[class*="banner___XzU1Zj"] {
881 opacity: 0.25 !important;
882}
883
884/* Content area */
885[class*="contentSection___XzRiYj"] {
886 background: #c0c0c0 !important;
887 border-radius: 0 !important;
888 padding: 8px !important;
889}
890
891/* Name button */
892[class*="nameButton___YjA5MD"] {
893 color: #000000 !important;
894}
895
896/* Username tag */
897[class*="usernameRow___YjA5MD"] button,
898[class*="usernameButton___YjA5MD"] {
899 color: #444444 !important;
900}
901
902/* Membership info */
903[class*="membershipContainer___YzQ4NT"],
904[class*="membershipTitle___YzQ4NT"],
905[class*="membershipDateText___YzQ4NT"] {
906 color: #000000 !important;
907}
908
909/* Action buttons (note, copy ID) */
910[class*="noteButton___XzkwMW"],
911[class*="copyIdButton___XzkwMW"] {
912 background: #c0c0c0 !important;
913 border-top: 2px solid #ffffff !important;
914 border-left: 2px solid #ffffff !important;
915 border-bottom: 2px solid #000000 !important;
916 border-right: 2px solid #000000 !important;
917 box-shadow: inset -1px -1px 0 #808080 !important;
918 border-radius: 0 !important;
919 color: #000000 !important;
920}
921
922[class*="noteButton___XzkwMW"]:hover,
923[class*="copyIdButton___XzkwMW"]:hover {
924 border-top: 2px solid #000000 !important;
925 border-left: 2px solid #000000 !important;
926 border-bottom: 2px solid #ffffff !important;
927 border-right: 2px solid #ffffff !important;
928}
929
930/* Footer section */
931[class*="footerSection___ZjVlMW"] {
932 background: #c0c0c0 !important;
933 border-top: 2px solid #808080 !important;
934 border-radius: 0 !important;
935 padding: 8px !important;
936}
937
938/* ─────────────────────────────────────────────────
939 * SHARED BUTTON MODULE (Message, Friend, etc.)
940 * ───────────────────────────────────────────────── */
941[class*="button___Yzg1Yz"] {
942 border-radius: 0 !important;
943 transition: none !important;
944}
945
946[class*="button___Yzg1Yz"][class*="primary___Yzg1Yz"] {
947 background: #c0c0c0 !important;
948 border-top: 2px solid #ffffff !important;
949 border-left: 2px solid #ffffff !important;
950 border-bottom: 2px solid #000000 !important;
951 border-right: 2px solid #000000 !important;
952 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
953 color: #000000 !important;
954}
955
956[class*="button___Yzg1Yz"][class*="primary___Yzg1Yz"]:hover {
957 background: #800080 !important;
958 border-top: 2px solid #000000 !important;
959 border-left: 2px solid #000000 !important;
960 border-bottom: 2px solid #ffffff !important;
961 border-right: 2px solid #ffffff !important;
962 color: #ffffff !important;
963}
964
965[class*="button___Yzg1Yz"][class*="primary___Yzg1Yz"]:hover * {
966 color: #ffffff !important;
967}
968
969[class*="button___Yzg1Yz"][class*="secondary___Yzg1Yz"] {
970 background: #c0c0c0 !important;
971 border-top: 2px solid #ffffff !important;
972 border-left: 2px solid #ffffff !important;
973 border-bottom: 2px solid #000000 !important;
974 border-right: 2px solid #000000 !important;
975 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
976 color: #000000 !important;
977}
978
979[class*="button___Yzg1Yz"][class*="secondary___Yzg1Yz"]:hover {
980 background: #c0c0c0 !important;
981 border-top: 2px solid #000000 !important;
982 border-left: 2px solid #000000 !important;
983 border-bottom: 2px solid #ffffff !important;
984 border-right: 2px solid #ffffff !important;
985 outline: 1px dotted #800080 !important;
986 outline-offset: -3px !important;
987}
988
989/* ─────────────────────────────────────────────────
990 * FULL USER PROFILE MODAL
991 * ─────────────�─────────────────────────────────── */
992
993/* Modal surface/backdrop */
994[class*="surface___XzA4MW"] {
995 border-top: 2px solid #ffffff !important;
996 border-left: 2px solid #ffffff !important;
997 border-bottom: 2px solid #000000 !important;
998 border-right: 2px solid #000000 !important;
999 box-shadow: 4px 4px 0 #000000 !important;
1000 border-radius: 0 !important;
1001 overflow: hidden !important;
1002}
1003
1004/* Modal root and container */
1005[class*="modalRoot___XzU2Zj"],
1006[class*="modalContainer___XzU2Zj"] {
1007 background: #c0c0c0 !important;
1008 border: none !important;
1009 border-radius: 0 !important;
1010}
1011
1012/* Banner */
1013[class*="bannerContainer___XzU2Zj"] {
1014 border-bottom: 2px solid #000000 !important;
1015}
1016
1017[class*="bannerImage___XzU2Zj"] {
1018 opacity: 0.3 !important;
1019}
1020
1021/* Header — W95 title bar */
1022[class*="headerContainer___XzU2Zj"] {
1023 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
1024 border-bottom: 2px solid #000000 !important;
1025 padding: 4px 8px !important;
1026}
1027
1028/* Action buttons row */
1029[class*="actionButtonsContainer___XzU2Zj"],
1030[class*="actionButtons___XzU2Zj"] {
1031 background: transparent !important;
1032}
1033
1034/* Content container */
1035[class*="contentContainer___XzU2Zj"] {
1036 background: #c0c0c0 !important;
1037}
1038
1039/* User name */
1040[class*="userName___XzU2Zj"] {
1041 color: #000000 !important;
1042 text-shadow: none !important;
1043}
1044
1045/* Username tag row */
1046[class*="usernameRow___XzU2Zj"] {
1047 color: #444444 !important;
1048}
1049
1050/* Pronouns */
1051[class*="pronouns___XzU2Zj"] {
1052 color: #444444 !important;
1053}
1054
1055/* Tabs — Overview / Mutual Friends */
1056[class*="tabsWrapper___XzU2Zj"] {
1057 background: #c0c0c0 !important;
1058 border-bottom: 2px solid #808080 !important;
1059}
1060
1061[class*="tab___XzIxNj"] {
1062 background: #c0c0c0 !important;
1063 border-top: 2px solid #ffffff !important;
1064 border-left: 2px solid #ffffff !important;
1065 border-bottom: 2px solid #000000 !important;
1066 border-right: 2px solid #000000 !important;
1067 box-shadow: inset -1px -1px 0 #808080 !important;
1068 border-radius: 0 !important;
1069 color: #000000 !important;
1070 margin-right: 2px !important;
1071 transition: none !important;
1072}
1073
1074[class*="tab___XzIxNj"]:hover {
1075 background: #c0c0c0 !important;
1076 outline: 1px dotted #800080 !important;
1077 outline-offset: -2px !important;
1078}
1079
1080[class*="selected___XzIxNj"] {
1081 background: #c0c0c0 !important;
1082 border-top: 2px solid #000000 !important;
1083 border-left: 2px solid #000000 !important;
1084 border-bottom: 2px solid #ffffff !important;
1085 border-right: 2px solid #ffffff !important;
1086 box-shadow: inset 1px 1px 0 #808080 !important;
1087 color: #000000 !important;
1088}
1089
1090/* Profile content area */
1091[class*="profileContentWrapper___XzU2Zj"],
1092[class*="profileContent___XzU2Zj"],
1093[class*="profileContentHeader___XzU2Zj"] {
1094 background: #c0c0c0 !important;
1095}
1096
1097/* Bio */
1098[class*="bioContainer___YzQ4NT"] {
1099 background: #ffffff !important;
1100 border-top: 2px solid #808080 !important;
1101 border-left: 2px solid #808080 !important;
1102 border-bottom: 2px solid #dfdfdf !important;
1103 border-right: 2px solid #dfdfdf !important;
1104 box-shadow: inset 1px 1px 0 #000000 !important;
1105 padding: 6px 8px !important;
1106 border-radius: 0 !important;
1107 color: #000000 !important;
1108}
1109
1110[class*="bio___XzBhZT"],
1111[class*="bio___XzBhZT"] * {
1112 color: #000000 !important;
1113}
1114
1115[class*="link___XzBhZT"] {
1116 color: #800080 !important;
1117 text-decoration: underline !important;
1118}
1119
1120/* Roles */
1121[class*="rolesContainer___YzQ4NT"] {
1122 background: transparent !important;
1123}
1124
1125[class*="rolesHeader___YzQ4NT"],
1126[class*="rolesTitle___YzQ4NT"] {
1127 color: #000000 !important;
1128 text-transform: uppercase !important;
1129 letter-spacing: 0.05em !important;
1130 border-bottom: 1px solid #808080 !important;
1131}
1132
1133[class*="roleBadge___YWExM2"] {
1134 background: #c0c0c0 !important;
1135 border-top: 2px solid #ffffff !important;
1136 border-left: 2px solid #ffffff !important;
1137 border-bottom: 2px solid #000000 !important;
1138 border-right: 2px solid #000000 !important;
1139 box-shadow: inset -1px -1px 0 #808080 !important;
1140 border-radius: 0 !important;
1141 color: #000000 !important;
1142}
1143
1144[class*="roleName___YWExM2"] {
1145 color: #000000 !important;
1146}
1147
1148/* Connections */
1149[class*="connectionsContainer___YzQ4NT"] {
1150 background: transparent !important;
1151}
1152
1153[class*="connectionsTitle___YzQ4NT"] {
1154 color: #000000 !important;
1155 text-transform: uppercase !important;
1156 letter-spacing: 0.05em !important;
1157 border-bottom: 1px solid #808080 !important;
1158}
1159
1160[class*="connectionCard___YzQ4NT"] {
1161 background: #c0c0c0 !important;
1162 border-top: 2px solid #ffffff !important;
1163 border-left: 2px solid #ffffff !important;
1164 border-bottom: 2px solid #000000 !important;
1165 border-right: 2px solid #000000 !important;
1166 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1167 border-radius: 0 !important;
1168}
1169
1170[class*="connectionCardName___YzQ4NT"],
1171[class*="connectionCardNameRow___YzQ4NT"] {
1172 color: #000000 !important;
1173}
1174
1175[class*="connectionIcon___YzQ4NT"] {
1176 color: #800080 !important;
1177}
1178
1179/* Note textarea */
1180[class*="noteLabel___XzU2Zj"] {
1181 color: #000000 !important;
1182 text-transform: uppercase !important;
1183}
1184
1185[class*="noteTextarea___XzU2Zj"] {
1186 background: #ffffff !important;
1187 color: #000000 !important;
1188 border-top: 2px solid #808080 !important;
1189 border-left: 2px solid #808080 !important;
1190 border-bottom: 2px solid #dfdfdf !important;
1191 border-right: 2px solid #dfdfdf !important;
1192 box-shadow: inset 1px 1px 0 #000000 !important;
1193 border-radius: 0 !important;
1194}
1195
1196[class*="noteTextarea___XzU2Zj"]::placeholder {
1197 color: #808080 !important;
1198}
1199
1200/* ─────────────────────────────────────────────────
1201 * CONTEXT MENU
1202 * ───────────────────────────────────────────────── */
1203[class*="contextMenu___Yzg0NW"] {
1204 background: #c0c0c0 !important;
1205 border-top: 2px solid #ffffff !important;
1206 border-left: 2px solid #ffffff !important;
1207 border-bottom: 2px solid #000000 !important;
1208 border-right: 2px solid #000000 !important;
1209 box-shadow: 2px 2px 0 #000000 !important;
1210 border-radius: 0 !important;
1211 padding: 2px !important;
1212}
1213
1214[class*="item___Yzg0NW"] {
1215 background: transparent !important;
1216 color: #000000 !important;
1217 border-radius: 0 !important;
1218 padding: 3px 20px !important;
1219}
1220
1221[class*="item___Yzg0NW"]:hover,
1222[class*="item___Yzg0NW"]:focus {
1223 background: #800080 !important;
1224 color: #ffffff !important;
1225 outline: none !important;
1226}
1227
1228[class*="item___Yzg0NW"]:hover *,
1229[class*="item___Yzg0NW"]:focus * { color: #ffffff !important; }
1230
1231[class*="label___YjQzN2"] {
1232 color: inherit !important;
1233}
1234
1235[class*="itemIcon___Yzg0NW"] svg { color: #000000 !important; width: 14px !important; height: 14px !important; }
1236[class*="item___Yzg0NW"]:hover [class*="itemIcon___Yzg0NW"] svg { color: #ffffff !important; }
1237[class*="danger___Yzg0NW"] { color: #800000 !important; }
1238[class*="danger___Yzg0NW"]:hover { background: #800000 !important; }
1239[class*="danger___Yzg0NW"]:hover * { color: #ffffff !important; }
1240[class*="submenuCaret___Yzg0NW"] { color: #000000 !important; }
1241[class*="item___Yzg0NW"]:hover [class*="submenuCaret___Yzg0NW"] { color: #ffffff !important; }
1242[class*="separator___Yzg0NW"] {
1243 height: 5px !important;
1244 background: transparent !important;
1245 border: none !important;
1246 border-top: 1px solid #808080 !important;
1247 border-bottom: 1px solid #ffffff !important;
1248 margin: 0 4px !important;
1249}
1250
1251/* ─────────────────────────────────────────────────
1252 * FAVORITES & DISCOVERY — main content area
1253 * ───────────────────────────────────────────────── */
1254
1255/* Main content area background */
1256[class*="guildMainContent___Xzk4ZG"] {
1257 background: #c0c0c0 !important;
1258}
1259
1260/* Favorites welcome section */
1261[class*="welcomeSection___XzMxOT"] {
1262 background: #c0c0c0 !important;
1263}
1264
1265[class*="iconWrapper___XzMxOT"] {
1266 background: #c0c0c0 !important;
1267 border-top: 2px solid #ffffff !important;
1268 border-left: 2px solid #ffffff !important;
1269 border-bottom: 2px solid #000000 !important;
1270 border-right: 2px solid #000000 !important;
1271 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1272 border-radius: 0 !important;
1273 padding: 12px !important;
1274 color: #800080 !important;
1275}
1276
1277[class*="icon___XzMxOT"] {
1278 color: #800080 !important;
1279}
1280
1281[class*="heading___XzMxOT"] {
1282 color: #000000 !important;
1283 text-shadow: none !important;
1284}
1285
1286[class*="description___XzMxOT"],
1287[class*="tip___XzMxOT"] {
1288 color: #000000 !important;
1289}
1290
1291[class*="tip___XzMxOT"] {
1292 color: #444444 !important;
1293 font-style: italic !important;
1294}
1295
1296/* Favorites guild header (top-left "Favorites" title bar) */
1297[class*="headerIconContainer___Xzk2MT"] {
1298 background: transparent !important;
1299}
1300
1301[class*="headerIcon___Xzk2MT"] {
1302 color: #ffffff !important;
1303}
1304
1305/* Channel list skeleton (gray placeholder bars) */
1306[class*="skeletonContent___XzRhYT"],
1307[class*="skeletonCategory___XzRhYT"],
1308[class*="skeletonChannel___XzRhYT"] {
1309 background: transparent !important;
1310}
1311
1312[class*="skeletonCategoryPill___XzRhYT"],
1313[class*="skeletonChannelPill___XzRhYT"] {
1314 background: #a0a0a0 !important;
1315 border-radius: 0 !important;
1316}
1317
1318/* ─────────────────────────────────────────────────
1319 * DISCOVERY (Explore Communities) — left sidebar
1320 * ───────────────────────────────────────────────── */
1321
1322[class*="guildNavbarContainer___Xzc4Nm"] {
1323 background: #c0c0c0 !important;
1324 border-right: 2px solid #808080 !important;
1325}
1326
1327/* "Explore" header — reuses ZGNlOD which is already navy, good */
1328[class*="headerIconContainer___XzBlOG"] {
1329 background: transparent !important;
1330}
1331
1332[class*="headerIcon___XzBlOG"] {
1333 color: #ffffff !important;
1334}
1335
1336/* Discovery sidebar container */
1337[class*="container___XzU1Nj"] {
1338 background: #c0c0c0 !important;
1339}
1340
1341[class*="categoryList___XzU1Nj"] {
1342 background: #c0c0c0 !important;
1343 padding: 4px !important;
1344}
1345
1346/* Category filter buttons */
1347button[class*="categoryItem___XzU1Nj"] {
1348 background: #c0c0c0 !important;
1349 border-top: 2px solid #ffffff !important;
1350 border-left: 2px solid #ffffff !important;
1351 border-bottom: 2px solid #000000 !important;
1352 border-right: 2px solid #000000 !important;
1353 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1354 border-radius: 0 !important;
1355 color: #000000 !important;
1356 margin: 2px 0 !important;
1357 width: calc(100% - 4px) !important;
1358 text-align: left !important;
1359 padding: 4px 8px !important;
1360 transition: none !important;
1361}
1362
1363button[class*="categoryItem___XzU1Nj"]:hover {
1364 background: #c0c0c0 !important;
1365 outline: 1px dotted #800080 !important;
1366 outline-offset: -2px !important;
1367}
1368
1369/* Active/selected category — sunken */
1370button[class*="categoryItemActive___XzU1Nj"] {
1371 background: #c0c0c0 !important;
1372 border-top: 2px solid #000000 !important;
1373 border-left: 2px solid #000000 !important;
1374 border-bottom: 2px solid #ffffff !important;
1375 border-right: 2px solid #ffffff !important;
1376 box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important;
1377 color: #000000 !important;
1378 text-decoration: underline !important;
1379}
1380
1381/* ─────────────────────────────────────────────────
1382 * DISCOVERY — main content grid + cards
1383 * ───────────────────────────────────────────────── */
1384
1385[class*="container___ZTBkMm"] {
1386 background: #c0c0c0 !important;
1387}
1388
1389/* Hero search area */
1390[class*="hero___ZTBkMm"] {
1391 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
1392 border-bottom: 2px solid #000000 !important;
1393}
1394
1395[class*="heroPattern___ZTBkMm"] {
1396 opacity: 0.1 !important;
1397}
1398
1399[class*="heroContent___ZTBkMm"],
1400[class*="heroControls___ZTBkMm"] {
1401 background: transparent !important;
1402}
1403
1404/* Search input in hero */
1405[class*="inputContainer___ZGQ3MT"],
1406[class*="inputWrapper___ZGQ3MT"] {
1407 background: #ffffff !important;
1408 border-top: 2px solid #808080 !important;
1409 border-left: 2px solid #808080 !important;
1410 border-bottom: 2px solid #dfdfdf !important;
1411 border-right: 2px solid #dfdfdf !important;
1412 box-shadow: inset 1px 1px 0 #000000 !important;
1413 border-radius: 0 !important;
1414}
1415
1416[class*="input___ZGQ3MT"],
1417[class*="searchInput___ZTBkMm"] {
1418 background: transparent !important;
1419 color: #000000 !important;
1420 -webkit-text-fill-color: #000000 !important;
1421}
1422
1423[class*="input___ZGQ3MT"]::placeholder {
1424 color: #808080 !important;
1425 -webkit-text-fill-color: #808080 !important;
1426}
1427
1428[class*="leftIcon___ZGQ3MT"] {
1429 color: #800080 !important;
1430}
1431
1432/* Content grid */
1433[class*="content___ZTBkMm"],
1434[class*="grid___ZTBkMm"] {
1435 background: #c0c0c0 !important;
1436}
1437
1438/* Guild cards */
1439[class*="card___YzBjMm"] {
1440 background: #c0c0c0 !important;
1441 border-top: 2px solid #ffffff !important;
1442 border-left: 2px solid #ffffff !important;
1443 border-bottom: 2px solid #000000 !important;
1444 border-right: 2px solid #000000 !important;
1445 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1446 border-radius: 0 !important;
1447 transition: none !important;
1448}
1449
1450[class*="card___YzBjMm"]:hover {
1451 outline: 1px dotted #800080 !important;
1452 outline-offset: -2px !important;
1453 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1454}
1455
1456[class*="cardBody___YzBjMm"],
1457[class*="footer___YzBjMm"] {
1458 background: transparent !important;
1459}
1460
1461[class*="footer___YzBjMm"] {
1462 border-top: 1px solid #808080 !important;
1463 padding-top: 6px !important;
1464}
1465
1466[class*="name___YzBjMm"] {
1467 color: #000000 !important;
1468 text-shadow: none !important;
1469}
1470
1471[class*="category___YzBjMm"] {
1472 color: #800080 !important;
1473 text-transform: uppercase !important;
1474 letter-spacing: 0.05em !important;
1475}
1476
1477[class*="description___YzBjMm"] {
1478 color: #000000 !important;
1479}
1480
1481[class*="statText___YzBjMm"] {
1482 color: #444444 !important;
1483}
1484
1485/* ─────────────────────────────────────────────────
1486 * ADD COMMUNITY MODAL (XzNjNz)
1487 * ───────────────────────────────────────────────── */
1488
1489/* Modal surface already styled via XzA4MW, content area: */
1490[class*="content___XzNjNz"],
1491[class*="landingContainer___XzNjNz"] {
1492 background: #c0c0c0 !important;
1493}
1494
1495[class*="landingContainer___XzNjNz"] p {
1496 color: #000000 !important;
1497}
1498
1499/* Modal header */
1500[class*="layout___XzA4MW"][class*="header___XzA4MW"] {
1501 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
1502 border-bottom: 2px solid #000000 !important;
1503 border-radius: 0 !important;
1504}
1505
1506[class*="headerText___XzA4MW"] h3 {
1507 color: #ffffff !important;
1508 text-shadow: 1px 1px 0 #000040 !important;
1509}
1510
1511/* Close button in modal header */
1512[class*="layout___XzA4MW"][class*="header___XzA4MW"] button {
1513 background: #c0c0c0 !important;
1514 border-top: 2px solid #ffffff !important;
1515 border-left: 2px solid #ffffff !important;
1516 border-bottom: 2px solid #000000 !important;
1517 border-right: 2px solid #000000 !important;
1518 box-shadow: inset -1px -1px 0 #808080 !important;
1519 border-radius: 0 !important;
1520 color: #000000 !important;
1521 width: 16px !important;
1522 height: 14px !important;
1523 min-width: 16px !important;
1524 padding: 0 !important;
1525}
1526
1527[class*="layout___XzA4MW"][class*="header___XzA4MW"] button:hover {
1528 border-top: 2px solid #000000 !important;
1529 border-left: 2px solid #000000 !important;
1530 border-bottom: 2px solid #ffffff !important;
1531 border-right: 2px solid #ffffff !important;
1532}
1533
1534/* Action buttons: Create Community / Join Community / Import Template */
1535button[class*="actionButton___XzNjNz"] {
1536 background: #c0c0c0 !important;
1537 border-top: 2px solid #ffffff !important;
1538 border-left: 2px solid #ffffff !important;
1539 border-bottom: 2px solid #000000 !important;
1540 border-right: 2px solid #000000 !important;
1541 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1542 border-radius: 0 !important;
1543 transition: none !important;
1544}
1545
1546button[class*="actionButton___XzNjNz"]:hover {
1547 background: #c0c0c0 !important;
1548 border-top: 2px solid #000000 !important;
1549 border-left: 2px solid #000000 !important;
1550 border-bottom: 2px solid #ffffff !important;
1551 border-right: 2px solid #ffffff !important;
1552 outline: 1px dotted #800080 !important;
1553 outline-offset: -3px !important;
1554}
1555
1556[class*="actionIcon___XzNjNz"] {
1557 background: #800080 !important;
1558 color: #ffffff !important;
1559 border-radius: 0 !important;
1560 padding: 8px !important;
1561}
1562
1563[class*="actionLabel___XzNjNz"] {
1564 color: #000000 !important;
1565}
1566
1567[class*="actionButtonsGroup___XzNjNz"],
1568[class*="actionButtons___XzNjNz"] {
1569 background: transparent !important;
1570}
1571
1572/* ─────────────────────────────────────────────────
1573 * SETTINGS MODAL
1574 * ───────────────────────────────────────────────── */
1575[class*="container___XzU3Zj"] { background: #c0c0c0 !important; }
1576
1577[class*="desktopSidebar___XzU3Zj"],
1578[class*="desktopSidebarInner___XzU3Zj"] {
1579 background: #c0c0c0 !important;
1580 border-right: 2px solid #808080 !important;
1581}
1582
1583[class*="sidebarCategoryTitle___XzU3Zj"] {
1584 color: #000000 !important;
1585 text-transform: uppercase !important;
1586 border-bottom: 1px solid #808080 !important;
1587}
1588
1589[class*="sidebarItem___XzU3Zj"] {
1590 color: #000000 !important;
1591 border-radius: 0 !important;
1592 background: transparent !important;
1593}
1594
1595[class*="sidebarItem___XzU3Zj"]:hover {
1596 background: #800080 !important;
1597 color: #ffffff !important;
1598}
1599
1600[class*="sidebarItem___XzU3Zj"]:hover * { color: #ffffff !important; }
1601
1602[class*="sidebarItemSelected___XzU3Zj"],
1603[class*="sidebarItemSelected___XzU3Zj"] * {
1604 background: #800080 !important;
1605 color: #ffffff !important;
1606}
1607
1608[class*="sidebarItemDanger___XzU3Zj"] { color: #800000 !important; }
1609
1610[class*="desktopContent___XzU3Zj"],
1611[class*="desktopContentCard___XzU3Zj"],
1612[class*="desktopContentPad___XzU3Zj"] { background: #c0c0c0 !important; }
1613
1614[class*="desktopHeader___XzU3Zj"] {
1615 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
1616 border-bottom: 2px solid #000000 !important;
1617}
1618
1619[class*="title___XzhlMD"],
1620[class*="title___XzhkYm"] {
1621 color: #ffffff !important;
1622}
1623
1624[class*="desktopContent___XzU3Zj"] label,
1625[class*="desktopContent___XzU3Zj"] p,
1626[class*="desktopContent___XzU3Zj"] span,
1627[class*="desktopContent___XzU3Zj"] div {
1628 color: #000000 !important;
1629}
1630
1631[class*="desktopContent___XzU3Zj"] input,
1632[class*="desktopContent___XzU3Zj"] textarea {
1633 background: #ffffff !important;
1634 color: #000000 !important;
1635 -webkit-text-fill-color: #000000 !important;
1636 border-top: 2px solid #808080 !important;
1637 border-left: 2px solid #808080 !important;
1638 border-bottom: 2px solid #dfdfdf !important;
1639 border-right: 2px solid #dfdfdf !important;
1640 border-radius: 0 !important;
1641}
1642
1643[class*="legalLink___ZWQxYT"] { color: #800080 !important; }
1644[class*="sidebarFooter___XzU3Zj"] * { color: #808080 !important; }
1645
1646/* ═══════════════════════════════════════════════════════
1647 * VOICE CONNECTION STATUS AREA (user area / bottom panel)
1648 * ═══════════════════════════════════════════════════════ */
1649
1650[class*="voiceConnectionWrapper___XzEyMT"],
1651[class*="voiceConnectionContainer___XzRiYz"] {
1652 background: #c0c0c0 !important;
1653 border-top: 2px solid #808080 !important;
1654}
1655
1656/* "Voice Connected" status button */
1657[class*="statusRow___XzRiYz"] {
1658 background: transparent !important;
1659}
1660
1661[class*="statusButton___XzRiYz"] {
1662 background: #c0c0c0 !important;
1663 border-top: 2px solid #ffffff !important;
1664 border-left: 2px solid #ffffff !important;
1665 border-bottom: 2px solid #000000 !important;
1666 border-right: 2px solid #000000 !important;
1667 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1668 border-radius: 0 !important;
1669 color: #000000 !important;
1670 transition: none !important;
1671}
1672
1673[class*="statusButton___XzRiYz"]:hover {
1674 border-top: 2px solid #000000 !important;
1675 border-left: 2px solid #000000 !important;
1676 border-bottom: 2px solid #ffffff !important;
1677 border-right: 2px solid #ffffff !important;
1678 outline: 1px dotted #800080 !important;
1679 outline-offset: -3px !important;
1680}
1681
1682/* Signal / ping icon — keep green */
1683[class*="signalIcon___XzRiYz"] {
1684 color: #00aa00 !important;
1685}
1686
1687/* Noise suppression, disconnect, and other control buttons */
1688[class*="controlButton___XzRiYz"],
1689[class*="mediaButton___XzRiYz"] {
1690 background: #c0c0c0 !important;
1691 border-top: 2px solid #ffffff !important;
1692 border-left: 2px solid #ffffff !important;
1693 border-bottom: 2px solid #000000 !important;
1694 border-right: 2px solid #000000 !important;
1695 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1696 border-radius: 0 !important;
1697 color: #000000 !important;
1698 transition: none !important;
1699}
1700
1701[class*="controlButton___XzRiYz"]:hover,
1702[class*="mediaButton___XzRiYz"]:hover {
1703 background: #c0c0c0 !important;
1704 border-top: 2px solid #000000 !important;
1705 border-left: 2px solid #000000 !important;
1706 border-bottom: 2px solid #ffffff !important;
1707 border-right: 2px solid #ffffff !important;
1708}
1709
1710/* Connection info text: channel name, connection ID */
1711[class*="connectionInfo___XzRiYz"],
1712[class*="channelSourceLink___XzRiYz"],
1713[class*="connectionIdValue___XzRiYz"] {
1714 color: #000000 !important;
1715 text-shadow: none !important;
1716}
1717
1718[class*="channelSourceLink___XzRiYz"] {
1719 color: #800080 !important;
1720 text-decoration: underline !important;
1721}
1722
1723/* Avatar stack (participant mini-avatars) */
1724[class*="channelAvatarStack___XzRiYz"] {
1725 background: transparent !important;
1726}
1727
1728/* ═══════════════════════════════════════════════════════
1729 * VOICE CALL PARTICIPANT GRID
1730 * ═══════════════════════════════════════════════════════ */
1731
1732/* Root view — match chat wallpaper */
1733[class*="root___XzdmOG"] {
1734 background: black !important;
1735}
1736
1737[class*="mainContent___XzdmOG"] {
1738 background: transparent !important;
1739}
1740
1741/* Grid viewport */
1742[class*="gridViewport___XzYwZT"],
1743[class*="grid___XzYwZT"] {
1744 background: transparent !important;
1745}
1746
1747/* Individual participant tiles */
1748[class*="gridItem___XzYwZT"] {
1749 background: transparent !important;
1750}
1751
1752[class*="lkParticipantTile___XzdmOG"] {
1753 background: #c0c0c0 !important;
1754 border-top: 2px solid #ffffff !important;
1755 border-left: 2px solid #ffffff !important;
1756 border-bottom: 2px solid #000000 !important;
1757 border-right: 2px solid #000000 !important;
1758 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1759 border-radius: 0 !important;
1760}
1761
1762/* Avatar placeholder background inside tile */
1763[class*="lkParticipantPlaceholder___XzdmOG"] {
1764 background: #a0a0a0 !important;
1765 border-radius: 0 !important;
1766}
1767
1768/* Avatar ring */
1769[class*="avatarRing___XzdmMT"] {
1770 border-color: #800080 !important;
1771 border-radius: 50% !important;
1772}
1773
1774/* Name / metadata overlay at bottom of tile */
1775[class*="lkParticipantMetadata___XzdmOG"] {
1776 background: linear-gradient(transparent, rgba(0,0,0,0.6)) !important;
1777}
1778
1779[class*="participantNameText___XzdmMT"] {
1780 color: #ffffff !important;
1781 text-shadow: 1px 1px 0 #000000 !important;
1782}
1783
1784[class*="participantConnectionText___XzdmMT"] {
1785 color: #c0c0c0 !important;
1786 text-shadow: 1px 1px 0 #000000 !important;
1787}
1788
1789/* Per-tile context menu button */
1790[class*="menuButton___XzdmMT"] {
1791 background: #c0c0c0 !important;
1792 border-top: 2px solid #ffffff !important;
1793 border-left: 2px solid #ffffff !important;
1794 border-bottom: 2px solid #000000 !important;
1795 border-right: 2px solid #000000 !important;
1796 border-radius: 0 !important;
1797 color: #000000 !important;
1798 transition: none !important;
1799}
1800
1801/* Bottom control bar */
1802[class*="container___XzgyOT"] {
1803 background: #c0c0c0 !important;
1804 border-top: 2px solid #808080 !important;
1805 box-shadow: none !important;
1806}
1807
1808[class*="button___XzgyOT"] {
1809 background: #c0c0c0 !important;
1810 border-top: 2px solid #ffffff !important;
1811 border-left: 2px solid #ffffff !important;
1812 border-bottom: 2px solid #000000 !important;
1813 border-right: 2px solid #000000 !important;
1814 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1815 border-radius: 0 !important;
1816 color: #000000 !important;
1817 transition: none !important;
1818}
1819
1820[class*="button___XzgyOT"]:hover {
1821 background: #c0c0c0 !important;
1822 border-top: 2px solid #000000 !important;
1823 border-left: 2px solid #000000 !important;
1824 border-bottom: 2px solid #ffffff !important;
1825 border-right: 2px solid #ffffff !important;
1826 outline: 1px dotted #800080 !important;
1827 outline-offset: -3px !important;
1828}
1829
1830/* Muted state — sunken/pressed button */
1831[class*="buttonMuted___XzgyOT"] {
1832 background: #c0c0c0 !important;
1833 border-top: 2px solid #000000 !important;
1834 border-left: 2px solid #000000 !important;
1835 border-bottom: 2px solid #ffffff !important;
1836 border-right: 2px solid #ffffff !important;
1837 box-shadow: inset 1px 1px 0 #808080 !important;
1838 color: #800000 !important;
1839}
1840
1841/* Settings caret buttons */
1842[class*="settingsButton___XzgyOT"] {
1843 background: #c0c0c0 !important;
1844 border-top: 2px solid #ffffff !important;
1845 border-left: 2px solid #ffffff !important;
1846 border-bottom: 2px solid #000000 !important;
1847 border-right: 2px solid #000000 !important;
1848 border-radius: 0 !important;
1849 color: #000000 !important;
1850 transition: none !important;
1851}
1852
1853/* Disconnect button — red W95 style */
1854[class*="button___XzgyOT"][class*="disconnect"],
1855[class*="button___XzgyOT"][aria-label*="Disconnect"],
1856[class*="button___XzgyOT"][aria-label*="disconnect"] {
1857 background: #c0c0c0 !important;
1858 color: #800000 !important;
1859 border-top: 2px solid #ffffff !important;
1860 border-left: 2px solid #ffffff !important;
1861 border-bottom: 2px solid #000000 !important;
1862 border-right: 2px solid #000000 !important;
1863}
1864
1865/* Fullscreen button */
1866[class*="fullscreenButtonWrap___XzdmOG"] button {
1867 background: #c0c0c0 !important;
1868 border-top: 2px solid #ffffff !important;
1869 border-left: 2px solid #ffffff !important;
1870 border-bottom: 2px solid #000000 !important;
1871 border-right: 2px solid #000000 !important;
1872 border-radius: 0 !important;
1873 color: #000000 !important;
1874 transition: none !important;
1875}
1876
1877/* Grey divider bar fix — any horizontal rule or separator in the voice view */
1878[class*="root___XzdmOG"] hr,
1879[class*="root___XzdmOG"] [class*="separator"],
1880[class*="root___XzdmOG"] [class*="divider"] {
1881 background: #808080 !important;
1882 border: none !important;
1883 height: 2px !important;
1884}
1885
1886/* ══════════════════════════����═══════════════════════════
1887 * PICTURE-IN-PICTURE STREAMING OVERLAY
1888 * ═══════════════════════════════════════════════════════ */
1889
1890[class*="container___ZjM0OD"] {
1891 background: #c0c0c0 !important;
1892 border-top: 2px solid #ffffff !important;
1893 border-left: 2px solid #ffffff !important;
1894 border-bottom: 2px solid #000000 !important;
1895 border-right: 2px solid #000000 !important;
1896 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1897 border-radius: 0 !important;
1898}
1899
1900/* Frozen/paused frame */
1901[class*="frozenFrame___ZjM0OD"] {
1902 border-radius: 0 !important;
1903 opacity: 0.7 !important;
1904}
1905
1906/* Paused overlay */
1907[class*="previewPausedOverlay___ZjM0OD"] {
1908 background: rgba(192, 192, 192, 0.92) !important;
1909 border-radius: 0 !important;
1910}
1911
1912[class*="previewPausedIcon___ZjM0OD"] {
1913 color: #800080 !important;
1914}
1915
1916[class*="previewPausedTextWrap___ZjM0OD"],
1917[class*="previewPausedTextWrap___ZjM0OD"] * {
1918 color: #000000 !important;
1919 text-shadow: none !important;
1920}
1921
1922/* Hover overlay — header gradient */
1923[class*="hoverOverlay___ZjM0OD"] {
1924 background: transparent !important;
1925}
1926
1927[class*="headerGradient___ZjM0OD"] {
1928 background: linear-gradient(180deg, rgba(0,0,128,0.9) 0%, transparent 100%) !important;
1929}
1930
1931[class*="headerContent___ZjM0OD"] {
1932 background: transparent !important;
1933}
1934
1935/* "Return to call" button */
1936[class*="returnToCallButton___ZjM0OD"] {
1937 background: #c0c0c0 !important;
1938 border-top: 2px solid #ffffff !important;
1939 border-left: 2px solid #ffffff !important;
1940 border-bottom: 2px solid #000000 !important;
1941 border-right: 2px solid #000000 !important;
1942 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
1943 border-radius: 0 !important;
1944 transition: none !important;
1945}
1946
1947[class*="returnToCallButton___ZjM0OD"]:hover {
1948 border-top: 2px solid #000000 !important;
1949 border-left: 2px solid #000000 !important;
1950 border-bottom: 2px solid #ffffff !important;
1951 border-right: 2px solid #ffffff !important;
1952}
1953
1954[class*="returnToCallLabel___ZjM0OD"] {
1955 color: #000000 !important;
1956}
1957
1958[class*="returnToCallIcon___ZjM0OD"] {
1959 color: #800080 !important;
1960}
1961
1962/* Close button (X) */
1963[class*="closeButton___ZjM0OD"] {
1964 background: #c0c0c0 !important;
1965 border-top: 2px solid #ffffff !important;
1966 border-left: 2px solid #ffffff !important;
1967 border-bottom: 2px solid #000000 !important;
1968 border-right: 2px solid #000000 !important;
1969 border-radius: 0 !important;
1970 color: #000000 !important;
1971 width: 16px !important;
1972 height: 14px !important;
1973 min-width: 16px !important;
1974 padding: 0 !important;
1975 transition: none !important;
1976}
1977
1978[class*="closeButton___ZjM0OD"]:hover {
1979 border-top: 2px solid #000000 !important;
1980 border-left: 2px solid #000000 !important;
1981 border-bottom: 2px solid #ffffff !important;
1982 border-right: 2px solid #ffffff !important;
1983}
1984
1985/* Footer gradient + streamer name */
1986[class*="footerGradient___ZjM0OD"] {
1987 background: linear-gradient(0deg, rgba(0,0,128,0.9) 0%, transparent 100%) !important;
1988}
1989
1990[class*="footerContent___ZjM0OD"] {
1991 background: transparent !important;
1992}
1993
1994[class*="streamerName___ZjM0OD"] {
1995 color: #ffffff !important;
1996 text-shadow: 1px 1px 0 #000000 !important;
1997}
1998
1999/* Resize handles — W95 style gripper dots */
2000[class*="resizeHandleTop___ZjM0OD"],
2001[class*="resizeHandleBottom___ZjM0OD"],
2002[class*="resizeHandleLeft___ZjM0OD"],
2003[class*="resizeHandleRight___ZjM0OD"],
2004[class*="resizeHandleTopLeft___ZjM0OD"],
2005[class*="resizeHandleTopRight___ZjM0OD"],
2006[class*="resizeHandleBottomLeft___ZjM0OD"],
2007[class*="resizeHandleBottomRight___ZjM0OD"] {
2008 background: transparent !important;
2009 border: none !important;
2010}
2011
2012[class*="resizeHandleBottomRight___ZjM0OD"] {
2013 background-image: radial-gradient(circle, #808080 1px, transparent 1px) !important;
2014 background-size: 3px 3px !important;
2015 background-position: bottom right !important;
2016 background-repeat: repeat !important;
2017 width: 12px !important;
2018 height: 12px !important;
2019}
2020
2021
2022/* ═══════════════════════════════════════════════════════
2023 * WINDOWS SPLASH / LOADING SCREEN
2024 * ═══════════════════════════════════════════════════════ */
2025
2026[class*="splashOverlay___ZTBkMm"] {
2027 background: black !important; /* Storm (VGA) only had a black desktop */
2028 display: flex !important;
2029 align-items: center !important;
2030 justify-content: center !important;
2031}
2032
2033[class*="topDragRegion___ZTBkMm"] {
2034 background: transparent !important;
2035}
2036
2037/* The window itself */
2038[class*="splashContent___ZTBkMm"] {
2039 background: #c0c0c0 !important;
2040 border-top: 2px solid #ffffff !important;
2041 border-left: 2px solid #ffffff !important;
2042 border-bottom: 2px solid #000000 !important;
2043 border-right: 2px solid #000000 !important;
2044 box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important;
2045 border-radius: 0 !important;
2046 padding: 0 !important;
2047 width: 420px !important;
2048 display: flex !important;
2049 flex-direction: column !important;
2050 overflow: visible !important;
2051}
2052
2053/* Title bar via ::before */
2054[class*="splashContent___ZTBkMm"]::before {
2055 content: "Fluxer" !important;
2056 display: flex !important;
2057 width: 99%;
2058 align: left !important;
2059 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
2060 color: #ffffff !important;
2061 padding: 3px 4px 3px 6px !important;
2062 text-shadow: 1px 1px 0 #000040 !important;
2063 flex-shrink: 0 !important;
2064 letter-spacing: 0 !important;
2065}
2066
2067/* Icon area */
2068
2069/* Hide the Fluxer SVG icon pulse */
2070[class*="iconPulse___ZTBkMm"] {
2071 display: none !important;
2072}
2073
2074/* Wordmark removed — logo image contains the text */
2075[class*="iconWrapper___ZTBkMm"]::after {
2076 content: none !important;
2077 display: none !important;
2078}
2079
2080/* Quote / status area */
2081[class*="quoteContainer___ZTBkMm"] {
2082 background: #c0c0c0 !important;
2083 padding: 10px 14px !important;
2084 border-bottom: 1px solid #808080 !important;
2085 display: flex !important;
2086 flex-direction: column !important;
2087 gap: 4px !important;
2088}
2089
2090[class*="quoteLink___ZTBkMm"] {
2091 color: #000000 !important;
2092 text-decoration: none !important;
2093}
2094
2095[class*="incidentCta___ZTBkMm"] {
2096 color: #800080 !important;
2097 text-decoration: underline !important;
2098}
2099
2100/* "Connecting" + progress bar */
2101[class*="connectionStatus___ZTBkMm"] {
2102 background: #c0c0c0 !important;
2103 color: #000000 !important;
2104 text-transform: uppercase !important;
2105 letter-spacing: 0.05em !important;
2106 padding: 8px 14px 10px !important;
2107 margin: 0 !important;
2108 text-align: left !important;
2109}
2110
2111[class*="connectionStatus___ZTBkMm"]::after {
2112 content: "" !important;
2113 display: block !important;
2114 margin-top: 6px !important;
2115 height: 16px !important;
2116 background: repeating-linear-gradient(
2117 90deg,
2118 #800080 0px,
2119 #800080 10px,
2120 #c0c0c0 10px,
2121 #c0c0c0 12px
2122 ) !important;
2123 border-top: 2px solid #808080 !important;
2124 border-left: 2px solid #808080 !important;
2125 border-bottom: 2px solid #ffffff !important;
2126 border-right: 2px solid #ffffff !important;
2127 animation: w98progress 1.4s steps(10, end) infinite !important;
2128 background-size: 220% 100% !important;
2129}
2130
2131@keyframes w98progress {
2132 0% { background-position: 0% 0%; }
2133 100% { background-position: -100% 0%; }
2134}
2135
2136
2137/* Desktop client title bar */
2138
2139[class*="NativeTitlebar"][class*="module__titlebar"] {
2140 background: linear-gradient(90deg, #800080 0%, #388cb0 100%) !important;
2141 /* border-bottom: 1px solid #0e264a !important; */
2142 padding: 0 7px !important;
2143}
2144
2145/* Fluxer wordmark inside title bar */
2146[class*="NativeTitlebar"][class*="module__wordmark"] {
2147 color: #ffffff !important;
2148 /* filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important; */
2149}
2150

Ez az oldal Opengist alapú ⋅ Load: 237ms⋅

Magyar