"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7309/css/_chat.scss" (31 May 2023, 7192 Bytes) of package /linux/misc/jitsi-meet-7309.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_8319_vs_jitsi-meet_8615.
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% - 119px);
26 }
27
28 .chat-panel-no-tabs {
29 // extract header height
30 height: calc(100% - 70px);
31 }
32
33 #chat-conversation-container {
34 // extract message input height
35 height: calc(100% - 64px);
36 overflow: hidden;
37 position: relative;
38 }
39
40 #chatconversation {
41 box-sizing: border-box;
42 flex: 1;
43 font-size: 10pt;
44 height: 100%;
45 line-height: 20px;
46 overflow: auto;
47 padding: 16px;
48 text-align: left;
49 word-wrap: break-word;
50
51 display: flex;
52 flex-direction: column;
53
54 & > :first-child {
55 margin-top: auto;
56 }
57
58 a {
59 display: block;
60 }
61
62 a:link {
63 color: rgb(184, 184, 184);
64 }
65
66 a:visited {
67 color: white;
68 }
69
70 a:hover {
71 color: rgb(213, 213, 213);
72 }
73
74 a:active {
75 color: black;
76 }
77 }
78
79
80 .chat-header {
81 height: 70px;
82 position: relative;
83 width: 100%;
84 z-index: 1;
85 display: flex;
86 justify-content: space-between;
87 padding: 16px;
88 align-items: center;
89 box-sizing: border-box;
90 color: #fff;
91 font-weight: 600;
92 font-size: 24px;
93 line-height: 32px;
94
95 .jitsi-icon {
96 cursor: pointer;
97 }
98 }
99
100 .chat-input-container {
101 padding: 0 16px 24px;
102 }
103
104 #chat-input {
105 display: flex;
106 align-items: flex-end;
107 position: relative;
108 }
109
110 .chat-input {
111 flex: 1;
112 margin-right: 8px;
113 }
114
115 .smiley-button {
116 display: flex;
117 align-items: center;
118 justify-content: center;
119 height: 38px;
120 width: 38px;
121 margin: 2px;
122 border-radius: 3px;
123 }
124
125 #chat-input .smiley-button {
126 @media (hover: hover) and (pointer: fine) {
127 &:hover {
128 background-color: #484A4F;
129 }
130 }
131 }
132
133 .remoteuser {
134 color: #B8C7E0;
135 }
136
137 .usrmsg-form {
138 flex: 1;
139 }
140
141 #usermsg {
142 -ms-overflow-style: none;
143 border: 0px none;
144 border-radius:0;
145 box-shadow: none;
146 color: white;
147 font-size: 14px;
148 padding: 10px;
149 overflow-y: auto;
150 resize: none;
151 scrollbar-width: none;
152 width: 100%;
153 word-break: break-word;
154
155 &::-webkit-scrollbar {
156 display: none;
157 }
158 }
159
160 #usermsg:hover {
161 border: 0px none;
162 box-shadow: none;
163 }
164 #usermsg:focus,
165 #usermsg:active {
166 border-bottom: 1px solid white;
167 padding-bottom: 8px;
168 }
169
170 #nickname {
171 text-align: center;
172 color: #9d9d9d;
173 font-size: 16px;
174 margin: auto 0;
175 padding: 0 16px;
176
177 #nickname-title {
178 margin-bottom: 5px;
179 display: block;
180 }
181
182 label[for="nickinput"] {
183 > div > span {
184 color: #B8C7E0;
185 }
186 }
187 input {
188 height: 40px;
189 }
190
191 label {
192 line-height: 24px;
193 }
194
195 .enter-chat {
196 display: flex;
197 align-items: center;
198 justify-content: center;
199 margin-top: 16px;
200 height: 40px;
201 background: #1B67EC;
202 border-radius: 3px;
203 color: #fff;
204 cursor: pointer;
205
206 &.disabled {
207 color: #AFB6BC;
208 background: #11336E;
209 pointer-events: none;
210 }
211 }
212 }
213
214 .mobile-browser {
215 #nickname {
216 input {
217 height: 48px;
218 }
219
220 .enter-chat {
221 height: 48px;
222 }
223 }
224
225 #usermsg {
226 font-size: 16px;
227 }
228
229 .chatmessage .usermessage {
230 font-size: 16px;
231 }
232 }
233
234 .sideToolbarContainer {
235 * {
236 -webkit-user-select: text;
237 user-select: text;
238 }
239 }
240
241 .sr-only {
242 border: 0 !important;
243 clip: rect(1px, 1px, 1px, 1px) !important;
244 clip-path: inset(50%) !important;
245 height: 1px !important;
246 margin: -1px !important;
247 overflow: hidden !important;
248 padding: 0 !important;
249 position: absolute !important;
250 width: 1px !important;
251 white-space: nowrap !important;
252 }
253
254 .chatmessage {
255 &.localuser {
256 background-color: $chatLocalMessageBackgroundColor;
257 border-radius: 6px 0px 6px 6px;
258 }
259
260 &.error {
261 border-radius: 0px;
262
263 .timestamp,
264 .display-name {
265 display: none;
266 }
267
268 .usermessage {
269 color: red;
270 padding: 0;
271 }
272 }
273
274 .messagecontent {
275 max-width: 100%;
276 overflow: hidden;
277 }
278 }
279
280 #smileys {
281 font-size: 20pt;
282 margin: auto;
283 cursor: pointer;
284 }
285
286 #smileys img {
287 width: 22px;
288 padding: 2px;
289 }
290
291 #smileysarea {
292 display: flex;
293 max-height: 150px;
294 min-height: 35px;
295 overflow: hidden;
296 }
297
298 .smiley-input {
299 display: flex;
300 position: absolute;
301 top: 0;
302 left: 0;
303 }
304
305 .smileys-panel {
306 bottom: 100%;
307 box-sizing: border-box;
308 background-color: rgba(0, 0, 0, .6) !important;
309 height: auto;
310 display: flex;
311 overflow: hidden;
312 position: absolute;
313 width: calc(#{$sidebarWidth} - 32px);
314 margin-bottom: 5px;
315 margin-left: -5px;
316
317 /**
318 * CSS transitions do not apply for auto dimensions. So to produce the css
319 * accordion effect for showing and hiding the smiley-panel, while allowing
320 * for variable panel, height, use a very large max-height and animate off
321 * of that.
322 */
323 transition: max-height 0.3s;
324
325 #smileysContainer {
326 background-color: $chatBackgroundColor;
327 border-top: 1px solid $chatInputSeparatorColor;
328 }
329 }
330
331 #smileysContainer .smiley {
332 font-size: 20pt;
333 }
334
335 .smileyContainer {
336 width: 40px;
337 height: 40px;
338 display: inline-block;
339 text-align: center;
340 }
341
342 .smileyContainer:hover {
343 background-color: $newToolbarButtonToggleColor;
344 border-radius: 5px;
345 cursor: pointer;
346 }
347
348 #usermsg::-webkit-scrollbar-track-piece {
349 background: #3a3a3a;
350 }
351
352 .chat-message-group {
353 &.local {
354 align-items: flex-end;
355
356 .display-name {
357 display: none;
358 }
359
360 .timestamp {
361 text-align: right;
362 }
363 }
364
365 &.error {
366 .display-name {
367 display: none;
368 }
369 }
370 }
371
372 .chat-dialog {
373 display: flex;
374 flex-direction: column;
375 height: 100%;
376 margin-top: -5px; // Margin set by atlaskit.
377
378 &-header {
379 display: flex;
380 justify-content: space-between;
381 align-items: center;
382 margin: 16px;
383 width: calc(100% - 32px);
384 box-sizing: border-box;
385 color: #fff;
386 font-weight: 600;
387 font-size: 24px;
388 line-height: 32px;
389
390 .jitsi-icon {
391 cursor: pointer;
392 }
393 }
394
395 #chatconversation {
396 width: 100%;
397 }
398 }
399
400
401 /**
402 * Make header close button more easily tappable on mobile.
403 */
404 .mobile-browser .chat-dialog-header .jitsi-icon {
405 display: grid;
406 place-items: center;
407 height: 48px;
408 width: 48px;
409 background: #36383C;
410 border-radius: 3px;
411 }