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: white;
6 position: fixed;
7}
8#loading-box-text:before {
9 content: "\f179";
10 vertical-align: sub;
11 font-family: RosettaIcons;
12 font-size: 64px;
13 color: #1da1f2;
14 margin-left: 20px;
15}
16#loading-box-container {
17 margin: 0 auto;
18 width: 100%;
19 margin-top: 270px;
20 text-align: center;
21}
22
23#content {
24 color: var(--default-text-color);
25}
26
27a {
28 color: var(--link-color);
29 text-decoration: none;
30}
31a:hover {
32 text-decoration: underline;
33}
34
35body {
36 background-color: var(--darker-background-color) !important;
37 font-family: var(--font);
38 margin: 0;
39}
40#container {
41 margin: 0 auto;
42 max-width: 1190px;
43}
44
45.cell {
46 box-sizing: border-box;
47 display: inline-block;
48}
49
50#content {
51 display: flex;
52}
53.box {
54 background-color: white;
55 border-radius: 5px;
56 border: 1px solid var(--border);
57}
58#user-banner {
59 border-top-left-radius: 5px;
60 border-top-right-radius: 5px;
61 object-fit: cover;
62}
63#user-avatar {
64 margin-left: 7px;
65 border: 4px solid white;
66 margin-top: -32px;
67 border-radius: 7px;
68}
69#user-name {
70 margin: 0;
71 left: 95px;
72 font-size: 22px;
73 position: relative;
74 bottom: 47px;
75 width: 195px;
76 overflow-x: hidden;
77 color: var(--almost-black);
78 overflow-y: hidden;
79 height: 30px;
80 white-space: nowrap;
81}
82#user-handle {
83 margin: 0;
84 position: relative;
85 color: var(--lil-darker-gray);
86 font-size: 14px;
87 font-weight: 100;
88 left: 95px;
89 bottom: 48px;
90 width: fit-content;
91}
92#user-stats {
93 display: inline-flex;
94 padding-bottom: 7px;
95}
96.user-stat-div > h2 {
97 color: var(--lil-darker-gray);
98 font-size: 14px;
99 font-weight: 100;
100 text-transform: uppercase;
101 margin: 0 10px;
102 white-space: nowrap;
103}
104.user-stat-div > h1 {
105 margin: 0 10px;
106 font-size: 20px;
107 color: var(--link-color);
108}
109#user-info {
110 height: 5px;
111 display: block;
112 text-decoration: none;
113}
114#center-cell {
115 margin-top: 55px;
116}
117#left-cell {
118 top: 55px;
119 position: sticky;
120 height: fit-content;
121 margin-right: 10px;
122 margin-left: 10px;
123}
124#right-cell {
125 top: 55px;
126 position: sticky;
127 height: fit-content;
128 margin-left: 10px;
129 margin-right: 10px;
130}
131#itl {
132 width: 590px;
133 margin-bottom: 10px;
134 min-height: 800px;
135 padding-top: 10px;
136 padding-bottom: 10px;
137}
138#itl hr {
139 border-top: var(--border);
140}
141#itl h1 {
142 margin-bottom: 5px !important;
143}
144.tweet, .notification {
145 border-left: 1px solid var(--border);
146 border-right: 1px solid var(--border);
147 border-top: 1px solid var(--border);
148 background-color: white;
149 padding: 10px;
150 min-height: 50px;
151 cursor: pointer;
152}
153
154.nice-button {
155 color: var(--almost-black);
156 background-color: var(--darker-background-color);
157 background-image: linear-gradient(var(--background-color),var(--darker-background-color));
158 background-repeat: no-repeat;
159 border: 1px solid var(--border);
160 border-radius: 4px;
161 color: var(--darker-gray);
162 cursor: pointer;
163 font-size: 14px;
164 font-weight: bold;
165 line-height: normal;
166 padding: 8px 16px;
167 font-family: var(--font);
168}
169.nice-button:hover:not([disabled]) {
170 color: var(--almost-black);
171 text-decoration: none;
172 background-color: var(--border);
173 background-image: linear-gradient(var(--background-color),var(--border));
174 border-color: var(--border);
175}
176.nice-button:disabled {
177 color: lightgray !important;
178 cursor: not-allowed;
179}
180.nice-button:disabled:before {
181 color: lightgray !important;
182}
183.nice-red-button {
184 color: #d4e3ed !important;
185 background-image: linear-gradient(#BA172C, #6F0D1C) !important;
186}
187
188.nice-red-button:hover:not([disabled]) {
189 color: #d4e3ed !important;
190 background-image: linear-gradient(#BA172C, #4B0E17) !important;
191}
192
193#wtf {
194 padding: 10px;
195 width: 250px;
196}
197#wtf h1, #trends h1, #itl h1 {
198 margin: 0;
199 display: inline-block;
200 font-size: 22px;
201 color: var(--darker-gray);
202 font-weight: 300;
203}
204#wtf-refresh, #wtf-viewall {
205 color: var(--light-gray);
206 font-size: 12px;
207 text-decoration: none;
208 cursor: pointer;
209}
210#wtf-refresh:hover, #wtf-viewall:hover {
211 text-decoration: underline;
212}
213
214.wtf-user {
215 display: inline-block;
216 margin-bottom: 5px;
217}
218.wtf-user-link {
219 text-decoration: none !important;
220}
221.wtf-user-name {
222 overflow: hidden;
223 margin-right: 5px;
224 overflow-wrap: break-word;
225}
226.wtf-user-handle {
227 overflow: hidden;
228 width: 88px;
229 height: 17px;
230 display: inline-block;
231}
232.follow, .following {
233 color: var(--almost-black);
234 padding: 4px 12px 4px 12px !important;
235}
236.follow:before {
237 color: var(--light-gray);
238 font-family: RosettaIcons;
239 content: "\f175";
240 margin-right: 7px;
241 vertical-align: text-bottom;
242}
243.following:before {
244 color: var(--link-color);
245 font-family: RosettaIcons;
246 content: "\f176";
247 margin-right: 7px;
248 vertical-align: text-bottom;
249}
250
251#about {
252 margin-top: 5px;
253 padding: 10px 3px;
254 font-size: 12px;
255 color: var(--light-gray);
256 word-break: keep-all;
257}
258.about-links a, .about-links span {
259 color: var(--light-gray);
260 margin-right: 8px;
261}
262
263#trends {
264 margin-top: 10px;
265 padding: 10px;
266}
267.trend {
268 margin-top: 10px;
269}
270.trend-description {
271 font-size: 14px;
272 color: var(--light-gray);
273}
274.tweet-translate {
275 color: var(--link-color);
276 font-size: 13px;
277 cursor: pointer;
278 margin-top: 2px;
279}
280.tweet-translate:hover {
281 text-decoration: underline;
282}
283.tweet-interact-more-menu hr {
284 border-top: #ccd6dd;
285 margin: 2px;
286}
287.tweet-header, .tweet-header-quote {
288 display: contents;
289}
290.tweet-header-info, .tweet-header-info-quote {
291 display: inline;
292 text-decoration: none;
293 position: relative;
294 bottom: 3px;
295}
296.tweet-header-info-quote { bottom: 8px !important }
297.tweet-header-info:hover {
298 text-decoration: underline;
299}
300.tweet-header-name:hover {
301 color: var(--link-color);
302}
303.tweet-header-name, .tweet-header-name-quote {
304 display: inline;
305 font-weight: bold;
306 color: var(--almost-black);
307 font-size: 14px;
308}
309.tweet-header-handle, .tweet-time, .tweet-header-handle-quote, .tweet-time-quote {
310 display: inline;
311 direction: ltr;
312 unicode-bidi: embed;
313 font-size: 13px;
314 color: var(--light-gray);
315 text-decoration: none;
316}
317.tweet-avatar-link {
318 float: left;
319 margin-right: 10px;
320}
321.tweet-avatar {
322 border-radius: 5px;
323}
324.setting {
325 margin-bottom: 5px;
326}
327.wtf-header {
328 display: flow-root !important;
329}
330#color-preview {
331 margin-top: 15px;
332}
333#color-preview div {
334 padding: 10px;
335 display: inline;
336 width: fit-content;
337 border: 1px solid black;
338}
339#color-preview-light {
340 background-color: white;
341}
342#color-preview-dark {
343 background-color: #1b2836;
344}
345
346.tweet {
347 background-color: var(--background-color);
348 border-left: 1px solid var(--border);
349 border-right: 1px solid var(--border);
350 border-top: 1px solid var(--border);
351 cursor: pointer;
352 min-height: 75px;
353 padding: 10px
354}
355.tweet:focus {
356 outline: none;
357}
358
359.tweet-avatar-link {
360 float: left;
361 margin-right: 10px
362}
363
364.tweet-header,
365.tweet-header-quote {
366 display: contents
367}
368
369.tweet-header-info,
370.tweet-header-info-quote {
371 bottom: 3px;
372 display: inline;
373 position: relative;
374 text-decoration: none
375}
376
377.tweet-header-info-quote {
378 bottom: 8px !important
379}
380
381.tweet-header-name:hover {
382 color: var(--link-color)
383}
384
385.tweet-header-name,
386.tweet-header-name-quote {
387 color: var(--almost-black);
388 display: inline;
389 font-size: 14px;
390 font-weight: 700
391}
392
393.tweet-header-handle,
394.tweet-time,
395.tweet-header-handle-quote,
396.tweet-time-quote {
397 color: var(--light-gray);
398 direction: ltr;
399 display: inline;
400 font-size: 13px;
401 text-decoration: none;
402 unicode-bidi: embed
403}
404
405.tweet-time {
406 bottom: 3px;
407 position: relative
408}
409
410.tweet-time-quote {
411 bottom: 8px;
412 position: relative
413}
414
415.tweet-time::before {
416 color: var(--light-gray) !important;
417 content: "\00b7";
418 margin-right: 3px
419}
420
421.tweet-time:hover {
422 color: var(--link-color);
423 text-decoration: underline
424}
425
426.tweet-body,
427.tweet-interact,
428.tweet-body-text-quote {
429 display: flow-root;
430 color: var(--almost-black);
431}
432.tweet-body-text-quote {
433 overflow-x: hidden;
434}
435.tweet-header-name-main {
436 width: 300px;
437}
438
439.tweet-body-text-long {
440 font-size: 16px;
441 font-weight: 400;
442 line-height: 22px
443}
444
445.tweet-body-text-short {
446 font-size: 26px;
447 font-weight: 300;
448 letter-spacing: .01em;
449 line-height: 32px
450}
451
452.tweet-body-text a {
453 text-decoration: none
454}
455
456.tweet-interact {
457 margin-top: 10px;
458 user-select: none
459}
460
461.tweet-interact span {
462 color: var(--light-gray);
463 cursor: pointer;
464 display: inline-block;
465 font-size: 12px;
466 font-weight: 700;
467 margin-left: 6px;
468 margin-right: 20px;
469 position: relative;
470 text-decoration: none;
471 top: -2px
472}
473
474.tweet-interact span:before {
475 -webkit-font-smoothing: antialiased;
476 color: #ccd6dd;
477 cursor: pointer;
478 font: 400 16px RosettaIcons;
479 margin-right: 10px;
480 vertical-align: sub
481}
482
483.tweet-interact-reply:before {
484 content: "\f151"
485}
486
487.tweet-interact-favorite:before {
488 content: var(--favorite-icon-content)
489}
490
491.tweet-interact-more:before {
492 content: "\f150"
493}
494
495.tweet-interact-favorited,
496.tweet-interact-favorited:before,
497.tweet-interact-favorite:hover:before,
498.tweet-interact-favorite:hover {
499 color: var(--favorite-icon-color) !important
500}
501
502.tweet-reply-text:focus,
503.tweet-quote-text:focus {
504 outline: none
505}
506
507.tweet-reply-button,
508.tweet-quote-button {
509 bottom: 16px;
510 height: 42px;
511 position: relative
512}
513
514.nice-button {
515 background-color: var(--darker-background-color);
516 background-image: linear-gradient(var(--background-color), var(--darker-background-color));
517 background-repeat: no-repeat;
518 border: 1px solid var(--border);
519 border-radius: 4px;
520 color: var(--almost-black);
521 color: var(--darker-gray);
522 cursor: pointer;
523 font: 700 14px/normal var(--font);
524 padding: 8px 16px
525}
526
527.nice-button:hover:not([disabled]) {
528 background-color: var(--border);
529 background-image: linear-gradient(var(--background-color), var(--border));
530 border-color: var(--border);
531 color: var(--almost-black);
532 text-decoration: none
533}
534
535.nice-button:disabled {
536 color: lightgray !important;
537 cursor: not-allowed
538}
539
540.nice-button:disabled:before {
541 color: lightgray !important
542}
543
544.tweet-top {
545 font-size: 13px;
546 margin-bottom: 7px;
547 margin-left: 35px
548}
549
550.tweet-top-icon,
551.tweet-top-text {
552 color: var(--light-gray);
553 display: inline-block
554}
555
556.tweet-top-text a {
557 color: var(--light-gray);
558 text-decoration: none
559}
560
561.tweet-top-text a:hover {
562 color: var(--link-color) !important;
563 text-decoration: underline
564}
565
566.tweet-interact-retweet-menu,
567.tweet-interact-more-menu {
568 background-color: var(--background-color);
569 border: 1px solid var(--light-gray);
570 border-radius: 5px;
571 position: absolute;
572 z-index: 5
573}
574
575.tweet-interact-more-menu {
576 margin-left: 100px
577}
578
579.tweet-media {
580 display: block;
581 max-width: 500px;
582 position: relative;
583 right: 5px;
584 width: fit-content;
585}
586
587.tweet-media img {
588 cursor: zoom-in
589}
590
591.tweet-media-element,
592.new-tweet-media-img {
593 block-size: auto;
594 border: 1px solid var(--border);
595 border-radius: 7px;
596 margin: 5px;
597 object-fit: cover;
598 vertical-align: top
599}
600
601.tweet-media video {
602 object-fit: var(--video-cover);
603}
604
605.tweet-media-element-four {
606 max-height: 150px;
607 max-width: 100px
608}
609
610.tweet-media-element-three {
611 max-height: 250px;
612 max-width: 150px
613}
614
615.tweet-media-element-two {
616 max-height: 400px;
617 max-width: 200px
618}
619
620.tweet-media-element-one {
621 max-height: 500px;
622 max-width: 450px
623}
624
625.center-text {
626 background-color: var(--background-color);
627 border: 1px solid var(--border);
628 border-radius: 5px;
629 color: var(--light-gray);
630 cursor: pointer;
631 font-size: 14px;
632 margin-bottom: 10px;
633 padding: 10px;
634 text-align: center
635}
636
637.tweet-interact-retweet-menu span,
638.tweet-interact-more-menu span {
639 cursor: pointer;
640}
641
642.tweet-interact-retweet-menu span:before,
643.tweet-interact-more-menu span:before {
644 margin-right: 5px !important
645}
646
647.tweet-media-element-censor {
648 -moz-filter: blur(20px);
649 -webkit-filter: blur(20px);
650 cursor: pointer;
651 filter: blur(20px);
652 transform: scale(1.03)
653}
654
655#wtf {
656 padding: 10px;
657 width: 250px
658}
659
660#wtf h1,
661#trends h1 {
662 color: var(--darker-gray);
663 display: inline-block;
664 font-size: 22px;
665 font-weight: 300;
666 margin: 0
667}
668
669#wtf-refresh,
670#wtf-viewall {
671 color: var(--light-gray);
672 cursor: pointer;
673 font-size: 12px;
674 text-decoration: none
675}
676
677a:hover,
678.tweet-header-info:hover,
679.tweet-body-text a:hover,
680.center-text:hover,
681#wtf-refresh:hover,
682#wtf-viewall:hover {
683 text-decoration: underline
684}
685
686.tweet-avatar,
687.tweet-avatar-quote {
688 border-radius: 5px
689}
690
691.tweet-interact-retweet:before,
692.tweet-interact-retweet-menu-retweet:before {
693 content: "\f152"
694}
695
696.tweet-interact-reply-clicked,
697.tweet-interact-reply-clicked:before,
698.tweet-interact-reply:hover:before,
699.tweet-interact-reply:hover,
700.tweet-interact-more:hover:before {
701 color: var(--more-color) !important
702}
703
704.tweet-interact-retweeted,
705.tweet-interact-retweeted:before,
706.tweet-interact-retweet:hover:before,
707.tweet-interact-retweet:hover {
708 color: #5c913b !important
709}
710
711.tweet-interact-retweet-menu-quote:before,
712.tweet-interact-more-menu-embed:before {
713 content: "\f204"
714}
715
716.wtf-user {
717 display: inline-block;
718 margin-bottom: 5px
719}
720
721.wtf-user-link {
722 text-decoration: none !important
723}
724
725.wtf-user-name {
726 display: inline-block;
727 margin-right: 5px;
728 overflow: hidden
729}
730
731.wtf-user-handle {
732 display: inline-block;
733 height: 17px;
734 overflow: hidden;
735}
736
737.follow,
738.following {
739 color: var(--almost-black);
740 padding: 4px 12px !important
741}
742
743.follow:before {
744 color: var(--light-gray);
745 content: "\f175";
746 font-family: RosettaIcons;
747 margin-right: 7px;
748 vertical-align: text-bottom
749}
750
751.following:before {
752 color: var(--link-color);
753 content: "\f176";
754 font-family: RosettaIcons;
755 margin-right: 7px;
756 vertical-align: text-bottom
757}
758
759.tweet-self-thread-button {
760 font-size: 13px;
761 margin-top: 2px;
762 text-decoration: none
763}
764
765.tweet-no-top {
766 border-top: none !important
767}
768
769.tweet-self-thread-line {
770 background-color: var(--border);
771 height: 52px;
772 margin-left: -34px;
773 position: absolute;
774 width: 2px;
775 z-index: 1
776}
777
778.tweet-self-thread-line-dots {
779 border: 2px var(--background-color) solid;
780 display: unset;
781 height: 2px;
782 margin-left: -41px;
783 margin-top: 2px;
784 position: absolute;
785 width: 12px;
786 z-index: 2
787}
788
789.tweet:hover .tweet-self-thread-line-dots {
790 border: 2px var(--dark-background-color) solid !important
791}
792
793.user-verified::after {
794 color: #55acee;
795 content: "\f099";
796 font-family: RosettaIcons;
797 margin-left: 5px
798}
799
800.user-protected::after {
801 color: #ddd22b;
802 content: "\f096";
803 font-family: RosettaIcons;
804 margin-left: 5px
805}
806
807#about {
808 color: var(--light-gray);
809 font-size: 12px;
810 margin-top: 5px;
811 padding: 10px 3px;
812}
813
814.about-links a,
815.about-links span {
816 color: var(--light-gray);
817 margin-right: 8px
818}
819
820#trends {
821 margin-top: 10px;
822 padding: 10px
823}
824
825.trend {
826 margin-top: 10px
827}
828
829.trend-description {
830 color: var(--light-gray);
831 font-size: 14px
832}
833
834.tweet:first-child {
835 border-top: 1px solid var(--border) !important;
836 border-top-left-radius: 5px;
837 border-top-right-radius: 5px;
838}
839#user-list {
840 padding: 10px;
841 border-top: none;
842 border-top-left-radius: 0;
843 border-top-right-radius: 0;
844}
845.tweet:not(.tweet-view):last-child {
846 border-bottom: 1px solid var(--border);
847 border-bottom-left-radius: 0;
848 border-bottom-right-radius: 0;
849}
850.user-item-btn {
851 bottom: 47px !important;
852}
853/* A little smaller UI */
854@media screen and (max-width: 1195px) {
855 #wtf {
856 width: fit-content;
857 max-width: 250px;
858 }
859 .wtf-user-name, .wtf-user-handle {
860 font-size: 12px;
861 }
862 #user-banner {
863 width: 258px;
864 }
865 .user-stat-div>h2 {
866 font-size: 12px;
867 }
868 .user-stat-div>h1 {
869 font-size: 18px;
870 }
871}
872/* no right-cell */
873@media screen and (max-width: 1167px) {
874 #right-cell {
875 display: none;
876 }
877}
878
879@media screen and (max-width: 1073px) {
880 #wtf {
881 display: none;
882 }
883}
884/* no left-cell */
885@media screen and (max-width: 880px) {
886 #left-cell {
887 display: none;
888 }
889 #itl {
890 width: calc(100% - 20px);
891 }
892 #center-cell {
893 margin-top: 50px;
894 }
895}
896/* Mobile UI */
897@media screen and (max-width: 590px) {
898 #itl {
899 width: calc(100%);
900 }
901}