Extension to return old Twitter layout from 2015.
keii.dev
1#loading-box {
2 z-index: 1000;
3 width: 100%;
4 height: 100%;
5 background-color: var(--background-color);
6 position: fixed
7}
8
9#loading-box-text:before {
10 content: "\f179";
11 vertical-align: sub;
12 color: #1da1f2;
13 margin-left: 20px;
14 font: 64px RosettaIcons
15}
16
17#loading-box-container {
18 margin: 0 auto;
19 width: 100%;
20 margin-top: 270px;
21 text-align: center
22}
23
24a {
25 color: var(--link-color);
26 text-decoration: none
27}
28
29body {
30 background-color: var(--darker-background-color) !important;
31 font-family: var(--font);
32 margin: 0
33}
34
35.container {
36 margin: 0 auto;
37 max-width: 1190px
38}
39
40.cell {
41 box-sizing: border-box;
42 display: inline-block
43}
44
45.content {
46 display: inline-flex
47}
48
49.box {
50 background-color: var(--background-color);
51 border-radius: 5px;
52 border: 1px solid var(--border)
53}
54
55.user-stat-div>h2 {
56 color: var(--lil-darker-gray);
57 font-size: 14px;
58 font-weight: 100;
59 text-transform: uppercase;
60 margin: 0 10px
61}
62
63.user-stat-div>h1 {
64 margin: 0 10px;
65 font-size: 20px;
66 color: var(--link-color)
67}
68
69#profile-nav-left-cell {
70 height: fit-content;
71 margin-right: 10px;
72 margin-left: 10px;
73 width: 302px
74}
75
76#profile-nav-center-cell {
77 width: 566px;
78 bottom: 27px;
79 position: relative
80}
81
82#profile-nav-right-cell {
83 height: fit-content;
84 margin-right: 10px;
85 width: 272px
86}
87
88#left-cell {
89 top: 55px;
90 position: relative;
91 height: fit-content;
92 margin-right: 10px;
93 margin-left: 10px;
94 width: 302px
95}
96
97#right-cell {
98 top: 140px;
99 height: fit-content;
100 margin-left: 10px;
101 margin-right: 10px
102}
103
104#timeline {
105 width: 590px;
106 margin-bottom: 10px
107}
108
109#following-list,
110#followers-list,
111#followers_you_follow-list,
112#lists-list {
113 width: 570px;
114 margin-bottom: 10px
115}
116
117.tweet {
118 border-left: 1px solid var(--border);
119 border-right: 1px solid var(--border);
120 border-top: 1px solid var(--border);
121 background-color: var(--background-color);
122 padding: 10px;
123 min-height: 75px;
124 cursor: pointer
125}
126
127.tweet:focus {
128 outline: none;
129}
130
131.tweet-avatar-link {
132 float: left;
133 margin-right: 10px
134}
135
136.tweet-header,
137.tweet-header-quote {
138 display: contents
139}
140
141.tweet-header-info,
142.tweet-header-info-quote {
143 display: inline;
144 text-decoration: none;
145 position: relative;
146 bottom: 3px
147}
148
149.tweet-header-info-quote {
150 bottom: 8px !important
151}
152
153.tweet-header-name:hover {
154 color: var(--link-color)
155}
156
157.tweet-header-name,
158.tweet-header-name-quote {
159 display: inline;
160 font-weight: 700;
161 color: var(--almost-black);
162 font-size: 14px
163}
164
165.tweet-header-handle,
166.tweet-time,
167.tweet-header-handle-quote,
168.tweet-time-quote {
169 display: inline;
170 direction: ltr;
171 unicode-bidi: embed;
172 font-size: 13px;
173 color: var(--light-gray);
174 text-decoration: none
175}
176
177.tweet-time {
178 bottom: 3px;
179 position: relative
180}
181
182.tweet-time-quote {
183 bottom: 8px;
184 position: relative
185}
186
187.tweet-time::before {
188 content: "\00b7";
189 margin-right: 3px;
190 color: var(--light-gray) !important
191}
192
193.tweet-time:hover {
194 color: var(--link-color);
195 text-decoration: underline
196}
197
198.tweet-body,
199.tweet-interact,
200.tweet-body-text-quote {
201 display: flow-root;
202 color: var(--almost-black);
203}
204.tweet-body {
205 min-width: 490px;
206}
207.tweet-body-text-quote {
208 overflow-x: hidden;
209}
210
211.tweet-body-quote {
212 background-color: var(--background-color);
213 display: block;
214 border-radius: 5px;
215 border: 1px solid var(--border);
216 padding: 10px;
217 margin: 10px;
218 text-decoration: none;
219 position: relative;
220 right: 10px
221}
222
223.tweet-body-quote:hover {
224 background-color: var(--darker-background-color);
225 text-decoration: none
226}
227
228.tweet-body-text-long {
229 font-size: 16px;
230 line-height: 22px;
231 font-weight: 400
232}
233
234.tweet-body-text-short {
235 font-size: 26px;
236 line-height: 32px;
237 font-weight: 300;
238 letter-spacing: .01em
239}
240
241.tweet-body-text a {
242 text-decoration: none
243}
244
245.tweet-interact span:before,
246#profile-settings-div span:before {
247 -webkit-font-smoothing: antialiased;
248 margin-right: 10px;
249 color: #ccd6dd;
250 cursor: pointer;
251 vertical-align: sub;
252 font: 400 16px RosettaIcons
253}
254
255.tweet-interact-reply:before {
256 content: "\f151"
257}
258
259.tweet-interact-favorite:before {
260 content: var(--favorite-icon-content)
261}
262
263.tweet-interact-more:before {
264 content: "\f150"
265}
266
267.tweet-interact-favorited,
268.tweet-interact-favorited:before,
269.tweet-interact-favorite:hover:before,
270.tweet-interact-favorite:hover {
271 color: var(--favorite-icon-color) !important
272}
273
274.tweet-reply-text:focus,
275.tweet-quote-text:focus {
276 outline: none
277}
278
279.tweet-reply-button,
280.tweet-quote-button {
281 position: relative;
282 bottom: 16px;
283 height: 42px
284}
285
286.nice-button {
287 color: var(--almost-black);
288 background-color: var(--darker-background-color);
289 background-image: linear-gradient(var(--background-color), var(--darker-background-color));
290 background-repeat: no-repeat;
291 border: 1px solid var(--border);
292 border-radius: 4px;
293 color: var(--darker-gray);
294 cursor: pointer;
295 padding: 8px 16px;
296 font: 700 14px/normal var(--font)
297}
298
299.nice-button:hover:not([disabled]) {
300 color: var(--almost-black);
301 text-decoration: none;
302 background-color: var(--border);
303 background-image: linear-gradient(var(--background-color), var(--border));
304 border-color: var(--border)
305}
306
307.nice-button:disabled {
308 color: lightgray !important;
309 cursor: not-allowed
310}
311
312.nice-button:disabled:before {
313 color: lightgray !important
314}
315
316.nice-red-button {
317 color: #d4e3ed !important;
318 background-image: linear-gradient(#BA172C, #6F0D1C) !important;
319}
320
321.nice-red-button:hover:not([disabled]) {
322 color: #d4e3ed !important;
323 background-image: linear-gradient(#BA172C, #4B0E17) !important;
324}
325
326.tweet-top {
327 margin-left: 35px;
328 margin-bottom: 7px;
329 font-size: 13px
330}
331
332.tweet-top-icon,
333.tweet-top-text {
334 display: inline-block;
335 color: var(--light-gray)
336}
337
338.tweet-top-text a {
339 color: var(--light-gray);
340 text-decoration: none
341}
342
343.tweet-top-text a:hover {
344 color: var(--link-color) !important;
345 text-decoration: underline
346}
347
348.tweet-interact-more-menu {
349 margin-left: 100px
350}
351
352.tweet-media {
353 max-width: 500px;
354 display: block;
355 position: relative;
356 right: 5px;
357 width: fit-content;
358}
359
360.tweet-media img {
361 cursor: zoom-in
362}
363
364.tweet-media-element,
365.new-tweet-media-img {
366 margin: 5px;
367 border-radius: 7px;
368 object-fit: cover;
369 block-size: auto;
370 border: 1px solid var(--border);
371 vertical-align: top
372}
373
374.tweet-media video {
375 object-fit: var(--video-cover)
376}
377
378.tweet-media-element-four {
379 max-width: 100px;
380 max-height: 150px
381}
382
383.tweet-media-element-three {
384 max-width: 150px;
385 max-height: 250px
386}
387
388.tweet-media-element-two {
389 max-width: 200px;
390 max-height: 400px
391}
392
393.tweet-media-element-one {
394 max-width: 450px;
395 max-height: 500px
396}
397
398.center-padding-text {
399 padding-left: 100px !important;
400}
401
402.center-text {
403 background-color: var(--background-color);
404 border: 1px solid var(--border);
405 border-radius: 5px;
406 color: var(--light-gray);
407 cursor: pointer;
408 font-size: 14px;
409 margin-bottom: 10px;
410 padding: 10px;
411 text-align: center
412}
413
414.tweet-media-element-censor {
415 filter: blur(20px);
416 -webkit-filter: blur(20px);
417 -moz-filter: blur(20px);
418 cursor: pointer;
419 transform: scale(1.03)
420}
421
422#wtf {
423 padding: 10px;
424 max-width: 280px
425}
426
427#wtf > h1,
428#trends h1,
429.nice-header {
430 margin: 0;
431 display: inline-block;
432 font-size: 18px;
433 color: var(--darker-gray);
434 font-weight: 300
435}
436
437.nice-header {
438 margin-bottom: 10px
439}
440
441#trends {
442 margin-top: 10px;
443 padding: 15px
444}
445
446.trend {
447 font-size: 13px
448}
449
450#wtf-refresh,
451#wtf-viewall {
452 color: var(--light-gray);
453 font-size: 12px;
454 text-decoration: none;
455 cursor: pointer
456}
457
458a:hover,
459.tweet-header-info:hover,
460.tweet-body-text a:hover,
461.center-text:hover,
462#wtf-refresh:hover,
463#wtf-viewall:hover {
464 text-decoration: underline
465}
466
467.tweet-avatar,
468.tweet-avatar-quote {
469 border-radius: 5px
470}
471
472.tweet-interact-retweet:before,
473.tweet-interact-retweet-menu-retweet:before {
474 content: "\f152"
475}
476
477.tweet-interact-reply-clicked,
478.tweet-interact-reply-clicked:before,
479.tweet-interact-reply:hover:before,
480.tweet-interact-reply:hover,
481.tweet-interact-more:hover:before {
482 color: var(--more-color) !important
483}
484
485.tweet-interact-retweeted,
486.tweet-interact-retweeted:before,
487.tweet-interact-retweet:hover:before,
488.tweet-interact-retweet:hover {
489 color: #5c913b !important
490}
491
492.tweet-interact-retweet-menu-quote:before,
493.tweet-interact-more-menu-embed:before {
494 content: "\f204"
495}
496
497.wtf-user-name {
498 display: inline-block;
499 overflow: hidden;
500 margin-right: 5px
501}
502
503.wtf-user-handle {
504 overflow: hidden;
505 height: 17px;
506 display: inline-block
507}
508
509.follow,
510.following {
511 color: var(--almost-black);
512 padding: 4px 12px !important
513}
514
515.follow:before {
516 color: var(--light-gray);
517 content: "\f175";
518 margin-right: 7px;
519 vertical-align: text-bottom;
520 font: 17px RosettaIcons
521}
522
523.following:before {
524 color: var(--link-color);
525 content: "\f176";
526 margin-right: 7px;
527 vertical-align: text-bottom;
528 font: 17px RosettaIcons
529}
530
531.tweet-self-thread-button {
532 text-decoration: none;
533 font-size: 13px;
534 margin-top: 2px
535}
536
537.tweet-no-top {
538 border-top: none !important
539}
540
541.tweet-self-thread-line {
542 position: absolute;
543 width: 2px;
544 height: 20px;
545 background-color: var(--border);
546 margin-left: -34px;
547 z-index: 1
548}
549
550.tweet-self-thread-line-dots {
551 z-index: 2;
552 position: absolute;
553 width: 12px;
554 height: 2px;
555 border: 2px var(--background-color) solid;
556 display: unset;
557 margin-left: -41px;
558 margin-top: 2px
559}
560
561.tweet:hover .tweet-self-thread-line-dots {
562 border: 2px var(--dark-background-color) solid !important
563}
564
565.user-protected::after {
566 content: "\f096";
567 color: #ddd22b;
568 font-family: RosettaIcons;
569 margin-left: 5px
570}
571
572.user-muted::after {
573 content: "\f101";
574 color: #f33939;
575 font-family: RosettaIcons;
576 margin-left: 5px
577}
578
579#about {
580 margin-top: 5px;
581 padding: 10px 3px;
582 font-size: 12px;
583 color: var(--light-gray);
584 padding-right: 0;
585 word-break: keep-all;
586}
587
588.about-links a,
589.about-links span {
590 color: var(--light-gray);
591 margin-right: 8px
592}
593
594#new-tweets {
595 border-bottom: none !important;
596 border-radius: 0 !important;
597 margin-bottom: 0 !important;
598 padding: 10px;
599 color: var(--darker-gray);
600 background-color: var(--dark-background-color)
601}
602
603#new-tweet-avatar {
604 vertical-align: top
605}
606
607#new-tweet-text {
608 border: 1px solid var(--border);
609 resize: none;
610 border-radius: 3px;
611 width: 450px;
612 padding: 5px;
613 display: inline-block;
614 height: 23px;
615 padding-right: 40px;
616 scrollbar-width: thin;
617 font: 18px var(--font)
618}
619
620#new-tweet-text::-webkit-scrollbar {
621 width: 2px
622}
623
624#new-tweet-text:focus {
625 outline: none
626}
627
628.new-tweet-text-focused {
629 height: 100px !important
630}
631
632#new-tweet {
633 border-bottom: none !important;
634 border-bottom-left-radius: 0 !important;
635 border-bottom-right-radius: 0 !important;
636 background-color: var(--new-tweet-over);
637 padding: 10px;
638 width: 538px
639}
640
641#new-tweet-container {
642 border-radius: 5px;
643 border-bottom-left-radius: 0 !important;
644 border-bottom-right-radius: 0 !important;
645 background-color: var(--link-color)
646}
647
648#new-tweet-media-div {
649 float: right;
650 position: relative;
651 cursor: pointer;
652 bottom: 36px;
653 right: 15px
654}
655
656.new-tweet-media-div-focused {
657 bottom: 112px !important
658}
659
660#new-tweet-media:before {
661 content: "\f159";
662 color: var(--link-color);
663 font: 20px RosettaIcons
664}
665
666#new-tweet-button {
667 float: right;
668 margin-top: 5px;
669 left: 14px;
670 position: relative
671}
672
673#new-tweet-char {
674 color: var(--light-gray);
675 font-size: 12px;
676 position: absolute;
677 margin-left: -46px;
678 margin-top: 38px;
679 width: 43px;
680 text-align: center
681}
682
683#new-tweet-button:before,
684.tweet-reply-button:before,
685.tweet-quote-button:before {
686 content: "\f029";
687 color: var(--link-color);
688 margin-right: 5px;
689 vertical-align: bottom;
690 font: 14px RosettaIcons
691}
692
693#new-tweet-media-c {
694 width: auto;
695 margin: 0;
696 display: contents
697}
698
699#new-tweet-media-cc {
700 left: 34px;
701 position: relative;
702 display: inline
703}
704
705.new-tweet-media-img {
706 max-width: 75px;
707 max-height: 100px;
708 cursor: zoom-in
709}
710
711.new-tweet-media-img-progress {
712 position: absolute;
713 display: block;
714 color: gray;
715 font-size: 10px;
716 margin-left: 6px
717}
718
719.new-tweet-media-img-remove {
720 position: absolute;
721 margin-left: -24px;
722 margin-top: 8px;
723 height: 14px;
724 padding: 0 3px 3px;
725 background-color: rgba(0, 0, 0, 0.5);
726 border-radius: 5px;
727 cursor: pointer
728}
729
730.new-tweet-media-img-remove:before {
731 content: "\f045";
732 margin-bottom: 2px;
733 color: white;
734 font: 13px RosettaIcons
735}
736
737.new-tweet-media-img-alt {
738 position: absolute;
739 background: rgba(0, 0, 0, 0.5);
740 color: white;
741 padding: 1px 4px;
742 font-size: 12px;
743 font-weight: 600;
744 border-radius: 5px;
745 margin-top: 8px;
746 margin-left: -57px;
747 padding-bottom: 2px;
748 cursor: pointer
749}
750
751.new-tweet-media-img-div {
752 width: fit-content;
753 display: inline-block
754}
755
756.tweet-translate {
757 color: var(--light-gray);
758 cursor: pointer;
759 font-size: 12px;
760 margin-top: 2px
761}
762.tweet-translate:before {
763 content: "\f089";
764 font: 12px RosettaIcons;
765 margin-right: 5px;
766 vertical-align: text-bottom;
767}
768
769#profile-banner-div {
770 height: fit-content;
771 overflow: hidden
772}
773
774#profile-banner-sticky {
775 position: sticky;
776 top: -400px;
777 z-index: 16
778}
779
780#profile-banner {
781 width: 100%;
782 object-fit: cover;
783 position: relative;
784 transition: .1s;
785 height: 5px;
786 height: 500px
787}
788
789#profile-nav {
790 background-color: var(--background-color);
791 border-bottom: 1px solid var(--border);
792 box-sizing: border-box;
793 height: 60px;
794 margin-bottom: 8px;
795 position: sticky;
796 bottom: 5px;
797 top: 70px;
798 z-index: 20;
799 box-shadow: inset 0px 1px 0px 0px rgb(0 0 0 / 20%);
800}
801
802#profile-avatar {
803 border: 5px solid var(--background-color);
804 background-color: var(--background-color);
805 border-radius: 12px;
806 box-shadow: 0 1px 1px rgb(136 153 166 / 15%);
807 user-select: none;
808}
809
810#profile-info {
811 position: relative;
812 bottom: 250px;
813 z-index: 21;
814 color: var(--almost-black)
815}
816
817#profile-name {
818 font-size: 22px;
819 font-weight: 700;
820 line-height: 1;
821 word-wrap: break-word;
822 margin: 0;
823 text-rendering: optimizeLegibility;
824 overflow: hidden;
825}
826
827.piu-a {
828 color: var(--light-gray);
829}
830.pin-a {
831 text-decoration: none !important;
832}
833.translate-bio {
834 font-size: 12px;
835 color: var(--light-gray);
836}
837.translate-bio:hover {
838 text-decoration: underline;
839 cursor: pointer;
840}
841.translate-bio:before {
842 content: "\f089";
843 font: 12px RosettaIcons;
844 margin-right: 5px;
845 vertical-align: text-bottom;
846}
847
848#profile-info-text {
849 margin-top: 10px;
850 margin-left: 5px;
851 padding-right: 20px;
852 position: relative;
853 bottom: 255px;
854 color: var(--almost-black);
855}
856
857#profile-username {
858 font-size: 14px;
859 font-weight: 400;
860 line-height: 1;
861 display: block;
862 margin-bottom: 10px;
863 width: fit-content
864}
865.piu-a {
866 width: fit-content;
867 display: block;
868}
869
870#profile-bio {
871 font-size: 14px;
872 font-weight: 400;
873 line-height: 20px;
874 margin-bottom: 10px;
875 word-wrap: break-word;
876 overflow: hidden;
877}
878
879#tweet-nav[hidden] {
880 display: none !important
881}
882
883#tweet-nav {
884 background-color: var(--background-color);
885 border-top-left-radius: 5px;
886 border-top-right-radius: 5px;
887 border-left: 1px solid var(--border);
888 border-right: 1px solid var(--border);
889 border-top: 1px solid var(--border);
890 word-break: keep-all;
891 display: flex
892}
893
894#tweet-nav * {
895 font-weight: 500;
896 text-decoration: none;
897 font-size: 18px;
898 line-height: 1;
899 padding: 15px 15px 12px
900}
901
902.profile-additional-thing {
903 font-size: 14px;
904 font-weight: 400;
905 line-height: 20px;
906 display: block
907}
908
909.profile-additional-thing:before,
910#edit-profile:before {
911 margin-right: 5px;
912 vertical-align: sub;
913 color: var(--light-gray);
914 display: inline-block;
915 width: 20px;
916 text-align: center;
917 font: 18px RosettaIcons
918}
919
920.profile-additional-location:before {
921 content: "\f031"
922}
923
924.profile-additional-joined:before {
925 content: "\f177"
926}
927.profile-additional-styled:before {
928 content: "\f112";
929}
930.profile-additional-birth:before {
931 content: "\f033"
932}
933.profile-additional-professional:before {
934 content: "\f204";
935}
936.profile-additional-birth-today {
937 animation: rainbow 5s infinite
938}
939@keyframes rainbow {
940 0% {
941 color: #ff0000
942 }
943 15% {
944 color: #ff00ff
945 }
946 30% {
947 color: #0000ff
948 }
949 45% {
950 color: #00ffff
951 }
952 60% {
953 color: #00ff00
954 }
955 75% {
956 color: #ffff00
957 }
958 100% {
959 color: #ff0000
960 }
961}
962.profile-additional-birth {
963 width: fit-content
964}
965.profile-additional-birth-me:before {
966 color: currentColor;
967}
968.profile-additional-birth-me {
969 background-color: currentColor;
970 text-shadow: none !important;
971}
972.profile-additional-birth-me:hover {
973 background-color: var(--darker-background-color);
974}
975.profile-additional-birth-me:hover:before {
976 color: var(--light-gray);
977}
978
979#profile-media-text:before {
980 content: "\f110"
981}
982
983#profile-settings:before {
984 font-size: 16px;
985 content: "\f059"
986}
987#profile-style:before {
988 font-size: 16px;
989 content: "\f112"
990}
991
992#profile-settings, #profile-style {
993 cursor: pointer;
994 margin-right: 7px;
995 margin-top: 6px
996}
997#profile-style {
998 margin-right: 6px;
999 margin-top: 0;
1000 padding: 6px 2px 8px 7px;
1001}
1002
1003#edit-profile:before {
1004 content: "\f059";
1005 font-size: 14px;
1006 vertical-align: text-bottom
1007}
1008
1009.profile-media-preview {
1010 cursor: pointer;
1011 vertical-align: text-top;
1012 width: 76px;
1013 height: 76px;
1014 margin: 3px
1015}
1016.profile-media-preview:hover {
1017 filter: none;
1018 -webkit-filter: none;
1019 -moz-filter: none;
1020}
1021
1022#profile-stats {
1023 display: inline-flex;
1024 position: relative
1025}
1026
1027.profile-stat-text {
1028 font-size: 11px;
1029 letter-spacing: .02em;
1030 text-transform: uppercase;
1031 transition: color .15s ease-in-out;
1032 color: var(--darker-gray)
1033}
1034
1035.profile-stat-value {
1036 font-size: 18px;
1037 padding-top: 3px;
1038 font-weight: 500;
1039 transition: 0s;
1040}
1041
1042.profile-stat {
1043 display: grid;
1044 text-align: center;
1045 padding: 12px;
1046 padding-bottom: 13px;
1047 /* border-bottom: 4px solid transparent */
1048 transition: 0.2s;
1049}
1050
1051.profile-stat:hover,
1052.profile-stat-active {
1053 text-decoration: none;
1054 box-shadow: 0px -7px 0px -4px var(--link-color) inset;
1055 transition: 0.2s;
1056 /* border-bottom: 4px solid var(--link-color) */
1057}
1058.profile-stat-active > .profile-stat-value {
1059 color: var(--almost-black)
1060}
1061
1062#nav-profile-avatar {
1063 border-radius: 5px;
1064 margin-right: 5px
1065}
1066
1067#nav-profile-info {
1068 margin-top: 11px;
1069 margin-left: 10px;
1070 height: 39px;
1071 overflow: hidden;
1072 width: 200px;
1073 display: flex;
1074 opacity: 0;
1075 transition: 0.35s;
1076}
1077
1078#nav-profile-info-text {
1079 display: inline-block;
1080 position: relative;
1081 bottom: 2px
1082}
1083
1084#nav-profile-name {
1085 font-weight: 700;
1086 font-size: 18px;
1087 color: var(--almost-black)
1088}
1089
1090#nav-profile-username {
1091 color: var(--darker-gray);
1092 font-size: 13px;
1093 font-weight: 400;
1094 line-height: 1
1095}
1096
1097#npu-a {
1098 bottom: 3px;
1099 position: relative
1100}
1101
1102#profile-nav-buttons {
1103 position: relative;
1104 margin-right: -12px;
1105 margin-bottom: 2px
1106}
1107
1108#profile-nav-buttons * {
1109 float: right
1110}
1111
1112.control-btn {
1113 padding: 4px 12px 9px !important
1114}
1115
1116.profile-friends-avatar {
1117 border-radius: 5px;
1118 margin: 2px
1119}
1120
1121#message-user {
1122 margin-right: 6px;
1123 padding: 6px 1px 6px 6px
1124}
1125
1126#message-user:before {
1127 content: "\f157";
1128 margin-right: 5px;
1129 vertical-align: sub;
1130 color: var(--light-gray);
1131 display: inline-block;
1132 width: 20px;
1133 text-align: center;
1134 font: 18px RosettaIcons
1135}
1136
1137#profile-settings-div {
1138 margin-top: 30px;
1139 margin-left: -50px;
1140 user-select: none;
1141 width: 260px;
1142}
1143
1144.profile-settings-notifications:before {
1145 content: "\f055"
1146}
1147
1148.profile-settings-offnotifications:before {
1149 content: "\f037"
1150}
1151
1152.profile-settings-block:before {
1153 content: "\f097"
1154}
1155
1156#profile-settings-removefollowing:before {
1157 content: "\f065"
1158}
1159
1160#profile-settings-lists:before {
1161 content: "\f094"
1162}
1163#profile-settings-lists-action:before {
1164 content: "\f051";
1165}
1166#profile-settings-retweets:before {
1167 content: "\f502";
1168}
1169
1170#profile-settings-share:before {
1171 content: "\f185"
1172}
1173#profile-settings-autotranslate:before {
1174 content: "\f089";
1175}
1176
1177#profile-settings-div span {
1178 float: left;
1179 width: 220px;
1180}
1181
1182#profile-settings-div span:before {
1183 width: 11px;
1184 text-align: center;
1185 display: inline-block
1186}
1187
1188.tweet-interact span {
1189 color: var(--light-gray);
1190 cursor: pointer;
1191 display: inline-block;
1192 font-size: 12px;
1193 font-weight: 700;
1194 margin-left: 6px;
1195 margin-right: 20px;
1196 position: relative;
1197 text-decoration: none;
1198 top: -2px
1199}
1200
1201
1202#profile-settings-div hr {
1203 float: left;
1204 border-top: gray;
1205 width: 258px;
1206 margin: 3px 0;
1207}
1208
1209#control-unblock {
1210 padding-top: 7px !important
1211}
1212
1213#control-unblock:before {
1214 content: "\f056";
1215 font-family: RosettaIcons;
1216 margin-right: 5px;
1217 vertical-align: bottom
1218}
1219
1220#tweet-to {
1221 color: var(--link-color) !important;
1222 padding: 10px;
1223 color: var(--background-color);
1224 cursor: pointer;
1225 border: 1px solid var(--border);
1226 border-radius: 5px;
1227 background: var(--background-color);
1228 font-size: 14px;
1229 overflow: hidden;
1230}
1231
1232#tweet-to:hover {
1233 background-color: var(--border);
1234}
1235
1236#tweet-to-div {
1237 padding: 10px;
1238 border: 1px solid var(--border);
1239 border-radius: 5px;
1240 background: var(--new-tweet-over)
1241}
1242
1243#tweet-to-bg {
1244 margin-top: 10px;
1245 background: var(--link-color);
1246 border-radius: 5px
1247}
1248
1249.following-item-btn {
1250 float: right;
1251 position: relative;
1252 bottom: 52px;
1253 height: 40px
1254}
1255
1256.following-item-text {
1257 width: fit-content;
1258 display: inline-block;
1259 position: relative;
1260 bottom: 14px;
1261 margin-left: 8px
1262}
1263
1264.following-item-link:hover {
1265 text-decoration: none
1266}
1267
1268.following-item {
1269 margin-bottom: 5px
1270}
1271
1272#following-list,
1273#followers-list,
1274#followers_you_follow-list,
1275#lists-list {
1276 padding: 10px
1277}
1278
1279.following-item-name {
1280 position: absolute;
1281 width: 370px !important;
1282}
1283
1284.navbar-new-tweet-user-search {
1285 position: absolute;
1286 background-color: var(--background-color);
1287 padding: 5px;
1288 z-index: 5;
1289 color: var(--almost-black)
1290}
1291
1292.navbar-new-tweet-user-search span {
1293 cursor: pointer;
1294 border-radius: 5px;
1295 padding: 2px
1296}
1297
1298.navbar-new-tweet-user-search span:hover,
1299.search-result-item-active {
1300 background-color: var(--link-color) !important;
1301 color: var(--background-color) !important
1302}
1303
1304.box {
1305 background-color: var(--background-color);
1306 border-radius: 5px;
1307 border: 1px solid var(--border)
1308}
1309
1310.wtf-header {
1311 display: flow-root
1312}
1313
1314.wtf-user-link,
1315.tweet-nav-active:hover {
1316 text-decoration: none !important
1317}
1318
1319.tweet-self-thread-button:hover,
1320.tweet-translate:hover,
1321.piu-a:hover,
1322.pin-a:hover,
1323#tweet-nav a:hover {
1324 text-decoration: underline
1325}
1326
1327.pin-a,
1328.tweet-nav-active {
1329 color: var(--almost-black)
1330}
1331
1332.profile-additional-url:before,
1333#profile-settings-copy:before {
1334 content: "\f098"
1335}
1336
1337#profile-friends-text:before,
1338.profile-settings-unblock:before {
1339 content: "\f056"
1340}
1341
1342#profile-settings:hover:before,
1343.profile-stat:hover:not(.profile-stat-active) .profile-stat-text,
1344#message-user:hover:before {
1345 color: var(--link-color)
1346}
1347
1348.profile-settings-mute:before,
1349.profile-settings-unmute:before {
1350 content: "\f101"
1351}
1352.tweet-self-thread-div {
1353 margin-top: -5px;
1354}
1355#loading-box-error {
1356 color: var(--default-text-color)
1357}
1358.list-creator-modal input, .list-creator-modal textarea {
1359 border: 1px solid var(--border);
1360 resize: none;
1361 border-radius: 3px;
1362 width: 80%;
1363 padding: 5px;
1364 font-family: var(--font);
1365 display: inline-block;
1366 font-size: 18px;
1367 padding-right: 40px;
1368}
1369.list-creator-modal {
1370 color: var(--default-text-color);
1371}
1372#navbar-right {
1373 margin-right: 25px !important;
1374}
1375.tweet:not(.tweet-view):last-child {
1376 border-bottom: 1px solid var(--border) !important;
1377 border-bottom-left-radius: 5px;
1378 border-bottom-right-radius: 5px;
1379}
1380.user-item-text {
1381 max-width: 400px;
1382 text-overflow: ellipsis;
1383 overflow: hidden;
1384 white-space: nowrap;
1385}
1386.profile-stat[hidden], #profile-media-text[hidden] {
1387 display: none !important;
1388}
1389#no-tweets {
1390 width: 490px;
1391 padding: 50px;
1392}
1393#no-tweets h3 {
1394 font-size: 27px;
1395 line-height: 32px;
1396 margin-bottom: 8px;
1397 font-weight: bold;
1398 color: var(--almost-black);
1399 margin: 0;
1400}
1401#no-tweets > h3 > span {
1402 font-weight: normal;
1403}
1404#no-tweets p {
1405 color: var(--darker-gray);
1406 font-size: 14px;
1407 line-height: 20px;
1408}
1409.profile-stat-disabled {
1410 cursor: not-allowed;
1411}
1412.dropdown-menu > span[hidden] {
1413 display: none !important;
1414}
1415#tweet-nav-more {
1416 float: right;
1417 cursor: pointer;
1418 margin-left: auto;
1419 order: 2;
1420}
1421#tweet-nav-more:before {
1422 content: "\f150";
1423 color: var(--light-gray);
1424 font-family: RosettaIcons;
1425}
1426#tweet-nav-more-menu {
1427 position: absolute;
1428 margin-left: 375px;
1429 margin-top: 37px;
1430 height: 57px;
1431 padding: 10px;
1432}
1433#tweet-nav-more-menu > label {
1434 font-size: 13px;
1435 color: var(--almost-black);
1436 cursor: pointer;
1437 padding: 0;
1438 padding-left: 12px;
1439 display: inline;
1440}
1441#tweet-nav-more-menu-hr {
1442 vertical-align: middle;
1443 margin-right: -5px;
1444 cursor: pointer;
1445}
1446.loading-data {
1447 margin-top: 25px;
1448 text-align: center;
1449}
1450@supports not (-moz-appearance:none) {
1451 #navbar-links a {
1452 padding-bottom: 17px !important;
1453 }
1454}
1455#tweet-nav-more-menu > label[hidden] {
1456 display: none !important;
1457}
1458.profile-style-active:before {
1459 color: var(--link-color);
1460}
1461#styling > div {
1462 max-width: 280px;
1463 margin-bottom: 10px;
1464 color: var(--almost-black);
1465 padding: 10px;
1466 font-size: 14px;
1467}
1468#styling > div > div {
1469 margin-bottom: 10px;
1470}
1471#color-preview div {
1472 padding: 5px;
1473 display: inline-block;
1474 width: fit-content;
1475 border: 1px solid black;
1476 margin-bottom: 4px;
1477 width: calc(100% - 20px);
1478 text-align: center;
1479}
1480#color-preview-light {
1481 background-color: white;
1482}
1483#color-preview-dark {
1484 background-color: #1b2836;
1485}
1486#color-preview-black {
1487 background-color: black;
1488}
1489.styling-textarea {
1490 width: 230px;
1491 min-width: 230px;
1492 max-width: 230px;
1493 height: 50px;
1494 max-height: 400px;
1495 font-size: 12px;
1496 margin-bottom: 10px;
1497}
1498#custom-css-eligible button {
1499 padding: 4px 10px;
1500 margin-top: 5px;
1501}
1502
1503.wtf-user {
1504 display: inline-block;
1505 margin-bottom: 5px
1506}
1507/* A little smaller UI */
1508@media screen and (max-width: 1195px) {
1509 #wtf {
1510 width: fit-content;
1511 max-width: 250px;
1512 }
1513 .wtf-user-name, .wtf-user-handle {
1514 font-size: 12px;
1515 }
1516
1517 #profile-nav-right-cell,
1518 #profile-nav-center-cell {
1519 width: fit-content
1520 }
1521}
1522/* no right-cell */
1523@media screen and (max-width: 1167px) {
1524 #wtf {
1525 display: none;
1526 }
1527 #trends {
1528 display: none;
1529 }
1530 #about {
1531 display: none;
1532 }
1533 #left-cell {
1534 width: 260px;
1535 }
1536}
1537/* no left-cell */
1538@media screen and (max-width: 880px) {
1539 .content {
1540 display: grid;
1541 }
1542 #timeline {
1543 margin: 0;
1544 width: 590px
1545 }
1546 #profile-banner-sticky {
1547 position: initial;
1548 }
1549 #left-cell {
1550 margin-top: 95px;
1551 margin-bottom: -225px;
1552 position: unset;
1553 width: 590px;
1554
1555 pointer-events: none;
1556 margin-left: auto;
1557 margin-right: auto;
1558 }
1559 #center-cell {
1560 margin-left: auto;
1561 margin-right: auto;
1562 }
1563 #profile-info {
1564 padding-left: 20px;
1565 pointer-events: auto;
1566 bottom: 257px;
1567 width: fit-content
1568 }
1569 #profile-info-text {
1570 margin-left: 0;
1571 padding: 20px;
1572 padding-top: 0;
1573 padding-bottom: 0;
1574 pointer-events: auto;
1575 margin-top: 0;
1576 }
1577 #tweet-nav {
1578 width: 590px !important;
1579 }
1580 #profile-banner {
1581 height: 300px;
1582 }
1583 #profile-nav {
1584 position: initial;
1585 }
1586 #tweet-nav-more-menu {
1587 float: right;
1588 right: 0;
1589 margin-left: unset;
1590 }
1591 #profile-nav-buttons {
1592 position: absolute;
1593 right: 26px;
1594 margin-top: 12px;
1595 pointer-events: auto;
1596 z-index: 1;
1597 }
1598 #profile-nav-center-cell {
1599 position: absolute;
1600 right: 14px;
1601 top: 303px;
1602 }
1603 #following-list, #followers-list, #followers_you_follow-list, #lists-list {
1604 width: calc(100% - 22px);
1605 }
1606 #following-more, #followers-more, #followers_you_follow-more, #lists-more {
1607 width: calc(100% - 100px);
1608 }
1609 #no-tweets {
1610 width: calc(100% - 40px);
1611 padding: 20px;
1612 }
1613 #profile-settings-div {
1614 margin-left: 0;
1615 position: absolute;
1616 right: 0;
1617 }
1618}
1619
1620/* Mobile UI */
1621@media screen and (max-width: 590px) {
1622 .content {
1623 display: grid;
1624 }
1625 #left-cell {
1626 margin-bottom: -275px !important;
1627 }
1628 #timeline {
1629 margin: 0;
1630 width: 100%;
1631 }
1632 #profile-banner-sticky {
1633 position: initial;
1634 }
1635 #left-cell {
1636 margin-top: 150px;
1637 margin-bottom: -190px;
1638 width: 100%;
1639 margin-left: 0;
1640 margin-right: 0;
1641 pointer-events: none;
1642 }
1643 #profile-info {
1644 padding-left: 20px;
1645 pointer-events: auto;
1646 bottom: 257px;
1647 width: fit-content
1648 }
1649 #tweet-nav {
1650 width: unset !important;
1651 border-top-left-radius: 0;
1652 border-top-right-radius: 0;
1653 }
1654 #profile-banner {
1655 height: 300px;
1656 }
1657 #profile-avatar {
1658 width: 100px;
1659 height: 100px;
1660 }
1661 #profile-style {
1662 display: none;
1663 }
1664}
1665@media screen and (max-width: 550px) {
1666 #profile-stat-media-link {
1667 display: none;
1668 }
1669}
1670@media screen and (max-width: 470px) {
1671 .profile-stat {
1672 padding-left: 7px;
1673 padding-right: 7px;
1674 }
1675}
1676
1677@media screen and (max-width: 400px) {
1678
1679 #profile-avatar {
1680 width: 64px;
1681 height: 64px;
1682 }
1683 #profile-info {
1684 bottom: 240px;
1685 }
1686 #profile-info-text {
1687 padding-top: 30px;
1688 }
1689 .profile-stat {
1690 padding-left: 3px;
1691 padding-right: 3px;
1692 }
1693}
1694@media screen and (max-width: 350px) {
1695
1696 #profile-stat-tweets-link {
1697 display: none;
1698 }
1699}