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