1 | .str-chat__virtual-list {
|
2 |
|
3 | font-size: 0;
|
4 |
|
5 | .str-chat__virtual-list-message-wrapper {
|
6 | padding: 1px var(--xl-p);
|
7 | width: 100%;
|
8 |
|
9 | .str-chat__message-simple {
|
10 | padding-bottom: var(--sm-p);
|
11 |
|
12 | &.str-chat__virtual-message__wrapper--first {
|
13 | padding-bottom: 0;
|
14 | padding-left: var(--xl-p);
|
15 |
|
16 | .str-chat__avatar,
|
17 | .str-chat__message-data.str-chat__message-simple-data {
|
18 | display: none;
|
19 | }
|
20 |
|
21 | &.str-chat__message-simple--me {
|
22 | padding-right: var(--xl-p);
|
23 | padding-left: 0;
|
24 |
|
25 | &.str-chat__virtual-message__wrapper--end {
|
26 | padding-right: 0;
|
27 | }
|
28 | }
|
29 |
|
30 | &.str-chat__virtual-message__wrapper--end {
|
31 | padding-bottom: var(--xs-p);
|
32 |
|
33 | .str-chat__message-data.str-chat__message-simple-data {
|
34 | display: block;
|
35 | position: relative;
|
36 | width: 100%;
|
37 | }
|
38 | }
|
39 | }
|
40 |
|
41 | &.str-chat__virtual-message__wrapper--group {
|
42 | align-items: center;
|
43 | padding-bottom: 0;
|
44 | padding-left: var(--xl-p);
|
45 |
|
46 | &.str-chat__message-simple--me {
|
47 | padding-right: var(--xl-p);
|
48 | padding-left: 0;
|
49 |
|
50 | &.str-chat__virtual-message__wrapper--end {
|
51 | padding-right: 0;
|
52 | }
|
53 | }
|
54 |
|
55 | .str-chat__message-data.str-chat__message-simple-data {
|
56 | display: block;
|
57 | position: relative;
|
58 | width: 100%;
|
59 | }
|
60 | }
|
61 |
|
62 | &.str-chat__virtual-message__wrapper--end {
|
63 | padding-bottom: var(--xs-p);
|
64 | padding-left: 0;
|
65 |
|
66 | .str-chat__avatar,
|
67 | .str-chat__message-data.str-chat__message-simple-data {
|
68 | display: block;
|
69 | }
|
70 | }
|
71 |
|
72 | .quoted-message {
|
73 | display: flex;
|
74 | align-items: flex-end;
|
75 | margin-bottom: var(--xxs-m);
|
76 | cursor: pointer;
|
77 |
|
78 | &-inner {
|
79 | display: flex;
|
80 | text-align: start;
|
81 | align-items: flex-end;
|
82 | background: var(--grey-whisper);
|
83 | border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
|
84 | max-width: 408px;
|
85 | padding: var(--xxs-p) var(--xs-p);
|
86 |
|
87 | .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
|
88 | border: none;
|
89 | border-radius: var(--border-radius-md);
|
90 | }
|
91 |
|
92 | .str-chat__message-attachment {
|
93 | &--image:first-of-type {
|
94 | max-height: 48px;
|
95 | max-width: 48px;
|
96 | border-radius: var(--border-radius-md);
|
97 | }
|
98 |
|
99 | img {
|
100 | border-radius: var(--border-radius-md);
|
101 | }
|
102 |
|
103 | &--file:first-of-type {
|
104 | background: var(--white);
|
105 | border-radius: var(--border-radius-md);
|
106 | border-bottom: 1px solid var(--grey-whisper);
|
107 | min-width: 33%;
|
108 | }
|
109 | }
|
110 |
|
111 | :nth-child(2) {
|
112 | margin-left: var(--xs-m);
|
113 | }
|
114 | }
|
115 |
|
116 | &.mine {
|
117 | .quoted-message-inner {
|
118 | background: var(--white-snow);
|
119 | }
|
120 | }
|
121 | }
|
122 | }
|
123 | }
|
124 |
|
125 | .str-chat__message.str-chat__message--deleted {
|
126 | align-items: initial;
|
127 | margin: 0;
|
128 | }
|
129 |
|
130 | .str-chat__typing-indicator {
|
131 | padding: 5px 40px;
|
132 | }
|
133 | }
|
134 |
|
135 | .giphy-preview-message {
|
136 | background: var(--white-snow);
|
137 | border-top: 2px solid var(--border);
|
138 | }
|
139 |
|
140 | .str-chat__virtual-message__wrapper {
|
141 | display: flex;
|
142 | padding: 10px 40px;
|
143 | flex-direction: row;
|
144 | position: relative;
|
145 |
|
146 | &:hover {
|
147 | background: ghostwhite;
|
148 | }
|
149 |
|
150 | > .str-chat__avatar {
|
151 | margin: 0;
|
152 | }
|
153 |
|
154 | > .str-chat__virtual-message__content {
|
155 | padding-left: 12px;
|
156 | }
|
157 |
|
158 | .str-chat__avatar--rounded {
|
159 | border-radius: var(--border-radius);
|
160 | }
|
161 |
|
162 | .str-chat__avatar-fallback {
|
163 | background-color: lightslategray;
|
164 | }
|
165 | }
|
166 |
|
167 | .str-chat__virtual-message__meta {
|
168 | display: flex;
|
169 | flex-direction: row;
|
170 | justify-content: space-between;
|
171 | align-items: center;
|
172 | width: 100%;
|
173 | }
|
174 |
|
175 | .str-chat__virtual-message__data {
|
176 | display: flex;
|
177 | flex-direction: row;
|
178 | align-items: flex-end;
|
179 | justify-content: space-between;
|
180 | min-width: 70px;
|
181 | margin-left: auto;
|
182 | }
|
183 |
|
184 | .str-chat__virtual-message__author {
|
185 | color: var(--primary-color);
|
186 | font-size: 1rem;
|
187 | }
|
188 |
|
189 | .str-chat__virtual-message__date {
|
190 | font-size: 0.7rem;
|
191 | opacity: 0.5;
|
192 | padding-left: 8px;
|
193 | display: block;
|
194 | margin-left: auto;
|
195 | }
|
196 |
|
197 | .str-chat__virtual-message__actions {
|
198 | position: relative;
|
199 | cursor: pointer;
|
200 |
|
201 | button {
|
202 | border: none;
|
203 | background: transparent;
|
204 | }
|
205 |
|
206 | svg {
|
207 | fill: var(--black);
|
208 | opacity: 0.5;
|
209 | }
|
210 |
|
211 | &:hover {
|
212 | svg {
|
213 | opacity: 1;
|
214 | }
|
215 | }
|
216 |
|
217 | .str-chat__message-actions-box {
|
218 | bottom: 10px;
|
219 | left: unset;
|
220 | right: 100%;
|
221 | border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
|
222 | var(--border-radius);
|
223 | }
|
224 | }
|
225 |
|
226 | .str-chat__virtual-message__content {
|
227 | display: flex;
|
228 | flex: 1;
|
229 | flex-direction: column;
|
230 | align-items: flex-start;
|
231 |
|
232 | .str-chat__message--deleted-inner {
|
233 | padding: 8px 0;
|
234 | }
|
235 | }
|
236 |
|
237 | .str-chat__virtual-message__text {
|
238 | padding-top: 5px;
|
239 | font-size: 0.9rem;
|
240 | display: flex;
|
241 | justify-content: space-between;
|
242 | width: 100%;
|
243 | word-break: break-word;
|
244 |
|
245 | p {
|
246 | padding-right: 16px;
|
247 | }
|
248 |
|
249 | a {
|
250 | color: var(--primary-color);
|
251 | text-decoration: none;
|
252 | font-weight: var(--font-weight-bold);
|
253 | }
|
254 | }
|
255 |
|
256 | .str-chat__virtual-message__wrapper--group {
|
257 | padding-top: 0;
|
258 |
|
259 | > .str-chat__avatar {
|
260 | display: none;
|
261 | }
|
262 |
|
263 | .str-chat__virtual-message__author {
|
264 | display: none;
|
265 | }
|
266 |
|
267 | .str-chat__virtual-message__content {
|
268 | padding-left: 50px;
|
269 |
|
270 | .str-chat__gallery {
|
271 | width: 100%;
|
272 | margin: 0;
|
273 | justify-content: unset;
|
274 | }
|
275 | }
|
276 | }
|
277 |
|
278 | .dark {
|
279 | .str-chat__virtual-message__wrapper {
|
280 | &:hover {
|
281 | background: var(--black20);
|
282 | }
|
283 | }
|
284 |
|
285 | .str-chat__virtual-message__text {
|
286 | color: ghostwhite;
|
287 | }
|
288 |
|
289 | .str-chat__virtual-message__date {
|
290 | color: var(--white);
|
291 | }
|
292 | }
|