Add userinfo in navigation
[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 8px 0;
17         word-wrap: anywhere;
18 }
19
20 .status-content p {
21         margin: 0px;
22 }
23
24 .status-profile-img-container {
25         margin-right: 8px;
26 }
27
28 .status-profile-img {
29         height: 48px;
30         width: 48px;
31         object-fit: contain;
32         vertical-align: top;
33 }
34
35 .status {
36 }
37
38 .status a {
39         text-decoration: none;
40 }
41
42 .status-dname {
43         font-weight: 800;
44 }
45
46 .status-uname {
47         font-style: italic;
48         font-size: 10pt;
49 }
50
51 .status-emoji {
52         height: 20px;
53         margin-bottom: -4px;
54         witdth: auto;
55 }
56
57 .name-emoji {
58         height: 20px;
59         witdth: auto;
60 }
61
62 .status-action {
63         display: flex;
64         margin-top: 4px;
65 }
66
67 .status-action a {
68         display: flex;
69         margin: 0 4px;
70         width: 64px;
71         text-decoration: none;
72         color: #333333;
73 }
74
75 .status-action a:hover {
76         color: #777777;
77 }
78
79 .status-action .fa {
80         margin: 0 4px 0 0;
81 }
82
83 .status-action a.status-time {
84         width: auto;
85 }
86
87 .fa.liked {
88         color: yellow;
89 }
90
91 .fa.retweeted {
92         color: green;
93 }
94
95 .status-image,
96 .status-video {
97         max-height: 180px;
98         max-width: 220px;
99         width: auto;
100         vertical-align: bottom;
101 }
102
103 .page-title {
104         font-size: 23pt;
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: 8px 0 4px 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 .notification-like-container,
164 .notification-retweet-container {
165         display: flex;
166 }
167
168 .notification-follow-uname {
169         margin-top: 8px;
170 }
171
172 .status-reply-to {
173         vertical-align: center;
174         font-size: 10pt
175 }
176
177 .status-reply-container .fa {
178         font-size: 10pt;
179         vertical-align: sub;
180         margin-right: -2px;
181 }
182
183 .status-reply-text {
184         font-size: 10pt;
185 }
186
187 .status-reply {
188         font-size: 10pt;
189 }
190
191 .status-reply-info-divider {
192         margin: 0 4px;
193 }
194
195 .post-content-container {
196         padding-right: 8px;
197 }
198
199 .error-text {
200         margin: 8px 0;
201 }
202
203 .post-attachment-div {
204         margin: 2px 0;
205 }
206
207 .user-profile-img-container {
208         display: inline-block
209 }
210
211 .user-profile-details-container {
212         display: inline-block;
213         vertical-align: top;
214         margin: 0 4px;
215 }
216
217 .user-profile-details-container>div {
218         margin-bottom: 4px;
219 }
220
221 .user-profile-img {
222         max-height: 100px;
223         max-width: 100px;
224         object-fit: contain;
225         vertical-align: top;
226 }
227
228 .user-profile-decription {
229         margin: 4px 0;
230 }
231
232 .d-inline {
233         display: inline;
234 }
235
236 .btn-link {
237     border: none;
238     outline: none;
239     background: none;
240     cursor: pointer;
241     color: #0000EE;
242     padding: 0;
243     text-decoration: underline;
244     font-family: inherit;
245     font-size: inherit;
246 }
247
248 .status-visibility {
249         margin-left: 4px;
250         display: inline-block;
251         color: #444444;
252 }
253
254 .status-visibility span {
255         font-size: 9pt;
256         vertical-align: bottom;
257 }
258
259 .remote-link {
260         margin-left: 4px;
261         display: inline-block;
262         color: #444444;
263         text-decoration: none;
264 }
265
266 .remote-link span {
267         font-size: 9pt;
268         vertical-align: bottom;
269 }
270
271 .img-link {
272         display: inline-block;
273         position: relative;
274 }
275
276 .status-profile-img-container .img-link {
277         width: 48px;
278         overflow: hidden;
279 }
280
281 .status-nsfw-overlay {
282         height: 100%;
283         width: 100%;
284         background: black;
285         position: absolute;
286         top: 0;
287         left: 0;
288 }
289
290 .img-link:hover .status-nsfw-overlay {
291         display: none;
292 }
293
294 .status-video-container {
295         display: inline-block;
296         position: relative;
297 }
298
299 .status-video-container:hover .status-nsfw-overlay {
300         display: none;
301 }
302
303 .post-form-field>* {
304   vertical-align: middle;
305 }
306
307 .emoji {
308         min-width: 220px;
309         display: inline-block;
310         margin-bottom: 2px;
311 }
312
313 .emoji-img {
314         height: 24px;
315         width: 24px;
316         object-fit: contain;
317         vertical-align: middle;
318
319 }
320
321 .emoji-shortcode {
322         vertical-align: middle;
323         display: inline-block;
324 }
325
326 .fa {
327         font-size: 11pt !important;
328         color: #444444;
329 }
330
331 .post-form-emoji-link {
332         margin-left: 8px;
333 }
334
335 .post-form-emoji-link i {
336         font-size: 14pt !important;
337 }
338
339 .user-info {
340         margin-bottom: 8px;
341 }
342
343 .user-info-img-container {
344         display: inline-block;
345         vertical-align: top;
346 }
347
348 .user-info-img {
349         max-height: 64px;
350         max-width: 64px;
351         object-fit: contain;
352         vertical-align: middle;
353 }
354
355 .user-info-details-container {
356         display: inline-block;
357         vertical-align: middle;
358 }
359
360 .user-info-details-container>div {
361         margin-bottom: 4px;
362 }
363
364 .nav-link {
365         margin-right: 2px;
366 }
367