this string has no description
eleanor-bsky.user.css
edited
1/* ==UserStyle==
2@name eleanor: bsky
3@namespace kyu.re/~eleanor
4@version 0.1.0
5@author kyu.re
6@description WIP WIP WIP WORK IN PROGRESS VERY WIP YOU'VE BEEN WARNED MATEY
7==/UserStyle== */
8@-moz-document domain("witchsky.app"),
9domain("bsky.app") {
10 :root {
11 --primary: rgb(137, 140, 200);
12 --on-primary: rgb(27, 27, 31); /*rgb(20, 23, 77);*/
13 --primary-c: rgb(40, 43, 96);
14 --on-primary-c: rgb(220, 222, 255);
15 --secondary: rgb(197, 197, 220);
16 --secondary-c: rgb(67, 68, 88);
17 --bg: rgb(27, 27, 31);
18 --surface: rgb(33, 33, 38);
19 --surface-v: rgb(45, 45, 56);
20 --fg: rgb(243, 239, 244);
21 --fg-dim: #929094;
22 --outline: rgb(144, 144, 168);
23 --outline-v: rgb(68, 70, 103);
24 --error: rgb(255, 180, 171);
25 --error-c: rgb(93, 0, 6);
26 --like: rgb(240, 138, 193);
27 --repost: rgb(166, 218, 149);
28
29 --top: 65px;
30 --radius: 24px;
31
32 background: var(--bg) !important;
33 }
34
35 * {
36 font-family: "Atkinson Hyperlegible Next", monospace !important;
37 border: none !important;
38 }
39
40 body,
41 html.theme--dim,
42 html.theme--dim body,
43 html.theme--dim #root {
44 color-scheme: dark;
45 background: var(--bg) !important;
46 --text: var(--fg);
47 --background: var(--bg);
48 --backgroundLight: var(--surface);
49 }
50
51 .css-175oi2r {
52 border-color: var(--outline-v) !important;
53 }
54
55 .css-175oi2r[style*="border-bottom-color: rgb(0, 106, 255)"] {
56 border-bottom-color: var(--primary) !important;
57 }
58
59 .r-oucylx {
60 border-bottom-color: var(--bg) !important;
61 }
62
63 [style*="inset: 0px 0px"] {
64 pointer-events: none;
65 }
66
67 [style*="background-color: rgb(0, 0, 0)"],
68 [style*="background-color: rgb(255, 255, 255)"],
69 [style*="background-color: rgb(21, 29, 40)"] {
70 background-color: var(--bg) !important;
71 }
72
73 [style*="background-color: rgb(17, 24, 34)"],
74 [style*="background-color: rgb(28, 39, 54)"] {
75 background-color: var(--surface) !important;
76 }
77
78 [style*="background-color: rgb(25, 34, 46)"],
79 [style*="background-color: rgb(34, 46, 63)"] {
80 background-color: var(--surface-v) !important;
81 }
82
83 [style*="background-color: rgb(0, 17, 36)"],
84 [style*="background-color: rgb(21, 41, 63)"],
85 [style*="background-color: rgb(0, 25, 51)"],
86 [style*="background-color: rgb(0, 30, 71)"],
87 [style*="background-color: rgb(18, 41, 73)"],
88 div[style*="background-color: rgb(14, 73, 137)"],
89 [style*="background-color: rgb(0, 40, 97)"],
90 [style*="background-color: rgb(18, 52, 100)"],
91 a[style*="background-color: rgb(0, 17, 36)"],
92 a[style*="background-color: rgb(21, 41, 63)"] {
93 background-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
94
95 .css-175oi2r:not([role="checkbox"] *) {
96 background-color: transparent !important;
97 }
98 }
99
100 [style="background-color: rgb(38, 39, 45)"] {
101 background-color: var(--surface-v) !important;
102 }
103
104 div[style*="background-color: rgb(21, 52, 85)"] {
105 background-color: var(--surface) !important;
106 }
107
108 [style*="color: rgb(255, 255, 255)"],
109 [style*="color: rgb(241, 243, 245)"] {
110 color: var(--fg) !important;
111 }
112
113 [style*="color: rgb(165, 178, 197)"],
114 [style*="color: rgb(171, 184, 201)"],
115 [style*="color: rgb(84, 110, 138)"],
116 [style*="color: rgb(66, 87, 108)"],
117 [style*="color: rgb(141, 142, 150)"],
118 [style*="color: rgb(111, 131, 159)"] {
119 color: var(--fg-dim) !important;
120 }
121
122 [style*="color: rgb(11, 15, 20)"] {
123 color: var(--on-primary) !important;
124 }
125
126 [style*="color: rgb(0, 0, 0)"],
127 button > div > div[style~="color: rgb(0, 0, 0)"] {
128 color: var(--on-primary) !important;
129 }
130
131 [style*="color: rgb(0, 106, 255)"],
132 [style*="color: rgb(15, 115, 255)"],
133 [style*="color: rgb(66, 145, 255)"],
134 [style*="color: rgb(77, 151, 255)"],
135 div[style*="color: rgb(82, 172, 254)"] {
136 color: var(--primary) !important;
137 }
138
139 [style*="text-decoration-color: rgb(0, 106, 255)"],
140 [style*="text-decoration-color: rgb(15, 115, 255)"] {
141 text-decoration-color: var(--primary) !important;
142 }
143
144 path[fill="#006AFF"],
145 path[fill="#0F73FF"] {
146 fill: var(--primary);
147 }
148
149 path[fill="#ffffff"],
150 path[fill="hsl(211, 20%, 95.3%)"] {
151 fill: var(--on-primary) !important;
152 }
153
154 path[fill="#FFFFFF"] {
155 fill: var(--fg);
156 }
157
158 path[fill="#667B99"],
159 path[fill="#6F839F"] {
160 fill: var(--fg-dim) !important;
161 }
162
163 path[fill="#8798B0"],
164 path[fill="#8D9DB4"] {
165 fill: var(--fg-dim);
166 }
167
168 path[fill="#000000"] {
169 fill: var(--on-primary);
170 }
171
172 path[fill="hsl(211, 24%, 43.6%)"],
173 path[fill="hsl(211, 24%, 34.2%)"] {
174 fill: var(--fg-dim);
175 }
176
177 [style*="background-color: rgb(0, 106, 255)"],
178 [style*="background-color: rgb(15, 115, 255)"],
179 [style*="background-color: rgb(0, 133, 255)"],
180 .r-wzwllv {
181 background-color: var(--primary) !important;
182 > div,
183 > div > div {
184 color: var(--on-primary) !important;
185 }
186 }
187
188 button[style*="background-color: rgb(0, 106, 255)"],
189 button[style*="background-color: rgb(66, 145, 255)"],
190 button[style*="background-color: rgb(15, 115, 255)"],
191 button[style*="background-color: rgb(77, 151, 255)"],
192 button[style*="background-color: rgb(0, 133, 255)"] {
193 background-color: var(--primary) !important;
194
195 &:hover {
196 background-color: color-mix(in srgb, var(--primary) 75%, transparent) !important;
197 }
198
199 > div {
200 color: var(--on-primary) !important;
201 }
202 svg > path {
203 fill: var(--on-primary) !important;
204 }
205 }
206
207 button[style*="background-color: rgb(255, 255, 255)"],
208 button[style*="background-color: rgb(241, 243, 245)"] {
209 background-color: var(--primary-c) !important;
210 > div {
211 color: var(--on-primary-c) !important;
212 }
213 }
214
215 button[aria-label^="Follow"] * {
216 color: var(--on-primary) !important;
217 fill: var(--on-primary) !important;
218 }
219
220 button[style*="background-color: rgb(0, 133, 255)"] > div > div {
221 color: var(--on-primary) !important;
222 }
223
224 div[style*="border-color: rgb(0, 106, 255)"],
225 div[style*="border-color: rgb(15, 115, 255)"] {
226 border-color: var(--primary) !important;
227 }
228
229 [style*="border-color: rgb(255, 255, 255)"] {
230 border-color: var(--primary) !important;
231 }
232
233 path[stroke="#006AFF"],
234 path[stroke="#0F73FF"] {
235 stroke: var(--primary) !important;
236 }
237
238 path[stroke="#232E3E"],
239 path[stroke="#2C3A4E"],
240 path[stroke="#DCE2EA"] {
241 stroke: var(--surface-v) !important;
242 }
243
244 circle[style^="stroke: rgb(25, 118, 210)"] {
245 stroke: var(--primary) !important;
246 }
247
248 div[style*="background-color: rgb(191, 225, 255)"],
249 div[style*="background-color: rgb(1, 37, 97)"] {
250 background-color: color-mix(in srgb, var(--primary) 25%, transparent) !important;
251 > svg > path[fill="#52acfe"] {
252 fill: var(--primary);
253 }
254 }
255
256 [data-testid="composerPublishBtn"],
257 [data-testid="sendReportBtn"],
258 [data-testid="editProfileSaveBtn"] {
259 background: unset !important;
260 > div[style*="background-image: linear-gradient"] {
261 background: var(--on-primary) !important;
262 }
263 > div,
264 > div > div {
265 color: var(--primary) !important;
266 }
267 }
268
269 [data-testid="saveBtn"] > div[style*="background-image: linear-gradient"] {
270 background: unset !important;
271 background-color: var(--primary) !important;
272 > div {
273 color: var(--on-primary) !important;
274 }
275 }
276
277 [data-testid="composeFAB"] > div {
278 background: unset !important;
279 background-color: var(--primary) !important;
280 .r-jwli3a {
281 color: var(--on-primary) !important;
282 }
283 }
284
285 [data-testid="continueBtn"] {
286 background-color: var(--primary) !important;
287 > div > div {
288 color: var(--on-primary) !important;
289 }
290 > div > svg > path {
291 fill: var(--on-primary) !important;
292 }
293 }
294
295 button[data-testid="toggleSubscribeBtn"] > div {
296 background-color: var(--secondary) !important;
297 > div {
298 color: var(--on-primary) !important;
299 }
300 }
301
302 [style*="color: rgb(233, 22, 70)"],
303 [style*="color: rgb(235, 36, 82)"],
304 [style*="color: rgb(205, 10, 55)"],
305 span[style*="color: rgb(205, 10, 55)"] {
306 color: var(--error) !important;
307 }
308
309 button[style*="background-color: rgb(244, 11, 66)"],
310 button[style*="background-color: rgb(246, 60, 103)"],
311 button[style*="background-color: rgb(245, 41, 88)"],
312 button[style*="background-color: rgb(247, 84, 122)"],
313 button[style*="background-color: rgb(205, 10, 55)"] {
314 background-color: var(--error-c) !important;
315 &:hover {
316 background-color: color-mix(in srgb, var(--error-c) 75%, transparent) !important;
317 }
318 > div {
319 color: var(--error) !important;
320 }
321 }
322
323 [style^="background-color: rgb(79, 3, 20)"],
324 [style^="background-color: rgb(209, 16, 67)"] {
325 background-color: var(--error-c) !important;
326 }
327
328 path[fill="#fba2b2"] {
329 fill: var(--on-primary);
330 }
331
332 [style*="color: rgb(236, 72, 104); border-color: rgb(209, 16, 67)"] {
333 color: var(--error) !important;
334 border-color: var(--error) !important;
335 }
336
337 .r-w7hjet {
338 background-color: var(--error);
339 }
340
341 span[style*="color: rgb(205, 10, 55)"] {
342 color: var(--error) !important;
343 }
344
345 [style*="background-color: rgb(1, 64, 132)"] {
346 background-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
347 }
348
349 [style*="background-color: rgb(142, 9, 40)"] {
350 background-color: var(--error-c) !important;
351 div {
352 color: var(--error) !important;
353 }
354 svg > path {
355 fill: var(--error);
356 }
357 }
358
359 .r-84gixx,
360 .r-1i89l9k,
361 div[style*="color: rgb(236, 72, 153)"],
362 button[data-testid="toggleLikeBtn"] > svg:has(path[fill^="hsl(346,"]) {
363 color: var(--like) !important;
364 > path {
365 fill: var(--like) !important;
366 }
367 }
368
369 .r-5ld2xk,
370 [style*="color: rgb(92, 239, 170)"] {
371 color: var(--repost) !important;
372 > path {
373 fill: var(--repost) !important;
374 }
375 }
376
377 [style*="border-color: rgb(35, 46, 62)"],
378 [style*="border-color: rgb(44, 58, 78)"],
379 [style*="border-color: rgb(49, 63, 84)"],
380 [style*="border-color: rgb(57, 73, 96)"] {
381 border-color: var(--outline-v) !important;
382 }
383
384 [style*="border-color: rgb(74, 97, 121)"] {
385 border-color: var(--outline) !important;
386 }
387
388 div[style*="border-color: rgb(46, 64, 82)"] {
389 border-color: var(--outline-v) !important;
390 }
391
392 button[style*="border-color: rgb(35, 46, 62); background-color: rgb(0, 30, 71)"],
393 button[style*="border-color: rgb(44, 58, 78); background-color: rgb(18, 41, 73)"],
394 button[style*="border-color: rgb(220, 226, 234); background-color: rgb(229, 240, 255)"] {
395 background-color: var(--surface) !important;
396 border-color: var(--outline-v) !important;
397 }
398
399 [style*="background-color: rgb(185, 185, 193)"] {
400 background-color: var(--surface-v) !important;
401 }
402
403 div[style*="border-color: rgb(76, 162, 254)"] {
404 border-color: var(--primary) !important;
405 }
406
407 div[style*="background-color: rgb(91, 119, 149)"] {
408 background-color: var(--outline) !important;
409 }
410
411 div[style*="border-color: rgb(120, 142, 165)"] {
412 border-color: var(--outline) !important;
413 }
414
415 div[style*="background-color: rgb(35, 46, 62)"].r-m5arl1 {
416 background: var(--outline-v) !important;
417 }
418
419 .r-kdyh1x,
420 .r-cpet4d {
421 &[style*="background-color: rgb(20, 27, 35)"] {
422 background-color: var(--surface) !important;
423 }
424 }
425
426 .r-17c3jg3:has(> div[dir="auto"]) {
427 background-color: var(--surface-v) !important;
428 .r-jwli3a {
429 color: var(--fg) !important;
430 }
431 > svg > path {
432 fill: var(--fg) !important;
433 }
434 }
435
436 .ProseMirror,
437 .ProseMirror-dark {
438 color: var(--fg);
439 }
440
441 .mention {
442 color: var(--primary);
443 }
444
445 input,
446 [role="search"],
447 [data-testid="confirmCodeInput"] {
448 --placeholderTextColor: var(--fg-dim) !important;
449 }
450
451 circle[fill="#20BC07"] {
452 fill: var(--repost);
453 }
454
455 button[disabled] > svg > path {
456 fill: var(--outline);
457 }
458
459 .r-1521r3q {
460 color: var(--fg-dim);
461 }
462 .r-yovm8p {
463 color: var(--primary);
464 }
465
466 .r-wuyfte {
467 background-color: var(--primary-c);
468 }
469
470 .r-m7buhn,
471 a[style*="background-color: rgb(18, 33, 54)"] {
472 background-color: color-mix(in srgb, var(--primary-c) 50%, transparent) !important;
473 }
474
475 [data-testid="drawer"] {
476 background-color: var(--bg);
477 }
478
479 div[style*="background-color: rgb(197, 207, 217)"],
480 div[style*="background-color: rgb(201, 210, 219)"],
481 div[style*="background-color: rgb(46, 63, 81)"] {
482 background-color: var(--fg) !important;
483 > div {
484 color: var(--bg) !important;
485 }
486 }
487
488 [role="main"] {
489 margin-top: var(--top);
490 }
491
492 [data-testid="notificationsScreen"] {
493 > div:first-of-type {
494 padding: 0 3ch !important;
495 }
496 margin-top: 1rem;
497 }
498
499 [aria-label^="Compose new"] {
500 &,
501 & > div {
502 border-radius: var(--radius);
503 }
504 margin-bottom: 0.25rem;
505 }
506
507 [data-testid="profileHeaderAviButton"] {
508 * {
509 border-radius: 1000px !important;
510 }
511
512 > div > div > div {
513 outline: 8px solid var(--bg) !important;
514 border: none !important;
515 }
516
517 div:has(> &) {
518 left: 16px !important;
519 }
520 }
521
522 div:has(> [data-testid="userBannerImage"]),
523 div:has(> [data-testid="profileHeaderAviButton"]) {
524 transition: transform cubic-bezier(0.17, 0.73, 0.14, 1) 250ms;
525
526 &:hover {
527 transform: scale(1.05) !important;
528 }
529 }
530
531 [data-testid="profileView"] > div:first-of-type {
532 margin-top: 1rem;
533 border-radius: var(--radius);
534
535 [data-testid="userBannerImage"],
536 [data-testid="userBannerFallback"] {
537 border-top-left-radius: var(--radius);
538 border-top-right-radius: var(--radius);
539 border-bottom-left-radius: calc(var(--radius) / 6);
540 border-bottom-right-radius: calc(var(--radius) / 6);
541 overflow: hidden;
542 }
543
544 [aria-label="Back"] {
545 display: none;
546 }
547
548 [data-testid="profilePager-selector-5"],
549 [data-testid="profilePager-selector-6"],
550 [data-testid="profilePager-selector-7"] {
551 display: none;
552 }
553 }
554
555 [data-testid$="flatlist"] > div > div > div {
556 border: none !important;
557
558 &,
559 [role="link"] > div {
560 border-radius: 5px !important;
561 }
562
563 margin-bottom: 0.25rem;
564
565 [role="link"] > div {
566 border: none;
567 }
568 }
569
570 /* Search bar */
571 input[placeholder="Search"] {
572 + div {
573 border-radius: 1000px !important;
574 }
575 padding: 1ch !important;
576 }
577
578 [data-testid="HomeScreen"] :has(+ a[href="/feeds"]) {
579 display: none !important;
580 }
581
582 [data-testid="HomeScreen"] [href="/feeds"] {
583 display: none;
584 }
585
586 [role="main"] + [role="navigation"] + div {
587 z-index: -1 !important;
588
589 > :not(:first-child) {
590 display: none;
591 }
592
593 > :first-child {
594 position: sticky;
595 width: 600px;
596 transform: translate(-628px, 1px);
597 }
598 }
599
600 main + [role="navigation"] {
601 :is(& > a, & button, & button > div) > div[dir="auto"] {
602 display: none;
603 }
604
605 width: max-content;
606 align-items: center;
607
608 > :last-child {
609 padding: 12px !important;
610
611 > button {
612 padding: 12px !important;
613 background-color: transparent !important;
614 }
615
616 path {
617 fill: var(--primary) !important;
618 }
619 }
620 }
621
622 nav > a[href="/search"] {
623 display: none;
624 }
625
626 nav a[href="/notifications"] [aria-label*="unread"] {
627 color: var(--on-primary) !important;
628 }
629
630 [data-testid="homeScreenFeedTabs"],
631 [data-testid="profilePager"],
632 [data-testid="notificationsScreen"] [role="tablist"] {
633 &,
634 > [data-testid$="-selector"] {
635 padding-left: 1ch;
636 align-items: center;
637 flex-grow: 0;
638
639 > div {
640 gap: 1ch;
641 align-items: center;
642 justify-content: center;
643 max-width: 420px;
644 }
645 }
646
647 &[data-testid="homeScreenFeedTabs"],
648 > [data-testid$="homeScreenFeedTabs-selector"] {
649 justify-content: center;
650 }
651
652 [role="tab"] {
653 flex-grow: 0;
654 padding: 0;
655 border-radius: calc(var(--radius) / 3);
656
657 [dir="auto"] {
658 padding: 6px 12px !important;
659 border-radius: calc(var(--radius) / 3);
660
661 &:has([style^="background-color"]) {
662 background-color: var(--primary-c) !important;
663 color: var(--on-primary-c) !important;
664 }
665
666 & [style] {
667 display: none;
668 }
669 }
670 }
671
672 width: var(--width);
673 padding-bottom: 1.5em !important;
674 padding-top: 0.75em !important;
675 }
676
677 [data-testid="notifsFeed"] > div > div > div {
678 overflow: hidden;
679 border-bottom-left-radius: var(--radius);
680 border-bottom-right-radius: var(--radius);
681
682 &:nth-child(2) {
683 border-top-left-radius: var(--radius);
684 border-top-right-radius: var(--radius);
685 border-bottom-left-radius: 0;
686 border-bottom-right-radius: 0;
687 }
688
689 &:hover {
690 border-radius: var(--radius);
691 margin-top: 0.5rem;
692
693 &:nth-child(2) {
694 margin-bottom: 0.5rem;
695 margin-top: 0;
696 }
697 }
698
699 transition: margin cubic-bezier(0.17, 0.73, 0.14, 1) 100ms,
700 border-radius cubic-bezier(0.17, 0.73, 0.14, 1) 100ms;
701 }
702}