alice.mosphere.at
this repo has no description
1/* REBLOG + REPLY-TO */
2
3:root {
4 --post-gradient-angle: 160deg;
5 --post-gradient-chip-angle: -20deg;
6 &:dir(rtl) {
7 --post-gradient-angle: -160deg;
8 --post-gradient-chip-angle: 20deg;
9 }
10 --post-gradient-height: min(160px, 50%);
11}
12
13.status-reblog {
14 background: linear-gradient(
15 var(--post-gradient-angle),
16 var(--reblog-faded-color),
17 transparent var(--post-gradient-height)
18 );
19}
20.status-group {
21 background: linear-gradient(
22 var(--post-gradient-angle),
23 var(--group-faded-color),
24 transparent var(--post-gradient-height)
25 );
26}
27.status-followed-tags {
28 background: linear-gradient(
29 var(--post-gradient-angle),
30 var(--hashtag-faded-color),
31 transparent var(--post-gradient-height)
32 );
33
34 .timeline-item-container:not(.timeline-item-container-start) & {
35 background: radial-gradient(
36 ellipse at 0 1.2em,
37 var(--hashtag-faded-color),
38 transparent var(--post-gradient-height)
39 );
40 background-size: 100% 3em;
41 background-repeat: no-repeat;
42 }
43}
44.status-reply-to {
45 background: linear-gradient(
46 var(--post-gradient-angle),
47 var(--reply-to-faded-color),
48 transparent var(--post-gradient-height)
49 );
50}
51:is(.status-reblog, .status-group, .status-followed-tags) .status-reply-to {
52 background: linear-gradient(
53 var(--post-gradient-chip-angle),
54 var(--reply-to-faded-color),
55 transparent var(--post-gradient-height)
56 );
57}
58.visibility-direct {
59 --yellow-stripes: repeating-linear-gradient(
60 135deg,
61 var(--reply-to-faded-color),
62 var(--reply-to-faded-color) 10px,
63 var(--reply-to-faded-color) 10px,
64 transparent 10px,
65 transparent 20px
66 );
67 /* diagonal stripes of yellow */
68 background-image: var(--yellow-stripes);
69}
70
71/* STATUS PRE META */
72
73.status-pre-meta {
74 padding: 8px 16px 0;
75 opacity: 0.75;
76 font-size: smaller;
77 vertical-align: middle;
78 white-space: nowrap;
79 text-overflow: ellipsis;
80 overflow: hidden;
81 margin-bottom: -8px;
82}
83.status-reblog .status-pre-meta .icon {
84 color: var(--reblog-color);
85 margin-inline-end: 4px;
86 vertical-align: text-bottom;
87}
88.status-group .status-pre-meta .icon {
89 color: var(--group-color);
90 margin-inline-end: 4px;
91 vertical-align: text-bottom;
92}
93.status-followed-tags {
94 .status-pre-meta {
95 position: relative;
96 z-index: 1;
97 display: flex;
98 flex-wrap: wrap;
99 gap: 4px;
100 align-items: center;
101
102 .icon {
103 color: var(--hashtag-color);
104 margin-inline-end: 4px;
105 vertical-align: text-bottom;
106 }
107 a {
108 color: var(--hashtag-text-color);
109 font-weight: bold;
110 font-size: 12px;
111 text-decoration-color: var(--hashtag-faded-color);
112 text-underline-offset: 2px;
113 text-decoration-thickness: 2px;
114 display: inline-block;
115 padding: 2px;
116 vertical-align: top;
117 text-transform: uppercase;
118 /* text-shadow: 0 1px var(--bg-color); */
119
120 &:hover {
121 color: var(--text-color);
122 text-decoration-color: var(--hashtag-color);
123 }
124 }
125 }
126
127 .status-followed-tag-item {
128 color: var(--hashtag-text-color);
129 padding: 2px;
130 font-weight: bold;
131 font-size: 12px;
132 text-transform: uppercase;
133 margin-inline-end: 0.5em;
134 }
135}
136
137/* STATUS */
138
139.status {
140 display: flex;
141 padding: 16px;
142 line-height: 1.4;
143 align-items: flex-start;
144 position: relative;
145 font-size: var(--text-size);
146}
147.status.large {
148 --fade-in-out-bg: linear-gradient(
149 to bottom,
150 transparent,
151 var(--bg-color) 70px,
152 var(--bg-color) calc(100% - 50px),
153 transparent
154 );
155 padding-bottom: 8px;
156 background-image: var(--fade-in-out-bg);
157}
158.status.large.visibility-direct {
159 background-image: var(--fade-in-out-bg), var(--yellow-stripes);
160}
161
162.status-card-link {
163 text-decoration: none;
164 color: var(--text-color);
165}
166.status-card-link:not(
167 .truncated .status-card-link /* parent status already truncated */,
168 .status-card-link .status-card-link /* nested status cards */
169 ):has(.truncated) {
170 display: block;
171 position: relative;
172
173 &[data-read-more]:after {
174 content: attr(data-read-more);
175 line-height: 1;
176 display: inline-block;
177 position: absolute;
178 --inset-offset: 16px;
179 inset-block-end: var(--inset-offset);
180 inset-inline-end: var(--inset-offset);
181 color: var(--text-color);
182 background-color: var(--bg-faded-color);
183 border: 1px dashed var(--link-color);
184 box-shadow:
185 0 0 0 1px var(--bg-color),
186 0 -5px 10px var(--bg-color),
187 0 -5px 15px var(--bg-color),
188 0 -5px 20px var(--bg-color);
189 padding: 0.5em 0.75em;
190 border-radius: 10em;
191 font-size: 90%;
192 white-space: nowrap;
193 transition: transform 0.2s ease-out;
194 }
195
196 &:is(:hover, :focus):after {
197 color: var(--link-color);
198 transform: translate(2px, 0);
199 }
200}
201.status-card-link:is(:hover, :focus) .status-card {
202 border-color: var(--outline-hover-color);
203 box-shadow: inset 0 0 0 4px var(--bg-faded-blur-color);
204}
205.status-card-link:is(:hover, :focus) .status-card img {
206 animation: position-object 5s ease-in-out 1s 5;
207 animation-duration: var(--anim-duration, 5s);
208}
209.status-card-link:is(:active) .status-card {
210 background-color: var(--bg-faded-color);
211}
212.status-card {
213 font-size: calc(var(--text-size) * 0.9);
214 margin: 1em 0 0;
215 border-radius: 16px;
216 padding: 12px;
217 border: 1px solid var(--outline-color);
218 background-color: var(--bg-color);
219 box-shadow: inset 0 0 4px var(--outline-color);
220 /* box-shadow: inset 0 0 0 2px var(--bg-faded-color); */
221 /* filter: drop-shadow(0 2px 4px var(--bg-faded-color)); */
222
223 .quote-post-native > & {
224 border-radius: 8px;
225 }
226}
227.status-card:has(.status-badge:not(:empty)) {
228 border-start-end-radius: 8px;
229}
230.status-card > * {
231 pointer-events: none;
232}
233.status-card:not(.status-carousel .status)
234 :is(.content, .poll, .media-container) {
235 max-height: max(160px, 33vh) !important;
236 overflow: hidden;
237}
238.status.small:not(.status-carousel .status, .status.large .status)
239 .status-card
240 :is(.content, .poll, .media-container:not(.media-gt2)) {
241 max-height: 80px !important;
242}
243.status.large .status-card :is(.content, .poll, .media-container) {
244 max-height: 80vh !important;
245}
246.status-card :is(.content, .poll, .media-container) {
247 font-size: inherit !important;
248}
249.status-card :is(.content.truncated, .poll, .media-container.truncated) {
250 /* font-size: inherit !important; */
251 mask-image: linear-gradient(to bottom, #000 80px, transparent);
252}
253.status.small
254 .status-card
255 :is(.content.truncated, .poll, .media-container.truncated) {
256 mask-image: linear-gradient(to bottom, #000 40px, transparent);
257}
258.status-card {
259 .card,
260 .card-byline {
261 display: none;
262 }
263}
264.timeline-deck .status-card .content.truncated:after {
265 /* Don't show "Read more" in status cards */
266 content: none !important;
267}
268
269.status-card-unfulfilled {
270 display: flex;
271 flex-direction: row;
272 gap: 8px;
273 font-size: calc(var(--text-size) * 0.9);
274 margin: 1em 0 0;
275 border-radius: 8px;
276 padding: 12px;
277 border: 1px solid var(--outline-color);
278 background-color: var(--bg-color);
279 box-shadow: inset 0 0 4px var(--outline-color);
280
281 .icon {
282 color: var(--text-insignificant-color);
283 }
284
285 &.status-card-ghost {
286 color: var(--text-insignificant-color);
287 border: var(--hairline-width) dashed var(--text-insignificant-color);
288 box-shadow: none;
289 }
290}
291
292@keyframes skeleton-breathe {
293 0% {
294 opacity: 1;
295 }
296 40% {
297 opacity: 0.4;
298 }
299 100% {
300 opacity: 1;
301 }
302}
303.status.skeleton {
304 color: var(--outline-color);
305 animation: skeleton-breathe 6s linear infinite;
306 user-select: none;
307 pointer-events: none;
308 contain: layout;
309 text-rendering: optimizeSpeed;
310}
311.status.skeleton > .avatar {
312 background-color: var(--outline-color);
313}
314
315.status.filtered {
316 padding-block: 12px;
317 display: flex;
318 gap: 8px;
319 align-items: center;
320
321 .status-carousel & {
322 padding: 16px;
323 padding-inline-start: 24px;
324 }
325}
326.status.filtered .status-filtered-info {
327 pointer-events: none;
328 flex-grow: 1;
329 font-size: 90%;
330 white-space: nowrap;
331 overflow: hidden;
332 text-overflow: ellipsis;
333 mask-image: linear-gradient(var(--to-forward), black 90%, transparent);
334 position: relative;
335}
336.status.filtered .avatar {
337 opacity: 0.5;
338 transition: opacity 0.7s ease-in;
339}
340.status.filtered:is(:hover, :focus, :active) .avatar {
341 opacity: 1;
342}
343.status.filtered :is(.status-filtered-info-1, .status-filtered-info-2) {
344 transition: all 0.2s ease-out;
345}
346.status.filtered:hover :is(.status-filtered-info-1, .status-filtered-info-2) {
347 transition-delay: 1.5s;
348}
349.status.filtered .status-filtered-info-1 {
350 opacity: 0.5;
351}
352.status.filtered:is(:hover, :focus, :active) .status-filtered-info-1 {
353 opacity: 0;
354}
355.status.filtered .status-filtered-info-2 {
356 opacity: 0;
357 transform: translateX(8px);
358 position: absolute;
359 inset-inline-start: 0;
360}
361.status.filtered:is(:hover, :focus, :active) .status-filtered-info-2 {
362 opacity: 0.75;
363 transform: translateX(0);
364}
365
366.status.compact-thread {
367 display: flex;
368 gap: 8px;
369 padding-block: 8px;
370}
371.status.compact-thread .status-thread-badge-container {
372 flex-shrink: 0;
373 min-width: 50px;
374 justify-content: center;
375 display: flex;
376}
377.status.compact-thread .content-compact {
378 overflow: hidden;
379 display: -webkit-box;
380 display: box;
381 -webkit-box-orient: vertical;
382 box-orient: vertical;
383 -webkit-line-clamp: 2;
384 line-clamp: 2;
385 font-size: 90%;
386}
387
388.status.compact-reply {
389 --avatar-size: 20px;
390 --line-start: 40px;
391 --line-width: 3px;
392 --line-end: calc(var(--line-start) + var(--line-width));
393
394 display: flex;
395 gap: 12px;
396 --top-padding: 16px;
397 padding-top: var(--top-padding);
398 padding-bottom: 0;
399 margin-bottom: calc(-1 * var(--top-padding) / 2);
400 background-image: linear-gradient(
401 var(--post-gradient-angle),
402 transparent 2.5%,
403 var(--reply-to-faded-color) 10%,
404 transparent
405 );
406 background-repeat: no-repeat;
407 background-size: 100% calc(100% - var(--top-padding) / 2);
408
409 &.visibility-direct {
410 background-image: var(--yellow-stripes);
411 }
412
413 .status-pre-meta + & {
414 background-image: none;
415 }
416
417 > * {
418 opacity: 0.65;
419 transition: opacity 1s ease-out;
420 }
421 .status-link:hover & > * {
422 opacity: 1;
423 }
424
425 &:before {
426 content: '';
427 position: absolute;
428 top: calc(var(--top-padding) + var(--avatar-size));
429 inset-inline-start: var(--line-start);
430 width: var(--line-width);
431 height: calc(
432 100% -
433 var(--top-padding) -
434 var(--avatar-size) +
435 (var(--top-padding) / 2)
436 );
437 background-color: var(--comment-line-color);
438 z-index: 0;
439 mask-image: linear-gradient(to bottom, #000 8px, transparent);
440 }
441
442 .avatar {
443 margin-inline-start: calc((50px - var(--avatar-size)) / 2);
444 justify-self: center;
445 z-index: 1;
446 }
447
448 .content-compact {
449 overflow: hidden;
450 display: -webkit-box;
451 display: box;
452 -webkit-box-orient: vertical;
453 box-orient: vertical;
454 -webkit-line-clamp: 2;
455 line-clamp: 2;
456 font-size: 90%;
457 line-height: var(--avatar-size);
458 }
459
460 .status-filtered-badge.badge-meta {
461 margin-top: 6px;
462 flex-direction: row;
463 gap: 0.5em;
464 color: var(--text-color);
465 border-color: var(--text-color);
466 background-color: var(--bg-blur-color);
467 max-width: 100%;
468
469 > span + span {
470 position: static;
471 width: auto;
472
473 &:empty {
474 display: none;
475 }
476 }
477 }
478}
479
480.status .container {
481 flex-grow: 1;
482 min-width: 0;
483}
484.status:not(.small) > .container {
485 padding-inline-start: 12px;
486}
487
488.status > .container > .meta {
489 display: flex;
490 gap: 4px;
491 /* justify-content: space-between; */
492 white-space: nowrap;
493}
494.status.small > .container > .meta {
495 margin-bottom: 4px;
496}
497.status > .container > .meta > * {
498 min-width: 0;
499 overflow: hidden;
500 /* text-overflow: ellipsis; */
501}
502.status > .container > .meta .meta-name {
503 mask-image: linear-gradient(var(--to-backward), transparent, black 16px);
504 flex-grow: 1;
505
506 .name-text b {
507 opacity: 0.75;
508 }
509}
510.status.large > .container > .meta {
511 min-height: 50px;
512}
513.status > .container > .meta .arrow {
514 color: var(--reply-to-color);
515 vertical-align: middle;
516}
517.status > .container > .meta :is(.time, .edited) {
518 color: var(--text-insignificant-color);
519 text-align: end;
520 text-decoration: none;
521 flex-shrink: 0;
522 margin-inline-start: 4px;
523 white-space: nowrap;
524}
525.status > .container > .meta a.time {
526 position: relative;
527 overflow: visible;
528 display: flex;
529 align-items: center;
530 gap: 2px;
531 font-size: 90%;
532
533 .more {
534 margin-inline-start: 4px;
535 transition: transform 0.2s ease-out;
536 }
537}
538.status > .container > .meta a.time:is(:hover, :focus) {
539 .more {
540 transform: scale(1.2);
541 color: var(--link-color);
542 }
543}
544.status > .container > .meta a.time:active,
545.status > .container > .meta a.time.is-open {
546 text-decoration: none;
547 opacity: 1;
548}
549.status > .container > .meta a.time:after {
550 content: '';
551 position: absolute;
552 inset: -16px -16px -8px;
553}
554.status > .container > .meta .reply-to {
555 opacity: 0.5;
556 font-size: smaller;
557}
558
559.status-reply-badge {
560 display: inline-flex;
561 margin: 2px 0;
562 margin-inline-start: 4px;
563 gap: 4px;
564 align-items: center;
565 vertical-align: middle;
566}
567.status-reply-badge .icon {
568 color: var(--reply-to-color);
569}
570.status-thread-badge {
571 vertical-align: middle;
572 display: inline-flex;
573 margin: 2px 0;
574 gap: 4px;
575 align-items: center;
576 color: var(--reply-to-text-color);
577 background: var(--bg-color);
578 border: 1px solid var(--reply-to-color);
579 border-radius: 4px;
580 padding: 4px;
581 font-size: 10px;
582 line-height: 1;
583 text-transform: uppercase;
584 opacity: 0.75;
585 background-image: repeating-linear-gradient(
586 -70deg,
587 transparent,
588 transparent 3px,
589 var(--reply-to-faded-color) 3px,
590 var(--reply-to-faded-color) 4px
591 );
592 font-weight: bold;
593 align-self: center;
594 flex-shrink: 0;
595
596 .meta-name + & {
597 margin-inline-start: 4px;
598 margin-block: 0;
599
600 + .time {
601 margin-inline-start: 0 !important;
602 }
603 }
604}
605.status-direct-badge {
606 vertical-align: middle;
607 display: inline-flex;
608 margin: 2px 0;
609 gap: 4px;
610 align-items: center;
611 color: var(--reply-to-text-color);
612 background-color: var(--bg-color);
613 border: 1px solid var(--reply-to-text-color);
614 border-radius: 4px;
615 padding: 4px;
616 font-size: 10px;
617 line-height: 1;
618 text-transform: uppercase;
619 opacity: 0.75;
620 font-weight: bold;
621 box-shadow: inset 0 0 0 1px var(--reply-to-color);
622}
623.status-filtered-badge {
624 flex-shrink: 0;
625 color: var(--text-insignificant-color);
626 /* background: var(--bg-faded-color); */
627 /* border: var(--hairline-width) solid var(--bg-color); */
628 border: var(--hairline-width) dashed var(--text-insignificant-color);
629 border-radius: 4px;
630 padding: 4px;
631 font-size: 10px;
632 line-height: 1;
633 text-transform: uppercase;
634 font-weight: bold;
635 vertical-align: middle;
636 display: inline-block;
637
638 &.horizontal {
639 white-space: nowrap;
640 text-overflow: ellipsis;
641 overflow: hidden;
642 max-width: 100%;
643 }
644}
645.status-filtered-badge:not(.horizontal).badge-meta {
646 display: inline-flex;
647 flex-direction: column;
648 position: relative;
649 top: calc((9px + 2px) / 2 * -1);
650 min-width: 50px;
651 max-width: 100px;
652 text-align: center;
653}
654.status-filtered-badge.clickable:hover {
655 cursor: pointer;
656 color: var(--text-color);
657 border-color: var(--text-color);
658 background: var(--bg-color);
659}
660.status-filtered-badge:not(.horizontal).badge-meta > span:first-child {
661 overflow: hidden;
662 text-overflow: ellipsis;
663 white-space: nowrap;
664}
665.status-filtered-badge:not(.horizontal).badge-meta > span + span {
666 display: block;
667 font-size: 9px;
668 font-weight: normal;
669 text-transform: none;
670 white-space: nowrap;
671 text-overflow: ellipsis;
672 overflow: hidden;
673 position: absolute;
674 width: 100%;
675 top: calc(100% + 2px);
676 inset-inline-start: 0;
677 text-align: center;
678}
679.status-filtered-badge.horizontal.badge-meta > span + span {
680 font-weight: normal;
681 text-transform: none;
682}
683
684.status.large > .container > .content-container {
685 margin-inline-start: calc(-50px - 16px);
686 padding-top: 10px;
687 padding-bottom: 10px;
688}
689
690.status
691 .content-container.has-spoiler
692 :is(.spoiler-button, .spoiler-media-button):not([hidden]) {
693 margin: 4px 0;
694 font-size: 90%;
695 border: 1px dashed var(--button-bg-color);
696 display: flex;
697 gap: 4px;
698 align-items: center;
699 text-align: start;
700}
701.status .content-container.has-spoiler:not(.show-spoiler) .spoiler-button {
702 ~ *:not(
703 .content.truncated,
704 .media-container,
705 .media-first-container,
706 .card,
707 .media-figure-multiple,
708 .spoiler-media-button
709 ),
710 ~ .card .meta-container {
711 opacity: 0.2;
712 text-decoration-thickness: 1.5em;
713 text-decoration-line: line-through;
714 pointer-events: none;
715 user-select: none;
716
717 ruby {
718 filter: contrast(0);
719 background-color: #000;
720 }
721 * {
722 text-decoration-color: inherit;
723 text-decoration-thickness: 1.5em;
724 text-decoration-line: line-through;
725 }
726 }
727
728 ~ *:not(
729 .media-container,
730 .media-first-container,
731 .card,
732 .media-figure-multiple,
733 .spoiler-media-button
734 ),
735 ~ .card .meta-container {
736 img,
737 video {
738 filter: invert(0.5);
739 background-color: black;
740 }
741 }
742
743 ~ .content.truncated {
744 opacity: 1;
745
746 > * {
747 opacity: 0.2;
748 text-decoration-thickness: 1.5em;
749 text-decoration-line: line-through;
750 /* text-rendering: optimizeSpeed; */
751 pointer-events: none;
752 user-select: none;
753
754 * {
755 text-decoration-color: inherit;
756 text-decoration-thickness: 1.5em;
757 text-decoration-line: line-through;
758 /* text-rendering: optimizeSpeed; */
759 }
760 }
761 }
762
763 /* ~ :is(.media-container, .media-figure-multiple) .media > *, */
764 ~ .card .card-image > img {
765 display: none;
766 /* filter: blur(32px);
767 opacity: 0;
768 image-rendering: crisp-edges;
769 image-rendering: pixelated;
770 animation: none !important; */
771 }
772}
773.status
774 .content-container.has-spoiler:not(.show-media)
775 :is(.spoiler-button, .spoiler-media-button) {
776 ~ :is(.media-container, .media-figure-multiple) figcaption {
777 /* filter: blur(5px) invert(0.5);
778 image-rendering: crisp-edges;
779 image-rendering: pixelated; */
780 opacity: 0.2;
781 color: inherit;
782 text-decoration-thickness: 1.5em;
783 text-decoration-line: line-through;
784 /* text-rendering: optimizeSpeed; */
785 pointer-events: none;
786 user-select: none;
787 /* contain: layout; */
788 /* transform: scale(0.97);
789 transition: transform 0.1s ease-in-out; */
790
791 * {
792 text-decoration-thickness: 1.5em;
793 text-decoration-line: line-through;
794 /* text-rendering: optimizeSpeed; */
795 }
796
797 img {
798 opacity: 0;
799 }
800 }
801
802 ~ :is(.media-container, .media-first-container, .media-figure-multiple)
803 .media {
804 background-image: radial-gradient(
805 circle at 50% 50%,
806 var(--average-color, var(--bg-faded-color)),
807 var(--bg-color) 25em
808 );
809
810 > *:not(.media-play, .alt-badge) {
811 /* display: none; */
812 /* filter: blur(32px); */
813 opacity: 0;
814 image-rendering: crisp-edges;
815 image-rendering: pixelated;
816 animation: none !important;
817 }
818 }
819}
820.status
821 .content-container.show-spoiler
822 :is(.spoiler-button, .spoiler-media-button).spoiling {
823 border-style: dotted;
824}
825
826.status .content-container .spoiler-divider {
827 display: flex;
828 align-items: center;
829 gap: 4px;
830 color: var(--text-insignificant-color);
831 text-transform: uppercase;
832 font-size: 0.8em;
833 margin-top: 0.25em;
834 margin-bottom: 1em;
835 padding-block: 0.25em;
836 border-bottom: 1px dashed var(--divider-color);
837}
838
839.status .content-comment-hint {
840 margin-top: 0.25em;
841 font-size: 90%;
842 display: flex;
843 gap: 4px;
844 align-items: center;
845
846 .timeline-item-container & {
847 display: none;
848 }
849}
850
851.status.compact-thread .spoiler-badge {
852 font-size: smaller;
853 color: var(--button-bg-color);
854 border: 1px dashed var(--button-bg-color);
855 padding: 2px 4px;
856 border-radius: 16px;
857 display: inline-flex;
858 margin: 4px;
859 align-items: center;
860 justify-content: center;
861 background: var(--bg-faded-color);
862}
863
864.timeline-deck .status .content {
865 max-height: 50vh;
866 overflow: clip;
867 position: relative;
868
869 &:has(.status-card):not(:has(+ .media-container)) {
870 max-height: 80vh;
871 }
872}
873.timeline-deck
874 .status-reblog:not(.status-carousel .status-reblog)
875 .status
876 .content {
877 /* Deprioritise long-form boosts */
878 max-height: 40vh;
879 max-height: 40dvh;
880}
881.timeline-deck .status:not(.truncated .status) .content.truncated {
882 mask-image: linear-gradient(
883 to top,
884 transparent,
885 rgba(0, 0, 0, 0.5) 1em,
886 black 1.5em
887 );
888}
889.timeline-deck
890 .status:not(.truncated .status)
891 .content.truncated[data-read-more]:after {
892 content: attr(data-read-more);
893 line-height: 1;
894 display: inline-block;
895 position: absolute;
896 inset-block-end: 1.5em;
897 left: 45%;
898 transform: translateX(-50%);
899 color: var(--text-color);
900 background-color: var(--bg-faded-color);
901 border: 1px dashed var(--link-color);
902 padding: 0.75em 1em;
903 border-radius: 10em;
904 font-size: 90%;
905 white-space: nowrap;
906 box-shadow:
907 0 0 0 1px var(--bg-color),
908 0 -5px 10px var(--bg-color),
909 0 -5px 15px var(--bg-color),
910 0 -5px 20px var(--bg-color);
911 transition: transform 0.5s ease-in-out;
912}
913.timeline-deck .status .content.truncated:hover:after {
914 color: var(--link-color);
915 transform: translateX(-50%) translateY(-2px) scale(1.01);
916}
917.timeline-deck .status .content.truncated ~ .card {
918 display: none;
919}
920.status .content .inner-content {
921 > img[height] {
922 height: auto;
923 aspect-ratio: var(--original-aspect-ratio);
924 }
925}
926.status .content .inner-content a:not(.mention, .has-url-text) {
927 color: var(--link-text-color);
928}
929.status
930 .content
931 .inner-content
932 a:not(.mention, .has-url-text):is(:hover, :focus) {
933 color: var(--text-color);
934 text-decoration-color: var(--link-color);
935}
936.status .content :is(.h-card, .mention) {
937 unicode-bidi: isolate;
938}
939.status .spoiler-content > *,
940.status .content .inner-content > * {
941 unicode-bidi: plaintext;
942}
943.status .content p {
944 /* 12px = 75% of 16px */
945 margin-block: min(0.75em, 12px);
946 white-space: pre-wrap;
947 tab-size: 2;
948 text-wrap: pretty;
949}
950.status-card .content p {
951 margin-block: min(0.25em, 4px);
952}
953.status .content p:first-child {
954 margin-block-start: 0;
955}
956.status .content p:last-child {
957 margin-block-end: 0;
958}
959.status .content blockquote {
960 margin-block: min(0.75em, 12px);
961 margin-inline: 0;
962 padding-block: 0;
963 padding-inline: 12px 0;
964 /* border-left: 4px solid var(--link-faded-color); */
965 position: relative;
966
967 &:before {
968 position: absolute;
969 content: '';
970 width: 3px;
971 background-color: var(--link-faded-color);
972 inset-block: 0;
973 inset-inline-start: 0;
974 border-radius: 9999px;
975 }
976}
977.status .content .inner-content {
978 > :is(ul, ol),
979 > :is(div, blockquote) > :is(ul, ol) {
980 margin-block: min(0.75em, 12px);
981 margin-inline: 0;
982 padding-inline-start: 1.5em;
983 }
984
985 > :is(ul, ol) li > :is(ul, ol),
986 > :is(div, blockquote) > :is(ul, ol) li > :is(ul, ol) {
987 padding-inline-start: 1.5em;
988 }
989
990 /* Hide inline quote (RE: [LINK]) when there's a native quote */
991 &:has(~ .quote-post-native) .quote-inline {
992 display: none;
993 }
994
995 /* Hide br(s) in .quote-inline */
996 .quote-inline br {
997 display: none;
998 }
999}
1000.status .content ul {
1001 list-style-type: disc;
1002}
1003.status .content :is(strong, b) {
1004 font-weight: 600;
1005}
1006.status .content .invisible {
1007 display: none;
1008}
1009.status .content .ellipsis::after {
1010 content: '…';
1011}
1012.status.large .content:not(.content .content) {
1013 font-size: 150%;
1014 font-size: min(calc(100% + 50% / var(--content-text-weight)), 150%);
1015}
1016.status.large .poll,
1017.status.large .actions {
1018 font-size: 125%;
1019 font-size: calc(100% + 25% / var(--content-text-weight));
1020}
1021
1022/* MEDIA */
1023
1024.status .media-container {
1025 margin-top: 8px;
1026 display: grid;
1027 grid-template-columns: 1fr 1fr;
1028 grid-auto-rows: 1fr;
1029 gap: 2px;
1030 /* height: 160px; */
1031 min-height: var(--min-dimension);
1032 height: auto;
1033 max-height: max(160px, 33vh);
1034}
1035.status .media-container.media-eq1 {
1036 display: flex;
1037 /* min-height: 0 !important; */
1038 max-height: none !important;
1039}
1040.status-carousel .status .media-container:not(.status-card .media-container) {
1041 margin-inline: -16px;
1042 max-width: calc(100% + 16px + 16px) !important;
1043
1044 figure:before {
1045 content: '';
1046 display: block;
1047 /* padding (16px) - gap (4px) */
1048 flex-basis: calc(16px - 4px);
1049 }
1050
1051 figure figcaption {
1052 padding-inline: 16px !important;
1053 }
1054
1055 &:not(.media-figure-multiple .media-container) {
1056 margin-bottom: -16px;
1057
1058 &.media-eq1:not(:has(figure)) {
1059 text-align: center;
1060 background-color: var(--img-bg-color);
1061 }
1062 }
1063
1064 .media {
1065 --media-radius: 0;
1066 --media-radius-inner: 0;
1067 box-sizing: border-box;
1068 }
1069}
1070.status:not(.large):not(.status-carousel .status)
1071 .media-container.media-eq1:has([data-orientation='portrait']) {
1072 width: 85%;
1073 min-width: 160px;
1074 max-height: 200px;
1075}
1076.status .media-container.media-gt2 {
1077 /* height: 200px; */
1078 max-height: max(200px, 40vh);
1079}
1080.status.medium
1081 .content
1082 ~ *
1083 .media-container:not(.status-card .media-container):is(
1084 .media-eq2,
1085 .media-gt2
1086 ),
1087.status.medium
1088 .content
1089 ~ .media-container:not(.status-card .media-container):is(
1090 .media-eq2,
1091 .media-gt2
1092 ) {
1093 /* 50px = avatar size */
1094 margin-inline-start: calc(-1 * ((50px / 2)));
1095 /*
1096 outer padding = 16px
1097 gap = 12px
1098 so... 16 - 12 = 4
1099 */
1100 margin-inline-end: -4px;
1101}
1102.status.large :is(.media-container, .media-container.media-gt2) {
1103 height: auto;
1104 /* min-height: 160px; */
1105 max-height: 60vh;
1106}
1107.status .media-container .media {
1108 box-sizing: content-box;
1109 --media-border-width: 1px;
1110 --media-radius: 16px;
1111 --media-radius-inner: 4px;
1112 border-radius: var(--media-radius);
1113 overflow: hidden;
1114 min-height: 80px;
1115 border: var(--media-border-width) solid var(--outline-color);
1116 vertical-align: top;
1117
1118 &:not(.media-audio) {
1119 background-color: var(--average-color, var(--bg-faded-color));
1120 background-clip: padding-box;
1121 }
1122
1123 &[data-has-small-dimension] img {
1124 object-fit: scale-down;
1125 }
1126}
1127.status .media-container:not(.media-eq1) .media {
1128 aspect-ratio: auto !important;
1129}
1130.status .media-container.media-eq1 {
1131 width: auto !important;
1132 max-width: 100%;
1133 display: block;
1134
1135 figure {
1136 margin: 0;
1137 padding: 0;
1138 display: flex;
1139 flex-wrap: wrap;
1140 /* align-items: flex-end; */
1141 column-gap: 4px;
1142
1143 figcaption {
1144 align-self: flex-end;
1145 padding: 4px;
1146 font-size: 90%;
1147 color: var(--text-insignificant-color);
1148 line-height: 1.2;
1149 cursor: pointer;
1150 white-space: pre-line;
1151 flex-basis: 15em;
1152 flex-grow: 1;
1153 text-wrap: pretty;
1154 }
1155 }
1156
1157 &:hover figure figcaption {
1158 color: var(--text-color);
1159 }
1160}
1161.status .media-container.media-eq1 .media {
1162 display: inline-block;
1163 max-width: 100% !important;
1164 min-width: var(--min-dimension);
1165 /* width: auto; */
1166 min-height: var(--min-dimension);
1167 /* --maxAspectHeight: max(160px, 33vh);
1168 --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
1169 width: min(var(--aspectWidth), var(--width), 100%);
1170 max-height: min(var(--height), 33vh);
1171
1172 &[data-has-natural-aspect-ratio] {
1173 --media-radius: 4px;
1174 }
1175}
1176.status .media-container.media-eq1 .media[data-orientation='portrait'] {
1177 /* width: auto;
1178 height: min(var(--height), 45vh);
1179 max-height: none; */
1180 max-height: min(var(--height), 45vh);
1181}
1182.status.large .media-container.media-eq1 {
1183 max-height: min(var(--height), 60vh);
1184
1185 .media-gif.media-contain {
1186 border-radius: 2px;
1187 }
1188}
1189.status.large
1190 .media-container:not(.status-card .media-container).media-eq1
1191 .media {
1192 width: min(var(--width), 100%);
1193 max-height: min(var(--height), 80vh);
1194}
1195/* .status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
1196 height: min(var(--height), 60vh);
1197} */
1198.status-carousel .status .media-container.media-eq1 .media {
1199 width: min(var(--width), 100%);
1200 height: auto;
1201 max-height: 60vh;
1202}
1203.status.status-card .media-container.media-eq1 .media {
1204 max-height: 160px;
1205 width: auto;
1206 max-width: min(var(--width), 100%);
1207}
1208/* Special media borders */
1209.status .media-container.media-eq2 .media:first-of-type {
1210 border-start-end-radius: var(--media-radius-inner);
1211 border-end-end-radius: var(--media-radius-inner);
1212}
1213.status .media-container.media-eq2 .media:last-of-type {
1214 border-start-start-radius: var(--media-radius-inner);
1215 border-end-start-radius: var(--media-radius-inner);
1216}
1217.status .media-container.media-eq3 .media:first-of-type {
1218 border-start-end-radius: var(--media-radius-inner);
1219 border-end-end-radius: var(--media-radius-inner);
1220}
1221.status .media-container.media-eq3 .media:nth-of-type(2) {
1222 border-start-start-radius: var(--media-radius-inner);
1223 border-end-end-radius: var(--media-radius-inner);
1224 border-end-start-radius: var(--media-radius-inner);
1225}
1226.status .media-container.media-eq3 .media:last-of-type {
1227 border-start-start-radius: var(--media-radius-inner);
1228 border-start-end-radius: var(--media-radius-inner);
1229 border-end-start-radius: var(--media-radius-inner);
1230}
1231.status .media-container.media-eq4 .media:first-of-type {
1232 border-start-end-radius: var(--media-radius-inner);
1233 border-end-end-radius: var(--media-radius-inner);
1234 border-end-start-radius: var(--media-radius-inner);
1235}
1236.status .media-container.media-eq4 .media:nth-of-type(2) {
1237 border-start-start-radius: var(--media-radius-inner);
1238 border-end-end-radius: var(--media-radius-inner);
1239 border-end-start-radius: var(--media-radius-inner);
1240}
1241.status .media-container.media-eq4 .media:nth-of-type(3) {
1242 border-start-start-radius: var(--media-radius-inner);
1243 border-start-end-radius: var(--media-radius-inner);
1244 border-end-end-radius: var(--media-radius-inner);
1245}
1246.status .media-container.media-eq4 .media:last-of-type {
1247 border-start-start-radius: var(--media-radius-inner);
1248 border-start-end-radius: var(--media-radius-inner);
1249 border-end-start-radius: var(--media-radius-inner);
1250}
1251.status .media:only-child {
1252 grid-area: span 2 / span 2;
1253}
1254.status:not(.large) .media:only-child {
1255 max-width: 480px;
1256}
1257.status.large .media-container:not(.media-eq1) .media:only-child {
1258 display: inline-block;
1259 min-width: 160px;
1260 min-height: 160px;
1261 width: fit-content;
1262}
1263.status .media:first-child:nth-last-child(3) {
1264 grid-area: span 2;
1265}
1266
1267.status:not(.large) .media-container.media-gt4 .media:last-child {
1268 position: relative;
1269}
1270.status:not(.large) .media-container.media-gt4 .media:last-child:after {
1271 content: '4+';
1272 position: absolute;
1273 inset: 0;
1274 display: flex;
1275 place-content: center;
1276 place-items: center;
1277 background-color: var(--bg-faded-blur-color);
1278}
1279
1280.status .media:is(:hover, :focus) {
1281 border-color: var(--outline-hover-color);
1282}
1283.status .media:active:not(:has(button:active)) {
1284 /* filter: brightness(0.8); */
1285 transform: scale(0.99);
1286}
1287.status .media :is(img, video) {
1288 width: 100%;
1289 height: 100%;
1290 object-fit: cover;
1291 vertical-align: middle;
1292 dynamic-range-limit: standard; /* Disable HDR */
1293}
1294:is(.status, .media-post) .media {
1295 cursor: pointer;
1296
1297 &[data-has-alt] {
1298 position: relative;
1299
1300 .alt-badge {
1301 position: absolute;
1302 bottom: 8px;
1303 inset-inline-start: 8px;
1304
1305 &:before {
1306 content: '';
1307 position: absolute;
1308 inset: -12px;
1309 }
1310 }
1311 }
1312}
1313.status .media:not([data-has-small-dimension]) img:is(:hover, :focus),
1314a:focus-visible .status .media:not([data-has-small-dimension]) img {
1315 animation: position-object 5s ease-in-out 1s 5;
1316 animation-duration: var(--anim-duration, 5s);
1317}
1318body:has(#modal-container .carousel) .status .media img:hover {
1319 animation: none;
1320}
1321.status .media .video-container,
1322.status .media video {
1323 width: 100%;
1324 height: 100%;
1325 object-fit: scale-down;
1326 /* border-radius: calc(var(--media-radius) - var(--media-border-width)); */
1327 border-radius: inherit;
1328}
1329.status :is(.media-video, .media-audio, .media-gif) {
1330 position: relative;
1331 background-clip: padding-box;
1332}
1333:is(.status, .media-post) :is(.media-video, .media-audio) .media-play {
1334 pointer-events: none;
1335 width: 44px;
1336 height: 44px;
1337 position: absolute;
1338 left: 50%;
1339 top: 50%;
1340 transform: translate(-50%, -50%);
1341 color: var(--media-fg-color);
1342 background-color: var(--media-bg-color);
1343 box-shadow: inset 0 0 0 2px var(--media-outline-color);
1344 display: flex;
1345 place-content: center;
1346 place-items: center;
1347 border-radius: 70px;
1348 transition: transform 0.2s ease-in-out;
1349}
1350:is(.status, .media-post)
1351 :is(.media-video, .media-audio):hover:not(:active)
1352 .media-play {
1353 transform: translate(-50%, -50%) scale(1.1);
1354}
1355:is(.status, .media-post)
1356 :is(.media-video, .media-audio)[data-formatted-duration]:after {
1357 font-size: 12px;
1358 pointer-events: none;
1359 content: attr(data-formatted-duration);
1360 position: absolute;
1361 bottom: 8px;
1362 inset-inline-end: 8px;
1363 color: var(--media-fg-color);
1364 background-color: var(--media-bg-color);
1365 border: var(--hairline-width) solid var(--media-outline-color);
1366 border-radius: 4px;
1367 padding: 0 4px;
1368}
1369:is(.status, .media-post) .media-audio[data-formatted-duration]:after {
1370 content: '♬ ' attr(data-formatted-duration);
1371}
1372:is(.status, .media-post) .media-gif[data-label]:not(:hover):after {
1373 font-size: 12px;
1374 font-weight: bold;
1375 pointer-events: none;
1376 content: attr(data-label);
1377 position: absolute;
1378 bottom: 8px;
1379 inset-inline-end: 8px;
1380 color: var(--media-fg-color);
1381 background-color: var(--media-bg-color);
1382 border: var(--hairline-width) solid var(--media-outline-color);
1383 border-radius: 4px;
1384 padding: 0 4px;
1385}
1386.media-gif {
1387 position: relative;
1388
1389 &:before {
1390 content: '';
1391 position: absolute;
1392 top: auto !important;
1393 bottom: 0;
1394 left: 0;
1395 right: 0;
1396 height: 2px;
1397 background-color: var(--media-outline-color);
1398 transform: translateX(calc(var(--progress, 0%) - 100%));
1399 border-radius: 0 !important;
1400 border: 0 !important;
1401 border-right: 1px solid var(--media-fg-color) !important;
1402 transition: transform 0.15s linear;
1403 }
1404 &:before {
1405 height: 3px;
1406 }
1407}
1408.status .media-gif video {
1409 object-fit: cover;
1410 pointer-events: none;
1411}
1412.status .media-contain {
1413 min-width: 160px;
1414 width: fit-content;
1415}
1416.status .media-contain video {
1417 object-fit: scale-down !important;
1418}
1419.status .media-eq1 .media-hover-animate {
1420 transition: border-radius 0.15s ease-out;
1421 transition-delay: 0.15s;
1422
1423 &:hover {
1424 transition-delay: 0;
1425 border-radius: 2px;
1426 }
1427}
1428/* .status .media-audio {
1429 border: 0;
1430 min-height: 0;
1431}
1432.status .media-audio audio {
1433 width: 100%;
1434} */
1435:is(.status, .media-post) .media-audio {
1436 width: 100%;
1437 height: 100%;
1438 min-height: var(--min-dimension);
1439 background-image:
1440 radial-gradient(circle at center center, transparent, var(--bg-faded-color)),
1441 repeating-radial-gradient(
1442 circle at center center,
1443 transparent,
1444 var(--bg-faded-color) 16px
1445 );
1446 background-blend-mode: multiply;
1447}
1448
1449.status.skeleton .media-first-container {
1450 min-height: 320px;
1451 background-color: var(--outline-color);
1452}
1453
1454.status .media-large-container {
1455 width: 100%;
1456 max-width: 100%;
1457 display: inline-flex;
1458 flex-direction: row;
1459 /* align-items: center;
1460 justify-content: center; */
1461 column-gap: 8px;
1462 flex-wrap: wrap;
1463
1464 .media {
1465 width: var(--width, auto) !important;
1466 }
1467
1468 /* .media[data-has-small-dimension] {
1469 width: var(--width, auto) !important;
1470 } */
1471
1472 figure {
1473 flex-direction: column;
1474
1475 figcaption {
1476 flex-grow: 0 !important;
1477 flex-basis: auto !important;
1478 align-self: flex-start !important;
1479 }
1480 }
1481}
1482
1483@keyframes media-carousel-slide {
1484 0% {
1485 transform: translateX(calc(var(--dots-count, 1) * 2.5px));
1486 }
1487 100% {
1488 transform: translateX(calc(var(--dots-count, 1) * -2.5px));
1489 }
1490}
1491
1492.status-media-first {
1493 timeline-scope: --media-carousel;
1494
1495 .meta-name {
1496 opacity: 0.65;
1497 transition: opacity 0.5s ease-in-out;
1498
1499 b + i {
1500 opacity: 0;
1501 transition: opacity 0.5s ease-in-out;
1502 }
1503 }
1504 :is(:hover, :focus) > & .meta-name {
1505 opacity: 1;
1506 b + i {
1507 opacity: 0.5;
1508 }
1509 }
1510
1511 .media-first-spoiler-content {
1512 white-space: nowrap;
1513 overflow: hidden;
1514 text-overflow: ellipsis;
1515 max-width: 100%;
1516 transition: opacity 0.5s ease-in-out;
1517 opacity: 0.5;
1518 }
1519 &:hover .media-first-spoiler-content {
1520 opacity: 1;
1521 }
1522
1523 .media-first-spoiler-button {
1524 display: inline-flex !important;
1525 }
1526
1527 .media-first-container {
1528 position: relative;
1529 margin-top: 8px;
1530 margin-inline: -16px;
1531
1532 @media (min-width: 40em) {
1533 margin-inline: 0;
1534 }
1535
1536 .media-carousel-controls {
1537 flex-shrink: 0;
1538 position: absolute;
1539 inset: 0;
1540 pointer-events: none;
1541 display: flex;
1542 justify-content: space-between;
1543 }
1544
1545 .carousel-indexer {
1546 z-index: 1;
1547 position: absolute;
1548 top: 8px;
1549 inset-inline-end: 8px;
1550 color: var(--media-fg-color);
1551 background-color: var(--media-bg-color);
1552 padding: 2px 8px;
1553 border-radius: 16px;
1554 font-size: 0.8em;
1555 font-variant-numeric: tabular-nums;
1556 opacity: 0.6;
1557 transition: opacity 1s ease-in-out 0.3s;
1558 border: var(--hairline-width) solid var(--media-outline-color);
1559 }
1560
1561 .media-carousel-button {
1562 display: flex;
1563 flex-shrink: 0;
1564 padding-inline: 8px;
1565 margin-block: 3em;
1566 pointer-events: auto;
1567 cursor: pointer;
1568 align-items: center;
1569 justify-content: center;
1570 }
1571 .carousel-button {
1572 @media (pointer: coarse) {
1573 display: none;
1574 }
1575
1576 + .carousel-button {
1577 inset-inline-start: auto;
1578 inset-inline-end: 8px;
1579 }
1580 }
1581
1582 @media (hover: hover) and (pointer: fine) {
1583 .carousel-button {
1584 filter: opacity(0);
1585 }
1586 &:hover .carousel-button {
1587 filter: opacity(1);
1588 }
1589 }
1590 }
1591
1592 .media-first-carousel {
1593 display: flex;
1594 max-height: 80vh;
1595 overflow-x: auto;
1596 overflow-y: hidden;
1597 scroll-snap-type: x mandatory;
1598 scroll-behavior: smooth;
1599 user-select: none;
1600 scrollbar-width: none;
1601 /* border: var(--hairline-width) solid var(--outline-color);
1602 border-inline-width: 0;
1603 background-color: var(--bg-faded-color); */
1604 box-shadow: 0 0 0 var(--hairline-width) var(--outline-color);
1605 scroll-timeline: --media-carousel x;
1606
1607 @media (min-width: 40em) {
1608 /* margin-inline: 0; */
1609 /* border-radius: 4px; */
1610 /* border-inline-width: var(--hairline-width); */
1611 box-shadow: none;
1612 }
1613
1614 &::-webkit-scrollbar {
1615 display: none;
1616 }
1617
1618 > .media-first-item {
1619 scroll-snap-align: center;
1620 scroll-snap-stop: always;
1621 flex-shrink: 0;
1622 display: flex;
1623 width: 100%;
1624 align-items: center;
1625 justify-content: center;
1626
1627 &:not(:only-child) {
1628 background-color: var(--bg-blur-color);
1629 /* box-shadow: inset 0 0 0 var(--hairline-width) var(--outline-color); */
1630 }
1631
1632 .media {
1633 /* background-color: var(--average-color, var(--bg-faded-color)); */
1634 width: var(--width, 100%);
1635 max-width: 100%;
1636 max-height: 100%;
1637 min-height: var(--min-dimension);
1638 /* max-height: min(var(--height), 80vh); */
1639
1640 &:has(img:not([data-loaded='true'])) {
1641 min-height: 320px;
1642 }
1643
1644 &:active {
1645 transform: none;
1646 filter: none;
1647 }
1648
1649 img,
1650 video {
1651 object-fit: scale-down;
1652 animation: none;
1653
1654 &:not([data-loaded='true']) {
1655 background-color: var(--bg-color);
1656 }
1657 }
1658 }
1659 }
1660 }
1661 :is(:hover, :focus) > & .carousel-indexer {
1662 opacity: 0;
1663 }
1664
1665 .media-carousel-dots {
1666 pointer-events: none;
1667 display: flex;
1668 gap: 5px;
1669 justify-content: center;
1670 margin-top: 8px;
1671 padding: 8px;
1672
1673 @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
1674 animation: media-carousel-slide 1s linear both;
1675 animation-timeline: --media-carousel;
1676 }
1677
1678 .carousel-dot {
1679 display: inline-block;
1680 width: 5px;
1681 height: 5px;
1682 border-radius: 50%;
1683 background-color: var(--text-color);
1684 transition: all 0.3s ease-in-out;
1685 opacity: 0.3;
1686 flex-shrink: 0;
1687
1688 &.active {
1689 opacity: 1;
1690 background-color: var(--text-color);
1691 transform: scale(1.5);
1692 }
1693 }
1694 }
1695
1696 .media-first-content {
1697 margin-top: 8px;
1698 height: 1.75em;
1699 overflow: hidden;
1700 text-overflow: ellipsis;
1701 white-space: nowrap;
1702 font-size: 0.9em;
1703 mask-image: linear-gradient(to bottom, black 1.5em, transparent 1.75em);
1704 opacity: 0.5;
1705 transition: opacity 0.5s ease-in-out;
1706
1707 @media (min-width: 40em) {
1708 margin-inline: 16px;
1709 }
1710
1711 * {
1712 text-align: center;
1713 /* Brute force ellipsis */
1714 overflow: hidden;
1715 text-overflow: ellipsis;
1716 white-space: nowrap !important;
1717 pointer-events: none;
1718 }
1719
1720 a {
1721 filter: grayscale(0.5);
1722 }
1723 }
1724
1725 :is(:hover, :focus) > & .media-first-content {
1726 opacity: 1;
1727 }
1728}
1729
1730.status:not(.large) .hashtag-stuffing {
1731 opacity: 0.75;
1732 transition: opacity 0.2s ease-in-out;
1733}
1734.status:not(.large) .hashtag-stuffing:is(:hover, :focus, :focus-within) {
1735 opacity: 1;
1736}
1737.status:not(.large) .hashtag-stuffing {
1738 white-space: nowrap;
1739 overflow: hidden;
1740 text-overflow: ellipsis;
1741 max-width: 100%;
1742
1743 /* Convert breaks to spaces */
1744 br {
1745 display: none;
1746
1747 + * {
1748 margin-inline-start: 1ex;
1749 }
1750 }
1751}
1752.status:not(.large) .hashtag-stuffing:first-child {
1753 display: -webkit-box;
1754 -webkit-line-clamp: 3;
1755 -webkit-box-orient: vertical;
1756 white-space: normal;
1757}
1758/* Collapse possible hashtag stuffing */
1759/* If >= 9 hashtags, collapse */
1760/* TODO: lower the threshold one day */
1761/* NOTE: disabled for now due to inaccuracy */
1762/* .status:not(.large, .contextual .status)
1763 p:not(.hashtag-stuffing):has(.hashtag:nth-of-type(1)):has(
1764 .hashtag:nth-of-type(2)
1765 ):has(.hashtag:nth-of-type(3)):has(.hashtag:nth-of-type(4)):has(
1766 .hashtag:nth-of-type(5)
1767 ):has(.hashtag:nth-of-type(6)):has(.hashtag:nth-of-type(7)):has(
1768 .hashtag:nth-of-type(8)
1769 ):has(.hashtag:nth-of-type(9)) {
1770 overflow: hidden;
1771 display: -webkit-box;
1772 -webkit-line-clamp: 3;
1773 -webkit-box-orient: vertical;
1774} */
1775
1776.media-figure-multiple {
1777 margin: 0;
1778 padding: 0;
1779
1780 figcaption {
1781 padding: 4px;
1782 font-size: 90%;
1783 color: var(--text-insignificant-color);
1784 line-height: 1.2;
1785 white-space: nowrap;
1786 overflow: hidden;
1787 text-overflow: ellipsis;
1788
1789 & > * {
1790 white-space: nowrap;
1791 overflow: hidden;
1792 text-overflow: ellipsis;
1793
1794 &:hover {
1795 color: var(--text-color);
1796 cursor: pointer;
1797 }
1798
1799 &:only-child {
1800 white-space: pre-line;
1801 overflow: auto;
1802 text-overflow: unset;
1803 display: flex;
1804 gap: 4px;
1805 }
1806 }
1807
1808 sup {
1809 opacity: 0.75;
1810 font-variant-numeric: tabular-nums;
1811 flex-shrink: 0;
1812 }
1813 }
1814
1815 /* Only 4, for now. Would be better if this is a for loop */
1816 &:has(.media[data-has-alt]:nth-child(1):is(:hover, :focus))
1817 figcaption
1818 > div[data-caption-index~='1'],
1819 &:has(.media[data-has-alt]:nth-child(2):is(:hover, :focus))
1820 figcaption
1821 > div[data-caption-index~='2'],
1822 &:has(.media[data-has-alt]:nth-child(3):is(:hover, :focus))
1823 figcaption
1824 > div[data-caption-index~='3'],
1825 &:has(.media[data-has-alt]:nth-child(4):is(:hover, :focus))
1826 figcaption
1827 > div[data-caption-index~='4'] {
1828 color: var(--text-color);
1829 }
1830}
1831
1832.carousel-item {
1833 position: relative;
1834}
1835.carousel-item button.media-alt {
1836 position: absolute;
1837 --bottom: 16px;
1838 bottom: var(--bottom);
1839 bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
1840 inset-inline-start: 16px;
1841 inset-inline-start: calc(16px + env(safe-area-inset-left));
1842 text-align: start;
1843 border-radius: 8px;
1844 color: var(--text-color);
1845 padding: 4px 8px;
1846 background-color: var(--bg-faded-color);
1847 border: 1px solid var(--outline-color);
1848 box-shadow: 0 4px 16px var(--drop-shadow-color);
1849 max-width: min(var(--main-width), calc(100% - 32px));
1850 display: flex;
1851 align-items: center;
1852 gap: 8px;
1853 font-size: 90%;
1854 z-index: 1;
1855 text-shadow: 0 var(--hairline-width) var(--bg-color);
1856 white-space: pre-line;
1857
1858 &:is(:hover, :focus) {
1859 mix-blend-mode: normal;
1860 }
1861}
1862.carousel-item button.media-alt .media-alt-desc {
1863 overflow: hidden;
1864 white-space: normal;
1865 display: -webkit-box;
1866 display: box;
1867 -webkit-box-orient: vertical;
1868 box-orient: vertical;
1869 -webkit-line-clamp: 2;
1870 line-clamp: 2;
1871 line-height: 1.4;
1872}
1873.carousel-item button.media-alt[hidden] {
1874 opacity: 0;
1875}
1876@media (hover: hover) {
1877 .carousel-item button.media-alt:not([hidden]) {
1878 opacity: 0;
1879 transform: translateY(var(--bottom)) scale(0.95);
1880 transition: all 0.2s ease-in-out;
1881 }
1882 .carousel-item:hover button.media-alt:not([hidden]) {
1883 opacity: 1;
1884 transform: translateY(0) scale(1);
1885 }
1886}
1887
1888/* CARD */
1889
1890.card {
1891 display: flex;
1892 margin-top: 8px;
1893 border-radius: 8px;
1894 border: 1px solid var(--outline-color);
1895 overflow: hidden;
1896 color: inherit;
1897 align-items: stretch;
1898 background-color: var(--bg-color);
1899 max-width: 480px;
1900 min-height: 3lh;
1901 /* max-height: 160px; */
1902}
1903.status.large .card.large,
1904.status-carousel .content-container[data-content-text-weight='1'] .card.large {
1905 border-radius: 16px;
1906 flex-direction: column;
1907 max-height: none;
1908
1909 .title {
1910 -webkit-line-clamp: 2;
1911 line-clamp: 2;
1912 }
1913 .meta {
1914 -webkit-line-clamp: 2;
1915 line-clamp: 2;
1916 }
1917}
1918.card .card-image {
1919 flex-shrink: 0;
1920 width: 35%;
1921 position: relative;
1922 border-inline-end: 1px solid var(--outline-color);
1923 background-color: var(--average-color, var(--bg-faded-color));
1924 background-clip: padding-box;
1925}
1926.card .card-image img {
1927 position: absolute;
1928 width: 100%;
1929 height: 100%;
1930 object-fit: cover;
1931}
1932/* .card .image {
1933 width: 35%;
1934 height: auto;
1935 flex-grow: 1;
1936 border-inline-end: 1px solid var(--outline-color);
1937 object-fit: cover;
1938 aspect-ratio: 1 / 1;
1939} */
1940.status.large .card .card-image {
1941 aspect-ratio: 1 / 1;
1942}
1943.status.large .card.large .card-image,
1944.status-carousel
1945 .content-container[data-content-text-weight='1']
1946 .card.large
1947 .card-image {
1948 flex-grow: 1;
1949 aspect-ratio: 1.91 / 1;
1950 width: 100%;
1951 max-height: 40vh;
1952 border-inline-end: 0;
1953 border-block-end: 1px solid var(--outline-color);
1954}
1955.card:is(:hover, :focus) img,
1956a:focus-visible .card img {
1957 animation: position-object 5s ease-in-out 1s 5;
1958 animation-duration: var(--anim-duration, 5s);
1959}
1960.card p {
1961 margin: 0;
1962}
1963.card .meta-container {
1964 padding: 8px;
1965 min-width: 0;
1966 flex-grow: 1;
1967 align-self: center;
1968}
1969.status.large .card.large .meta-container,
1970.status-carousel
1971 .content-container[data-content-text-weight='1']
1972 .card.large
1973 .meta-container {
1974 align-self: flex-start;
1975 flex-grow: 0;
1976 max-width: 100%;
1977}
1978.card .title {
1979 line-height: 1.25;
1980 font-weight: normal;
1981 text-overflow: ellipsis;
1982 overflow: hidden;
1983 display: -webkit-box;
1984 display: box;
1985 -webkit-box-orient: vertical;
1986 box-orient: vertical;
1987 -webkit-line-clamp: 3;
1988 line-clamp: 3;
1989 text-wrap: balance;
1990}
1991.card .meta {
1992 font-size: smaller;
1993 opacity: 0.75;
1994 margin: 0;
1995 text-overflow: ellipsis;
1996 overflow: hidden;
1997 display: -webkit-box;
1998 display: box;
1999 -webkit-box-orient: vertical;
2000 box-orient: vertical;
2001 -webkit-line-clamp: 5;
2002 line-clamp: 5;
2003}
2004.content-container[data-content-text-weight='1'] .card,
2005.card.no-image {
2006 .title {
2007 -webkit-line-clamp: 4;
2008 line-clamp: 4;
2009 }
2010 .meta {
2011 -webkit-line-clamp: 6;
2012 line-clamp: 6;
2013 }
2014}
2015.card .meta.domain {
2016 opacity: 1;
2017 color: var(--text-insignificant-color);
2018
2019 .domain {
2020 color: var(--link-color);
2021 }
2022}
2023.card:visited .meta .domain {
2024 color: var(--link-visited-color);
2025}
2026.card .meta .domain * {
2027 vertical-align: middle;
2028}
2029a.card {
2030 text-decoration: none;
2031 transition: opacity 0.2s ease-in-out;
2032 touch-action: manipulation;
2033}
2034a.card:is(:hover, :focus) {
2035 border: 1px solid var(--link-color);
2036 box-shadow: 0 0 0 2px var(--link-faded-color);
2037}
2038a.card:is(:hover, :focus):visited {
2039 border-color: var(--link-visited-color);
2040}
2041.card.video {
2042 max-width: 320px;
2043 max-height: 320px;
2044 cursor: pointer;
2045
2046 lite\-youtube {
2047 pointer-events: none;
2048 }
2049}
2050.card.video iframe {
2051 width: 100%;
2052 height: 100%;
2053}
2054.card.card-post {
2055 flex-direction: row-reverse;
2056
2057 .title {
2058 font-weight: 500;
2059 display: block;
2060 white-space: nowrap;
2061 overflow: hidden;
2062 text-overflow: ellipsis;
2063 }
2064
2065 .meta {
2066 -webkit-line-clamp: 5;
2067 line-clamp: 5;
2068 opacity: 1;
2069 /* font-size: inherit; */
2070 }
2071}
2072.status.large .card.large.card-post,
2073.status-carousel
2074 .content-container[data-content-text-weight='1']
2075 .card.large.card-post {
2076 flex-direction: column-reverse;
2077}
2078.card-byline-author {
2079 display: inline-flex;
2080 gap: 4px;
2081 color: var(--text-insignificant-color);
2082 padding: 2px 8px;
2083 align-items: flex-start;
2084
2085 .icon {
2086 min-height: 1em;
2087 }
2088
2089 .avatar {
2090 width: 16px !important;
2091 height: 16px !important;
2092 opacity: 0.8;
2093 vertical-align: middle;
2094 }
2095}
2096
2097/* POLLS */
2098
2099.poll {
2100 display: inline-block;
2101 transition: opacity 0.2s ease-in-out;
2102 margin-top: 8px;
2103 border-radius: 16px;
2104 border: 1px solid var(--outline-color);
2105 background-color: var(--bg-faded-color);
2106 background-image: linear-gradient(
2107 to bottom,
2108 var(--bg-color) 50%,
2109 var(--bg-faded-color)
2110 );
2111 /* overflow: hidden; */
2112 box-shadow: inset 0 0 0 1px var(--bg-color);
2113 min-width: 50%;
2114}
2115.poll.loading {
2116 opacity: 0.5;
2117 pointer-events: none;
2118}
2119.poll.read-only {
2120 pointer-events: none;
2121}
2122.poll-options {
2123 display: flex;
2124 flex-direction: column;
2125 gap: 4px;
2126 padding: 4px;
2127}
2128.poll-option {
2129 padding: 4px 8px;
2130 display: flex;
2131 gap: 16px;
2132 justify-content: space-between;
2133 align-items: center;
2134 position: relative;
2135}
2136.poll-option > * {
2137 z-index: 1;
2138}
2139.poll-option:after {
2140 content: '';
2141 position: absolute;
2142 inset: 0;
2143 border-radius: 4px;
2144 background-color: var(--link-faded-color);
2145 opacity: 0;
2146 pointer-events: none;
2147 transition: all 0.2s ease-in-out;
2148 z-index: 0;
2149}
2150.poll-option:first-child:after {
2151 border-start-start-radius: 12px;
2152 border-start-end-radius: 12px;
2153}
2154.poll-option:hover:after {
2155 opacity: 1;
2156}
2157.poll-option.poll-result:after {
2158 width: var(--percentage);
2159 opacity: 1;
2160}
2161.poll-label {
2162 width: 100%;
2163 display: flex;
2164 gap: 8px;
2165 cursor: pointer;
2166 z-index: 1;
2167}
2168.poll-label input:is([type='radio'], [type='checkbox']) {
2169 flex-shrink: 0;
2170 margin: 0 3px;
2171 min-height: 1.15em;
2172 accent-color: var(--link-color);
2173}
2174.poll-option-votes {
2175 flex-shrink: 0;
2176 font-size: 90%;
2177 opacity: 0.75;
2178 line-height: 1;
2179}
2180.poll-option-leading .poll-option-votes {
2181 font-weight: bold;
2182 opacity: 1;
2183}
2184.poll-vote-button {
2185 margin: 8px 0 0;
2186 margin-inline-start: 12px;
2187 margin-inline-end: 8px;
2188 /* padding-inline: 24px; */
2189 min-width: 160px;
2190}
2191.poll-meta {
2192 color: var(--text-insignificant-color);
2193 margin: 8px 16px;
2194 font-size: 90%;
2195 user-select: none;
2196
2197 > button:first-child {
2198 margin-inline-start: -8px;
2199 }
2200}
2201.poll-option-title {
2202 text-shadow: 0 1px var(--bg-color);
2203 line-height: 1.2;
2204}
2205.poll-option-title .icon {
2206 vertical-align: middle;
2207}
2208
2209/* EXTRA META */
2210
2211.status .extra-meta {
2212 padding-top: 8px;
2213 color: var(--text-insignificant-color);
2214 font-size: 90%;
2215}
2216.status .extra-meta .icon {
2217 vertical-align: text-bottom;
2218}
2219.status .extra-meta a {
2220 color: inherit;
2221 text-decoration: none;
2222 vertical-align: baseline;
2223 text-decoration-thickness: 1px;
2224 text-underline-offset: 3px;
2225}
2226.status .extra-meta a:is(:hover, :focus) {
2227 text-decoration: underline;
2228}
2229.status .extra-meta .edited:is(:hover, :focus) {
2230 cursor: pointer;
2231 color: var(--text-color);
2232}
2233.status.large .extra-meta {
2234 padding-top: 0;
2235 margin-inline-start: calc(-50px - 16px);
2236}
2237
2238/* EMOJI REACTIONS */
2239
2240.status.large .emoji-reactions {
2241 cursor: default;
2242 margin-inline-start: calc(-50px - 16px);
2243}
2244
2245/* ACTIONS */
2246
2247.status .actions {
2248 display: flex;
2249 gap: 8px;
2250}
2251.status.large .actions {
2252 padding-top: 4px;
2253 padding-bottom: 16px;
2254 margin-inline-start: calc(-50px - 16px);
2255 color: var(--text-insignificant-color);
2256 border-top: var(--hairline-width) solid var(--outline-color);
2257 margin-top: 8px;
2258}
2259.status.large .actions.disabled {
2260 pointer-events: none;
2261 opacity: 0.5;
2262}
2263.status .action.has-count {
2264 flex: 1;
2265}
2266.status .action > button {
2267 min-height: 40px;
2268 min-width: 40px;
2269 padding: 0 8px;
2270 font-variant-numeric: tabular-nums;
2271}
2272.status .action > button.plain {
2273 color: inherit;
2274 border: 1.5px solid transparent;
2275 backdrop-filter: none;
2276}
2277@media (hover: hover) {
2278 .status .action > button.plain:not(:disabled):hover {
2279 color: var(--link-color);
2280 background-color: var(--button-plain-bg-hover-color);
2281 }
2282 .status .action > button.plain.reblog-button:not(:disabled):hover {
2283 color: var(--reblog-color);
2284 }
2285}
2286.status .action > button.plain.reblog-button.checked {
2287 color: var(--reblog-color);
2288 border-color: var(--reblog-color);
2289}
2290@keyframes reblogged {
2291 5% {
2292 transform: translate(-2px, -2px);
2293 }
2294 10% {
2295 transform: translate(2px, 2px);
2296 }
2297 15% {
2298 transform: translate(0, 0);
2299 }
2300 100% {
2301 transform: translate(30px, -30px);
2302 opacity: 0;
2303 }
2304}
2305.status .action > button.plain.reblog-button.checked .icon {
2306 animation: reblogged 1s ease-in-out;
2307}
2308@media (hover: hover) {
2309 .status .action > button.plain.favourite-button:hover {
2310 color: var(--favourite-color);
2311 }
2312}
2313.status .action > button.plain.favourite-button.checked {
2314 color: var(--favourite-color);
2315 border-color: var(--favourite-color);
2316}
2317@keyframes hearted {
2318 15% {
2319 transform: scale(1.25) translateY(-1px);
2320 }
2321 30% {
2322 transform: scale(1);
2323 }
2324 45% {
2325 transform: scale(1.5) translateY(-2px);
2326 }
2327 100% {
2328 transform: scale(1);
2329 }
2330}
2331.status .action > button.plain.favourite-button.checked .icon {
2332 animation: hearted 1s ease-out;
2333}
2334.status .action > button.plain.bookmark-button.checked {
2335 color: var(--link-color);
2336 border-color: var(--link-color);
2337}
2338@keyframes bookmarked {
2339 25% {
2340 transform: translateY(-10px) rotate(10deg);
2341 opacity: 0.5;
2342 }
2343 50% {
2344 transform: translateY(0);
2345 opacity: 1;
2346 }
2347 75% {
2348 transform: translateY(-15px) rotate(-10deg);
2349 opacity: 0.5;
2350 }
2351 100% {
2352 transform: translateY(0);
2353 opacity: 1;
2354 }
2355}
2356.status .action > button.plain.bookmark-button.checked .icon {
2357 animation: bookmarked 1s ease-in-out;
2358}
2359
2360/* STATUS MENU */
2361
2362.status-menu {
2363 .szh-menu__item,
2364 .szh-menu__submenu {
2365 .icon + span {
2366 transition: opacity 1s ease;
2367 }
2368 &.szh-menu__item--hover .icon + span {
2369 opacity: 1;
2370 }
2371
2372 &.checked {
2373 &:not(.szh-menu__item--hover) {
2374 color: var(--checked-color) !important;
2375 }
2376
2377 .szh-menu__item:not(.szh-menu__item--hover) {
2378 color: inherit;
2379 }
2380
2381 .icon + span {
2382 opacity: 1;
2383 }
2384
2385 &,
2386 & .szh-menu__item {
2387 box-shadow:
2388 inset 0 -2px 0 var(--checked-color),
2389 inset 0 -16px 8px -16px var(--checked-color);
2390 }
2391 &:has(.szh-menu__item) {
2392 box-shadow: unset;
2393 }
2394 }
2395 }
2396
2397 .menu-reblog.checked {
2398 --checked-color: var(--reblog-color);
2399 }
2400 .menu-favourite.checked {
2401 --checked-color: var(--favourite-color);
2402 }
2403 .menu-bookmark.checked {
2404 --checked-color: var(--link-color);
2405 }
2406}
2407
2408/* ENHANCED CONTENT */
2409
2410.status .content pre {
2411 border-radius: 8px;
2412 padding: 8px;
2413 margin: 8px 0;
2414 overflow: auto;
2415 width: 100%;
2416 border: 1px solid var(--outline-color);
2417 background: linear-gradient(
2418 to bottom var(--forward),
2419 var(--bg-faded-color),
2420 transparent 160px
2421 );
2422 white-space: pre-wrap;
2423 line-height: 1.2;
2424}
2425
2426.status .content p code {
2427 color: var(--green-color);
2428}
2429
2430/* ACTIONS */
2431
2432.status-actions {
2433 display: flex;
2434 position: absolute;
2435 top: -6px;
2436 inset-inline-end: 8px;
2437 background-color: var(--bg-color);
2438 border-radius: 8px;
2439 z-index: 1;
2440 border: 1px solid var(--outline-color);
2441 box-shadow: 0 2px 6px -3px var(--drop-shadow-color);
2442 overflow: clip;
2443 opacity: 0;
2444 pointer-events: none;
2445 transform: translate3d(0, 6px, 0);
2446 transform-origin: var(--forward) center;
2447 transition:
2448 all 0.15s ease-out 0.3s,
2449 border-color 0.3s ease-out;
2450
2451 .timeline.contextual .replies[data-comments-level='4'] & {
2452 top: 0;
2453 }
2454
2455 @media (hover: hover) {
2456 transition: border-color 0.3s ease-out;
2457 }
2458
2459 button.plain {
2460 color: var(--text-insignificant-color);
2461 backdrop-filter: none;
2462 padding: 10px;
2463 border-radius: 8px;
2464 outline-offset: -5px;
2465 outline: 1px solid transparent;
2466
2467 &:is(:hover, :focus) {
2468 color: var(--text-color);
2469 background-color: var(--bg-faded-color);
2470 filter: none !important;
2471 box-shadow: inset 0 0 0 2px var(--bg-color);
2472 }
2473
2474 &.reblog-button.checked {
2475 color: var(--reblog-color);
2476 outline-color: var(--reblog-color);
2477 }
2478
2479 &.favourite-button.checked {
2480 color: var(--favourite-color);
2481 outline-color: var(--favourite-color);
2482 }
2483
2484 &.bookmark-button.checked {
2485 color: var(--link-color);
2486 outline-color: var(--link-color);
2487 }
2488 }
2489
2490 &:hover {
2491 border-color: var(--outline-hover-color);
2492 }
2493
2494 .status:focus &,
2495 .status:focus-within &,
2496 &.open {
2497 opacity: 1;
2498 pointer-events: auto;
2499 transform: translateX(0);
2500 }
2501 @media (pointer: coarse) {
2502 & {
2503 border-color: var(--outline-hover-color);
2504 }
2505 }
2506 @media (pointer: fine), (hover: hover) {
2507 .status:hover & {
2508 opacity: 1;
2509 pointer-events: auto;
2510 transform: translateX(0);
2511 }
2512 }
2513
2514 &.open {
2515 button.more-button {
2516 color: var(--text-color);
2517 background-color: var(--outline-color);
2518 box-shadow: inset 0 0 0 2px var(--bg-color);
2519 }
2520
2521 button:not(.more-button) {
2522 opacity: 0.3;
2523 }
2524 }
2525}
2526.timeline.contextual .descendant .status {
2527 --bg-gradient-rotation: -140deg;
2528 :dir(rtl) & {
2529 --bg-gradient-rotation: 140deg;
2530 }
2531
2532 --bg-gradient: linear-gradient(
2533 var(--bg-gradient-rotation),
2534 var(--bg-faded-color),
2535 transparent 75%
2536 );
2537
2538 &:focus {
2539 background-image: var(--bg-gradient);
2540 }
2541 &.visibility-direct:focus {
2542 background-image: var(--bg-gradient), var(--yellow-stripes);
2543 }
2544
2545 @media (pointer: fine), (hover: hover) {
2546 &:hover {
2547 background-image: var(--bg-gradient);
2548 }
2549 &.visibility-direct:hover {
2550 background-image: var(--bg-gradient), var(--yellow-stripes);
2551 }
2552 }
2553}
2554
2555/* BADGE */
2556
2557.status-badge {
2558 position: absolute;
2559 top: 4px;
2560 inset-inline-end: 4px;
2561 line-height: 0;
2562 pointer-events: none;
2563 opacity: 0.75;
2564}
2565.status-badge .favourite {
2566 color: var(--favourite-color);
2567}
2568.status-badge .reblog {
2569 color: var(--reblog-color);
2570}
2571.status-badge .bookmark {
2572 color: var(--link-color);
2573}
2574.status-badge .pin {
2575 color: var(--link-text-color);
2576}
2577@keyframes swoosh-from-right {
2578 0% {
2579 opacity: 0;
2580 transform: translateX(300%);
2581 }
2582 100% {
2583 opacity: 1;
2584 transform: translateX(0);
2585 }
2586}
2587@keyframes swoosh-from-left {
2588 0% {
2589 opacity: 0;
2590 transform: translateX(-300%);
2591 }
2592 100% {
2593 opacity: 1;
2594 transform: translateX(0);
2595 }
2596}
2597.status-badge > * {
2598 animation: swoosh-from-right 1s cubic-bezier(0.51, 0.28, 0.16, 1.26) both;
2599 :dir(rtl) & {
2600 animation-name: swoosh-from-left;
2601 }
2602}
2603.status-badge > *:nth-child(2) {
2604 animation-delay: 0.1s;
2605}
2606.status-badge > *:nth-child(3) {
2607 animation-delay: 0.2s;
2608}
2609.status-badge > *:nth-child(4) {
2610 animation-delay: 0.3s;
2611}
2612
2613/* MISC */
2614
2615.status-aside {
2616 padding: 0 16px 16px;
2617 padding-inline-start: 80px;
2618 color: var(--text-insignificant-color);
2619}
2620
2621.shortcode-emoji {
2622 width: auto;
2623 min-width: 1.2em;
2624 max-width: 100%;
2625 height: 1.2em;
2626 vertical-align: text-bottom;
2627 object-fit: contain;
2628 /* object-position: left; */
2629}
2630
2631/* EDIT HISTORY */
2632
2633#edit-history {
2634 min-height: 50vh;
2635 min-height: 50dvh;
2636
2637 h2 {
2638 margin: 0;
2639 padding: 0;
2640 }
2641
2642 ol,
2643 ol li {
2644 list-style: none;
2645 margin: 0;
2646 padding: 0;
2647 }
2648
2649 .history-item .status {
2650 border: 1px solid var(--outline-color);
2651 border-radius: 8px;
2652 pointer-events: none;
2653 }
2654
2655 .status {
2656 .invisible {
2657 display: revert;
2658 }
2659
2660 .hashtag-stuffing {
2661 white-space: normal;
2662 opacity: 1;
2663 }
2664
2665 a {
2666 color: var(--text-color);
2667 }
2668 }
2669}
2670
2671/* EMBED */
2672
2673#embed-post {
2674 > main > section {
2675 p {
2676 margin-block: 0.5em;
2677 }
2678 ul {
2679 margin: 0;
2680 padding-inline: 1em;
2681 }
2682 p + ul {
2683 margin-top: 0;
2684 padding-top: 0;
2685 }
2686 }
2687
2688 .embed-code {
2689 width: 100%;
2690 resize: vertical;
2691 min-height: 12em;
2692 max-height: 40vh;
2693 font-family: var(--monospace-font);
2694 font-size: 0.8em;
2695 border-color: var(--link-color);
2696 /* background-color: var(--bg-faded-color); */
2697 }
2698
2699 .links-list {
2700 li > a {
2701 display: -webkit-box;
2702 -webkit-line-clamp: 1;
2703 -webkit-box-orient: vertical;
2704 overflow: hidden;
2705 }
2706 }
2707
2708 .embed-preview {
2709 display: block;
2710 max-height: 40vh;
2711 overflow: auto;
2712 font-size: 0.9em;
2713 border: 2px dashed var(--link-light-color);
2714 border-radius: 8px;
2715 box-shadow:
2716 0 4px 8px -4px var(--drop-shadow-color),
2717 0 8px 32px -8px var(--drop-shadow-color);
2718 padding: 16px;
2719
2720 /* Interactive elements */
2721 button,
2722 a,
2723 video,
2724 audio,
2725 input,
2726 select,
2727 textarea,
2728 iframe,
2729 object,
2730 embed {
2731 pointer-events: none;
2732 }
2733
2734 blockquote {
2735 margin: 0 0 1em;
2736 border-inline-start: 4px solid var(--outline-color);
2737 padding-inline-start: 1em;
2738
2739 > p:first-child {
2740 margin-top: 0;
2741 }
2742 }
2743
2744 ul,
2745 ol {
2746 margin-inline: 0;
2747 padding-inline: 1em;
2748 }
2749
2750 figure {
2751 margin-inline: 0;
2752
2753 img,
2754 video,
2755 audio {
2756 max-width: 100%;
2757 height: auto;
2758 }
2759 }
2760 }
2761}
2762
2763/* DELETED */
2764
2765.status-deleted {
2766 opacity: 0.75;
2767}
2768.status-deleted-tag {
2769 color: var(--text-insignificant-color);
2770 text-transform: uppercase;
2771 font-size: 80%;
2772}
2773
2774/* MENU OPEN */
2775
2776.status-menu-open {
2777 background-color: var(--link-bg-hover-color) !important;
2778}
2779
2780/* FILTERED */
2781
2782#filtered-status-peek {
2783 user-select: none;
2784 -webkit-touch-callout: none;
2785 -webkit-user-drag: none;
2786}
2787
2788#filtered-status-peek main > p:first-child {
2789 margin-top: 0;
2790}
2791
2792#filtered-status-peek main .heading {
2793 white-space: nowrap;
2794 overflow: hidden;
2795 text-overflow: ellipsis;
2796}
2797
2798#filtered-status-peek {
2799 .status-link {
2800 margin: 8px 0 0;
2801 border-radius: 16px;
2802 border: var(--hairline-width) solid var(--divider-color);
2803 position: relative;
2804 max-height: 33vh;
2805 max-height: 33dvh;
2806 overflow: hidden;
2807
2808 &.truncated {
2809 .status {
2810 mask-image: linear-gradient(to bottom, #000 80px, transparent);
2811 }
2812
2813 &[data-read-more]:after {
2814 content: attr(data-read-more);
2815 line-height: 1;
2816 display: inline-block;
2817 position: absolute;
2818 --inset-offset: 16px;
2819 inset-block-end: var(--inset-offset);
2820 inset-inline-end: var(--inset-offset);
2821 color: var(--text-color);
2822 background-color: var(--bg-faded-color);
2823 border: 1px dashed var(--link-color);
2824 box-shadow:
2825 0 0 0 1px var(--bg-color),
2826 0 -5px 10px var(--bg-color),
2827 0 -5px 15px var(--bg-color),
2828 0 -5px 20px var(--bg-color);
2829 padding: 0.5em 0.75em;
2830 border-radius: 10em;
2831 font-size: 90%;
2832 white-space: nowrap;
2833 transition: transform 0.2s ease-out;
2834 }
2835
2836 &:is(:hover, :focus):after {
2837 color: var(--link-color);
2838 transform: translate(2px, 0);
2839 }
2840 }
2841
2842 .status {
2843 pointer-events: none;
2844 font-size: 90%;
2845 }
2846 }
2847}
2848
2849/* REACTIONS */
2850
2851#reactions-container main ul {
2852 list-style: none;
2853 margin: 0;
2854 padding: 8px 0;
2855 display: flex;
2856 flex-wrap: wrap;
2857 flex-direction: row;
2858 column-gap: 1.5em;
2859 row-gap: 16px;
2860}
2861#reactions-container main ul li {
2862 display: flex;
2863 flex-grow: 1;
2864 flex-basis: 16em;
2865 align-items: center;
2866 margin: 0;
2867 padding: 0;
2868 gap: 8px;
2869}
2870#reactions-container main ul li .account-block-acct {
2871 font-size: 80%;
2872 color: var(--text-insignificant-color);
2873 display: block;
2874}
2875#reactions-container .reactions-block {
2876 display: flex;
2877 flex-direction: column;
2878 align-self: center;
2879}
2880#reactions-container .reactions-block .favourite-icon {
2881 color: var(--favourite-color);
2882}
2883#reactions-container .reactions-block .reblog-icon {
2884 color: var(--reblog-color);
2885}
2886
2887/* ALT BADGE */
2888
2889.alt-badge {
2890 font-size: 12px;
2891 font-weight: bold;
2892 color: var(--media-fg-color);
2893 background-color: var(--media-bg-color);
2894 border: var(--hairline-width) solid var(--media-outline-color);
2895 /* mix-blend-mode: luminosity; */
2896 border-radius: 4px;
2897 padding: 4px;
2898 opacity: 0.65;
2899
2900 sup {
2901 vertical-align: super;
2902 font-weight: normal;
2903 line-height: 0;
2904 padding-inline-start: 2px;
2905 }
2906
2907 &.clickable {
2908 opacity: 0.75;
2909 border-width: 2px;
2910
2911 &:is(:hover, :focus):not(:active) {
2912 transition: 0.15s ease-out;
2913 transition-property: transform, opacity, mix-blend-mode;
2914 transform: scale(1.15);
2915 opacity: 0.9;
2916 mix-blend-mode: normal;
2917 }
2918 }
2919}
2920
2921/* VIEW TRANSITIONS */
2922@media not (prefers-reduced-motion: reduce) {
2923 :root {
2924 --media-swoosh-duration: 0.1s;
2925 }
2926 :root.slow-mo {
2927 --media-swoosh-duration: 3s;
2928 }
2929 ::view-transition-group(.media-swoosh) {
2930 animation-duration: var(--media-swoosh-duration);
2931 animation-fill-mode: forwards;
2932 animation-timing-function: var(--timing-function);
2933 }
2934 ::view-transition-old(.media-swoosh),
2935 ::view-transition-new(.media-swoosh) {
2936 overflow: clip;
2937 animation: none;
2938 width: 100%;
2939 height: 100%;
2940 }
2941 ::view-transition-old(.media-swoosh-in) {
2942 object-fit: cover;
2943 }
2944 ::view-transition-new(.media-swoosh-in) {
2945 object-fit: contain;
2946 }
2947 ::view-transition-old(.media-swoosh-out) {
2948 object-fit: contain;
2949 transform: scale(0.99); /* pressed down */
2950 }
2951 ::view-transition-new(.media-swoosh-out) {
2952 object-fit: cover;
2953 }
2954 .status .media :is(img, video) {
2955 view-transition-class: media-swoosh media-swoosh-in;
2956 }
2957 .carousel .carousel-item :is(img, video) {
2958 view-transition-class: media-swoosh media-swoosh-out;
2959 }
2960 /* delay render .media bg image */
2961 .carousel .carousel-item .media {
2962 animation: delayBg calc(var(--media-swoosh-duration) + 0.1s) steps(1)
2963 forwards;
2964 }
2965}
2966
2967@keyframes delayBg {
2968 from {
2969 background-image: none;
2970 }
2971 to {
2972 background-image: var(--bg-image);
2973 }
2974}
2975
2976.status .media :is(img, video),
2977.carousel .carousel-item :is(img, video) {
2978 transition-property: width, height;
2979 transition-timing-function: var(--timing-function);
2980 transition-duration: 0.1s;
2981 transition-behavior: allow-discrete;
2982}
2983
2984/* MATH */
2985
2986.math-block {
2987 color: var(--text-insignificant-color);
2988 margin: 8px 0;
2989 border-top: 1px dashed var(--outline-color);
2990 padding-top: 8px;
2991 display: flex;
2992 align-items: center;
2993 gap: 4px;
2994 font-size: 90%;
2995}
2996.status .inner-content math[display='block'] {
2997 background-image:
2998 linear-gradient(
2999 var(--divider-color) var(--hairline-width),
3000 transparent var(--hairline-width)
3001 ),
3002 linear-gradient(
3003 to right,
3004 var(--divider-color) var(--hairline-width),
3005 transparent var(--hairline-width)
3006 );
3007 background-size: var(--text-size) var(--text-size);
3008 overflow: auto;
3009
3010 --padding: 8px;
3011 background-position: center var(--padding);
3012 &:has(> mrow) {
3013 /* 0.5ex is for mrow from Temml-Local.css */
3014 background-position-y: calc(var(--padding) + 0.5ex);
3015 }
3016 padding: var(--padding);
3017 /* mask the padding with gradients */
3018 mask-image:
3019 linear-gradient(to top, transparent, black var(--padding)),
3020 linear-gradient(to bottom, transparent, black var(--padding)),
3021 linear-gradient(to left, transparent, black var(--padding)),
3022 linear-gradient(to right, transparent, black var(--padding));
3023 mask-composite: intersect;
3024
3025 animation: appear-smooth 0.3s ease-out;
3026 *:nth-child(even):not(:has(*)) {
3027 /* sprinkle a bit more gradual magical feel */
3028 animation: appear 1s ease-out;
3029 }
3030}