"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-6193/css/_chat.scss" (20 May 2022, 11491 Bytes) of package /linux/misc/jitsi-meet-6193.tar.gz:
As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) Sass/SCSS source code syntax highlighting (style:
standard) with prefixed line numbers.
Alternatively you can here
view or
download the uninterpreted source code file.
See also the last
Fossies "Diffs" side-by-side code changes report for "_chat.scss":
jitsi-meet_7001_vs_jitsi-meet_7210.
1 #sideToolbarContainer {
2 background-color: $chatBackgroundColor;
3 flex-shrink: 0;
4 overflow: hidden;
5 position: relative;
6 transition: width .16s ease-in-out;
7 width: $sidebarWidth;
8 z-index: $sideToolbarContainerZ;
9
10 @media (max-width: 580px) {
11 height: 100vh;
12 height: -webkit-fill-available;
13 left: 0;
14 position: fixed;
15 right: 0;
16 top: 0;
17 width: auto;
18 }
19 }
20
21 .chat-panel {
22 display: flex;
23 flex-direction: column;
24 // extract header + tabs height
25 height: calc(100% - 102px);
26 }
27
28 .chat-panel-no-tabs {
29 // extract header height
30 height: calc(100% - 70px);
31 }
32
33 #chatconversation {
34 box-sizing: border-box;
35 flex: 1;
36 font-size: 10pt;
37 // extract message input height
38 height: calc(100% - 68px);
39 line-height: 20px;
40 overflow: auto;
41 padding: 16px;
42 text-align: left;
43 word-wrap: break-word;
44
45 display: flex;
46 flex-direction: column;
47
48 & > :first-child {
49 margin-top: auto;
50 }
51
52 a {
53 display: block;
54 }
55
56 a:link {
57 color: rgb(184, 184, 184);
58 }
59
60 a:visited {
61 color: white;
62 }
63
64 a:hover {
65 color: rgb(213, 213, 213);
66 }
67
68 a:active {
69 color: black;
70 }
71 }
72
73 #chat-recipient {
74 align-items: center;
75 background-color: $chatPrivateMessageBackgroundColor;
76 display: flex;
77 flex-direction: row;
78 font-weight: 100;
79 padding: 10px;
80
81 span {
82 color: white;
83 display: flex;
84 flex: 1;
85 }
86
87 div {
88 svg {
89 cursor: pointer;
90 fill: white;
91 }
92 }
93
94 &.lobby-chat-recipient {
95 background-color: $chatLobbyMessageBackgroundColor;
96 }
97 }
98
99
100 .chat-header {
101 height: 70px;
102 position: relative;
103 width: 100%;
104 z-index: 1;
105 display: flex;
106 justify-content: space-between;
107 padding: 16px;
108 align-items: center;
109 box-sizing: border-box;
110 color: #fff;
111 font-weight: 600;
112 font-size: 24px;
113 line-height: 32px;
114
115 .jitsi-icon {
116 cursor: pointer;
117 }
118 }
119
120 .chat-input-container {
121 padding: 0 16px 16px;
122
123 &.populated {
124 #chat-input {
125 .send-button {
126 background: #1B67EC;
127 cursor: pointer;
128 margin-left: 0.3rem;
129
130 @media (hover: hover) and (pointer: fine) {
131 &:hover {
132 background: #3D82FB;
133 }
134 }
135
136 &:active {
137 background: #0852D4;
138 }
139
140 path {
141 fill: #fff;
142 }
143 }
144 }
145 }
146 }
147
148 #chat-input {
149 border: 1px solid $chatInputSeparatorColor;
150 display: flex;
151 padding: 4px;
152 border-radius: 3px;
153
154 &:focus-within {
155 border: 1px solid #619CF4;
156 }
157
158 * {
159 background-color: transparent;
160 }
161 }
162
163 .send-button-container {
164 display: flex;
165 align-items: center;
166 }
167
168 .send-button {
169 display: flex;
170 align-items: center;
171 justify-content: center;
172 height: 40px;
173 width: 40px;
174 border-radius: 3px;
175
176 path {
177 fill: $chatInputSeparatorColor;
178 }
179 }
180
181 .smiley-button {
182 display: flex;
183 align-items: center;
184 justify-content: center;
185 height: 38px;
186 width: 38px;
187 margin: 2px;
188 border-radius: 3px;
189 }
190
191 #chat-input .smiley-button {
192 @media (hover: hover) and (pointer: fine) {
193 &:hover {
194 background-color: #484A4F;
195 }
196 }
197 }
198
199 .remoteuser {
200 color: #B8C7E0;
201 }
202
203 .usrmsg-form {
204 flex: 1;
205 }
206
207 #usermsg {
208 -ms-overflow-style: none;
209 border: 0px none;
210 border-radius:0;
211 box-shadow: none;
212 color: white;
213 font-size: 14px;
214 padding: 10px;
215 overflow-y: auto;
216 resize: none;
217 scrollbar-width: none;
218 width: 100%;
219 word-break: break-word;
220
221 &::-webkit-scrollbar {
222 display: none;
223 }
224 }
225
226 #usermsg:hover {
227 border: 0px none;
228 box-shadow: none;
229 }
230 #usermsg:focus,
231 #usermsg:active {
232 border-bottom: 1px solid white;
233 padding-bottom: 8px;
234 }
235
236 #nickname {
237 text-align: center;
238 color: #9d9d9d;
239 font-size: 16px;
240 margin: auto 0;
241 padding: 0 16px;
242
243 #nickname-title {
244 margin-bottom: 5px;
245 display: block;
246 }
247
248 label[for="nickinput"] {
249 > div > span {
250 color: #B8C7E0;
251 }
252 }
253 input {
254 height: 40px;
255 }
256
257 label {
258 line-height: 24px;
259 }
260
261 .enter-chat {
262 display: flex;
263 align-items: center;
264 justify-content: center;
265 margin-top: 16px;
266 height: 40px;
267 background: #1B67EC;
268 border-radius: 3px;
269 color: #fff;
270 cursor: pointer;
271
272 &.disabled {
273 color: #AFB6BC;
274 background: #11336E;
275 pointer-events: none;
276 }
277 }
278 }
279
280 .mobile-browser {
281 #nickname {
282 input {
283 height: 48px;
284 }
285
286 .enter-chat {
287 height: 48px;
288 }
289 }
290
291 #usermsg {
292 font-size: 16px;
293 }
294
295 .chatmessage .usermessage {
296 font-size: 16px;
297 }
298 }
299
300 .sideToolbarContainer {
301 * {
302 -webkit-user-select: text;
303 user-select: text;
304 }
305
306 .display-name {
307 font-size: 12px;
308 font-weight: 600;
309 margin-bottom: 5px;
310 white-space: nowrap;
311 text-overflow: ellipsis;
312 overflow: hidden;
313 }
314 }
315
316 .sr-only {
317 border: 0 !important;
318 clip: rect(1px, 1px, 1px, 1px) !important;
319 clip-path: inset(50%) !important;
320 height: 1px !important;
321 margin: -1px !important;
322 overflow: hidden !important;
323 padding: 0 !important;
324 position: absolute !important;
325 width: 1px !important;
326 white-space: nowrap !important;
327 }
328
329 .chatmessage {
330 background-color: $chatRemoteMessageBackgroundColor;
331 border-radius: 0px 6px 6px 6px;
332 box-sizing: border-box;
333 color: white;
334 margin-top: 3px;
335 max-width: 100%;
336 position: relative;
337
338 &.localuser {
339 background-color: $chatLocalMessageBackgroundColor;
340 border-radius: 6px 0px 6px 6px;
341 }
342
343 .usermessage {
344 white-space: pre-wrap;
345 font-size: 14px;
346 }
347
348 &.error {
349 border-radius: 0px;
350
351 .timestamp,
352 .display-name {
353 display: none;
354 }
355
356 .usermessage {
357 color: red;
358 padding: 0;
359 }
360 }
361
362 .privatemessagenotice {
363 font-size: 11px;
364 font-weight: 100;
365 }
366
367 .messagecontent {
368 margin: 8px;
369 max-width: 100%;
370 overflow: hidden;
371 }
372 }
373
374 .timestamp {
375 color: #757575;
376 }
377
378 #smileys {
379 font-size: 20pt;
380 margin: auto;
381 cursor: pointer;
382 }
383
384 #smileys img {
385 width: 22px;
386 padding: 2px;
387 }
388
389 #smileysarea {
390 display: flex;
391 max-height: 150px;
392 min-height: 35px;
393 overflow: hidden;
394 }
395
396 .smiley-input {
397 display: flex;
398 position: relative;
399 }
400
401 .smileys-panel {
402 bottom: 100%;
403 box-sizing: border-box;
404 background-color: rgba(0, 0, 0, .6) !important;
405 height: auto;
406 display: none;
407 overflow: hidden;
408 position: absolute;
409 width: calc(#{$sidebarWidth} - 32px);
410 margin-bottom: 5px;
411 margin-left: -5px;
412
413 /**
414 * CSS transitions do not apply for auto dimensions. So to produce the css
415 * accordion effect for showing and hiding the smiley-panel, while allowing
416 * for variable panel, height, use a very large max-height and animate off
417 * of that.
418 */
419 transition: max-height 0.3s;
420
421 &.show-smileys {
422 display: flex;
423 max-height: 500%;
424 }
425
426 #smileysContainer {
427 background-color: $chatBackgroundColor;
428 border-top: 1px solid $chatInputSeparatorColor;
429 }
430 }
431
432 #smileysContainer .smiley {
433 font-size: 20pt;
434 }
435
436 .smileyContainer {
437 width: 40px;
438 height: 40px;
439 display: inline-block;
440 text-align: center;
441 }
442
443 .smileyContainer:hover {
444 background-color: $newToolbarButtonToggleColor;
445 border-radius: 5px;
446 cursor: pointer;
447 }
448
449 #usermsg::-webkit-scrollbar-track-piece {
450 background: #3a3a3a;
451 }
452
453 .chat-message-group {
454 display: flex;
455 flex-direction: column;
456
457 &.local {
458 align-items: flex-end;
459
460 .chatmessage {
461 background-color: $chatLocalMessageBackgroundColor;
462 border-radius: 6px 0px 6px 6px;
463
464 &.privatemessage {
465 background-color: $chatPrivateMessageBackgroundColor;
466 }
467 &.lobbymessage {
468 background-color: $chatLobbyMessageBackgroundColor;
469 }
470 }
471
472 .display-name {
473 display: none;
474 }
475
476 .timestamp {
477 text-align: right;
478 }
479 }
480
481 &.error {
482 .chatmessage {
483 background-color: $defaultWarningColor;
484 border-radius: 0px;
485 font-weight: 100;
486 }
487
488 .display-name {
489 display: none;
490 }
491 }
492
493 .chatmessage-wrapper {
494 max-width: 100%;
495
496 .replywrapper {
497 display: flex;
498 flex-direction: row;
499 align-items: center;
500
501 .messageactions {
502 align-self: stretch;
503 border-left: 1px solid $chatActionsSeparatorColor;
504 display: flex;
505 flex-direction: column;
506 justify-content: center;
507 padding: 5px;
508
509 &.lobbychatmessageactions {
510 border-left-color: $chatLobbyActionsSeparatorColor;
511 }
512
513 .toolbox-icon {
514 cursor: pointer;
515 }
516 }
517 }
518 }
519
520 .chatmessage {
521 background-color: $chatRemoteMessageBackgroundColor;
522 border-radius: 0px 6px 6px 6px;
523 display: inline-block;
524 margin-top: 3px;
525 color: white;
526
527 &.privatemessage {
528 background-color: $chatPrivateMessageBackgroundColor;
529 }
530 &.lobbymessage {
531 background-color: $chatLobbyMessageBackgroundColor;
532 }
533 }
534 }
535
536 .chat-dialog {
537 display: flex;
538 flex-direction: column;
539 height: 100%;
540 margin-top: -5px; // Margin set by atlaskit.
541
542 &-header {
543 display: flex;
544 justify-content: space-between;
545 align-items: center;
546 margin: 16px;
547 width: calc(100% - 32px);
548 box-sizing: border-box;
549 color: #fff;
550 font-weight: 600;
551 font-size: 24px;
552 line-height: 32px;
553
554 .jitsi-icon {
555 cursor: pointer;
556 }
557 }
558
559 #chatconversation {
560 width: 100%;
561 }
562 }
563
564
565 /**
566 * Make header close button more easily tappable on mobile.
567 */
568 .mobile-browser .chat-dialog-header .jitsi-icon {
569 display: grid;
570 place-items: center;
571 height: 48px;
572 width: 48px;
573 background: #36383C;
574 border-radius: 3px;
575 }
576
577 .chat-tabs-container {
578 width: 100%;
579 border-bottom: thin solid #292929;
580 display: flex;
581 justify-content: space-around;
582 }
583
584 .chat-tab {
585 font-size: 1.2em;
586 padding-bottom: 0.5em;
587 width: 50%;
588 text-align: center;
589 color: #8B8B8B;
590 cursor: pointer;
591 }
592
593 .chat-tab-focus {
594 border-bottom-style: solid;
595 color: #FFF;
596 }
597
598 .chat-tab-title {
599 margin-right: 8px;
600 }
601
602 .chat-tab-badge {
603 background-color: #165ecc;
604 border-radius: 50%;
605 box-sizing: border-box;
606 font-weight: 700;
607 overflow: hidden;
608 text-align: center;
609 text-overflow: ellipsis;
610 vertical-align: middle;
611 padding: 0 4px;
612 color: #FFF;
613 }