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