1 | .str-chat__input-flat {
|
2 | background: var(--white);
|
3 | padding: var(--xs-p) var(--xl-p);
|
4 | position: relative;
|
5 | z-index: 1;
|
6 | width: 100%;
|
7 |
|
8 | &-quoted {
|
9 | border-top: 1px solid var(--black10);
|
10 |
|
11 | .quoted-message-preview {
|
12 | display: flex;
|
13 | flex-direction: column;
|
14 | align-items: center;
|
15 | margin-bottom: var(--xs-m);
|
16 | width: 100%;
|
17 | position: relative;
|
18 |
|
19 | &-header {
|
20 | font-size: var(--md-font);
|
21 | margin-bottom: var(--xs-m);
|
22 |
|
23 | .str-chat__square-button {
|
24 | position: absolute;
|
25 | right: 0;
|
26 | top: 0;
|
27 | margin: unset;
|
28 | padding: var(--xs-p);
|
29 | border-radius: var(--border-radius);
|
30 | cursor: pointer;
|
31 | }
|
32 | }
|
33 |
|
34 | &-content {
|
35 | display: flex;
|
36 | align-items: flex-end;
|
37 | background: var(--grey-whisper);
|
38 | border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
|
39 | max-width: 60%;
|
40 | padding: var(--xs-p) var(--sm-p);
|
41 |
|
42 | &-inner {
|
43 | display: flex;
|
44 | text-align: start;
|
45 | align-items: flex-end;
|
46 | word-break: break-all;
|
47 | word-wrap: break-word;
|
48 |
|
49 | .str-chat__message-attachment {
|
50 | margin: 0;
|
51 |
|
52 | &--image {
|
53 | width: 48px;
|
54 | }
|
55 |
|
56 | &--img,
|
57 | &--card {
|
58 | border-radius: var(--border-radius-md);
|
59 | max-height: 48px;
|
60 | max-width: 48px;
|
61 | width: 100%;
|
62 | }
|
63 |
|
64 | &--file {
|
65 | min-width: 33%;
|
66 | }
|
67 |
|
68 | &-file {
|
69 | &--item {
|
70 | background: var(--white);
|
71 | border-radius: var(--border-radius-md);
|
72 | border-left: none;
|
73 | padding: 0 var(--xs-p);
|
74 | }
|
75 | }
|
76 |
|
77 | &-card--image {
|
78 | border: none;
|
79 | border-radius: var(--border-radius-md);
|
80 | }
|
81 | }
|
82 |
|
83 | :nth-child(2) {
|
84 | margin-left: var(--xs-m);
|
85 | }
|
86 | }
|
87 | }
|
88 |
|
89 | .str-chat__message-attachment-card {
|
90 | margin: 0;
|
91 | min-height: unset;
|
92 |
|
93 | .str-chat__message-attachment-card--content {
|
94 | display: none;
|
95 | }
|
96 | }
|
97 | }
|
98 | }
|
99 |
|
100 | &-has-attachments {
|
101 | .str-chat__send-button {
|
102 | display: block;
|
103 | }
|
104 | }
|
105 |
|
106 | &-wrapper {
|
107 | display: flex;
|
108 | flex-wrap: wrap;
|
109 | }
|
110 |
|
111 | .str-chat__textarea {
|
112 | flex: 1;
|
113 |
|
114 | &.str-chat-angular__textarea {
|
115 | position: relative;
|
116 | }
|
117 | }
|
118 |
|
119 | .str-chat__textarea > textarea {
|
120 | min-height: 56px;
|
121 | background: var(--grey-whisper);
|
122 | border-radius: var(--border-radius-md);
|
123 | padding: 20px 69px;
|
124 | font-size: var(--lg-font);
|
125 | line-height: 17px;
|
126 | border: none;
|
127 | margin: 0;
|
128 |
|
129 | &:focus {
|
130 | border: none;
|
131 | color: var(--black);
|
132 | border-radius: var(--border-radius-md);
|
133 | box-shadow: 0 0 0 3px var(--primary-color);
|
134 | }
|
135 | }
|
136 |
|
137 | &-footer {
|
138 | padding: var(--xs-p) var(--xl-p);
|
139 | background: var(--white);
|
140 | }
|
141 |
|
142 | &-emojiselect {
|
143 | position: absolute;
|
144 | top: calc(100% - 45px);
|
145 | left: 25px;
|
146 | border: none;
|
147 | cursor: pointer;
|
148 | padding: 0;
|
149 | background-color: transparent;
|
150 |
|
151 | &.str-chat-angular__emojiselect {
|
152 | max-width: 28px;
|
153 | top: 50%;
|
154 | transform: translateY(-50%);
|
155 | cursor: initial;
|
156 | }
|
157 |
|
158 | svg {
|
159 | fill: var(--black);
|
160 | opacity: 0.5;
|
161 |
|
162 | &:hover {
|
163 | opacity: 1;
|
164 | }
|
165 | }
|
166 | }
|
167 |
|
168 | &-cooldown {
|
169 | display: flex;
|
170 | align-items: center;
|
171 | justify-content: flex-end;
|
172 | padding-left: var(--xs-p);
|
173 |
|
174 | .str-chat__message-input-cooldown-text {
|
175 | font-size: var(--xl-font);
|
176 | font-weight: var(--font-weight-bold);
|
177 | display: flex;
|
178 | align-items: center;
|
179 | justify-content: center;
|
180 | width: 50px;
|
181 | height: 50px;
|
182 | background-color: var(--grey);
|
183 | color: var(--white);
|
184 | border-radius: var(--border-radius-round);
|
185 | }
|
186 | }
|
187 |
|
188 | &--textarea-wrapper {
|
189 | display: flex;
|
190 | flex-wrap: wrap;
|
191 | flex: 1 0;
|
192 | position: relative;
|
193 |
|
194 | .str-chat__fileupload-wrapper {
|
195 | .str-chat__tooltip {
|
196 | bottom: 45px;
|
197 | right: 25px;
|
198 | }
|
199 | }
|
200 |
|
201 | .str-chat__emojiselect-wrapper {
|
202 | .str-chat__tooltip {
|
203 | bottom: 50px;
|
204 | left: 32px;
|
205 | right: unset;
|
206 |
|
207 | &::after {
|
208 | left: 5px;
|
209 | right: unset;
|
210 | }
|
211 | }
|
212 | }
|
213 | }
|
214 |
|
215 | .str-chat__input--emojipicker {
|
216 | left: 0;
|
217 | right: auto;
|
218 | }
|
219 |
|
220 | .rfu-dropzone {
|
221 | width: 100%;
|
222 | }
|
223 |
|
224 | .rfu-file-previewer {
|
225 | width: 100%;
|
226 | }
|
227 |
|
228 | .rfu-file-upload-button {
|
229 | position: absolute;
|
230 | top: calc(100% - 40px);
|
231 | right: 25px;
|
232 |
|
233 | svg {
|
234 | fill: var(--black);
|
235 | opacity: 0.5;
|
236 |
|
237 | &:hover {
|
238 | opacity: 1;
|
239 | }
|
240 | }
|
241 | }
|
242 | }
|
243 |
|
244 | .rfu-image-previewer,
|
245 | .rfu-image-previewer-angular-host {
|
246 | flex: 1 1 100%;
|
247 |
|
248 | &__image {
|
249 | width: 60px !important;
|
250 | height: 60px !important;
|
251 |
|
252 | .rfu-thumbnail__wrapper {
|
253 | width: 60px !important;
|
254 | height: 60px !important;
|
255 | border-radius: var(--border-radius-md);
|
256 |
|
257 | .rfu-thumbnail__overlay,
|
258 | .rfu-icon-button {
|
259 | padding: 0;
|
260 |
|
261 | svg {
|
262 | opacity: 0.9;
|
263 | height: 25px;
|
264 | width: 25px;
|
265 |
|
266 | path {
|
267 | fill: var(--white-snow);
|
268 | }
|
269 | }
|
270 | }
|
271 | }
|
272 | }
|
273 |
|
274 | .rfu-thumbnail-placeholder {
|
275 | width: 60px;
|
276 | height: 60px;
|
277 | border-radius: var(--border-radius-md);
|
278 | }
|
279 | }
|
280 |
|
281 | .commerce.str-chat {
|
282 | .str-chat__input-flat {
|
283 | padding: 8px 24px;
|
284 | background: transparent;
|
285 | }
|
286 | }
|
287 |
|
288 | .dark.str-chat {
|
289 | .str-chat__input-flat {
|
290 | background: var(--white5);
|
291 |
|
292 | textarea {
|
293 | background: var(--white5);
|
294 | border-radius: var(--border-radius-md);
|
295 | color: var(--white);
|
296 | }
|
297 |
|
298 | &-emojiselect,
|
299 | .rfu-file-upload-button {
|
300 | svg {
|
301 | fill: var(--white);
|
302 | }
|
303 | }
|
304 |
|
305 | &-quoted .quoted-message-preview-content {
|
306 | background: var(--black20);
|
307 | }
|
308 | }
|
309 |
|
310 | &.commerce {
|
311 | .str-chat__input-flat {
|
312 | background: none;
|
313 | }
|
314 | }
|
315 | }
|
316 |
|
317 | @media screen and (max-width: 960px) {
|
318 | .str-chat.messaging {
|
319 | .str-chat__input-flat {
|
320 | padding: var(--xs-p) var(--xs-p);
|
321 | }
|
322 | }
|
323 | }
|