alice.mosphere.at
this repo has no description
1/* REBLOG + REPLY-TO */
2
3.status-reblog {
4 background: linear-gradient(
5 160deg,
6 var(--reblog-faded-color),
7 transparent min(160px, 50%)
8 );
9}
10.status-group {
11 background: linear-gradient(
12 160deg,
13 var(--group-faded-color),
14 transparent min(160px, 50%)
15 );
16}
17.status-followed-tags {
18 background: linear-gradient(
19 160deg,
20 var(--hashtag-faded-color),
21 transparent min(160px, 50%)
22 );
23}
24.status-reply-to {
25 background: linear-gradient(
26 160deg,
27 var(--reply-to-faded-color),
28 transparent min(160px, 50%)
29 );
30}
31:is(.status-reblog, .status-group, .status-followed-tags) .status-reply-to {
32 background: linear-gradient(
33 -20deg,
34 var(--reply-to-faded-color),
35 transparent min(160px, 50%)
36 );
37}
38.visibility-direct {
39 --yellow-stripes: repeating-linear-gradient(
40 -45deg,
41 var(--reply-to-faded-color),
42 var(--reply-to-faded-color) 10px,
43 var(--reply-to-faded-color) 10px,
44 transparent 10px,
45 transparent 20px
46 );
47 /* diagonal stripes of yellow */
48 background-image: var(--yellow-stripes);
49}
50
51/* STATUS PRE META */
52
53.status-pre-meta {
54 padding: 8px 16px 0;
55 opacity: 0.75;
56 font-size: smaller;
57 vertical-align: middle;
58 white-space: nowrap;
59 text-overflow: ellipsis;
60 overflow: hidden;
61 margin-bottom: -8px;
62}
63.status-reblog .status-pre-meta .icon {
64 color: var(--reblog-color);
65 margin-right: 4px;
66 vertical-align: text-bottom;
67}
68.status-group .status-pre-meta .icon {
69 color: var(--group-color);
70 margin-right: 4px;
71 vertical-align: text-bottom;
72}
73.status-followed-tags {
74 .status-pre-meta {
75 position: relative;
76 z-index: 1;
77 display: flex;
78 flex-wrap: wrap;
79 gap: 4px;
80 align-items: center;
81
82 .icon {
83 color: var(--hashtag-color);
84 margin-right: 4px;
85 vertical-align: text-bottom;
86 }
87 a {
88 color: var(--hashtag-text-color);
89 font-weight: bold;
90 font-size: 12px;
91 text-decoration-color: var(--hashtag-faded-color);
92 text-underline-offset: 2px;
93 text-decoration-thickness: 2px;
94 display: inline-block;
95 padding: 2px;
96 vertical-align: top;
97 text-transform: uppercase;
98 text-shadow: 0 1px var(--bg-color);
99
100 &:hover {
101 color: var(--text-color);
102 text-decoration-color: var(--hashtag-color);
103 }
104 }
105 }
106
107 .status-followed-tag-item {
108 color: var(--hashtag-text-color);
109 padding: 2px;
110 font-weight: bold;
111 font-size: 12px;
112 text-transform: uppercase;
113 margin-inline-end: 0.5em;
114 }
115}
116
117/* STATUS */
118
119.status {
120 display: flex;
121 padding: 16px;
122 line-height: 1.4;
123 align-items: flex-start;
124 position: relative;
125 font-size: var(--text-size);
126}
127.status.large {
128 --fade-in-out-bg: linear-gradient(
129 to bottom,
130 transparent,
131 var(--bg-color) 70px,
132 var(--bg-color) calc(100% - 50px),
133 transparent
134 );
135 padding-bottom: 8px;
136 background-image: var(--fade-in-out-bg);
137}
138.status.large.visibility-direct {
139 background-image: var(--fade-in-out-bg), var(--yellow-stripes);
140}
141
142.status-card-link {
143 text-decoration: none;
144 color: var(--text-color);
145}
146.status-card-link:not(
147 .truncated .status-card-link, /* parent status already truncated */
148 .status-card-link .status-card-link /* nested status cards */
149 ):has(.truncated) {
150 display: block;
151 position: relative;
152
153 &:after {
154 content: attr(data-read-more);
155 line-height: 1;
156 display: inline-block;
157 position: absolute;
158 --inset-offset: 16px;
159 inset-block-end: var(--inset-offset);
160 inset-inline-end: var(--inset-offset);
161 color: var(--text-color);
162 background-color: var(--bg-faded-color);
163 border: 1px dashed var(--link-color);
164 box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
165 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
166 padding: 0.5em 0.75em;
167 border-radius: 10em;
168 font-size: 90%;
169 white-space: nowrap;
170 transition: transform 0.2s ease-out;
171 }
172
173 &:is(:hover, :focus):after {
174 color: var(--link-color);
175 transform: translate(2px, 0);
176 }
177}
178.status-card-link:is(:hover, :focus) .status-card {
179 border-color: var(--outline-hover-color);
180 box-shadow: inset 0 0 0 4px var(--bg-faded-blur-color);
181}
182.status-card-link:is(:hover, :focus) .status-card img {
183 animation: position-object 5s ease-in-out 1s 5;
184 animation-duration: var(--anim-duration, 5s);
185}
186.status-card-link:is(:active) .status-card {
187 background-color: var(--bg-faded-color);
188}
189.status-card {
190 font-size: calc(var(--text-size) * 0.9);
191 margin: 1em 0 0;
192 border-radius: 16px;
193 padding: 12px;
194 border: 1px solid var(--outline-color);
195 background-color: var(--bg-color);
196 box-shadow: inset 0 0 4px var(--outline-color);
197 /* box-shadow: inset 0 0 0 2px var(--bg-faded-color); */
198 /* filter: drop-shadow(0 2px 4px var(--bg-faded-color)); */
199}
200.status-card:has(.status-badge:not(:empty)) {
201 border-top-right-radius: 8px;
202}
203.status-card > * {
204 pointer-events: none;
205}
206.status-card:not(.status-carousel .status)
207 :is(.content, .poll, .media-container) {
208 max-height: 160px !important;
209 overflow: clip;
210}
211.status.small:not(.status-carousel .status, .status.large .status)
212 .status-card
213 :is(.content, .poll, .media-container:not(.media-gt2)) {
214 max-height: 80px !important;
215}
216.status.large .status-card :is(.content, .poll, .media-container) {
217 max-height: 80vh !important;
218}
219.status-card :is(.content, .poll, .media-container) {
220 font-size: inherit !important;
221}
222.status-card :is(.content.truncated, .poll, .media-container.truncated) {
223 /* font-size: inherit !important; */
224 mask-image: linear-gradient(to bottom, #000 80px, transparent);
225}
226.status.small
227 .status-card
228 :is(.content.truncated, .poll, .media-container.truncated) {
229 mask-image: linear-gradient(to bottom, #000 40px, transparent);
230}
231.status-card .card {
232 display: none;
233}
234.timeline-deck .status-card .content.truncated:after {
235 /* Don't show "Read more" in status cards */
236 content: none !important;
237}
238
239@keyframes skeleton-breathe {
240 0% {
241 opacity: 1;
242 }
243 40% {
244 opacity: 0.4;
245 }
246 100% {
247 opacity: 1;
248 }
249}
250.status.skeleton {
251 color: var(--outline-color);
252 animation: skeleton-breathe 6s linear infinite;
253 user-select: none;
254 pointer-events: none;
255 contain: layout;
256 text-rendering: optimizeSpeed;
257}
258.status.skeleton > .avatar {
259 background-color: var(--outline-color);
260}
261
262.status.filtered {
263 padding-block: 12px;
264 display: flex;
265 gap: 8px;
266 align-items: center;
267
268 .status-carousel & {
269 padding: 16px 16px 16px 24px;
270 }
271}
272.status.filtered .status-filtered-info {
273 pointer-events: none;
274 flex-grow: 1;
275 font-size: 90%;
276 white-space: nowrap;
277 overflow: hidden;
278 text-overflow: ellipsis;
279 mask-image: linear-gradient(to right, black 90%, transparent);
280 position: relative;
281}
282.status.filtered .avatar {
283 opacity: 0.5;
284 transition: opacity 0.7s ease-in;
285}
286.status.filtered:is(:hover, :focus, :active) .avatar {
287 opacity: 1;
288}
289.status.filtered :is(.status-filtered-info-1, .status-filtered-info-2) {
290 transition: all 0.2s ease-out;
291}
292.status.filtered:hover :is(.status-filtered-info-1, .status-filtered-info-2) {
293 transition-delay: 0.5s;
294}
295.status.filtered .status-filtered-info-1 {
296 opacity: 0.5;
297}
298.status.filtered:is(:hover, :focus, :active) .status-filtered-info-1 {
299 opacity: 0;
300}
301.status.filtered .status-filtered-info-2 {
302 opacity: 0;
303 transform: translateX(8px);
304 position: absolute;
305 left: 0;
306}
307.status.filtered:is(:hover, :focus, :active) .status-filtered-info-2 {
308 opacity: 0.75;
309 transform: translateX(0);
310}
311
312.status.compact-thread {
313 display: flex;
314 gap: 8px;
315 padding-block: 8px;
316}
317.status.compact-thread .status-thread-badge {
318 flex-shrink: 0;
319 min-width: 50px;
320 justify-content: center;
321}
322.status.compact-thread .content-compact {
323 overflow: hidden;
324 display: -webkit-box;
325 display: box;
326 -webkit-box-orient: vertical;
327 box-orient: vertical;
328 -webkit-line-clamp: 2;
329 line-clamp: 2;
330 font-size: 90%;
331}
332
333.status .container {
334 flex-grow: 1;
335 min-width: 0;
336}
337.status:not(.small) > .container {
338 padding-left: 12px;
339}
340
341.status > .container > .meta {
342 display: flex;
343 gap: 4px;
344 /* justify-content: space-between; */
345 white-space: nowrap;
346}
347.status.small > .container > .meta {
348 margin-bottom: 4px;
349}
350.status > .container > .meta > * {
351 min-width: 0;
352 overflow: hidden;
353 /* text-overflow: ellipsis; */
354}
355.status > .container > .meta .meta-name {
356 mask-image: linear-gradient(to left, transparent, black 16px);
357 flex-grow: 1;
358}
359.status.large > .container > .meta {
360 min-height: 50px;
361}
362.status > .container > .meta .arrow {
363 color: var(--reply-to-color);
364 vertical-align: middle;
365}
366.status > .container > .meta :is(.time, .edited) {
367 color: inherit;
368 text-align: end;
369 opacity: 0.5;
370 text-decoration: none;
371 flex-shrink: 0;
372 margin-left: 4px;
373 white-space: nowrap;
374}
375.status > .container > .meta a.time {
376 position: relative;
377 overflow: visible;
378}
379.status > .container > .meta a.time:is(:hover, :focus) {
380 text-decoration: underline;
381}
382.status > .container > .meta a.time:active,
383.status > .container > .meta a.time.is-open {
384 text-decoration: none;
385 opacity: 1;
386}
387.status > .container > .meta a.time:after {
388 content: '';
389 position: absolute;
390 inset: -16px -16px -8px;
391}
392.status > .container > .meta .reply-to {
393 opacity: 0.5;
394 font-size: smaller;
395}
396
397.status-reply-badge {
398 display: inline-flex;
399 margin: 2px 0 2px 4px;
400 gap: 4px;
401 align-items: center;
402 vertical-align: middle;
403}
404.status-reply-badge .icon {
405 color: var(--reply-to-color);
406}
407.status-thread-badge {
408 vertical-align: middle;
409 display: inline-flex;
410 margin: 2px 0;
411 gap: 4px;
412 align-items: center;
413 color: var(--reply-to-text-color);
414 background: var(--bg-color);
415 border: 1px solid var(--reply-to-color);
416 border-radius: 4px;
417 padding: 4px;
418 font-size: 10px;
419 line-height: 1;
420 text-transform: uppercase;
421 opacity: 0.75;
422 background-image: repeating-linear-gradient(
423 -70deg,
424 transparent,
425 transparent 3px,
426 var(--reply-to-faded-color) 3px,
427 var(--reply-to-faded-color) 4px
428 );
429 font-weight: bold;
430}
431.status-direct-badge {
432 vertical-align: middle;
433 display: inline-flex;
434 margin: 2px 0;
435 gap: 4px;
436 align-items: center;
437 color: var(--reply-to-text-color);
438 background-color: var(--bg-color);
439 border: 1px solid var(--reply-to-text-color);
440 border-radius: 4px;
441 padding: 4px;
442 font-size: 10px;
443 line-height: 1;
444 text-transform: uppercase;
445 opacity: 0.75;
446 font-weight: bold;
447 box-shadow: inset 0 0 0 1px var(--reply-to-color);
448}
449.status-filtered-badge {
450 flex-shrink: 0;
451 color: var(--text-insignificant-color);
452 /* background: var(--bg-faded-color); */
453 /* border: var(--hairline-width) solid var(--bg-color); */
454 border: var(--hairline-width) dashed var(--text-insignificant-color);
455 border-radius: 4px;
456 padding: 4px;
457 font-size: 10px;
458 line-height: 1;
459 text-transform: uppercase;
460 font-weight: bold;
461 vertical-align: middle;
462 display: inline-block;
463}
464.status-filtered-badge.badge-meta {
465 display: inline-flex;
466 flex-direction: column;
467 position: relative;
468 top: calc((9px + 2px) / 2 * -1);
469 min-width: 50px;
470 text-align: center;
471}
472.status-filtered-badge.clickable:hover {
473 cursor: pointer;
474 color: var(--text-color);
475 border-color: var(--text-color);
476 background: var(--bg-color);
477}
478.status-filtered-badge.badge-meta > span:first-child {
479 white-space: nowrap;
480}
481.status-filtered-badge.badge-meta > span + span {
482 display: block;
483 font-size: 9px;
484 font-weight: normal;
485 text-transform: none;
486 white-space: nowrap;
487 text-overflow: ellipsis;
488 overflow: hidden;
489 position: absolute;
490 width: 100%;
491 top: calc(100% + 2px);
492 left: 0;
493 text-align: center;
494}
495
496.status.large > .container > .content-container {
497 margin-left: calc(-50px - 16px);
498 padding-top: 10px;
499 padding-bottom: 10px;
500}
501
502.status
503 .content-container.has-spoiler
504 :is(.spoiler-button, .spoiler-media-button):not([hidden]) {
505 margin: 4px 0;
506 font-size: 90%;
507 border: 1px dashed var(--button-bg-color);
508 display: flex;
509 gap: 4px;
510 align-items: center;
511}
512.status .content-container.has-spoiler:not(.show-spoiler) .spoiler-button {
513 ~ *:not(
514 .content.truncated,
515 .media-container,
516 .card,
517 .media-figure-multiple,
518 .spoiler-media-button
519 ),
520 ~ .card .meta-container {
521 /* filter: blur(5px) invert(0.5);
522 image-rendering: crisp-edges;
523 image-rendering: pixelated; */
524 opacity: 0.2;
525 text-decoration-thickness: 1.5em;
526 text-decoration-line: line-through;
527 text-rendering: optimizeSpeed;
528 pointer-events: none;
529 user-select: none;
530 /* contain: layout; */
531 /* transform: scale(0.97);
532 transition: transform 0.1s ease-in-out; */
533
534 * {
535 text-decoration-color: inherit;
536 text-decoration-thickness: 1.5em;
537 text-decoration-line: line-through;
538 text-rendering: optimizeSpeed;
539 }
540
541 img {
542 filter: invert(0.5);
543 background-color: black;
544 }
545 }
546
547 ~ .content.truncated {
548 opacity: 1;
549
550 > * {
551 opacity: 0.2;
552 text-decoration-thickness: 1.5em;
553 text-decoration-line: line-through;
554 text-rendering: optimizeSpeed;
555 pointer-events: none;
556 user-select: none;
557
558 * {
559 text-decoration-color: inherit;
560 text-decoration-thickness: 1.5em;
561 text-decoration-line: line-through;
562 text-rendering: optimizeSpeed;
563 }
564 }
565 }
566
567 /* ~ :is(.media-container, .media-figure-multiple) .media > *, */
568 ~ .card .card-image > img {
569 display: none;
570 /* filter: blur(32px);
571 opacity: 0;
572 image-rendering: crisp-edges;
573 image-rendering: pixelated;
574 animation: none !important; */
575 }
576}
577.status .content-container.has-spoiler:not(.show-media) .spoiler-media-button {
578 ~ :is(.media-container, .media-figure-multiple) figcaption {
579 /* filter: blur(5px) invert(0.5);
580 image-rendering: crisp-edges;
581 image-rendering: pixelated; */
582 opacity: 0.2;
583 color: inherit;
584 text-decoration-thickness: 1.5em;
585 text-decoration-line: line-through;
586 text-rendering: optimizeSpeed;
587 pointer-events: none;
588 user-select: none;
589 /* contain: layout; */
590 /* transform: scale(0.97);
591 transition: transform 0.1s ease-in-out; */
592
593 * {
594 text-decoration-thickness: 1.5em;
595 text-decoration-line: line-through;
596 text-rendering: optimizeSpeed;
597 }
598
599 img {
600 opacity: 0;
601 }
602 }
603
604 ~ :is(.media-container, .media-figure-multiple) .media {
605 background-image: radial-gradient(
606 circle at 50% 50%,
607 var(--average-color, var(--bg-faded-color)),
608 var(--bg-color) 20em
609 );
610
611 > *:not(.media-play, .alt-badge) {
612 /* display: none; */
613 /* filter: blur(32px); */
614 opacity: 0;
615 image-rendering: crisp-edges;
616 image-rendering: pixelated;
617 animation: none !important;
618 }
619 }
620}
621.status
622 .content-container.show-spoiler
623 :is(.spoiler-button, .spoiler-media-button).spoiling {
624 border-style: dotted;
625}
626
627.status .content-container .spoiler-divider {
628 display: flex;
629 align-items: center;
630 gap: 4px;
631 color: var(--text-insignificant-color);
632 text-transform: uppercase;
633 font-size: 0.8em;
634 margin-top: 0.25em;
635 margin-bottom: 1em;
636 padding-block: 0.25em;
637 border-bottom: 1px dashed var(--divider-color);
638}
639
640.status .content-comment-hint {
641 margin-top: 0.25em;
642 font-size: 90%;
643 display: flex;
644 gap: 4px;
645 align-items: center;
646}
647
648.status.compact-thread .spoiler-badge {
649 font-size: smaller;
650 color: var(--button-bg-color);
651 border: 1px dashed var(--button-bg-color);
652 padding: 2px 4px;
653 border-radius: 16px;
654 display: inline-flex;
655 margin: 4px;
656 align-items: center;
657 justify-content: center;
658 background: var(--bg-faded-color);
659}
660
661.timeline-deck .status .content {
662 max-height: 50vh;
663 max-height: 50dvh;
664 overflow: clip;
665 position: relative;
666}
667.timeline-deck
668 .status-reblog:not(.status-carousel .status-reblog)
669 .status
670 .content {
671 /* Deprioritise long-form boosts */
672 max-height: 40vh;
673 max-height: 40dvh;
674}
675.timeline-deck .status:not(.truncated .status) .content.truncated {
676 mask-image: linear-gradient(
677 to top,
678 transparent,
679 rgba(0, 0, 0, 0.5) 1em,
680 black 1.5em
681 );
682}
683.timeline-deck .status:not(.truncated .status) .content.truncated:after {
684 content: attr(data-read-more);
685 line-height: 1;
686 display: inline-block;
687 position: absolute;
688 inset-block-end: 1.5em;
689 left: 45%;
690 transform: translateX(-50%);
691 color: var(--text-color);
692 background-color: var(--bg-faded-color);
693 border: 1px dashed var(--link-color);
694 padding: 0.75em 1em;
695 border-radius: 10em;
696 font-size: 90%;
697 white-space: nowrap;
698 box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
699 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
700 transition: transform 0.5s ease-in-out;
701}
702.timeline-deck .status .content.truncated:hover:after {
703 color: var(--link-color);
704 transform: translateX(-50%) translateY(-2px) scale(1.01);
705}
706.timeline-deck .status .content.truncated ~ .card {
707 display: none;
708}
709.status .content .inner-content a:not(.mention, .has-url-text) {
710 color: var(--link-text-color);
711}
712.status
713 .content
714 .inner-content
715 a:not(.mention, .has-url-text):is(:hover, :focus) {
716 color: var(--text-color);
717 text-decoration-color: var(--link-color);
718}
719.status .content :is(.h-card, .mention) {
720 unicode-bidi: isolate;
721}
722.status .spoiler-content > *,
723.status .content .inner-content > * {
724 unicode-bidi: plaintext;
725}
726.status .content p {
727 /* 12px = 75% of 16px */
728 margin-block: min(0.75em, 12px);
729 white-space: pre-wrap;
730 tab-size: 2;
731 text-wrap: pretty;
732}
733.status-card .content p {
734 margin-block: min(0.25em, 4px);
735}
736.status .content p:first-child {
737 margin-block-start: 0;
738}
739.status .content p:last-child {
740 margin-block-end: 0;
741}
742.status .content blockquote {
743 margin-block: min(0.75em, 12px);
744 margin-inline: 0;
745 padding-block: 0;
746 padding-inline: 12px 0;
747 /* border-left: 4px solid var(--link-faded-color); */
748 position: relative;
749
750 &:before {
751 position: absolute;
752 content: '';
753 width: 3px;
754 background-color: var(--link-faded-color);
755 inset-block: 0;
756 inset-inline-start: 0;
757 border-radius: 9999px;
758 }
759}
760.status .content > :is(ul, ol),
761.status .content > div > :is(ul, ol) {
762 margin-block: min(0.75em, 12px);
763 margin-inline: 0;
764 padding-inline-start: 1.5em;
765}
766.status .content > :is(ul, ol) li > :is(ul, ol),
767.status .content > div > :is(ul, ol) li > :is(ul, ol) {
768 padding-inline-start: 1.5em;
769}
770.status .content ul {
771 list-style-type: disc;
772}
773.status .content :is(strong, b) {
774 font-weight: 600;
775}
776.status .content .invisible {
777 display: none;
778}
779.status .content .ellipsis::after {
780 content: '…';
781}
782.status.large .content:not(.content .content) {
783 font-size: 150%;
784 font-size: min(calc(100% + 50% / var(--content-text-weight)), 150%);
785}
786.status.large .poll,
787.status.large .actions {
788 font-size: 125%;
789 font-size: calc(100% + 25% / var(--content-text-weight));
790}
791
792/* MEDIA */
793
794.status .media-container {
795 margin-top: 8px;
796 display: grid;
797 grid-template-columns: 1fr 1fr;
798 grid-auto-rows: 1fr;
799 gap: 2px;
800 /* height: 160px; */
801 min-height: 88px;
802 height: auto;
803 max-height: max(160px, 33vh);
804}
805.status .media-container.media-eq1 {
806 display: flex;
807 /* min-height: 0 !important; */
808 max-height: none !important;
809}
810.status-carousel .status .media-container:not(.status-card .media-container) {
811 margin-inline: -16px;
812 max-width: calc(100% + 16px + 16px) !important;
813
814 figure:before {
815 content: '';
816 display: block;
817 /* padding (16px) - gap (4px) */
818 flex-basis: calc(16px - 4px);
819 }
820
821 figure figcaption {
822 padding-inline: 16px !important;
823 }
824
825 &:not(.media-figure-multiple .media-container) {
826 margin-bottom: -16px;
827
828 &.media-eq1:not(:has(figure)) {
829 text-align: center;
830 background-color: var(--img-bg-color);
831 }
832 }
833
834 .media {
835 --media-radius: 0;
836 --media-radius-inner: 0;
837 box-sizing: border-box;
838 }
839}
840.status:not(.large):not(.status-carousel .status)
841 .media-container.media-eq1:has([data-orientation='portrait']) {
842 width: 85%;
843 min-width: 160px;
844 max-height: 200px;
845}
846.status .media-container.media-gt2 {
847 /* height: 200px; */
848 max-height: max(200px, 40vh);
849}
850.status.medium
851 .content
852 ~ *
853 .media-container:not(.status-card .media-container):is(
854 .media-eq2,
855 .media-gt2
856 ),
857.status.medium
858 .content
859 ~ .media-container:not(.status-card .media-container):is(
860 .media-eq2,
861 .media-gt2
862 ) {
863 /* 50px = avatar size */
864 margin-left: calc(-1 * ((50px / 2)));
865 /*
866 outer padding = 16px
867 gap = 12px
868 so... 16 - 12 = 4
869 */
870 margin-right: -4px;
871}
872.status.large :is(.media-container, .media-container.media-gt2) {
873 height: auto;
874 /* min-height: 160px; */
875 max-height: 60vh;
876}
877.status .media-container .media {
878 box-sizing: content-box;
879 --media-border-width: 1px;
880 --media-radius: 16px;
881 --media-radius-inner: 4px;
882 border-radius: var(--media-radius);
883 overflow: hidden;
884 min-height: 80px;
885 border: var(--media-border-width) solid var(--outline-color);
886 vertical-align: top;
887
888 &:not(.media-audio) {
889 background-color: var(--average-color, var(--bg-faded-color));
890 background-clip: padding-box;
891 }
892}
893.status .media-container:not(.media-eq1) .media {
894 aspect-ratio: auto !important;
895}
896.status .media-container.media-eq1 {
897 width: auto !important;
898 max-width: 100%;
899 display: block;
900
901 figure {
902 margin: 0;
903 padding: 0;
904 display: flex;
905 flex-wrap: wrap;
906 /* align-items: flex-end; */
907 column-gap: 4px;
908
909 figcaption {
910 align-self: flex-end;
911 padding: 4px;
912 font-size: 90%;
913 color: var(--text-insignificant-color);
914 line-height: 1.2;
915 cursor: pointer;
916 white-space: pre-line;
917 flex-basis: 15em;
918 flex-grow: 1;
919 text-wrap: pretty;
920 }
921 }
922
923 &:hover figure figcaption {
924 color: var(--text-color);
925 }
926}
927.status .media-container.media-eq1 .media {
928 display: inline-block;
929 max-width: 100% !important;
930 min-width: 88px;
931 /* width: auto; */
932 min-height: 88px;
933 /* --maxAspectHeight: max(160px, 33vh);
934 --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
935 width: min(var(--aspectWidth), var(--width), 100%);
936 max-height: min(var(--height), 33vh);
937}
938.status .media-container.media-eq1 .media[data-orientation='portrait'] {
939 /* width: auto;
940 height: min(var(--height), 45vh);
941 max-height: none; */
942 max-height: min(var(--height), 45vh);
943}
944.status.large .media-container.media-eq1 {
945 max-height: min(var(--height), 60vh);
946
947 .media-gif.media-contain {
948 border-radius: 2px;
949 }
950}
951.status.large
952 .media-container:not(.status-card .media-container).media-eq1
953 .media {
954 width: min(var(--width), 100%);
955 max-height: min(var(--height), 80vh);
956}
957/* .status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
958 height: min(var(--height), 60vh);
959} */
960.status-carousel .status .media-container.media-eq1 .media {
961 width: min(var(--width), 100%);
962 height: auto;
963 max-height: 60vh;
964}
965.status.status-card .media-container.media-eq1 .media {
966 max-height: 160px;
967 width: auto;
968 max-width: min(var(--width), 100%);
969}
970/* Special media borders */
971.status .media-container.media-eq2 .media:first-of-type {
972 border-radius: var(--media-radius) var(--media-radius-inner)
973 var(--media-radius-inner) var(--media-radius);
974}
975.status .media-container.media-eq2 .media:last-of-type {
976 border-radius: var(--media-radius-inner) var(--media-radius)
977 var(--media-radius) var(--media-radius-inner);
978}
979.status .media-container.media-eq3 .media:first-of-type {
980 border-radius: var(--media-radius) var(--media-radius-inner)
981 var(--media-radius-inner) var(--media-radius);
982}
983.status .media-container.media-eq3 .media:nth-of-type(2) {
984 border-radius: var(--media-radius-inner) var(--media-radius)
985 var(--media-radius-inner) var(--media-radius-inner);
986}
987.status .media-container.media-eq3 .media:last-of-type {
988 border-radius: var(--media-radius-inner) var(--media-radius-inner)
989 var(--media-radius) var(--media-radius-inner);
990}
991.status .media-container.media-eq4 .media:first-of-type {
992 border-radius: var(--media-radius) var(--media-radius-inner)
993 var(--media-radius-inner) var(--media-radius-inner);
994}
995.status .media-container.media-eq4 .media:nth-of-type(2) {
996 border-radius: var(--media-radius-inner) var(--media-radius)
997 var(--media-radius-inner) var(--media-radius-inner);
998}
999.status .media-container.media-eq4 .media:nth-of-type(3) {
1000 border-radius: var(--media-radius-inner) var(--media-radius-inner)
1001 var(--media-radius-inner) var(--media-radius);
1002}
1003.status .media-container.media-eq4 .media:last-of-type {
1004 border-radius: var(--media-radius-inner) var(--media-radius-inner)
1005 var(--media-radius) var(--media-radius-inner);
1006}
1007.status .media:only-child {
1008 grid-area: span 2 / span 2;
1009}
1010.status:not(.large) .media:only-child {
1011 max-width: 480px;
1012}
1013.status.large .media-container:not(.media-eq1) .media:only-child {
1014 display: inline-block;
1015 min-width: 160px;
1016 min-height: 160px;
1017 width: fit-content;
1018}
1019.status .media:first-child:nth-last-child(3) {
1020 grid-area: span 2;
1021}
1022
1023.status:not(.large) .media-container.media-gt4 .media:last-child {
1024 position: relative;
1025}
1026.status:not(.large) .media-container.media-gt4 .media:last-child:after {
1027 content: '4+';
1028 position: absolute;
1029 inset: 0;
1030 display: flex;
1031 place-content: center;
1032 place-items: center;
1033 background-color: var(--bg-faded-blur-color);
1034}
1035
1036.status .media:is(:hover, :focus) {
1037 border-color: var(--outline-hover-color);
1038}
1039.status .media:active:not(:has(button:active)) {
1040 filter: brightness(0.8);
1041 transform: scale(0.99);
1042}
1043.status .media :is(img, video) {
1044 width: 100%;
1045 height: 100%;
1046 object-fit: cover;
1047 vertical-align: middle;
1048}
1049:is(.status, .media-post) .media {
1050 cursor: pointer;
1051
1052 &[data-has-alt] {
1053 position: relative;
1054
1055 .alt-badge {
1056 position: absolute;
1057 bottom: 8px;
1058 left: 8px;
1059
1060 &:before {
1061 content: '';
1062 position: absolute;
1063 inset: -12px;
1064 }
1065 }
1066 }
1067}
1068.status .media img:is(:hover, :focus),
1069a:focus-visible .status .media img {
1070 animation: position-object 5s ease-in-out 1s 5;
1071 animation-duration: var(--anim-duration, 5s);
1072}
1073body:has(#modal-container .carousel) .status .media img:hover {
1074 animation: none;
1075}
1076.status .media .video-container,
1077.status .media video {
1078 width: 100%;
1079 height: 100%;
1080 object-fit: scale-down;
1081 /* border-radius: calc(var(--media-radius) - var(--media-border-width)); */
1082 border-radius: inherit;
1083}
1084.status :is(.media-video, .media-audio, .media-gif) {
1085 position: relative;
1086 background-clip: padding-box;
1087}
1088:is(.status, .media-post) :is(.media-video, .media-audio) .media-play {
1089 pointer-events: none;
1090 width: 44px;
1091 height: 44px;
1092 position: absolute;
1093 left: 50%;
1094 top: 50%;
1095 transform: translate(-50%, -50%);
1096 color: var(--media-fg-color);
1097 background-color: var(--media-bg-color);
1098 box-shadow: inset 0 0 0 2px var(--media-outline-color);
1099 display: flex;
1100 place-content: center;
1101 place-items: center;
1102 border-radius: 70px;
1103 transition: transform 0.2s ease-in-out;
1104}
1105:is(.status, .media-post)
1106 :is(.media-video, .media-audio):hover:not(:active)
1107 .media-play {
1108 transform: translate(-50%, -50%) scale(1.1);
1109}
1110:is(.status, .media-post)
1111 :is(.media-video, .media-audio)[data-formatted-duration]:after {
1112 font-size: 12px;
1113 pointer-events: none;
1114 content: attr(data-formatted-duration);
1115 position: absolute;
1116 bottom: 8px;
1117 right: 8px;
1118 color: var(--media-fg-color);
1119 background-color: var(--media-bg-color);
1120 border: var(--hairline-width) solid var(--media-outline-color);
1121 border-radius: 4px;
1122 padding: 0 4px;
1123}
1124:is(.status, .media-post) .media-audio[data-formatted-duration]:after {
1125 content: '♬ ' attr(data-formatted-duration);
1126}
1127:is(.status, .media-post) .media-gif[data-label]:not(:hover):after {
1128 font-size: 12px;
1129 font-weight: bold;
1130 pointer-events: none;
1131 content: attr(data-label);
1132 position: absolute;
1133 bottom: 8px;
1134 right: 8px;
1135 color: var(--media-fg-color);
1136 background-color: var(--media-bg-color);
1137 border: var(--hairline-width) solid var(--media-outline-color);
1138 border-radius: 4px;
1139 padding: 0 4px;
1140}
1141.media-gif {
1142 position: relative;
1143
1144 &:before {
1145 content: '';
1146 position: absolute;
1147 top: auto !important;
1148 bottom: 0;
1149 left: 0;
1150 right: 0;
1151 height: 2px;
1152 background-color: var(--media-outline-color);
1153 transform: translateX(calc(var(--progress, 0%) - 100%));
1154 border-radius: 0 !important;
1155 border: 0 !important;
1156 border-right: 1px solid var(--media-fg-color) !important;
1157 transition: transform 0.15s linear;
1158 }
1159 &:before {
1160 height: 3px;
1161 }
1162}
1163.status .media-gif video {
1164 object-fit: cover;
1165 pointer-events: none;
1166}
1167.status .media-contain {
1168 min-width: 160px;
1169 width: fit-content;
1170}
1171.status .media-contain video {
1172 object-fit: scale-down !important;
1173}
1174.status .media-eq1 .media-hover-animate {
1175 transition: border-radius 0.15s ease-out;
1176 transition-delay: 0.15s;
1177
1178 &:hover {
1179 transition-delay: 0;
1180 border-radius: 2px;
1181 }
1182}
1183/* .status .media-audio {
1184 border: 0;
1185 min-height: 0;
1186}
1187.status .media-audio audio {
1188 width: 100%;
1189} */
1190:is(.status, .media-post) .media-audio {
1191 width: 100%;
1192 height: 100%;
1193 min-height: 88px;
1194 background-image: radial-gradient(
1195 circle at center center,
1196 transparent,
1197 var(--bg-faded-color)
1198 ),
1199 repeating-radial-gradient(
1200 circle at center center,
1201 transparent,
1202 var(--bg-faded-color) 16px
1203 );
1204 background-blend-mode: multiply;
1205}
1206
1207.status:not(.large) .hashtag-stuffing {
1208 opacity: 0.75;
1209 transition: opacity 0.2s ease-in-out;
1210}
1211.status:not(.large) .hashtag-stuffing:is(:hover, :focus, :focus-within) {
1212 opacity: 1;
1213}
1214.status:not(.large) .hashtag-stuffing {
1215 white-space: nowrap;
1216 overflow: hidden;
1217 text-overflow: ellipsis;
1218 max-width: 100%;
1219
1220 /* Convert breaks to spaces */
1221 br {
1222 display: none;
1223
1224 + * {
1225 margin-left: 1ex;
1226 }
1227 }
1228}
1229.status:not(.large) .hashtag-stuffing:first-child {
1230 display: -webkit-box;
1231 -webkit-line-clamp: 3;
1232 -webkit-box-orient: vertical;
1233 white-space: normal;
1234}
1235
1236.media-figure-multiple {
1237 margin: 0;
1238 padding: 0;
1239
1240 figcaption {
1241 padding: 4px;
1242 font-size: 90%;
1243 color: var(--text-insignificant-color);
1244 line-height: 1.2;
1245 white-space: nowrap;
1246 overflow: hidden;
1247 text-overflow: ellipsis;
1248
1249 & > * {
1250 white-space: nowrap;
1251 overflow: hidden;
1252 text-overflow: ellipsis;
1253
1254 &:hover {
1255 color: var(--text-color);
1256 cursor: pointer;
1257 }
1258
1259 &:only-child {
1260 white-space: pre-line;
1261 overflow: auto;
1262 text-overflow: unset;
1263 display: flex;
1264 gap: 4px;
1265 }
1266 }
1267
1268 sup {
1269 opacity: 0.75;
1270 font-variant-numeric: tabular-nums;
1271 flex-shrink: 0;
1272 }
1273 }
1274
1275 /* Only 4, for now. Would be better if this is a for loop */
1276 &:has(.media[data-has-alt]:nth-child(1):is(:hover, :focus))
1277 figcaption
1278 > div[data-caption-index~='1'],
1279 &:has(.media[data-has-alt]:nth-child(2):is(:hover, :focus))
1280 figcaption
1281 > div[data-caption-index~='2'],
1282 &:has(.media[data-has-alt]:nth-child(3):is(:hover, :focus))
1283 figcaption
1284 > div[data-caption-index~='3'],
1285 &:has(.media[data-has-alt]:nth-child(4):is(:hover, :focus))
1286 figcaption
1287 > div[data-caption-index~='4'] {
1288 color: var(--text-color);
1289 }
1290}
1291
1292.carousel-item {
1293 position: relative;
1294}
1295.carousel-item button.media-alt {
1296 position: absolute;
1297 --bottom: 16px;
1298 bottom: var(--bottom);
1299 bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
1300 left: 16px;
1301 left: calc(16px + env(safe-area-inset-left));
1302 text-align: left;
1303 border-radius: 8px;
1304 color: var(--text-color);
1305 padding: 4px 8px;
1306 background-color: var(--bg-faded-color);
1307 border: 1px solid var(--outline-color);
1308 box-shadow: 0 4px 16px var(--drop-shadow-color);
1309 max-width: min(var(--main-width), calc(100% - 32px));
1310 display: flex;
1311 align-items: center;
1312 gap: 8px;
1313 font-size: 90%;
1314 z-index: 1;
1315 text-shadow: 0 var(--hairline-width) var(--bg-color);
1316 white-space: pre-line;
1317
1318 &:is(:hover, :focus) {
1319 mix-blend-mode: normal;
1320 }
1321}
1322.carousel-item button.media-alt .media-alt-desc {
1323 overflow: hidden;
1324 white-space: normal;
1325 display: -webkit-box;
1326 display: box;
1327 -webkit-box-orient: vertical;
1328 box-orient: vertical;
1329 -webkit-line-clamp: 2;
1330 line-clamp: 2;
1331 line-height: 1.4;
1332}
1333.carousel-item button.media-alt[hidden] {
1334 opacity: 0;
1335}
1336@media (hover: hover) {
1337 .carousel-item button.media-alt {
1338 opacity: 0;
1339 transform: translateY(var(--bottom)) scale(0.95);
1340 transition: all 0.2s ease-in-out;
1341 }
1342 .carousel-item:hover button.media-alt {
1343 opacity: 1;
1344 transform: translateY(0) scale(1);
1345 }
1346 .carousel-item button.media-alt[hidden] {
1347 opacity: 1;
1348 }
1349}
1350
1351/* CARD */
1352
1353.card {
1354 display: flex;
1355 margin-top: 8px;
1356 border-radius: 8px;
1357 border: 1px solid var(--outline-color);
1358 overflow: hidden;
1359 color: inherit;
1360 align-items: stretch;
1361 background-color: var(--bg-color);
1362 max-width: 480px;
1363 /* max-height: 160px; */
1364}
1365.status.large .card.large,
1366.status-carousel .content-container[data-content-text-weight='1'] .card.large {
1367 border-radius: 16px;
1368 flex-direction: column;
1369 max-height: none;
1370}
1371.card .card-image {
1372 flex-shrink: 0;
1373 width: 35%;
1374 position: relative;
1375 border-inline-end: 1px solid var(--outline-color);
1376 background-color: var(--average-color, var(--bg-faded-color));
1377 background-clip: padding-box;
1378}
1379.card .card-image img {
1380 position: absolute;
1381 width: 100%;
1382 height: 100%;
1383 object-fit: cover;
1384}
1385/* .card .image {
1386 width: 35%;
1387 height: auto;
1388 flex-grow: 1;
1389 border-inline-end: 1px solid var(--outline-color);
1390 object-fit: cover;
1391 aspect-ratio: 1 / 1;
1392} */
1393.status.large .card .card-image {
1394 aspect-ratio: 1 / 1;
1395}
1396.status.large .card.large .card-image,
1397.status-carousel
1398 .content-container[data-content-text-weight='1']
1399 .card.large
1400 .card-image {
1401 flex-grow: 1;
1402 aspect-ratio: 1.91 / 1;
1403 width: 100%;
1404 max-height: 40vh;
1405 border-inline-end: 0;
1406 border-block-end: 1px solid var(--outline-color);
1407}
1408.card:is(:hover, :focus) img,
1409a:focus-visible .card img {
1410 animation: position-object 5s ease-in-out 1s 5;
1411 animation-duration: var(--anim-duration, 5s);
1412}
1413.card p {
1414 margin: 0;
1415}
1416.card .meta-container {
1417 padding: 8px;
1418 min-width: 0;
1419 flex-grow: 1;
1420 align-self: center;
1421}
1422.status.large .card.large .meta-container,
1423.status-carousel
1424 .content-container[data-content-text-weight='1']
1425 .card.large
1426 .meta-container {
1427 align-self: flex-start;
1428 flex-grow: 0;
1429}
1430.card .title {
1431 line-height: 1.25;
1432 font-weight: normal;
1433 text-overflow: ellipsis;
1434 overflow: hidden;
1435 display: -webkit-box;
1436 display: box;
1437 -webkit-box-orient: vertical;
1438 box-orient: vertical;
1439 -webkit-line-clamp: 2;
1440 line-clamp: 2;
1441 text-wrap: balance;
1442}
1443.card .meta {
1444 font-size: smaller;
1445 opacity: 0.75;
1446 margin: 0;
1447 text-overflow: ellipsis;
1448 overflow: hidden;
1449 display: -webkit-box;
1450 display: box;
1451 -webkit-box-orient: vertical;
1452 box-orient: vertical;
1453 -webkit-line-clamp: 2;
1454 line-clamp: 2;
1455}
1456.card.no-image :is(.title, .meta) {
1457 -webkit-line-clamp: 3;
1458 line-clamp: 3;
1459}
1460.card .meta.domain {
1461 opacity: 1;
1462 color: var(--link-color);
1463 white-space: nowrap;
1464 text-overflow: ellipsis;
1465 overflow: hidden;
1466 display: block;
1467}
1468.card:visited .meta.domain {
1469 color: var(--link-visited-color);
1470}
1471.card .meta.domain * {
1472 vertical-align: middle;
1473}
1474a.card {
1475 text-decoration: none;
1476 transition: opacity 0.2s ease-in-out;
1477}
1478a.card:is(:hover, :focus) {
1479 border: 1px solid var(--link-color);
1480 box-shadow: 0 0 0 2px var(--link-faded-color);
1481}
1482a.card:is(:hover, :focus):visited {
1483 border-color: var(--link-visited-color);
1484}
1485.card.video {
1486 max-width: 320px;
1487 max-height: 320px;
1488}
1489.card.video iframe {
1490 width: 100%;
1491 height: 100%;
1492}
1493
1494/* POLLS */
1495
1496.poll {
1497 display: inline-block;
1498 transition: opacity 0.2s ease-in-out;
1499 margin-top: 8px;
1500 border-radius: 16px;
1501 border: 1px solid var(--outline-color);
1502 background-color: var(--bg-faded-color);
1503 background-image: linear-gradient(
1504 to bottom,
1505 var(--bg-color) 50%,
1506 var(--bg-faded-color)
1507 );
1508 overflow: hidden;
1509 box-shadow: inset 0 0 0 1px var(--bg-color);
1510 min-width: 50%;
1511}
1512.poll.loading {
1513 opacity: 0.5;
1514 pointer-events: none;
1515}
1516.poll.read-only {
1517 pointer-events: none;
1518}
1519.poll-options {
1520 display: flex;
1521 flex-direction: column;
1522 gap: 4px;
1523 padding: 4px;
1524}
1525.poll-option {
1526 padding: 4px 8px;
1527 display: flex;
1528 gap: 16px;
1529 justify-content: space-between;
1530 align-items: center;
1531 position: relative;
1532}
1533.poll-option > * {
1534 z-index: 1;
1535}
1536.poll-option:after {
1537 content: '';
1538 position: absolute;
1539 inset: 0;
1540 border-radius: 4px;
1541 background-color: var(--link-faded-color);
1542 opacity: 0;
1543 pointer-events: none;
1544 transition: all 0.2s ease-in-out;
1545 z-index: 0;
1546}
1547.poll-option:first-child:after {
1548 border-top-left-radius: 12px;
1549 border-top-right-radius: 12px;
1550}
1551.poll-option:hover:after {
1552 opacity: 1;
1553}
1554.poll-option.poll-result:after {
1555 width: var(--percentage);
1556 opacity: 1;
1557}
1558.poll-label {
1559 width: 100%;
1560 display: flex;
1561 gap: 8px;
1562 cursor: pointer;
1563 z-index: 1;
1564}
1565.poll-label input:is([type='radio'], [type='checkbox']) {
1566 flex-shrink: 0;
1567 margin: 3px;
1568}
1569.poll-option-votes {
1570 flex-shrink: 0;
1571 font-size: 90%;
1572 opacity: 0.75;
1573}
1574.poll-option-leading .poll-option-votes {
1575 font-weight: bold;
1576 opacity: 1;
1577}
1578.poll-vote-button {
1579 margin: 8px 8px 0 12px;
1580 /* padding-inline: 24px; */
1581 min-width: 160px;
1582}
1583.poll-meta {
1584 color: var(--text-insignificant-color);
1585 margin: 8px 16px;
1586 font-size: 90%;
1587 user-select: none;
1588}
1589.poll-option-title {
1590 text-shadow: 0 1px var(--bg-color);
1591}
1592.poll-option-title .icon {
1593 vertical-align: middle;
1594}
1595
1596/* EXTRA META */
1597
1598.status .extra-meta {
1599 padding-top: 8px;
1600 color: var(--text-insignificant-color);
1601 font-size: 90%;
1602}
1603.status .extra-meta * {
1604 vertical-align: middle;
1605}
1606.status .extra-meta a {
1607 color: inherit;
1608 text-decoration: none;
1609 vertical-align: baseline;
1610 text-decoration-thickness: 1px;
1611 text-underline-offset: 3px;
1612}
1613.status .extra-meta a:is(:hover, :focus) {
1614 text-decoration: underline;
1615}
1616.status .extra-meta .edited:is(:hover, :focus) {
1617 cursor: pointer;
1618 color: var(--text-color);
1619}
1620.status.large .extra-meta {
1621 padding-top: 0;
1622 margin-left: calc(-50px - 16px);
1623}
1624
1625/* ACTIONS */
1626
1627.status .actions {
1628 display: flex;
1629 gap: 8px;
1630}
1631.status.large .actions {
1632 padding-top: 4px;
1633 padding-bottom: 16px;
1634 margin-left: calc(-50px - 16px);
1635 color: var(--text-insignificant-color);
1636 border-top: var(--hairline-width) solid var(--outline-color);
1637 margin-top: 8px;
1638}
1639.status.large .actions.disabled {
1640 pointer-events: none;
1641 opacity: 0.5;
1642}
1643.status .action.has-count {
1644 flex: 1;
1645}
1646.status .action > button {
1647 min-height: 40px;
1648 min-width: 40px;
1649 padding: 0 8px;
1650 font-variant-numeric: tabular-nums;
1651}
1652.status .action > button.plain {
1653 color: inherit;
1654 border: 1.5px solid transparent;
1655 backdrop-filter: none;
1656}
1657.status .action > button.plain:not(:disabled):is(:hover, :focus) {
1658 color: var(--link-color);
1659 background-color: var(--button-plain-bg-hover-color);
1660}
1661.status .action > button.plain.reblog-button:not(:disabled):is(:hover, :focus) {
1662 color: var(--reblog-color);
1663}
1664.status .action > button.plain.reblog-button.checked {
1665 color: var(--reblog-color);
1666 border-color: var(--reblog-color);
1667}
1668@keyframes reblogged {
1669 5% {
1670 transform: translate(-2px, -2px);
1671 }
1672 10% {
1673 transform: translate(2px, 2px);
1674 }
1675 15% {
1676 transform: translate(0, 0);
1677 }
1678 100% {
1679 transform: translate(30px, -30px);
1680 opacity: 0;
1681 }
1682}
1683.status .action > button.plain.reblog-button.checked .icon {
1684 animation: reblogged 1s ease-in-out;
1685}
1686.status .action > button.plain.favourite-button:is(:hover, :focus) {
1687 color: var(--favourite-color);
1688}
1689.status .action > button.plain.favourite-button.checked {
1690 color: var(--favourite-color);
1691 border-color: var(--favourite-color);
1692}
1693@keyframes hearted {
1694 15% {
1695 transform: scale(1.25) translateY(-1px);
1696 }
1697 30% {
1698 transform: scale(1);
1699 }
1700 45% {
1701 transform: scale(1.5) translateY(-2px);
1702 }
1703 100% {
1704 transform: scale(1);
1705 }
1706}
1707.status .action > button.plain.favourite-button.checked .icon {
1708 animation: hearted 1s ease-out;
1709}
1710.status .action > button.plain.bookmark-button.checked {
1711 color: var(--link-color);
1712 border-color: var(--link-color);
1713}
1714@keyframes bookmarked {
1715 25% {
1716 transform: translateY(-10px) rotate(10deg);
1717 opacity: 0.5;
1718 }
1719 50% {
1720 transform: translateY(0);
1721 opacity: 1;
1722 }
1723 75% {
1724 transform: translateY(-15px) rotate(-10deg);
1725 opacity: 0.5;
1726 }
1727 100% {
1728 transform: translateY(0);
1729 opacity: 1;
1730 }
1731}
1732.status .action > button.plain.bookmark-button.checked .icon {
1733 animation: bookmarked 1s ease-in-out;
1734}
1735
1736/* ENHANCED CONTENT */
1737
1738.status .content pre {
1739 border-radius: 8px;
1740 padding: 8px;
1741 margin: 8px 0;
1742 overflow: auto;
1743 width: 100%;
1744 border: 1px solid var(--outline-color);
1745 background: linear-gradient(
1746 to bottom right,
1747 var(--bg-faded-color),
1748 transparent 160px
1749 );
1750 white-space: pre-wrap;
1751 line-height: 1.2;
1752}
1753
1754.status .content p code {
1755 color: var(--green-color);
1756}
1757
1758/* BADGE */
1759
1760.status-badge {
1761 position: absolute;
1762 top: 4px;
1763 right: 4px;
1764 line-height: 0;
1765 pointer-events: none;
1766 opacity: 0.75;
1767}
1768.status-badge .favourite {
1769 color: var(--favourite-color);
1770}
1771.status-badge .reblog {
1772 color: var(--reblog-color);
1773}
1774.status-badge .bookmark {
1775 color: var(--link-color);
1776}
1777.status-badge .pin {
1778 color: var(--red-color);
1779}
1780@keyframes swoosh-from-right {
1781 0% {
1782 opacity: 0;
1783 transform: translateX(300%);
1784 }
1785 100% {
1786 opacity: 1;
1787 transform: translateX(0);
1788 }
1789}
1790.status-badge > * {
1791 animation: swoosh-from-right 1s cubic-bezier(0.51, 0.28, 0.16, 1.26) both;
1792}
1793.status-badge > *:nth-child(2) {
1794 animation-delay: 0.1s;
1795}
1796.status-badge > *:nth-child(3) {
1797 animation-delay: 0.2s;
1798}
1799.status-badge > *:nth-child(4) {
1800 animation-delay: 0.3s;
1801}
1802
1803/* MISC */
1804
1805.status-aside {
1806 padding: 0 16px 16px 80px;
1807 color: var(--text-insignificant-color);
1808}
1809
1810.shortcode-emoji {
1811 width: auto;
1812 min-width: 1.2em;
1813 max-width: 100%;
1814 height: 1.2em;
1815 vertical-align: text-bottom;
1816 object-fit: cover;
1817 object-position: left;
1818}
1819
1820/* EDIT HISTORY */
1821
1822#edit-history {
1823 min-height: 50vh;
1824 min-height: 50dvh;
1825}
1826
1827#edit-history h2 {
1828 margin: 0;
1829 padding: 0;
1830}
1831
1832#edit-history ol,
1833#edit-history ol li {
1834 list-style: none;
1835 margin: 0;
1836 padding: 0;
1837}
1838
1839#edit-history .history-item .status {
1840 border: 1px solid var(--outline-color);
1841 border-radius: 8px;
1842 pointer-events: none;
1843}
1844
1845/* DELETED */
1846
1847.status-deleted {
1848 opacity: 0.75;
1849}
1850.status-deleted-tag {
1851 color: var(--text-insignificant-color);
1852 text-transform: uppercase;
1853 font-size: 80%;
1854}
1855
1856/* FILTERED */
1857
1858#filtered-status-peek {
1859 user-select: none;
1860 -webkit-touch-callout: none;
1861 -webkit-user-drag: none;
1862}
1863
1864#filtered-status-peek main > p:first-child {
1865 margin-top: 0;
1866}
1867
1868#filtered-status-peek main .heading {
1869 white-space: nowrap;
1870 overflow: hidden;
1871 text-overflow: ellipsis;
1872}
1873
1874#filtered-status-peek {
1875 .status-link {
1876 margin: 8px 0 0;
1877 border-radius: 16px;
1878 border: var(--hairline-width) solid var(--divider-color);
1879 position: relative;
1880 max-height: 33vh;
1881 max-height: 33dvh;
1882 overflow: hidden;
1883
1884 &.truncated {
1885 .status {
1886 mask-image: linear-gradient(to bottom, #000 80px, transparent);
1887 }
1888
1889 &:after {
1890 content: attr(data-read-more);
1891 line-height: 1;
1892 display: inline-block;
1893 position: absolute;
1894 --inset-offset: 16px;
1895 inset-block-end: var(--inset-offset);
1896 inset-inline-end: var(--inset-offset);
1897 color: var(--text-color);
1898 background-color: var(--bg-faded-color);
1899 border: 1px dashed var(--link-color);
1900 box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
1901 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
1902 padding: 0.5em 0.75em;
1903 border-radius: 10em;
1904 font-size: 90%;
1905 white-space: nowrap;
1906 transition: transform 0.2s ease-out;
1907 }
1908
1909 &:is(:hover, :focus):after {
1910 color: var(--link-color);
1911 transform: translate(2px, 0);
1912 }
1913 }
1914
1915 .status {
1916 pointer-events: none;
1917 font-size: 90%;
1918 }
1919 }
1920}
1921
1922/* REACTIONS */
1923
1924#reactions-container main ul {
1925 list-style: none;
1926 margin: 0;
1927 padding: 8px 0;
1928 display: flex;
1929 flex-wrap: wrap;
1930 flex-direction: row;
1931 column-gap: 1.5em;
1932 row-gap: 16px;
1933}
1934#reactions-container main ul li {
1935 display: flex;
1936 flex-grow: 1;
1937 flex-basis: 16em;
1938 align-items: center;
1939 margin: 0;
1940 padding: 0;
1941 gap: 8px;
1942}
1943#reactions-container main ul li .account-block-acct {
1944 font-size: 80%;
1945 color: var(--text-insignificant-color);
1946 display: block;
1947}
1948#reactions-container .reactions-block {
1949 display: flex;
1950 flex-direction: column;
1951 align-self: center;
1952}
1953#reactions-container .reactions-block .favourite-icon {
1954 color: var(--favourite-color);
1955}
1956#reactions-container .reactions-block .reblog-icon {
1957 color: var(--reblog-color);
1958}
1959
1960/* ALT BADGE */
1961
1962.alt-badge {
1963 font-size: 12px;
1964 font-weight: bold;
1965 color: var(--media-fg-color);
1966 background-color: var(--media-bg-color);
1967 border: var(--hairline-width) solid var(--media-outline-color);
1968 /* mix-blend-mode: luminosity; */
1969 border-radius: 4px;
1970 padding: 4px;
1971 opacity: 0.65;
1972
1973 sup {
1974 vertical-align: super;
1975 font-weight: normal;
1976 line-height: 0;
1977 padding-left: 2px;
1978 }
1979
1980 &.clickable {
1981 opacity: 0.75;
1982 border-width: 2px;
1983
1984 &:is(:hover, :focus):not(:active) {
1985 transition: 0.15s ease-out;
1986 transition-property: transform, opacity, mix-blend-mode;
1987 transform: scale(1.15);
1988 opacity: 0.9;
1989 mix-blend-mode: normal;
1990 }
1991 }
1992}