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