1 | @mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
|
2 | height: min(
|
3 | var(#{$max-height-css-var}),
|
4 | min(var(#{$max-width-css-var}, Infinity) / var(--original-width, Infinity), 1px) *
|
5 | var(--original-height, Infinity)
|
6 | );
|
7 | }
|
8 |
|
9 | .str-chat__attachment,
|
10 | .str-chat__message-attachment {
|
11 | --attachment-max-width: 450px;
|
12 | --video-width: 300px;
|
13 |
|
14 | max-width: var(--attachment-max-width);
|
15 | }
|
16 |
|
17 | .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
|
18 | width: var(--video-width);
|
19 | }
|
20 |
|
21 | .str-chat__player-wrapper {
|
22 | position: relative;
|
23 | padding-top: 56.25%;
|
24 | .react-player,
|
25 | .str-chat__video-angular {
|
26 | position: absolute;
|
27 | top: 0;
|
28 | left: 0;
|
29 | width: 100%;
|
30 | height: 100%;
|
31 | }
|
32 | }
|
33 |
|
34 | .str-chat__message-attachment-dynamic-size {
|
35 | --video-max-height: 300px;
|
36 |
|
37 | max-height: var(--video-max-height);
|
38 |
|
39 | .str-chat__player-wrapper {
|
40 | @include clamped-height-from-original-image-dimensions(
|
41 | '--video-max-height',
|
42 | '--attachment-max-width'
|
43 | );
|
44 | padding-top: 0;
|
45 | position: static;
|
46 |
|
47 | max-height: var(--video-max-height);
|
48 | max-width: var(--attachment-max-width);
|
49 |
|
50 | .str-chat__video-angular,
|
51 | .react-player {
|
52 | position: static;
|
53 |
|
54 | max-height: var(--video-max-height);
|
55 | max-width: var(--attachment-max-width);
|
56 | }
|
57 | }
|
58 | }
|
59 |
|
60 |
|
61 | .str-chat__message .str-chat__player-wrapper .react-player {
|
62 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
|
63 | overflow: hidden;
|
64 | }
|
65 |
|
66 | .str-chat__message--me .str-chat__player-wrapper .react-player {
|
67 | border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
|
68 | overflow: hidden;
|
69 | }
|
70 |
|
71 | .str-chat__message {
|
72 | &-attachment {
|
73 | --attachment-max-width: 375px;
|
74 | width: 100%;
|
75 |
|
76 | border-radius: var(--border-radius);
|
77 | margin: var(--xs-m) auto var(--xs-m) 0;
|
78 | padding: 0;
|
79 | }
|
80 |
|
81 |
|
82 | &-attachment--giphy {
|
83 | max-width: unset;
|
84 | }
|
85 |
|
86 | &--me {
|
87 | .str-chat__message-attachment {
|
88 | padding-left: 0;
|
89 | margin: var(--xs-m) 0 var(--xs-m) auto;
|
90 | }
|
91 | }
|
92 | }
|
93 |
|
94 | .str-chat__message-team.thread-list {
|
95 | .str-chat__message-attachment {
|
96 | --attachment-max-width: 200px;
|
97 | }
|
98 | }
|
99 |
|
100 | .str-chat__message-attachment {
|
101 | overflow: hidden;
|
102 |
|
103 | &:hover {
|
104 | background: transparent;
|
105 | }
|
106 |
|
107 | &--card {
|
108 | &--no-image {
|
109 | height: 60px;
|
110 | }
|
111 |
|
112 | &--actions {
|
113 | height: auto;
|
114 | }
|
115 | }
|
116 |
|
117 | &-file {
|
118 | width: 100%;
|
119 |
|
120 | &--item {
|
121 | position: relative;
|
122 | height: 50px;
|
123 | display: flex;
|
124 | align-items: center;
|
125 | font-size: var(--md-font);
|
126 | line-height: 22px;
|
127 | border-left: 1px solid var(--border);
|
128 | width: auto;
|
129 | padding-left: var(--xxs-p);
|
130 |
|
131 | &:hover {
|
132 | background: var(--white);
|
133 | }
|
134 |
|
135 | .str-chat__message-attachment-file--item-text {
|
136 | display: flex;
|
137 | flex-direction: column;
|
138 | align-items: flex-start;
|
139 | justify-content: center;
|
140 | row-gap: 2px;
|
141 | width: 100%;
|
142 | min-width: 0;
|
143 |
|
144 | .str-chat__message-attachment-file--item-first-row {
|
145 | display: flex;
|
146 | align-items: center;
|
147 | justify-content: space-between;
|
148 | column-gap: 8px;
|
149 | width: 100%;
|
150 |
|
151 | .str-chat__message-attachment-file--item-name {
|
152 | font-weight: var(--font-weight-bold);
|
153 | color: var(--black);
|
154 |
|
155 | white-space: nowrap;
|
156 | overflow-y: visible;
|
157 |
|
158 | overflow-x: hidden;
|
159 | overflow-x: clip;
|
160 | text-overflow: ellipsis;
|
161 | min-width: 0;
|
162 | }
|
163 |
|
164 | .str-chat__message-attachment-file--item-download {
|
165 | display: flex;
|
166 |
|
167 | svg {
|
168 | width: 24px;
|
169 | height: 16px;
|
170 |
|
171 | path {
|
172 | fill: var(--black);
|
173 | }
|
174 | }
|
175 | }
|
176 | }
|
177 | }
|
178 |
|
179 | img,
|
180 | svg {
|
181 | margin-right: var(--xs-m);
|
182 | }
|
183 |
|
184 | &-text {
|
185 | max-width: 100%;
|
186 | white-space: nowrap;
|
187 | overflow: hidden;
|
188 | text-overflow: ellipsis;
|
189 | }
|
190 |
|
191 | span {
|
192 | line-height: 14px;
|
193 | font-size: var(--sm-font);
|
194 | font-weight: var(--font-weight-bold);
|
195 | text-transform: uppercase;
|
196 | display: block;
|
197 | color: var(--black);
|
198 | opacity: 0.5;
|
199 | }
|
200 | }
|
201 | }
|
202 |
|
203 | &--image {
|
204 | --image-max-height: 300px;
|
205 | max-height: var(--image-max-height);
|
206 | max-width: var(--attachment-max-width);
|
207 | border-radius: 0;
|
208 |
|
209 | &:hover {
|
210 | background: transparent;
|
211 | }
|
212 |
|
213 | img {
|
214 | @include clamped-height-from-original-image-dimensions(
|
215 | '--image-max-height',
|
216 | '--attachment-max-width'
|
217 | );
|
218 | width: auto;
|
219 | max-height: inherit;
|
220 | display: block;
|
221 | object-fit: cover;
|
222 | overflow: hidden;
|
223 |
|
224 | &:hover {
|
225 | background: transparent;
|
226 | }
|
227 | }
|
228 |
|
229 | &--actions {
|
230 | height: 320px;
|
231 |
|
232 | img {
|
233 | height: calc(320px - 40px);
|
234 | }
|
235 | }
|
236 | }
|
237 |
|
238 | &--media {
|
239 | width: 300px;
|
240 | }
|
241 |
|
242 | &-card {
|
243 | min-height: 60px;
|
244 | }
|
245 | }
|
246 |
|
247 | .str-chat__message-attachment:not(.str-chat__message-attachment-dynamic-size) {
|
248 | .str-chat__message-attachment--image {
|
249 | img {
|
250 | max-width: 100%;
|
251 | }
|
252 | }
|
253 | }
|
254 |
|
255 | .str-chat__message-attachment-dynamic-size {
|
256 | &.str-chat__message-attachment--svg-image {
|
257 | img {
|
258 | object-fit: contain;
|
259 | }
|
260 | }
|
261 |
|
262 | &.str-chat__message-attachment--image {
|
263 | width: auto;
|
264 | display: flex;
|
265 | justify-content: center;
|
266 | align-items: center;
|
267 | overflow: hidden;
|
268 | }
|
269 | }
|
270 |
|
271 | .str-chat__message-attachment-card__giphy-logo {
|
272 | height: 20px;
|
273 | width: auto;
|
274 | }
|
275 |
|
276 | .messaging {
|
277 | &.str-chat {
|
278 | .str-chat {
|
279 | &__message-attachment {
|
280 | &.str-chat__message-attachment--image--actions {
|
281 | .str-chat__message-attachment--img {
|
282 | max-height: 254px;
|
283 | }
|
284 | }
|
285 | }
|
286 | }
|
287 | }
|
288 | }
|
289 |
|
290 | .livestream.str-chat {
|
291 | .str-chat {
|
292 | &__message-attachment {
|
293 | &.str-chat__message-attachment--file {
|
294 | max-width: 100%;
|
295 |
|
296 | .str-chat__message-attachment-file--item {
|
297 | border-left: none;
|
298 |
|
299 | &:hover {
|
300 | background: var(--grey-whisper);
|
301 | }
|
302 | }
|
303 | }
|
304 | }
|
305 | }
|
306 |
|
307 | &.dark {
|
308 | .str-chat {
|
309 | &__message-attachment-file--item {
|
310 | a,
|
311 | span {
|
312 | color: var(--white);
|
313 | }
|
314 |
|
315 | &:hover {
|
316 | background: transparent;
|
317 | }
|
318 | }
|
319 | }
|
320 | }
|
321 | }
|