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