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