1 | .str-chat__li {
|
2 | display: block;
|
3 | position: relative;
|
4 |
|
5 | .quoted-message {
|
6 | display: flex;
|
7 | align-items: flex-end;
|
8 | margin-bottom: var(--xxs-m);
|
9 |
|
10 | &-inner {
|
11 | display: flex;
|
12 | text-align: start;
|
13 | align-items: flex-end;
|
14 | background: var(--grey-whisper);
|
15 | border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
|
16 | max-width: 408px;
|
17 | padding: var(--xxs-p) var(--xs-p);
|
18 |
|
19 | .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
|
20 | border: none;
|
21 | border-radius: var(--border-radius-md);
|
22 | }
|
23 |
|
24 | .str-chat__message-attachment {
|
25 | &--image:first-of-type {
|
26 | max-height: 48px;
|
27 | max-width: 48px;
|
28 | border-radius: var(--border-radius-md);
|
29 | }
|
30 |
|
31 | img {
|
32 | border-radius: var(--border-radius-md);
|
33 | }
|
34 |
|
35 | &--file:first-of-type {
|
36 | background: var(--white);
|
37 | border-radius: var(--border-radius-md);
|
38 | border-bottom: 1px solid var(--grey-whisper);
|
39 | min-width: 33%;
|
40 | }
|
41 | }
|
42 |
|
43 | :nth-child(2) {
|
44 | margin-left: var(--xs-m);
|
45 | }
|
46 | }
|
47 |
|
48 | &.mine {
|
49 | .quoted-message-inner {
|
50 | background: var(--white-snow);
|
51 | }
|
52 | }
|
53 | }
|
54 |
|
55 |
|
56 | &--top,
|
57 | &--single {
|
58 | margin: 24px 0 0;
|
59 |
|
60 | .str-chat__message {
|
61 | &-attachment--img,
|
62 | &-attachment-card,
|
63 | .str-chat__gallery {
|
64 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
65 | calc(var(--border-radius-sm) / 2);
|
66 | }
|
67 |
|
68 | &.str-chat__message--has-text.str-chat__message--has-attachment {
|
69 | .str-chat__message-attachment--img,
|
70 | .str-chat__message-attachment-card {
|
71 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
72 | calc(var(--border-radius-sm) / 2);
|
73 | }
|
74 | }
|
75 |
|
76 | &--me {
|
77 | text-align: right;
|
78 | .str-chat__message {
|
79 | &-attachment--img,
|
80 | &-attachment-card {
|
81 | border-radius: var(--border-radius) var(--border-radius)
|
82 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
83 | }
|
84 | }
|
85 |
|
86 | &.str-chat__message--has-text.str-chat__message--has-attachment {
|
87 | .str-chat__message-attachment--img,
|
88 | .str-chat__message-attachment-card {
|
89 | border-radius: var(--border-radius) var(--border-radius)
|
90 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
91 | }
|
92 | }
|
93 |
|
94 | .str-chat__gallery {
|
95 | border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
|
96 | var(--border-radius);
|
97 | }
|
98 |
|
99 | &.str-chat__message--has-text {
|
100 | .str-chat__gallery {
|
101 | border-radius: var(--border-radius) var(--border-radius)
|
102 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
103 | }
|
104 | }
|
105 | }
|
106 | }
|
107 | }
|
108 |
|
109 | &--middle {
|
110 | margin: 0;
|
111 |
|
112 | .str-chat__message {
|
113 | &-attachment--img,
|
114 | &-attachment-card,
|
115 | .str-chat__gallery {
|
116 | border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
|
117 | calc(var(--border-radius-sm) / 2);
|
118 | }
|
119 |
|
120 | &.str-chat__message--has-text.str-chat__message--has-attachment {
|
121 | .str-chat__message-attachment--img,
|
122 | .str-chat__message-attachment-card,
|
123 | .str-chat__gallery {
|
124 | border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
|
125 | calc(var(--border-radius-sm) / 2);
|
126 | }
|
127 | }
|
128 |
|
129 | &--me {
|
130 | .str-chat__message {
|
131 | &-attachment--img,
|
132 | &-attachment-card,
|
133 | .str-chat__gallery {
|
134 | border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
135 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
136 | }
|
137 | }
|
138 |
|
139 | &.str-chat__message--has-text.str-chat__message--has-attachment {
|
140 | .str-chat__message-attachment--img,
|
141 | .str-chat__message-attachment-card,
|
142 | .str-chat__gallery {
|
143 | border-top-left-radius: calc(var(--border-radius-sm) / 2);
|
144 | }
|
145 | }
|
146 | }
|
147 | }
|
148 | }
|
149 |
|
150 | &--bottom {
|
151 | margin: 0 0 24px;
|
152 |
|
153 | .str-chat__message {
|
154 | &-attachment--img,
|
155 | &-attachment-card,
|
156 | .str-chat__gallery {
|
157 | border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
|
158 | calc(var(--border-radius-sm) / 2);
|
159 | }
|
160 |
|
161 | &.str-chat__message--has-text.str-chat__message--has-attachment {
|
162 | .str-chat__message-attachment--img,
|
163 | .str-chat__message-attachment-card,
|
164 | .str-chat__gallery {
|
165 | border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
|
166 | calc(var(--border-radius-sm) / 2);
|
167 | }
|
168 | }
|
169 |
|
170 | &--me {
|
171 | .str-chat__message {
|
172 | &-attachment--img,
|
173 | &-attachment-card,
|
174 | .str-chat__gallery {
|
175 | border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
176 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
177 | }
|
178 | }
|
179 |
|
180 | &.str-chat__message--has-text.str-chat__message--has-attachment {
|
181 | .str-chat__message-attachment--img,
|
182 | .str-chat__message-attachment-card,
|
183 | .str-chat__gallery {
|
184 | border-top-left-radius: calc(var(--border-radius-sm) / 2);
|
185 | }
|
186 | }
|
187 | }
|
188 | }
|
189 | }
|
190 |
|
191 | &--single {
|
192 | margin-bottom: var(--md-m);
|
193 | }
|
194 |
|
195 | &--top,
|
196 | &--middle {
|
197 | .str-chat__message {
|
198 | &-data {
|
199 | display: none;
|
200 | }
|
201 | }
|
202 | }
|
203 |
|
204 | &--top {
|
205 | .str-chat__message {
|
206 | &-text {
|
207 | &-inner {
|
208 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
209 | calc(var(--border-radius-sm) / 2);
|
210 | }
|
211 | }
|
212 |
|
213 | &--me {
|
214 | .str-chat__message-text {
|
215 | &-inner {
|
216 | border-radius: var(--border-radius) var(--border-radius)
|
217 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
218 | }
|
219 | }
|
220 | }
|
221 | }
|
222 | }
|
223 |
|
224 | &--single {
|
225 | .str-chat__message {
|
226 | &-text {
|
227 | &-inner {
|
228 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
229 | calc(var(--border-radius-sm) / 2);
|
230 |
|
231 | &--has-attachment {
|
232 | border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
|
233 | var(--border-radius) calc(var(--border-radius-sm) / 2);
|
234 | }
|
235 | }
|
236 | }
|
237 |
|
238 | &--me {
|
239 | .str-chat__message-text {
|
240 | &-inner {
|
241 | border-radius: var(--border-radius) var(--border-radius)
|
242 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
243 |
|
244 | &--has-attachment {
|
245 | border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
246 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
247 | }
|
248 | }
|
249 | }
|
250 | }
|
251 | }
|
252 | }
|
253 |
|
254 | &--bottom,
|
255 | &--middle {
|
256 | .str-chat__message {
|
257 | &-text {
|
258 | &-inner {
|
259 | border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
|
260 | calc(var(--border-radius-sm) / 2);
|
261 | }
|
262 | }
|
263 |
|
264 | &--me {
|
265 | .str-chat__message-text {
|
266 | &-inner {
|
267 | border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
268 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
269 |
|
270 | &--has-attachment {
|
271 | margin: 0;
|
272 | }
|
273 | }
|
274 | }
|
275 |
|
276 | .str-chat__message-attachment-card {
|
277 | margin: 0;
|
278 | padding: 0;
|
279 | border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
280 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
281 | }
|
282 | }
|
283 | }
|
284 | }
|
285 | }
|
286 |
|
287 | .str-chat__message,
|
288 | .str-chat__message-simple {
|
289 | display: inline-flex;
|
290 | justify-content: flex-start;
|
291 | align-items: flex-end;
|
292 | padding: 0;
|
293 | position: relative;
|
294 | margin: calc(var(--xxs-m) / 2) 0;
|
295 | width: 100%;
|
296 |
|
297 | &--system {
|
298 | text-align: center;
|
299 | align-items: center;
|
300 | width: 100%;
|
301 | flex-direction: column;
|
302 | padding: var(--xl-p);
|
303 | box-sizing: border-box;
|
304 | font-size: var(--xs-font);
|
305 |
|
306 | &__text {
|
307 | display: flex;
|
308 | align-items: center;
|
309 | width: 100%;
|
310 |
|
311 | p {
|
312 | margin: 0 24px;
|
313 | color: var(--grey);
|
314 | text-transform: uppercase;
|
315 | font-weight: var(--font-weight-bold);
|
316 | }
|
317 | }
|
318 |
|
319 | &__line {
|
320 | flex: 1;
|
321 | height: 1px;
|
322 | width: 100%;
|
323 | background-color: var(--overlay);
|
324 | }
|
325 |
|
326 | &__date {
|
327 | margin-top: 4px;
|
328 | text-transform: uppercase;
|
329 | color: var(--grey);
|
330 | }
|
331 | }
|
332 |
|
333 | &-inner {
|
334 | position: relative;
|
335 |
|
336 | @media screen and (min-width: 420px) {
|
337 | margin-right: 88px;
|
338 | margin-left: unset;
|
339 | }
|
340 |
|
341 | > .str-chat__message-simple__actions {
|
342 | position: absolute;
|
343 | top: 5px;
|
344 | left: calc(100% + 8px);
|
345 | }
|
346 | }
|
347 |
|
348 | &-attachment-container {
|
349 | display: flex;
|
350 | flex-direction: column;
|
351 | }
|
352 |
|
353 | &-text {
|
354 | display: inline-flex;
|
355 | justify-content: flex-start;
|
356 | align-items: center;
|
357 | padding: 0;
|
358 | position: relative;
|
359 |
|
360 | &-inner {
|
361 | position: relative;
|
362 | flex: 1;
|
363 | display: block;
|
364 | min-height: 32px;
|
365 | padding: var(--xxs-p) var(--xs-p);
|
366 | font-size: var(--lg-font);
|
367 | color: var(--black);
|
368 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
|
369 | background: var(--white-snow);
|
370 | border: 1px solid var(--border);
|
371 | margin-left: 0;
|
372 |
|
373 | p {
|
374 | |
375 |
|
376 | overflow-wrap: break-word;
|
377 | word-wrap: break-word;
|
378 | overflow: hidden;
|
379 | text-overflow: ellipsis;
|
380 |
|
381 |
|
382 | -ms-hyphens: auto;
|
383 | -moz-hyphens: auto;
|
384 | -webkit-hyphens: auto;
|
385 | hyphens: auto;
|
386 | }
|
387 |
|
388 |
|
389 | &--focused {
|
390 | background: var(--primary-color);
|
391 | border: 1px solid var(--primary-color);
|
392 | margin-right: 0;
|
393 | margin-left: 0;
|
394 | }
|
395 |
|
396 | &--has-attachment {
|
397 | border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
|
398 | calc(var(--border-radius-sm) / 2);
|
399 | }
|
400 |
|
401 |
|
402 | &--is-emoji {
|
403 | background: transparent;
|
404 | border: 1px solid transparent;
|
405 | font-size: var(--xxxl-font);
|
406 |
|
407 | padding-left: 0;
|
408 | padding-right: 0;
|
409 | }
|
410 | }
|
411 | }
|
412 |
|
413 | &-attachment {
|
414 | &--img {
|
415 | width: 100%;
|
416 | max-width: 480px;
|
417 | display: block;
|
418 | height: inherit;
|
419 | cursor: -moz-zoom-in;
|
420 | cursor: -webkit-zoom-in;
|
421 | cursor: zoom-in;
|
422 | }
|
423 | }
|
424 |
|
425 | &-data {
|
426 | margin-top: var(--xxs-m);
|
427 | width: 100%;
|
428 | font-size: var(--xs-font);
|
429 | color: var(--overlay-dark);
|
430 | position: absolute;
|
431 | white-space: nowrap;
|
432 | }
|
433 |
|
434 | &-name {
|
435 | font-weight: var(--font-weight-bold);
|
436 | margin-right: var(--xxs-m);
|
437 | }
|
438 |
|
439 | p {
|
440 | margin: 0;
|
441 | white-space: pre-line;
|
442 | line-height: 20px;
|
443 |
|
444 | &:not(:first-of-type) {
|
445 | margin: var(--sm-m) 0 0;
|
446 | }
|
447 | }
|
448 |
|
449 |
|
450 | &--me {
|
451 | display: flex;
|
452 | margin: var(--xxs-m) 0;
|
453 | justify-content: flex-end;
|
454 |
|
455 | .str-chat__message {
|
456 | &-text {
|
457 | display: flex;
|
458 | justify-content: flex-end;
|
459 | }
|
460 |
|
461 | &-attachment-container {
|
462 | display: flex;
|
463 | flex-direction: column;
|
464 | align-items: flex-end;
|
465 | }
|
466 |
|
467 | &-inner {
|
468 | justify-content: flex-end;
|
469 | align-items: flex-end;
|
470 | @media screen and (min-width: 420px) {
|
471 | margin-right: unset;
|
472 | margin-left: 88px;
|
473 | }
|
474 |
|
475 | > .str-chat__message-simple__actions {
|
476 | position: absolute;
|
477 | top: 5px;
|
478 | left: unset;
|
479 | right: calc(100% + 8px);
|
480 | }
|
481 | }
|
482 |
|
483 | &-text-inner {
|
484 | flex: initial;
|
485 | background: var(--grey-whisper);
|
486 | border-color: transparent;
|
487 | text-align: right;
|
488 | border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
|
489 | var(--border-radius);
|
490 | margin-right: 0;
|
491 |
|
492 | &--focused {
|
493 | background: var(--primary-color);
|
494 | border: 1px solid var(--primary-color);
|
495 | margin-left: 0;
|
496 | margin-right: 0;
|
497 | }
|
498 |
|
499 | &--has-attachment {
|
500 | border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
|
501 | calc(var(--border-radius-sm) / 2) var(--border-radius);
|
502 | }
|
503 |
|
504 | &--is-emoji {
|
505 | background: transparent;
|
506 | border: 1px solid transparent;
|
507 | font-size: var(--xxxl-font);
|
508 | padding-left: 0;
|
509 | padding-right: 0;
|
510 |
|
511 | p {
|
512 | line-height: 48px;
|
513 | }
|
514 | }
|
515 | }
|
516 |
|
517 | &-attachment {
|
518 | &--img {
|
519 | width: 100%;
|
520 | max-width: 480px;
|
521 | display: block;
|
522 | height: inherit;
|
523 | object-fit: cover;
|
524 | border: none;
|
525 | }
|
526 | }
|
527 |
|
528 | &-data {
|
529 | text-align: right;
|
530 | right: 0;
|
531 | width: fit-content;
|
532 | }
|
533 | }
|
534 | }
|
535 |
|
536 | &--with-reactions {
|
537 | margin-top: var(--md-m);
|
538 | }
|
539 |
|
540 | &-link {
|
541 | color: var(--primary-color);
|
542 | font-weight: var(--font-weight-bold);
|
543 | text-decoration: none;
|
544 | }
|
545 |
|
546 | &-mention {
|
547 | font-weight: var(--font-weight-bold);
|
548 | }
|
549 |
|
550 | &-url-link {
|
551 | max-width: 150px;
|
552 | text-overflow: ellipsis;
|
553 | overflow: hidden;
|
554 | white-space: nowrap;
|
555 | }
|
556 |
|
557 | &--inner {
|
558 | display: flex;
|
559 | flex-direction: column;
|
560 | align-items: flex-start;
|
561 | }
|
562 |
|
563 | .messaging {
|
564 | &.str-chat {
|
565 | .str-chat {
|
566 | &__message,
|
567 | &__message--me {
|
568 | margin: calc(var(--xxs-m) / 2) 0;
|
569 |
|
570 | &--with-reactions {
|
571 | margin-top: var(--lg-m);
|
572 | }
|
573 | }
|
574 |
|
575 | &__message-attachment--image {
|
576 | margin: calc(var(--xxs-m) / 2) 0;
|
577 | max-width: 480px;
|
578 | }
|
579 |
|
580 | &__message-attachment--card {
|
581 | margin: calc(var(--xxs-m) / 2) 0;
|
582 | line-height: normal;
|
583 | }
|
584 |
|
585 | &__message-attachment-card {
|
586 | margin: calc(var(--xxs-m) / 2) auto;
|
587 | line-height: normal;
|
588 | background: var(--grey-gainsboro);
|
589 |
|
590 | &--title {
|
591 | color: var(--primary-color);
|
592 | }
|
593 |
|
594 | &--text {
|
595 | display: none;
|
596 | }
|
597 |
|
598 | &--url {
|
599 | text-transform: lowercase;
|
600 | }
|
601 | }
|
602 |
|
603 | &__message--deleted {
|
604 | margin: 0 var(--xl-m);
|
605 | }
|
606 |
|
607 | &__li {
|
608 | &--middle {
|
609 | .str-chat__message {
|
610 | .str-chat__message-attachment--card,
|
611 | .str-chat__message-attachment--image {
|
612 | border-top-left-radius: calc(var(--border-radius-sm) / 2);
|
613 | }
|
614 | }
|
615 | }
|
616 | }
|
617 | }
|
618 | }
|
619 | }
|
620 |
|
621 |
|
622 | &--deleted {
|
623 | margin: 0 0 0 var(--xl-m);
|
624 | flex-direction: column;
|
625 | align-items: flex-start;
|
626 |
|
627 | &-inner {
|
628 | background: var(--grey-whisper);
|
629 | padding: var(--xs-p) var(--sm-p);
|
630 | border-radius: var(--border-radius);
|
631 | font-size: var(--sm-font);
|
632 | color: var(--grey);
|
633 | }
|
634 | }
|
635 |
|
636 | &--me {
|
637 | &.str-chat__message--deleted {
|
638 | margin: 0 var(--xl-m) 0 0;
|
639 | align-items: flex-end;
|
640 |
|
641 | &-inner {
|
642 | background: var(--white-smoke);
|
643 | padding: var(--xs-p) var(--sm-p);
|
644 | border-radius: var(--border-radius);
|
645 | font-size: var(--sm-font);
|
646 | color: var(--grey);
|
647 | }
|
648 | }
|
649 | }
|
650 |
|
651 |
|
652 | &--error,
|
653 | &--failed {
|
654 | margin: 0 0 var(--lg-m) var(--xl-m);
|
655 | font-size: var(--sm-font);
|
656 | padding: var(--xxs-p) 0;
|
657 |
|
658 | .str-chat__message-text-inner {
|
659 | background: var(--faded-red);
|
660 | border: 1px solid var(--faded-red);
|
661 | }
|
662 | }
|
663 |
|
664 | &--me {
|
665 | &.str-chat__message--error,
|
666 | &.str-chat__message--failed {
|
667 | border-left: initial;
|
668 | margin-right: var(--xl-m);
|
669 | }
|
670 | }
|
671 |
|
672 | .str-chat__message-attachment-file--item:hover {
|
673 | background: transparent;
|
674 | }
|
675 | }
|
676 |
|
677 | .str-chat {
|
678 | &__message-simple {
|
679 | font-family: var(--second-font);
|
680 |
|
681 | &__actions {
|
682 | display: flex;
|
683 |
|
684 | &__action {
|
685 | margin: var(--xxs-m);
|
686 | display: flex;
|
687 | align-items: center;
|
688 | height: 10px;
|
689 | cursor: pointer;
|
690 |
|
691 | svg {
|
692 | fill: var(--black);
|
693 | opacity: 0.5;
|
694 | }
|
695 |
|
696 | &:hover {
|
697 | svg {
|
698 | opacity: 1;
|
699 | }
|
700 | }
|
701 |
|
702 | &--thread,
|
703 | &--reactions {
|
704 | display: none;
|
705 | }
|
706 |
|
707 | &--options {
|
708 | position: relative;
|
709 | display: none;
|
710 | }
|
711 | }
|
712 | }
|
713 |
|
714 | &:hover {
|
715 | .str-chat__message-simple__actions__action--thread {
|
716 | display: flex;
|
717 | }
|
718 |
|
719 | .str-chat__message-simple__actions__action--reactions {
|
720 | display: flex;
|
721 | }
|
722 | }
|
723 |
|
724 | &-text {
|
725 | display: flex;
|
726 | justify-content: flex-end;
|
727 | padding: 0;
|
728 | position: relative;
|
729 | }
|
730 |
|
731 | &-text-inner {
|
732 | flex: initial;
|
733 | text-align: left;
|
734 | max-width: 460px;
|
735 |
|
736 | &.str-chat__message-simple-text-inner--is-emoji {
|
737 | background: transparent;
|
738 |
|
739 | p {
|
740 | line-height: 48px;
|
741 | }
|
742 | }
|
743 |
|
744 | p {
|
745 | text-align: left;
|
746 | }
|
747 |
|
748 | a {
|
749 | color: var(--primary-color);
|
750 | font-weight: var(--font-weight-bold);
|
751 | text-decoration: none;
|
752 | }
|
753 |
|
754 | blockquote {
|
755 | margin: 0 0 0 var(--xxs-m);
|
756 | font-style: italic;
|
757 | padding-left: var(--md-p);
|
758 | position: relative;
|
759 |
|
760 | &::before {
|
761 | font-size: var(--xxl-font);
|
762 | content: '\201C';
|
763 | font-style: italic;
|
764 | position: absolute;
|
765 | opacity: 0.5;
|
766 | top: 2px;
|
767 | left: -5px;
|
768 | }
|
769 | }
|
770 | }
|
771 |
|
772 | &--me {
|
773 | .str-chat__message-simple-reply-button {
|
774 | display: flex;
|
775 | justify-content: flex-end;
|
776 |
|
777 | .str-chat__message-replies-count-button {
|
778 | display: flex;
|
779 | flex-direction: row-reverse;
|
780 |
|
781 | svg {
|
782 | transform: scaleX(-1);
|
783 | margin-left: var(--xxs-m);
|
784 | margin-bottom: var(--xxs-m);
|
785 | margin-right: 0;
|
786 | }
|
787 | }
|
788 | }
|
789 |
|
790 | .str-chat__message-simple__actions {
|
791 | justify-content: flex-end;
|
792 | }
|
793 |
|
794 | .str-chat__message-attachment--image {
|
795 | max-width: 460px;
|
796 | }
|
797 |
|
798 | &-text-inner {
|
799 | &--is-emoji {
|
800 | background-color: transparent;
|
801 | line-height: 32px;
|
802 | }
|
803 | }
|
804 |
|
805 | .str-chat__message-simple__actions {
|
806 | order: -1;
|
807 | }
|
808 | }
|
809 |
|
810 | &:hover {
|
811 | .str-chat__message-simple__actions__action--options {
|
812 | display: flex;
|
813 | }
|
814 |
|
815 | .str-chat__message-simple__actions__action--reactions {
|
816 | display: flex;
|
817 | }
|
818 |
|
819 | .str-chat__message-simple__actions__action--thread {
|
820 | display: flex;
|
821 | }
|
822 |
|
823 | @media screen and (max-width: 960px) {
|
824 | .str-chat__message-simple__actions__action--options {
|
825 | display: none;
|
826 | }
|
827 |
|
828 | .str-chat__message-simple__actions__action--reactions {
|
829 | display: none;
|
830 | }
|
831 |
|
832 | .str-chat__message-simple__actions__action--thread {
|
833 | display: none;
|
834 | }
|
835 | }
|
836 | }
|
837 | }
|
838 | }
|
839 |
|
840 | .str-chat__simple-message--error-message {
|
841 | text-align: left;
|
842 | text-transform: uppercase;
|
843 | font-size: var(--xs-font);
|
844 | opacity: 0.5;
|
845 | }
|
846 |
|
847 | .str-chat__message-simple-status {
|
848 | margin: var(--xs-m) 0 var(--xs-m) var(--xs-m);
|
849 | order: 3;
|
850 | position: absolute;
|
851 | left: 100%;
|
852 | bottom: 0;
|
853 | line-height: 1;
|
854 | display: flex;
|
855 | justify-content: flex-end;
|
856 | align-items: center;
|
857 | z-index: 1;
|
858 |
|
859 | &-number {
|
860 | font-size: var(--xs-font);
|
861 | margin-left: 4px;
|
862 | position: absolute;
|
863 | left: 100%;
|
864 | color: var(--overlay-dark);
|
865 | }
|
866 |
|
867 | > .str-chat__avatar,
|
868 | > .str-chat-angular__avatar-host > .str-chat__avatar {
|
869 | align-self: flex-end;
|
870 | margin-right: 0;
|
871 | }
|
872 |
|
873 | > .str-chat__tooltip {
|
874 | display: none;
|
875 | max-width: 300px;
|
876 | min-width: 100px;
|
877 | text-align: center;
|
878 | }
|
879 |
|
880 | &:hover {
|
881 | > .str-chat__tooltip {
|
882 | display: block;
|
883 | }
|
884 | }
|
885 |
|
886 | &::after {
|
887 | position: absolute;
|
888 | bottom: 100%;
|
889 | right: 0;
|
890 | content: ' ';
|
891 | width: 15px;
|
892 | height: 15px;
|
893 | }
|
894 | }
|
895 |
|
896 | .str-chat__message-simple {
|
897 | .str-chat__message-attachment-card {
|
898 | margin: 0;
|
899 | background: var(--white);
|
900 | border: 1px solid var(--border);
|
901 |
|
902 | &--content {
|
903 | background: var(--grey-gainsboro);
|
904 | }
|
905 |
|
906 | &--text {
|
907 | display: none;
|
908 | }
|
909 | }
|
910 |
|
911 | .str-chat__message-attachment--file {
|
912 | margin: 0;
|
913 | background: var(--white);
|
914 | border-color: transparent;
|
915 | border: 1px solid var(--grey-gainsboro);
|
916 | border-radius: var(--border-radius-md);
|
917 |
|
918 | .str-chat__message-attachment-file--item {
|
919 | border-color: transparent;
|
920 | padding: 0 var(--xs-p);
|
921 | }
|
922 |
|
923 | &:first-of-type {
|
924 | border-radius: var(--border-radius) var(--border-radius) 0 0;
|
925 | border-bottom: transparent;
|
926 | }
|
927 |
|
928 | &:last-of-type {
|
929 | border-top-color: transparent;
|
930 | border-radius: 0 0 var(--border-radius) calc(var(--border-radius-sm) / 2);
|
931 |
|
932 | &:first-of-type {
|
933 | border-bottom: 1px solid var(--grey-gainsboro);
|
934 | border-top: 1px solid var(--grey-gainsboro);
|
935 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
936 | calc(var(--border-radius-sm) / 2);
|
937 | }
|
938 | }
|
939 | }
|
940 |
|
941 | .str-chat__message-attachment-file--item {
|
942 | border-radius: 0;
|
943 | }
|
944 |
|
945 | &--me {
|
946 | .str-chat__message-attachment-card {
|
947 | border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
|
948 | var(--border-radius-sm);
|
949 | }
|
950 |
|
951 | .str-chat__message-attachment--file {
|
952 | background: var(--grey-gainsboro);
|
953 |
|
954 | &:last-of-type {
|
955 | border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
|
956 |
|
957 | &:first-of-type {
|
958 | border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
|
959 | var(--border-radius);
|
960 | }
|
961 | }
|
962 | }
|
963 | }
|
964 | }
|
965 |
|
966 | .str-chat__list--thread {
|
967 | .str-chat__message-simple {
|
968 | &__actions {
|
969 | width: 30px;
|
970 | }
|
971 |
|
972 | &__actions__action--options {
|
973 | .str-chat__message-actions-box {
|
974 | right: unset;
|
975 | left: 100%;
|
976 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
977 | calc(var(--border-radius-sm) / 2);
|
978 | }
|
979 | }
|
980 | }
|
981 | }
|
982 |
|
983 | .livestream.str-chat {
|
984 | .str-chat {
|
985 | &__li {
|
986 | &--single {
|
987 | margin: 0;
|
988 | }
|
989 | }
|
990 | }
|
991 | }
|
992 |
|
993 | @media screen and (max-width: 960px) {
|
994 | .str-chat__message-simple-text-inner {
|
995 | max-width: 218px;
|
996 | }
|
997 |
|
998 | .str-chat__message-simple-status {
|
999 | left: unset;
|
1000 | right: 8px;
|
1001 | bottom: 30px;
|
1002 | }
|
1003 | }
|
1004 |
|
1005 | .dark.str-chat {
|
1006 | .str-chat__message-simple {
|
1007 | &-text-inner {
|
1008 | background: var(--white-smoke);
|
1009 | color: var(--white);
|
1010 |
|
1011 | &--is-emoji {
|
1012 | background: transparent;
|
1013 | }
|
1014 | }
|
1015 |
|
1016 | &__actions {
|
1017 | svg {
|
1018 | fill: var(--white);
|
1019 | }
|
1020 | }
|
1021 |
|
1022 | &-data {
|
1023 | color: var(--white);
|
1024 | opacity: 0.5;
|
1025 | }
|
1026 |
|
1027 | .str-chat__message-attachment-card {
|
1028 | background: transparent;
|
1029 |
|
1030 | &--content {
|
1031 | background: var(--white-smoke);
|
1032 | }
|
1033 |
|
1034 | &--url {
|
1035 | color: var(--grey-gainsboro);
|
1036 | }
|
1037 | }
|
1038 |
|
1039 | .str-chat__message-attachment--file {
|
1040 | border-color: transparent;
|
1041 | background: var(--white-smoke);
|
1042 |
|
1043 | a,
|
1044 | span {
|
1045 | color: var(--white);
|
1046 | }
|
1047 |
|
1048 | span {
|
1049 | opacity: 0.5;
|
1050 | }
|
1051 | }
|
1052 |
|
1053 | .str-chat__message-simple-status {
|
1054 | &-number {
|
1055 | color: var(--grey-gainsboro);
|
1056 | }
|
1057 | }
|
1058 |
|
1059 | &--me {
|
1060 | .str-chat__message-simple {
|
1061 | &-text-inner {
|
1062 | background: var(--black);
|
1063 |
|
1064 | &--is-emoji {
|
1065 | background: transparent;
|
1066 | }
|
1067 | }
|
1068 |
|
1069 | .str-chat__message-attachment-card {
|
1070 | &--content {
|
1071 | background: var(--black);
|
1072 | }
|
1073 | }
|
1074 |
|
1075 | .str-chat__message-attachment--file {
|
1076 | background: var(--overlay);
|
1077 | }
|
1078 | }
|
1079 | }
|
1080 | }
|
1081 | }
|
1082 |
|
1083 | .dark.str-chat {
|
1084 | .str-chat__message-simple__actions__action--options .str-chat__actions-box {
|
1085 | background: var(--grey);
|
1086 | box-shadow: 0 0 2px 0 var(--overlay), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
|
1087 | }
|
1088 |
|
1089 | .str-chat__message {
|
1090 | &--error,
|
1091 | &--failed {
|
1092 | .str-chat__message-simple-text-inner {
|
1093 | background: var(--faded-red);
|
1094 | border: 1px solid var(--faded-red);
|
1095 | }
|
1096 | }
|
1097 | }
|
1098 | }
|
1099 |
|
1100 | .str-chat__message {
|
1101 | .str-chat__message-simple__actions__action--options {
|
1102 | .str-chat__message-actions-box {
|
1103 | left: 100%;
|
1104 | right: unset;
|
1105 |
|
1106 | &--reverse {
|
1107 | right: 100%;
|
1108 | left: unset;
|
1109 | border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
|
1110 | var(--border-radius);
|
1111 | }
|
1112 | }
|
1113 |
|
1114 | .str-chat__message-actions-box--mine {
|
1115 | right: 100%;
|
1116 | left: unset;
|
1117 | border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
|
1118 | var(--border-radius);
|
1119 |
|
1120 | &.str-chat__message-actions-box--reverse {
|
1121 | left: 100%;
|
1122 | right: unset;
|
1123 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
|
1124 | calc(var(--border-radius-sm) / 2);
|
1125 | }
|
1126 | }
|
1127 | }
|
1128 |
|
1129 | a[href^='mailto:'] {
|
1130 | -webkit-hyphens: none;
|
1131 | -moz-hyphens: none;
|
1132 | hyphens: none;
|
1133 | }
|
1134 | }
|
1135 |
|
1136 | @media screen and (max-width: 375px) {
|
1137 | .str-chat__message .str-chat__message-attachment--img {
|
1138 | max-width: 235px;
|
1139 | }
|
1140 | }
|
1141 |
|
1142 | @media screen and (max-width: 414px) {
|
1143 | .str-chat__message .str-chat__message-attachment--img {
|
1144 | max-width: 274px;
|
1145 | }
|
1146 | }
|
1147 |
|
1148 | @media only screen and (device-width: 375px) and (-webkit-device-pixel-ratio: 3) {
|
1149 | .str-chat__message .str-chat__message-attachment--img {
|
1150 | max-width: 240px;
|
1151 | }
|
1152 | }
|
1153 |
|
1154 | .str-chat {
|
1155 |
|
1156 | .mml-container {
|
1157 | display: flex;
|
1158 | padding-bottom: var(--xxs-p);
|
1159 | }
|
1160 |
|
1161 | .mml-icon {
|
1162 | font-family: 'Material Icons', sans-serif;
|
1163 | }
|
1164 |
|
1165 |
|
1166 | .mml-wrap {
|
1167 | display: block;
|
1168 | max-width: none;
|
1169 |
|
1170 | max-width: 345px;
|
1171 |
|
1172 | @media screen and (max-width: 375px) {
|
1173 | max-width: 220px;
|
1174 | }
|
1175 | }
|
1176 |
|
1177 | .mml-datepicker {
|
1178 | min-width: 180px;
|
1179 | }
|
1180 |
|
1181 |
|
1182 |
|
1183 | .mml-align-right .mml-btnlist--floating,
|
1184 | .mml-align-right .mml-carousel {
|
1185 | margin-left: auto;
|
1186 | }
|
1187 |
|
1188 | .mml-align-left .mml-btnlist--floating,
|
1189 | .mml-align-left .mml-carousel {
|
1190 | margin-right: auto;
|
1191 | }
|
1192 |
|
1193 | @media screen and (max-width: 960px) {
|
1194 | .mml-align-left .mml-carousel {
|
1195 | margin-left: -10px;
|
1196 | }
|
1197 |
|
1198 | .mml-align-right .mml-carousel {
|
1199 | margin-right: -10px;
|
1200 | }
|
1201 | }
|
1202 |
|
1203 |
|
1204 |
|
1205 | &.messaging {
|
1206 |
|
1207 | @media screen and (max-width: 960px) {
|
1208 | .mml-align-left .mml-carousel {
|
1209 | margin-left: -10px;
|
1210 | }
|
1211 |
|
1212 | .mml-align-right .mml-carousel {
|
1213 | margin-right: -10px;
|
1214 | }
|
1215 | }
|
1216 | }
|
1217 | }
|
1218 |
|
1219 | .str-chat__message-simple.mobile-press {
|
1220 | .str-chat__message-simple__actions__action--options {
|
1221 | display: flex;
|
1222 | }
|
1223 |
|
1224 | .str-chat__message-simple__actions__action--reactions {
|
1225 | display: flex;
|
1226 | }
|
1227 |
|
1228 | .str-chat__message-simple__actions__action--thread {
|
1229 | display: flex;
|
1230 | }
|
1231 | }
|