1 | .str-chat__message-livestream {
|
2 | font-family: var(--second-font);
|
3 | display: flex;
|
4 | width: 100%;
|
5 | margin: 0;
|
6 | padding: 10px;
|
7 | border: 1px solid transparent;
|
8 | position: relative;
|
9 |
|
10 | &-pin-indicator {
|
11 | padding-left: 10px;
|
12 | }
|
13 |
|
14 | &-left {
|
15 | width: 30px;
|
16 |
|
17 | .str-chat__avatar {
|
18 | margin-right: 0;
|
19 | }
|
20 | }
|
21 |
|
22 | &-right {
|
23 | flex: 1;
|
24 | }
|
25 |
|
26 | &-content {
|
27 | position: relative;
|
28 | padding: 5px 10px;
|
29 | border: 1px solid transparent;
|
30 |
|
31 | > * {
|
32 | font-size: var(--sm-font);
|
33 | line-height: 20px;
|
34 | margin: 0;
|
35 | }
|
36 |
|
37 | p {
|
38 | margin: 0;
|
39 | white-space: pre-line;
|
40 |
|
41 | overflow-wrap: break-word;
|
42 | word-wrap: break-word;
|
43 |
|
44 | -ms-word-break: break-all;
|
45 |
|
46 |
|
47 | word-break: break-word;
|
48 |
|
49 |
|
50 | -ms-hyphens: auto;
|
51 | -moz-hyphens: auto;
|
52 | -webkit-hyphens: auto;
|
53 | hyphens: auto;
|
54 |
|
55 | &:not(:first-of-type) {
|
56 | margin: 16px 0 0;
|
57 | }
|
58 |
|
59 | code {
|
60 | background-color: var(--white20);
|
61 | border: 1px solid var(--primary-color-faded);
|
62 | border-radius: 3px;
|
63 | padding: 2px 4px;
|
64 | }
|
65 |
|
66 | a {
|
67 | color: var(--primary-color);
|
68 | font-weight: var(--font-weight-bold);
|
69 | text-decoration: none;
|
70 | }
|
71 | }
|
72 |
|
73 | pre,
|
74 | code {
|
75 | font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
|
76 | 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
|
77 | 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
|
78 | line-height: inherit;
|
79 | padding: 10px;
|
80 | font-size: var(--sm-font);
|
81 | font-weight: var(--font-weight-bold);
|
82 | }
|
83 |
|
84 | pre {
|
85 | margin: 0 5px 0 0;
|
86 | border-radius: 4px;
|
87 | background-color: var(--primary-color-faded);
|
88 | border: 1px solid var(--primary-color);
|
89 | }
|
90 |
|
91 | code {
|
92 | width: inherit;
|
93 | word-break: break-all;
|
94 | }
|
95 |
|
96 | .livestream-quoted-message {
|
97 | background: var(--light-grey);
|
98 | border: 1px solid var(--black10);
|
99 | padding: 10px;
|
100 | border-radius: 5px;
|
101 | margin-bottom: 5px;
|
102 | }
|
103 | }
|
104 |
|
105 | &:hover {
|
106 | .str-chat__message-livestream-actions {
|
107 | display: flex;
|
108 | }
|
109 | }
|
110 |
|
111 | &-actions {
|
112 | background: var(--white60);
|
113 | border: 1px solid var(--black20);
|
114 | box-shadow: 0 2px 1px 0 var(--black5);
|
115 |
|
116 | width: 141px;
|
117 | height: 24px;
|
118 | padding: 0 4px;
|
119 | position: absolute;
|
120 | top: -12px;
|
121 | right: 0;
|
122 | border-radius: 24px;
|
123 | display: none;
|
124 | align-items: center;
|
125 | justify-content: space-between;
|
126 |
|
127 | > span {
|
128 | position: relative;
|
129 | flex: 1;
|
130 | display: flex;
|
131 | justify-content: center;
|
132 | align-items: center;
|
133 | height: 100%;
|
134 | text-align: center;
|
135 |
|
136 | cursor: pointer;
|
137 |
|
138 | &:not(:last-of-type) {
|
139 | border-right: 1px solid var(--light-grey);
|
140 | }
|
141 |
|
142 | > span {
|
143 | position: relative;
|
144 | flex: 1;
|
145 | display: flex;
|
146 | justify-content: center;
|
147 | align-items: center;
|
148 | height: 100%;
|
149 | text-align: center;
|
150 | }
|
151 |
|
152 | svg {
|
153 | fill: var(--black);
|
154 | opacity: 0.5;
|
155 | }
|
156 |
|
157 | &:hover svg {
|
158 | opacity: 1;
|
159 | }
|
160 | }
|
161 |
|
162 | .str-chat__message-actions-box {
|
163 | bottom: initial;
|
164 | left: initial;
|
165 | visibility: hidden;
|
166 | right: 100%;
|
167 | top: 50%;
|
168 | transform: translateY(-50%);
|
169 | border-radius: 7px;
|
170 |
|
171 | &--open {
|
172 | visibility: visible;
|
173 | }
|
174 | }
|
175 | }
|
176 |
|
177 | &-time {
|
178 | font-size: var(--xs-font);
|
179 | line-height: 20px;
|
180 | color: var(--black50);
|
181 | flex: 2;
|
182 | padding: 0 4px;
|
183 | }
|
184 |
|
185 | &-text {
|
186 | &--is-emoji {
|
187 | font-size: var(--xxxl-font);
|
188 | line-height: 42px;
|
189 | }
|
190 | }
|
191 |
|
192 | &-author {
|
193 | margin-bottom: 8px;
|
194 | text-transform: capitalize;
|
195 | display: flex;
|
196 | align-items: center;
|
197 | justify-content: flex-start;
|
198 |
|
199 | strong {
|
200 | margin-right: 8px;
|
201 | }
|
202 | }
|
203 |
|
204 | &:hover {
|
205 | background: var(--white5);
|
206 | border: 1px solid var(--black5);
|
207 | box-shadow: 0 0 6px 0 var(--black5);
|
208 | border-radius: 6px;
|
209 | }
|
210 |
|
211 | .str-chat__message-attachment--img {
|
212 | border-radius: 0;
|
213 | }
|
214 |
|
215 | .str-chat__message-attachment-card {
|
216 | margin: 0;
|
217 | border-radius: 0;
|
218 | background: var(--white20);
|
219 | border: 1px solid var(--black10);
|
220 |
|
221 | &--content {
|
222 | background: var(--white20);
|
223 | }
|
224 |
|
225 | &--text {
|
226 | display: none;
|
227 | }
|
228 |
|
229 | &--url {
|
230 | text-transform: lowercase;
|
231 | }
|
232 | }
|
233 |
|
234 | &__thread-banner {
|
235 | text-align: center;
|
236 | font-size: var(--sm-font);
|
237 | padding: 8px;
|
238 | margin: 8px 10px 0;
|
239 | background: var(--primary-color);
|
240 | border-radius: 2px;
|
241 | color: var(--dark-grey);
|
242 | }
|
243 |
|
244 | &--error,
|
245 | &--failed {
|
246 | .str-chat__message-livestream {
|
247 | &-content {
|
248 | p {
|
249 | color: var(--red);
|
250 |
|
251 | svg {
|
252 | position: relative;
|
253 | top: 2px;
|
254 | margin-right: 4px;
|
255 | }
|
256 | }
|
257 | }
|
258 | }
|
259 | }
|
260 |
|
261 | &--failed {
|
262 | .str-chat__message-livestream {
|
263 | &-content {
|
264 | p {
|
265 | cursor: pointer;
|
266 | }
|
267 | }
|
268 | }
|
269 | }
|
270 |
|
271 | &--initial-message {
|
272 | margin: 20px 10px 0;
|
273 | width: auto;
|
274 | }
|
275 | }
|
276 |
|
277 | .str-chat__list--thread {
|
278 | .str-chat__message-livestream__actions {
|
279 | min-width: 30px;
|
280 | }
|
281 |
|
282 | .str-chat__message-livestream {
|
283 | &-actions {
|
284 | width: 110px;
|
285 | min-width: unset;
|
286 |
|
287 | .str-chat__message-actions-box {
|
288 | top: initial;
|
289 | bottom: -10px;
|
290 | }
|
291 | }
|
292 | }
|
293 | }
|
294 |
|
295 | .livestream.dark.str-chat {
|
296 | .str-chat__message-livestream {
|
297 | color: var(--light-grey);
|
298 |
|
299 | &:hover {
|
300 | background: var(--white5);
|
301 | border: 1px solid var(--black5);
|
302 | box-shadow: 0 0 6px 0 var(--black5);
|
303 | border-radius: 6px;
|
304 | }
|
305 |
|
306 | .str-chat__message-attachment-card {
|
307 | background: var(--black10);
|
308 | border: 1px solid var(--white10);
|
309 |
|
310 | &--content {
|
311 | background: var(--black10);
|
312 | }
|
313 |
|
314 | &--url {
|
315 | color: var(--white80);
|
316 | }
|
317 | }
|
318 | }
|
319 |
|
320 | .str-chat__message-livestream-actions {
|
321 | background: var(--dark-grey);
|
322 | border: 1px solid var(--white5);
|
323 | box-shadow: 0 2px 1px 0 var(--black5);
|
324 |
|
325 | > span:not(:last-of-type) {
|
326 | border-color: var(--white5);
|
327 | }
|
328 |
|
329 | svg {
|
330 | fill: var(--white);
|
331 | }
|
332 | }
|
333 |
|
334 | .str-chat__message-livestream-time {
|
335 | color: var(--white);
|
336 | opacity: 0.5;
|
337 | }
|
338 | }
|