1 | .str-chat__thread {
|
2 | background: var(--grey-whisper);
|
3 | flex: 1 0 300px;
|
4 | min-width: 300px;
|
5 | max-width: 300px;
|
6 | font-family: var(--second-font);
|
7 | overflow: hidden;
|
8 | max-height: 100%;
|
9 | display: flex;
|
10 | flex-direction: column;
|
11 | padding-top: 0;
|
12 |
|
13 | .str-chat__thread-container {
|
14 | height: 100%;
|
15 | display: flex;
|
16 | flex-direction: column;
|
17 | width: 100%;
|
18 | }
|
19 |
|
20 | &--full {
|
21 | max-width: 100%;
|
22 | }
|
23 |
|
24 | &-header {
|
25 | position: relative;
|
26 | width: 100%;
|
27 | background: var(--grey-whisper);
|
28 | box-shadow: 0 1px 1px 0 var(--border);
|
29 | height: 70px;
|
30 | min-height: 70px;
|
31 | top: 0;
|
32 | display: flex;
|
33 | align-items: center;
|
34 | justify-content: space-between;
|
35 | padding: 0 var(--sm-p);
|
36 |
|
37 | &-details {
|
38 | font-size: var(--md-font);
|
39 | font-weight: bold;
|
40 |
|
41 | .str-chat__thread-header-channel-name {
|
42 | font-size: var(--sm-font);
|
43 | font-weight: normal;
|
44 | }
|
45 | }
|
46 | }
|
47 |
|
48 | &-start {
|
49 | border-radius: var(--border-radius-sm);
|
50 | margin: var(--xs-m) var(--xs-m) 0 var(--xs-m);
|
51 | padding: var(--xs-p);
|
52 | background: var(--grey-whisper);
|
53 | text-align: center;
|
54 | font-size: var(--sm-font);
|
55 | }
|
56 |
|
57 | &-list {
|
58 | height: 100%;
|
59 | overflow-y: auto;
|
60 | overflow-x: hidden;
|
61 | display: flex;
|
62 | flex-direction: column;
|
63 | padding-top: var(--sm-p);
|
64 |
|
65 | .str-chat__list {
|
66 | padding: 0;
|
67 | }
|
68 |
|
69 | .str-chat__message:first-of-type .str-chat__message-inner {
|
70 | margin-left: unset;
|
71 | margin-right: unset;
|
72 | }
|
73 |
|
74 | .str-chat__message-attachment.str-chat__message-attachment {
|
75 | &--file {
|
76 | border-radius: var(--border-radius-md);
|
77 | border-bottom: 1px solid var(--grey-whisper);
|
78 | }
|
79 |
|
80 | &--media {
|
81 | width: 100%;
|
82 | }
|
83 | }
|
84 |
|
85 | .quoted-message {
|
86 | display: flex;
|
87 | align-items: flex-end;
|
88 | margin-bottom: var(--xxs-m);
|
89 |
|
90 | &-inner {
|
91 | display: flex;
|
92 | text-align: start;
|
93 | align-items: flex-end;
|
94 | background: var(--grey-whisper);
|
95 | border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
|
96 | max-width: 408px;
|
97 | padding: var(--xxs-p) var(--xs-p);
|
98 |
|
99 | .str-chat__message-attachment.str-chat__message-attachment--file {
|
100 | display: none;
|
101 | }
|
102 |
|
103 | .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
|
104 | border-radius: unset;
|
105 | }
|
106 |
|
107 | .str-chat__message-attachment.str-chat__message-attachment--card {
|
108 | border: none;
|
109 | border-radius: var(--border-radius-md);
|
110 | }
|
111 |
|
112 | .str-chat__message-attachment {
|
113 | &--image:first-of-type {
|
114 | max-height: 48px;
|
115 | max-width: 48px;
|
116 | }
|
117 |
|
118 | img {
|
119 | border-radius: var(--border-radius-md);
|
120 | }
|
121 | }
|
122 |
|
123 | :nth-child(2) {
|
124 | margin-left: var(--xs-m);
|
125 | }
|
126 | }
|
127 | }
|
128 |
|
129 | .quoted-message.mine {
|
130 | .quoted-message-inner {
|
131 | background: var(--white);
|
132 | }
|
133 | }
|
134 | }
|
135 | }
|
136 |
|
137 | .messaging {
|
138 | &.str-chat {
|
139 | .str-chat {
|
140 | &__thread {
|
141 | margin-right: var(--xs-m);
|
142 | margin-top: var(--sm-m);
|
143 | border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
144 | overflow: hidden;
|
145 | background: var(--white);
|
146 | max-height: 100%;
|
147 | display: flex;
|
148 | flex-direction: column;
|
149 | padding-top: 0;
|
150 |
|
151 | &.str-chat__thread--full {
|
152 | position: fixed;
|
153 | top: 0;
|
154 | right: 0;
|
155 | height: 100vh;
|
156 | background: var(--white);
|
157 | z-index: 1000;
|
158 | margin: 0;
|
159 | width: 100vw;
|
160 | max-width: 100%;
|
161 | }
|
162 |
|
163 | .str-chat__gallery {
|
164 | justify-content: flex-end;
|
165 | border-radius: 0;
|
166 |
|
167 | &-image,
|
168 | &-placeholder {
|
169 | width: 100px;
|
170 | height: 100px;
|
171 | }
|
172 | }
|
173 | }
|
174 |
|
175 | &__thread-list {
|
176 | padding: var(--sm-p) var(--sm-p) 0 var(--sm-p);
|
177 |
|
178 | > .str-chat__list {
|
179 | background: transparent;
|
180 | padding: 0;
|
181 |
|
182 | .str-chat__list--thread {
|
183 | padding: 0;
|
184 | }
|
185 | }
|
186 | }
|
187 |
|
188 | &__thread-header {
|
189 | z-index: 1;
|
190 | border: none;
|
191 |
|
192 | background: var(--white);
|
193 | box-shadow: 0 2px 9px 0 var(--border), 0 1px 0 0 var(--border);
|
194 |
|
195 | .str-chat__thread-header-details {
|
196 | width: 100%;
|
197 | }
|
198 |
|
199 | .str-chat__square-button {
|
200 | cursor: pointer;
|
201 | padding: var(--xxs-p);
|
202 |
|
203 | svg {
|
204 | width: 21px;
|
205 | height: 21px;
|
206 | }
|
207 | }
|
208 | }
|
209 |
|
210 | &__thread-start {
|
211 | margin-top: var(--md-m);
|
212 | }
|
213 |
|
214 | @media screen and (max-width: 960px) {
|
215 | &__thread {
|
216 | position: fixed;
|
217 | top: 0;
|
218 | right: 0;
|
219 | height: 100vh;
|
220 | background: var(--white);
|
221 | z-index: 1000;
|
222 | margin: 0;
|
223 | width: 100vw;
|
224 | max-width: 100%;
|
225 | }
|
226 | }
|
227 | }
|
228 |
|
229 | &.dark {
|
230 | .str-chat__thread {
|
231 | background: var(--white5);
|
232 |
|
233 | &-header {
|
234 | background: var(--dark-grey);
|
235 |
|
236 | box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
|
237 | color: var(--white);
|
238 | }
|
239 |
|
240 | &-start {
|
241 | color: var(--white);
|
242 | }
|
243 | }
|
244 |
|
245 | @media screen and (max-width: 960px) {
|
246 | .str-chat__thread {
|
247 | background: var(--dark-grey);
|
248 | }
|
249 | }
|
250 | }
|
251 | }
|
252 |
|
253 |
|
254 | .str-chat__input-flat-quoted .quoted-message-preview-content {
|
255 | max-width: 100%;
|
256 | }
|
257 | }
|
258 |
|
259 | .team {
|
260 | &.str-chat {
|
261 | .str-chat {
|
262 | &__thread {
|
263 | background: var(--white);
|
264 | }
|
265 |
|
266 | @media screen and (max-width: 960px) {
|
267 | &__thread {
|
268 | position: fixed;
|
269 | top: 0;
|
270 | right: 0;
|
271 | height: 100vh;
|
272 | background: var(--white);
|
273 | z-index: 1000;
|
274 | margin: 0;
|
275 | width: 100vw;
|
276 | max-width: 100%;
|
277 | }
|
278 | }
|
279 |
|
280 | &__thread-header {
|
281 | height: 80px;
|
282 | }
|
283 | }
|
284 |
|
285 | &.dark {
|
286 | .str-chat__thread {
|
287 | background: var(--dt-bg-team);
|
288 | }
|
289 | }
|
290 | }
|
291 | }
|
292 |
|
293 | .livestream.str-chat,
|
294 | .str-chat {
|
295 | .str-chat__thread {
|
296 | background: transparent;
|
297 |
|
298 | &--full {
|
299 | position: fixed;
|
300 | top: 0;
|
301 | right: 0;
|
302 | height: 100vh;
|
303 | background: var(--white);
|
304 | z-index: 1000;
|
305 | margin: 0;
|
306 | width: 100vw;
|
307 | max-width: 100%;
|
308 | }
|
309 |
|
310 | &-header {
|
311 | background: var(--white30);
|
312 | }
|
313 | }
|
314 |
|
315 | .str-chat__list--thread {
|
316 | padding: 0 var(--xs-p);
|
317 | }
|
318 |
|
319 | &.dark {
|
320 | .str-chat__thread {
|
321 | background: var(--dark-grey);
|
322 |
|
323 | &-header {
|
324 | background: var(--white5);
|
325 | box-shadow: 0 1px 1px 0 var(--black30);
|
326 | color: var(--white);
|
327 | }
|
328 |
|
329 | &-start {
|
330 | background: var(--black5);
|
331 | border-radius: var(--border-radius-sm);
|
332 | color: var(--white);
|
333 | }
|
334 | }
|
335 | }
|
336 | }
|
337 |
|
338 | .dark.str-chat.messaging {
|
339 | .str-chat__thread-list {
|
340 | .quoted-message-inner {
|
341 | background: var(--dark-grey);
|
342 | }
|
343 | }
|
344 | }
|