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