Tweak the CSS more because I am procrastinating.
[bloat] / static / style.css
1 .status-container-container {
2         margin: 12px 0 12px -4px;
3         padding: 4px;
4         border-left: 4px solid transparent;
5         background-color: rgba(0,0,0,0.05);
6 }
7
8 .status-container-container:target {
9         border-color: #777777;
10 }
11
12 .status-container-container.highlight {
13         background-color: #cccccc;
14 }
15
16 .status-container {
17         display: flex;
18 }
19
20 .status-content {
21         margin: 4px 0;
22         word-wrap: anywhere;
23         max-height: 600px;
24         overflow: auto;
25 }
26
27 .status-content p {
28         margin: 0px;
29 }
30
31 .status-content img,
32 .status-image,
33 .status-video {
34         max-height: 240px;
35         max-width: 280px;
36         width: auto;
37         vertical-align: bottom;
38 }
39
40 .status-media-container {
41         margin: 4px 0;
42 }
43
44 .status-profile-img-container {
45         margin-right: 8px;
46 }
47
48 .status-profile-img {
49         height: 48px;
50         width: 48px;
51         object-fit: contain;
52         vertical-align: top;
53 }
54
55 .status {
56         flex: 1;
57         overflow-x: auto;
58 }
59
60 .status-dname {
61         font-style: italic;
62         font-size: 0.8em;
63 }
64
65 .status-uname {
66         user-select: all;
67 }
68
69 .name-emoji {
70         height: 20px;
71         width: auto;
72 }
73
74 .status-action-container {
75         margin-top: 4px;
76 }
77
78 .status-action {
79         display: inline-block;
80         margin-right: 16px;
81 }
82
83 .status-action:last-child {
84         margin-right: 4px;
85 }
86
87 .status-action form {
88         display: inline-block;
89 }
90
91 .status-action a {
92         display: inline-block;
93 }
94
95 .status-action * {
96         verical-align: center;
97 }
98
99 .status-action a.status-time {
100         width: auto;
101 }
102
103 .page-title {
104         font-size: 18pt;
105 }
106
107 .post-form {
108         margin: 8px 0;
109 }
110
111 .post-form>div {
112         margin-bottom: 4px;
113 }
114
115 .signin-form {
116         margin: 8px 0;
117 }
118
119 .signin-form input {
120         margin: 4px 0;
121 }
122
123 .retweet-info {
124         margin: 0 0 2px 24px;   
125 }
126
127 .retweet-info .status-profile-img {
128         height: 24px;
129         width: 24px;
130         vertical-align: middle;
131 }
132
133 .retweet-info .status-dname{
134         margin-left: 4px
135 }
136
137 .post-content {
138         padding: 4px;
139         font-size: 11pt;
140         font-family: initial;
141         max-width: 100%;
142 }
143
144 .pagination {
145         margin: 4px;
146 }
147
148 .pagination a {
149         margin: 0 8px;
150 }
151
152 .notification-container {
153         margin: 16px 0 16px -4px;
154         padding: 0 4px;
155         border-left: 4px solid transparent;
156 }
157
158 .notification-container.unread {
159         border-color: #777777;
160 }
161
162 .notification-follow-container {
163         display: flex;
164 }
165
166 .notification-info-text span {
167         vertical-align: middle;
168 }
169
170 .notification-follow-uname {
171         margin-top: 8px;
172 }
173
174 .notification-time {
175         margin-left: 8px;
176 }
177
178 .status-reply-to {
179         display: inline-block;
180         vertical-align: center;
181 }
182
183 .status-reply-to-link {
184         font-size: 10pt
185 }
186
187 .status-reply-container .fa {
188         font-size: 10pt;
189         vertical-align: sub;
190         margin-right: -2px;
191 }
192
193 .status-reply-text {
194         font-size: 10pt;
195 }
196
197 .status-reply {
198         display: inline-block;
199 }
200
201 .status-reply-link {
202         font-size: 10pt;
203 }
204
205 .status-reply-info-divider {
206         margin: 0 4px;
207 }
208
209 .post-content-container {
210         padding-right: 8px;
211 }
212
213 .error-text {
214         margin: 8px 0;
215 }
216
217 .post-attachment-div {
218         margin: 2px 0;
219 }
220
221 .user-profile-img-container {
222         display: inline-block
223 }
224
225 .user-profile-details-container {
226         display: inline-block;
227         vertical-align: top;
228         margin: 0 4px;
229 }
230
231 .user-profile-details-container>div {
232         margin-bottom: 4px;
233 }
234
235 .user-profile-img {
236         max-height: 100px;
237         max-width: 100px;
238         object-fit: contain;
239         vertical-align: top;
240 }
241
242 .user-profile-decription {
243         margin: 4px 0;
244 }
245
246 .d-inline {
247         display: inline;
248 }
249
250 .btn-link {
251         border: none;
252         outline: none;
253         background: none;
254         cursor: pointer;
255         padding: 0;
256         font-family: inherit;
257         font-size: inherit;
258 }
259
260 a, .btn-link, .status-uname {
261         color: #464acc;
262         text-decoration: none;
263 }
264
265 a:hover,
266 .btn-link:hover {
267         opacity: 0.6;
268 }
269
270 .status-visibility {
271         margin-left: 4px;
272         display: inline-block;
273         color: #222222;
274         font-size: 8pt;
275 }
276
277 .remote-link {
278         margin-left: 4px;
279         font-size: 8pt;
280 }
281
282 .img-link {
283         display: inline-block;
284         position: relative;
285         margin: 2.5px 0;
286 }
287
288 .img-link:hover {
289         opacity: initial;
290 }
291
292 .status-profile-img-container .img-link {
293         width: 48px;
294         overflow: hidden;
295 }
296
297 .status-nsfw-overlay {
298         height: 100%;
299         width: 100%;
300         background: black;
301         position: absolute;
302         top: 0;
303         left: 0;
304 }
305
306 .img-link:hover .status-nsfw-overlay {
307         display: none;
308 }
309
310 .status-video-container {
311         display: inline-block;
312         position: relative;
313         margin: 2.5px 0;
314 }
315
316 .status-video-container:hover .status-nsfw-overlay {
317         display: none;
318 }
319
320 .post-form-field>* {
321   vertical-align: middle;
322 }
323
324 .emoji-item {
325         min-width: 220px;
326         display: inline-block;
327         margin: 4px 0;
328 }
329
330 img.emoji {
331         height: 32px;
332         object-fit: contain;
333         vertical-align: middle;
334 }
335
336 .status-dname img.emoji {
337         height: 24px;
338 }
339
340 .emoji-shortcode {
341         user-select: all;
342         vertical-align: middle;
343         display: inline-block;
344 }
345
346 .post-form-emoji-link {
347         margin-left: 4px;
348 }
349
350 .post-form-emoji-link i {
351         font-size: 14pt !important;
352 }
353
354 .post-form-title {
355         vertical-align: middle;
356 }
357
358 .user-info {
359         margin-bottom: 8px;
360         display: flex;
361         align-items: top;
362 }
363
364 .user-info-img {
365         max-height: 64px;
366         max-width: 64px;
367         object-fit: contain;
368         vertical-align: middle;
369 }
370
371 .user-info-details-container {
372         margin-left: 8px;
373 }
374
375 .user-info-details-container>div {
376         margin-bottom: 4px;
377 }
378
379 .nav-link {
380         margin-right: 2px;
381 }
382
383 .user-list-container {
384         margin: 8px 0;
385 }
386
387 .user-list-item>div {
388         display: inline-block;
389         vertical-align: top;
390         margin: 0 4px 8px 0;
391 }
392
393 #settings-form {
394         margin: 8px 0;
395 }
396
397 .settings-form-field {
398         margin: 4px 0;
399 }
400
401 .settings-form-field * {
402         vertical-align: middle;
403 }
404
405 #settings-form button[type=submit] {
406         margin-top: 8px;
407 }
408
409 #reply-popup {
410         position: absolute;
411         background: #ffffff;
412         border: 1px solid #aaaaaa;
413         padding: 4px 8px;
414         z-index: 3;
415         margin: 0;
416 }
417
418 #reply-to-popup {
419         position: absolute;
420         background: #ffffff;
421         border: 1px solid #aaaaaa;
422         padding: 4px 8px;
423         z-index: 3;
424         margin: 0;
425 }
426
427 .search-form {
428         margin: 16px 0 16px 0;
429 }
430
431 .more-container {
432         position: relative;
433         display: inline-block;
434         z-index: 100;
435 }
436
437 .more-content {
438         display: none;
439         position: absolute;
440         background-color: #ffffff;
441         padding: 2px 4px;
442         border: 1px solid #aaaaaa;
443         right: 0;
444 }
445
446 .more-container:hover .more-content {
447         display: initial;
448 }
449
450 .more-link {
451         font-size: 8pt;
452         display: block;
453         margin: 2px;
454 }
455
456 .poll-form button[type=submit] {
457         margin-top: 6px;
458 }
459
460 .poll-info {
461         margin-top: 6px;
462 }
463
464 .notification-title-container>* {
465         display: inline;
466 }
467
468 .notification-title {
469         font-size: 18pt;
470         margin-right: 8px;
471 }
472
473 .notification-refresh {
474         margin-right: 8px;
475 }
476
477 .no-data-found {
478         margin: 12px 0;
479 }
480
481 .signout {
482         display: inline;
483 }
484
485 .signin-desc {
486         margin: 8px 0 16px 0;
487 }
488
489 body {
490         background-color: #ccccd0;
491         color: #221;
492 }
493
494 .dark {
495         background-color: #222222;
496         background-image: none;
497         color: #eaeaea;
498 }
499
500 .dark a {
501         color: #81a2be;
502 }
503
504 .dark #post-content {
505         background-color: #333333;
506         border: 1px solid #444444;
507         color: #eaeaea;
508 }
509
510 .dark #reply-popup,
511 .dark #reply-to-popup {
512         background-color: #222222;
513         border-color: #444444;
514 }
515
516 .dark .status-container-container.highlight {
517         background-color: #333333;
518 }
519
520 .dark .btn-link {
521         color: #81a2be;
522 }
523
524 .dark .status-visibility {
525         color: #eaeaea;
526 }
527
528 .dark .more-content {
529         background-color: #222222;
530         border-color: #444444;
531 }