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