Extension to return old Twitter layout from 2015.
keii.dev
1:root {
2 --link-color: #4bacd2;
3 --font: Arial, sans-serif;
4 --tweet-font: Arial, sans-serif;
5 --favorite-icon-content: "\f147";
6 --favorite-icon-content-notif: "\f001";
7 --favorite-icon-color: #ffac33;
8 --video-cover: contain;
9 --background-color: white;
10 --dark-background-color: #f5f8fa;
11 --darker-background-color: #f5f8fa;
12 --almost-black: #292f33;
13 --border: #e1e8ed;
14 --light-gray: #8899a6;
15 --darker-gray: #66757f;
16 --lil-darker-gray: #6a7d8c;
17 --default-text-color: black;
18 --new-tweet-over: rgba(255, 255, 255, 0.92);
19 --input-background: white;
20 --active-message: #eaf5fd;
21 --more-color: #30F;
22 --choice-bg: rgb(207, 217, 222);
23 --list-actions-bg: #efefef;
24 --menu-bg: rgba(255,255,255,0.98);
25 --cw: rgb(197, 136, 136);
26}
27@font-face {
28 font-family: 'RosettaIcons';
29 src: url(chrome-extension://__MSG_@@extension_id__/fonts/rosetta.woff);
30}
31h1, h2, h3, h4, h5, h6 {
32 text-rendering: optimizeLegibility;
33}
34body {
35 overflow-x: hidden;
36}
37
38::-webkit-scrollbar {
39 width: 6px;
40}
41
42::-webkit-scrollbar-track {
43 background: var(--background-color);
44}
45
46::-webkit-scrollbar-thumb {
47 background: var(--link-color);
48 border-radius: 3px;
49}
50
51input, textarea {
52 background-color: var(--input-background);
53 color: var(--default-text-color)
54}
55
56#navbar {
57 position: fixed;
58 background-color: var(--background-color);
59 border-bottom: 1px solid rgba(0, 0, 0, 0.15);
60 height: 46px;
61 top: 0;
62 left: 0;
63 width: 100%;
64 z-index: 100;
65 font-size: 13px;
66 color: var(--darker-gray);
67}
68
69#navbar-line {
70 top: 46px;
71 position: fixed;
72 border-bottom: 1px solid rgba(0, 0, 0, 0.05);
73 height: 1px;
74 width: 100%;
75 z-index: 99;
76 left: 0;
77}
78
79#navbar-container {
80 margin: 0 auto;
81 max-width: 1222px;
82}
83
84#twitter-logo-div {
85 display: block;
86 text-align: center;
87 margin: 0 auto;
88 position: relative;
89 bottom: 15px;
90 z-index: 97;
91}
92#twitter-logo {
93 position: relative;
94 padding-left: 50px;
95}
96#twitter-logo:before {
97 content: "\f179";
98 vertical-align: sub;
99 font-family: RosettaIcons;
100 font-size: 22px;
101 color: #1da1f2;
102}
103.center-text {
104 background-color: var(--background-color);
105 text-align: center;
106 margin-top: 10px;
107 color: var(--light-gray);
108 border: 1px solid var(--border);
109 font-size: 14px;
110 padding: 10px;
111 border-radius: 5px;
112 cursor: pointer;
113}
114.center-text:hover {
115 text-decoration: underline;
116}
117
118#home:before {
119 content: "\f053";
120}
121
122#notifications:before {
123 content: "\f055";
124}
125
126#messages:before {
127 content: "\f054";
128}
129#pin-lists {
130 background-color: var(--background-color);
131}
132#pin-profile:before {
133 content: "\f056";
134}
135#pin-bookmarks:before {
136 content: "\f093";
137}
138#pin-lists:before {
139 content: "\f094";
140}
141
142#navbar a:before {
143 vertical-align: sub;
144 margin-right: 7px;
145 font-family: RosettaIcons;
146 font-size: 20px;
147}
148
149#navbar a {
150 color: var(--darker-gray);
151 text-decoration: none;
152 z-index: 98;
153}
154
155#navbar a:hover {
156 color: var(--link-color);
157}
158
159#navbar-links a {
160 padding: 13px 15px;
161 padding-bottom: 16px;
162 top: 8px;
163 position: relative;
164 /* border-bottom: 3px solid transparent; */
165 transition: 0.2s;
166}
167@-moz-document url-prefix() {
168 #navbar-links a {
169 padding-bottom: 15px;
170 }
171}
172
173#navbar-links a:hover {
174 box-shadow: 0px -7px 0px -4px var(--link-color) inset;
175 transition: 0.2s;
176}
177
178.menu-active {
179 box-shadow: 0px -7px 0px -4px var(--link-color) inset;
180}
181
182.menu-active:before {
183 color: var(--link-color) !important;
184}
185
186.nav-count {
187 background: var(--link-color);
188 color: var(--background-color);
189 border-radius: 8px;
190 border: 1px solid var(--background-color);
191 padding: 3px 5px;
192 position: absolute;
193 font-size: 10px;
194 margin-left: -18px;
195 margin-top: -4px;
196}
197@supports (-moz-appearance:none) {
198 .nav-count {
199 margin-top: 1px;
200 }
201}
202#follow-request-count {
203 background: var(--link-color) !important;
204 color: var(--background-color);
205 border-radius: 25px;
206 padding: 2px 7px 5px 7px;
207 margin-left: 7px;
208 font-size: 12px;
209 height: 14px;
210 margin-top: -3px;
211}
212
213#navbar-right {
214 float: right;
215 position: relative;
216 bottom: 41px;
217 display: inline-flex;
218 z-index: 98;
219 margin-right: 15px;
220}
221
222#search-input, #user-search-input {
223 display: block;
224 -moz-box-sizing: border-box;
225 box-sizing: border-box;
226 width: 100%;
227 height: 32px;
228 padding: 5px 27px 6px 12px;
229 font-size: 12px;
230 line-height: 1;
231 color: var(--almost-black);
232 background-color: var(--darker-background-color);
233 border: 1px solid var(--border);
234 border-radius: 21px;
235 transition: all .2s ease-in-out;
236 font-family: var(--font);
237}
238#user-search {
239 padding: 0;
240 padding-bottom: 6px;
241}
242
243#search-input:focus, #user-search-input:focus {
244 outline: none;
245 color: var(--almost-black);
246 text-shadow: none;
247 background-color: var(--background-color);
248 box-shadow: none;
249}
250
251#search-icon, #user-search-icon {
252 border: none;
253 background: none;
254 float: right;
255 position: relative;
256 bottom: 27px;
257 right: 6px;
258 cursor: pointer;
259}
260
261#search-icon:before, #user-search-icon:before {
262 content: "\f058";
263 vertical-align: sub;
264 font-family: RosettaIcons;
265 font-size: 13px;
266 color: var(--darker-gray);
267}
268#user-search-icon {
269 bottom: 34px;
270 left: 4px;
271 right: 0;
272 padding-top: 4px;
273}
274
275#navbar-user {
276 margin-left: 15px;
277}
278
279#navbar-user-avatar {
280 border-radius: 5px;
281 cursor: pointer;
282}
283
284.modal {
285 position: fixed;
286 z-index: 200;
287 left: 0;
288 top: 0;
289 width: 100%;
290 height: 100%;
291 overflow: auto;
292 background-color: rgb(0, 0, 0);
293 background-color: rgba(0, 0, 0, 0.4);
294}
295
296/* Modal Content */
297.modal-content {
298 width: fit-content;
299 min-width: 500px;
300 margin: auto;
301 border-radius: 5px;
302 border: 1px solid var(--border);
303 padding: 20px;
304 background-color: var(--background-color);
305 top: 20%;
306 position: relative;
307 max-height: 60%;
308 overflow-y: inherit;
309 animation: opac 0.2s ease-in-out;
310}
311@keyframes opac {
312 0% {
313 opacity: 0
314 }
315 100% {
316 opacity: 1
317 }
318}
319
320/* The Close Button */
321.modal-close {
322 color: #aaaaaa;
323 float: right;
324 font-size: 20px;
325 font-weight: bold;
326 top: 0;
327 right: 5px;
328 position: absolute;
329}
330
331.modal-close:hover,
332.modal-close:focus {
333 color: var(--default-text-color);
334 text-decoration: none;
335 cursor: pointer;
336}
337#navbar-tweet-button {
338 background-color: var(--link-color);
339 color: var(--background-color);
340 cursor: pointer;
341 border-radius: 5px;
342 height: 32px;
343 border: 1px solid rgba(0, 0, 0, 0.4);
344 padding: 1px 15px 10px 15px;
345 margin-left: 15px;
346 font-family: var(--font);
347}
348#navbar-tweet-button:hover {
349 filter: brightness(0.9);
350}
351#navbar-tweet-button:before {
352 content: "\f029";
353 font-family: RosettaIcons;
354 color: var(--background-color);
355 font-size: 20px;
356 vertical-align: sub;
357 margin-right: 7px;
358}
359#navbar-tweet-highlight {
360 width: 100%;
361 margin-top: -1px;
362 margin-left: -45px;
363 height: 1px;
364 position: absolute;
365 background: var(--background-color);
366 opacity: 0.2;
367}
368
369.navbar-new-tweet-avatar, .new-message-user-avatar {
370 vertical-align: top;
371 border-radius: 5px;
372}
373.navbar-new-tweet-text {
374 border: 1px solid var(--border);
375 resize: none;
376 border-radius: 3px;
377 width: 450px;
378 padding: 5px;
379 font-family: var(--font);
380 display: inline-block;
381 height: 100px;
382 font-size: 18px;
383 padding-right: 40px;
384 scrollbar-width: thin;
385}
386.navbar-new-tweet-text::-webkit-scrollbar {
387 width: 2px;
388}
389.navbar-new-tweet-char {
390 color: var(--light-gray);
391 font-size: 12px;
392 position: absolute;
393 margin-left: -46px;
394 margin-top: 38px;
395 width: 43px;
396 text-align: center;
397}
398.navbar-new-tweet-text:focus {
399 outline: none;
400}
401.navbar-new-tweet {
402 border-bottom: none !important;
403 border-bottom-left-radius: 0 !important;
404 border-bottom-right-radius: 0 !important;
405 background-color: var(--new-tweet-over);
406 padding: 10px;
407 width: 538px;
408}
409.navbar-new-tweet-container {
410 border-radius: 5px;
411 border-bottom-left-radius: 0 !important;
412 border-bottom-right-radius: 0 !important;
413 background-color: var(--link-color);
414}
415.navbar-new-tweet-media-div {
416 float: right;
417 position: relative;
418 cursor: pointer;
419 right: 15px;
420 bottom: 112px;
421}
422.navbar-new-tweet-media:before {
423 content: "\f110";
424 font-family: RosettaIcons;
425 color: var(--link-color);
426 font-size: 20px;
427}
428.navbar-new-tweet-button {
429 float: right;
430 margin-top: 5px;
431 position: relative;
432 margin-right: -57px;
433}
434.navbar-new-tweet-button:before, .new-tweet-button:before {
435 content: "\f029";
436 font-family: RosettaIcons;
437 color: var(--link-color);
438 font-size: 14px;
439 margin-right: 5px;
440 vertical-align: bottom;
441}
442.navbar-new-tweet-media-c {
443 width: auto;
444 margin: 0;
445 display: contents;
446}
447.navbar-new-tweet-media-cc {
448 left: 34px;
449 position: relative;
450 display: inline;
451}
452.new-tweet-media-img {
453 max-width: 75px;
454 max-height: 100px;
455 cursor: zoom-in;
456}
457.new-tweet-media-img-progress {
458 position: absolute;
459 display: block;
460 color: gray;
461 font-size: 10px;
462 margin-left: 6px;
463}
464.new-tweet-media-img-remove {
465 position: absolute;
466 margin-left: -24px;
467 margin-top: 8px;
468 height: 14px;
469 padding: 0px 3px 3px 3px;
470 background-color: rgba(0,0,0, 0.5);
471 border-radius: 5px;
472 cursor: pointer;
473}
474.new-tweet-media-img-remove:before {
475 content: "\f045";
476 font-family: RosettaIcons;
477 margin-bottom: 2px;
478 color: white;
479 font-size: 13px;
480}
481.new-tweet-media-img-alt {
482 position: absolute;
483 background: rgba(0,0,0, 0.5);
484 color: white;
485 padding: 1px 4px;
486 font-size: 10px;
487 font-weight: 600;
488 border-radius: 5px;
489 margin-top: 8px;
490 margin-left: -53px;
491 padding-bottom: 2px;
492 cursor: pointer;
493}
494.new-tweet-media-img-cw {
495 position: absolute;
496 background: rgba(0,0,0, 0.5);
497 color: white;
498 padding: 1px 4px;
499 font-size: 10px;
500 font-weight: 600;
501 border-radius: 5px;
502 margin-top: 8px;
503 margin-left: -80px;
504 padding-bottom: 2px;
505 cursor: pointer;
506}
507.new-tweet-media-img-div {
508 width: fit-content;
509 display: inline-block;
510}
511.nice-button {
512 color: var(--almost-black);
513 background-color: var(--darker-background-color);
514 background-image: linear-gradient(var(--background-color),var(--darker-background-color));
515 background-repeat: no-repeat;
516 border: 1px solid var(--border);
517 border-radius: 4px;
518 color: var(--darker-gray);
519 cursor: pointer;
520 font-size: 14px;
521 font-weight: bold;
522 line-height: normal;
523 padding: 8px 16px;
524}
525.nice-button:hover:not([disabled]) {
526 color: var(--almost-black);
527 text-decoration: none;
528 background-color: var(--border);
529 background-image: linear-gradient(var(--background-color),var(--border));
530 border-color: var(--border);
531}
532.nice-button:disabled {
533 color: gray !important;
534 cursor: not-allowed;
535}
536.nice-button:disabled:before {
537 color: gray !important;
538}
539.nice-red-button {
540 color: #d4e3ed !important;
541 background-image: linear-gradient(#BA172C, #6F0D1C) !important;
542}
543
544.nice-red-button:hover:not([disabled]) {
545 color: #d4e3ed !important;
546 background-image: linear-gradient(#BA172C, #4B0E17) !important;
547}
548#navbar-user-menu {
549 min-width: 130px;
550}
551#navbar-user-menu hr {
552 border-bottom: 1px solid var(--border);
553 margin: 3px 0;
554 border-top: none;
555 border-right: none;
556 border-left: none;
557}
558.nice-header {
559 margin: 0;
560 display: inline-block;
561 font-size: 18px;
562 color: var(--darker-gray);
563 font-weight: 300;
564 margin-bottom: 10px;
565}
566.navbar-user-account {
567 cursor: pointer;
568 padding: 5px 15px 5px 20px;
569}
570.navbar-user-account:hover {
571 background-color: var(--link-color);
572 color: white !important;
573}
574#navbar-user-menu-logout:hover {
575 background-color: #d34444 !important;
576}
577.navbar-user-account-avatar, .search-result-item-avatar {
578 border-radius: 5px;
579 vertical-align: middle;
580 margin-bottom: 3px;
581 margin-right: 3px;
582}
583
584.search-result-item {
585 display: block;
586}
587.search-result-item-name {
588 font-weight: bold;
589}
590.search-result-item-screen-name {
591 font-weight: normal;
592 margin-left: 3px;
593}
594.search-result-item-verified::after {
595 content: "\f099";
596 color: #55acee;
597 font-family: RosettaIcons;
598 margin-left: 5px;
599}
600#search-results {
601 margin-top: 5px;
602 padding-bottom: 10px;
603 padding-top: 10px;
604 position: absolute;
605 background: var(--menu-bg);
606 border-radius: 5px;
607 color: var(--light-gray);
608 min-width: 130px;
609 z-index: 5;
610 box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
611}
612#search-results a, .navbar-new-tweet-user-search span, .search-results-title {
613 cursor: pointer;
614 padding: 5px 10px;
615}
616.search-results-title {
617 color: var(--darker-gray);
618 font-weight: bold;
619}
620#search-results a:hover, .search-result-item-active, .navbar-new-tweet-user-search span:hover {
621 background-color: var(--link-color) !important;
622 color: var(--background-color) !important;
623 cursor: pointer;
624}
625.box {
626 background-color: var(--background-color);
627 border-radius: 5px;
628 border: 1px solid var(--border);
629}
630#navbar-links {
631 width: fit-content;
632 margin-left: 27px;
633}
634.search-result-item-remove {
635 float: right;
636 color: var(--almost-black);
637 cursor: pointer;
638 position: relative;
639 bottom: 20px;
640 right: 6px;
641}
642.inbox-modal {
643 max-width: 600px !important;
644 width: 600px;
645}
646.inbox-modal hr {
647 border-color: var(--border);
648 border-bottom: none;
649}
650.inbox-buttons {
651 float: right;
652}
653.inbox-new {
654 background-color: var(--link-color) !important;
655 background-image: none !important;
656}
657.inbox-new-icon:before {
658 content: "\f035";
659 font-family: RosettaIcons;
660 margin-bottom: 2px;
661 color: var(--background-color) !important;
662 font-size: 16px;
663}
664.inbox-readall-icon:before {
665 content: "\f036";
666 font-family: RosettaIcons;
667 color: var(--almost-black);
668 font-size: 16px;
669}
670.inbox-refresh-icon:before {
671 content: "\f189";
672 font-family: RosettaIcons;
673 color: var(--almost-black);
674 font-size: 16px;
675}
676.larger {
677 font-size: 24px !important;
678}
679.inbox-message {
680 border-bottom: 1px solid var(--border);
681 padding-top: 10px;
682 cursor: pointer;
683 padding: 5px;
684 width: 585px;
685}
686.inbox-message:hover, .inbox-message-unread, .new-message-user:hover {
687 background-color: var(--active-message);
688}
689.inbox-message-avatar {
690 border-radius: 5px;
691 display: inline-block;
692 vertical-align: top;
693 margin-right: 5px;
694 margin-bottom: 5px;
695}
696.inbox-text {
697 width: 515px;
698 display: inline-block;
699 margin-bottom: 5px;
700}
701.inbox-screenname, .new-message-user-screenname {
702 direction: ltr;
703 unicode-bidi: embed;
704 font-size: 13px;
705 color: var(--light-gray);
706 text-decoration: none;
707}
708.inbox-name, .new-message-user-name {
709 font-weight: bold;
710 color: var(--almost-black);
711 font-size: 14px;
712}
713.inbox-time {
714 font-size: 13px;
715 color: var(--light-gray);
716 float: right;
717}
718.inbox-top, .modal-top {
719 position: fixed;
720 background-color: var(--background-color);
721 width: 585px;
722 padding-top: 15px;
723 margin-top: -20px;
724 z-index: 50;
725}
726.modal-top {
727 width: 495px;
728}
729.home-top {
730 width: 598px;
731}
732.inbox-message-preview {
733 color: var(--light-gray);
734 margin-bottom: 5px;
735}
736.message-element {
737 float: right;
738 width: 564px;
739 text-align: right;
740 margin-bottom: 8px;
741}
742.message-element img {
743 border-radius: 5px;
744 margin-bottom: 3px;
745 vertical-align: middle;
746}
747.message-header-avatar {
748 border-radius: 5px;
749 vertical-align: top;
750 margin-top: -2px;
751}
752.message-header-name {
753 white-space: nowrap;
754 text-overflow: ellipsis;
755 max-width: 400px;
756 overflow: hidden;
757 margin-bottom: 5px;
758}
759.message-element:not(.message-element-other) a {
760 color: var(--dark-background-color) !important;
761}
762.message-element-other a {
763 color: var(--link-color) !important;
764}
765.message-element a:hover {
766 text-decoration: underline;
767}
768.message-element .message-body {
769 text-align: left;
770 display:inline-table;
771 max-width:400px;
772 background-color: var(--link-color);
773 color: var(--background-color);
774 border-radius: 5px;
775 font-size: 14px;
776 margin: 0px;
777 padding: 5px;
778 white-space: break-spaces;
779 line-height: 1.2;
780 box-decoration-break: clone;
781 -webkit-box-decoration-break: clone;
782}
783.message-element-other {
784 text-align: left;
785 float: left;
786}
787.message-element-other .message-body {
788 background-color: #d9e3eb;
789 color: black;
790}
791.message-header-link {
792 text-align: center;
793 display: block;
794 width: fit-content;
795 margin: 0 auto;
796}
797.message-header-link:hover {
798 text-decoration: none;
799}
800.message-header-back {
801 cursor: pointer;
802 float: left;
803 margin-top: 3px;
804}
805.message-header-back:before {
806 content: "\f172";
807 color: var(--light-gray);
808 font-family: RosettaIcons;
809}
810.message-element-media {
811 margin-left: 30px;
812 margin-top: 2px;
813 cursor: pointer;
814 object-fit: cover;
815 max-width: fit-content;
816 border-radius: 5px;
817}
818.message-time {
819 color: var(--light-gray);
820 font-size: 12px;
821}
822.message-menu-open {
823 cursor: pointer;
824}
825.message-menu-open:before {
826 color: var(--background-color);
827 font-size: 12px;
828 content: "\f150";
829 font-family: RosettaIcons;
830 margin-right: 5px;
831}
832.message-element:hover .message-menu-open:before {
833 color: var(--light-gray);
834}
835.message-menu-delete {
836 cursor: pointer;
837}
838.message-menu-delete:before {
839 content: "\f154";
840 font-family: RosettaIcons;
841 color: var(--light-gray);
842 margin-right: 5px;
843}
844.message-menu {
845 position: absolute;
846 background-color: var(--background-color);
847 border: 1px solid var(--light-gray);
848 border-radius: 5px;
849 z-index: 5;
850 right: 63px;
851}
852.message-menu span {
853 color: var(--light-gray);
854 font-size: 12px;
855 font-weight: bold;
856 margin-left: 6px;
857 position: relative;
858 top: -2px;
859 text-decoration: none;
860 cursor: pointer;
861 margin-right: 20px;
862}
863.message-new {
864 position: fixed;
865 display: contents;
866}
867.messages-list {
868 margin-bottom: 20px;
869 display: flow-root;
870}
871.message-new-input, .new-message-user-search, .circle-user-search {
872 border: 1px solid var(--border);
873 resize: none;
874 border-radius: 3px;
875 width: 426px;
876 padding: 5px;
877 font-family: var(--font);
878 display: inline-block;
879 height: 22px;
880 font-size: 14px;
881 padding-right: 40px;
882 scrollbar-width: thin;
883 vertical-align: bottom;
884}
885.message-new-input {
886 width: 380px;
887}
888.message-new-media-btn {
889 cursor: pointer;
890 vertical-align: sub;
891}
892.message-new-media-btn:before {
893 content: "\f110";
894 font-family: RosettaIcons;
895 color: var(--link-color);
896 font-size: 22px;
897 margin-right: 5px;
898}
899.message-emoji-btn {
900 cursor: pointer;
901 vertical-align: sub;
902}
903.message-emoji-btn:before {
904 content: "\f033";
905 font-family: RosettaIcons;
906 color: var(--link-color);
907 font-size: 22px;
908 margin-right: 5px;
909}
910#messages {
911 cursor: pointer;
912}
913.new-name-top {
914 text-align: center;
915 width: 598px;
916}
917.new-message-group {
918 float: right;
919 margin-left: 11px;
920 margin-top: -3px;
921}
922.new-message-user-text {
923 display: inline-grid;
924 margin-left: 8px;
925 margin-top: 7px;
926}
927.new-message-user {
928 padding: 4px;
929 cursor: pointer;
930}
931.message-leave {
932 float: right;
933 cursor: pointer;
934 position: relative;
935 bottom: 38px;
936 font-size: 21px;
937 right: 25px;
938}
939.message-leave:before {
940 content: "\f154";
941 font-family: RosettaIcons;
942 color: var(--light-gray);
943 margin-right: 5px;
944}
945
946.name-top-background {
947 position: fixed;
948 background-color: var(--background-color);
949 padding-top: 15px;
950 margin-top: -20px;
951 width: 595px;
952 height: 50px
953}
954
955.name-top {
956 width: 618px;
957 background-color: rgba(0, 0, 0, 0) !important;
958}
959.navbar-new-tweet-user-search {
960 background-color: var(--background-color);
961 color: var(--almost-black);
962 padding: 5px;
963 z-index: 5
964}
965.tweet-poll {
966 margin-top: 10px;
967}
968.choice {
969 display: block;
970 margin-bottom: -12px;
971}
972.choice-bg {
973 height: 22px;
974 background-color: var(--choice-bg);
975 border-radius: 5px;
976 padding: 1px;
977}
978.choice-unselected:hover .choice-bg {
979 opacity: 0.8;
980}
981.choice-label {
982 position: relative;
983 bottom: 20px;
984 left: 8px;
985}
986.choice-selected:before {
987 content: "\f043";
988 font-family: RosettaIcons;
989 color: var(--default-text-color);
990 font-size: 13px;
991 vertical-align: baseline;
992}
993.choice-count {
994 position: relative;
995 float: right;
996 bottom: 37px;
997 right: 7px;
998}
999.poll-footer {
1000 font-size: 14px;
1001 color: var(--light-gray);
1002}
1003.choice-unselected {
1004 cursor: pointer;
1005}
1006#navbar-new-tweet-poll-btn {
1007 float: right;
1008 position: relative;
1009 cursor: pointer;
1010 bottom: 89px;
1011 left: 4px;
1012}
1013#navbar-new-tweet-poll-btn:before {
1014 color: var(--link-color);
1015 content: "\f199";
1016 font: 20px RosettaIcons;
1017}
1018#navbar-new-tweet-emoji-btn {
1019 float: right;
1020 cursor: pointer;
1021 position: relative;
1022 bottom: 64px;
1023 left: 24px;
1024}
1025#navbar-new-tweet-emoji-btn:before {
1026 color: var(--link-color);
1027 content: "\f033";
1028 font: 20px RosettaIcons;
1029}
1030.navbar-poll-question, .navbar-poll-date {
1031 border: 1px solid var(--border);
1032 border-radius: 5px;
1033 font: 16px var(--font);
1034 padding: 3px;
1035 width: 100%
1036}
1037#navbar-new-tweet-poll {
1038 position: relative;
1039 left: 39px;
1040 top: 8px;
1041 display: inline-block;
1042 color: var(--default-text-color);
1043}
1044#navbar-new-tweet-poll hr {
1045 border-color: var(--border);
1046 border-bottom: none;
1047}
1048.tweet-player {
1049 border: none;
1050 border-radius: 5px;
1051}
1052.tweet-date {
1053 color: var(--light-gray);
1054 font-size: 14px
1055}
1056
1057.tweet-reply-to {
1058 display: flow-root;
1059 font-size: 13px;
1060 color: var(--light-gray);
1061 padding-bottom: 3px;
1062}
1063
1064.tweet-footer-stat {
1065 display: grid;
1066 text-decoration: none
1067}
1068
1069.tweet-footer {
1070 border-bottom: 1px solid var(--border);
1071 border-top: 1px solid var(--border);
1072 display: inline-block;
1073 margin-bottom: 10px;
1074 margin-top: 10px;
1075 width: 100%
1076}
1077
1078.tweet-footer-stats {
1079 border-right: 1px solid var(--border);
1080 display: inline-flex;
1081 float: left;
1082 padding-bottom: 5px
1083}
1084
1085.tweet-footer-favorites {
1086 display: inline-flex;
1087 float: left;
1088 margin-left: 10px;
1089 margin-top: 12px
1090}
1091
1092.tweet-footer-stat-text {
1093 color: var(--light-gray);
1094 float: left;
1095 font-size: 10px;
1096 line-height: 16px;
1097 padding: 7px 28px 0 0;
1098 text-transform: uppercase
1099}
1100
1101.tweet-footer-stat:hover .tweet-footer-stat-text {
1102 color: var(--link-color)
1103}
1104
1105.tweet-footer-stat-count {
1106 color: var(--link-color);
1107 font-size: 18px;
1108 font-weight: 500;
1109 line-height: 20px
1110}
1111
1112.tweet-time[hidden] {
1113 display: none !important
1114}
1115
1116.tweet-header-info-main {
1117 display: inline-grid !important;
1118 width: fit-content
1119}
1120
1121.tweet-header-info-main>b {
1122 font-size: 18px;
1123 line-height: 1.25;
1124 margin-top: 3px;
1125 padding-top: 2px
1126}
1127
1128span.tweet-body-text {
1129 white-space: pre-wrap;
1130 word-break: break-word;
1131 font-family: var(--tweet-font);
1132}
1133#notification-text {
1134 font-family: var(--tweet-font);
1135}
1136
1137.tweet-body-main {
1138 display: block !important;
1139 margin-top: 10px
1140}
1141
1142.tweet-main {
1143 padding: 20px
1144}
1145
1146.emoji, .hashflag {
1147 width: 16px;
1148 height: 16px;
1149 margin-left: 2px;
1150 margin-right: 2px;
1151 vertical-align: text-top;
1152}
1153
1154.tweet-body-text-short .emoji,
1155.tweet-body-text-short .hashflag {
1156 width: 26px !important;
1157 height: 26px !important;
1158 vertical-align: text-top !important;
1159}
1160
1161.tweet-body-text-long .emoji,
1162.tweet-body-text-long .hashflag {
1163 vertical-align: text-top !important;
1164}
1165
1166#user-name .emoji,
1167#profile-name .emoji {
1168 width: 26px !important;
1169 height: 26px !important;
1170}
1171
1172.tweet-footer-favorites-img {
1173 border-radius: 5px;
1174 margin-right: 5px
1175}
1176
1177.tweet-header-follow {
1178 float: right;
1179 margin-top: 2px;
1180 padding: 9px 12px !important
1181}
1182
1183.following-item-btn {
1184 bottom: 52px;
1185 float: right;
1186 height: 40px;
1187 position: relative
1188}
1189
1190.following-item-text {
1191 bottom: 14px;
1192 display: inline-block;
1193 margin-left: 8px;
1194 position: relative;
1195 width: fit-content
1196}
1197
1198.following-item {
1199 margin-bottom: 5px
1200}
1201
1202.following-list,
1203.followers-list {
1204 padding: 10px
1205}
1206
1207.following-item-name {
1208 position: absolute;
1209 width: 300px
1210}
1211
1212.new-tweet-user-search {
1213 background-color: var(--background-color);
1214 color: var(--almost-black);
1215 padding: 5px;
1216 position: absolute;
1217 z-index: 5
1218}
1219
1220.new-tweet-user-search span {
1221 border-radius: 5px;
1222 cursor: pointer;
1223 padding: 2px
1224}
1225
1226.new-tweet-user-search span:hover,
1227.search-result-item-active {
1228 background-color: var(--link-color) !important;
1229 color: var(--background-color) !important
1230}
1231.tweet-viewer {
1232 width: 580px;
1233 max-height: unset !important;
1234}
1235.new-tweet-avatar {
1236 vertical-align: top
1237}
1238
1239.new-tweet-text {
1240 border: 1px solid var(--border);
1241 border-radius: 3px;
1242 display: inline-block;
1243 font: 18px var(--font);
1244 height: 23px;
1245 padding: 5px;
1246 padding-right: 40px;
1247 resize: none;
1248 scrollbar-width: thin;
1249 width: 469px
1250}
1251
1252.new-tweet-text::-webkit-scrollbar {
1253 width: 2px
1254}
1255
1256.new-tweet-text:focus {
1257 outline: none
1258}
1259
1260.new-tweet-text-focused {
1261 height: 100px !important
1262}
1263
1264.new-tweet {
1265 background-color: var(--new-tweet-over);
1266 border-bottom: none !important;
1267 border-radius: 0 !important;
1268 border-top: none !important;
1269 padding: 10px;
1270 width: 538px
1271}
1272.new-tweet-view {
1273 background-color: var(--new-tweet-over);
1274 border-bottom: none !important;
1275 border-radius: 0 !important;
1276 border-top: none !important;
1277 border-right: none !important;
1278 border-left: none !important;
1279 padding: 10px;
1280 width: 560px;
1281}
1282
1283
1284.new-tweet-container {
1285 background-color: var(--link-color);
1286 width: fit-content
1287}
1288
1289.new-tweet-media-div {
1290 bottom: 36px;
1291 cursor: pointer;
1292 float: right;
1293 position: relative;
1294 right: 15px
1295}
1296
1297.new-tweet-media-div-focused {
1298 bottom: 112px !important
1299}
1300
1301.new-tweet-media:before {
1302 color: var(--link-color);
1303 content: "\f159";
1304 font: 20px RosettaIcons
1305}
1306
1307.new-tweet-button {
1308 float: right;
1309 margin-top: 5px;
1310 position: relative
1311}
1312
1313.new-tweet-char {
1314 color: var(--light-gray);
1315 font-size: 12px;
1316 margin-left: -46px;
1317 margin-top: 38px;
1318 position: absolute;
1319 text-align: center;
1320 width: 43px
1321}
1322.tweet-view-self-thread-div {
1323 bottom: 35px;
1324 position: relative
1325}
1326.tweet-view-self-thread-button {
1327 font-size: 13px;
1328 margin-top: 2px;
1329 text-decoration: none
1330}
1331
1332.tweet-no-top {
1333 border-top: none !important
1334}
1335
1336.tweet-view-self-thread-line {
1337 background-color: var(--border);
1338 height: 32px;
1339 margin-top: 21px;
1340 margin-left: -34px;
1341 position: absolute;
1342 width: 2px;
1343 z-index: 1;
1344}
1345
1346.tweet-view-self-thread-line-dots {
1347 border: 2px var(--background-color) solid;
1348 display: unset;
1349 height: 2px;
1350 margin-left: -41px;
1351 margin-top: 23px;
1352 position: absolute;
1353 width: 12px;
1354 z-index: 2;
1355}
1356
1357.tweet:hover .tweet-view-self-thread-line-dots {
1358 border: 2px var(--dark-background-color) solid !important
1359}
1360.cool-header {
1361 color: var(--darker-gray);
1362 display: inline-block;
1363 font-size: 22px;
1364 font-weight: 300;
1365 margin: 0
1366}
1367
1368.cool-header {
1369 margin-bottom: 10px
1370}
1371.tweet-view {
1372 border-right: none !important;
1373 border-left: none !important;
1374}
1375.timeline-more {
1376 margin-bottom: -10px;
1377}
1378.user-preview {
1379 position: absolute;
1380 z-index: 5;
1381 background-color: var(--background-color);
1382 border: 1px solid var(--border);
1383 box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
1384 border-radius: 5px;
1385 word-break: normal;
1386 line-height: normal;
1387}
1388.tweet-media-controls, .tweet-media-data {
1389 color: var(--lil-darker-gray);
1390 font-size: 12px;
1391 margin-top: 5px;
1392}
1393.tweet-video-quality:hover,
1394.tweet-video-reload:hover {
1395 cursor: pointer;
1396 text-decoration: underline;
1397}
1398.tweet-video-quality-current:hover {
1399 cursor: auto;
1400 text-decoration: none;
1401}
1402.tweet-video-quality-current {
1403 color: var(--almost-black);
1404}
1405.tweet-warning {
1406 background-color: rgba(255, 0, 0, 0.05);
1407 border-radius: 5px;
1408 padding: 8px;
1409 margin-top: 8px;
1410 margin-bottom: 5px;
1411}
1412.message-element .emoji {
1413 vertical-align: middle;
1414}
1415.changelog-modal {
1416 max-width: 800px;
1417}
1418.changelog-modal ul {
1419 margin: 5px;
1420}
1421
1422.tweet-active:not(.tweet-view)::after {
1423 content: "•";
1424 float: right;
1425 color: #1da1f2;
1426 height: 10px;
1427 font-size: 36px;
1428 margin-top: -19px;
1429 margin-right: -8px;
1430}
1431.tweet-preload::after {
1432 color: #1df2e7 !important;
1433}
1434.tweet-thread-right {
1435 float: right;
1436 margin-right: 5px;
1437}
1438.request-item-btn {
1439 float: right;
1440 position: relative;
1441 bottom: 46px;
1442 height: 40px;
1443 margin-right: 5px;
1444}
1445.accept {
1446 color: darkgreen;
1447}
1448.decline {
1449 color: darkred;
1450}
1451
1452.tweet-interact-more-menu-copy:before {
1453 content: "\f203"
1454}
1455
1456.tweet-interact-more-menu-share:before {
1457 content: "\f185"
1458}
1459
1460.tweet-interact-more-menu-analytics:before {
1461 content: "\f200"
1462}
1463
1464.tweet-interact-more-menu-refresh:before {
1465 content: "\f303"
1466}
1467
1468.tweet-interact-more-menu-download:before {
1469 content: "\f186"
1470}
1471
1472.tweet-interact-more-menu-download-gif:before {
1473 content: "\f309"
1474}
1475
1476.tweet-interact-more-menu-delete:before {
1477 content: "\f154"
1478}
1479
1480.tweet-interact-more-menu-follow:before {
1481 content: "\f056"
1482}
1483.tweet-interact-more-menu-bookmark:before {
1484 content: "\f093"
1485}
1486.tweet-interact-more-menu-hide:before {
1487 content: "\f096"
1488}
1489
1490.tweet-interact-more-menu-feedback:before {
1491 content: "\f044"
1492}
1493.tweet-interact-more-menu-mute:before {
1494 content: "\f055"
1495}
1496.tweet-interact-more-menu-pin:before {
1497 content: "\f003"
1498}
1499.tweet-interact-more-menu-block:before {
1500 content: "\f065"
1501}
1502.tweet-interact-more-menu-newtwitter:before {
1503 content: "\f179"
1504}
1505.tweet-translate-after {
1506 color: var(--light-gray);
1507 cursor: pointer;
1508 font-size: 12px;
1509 margin-top: 1px;
1510 visibility: hidden;
1511 float: right;
1512}
1513.tweet-translate-after:hover {
1514 visibility: visible;
1515}
1516.tweet-translate-after::after {
1517 content: "\f089";
1518 font: 12px RosettaIcons;
1519 margin-left: 5px;
1520 vertical-align: text-bottom;
1521 visibility: visible;
1522}
1523.tweet-app-info > h3 {
1524 margin: 0 !important;
1525}
1526.tweet-button-group {
1527 padding: 5px;
1528}
1529.tweet-app-button {
1530 text-align: center;
1531 width: 100%;
1532 margin-bottom: 5px;
1533 display: inline-block;
1534}
1535.compact-trend {
1536 margin-bottom: 3px;
1537}
1538
1539emoji-picker {
1540 position: absolute;
1541 z-index: 201;
1542}
1543.poll-date, .navbar-poll-date {
1544 width: 50px;
1545}
1546
1547.tweet-reply-cancel:hover,
1548.tweet-quote-cancel:hover,
1549.tweet-reply-upload:hover,
1550.tweet-reply-add-emoji:hover,
1551.tweet-quote-add-emoji:hover,
1552.tweet-quote-upload:hover {
1553 cursor: pointer;
1554 text-decoration: underline
1555}
1556
1557.new-tweet-emojis {
1558 float: right;
1559 cursor: pointer;
1560 position: relative;
1561 bottom: 87px;
1562 left: 3px;
1563}
1564.new-tweet-emojis:before {
1565 color: var(--link-color);
1566 content: "\f033";
1567 font: 20px RosettaIcons;
1568}
1569.new-tweet-mentions {
1570 float: right;
1571 cursor: pointer;
1572 position: relative;
1573 bottom: 61px;
1574 left: 22px;
1575}
1576.new-tweet-mentions:before {
1577 color: var(--link-color);
1578 content: "\f050";
1579 font: 20px RosettaIcons;
1580}
1581
1582.tweet-reply-char,
1583.tweet-quote-char {
1584 color: var(--light-gray);
1585 font-size: 12px;
1586 padding: 3px;
1587 position: relative;
1588 top: -10px
1589}
1590.follows-you-label {
1591 font-size: 11px;
1592 letter-spacing: .02em;
1593 text-transform: uppercase;
1594 color: var(--darker-gray);
1595 background: rgba(0, 0, 0, 0.08);
1596 width: fit-content;
1597 padding: 3px 7px;
1598 border-radius: 5px;
1599 margin-bottom: 5px
1600}
1601.dropdown-menu {
1602 position: absolute;
1603 z-index: 5;
1604 padding: 10px 0;
1605 background: #fff;
1606 background-color: var(--menu-bg);
1607 border: 1px solid #e1e8ed;
1608 border: 0 solid rgba(0,0,0,0.25);
1609 border-radius: 4px;
1610 box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
1611 background-clip: padding-box;
1612}
1613.dropdown-menu span,
1614.dropdown-menu a {
1615 clear: both;
1616 color: var(--darker-gray);
1617 cursor: pointer;
1618 display: block;
1619 font-size: 13px;
1620 font-weight: normal;
1621 float: none;
1622 line-height: 18px;
1623 margin: 0;
1624 padding: 5px 20px;
1625 position: relative;
1626 text-shadow: none;
1627 white-space: nowrap;
1628}
1629.dropdown-menu span:hover,
1630.dropdown-menu a:hover {
1631 color: #fff !important;
1632 text-decoration: none;
1633 background-color: var(--link-color) !important;
1634}
1635.tweet-interact-retweet-menu span,
1636.tweet-interact-more-menu span {
1637 cursor: pointer;
1638}
1639
1640.tweet-interact-retweet-menu span:before,
1641.tweet-interact-more-menu span:before {
1642 margin-right: 8px !important;
1643 vertical-align: text-bottom;
1644}
1645.tweet-interact-more-menu hr {
1646 border-top: none;
1647 border-right: none;
1648 border-left: none;
1649 margin: 2px 0 6px 0;
1650 border-bottom: 1px solid var(--border);
1651}
1652#navbar-user-menu-username {
1653 color: var(--almost-black);
1654 font-weight: bolder;
1655 max-width: 100px;
1656 overflow-x: clip;
1657 text-overflow: ellipsis;
1658}
1659#navbar-user-menu-profile:hover #navbar-user-menu-username {
1660 color: white;
1661}
1662.tweet-interact-retweet-disabled:before,
1663.tweet-interact-retweet-disabled:hover,
1664.tweet-interact-retweet-disabled:hover:before {
1665 color: var(--light-gray) !important;
1666 cursor: not-allowed !important;
1667}
1668.user-item-btn {
1669 float: right;
1670 position: relative;
1671 bottom: 52px;
1672 height: 40px
1673}
1674
1675.user-item-text {
1676 width: fit-content;
1677 display: inline-block;
1678 position: relative;
1679 bottom: 14px;
1680 margin-left: 8px
1681}
1682
1683.user-item-link:hover {
1684 text-decoration: none
1685}
1686
1687.user-item {
1688 margin-bottom: 5px
1689}
1690.tweet-tombstone {
1691 background-color: var(--background-color);
1692 padding: 10px;
1693 z-index: 4;
1694 color: var(--almost-black);
1695 position: relative;
1696 border: 1px solid var(--border);
1697}
1698.tweet-card-link-thumbnail {
1699 max-width: 120px;
1700 max-height: 70px;
1701 float: left;
1702 margin-right: 10px;
1703 border-radius: 3px;
1704}
1705.tweet-card-link {
1706 display: block;
1707 color: var(--light-gray);
1708 padding: 10px;
1709 min-height: 70px;
1710 max-width: 430px;
1711 text-decoration: none !important;
1712 margin-top: 5px;
1713}
1714.tweet-card-link:hover {
1715 background-color: var(--darker-background-color);
1716}
1717.tweet-card-link-title {
1718 color: var(--almost-black);
1719 font-weight: normal;
1720 margin: 0;
1721}
1722.tweet-card-link-vanity, .tweet-card-link-description {
1723 font-size: 14px;
1724 overflow-wrap: break-word;
1725}
1726#donate-button {
1727 animation: donate 5s infinite alternate, vibrate 10s infinite linear;
1728 position: absolute;
1729 transition: 1s;
1730 word-break: keep-all;
1731}
1732@keyframes donate {
1733 20% {
1734 color: var(--link-color)
1735 }
1736}
1737@keyframes vibrate {
1738 0% {
1739 transform: translate(0, 0);
1740 }
1741 1% {
1742 transform: translate(-2px, 1px);
1743 }
1744 2% {
1745 transform: translate(2px, -1px);
1746 }
1747 3% {
1748 transform: translate(-2px, 1px);
1749 }
1750 4% {
1751 transform: translate(2px, -1px);
1752 }
1753 5%, 100% {
1754 transform: translate(0, 0);
1755 }
1756}
1757.tweet .tweet-header-name {
1758 max-width: 300px;
1759 display: inline-block;
1760 overflow: hidden;
1761 vertical-align: bottom;
1762 white-space: nowrap;
1763}
1764
1765.tweet-top-icon {
1766 font-family: RosettaIcons;
1767 margin-right: 10px;
1768 vertical-align: text-bottom;
1769}
1770.tweet-interact-views:before {
1771 content: "\f200";
1772}
1773.tweet-interact-bookmark:before {
1774 content: "\f093";
1775}
1776.user-verified::after {
1777 content: "\f099";
1778 color: #ee55a1;
1779 font-family: RosettaIcons;
1780 margin-left: 5px
1781}
1782.user-verified-blue::after {
1783 color: #55acee !important;
1784}
1785.user-verified-gray::after {
1786 color: #657480 !important;
1787}
1788.user-verified-yellow::after {
1789 color: #e5bc24 !important;
1790}
1791.user-verified-green::after {
1792 color: var(--link-color) !important;
1793}
1794.user-verified-dimden::after {
1795 background-color: #82ff9d !important;
1796 content: "DEV" !important;
1797 color: black !important;
1798 font-family: var(--font) !important;
1799 padding: 1px 6px 0px 6px;
1800 font-size: 12px;
1801 vertical-align: middle;
1802 border-radius: 50px;
1803}
1804.user-protected::after {
1805 content: "\f096";
1806 color: #ddd22b;
1807 font-family: RosettaIcons;
1808 margin-left: 5px;
1809}
1810
1811
1812.tweet-media-video-overlay {
1813 position: absolute;
1814 width: 100%;
1815 height: 100%;
1816 background: rgba(0, 0, 0, 0.5);
1817 border-radius: 5px;
1818 z-index: 1;
1819 transition: 0.2s;
1820}
1821.tweet-media-video-overlay-play {
1822 width: 75px;
1823 top: 50%;
1824 left: 50%;
1825 transform: translate(-50%, -50%);
1826 position: relative;
1827 border-radius: 50%;
1828 background-color: rgba(0, 0, 0, 0.7);
1829 border: 4px solid #1da1f2;
1830 transition: 0.2s;
1831}
1832.tweet-media-video-overlay:hover .tweet-media-video-overlay-play {
1833 border: 4px solid white;
1834 transition: 0.2s;
1835}
1836.tweet-media-video-overlay:hover {
1837 background: rgba(0, 0, 0, 0.4);
1838 transition: 0.2s;
1839}
1840.svg-play-path {
1841 fill: #1da1f2;
1842 transition: 0.2s;
1843}
1844.tweet-media-video-overlay:hover .svg-play-path {
1845 fill: white;
1846 transition: 0.2s;
1847}
1848.user-item-additional {
1849 color: var(--light-gray);
1850 font-size: 14px;
1851}
1852.show-more-button {
1853 width: 100%;
1854 padding-left: 10px !important;
1855}
1856.timeline-more {
1857 padding-left: 10px !important;
1858}
1859.user-div {
1860 max-width: 300px;
1861 overflow: hidden;
1862}
1863.tweet-limited {
1864 background-color: rgba(0, 255, 0, 0.05);
1865 border-radius: 5px;
1866 padding: 10px;
1867 margin-top: 10px;
1868 margin-bottom: 10px;
1869}
1870
1871.tweet-reply-text,
1872.tweet-quote-text {
1873 border: 1px solid var(--border);
1874 border-radius: 5px;
1875 display: inline-block;
1876 font-family: var(--font);
1877 height: 30px;
1878 min-height: 30px;
1879 padding: 5px;
1880 width: 346px;
1881 min-width: 346px;
1882 max-width: 346px;
1883 max-height: 200px;
1884}
1885.tweet-viewer-loading {
1886 text-align: center;
1887}
1888.rtl {
1889 direction: rtl;
1890}
1891.ltr {
1892 direction: ltr;
1893}
1894.tweet-card {
1895 direction: ltr;
1896}
1897.tweet-interact {
1898 margin-top: 10px;
1899 user-select: none;
1900 direction: ltr;
1901}
1902.tweet-body-quote {
1903 background-color: var(--background-color);
1904 border: 1px solid var(--border);
1905 border-radius: 5px;
1906 display: block;
1907 margin: 10px;
1908 padding: 10px;
1909 position: relative;
1910 right: 10px;
1911 text-decoration: none;
1912 direction: ltr;
1913}
1914
1915.tweet-body-quote:hover {
1916 background-color: var(--darker-background-color);
1917 text-decoration: none
1918}
1919.tweet-interact-reply[data-val="0"],
1920.tweet-interact-retweet[data-val="0"],
1921.tweet-interact-favorite[data-val="0"],
1922.tweet-interact-bookmark[data-val="0"] {
1923 color: var(--background-color);
1924}
1925
1926.tweet:hover:not(.tweet-main) {
1927 background-color: var(--dark-background-color)
1928}
1929.tweet:hover .tweet-interact-reply[data-val="0"],
1930.tweet:hover .tweet-interact-retweet[data-val="0"],
1931.tweet:hover .tweet-interact-favorite[data-val="0"],
1932.tweet:hover .tweet-interact-bookmark[data-val="0"] {
1933 color: var(--dark-background-color);
1934}
1935
1936.tweet-interact-bookmarked,
1937.tweet-interact-bookmarked:before,
1938.tweet-interact-bookmark:hover:before,
1939.tweet-interact-bookmark:hover {
1940 color: #3b918a !important
1941}
1942
1943.tweet-birdwatch {
1944 margin-top: 10px;
1945 margin-bottom: 10px;
1946}
1947
1948.tweet-birdwatch-header {
1949 background-color: var(--dark-background-color);
1950 padding: 10px;
1951 border-top-left-radius: 5px;
1952 border-top-right-radius: 5px;
1953}
1954
1955.tweet-birdwatch-body {
1956 padding: 10px;
1957}
1958
1959.tweet-birdwatch-title::before {
1960 content: "\f182";
1961 color: #ffac33;
1962 font-family: RosettaIcons;
1963 vertical-align: text-bottom;
1964 margin-right: 5px;
1965}
1966.tweet-media-cws {
1967 color: var(--cw);
1968 font-size: 12px;
1969 margin-top: 5px;
1970}
1971.tweet-quote-reply-to {
1972 display: inline-block;
1973 position: relative;
1974 bottom: 2px;
1975 overflow: hidden;
1976 text-overflow: ellipsis;
1977 white-space: nowrap;
1978}
1979.tweet-quote-reply-to::before, .tweet-time-quote::before {
1980 content: "\00b7";
1981 margin-right: 5px;
1982}
1983.tweet-player {
1984 width: 100%;
1985}
1986@media screen and (max-width: 780px) {
1987 #search-input {
1988 width: 124px;
1989 }
1990}
1991#notifications-iframe {
1992 border: none;
1993 width: 100%;
1994 height: 100%;
1995}
1996.notifications-modal {
1997 max-height: 80%;
1998 height: 100%;
1999 overflow: hidden;
2000 top: 5%;
2001}
2002
2003/* Mobile UI */
2004@media screen and (max-width: 590px) {
2005 .nav-text, #navbar-tweet-button-text {
2006 display: none;
2007 }
2008 .tweet-body {
2009 min-width: unset;
2010 }
2011 #timeline {
2012 width: 100%;
2013 overflow-x: clip;
2014 }
2015 #new-tweet-text {
2016 width: calc(100% - 88px);
2017 }
2018 #center-cell {
2019 width: 100%;
2020 }
2021 #new-tweet-container {
2022 width: 100%;
2023 border-radius: 0;
2024 }
2025 #new-tweet {
2026 border-radius: 0;
2027 }
2028 .tweet-media-element {
2029 max-width: calc(100% - 50px);
2030 }
2031 .modal .tweet-media-element {
2032 max-width: calc(100% - 170px);
2033 }
2034 #right-cell {
2035 display: none;
2036 }
2037 #center-cell {
2038 margin-top: 47px;
2039 }
2040 #timeline-type-center {
2041 border-radius: 0;
2042 border-left: none;
2043 border-right: none;
2044 margin-bottom: 8px;
2045 margin-top: 8px;
2046 padding: 5px;
2047 -webkit-appearance: none !important;
2048 -moz-appearance: none !important;
2049 -ms-appearance: none !important;
2050 -o-appearance: none !important;
2051 appearance: none !important;
2052 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) !important;
2053 background-repeat: no-repeat !important;
2054 background-position-x: 100% !important;
2055 background-position-y: 50% !important;
2056 }
2057 .tweet-interact-views {
2058 display: none !important;
2059 }
2060 #navbar-links a {
2061 padding: 13px 8px;
2062 }
2063 .modal-content {
2064 min-width: unset;
2065 margin: unset;
2066 top: 10%;
2067 }
2068 .tweet-viewer {
2069 width: calc(100% - 42px);
2070 }
2071 .new-tweet-view, .new-tweet-container {
2072 width: 100%;
2073 }
2074 .modal .new-tweet-text {
2075 width: calc(100% - 103px);
2076 }
2077 .modal .new-tweet-media-div {
2078 right: 27px;
2079 }
2080 .modal .new-tweet-emojis {
2081 left: -9px;
2082 }
2083 .modal .new-tweet-mentions {
2084 left: 11px;
2085 }
2086 .modal .tweet-header-info-main {
2087 width: 100px;
2088 }
2089 .modal .tweet-header-name-main {
2090 max-width: calc(100% - 192px);
2091 }
2092 .tweet-reply-text, .tweet-quote-text {
2093 width: 100%;
2094 min-width: unset;
2095 margin-bottom: 21px;
2096 }
2097 .name-top, .home-top {
2098 width: calc(100% - 42px);
2099 }
2100 .message-new-input {
2101 width: calc(100% - 190px);
2102 }
2103 .name-top-background {
2104 width: calc(100% - 20px);
2105 }
2106 .message-element {
2107 width: 100%;
2108 }
2109 .inbox-message {
2110 width: 100%;
2111 }
2112 .inbox-text {
2113 width: calc(100% - 64px);
2114 }
2115 .inbox-modal {
2116 width: calc(100% - 42px);
2117 }
2118 #search-input {
2119 width: 30px;
2120 }
2121 #search-input:focus {
2122 width: 120px;
2123 }
2124 body.move-navbar-to-bottom #navbar-line {
2125 display: none;
2126 }
2127 body.move-navbar-to-bottom #navbar {
2128 top: unset;
2129 bottom: 0;
2130 border-top: 1px solid rgba(0, 0, 0, 0.1);
2131 }
2132 #navbar-user-menu {
2133 position: absolute;
2134 right: 0;
2135 }
2136 body.move-navbar-to-bottom #navbar-user-menu {
2137 position: absolute;
2138 right: 0;
2139 bottom: 65px;
2140 }
2141 .tweet-interact {
2142 display: flex;
2143 }
2144 .tweet-self-thread-button.tweet-thread-right {
2145 display: none;
2146 }
2147 .tweet-interact span {
2148 margin-right: 14px;
2149 }
2150 .notifications-modal {
2151 width: calc(100% - 43px);
2152 }
2153}
2154@media screen and (max-width: 460px) {
2155 #pin-lists {
2156 display: none;
2157 }
2158}
2159@media screen and (max-width: 425px) {
2160 #pin-bookmarks {
2161 display: none;
2162 }
2163}
2164@media screen and (max-width: 370px) {
2165 #pin-profile {
2166 display: none;
2167 }
2168}