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(--darker-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 var(--background-color);
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 overflow-y: hidden;
78 white-space: nowrap;
79 color: var(--almost-black);
80}
81#user-handle {
82 margin: 0;
83 position: relative;
84 color: var(--lil-darker-gray);
85 font-size: 14px;
86 font-weight: 100;
87 left: 95px;
88 bottom: 48px;
89 width: fit-content;
90}
91#user-stats {
92 display: inline-flex;
93 padding-bottom: 7px;
94}
95.user-stat-div > h2 {
96 color: var(--lil-darker-gray);
97 font-size: 14px;
98 font-weight: 100;
99 text-transform: uppercase;
100 margin: 0 10px;
101 white-space: nowrap;
102}
103.user-stat-div > h1 {
104 margin: 0 10px;
105 font-size: 20px;
106 color: var(--link-color);
107}
108#user-info {
109 height: 5px;
110 display: block;
111 text-decoration: none;
112}
113#center-cell {
114 margin-top: 55px;
115}
116#left-cell {
117 top: 55px;
118 position: sticky;
119 height: fit-content;
120 margin-right: 10px;
121 margin-left: 10px;
122}
123#right-cell {
124 top: 55px;
125 position: sticky;
126 height: fit-content;
127 margin-left: 10px;
128 margin-right: 10px;
129}
130#settings {
131 width: 568px;
132 margin-bottom: 10px;
133 min-height: 700px;
134 padding: 10px;
135}
136#settings hr {
137 border-top: var(--border);
138 border-color: var(--border);
139}
140#settings h1 {
141 margin-bottom: 5px !important;
142}
143#settings a, #settings span, #settings p, #settings label {
144 font-size: 14px;
145}
146#settings input {
147 vertical-align: middle;
148}
149.tweet, .notification {
150 border-left: 1px solid var(--border);
151 border-right: 1px solid var(--border);
152 border-top: 1px solid var(--border);
153 background-color: white;
154 padding: 10px;
155 min-height: 50px;
156 cursor: pointer;
157}
158
159#wtf {
160 padding: 10px;
161 width: 250px;
162}
163#wtf > h1, #trends h1, #settings h1 {
164 margin: 0;
165 display: inline-block;
166 font-size: 22px;
167 color: var(--darker-gray);
168 font-weight: 300;
169}
170
171#settings h2, .help-header {
172 margin: 0;
173 display: inline-block;
174 font-size: 18px;
175 color: var(--darker-gray);
176 font-weight: 300;
177 padding-bottom: 5px;
178 padding-top: 5px;
179}
180
181#wtf-refresh, #wtf-viewall {
182 color: var(--light-gray);
183 font-size: 12px;
184 text-decoration: none;
185 cursor: pointer;
186}
187#wtf-refresh:hover, #wtf-viewall:hover {
188 text-decoration: underline;
189}
190
191.wtf-user {
192 display: inline-block;
193 margin-bottom: 5px;
194}
195.wtf-user-link {
196 text-decoration: none !important;
197}
198.wtf-user-name {
199 overflow: hidden;
200 margin-right: 5px;
201 overflow-wrap: break-word;
202}
203.wtf-user-handle {
204 overflow: hidden;
205 width: 88px;
206 height: 17px;
207 display: inline-block;
208}
209.follow, .following {
210 color: var(--almost-black);
211 padding: 4px 12px 4px 12px !important;
212}
213.follow:before {
214 color: var(--light-gray);
215 font-family: RosettaIcons;
216 content: "\f175";
217 margin-right: 7px;
218 vertical-align: text-bottom;
219}
220.following:before {
221 color: var(--link-color);
222 font-family: RosettaIcons;
223 content: "\f176";
224 margin-right: 7px;
225 vertical-align: text-bottom;
226}
227#about {
228 margin-top: 5px;
229 padding: 10px 3px;
230 font-size: 12px;
231 color: var(--light-gray);
232 padding-right: 0;
233 word-break: keep-all;
234}
235.about-links a, .about-links span {
236 color: var(--light-gray);
237 margin-right: 8px;
238}
239
240#trends {
241 margin-top: 10px;
242 padding: 10px;
243}
244.trend {
245 margin-top: 10px;
246}
247.trend-description {
248 font-size: 14px;
249 color: var(--light-gray);
250}
251.tweet-translate {
252 color: var(--link-color);
253 font-size: 13px;
254 cursor: pointer;
255 margin-top: 2px;
256}
257.tweet-translate:hover {
258 text-decoration: underline;
259}
260.tweet-header, .tweet-header-quote {
261 display: contents;
262}
263.tweet-header-info, .tweet-header-info-quote {
264 display: inline;
265 text-decoration: none;
266 position: relative;
267 bottom: 3px;
268}
269.tweet-header-info-quote { bottom: 8px !important }
270.tweet-header-info:hover {
271 text-decoration: underline;
272}
273.tweet-header-name:hover {
274 color: var(--link-color);
275}
276.tweet-header-name, .tweet-header-name-quote {
277 display: inline;
278 font-weight: bold;
279 color: var(--almost-black);
280 font-size: 14px;
281}
282.tweet-header-handle, .tweet-time, .tweet-header-handle-quote, .tweet-time-quote {
283 display: inline;
284 direction: ltr;
285 unicode-bidi: embed;
286 font-size: 13px;
287 color: var(--light-gray);
288 text-decoration: none;
289}
290.tweet-avatar-link {
291 float: left;
292 margin-right: 10px;
293}
294.tweet-avatar {
295 border-radius: 5px;
296}
297.setting {
298 margin-bottom: 5px;
299}
300.wtf-header {
301 display: flow-root;
302}
303#color-preview {
304 margin-top: 15px;
305}
306#color-preview div {
307 padding: 10px 15px;
308 display: inline-block;
309 width: fit-content;
310 border: 1px solid black;
311 margin-bottom: 10px;
312}
313#color-preview-light {
314 background-color: white;
315}
316#color-preview-dark {
317 background-color: #1b2836;
318}
319#color-preview-black {
320 background-color: black;
321}
322
323select, input, textarea {
324 color: var(--default-text-color);
325 background-color: var(--input-background);
326 border: 1px solid var(--border);
327}
328.user-stat-div:hover {
329 text-decoration: none !important;
330}
331.color-transparency {
332 width: 50px;
333}
334.color-reset {
335 float: right;
336 padding-bottom: 3px !important;
337 padding-top: 2px !important;
338}
339#tl-help {
340 color: white;
341 background-color: var(--light-gray);
342 border-radius: 50%;
343 padding: 0px 4px;
344 font-weight: bold;
345 cursor: pointer;
346 margin-left: 1px;
347 vertical-align: initial;
348}
349.help-modal > div {
350 margin-bottom: 10px;
351}
352#advanced-settings > button {
353 margin-top: 5px;
354}
355#color-preview-custom[hidden], #language-warning[hidden] {
356 display: none !important;
357}
358#language-warning {
359 display: block;
360 margin-top: 10px;
361}
362#language-warning-button {
363 color: var(--link-color);
364 cursor: pointer;
365}
366#move-navbar-to-bottom-div {
367 display: none;
368}
369/* A little smaller UI */
370@media screen and (max-width: 1195px) {
371 #wtf {
372 width: fit-content;
373 max-width: 250px;
374 }
375 .wtf-user-name, .wtf-user-handle {
376 font-size: 12px;
377 }
378 #user-banner {
379 width: 258px;
380 }
381 .user-stat-div>h2 {
382 font-size: 12px;
383 }
384 .user-stat-div>h1 {
385 font-size: 18px;
386 }
387}
388/* no right-cell */
389@media screen and (max-width: 1167px) {
390 #wtf {
391 display: none;
392 }
393 #about {
394 display: none;
395 }
396 #left-cell {
397 width: 260px;/* there's strange bug*/
398 }
399}
400/* no left-cell */
401@media screen and (max-width: 880px) {
402 #left-cell, #right-cell {
403 display: none;
404 }
405 #center-cell {
406 margin-right: auto;
407 margin-left: auto;
408 }
409}
410/* Mobile UI */
411@media screen and (max-width: 590px) {
412 #left-cell, #right-cell {
413 display: none;
414 }
415 #center-cell {
416 margin: 0 auto;
417 width: 100%;
418 margin-top: 50px;
419 }
420 #settings {
421 width: calc(100% - 40px);
422 padding: 20px;
423 }
424 #custom-css {
425 width: 100% !important
426 }
427 #move-navbar-to-bottom-div {
428 display: block;
429 }
430}