1 | $image-size: 150px;
|
2 |
|
3 | .str-chat__gallery {
|
4 | display: inline-flex;
|
5 | flex-wrap: wrap;
|
6 | justify-content: flex-end;
|
7 | overflow: hidden;
|
8 |
|
9 | &-image {
|
10 |
|
11 | width: $image-size;
|
12 | height: $image-size;
|
13 | background: var(--white);
|
14 | margin-bottom: 1px;
|
15 | margin-right: 1px;
|
16 | border: none;
|
17 | padding: 0;
|
18 | display: flex;
|
19 |
|
20 | &:hover {
|
21 | cursor: -moz-zoom-in;
|
22 | cursor: -webkit-zoom-in;
|
23 | cursor: zoom-in;
|
24 | }
|
25 |
|
26 | img {
|
27 | width: inherit;
|
28 |
|
29 | height: inherit;
|
30 | max-width: $image-size;
|
31 | object-fit: cover;
|
32 | }
|
33 | }
|
34 |
|
35 | &--square {
|
36 | max-width: 301px;
|
37 | }
|
38 |
|
39 | &--square &-image:nth-child(even) {
|
40 | margin-right: 0;
|
41 | }
|
42 | }
|
43 |
|
44 | .livestream.str-chat,
|
45 | .messaging.str-chat,
|
46 | .commerce.str-chat,
|
47 | .team.str-chat {
|
48 | .str-chat {
|
49 | &__gallery {
|
50 | margin: 4px 0;
|
51 |
|
52 | &-image {
|
53 | width: $image-size;
|
54 | height: $image-size;
|
55 | }
|
56 |
|
57 | &-placeholder {
|
58 | position: relative;
|
59 | width: $image-size;
|
60 |
|
61 | max-width: $image-size;
|
62 | height: $image-size;
|
63 | color: var(--white);
|
64 | display: flex;
|
65 | align-items: center;
|
66 | justify-content: center;
|
67 | background-size: cover;
|
68 | background-position: top left;
|
69 | background-repeat: no-repeat;
|
70 | cursor: -moz-zoom-in;
|
71 | cursor: -webkit-zoom-in;
|
72 | cursor: pointer;
|
73 | border: none;
|
74 |
|
75 | p {
|
76 | position: relative;
|
77 | z-index: 1;
|
78 | font-size: 16px;
|
79 | }
|
80 |
|
81 | &::after {
|
82 | content: '';
|
83 | position: absolute;
|
84 | top: 0;
|
85 | left: 0;
|
86 | width: 100%;
|
87 | height: 100%;
|
88 | background-color: var(--overlay-dark);
|
89 | z-index: 0;
|
90 | }
|
91 | }
|
92 | }
|
93 | }
|
94 | }
|
95 |
|
96 | .commerce.str-chat {
|
97 | .str-chat__gallery {
|
98 | width: calc(100% - 30px);
|
99 | display: grid;
|
100 | grid-template-columns: 1fr 1fr;
|
101 | grid-auto-rows: 100px;
|
102 |
|
103 | &-image,
|
104 | &-placeholder {
|
105 | width: 100%;
|
106 | height: 100%;
|
107 | }
|
108 | }
|
109 |
|
110 | .str-chat__message-commerce {
|
111 | .str-chat__gallery {
|
112 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 2px;
|
113 | }
|
114 |
|
115 | &--right {
|
116 | .str-chat__gallery {
|
117 | border-radius: var(--border-radius) var(--border-radius) 2px var(--border-radius);
|
118 | }
|
119 | }
|
120 | }
|
121 | }
|