alice.mosphere.at
this repo has no description
1.media-post {
2 --item-radius: 16px;
3 position: relative;
4 animation: appear-smooth 1s ease-out;
5
6 &:is(.filtered, .has-spoiler:not(.show-media)) :is(img, video) {
7 /* filter: blur(32px);
8 image-rendering: crisp-edges;
9 image-rendering: pixelated; */
10 opacity: 0;
11 animation: none !important;
12 }
13
14 &.filtered[data-filtered-text]:before {
15 content: attr(data-filtered-text);
16 }
17 &.has-spoiler[data-spoiler-text]:before {
18 content: attr(data-spoiler-text);
19 }
20
21 &.filtered[data-filtered-text]:before,
22 &.has-spoiler[data-spoiler-text]:before {
23 pointer-events: none;
24 position: absolute;
25 top: 0;
26 inset-inline-start: 0;
27 z-index: 1;
28 background-color: var(--bg-blur-color);
29 margin: 8px;
30 padding: 4px 6px;
31 border-radius: calc(var(--item-radius) / 2);
32 font-size: 90%;
33 border: var(--hairline-width) dashed var(--bg-color);
34 word-break: break-word;
35 word-wrap: break-word;
36 overflow-wrap: break-word;
37 /* mix-blend-mode: luminosity; */
38 -webkit-line-clamp: 3;
39 line-clamp: 3;
40 -webkit-box-orient: vertical;
41 box-orient: vertical;
42 display: -webkit-box;
43 display: box;
44 overflow: hidden;
45 z-index: 2;
46
47 > * {
48 pointer-events: none;
49 }
50 }
51
52 &.has-spoiler.show-media[data-spoiler-text]:before {
53 mix-blend-mode: normal;
54 backdrop-filter: blur(4px);
55 }
56
57 .media {
58 border-radius: var(--item-radius);
59 overflow: hidden;
60 position: relative;
61 display: block;
62 aspect-ratio: 1 !important;
63
64 &:before {
65 position: absolute;
66 inset: 0;
67 content: '';
68 border: 1px solid var(--outline-color);
69 border-radius: inherit;
70 }
71
72 &:not(.media-audio) {
73 background-color: var(--average-color, var(--media-bg-color));
74 background-clip: padding-box;
75 }
76
77 @media (hover: hover) {
78 &:hover {
79 --drop-shadow: var(--drop-shadow-color);
80 position: relative;
81 z-index: 1;
82 box-shadow:
83 0 8px 16px -4px var(--drop-shadow),
84 0 4px 8px var(--drop-shadow);
85
86 @media (prefers-color-scheme: dark) {
87 --drop-shadow: var(--link-color);
88 }
89 }
90 }
91
92 &:active:not(:has(button:active)) {
93 box-shadow: none;
94 filter: brightness(0.8);
95 transform: scale(0.99);
96 }
97
98 video,
99 img,
100 audio {
101 border-radius: 16px;
102 /* object-fit: scale-down; */
103 object-fit: cover;
104 width: 100%;
105 height: 100%;
106 vertical-align: top;
107 }
108
109 :not(.filtered, .has-spoiler) &:is(:hover, :focus) img {
110 /* Less delay here to make it feel more responsive */
111 animation: position-object 5s ease-in-out 0.1s 5;
112 animation-duration: var(--anim-duration, 5s);
113 }
114 }
115
116 &.has-spoiler .media:not(.media-audio) {
117 background-image: radial-gradient(
118 circle at 50% 50%,
119 var(--average-color, var(--bg-faded-color)),
120 var(--bg-color) 20em
121 );
122 }
123}