Spaces:
Sleeping
Sleeping
Update static/style.css
Browse files- static/style.css +462 -387
static/style.css
CHANGED
@@ -1,468 +1,543 @@
|
|
1 |
body, html {
|
2 |
-
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
}
|
8 |
:root {
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
}
|
21 |
.light-mode {
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
}
|
37 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
38 |
.dark-mode {
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
}
|
54 |
.dark-mode .msg_container {
|
55 |
-
|
56 |
-
|
57 |
}
|
|
|
58 |
.dark-mode .msg_container_send {
|
59 |
-
|
60 |
-
|
61 |
}
|
62 |
.dark-mode .type_msg::placeholder {
|
63 |
-
|
64 |
}
|
|
|
|
|
65 |
.dark-mode #themeToggle {
|
66 |
-
|
67 |
-
|
68 |
-
|
69 |
}
|
|
|
|
|
70 |
.light-mode #themeToggle {
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
}
|
|
|
|
|
|
|
75 |
.light-mode .user_info span,
|
76 |
.light-mode .user_info p {
|
77 |
-
|
78 |
}
|
|
|
79 |
.light-mode .type_msg {
|
80 |
-
|
81 |
-
|
82 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
83 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
84 |
::placeholder {
|
85 |
-
|
86 |
-
|
87 |
}
|
88 |
|
89 |
/* Chat Container */
|
90 |
.chat {
|
91 |
-
|
92 |
-
|
|
|
|
|
|
|
|
|
|
|
93 |
}
|
94 |
.card {
|
95 |
-
|
96 |
-
|
97 |
-
|
98 |
-
|
99 |
-
|
100 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
101 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
102 |
.msg_card_body {
|
103 |
-
|
104 |
-
|
|
|
105 |
}
|
106 |
|
107 |
/* Predictive Text */
|
108 |
.predictive-text {
|
109 |
-
|
110 |
-
|
111 |
-
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
|
119 |
-
|
120 |
-
|
121 |
-
|
122 |
}
|
|
|
123 |
.predictive-text p {
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
|
128 |
-
|
129 |
}
|
|
|
130 |
.predictive-text p:hover {
|
131 |
-
|
132 |
}
|
|
|
133 |
.predictive-text p:not(:last-child) {
|
134 |
-
|
135 |
}
|
136 |
|
137 |
/* Input Fields */
|
138 |
input[type="text"] {
|
139 |
-
|
140 |
-
|
141 |
-
|
142 |
-
|
143 |
-
|
144 |
-
|
145 |
-
|
146 |
-
|
147 |
-
|
148 |
}
|
|
|
149 |
::placeholder {
|
150 |
-
|
151 |
-
|
152 |
-
|
153 |
-
|
154 |
}
|
155 |
|
156 |
-
|
157 |
-
|
158 |
-
|
159 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
160 |
}
|
161 |
-
.
|
162 |
-
|
163 |
-
|
164 |
-
|
165 |
-
color: var(--text-color) !important;
|
166 |
-
cursor: pointer;
|
167 |
}
|
168 |
-
|
169 |
-
|
170 |
-
.user_info span {
|
171 |
-
font-size: 20px;
|
172 |
-
color: var(--text-color);
|
173 |
}
|
174 |
-
.
|
175 |
-
|
176 |
-
|
177 |
}
|
178 |
-
|
179 |
-
|
180 |
-
|
181 |
-
margin-bottom: auto;
|
182 |
}
|
183 |
-
.
|
184 |
-
|
185 |
-
|
186 |
-
|
187 |
}
|
188 |
.msg_card_body {
|
189 |
-
|
190 |
-
}
|
191 |
-
.
|
192 |
-
|
193 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
194 |
}
|
195 |
-
.
|
196 |
-
|
197 |
-
|
|
|
|
|
198 |
}
|
199 |
-
.
|
200 |
-
|
201 |
-
|
202 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
203 |
}
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
|
210 |
-
|
211 |
-
|
212 |
-
|
213 |
-
|
214 |
-
|
215 |
-
|
216 |
-
|
217 |
-
|
218 |
-
background-color: rgba(0,0,0,0.3) !important;
|
219 |
-
border: 0 !important;
|
220 |
-
color: white !important;
|
221 |
-
height: 60px !important;
|
222 |
-
overflow-y: auto;
|
223 |
-
}
|
224 |
-
.type_msg:focus {
|
225 |
-
box-shadow: none !important;
|
226 |
-
outline: 0px !important;
|
227 |
-
}
|
228 |
-
.attach_btn {
|
229 |
-
border-radius: 15px 0 0 15px !important;
|
230 |
-
background-color: rgba(0,0,0,0.3) !important;
|
231 |
-
border: 0 !important;
|
232 |
-
color: white !important;
|
233 |
-
cursor: pointer;
|
234 |
-
}
|
235 |
-
.send_btn {
|
236 |
-
border-radius: 0 15px 15px 0 !important;
|
237 |
-
background-color: rgba(0,0,0,0.3) !important;
|
238 |
-
border: 0 !important;
|
239 |
-
color: white !important;
|
240 |
-
cursor: pointer;
|
241 |
-
}
|
242 |
-
.search_btn {
|
243 |
-
border-radius: 0 15px 15px 0 !important;
|
244 |
-
background-color: rgba(0,0,0,0.3) !important;
|
245 |
-
border: 0 !important;
|
246 |
-
color: white !important;
|
247 |
-
cursor: pointer;
|
248 |
-
}
|
249 |
-
.contacts {
|
250 |
-
list-style: none;
|
251 |
-
padding: 0;
|
252 |
-
}
|
253 |
-
.contacts li {
|
254 |
-
width: 100% !important;
|
255 |
-
padding: 5px 10px;
|
256 |
-
margin-bottom: 15px !important;
|
257 |
-
}
|
258 |
-
.active {
|
259 |
-
background-color: rgba(0,0,0,0.3);
|
260 |
-
}
|
261 |
-
.user_img {
|
262 |
-
height: 70px;
|
263 |
-
width: 70px;
|
264 |
-
border: 1.5px solid #f5f6fa;
|
265 |
-
}
|
266 |
-
.user_img_msg {
|
267 |
-
height: 40px;
|
268 |
-
width: 40px;
|
269 |
-
border: 1.5px solid #f5f6fa;
|
270 |
-
}
|
271 |
-
.img_cont {
|
272 |
-
position: relative;
|
273 |
-
height: 70px;
|
274 |
-
width: 70px;
|
275 |
-
}
|
276 |
-
.img_cont_msg {
|
277 |
-
height: 40px;
|
278 |
-
width: 40px;
|
279 |
-
}
|
280 |
-
.online_icon {
|
281 |
-
position: absolute;
|
282 |
-
height: 15px;
|
283 |
-
width: 15px;
|
284 |
-
background-color: #4cd137;
|
285 |
-
border-radius: 50%;
|
286 |
-
bottom: 0.2em;
|
287 |
-
right: 0.4em;
|
288 |
-
border: 1.5px solid white;
|
289 |
-
}
|
290 |
-
.offline {
|
291 |
-
background-color: #c23616 !important;
|
292 |
-
}
|
293 |
-
.user_info {
|
294 |
-
margin-top: auto;
|
295 |
-
margin-bottom: auto;
|
296 |
-
margin-left: 15px;
|
297 |
-
}
|
298 |
-
.user_info span {
|
299 |
-
font-size: 20px;
|
300 |
-
color: white;
|
301 |
-
}
|
302 |
-
.user_info p {
|
303 |
-
font-size: 10px;
|
304 |
-
color: rgba(255,255,255,0.6);
|
305 |
-
}
|
306 |
-
.video_cam {
|
307 |
-
margin-left: 50px;
|
308 |
-
margin-top: 5px;
|
309 |
-
}
|
310 |
-
.video_cam span {
|
311 |
-
color: white;
|
312 |
-
font-size: 20px;
|
313 |
-
cursor: pointer;
|
314 |
-
margin-right: 20px;
|
315 |
-
}
|
316 |
-
.msg_container {
|
317 |
-
background-color: var(--msg-bg);
|
318 |
-
padding: 10px;
|
319 |
-
border-radius: 25px;
|
320 |
}
|
|
|
|
|
321 |
.dark-mode .predictive-text {
|
322 |
-
|
323 |
-
|
324 |
-
|
325 |
}
|
|
|
326 |
.dark-mode .predictive-text p {
|
327 |
-
|
328 |
-
|
329 |
}
|
|
|
330 |
.dark-mode .predictive-text p:hover {
|
331 |
-
|
332 |
}
|
333 |
.msg_container_send {
|
334 |
-
|
335 |
-
|
336 |
-
|
337 |
-
|
338 |
-
|
339 |
-
|
340 |
-
|
341 |
-
|
342 |
-
|
343 |
-
|
344 |
-
|
345 |
-
|
346 |
-
|
347 |
-
|
348 |
-
|
349 |
-
|
350 |
-
|
351 |
-
|
352 |
-
|
353 |
-
|
354 |
-
|
355 |
-
|
356 |
-
|
357 |
-
|
358 |
-
|
359 |
-
|
360 |
-
|
361 |
-
|
362 |
-
|
363 |
-
|
364 |
-
|
365 |
-
|
366 |
-
.action_menu {
|
367 |
-
|
368 |
-
|
369 |
-
|
370 |
-
|
371 |
-
|
372 |
-
|
373 |
-
|
374 |
-
|
375 |
-
|
376 |
}
|
|
|
377 |
.action_menu ul li {
|
378 |
-
|
379 |
-
|
380 |
-
|
381 |
-
|
382 |
}
|
|
|
383 |
.action_menu ul li:hover {
|
384 |
-
|
385 |
}
|
386 |
-
|
387 |
-
|
388 |
-
|
389 |
-
|
390 |
-
|
391 |
-
|
392 |
-
|
393 |
-
margin-right: 5px;
|
394 |
-
}
|
395 |
-
.predefined-text a:hover {
|
396 |
-
text-decoration: underline;
|
397 |
}
|
398 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
399 |
/* Mobile Adaptability Enhancements */
|
400 |
@media (max-width: 576px) {
|
401 |
-
|
402 |
-
|
403 |
-
|
404 |
-
|
405 |
-
|
406 |
-
|
407 |
-
|
408 |
-
|
409 |
-
|
|
|
410 |
|
411 |
-
|
412 |
-
|
413 |
-
|
414 |
-
|
415 |
-
|
416 |
-
|
417 |
-
|
418 |
-
|
419 |
-
|
420 |
-
|
421 |
-
|
422 |
-
|
423 |
-
|
424 |
-
|
425 |
-
|
426 |
-
|
427 |
-
|
428 |
-
|
429 |
-
|
430 |
-
|
431 |
-
|
432 |
-
|
433 |
-
|
434 |
-
|
435 |
-
|
436 |
-
|
437 |
-
|
438 |
-
|
439 |
-
|
440 |
-
|
441 |
-
|
442 |
-
|
443 |
-
|
444 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
445 |
|
446 |
-
|
447 |
-
|
448 |
-
|
449 |
-
|
450 |
-
|
451 |
-
|
452 |
-
|
453 |
-
|
454 |
-
|
455 |
-
.type_msg {
|
456 |
-
height: 50px;
|
457 |
-
font-size: 14px;
|
458 |
}
|
459 |
-
|
460 |
-
font-size: 12px;
|
461 |
-
padding: 5px 8px;
|
462 |
-
}
|
463 |
-
|
464 |
-
/* Adjust predictive text positioning on mobile */
|
465 |
-
.predictive-text {
|
466 |
-
bottom: 55px;
|
467 |
-
}
|
468 |
-
}
|
|
|
1 |
body, html {
|
2 |
+
height: 100%;
|
3 |
+
margin: 0;
|
4 |
+
background: var(--bg-color);
|
5 |
+
background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
|
6 |
+
color: var(--text-color);
|
7 |
}
|
8 |
:root {
|
9 |
+
--bg-color: rgb(44, 47, 59);
|
10 |
+
--gradient-start: rgb(38, 51, 61);
|
11 |
+
--gradient-mid: rgb(50, 55, 65);
|
12 |
+
--gradient-end: rgb(33, 33, 78);
|
13 |
+
--card-bg: rgba(0, 0, 0, 0.4);
|
14 |
+
--text-color: white;
|
15 |
+
--msg-bg: rgb(82, 172, 255);
|
16 |
+
--msg-send-bg: #58cc71;
|
17 |
+
--placeholder-color: #ccc;
|
18 |
+
--input-bg: rgba(0,0,0,0.3);
|
19 |
+
--border-color: white;
|
20 |
}
|
21 |
.light-mode {
|
22 |
+
--bg-color: #e6e6e6; /* Cool light grey background */
|
23 |
+
--gradient-start: #dcdcdc; /* Softer gradient transition */
|
24 |
+
--gradient-mid: #e6e6e6;
|
25 |
+
--gradient-end: #cfcfcf;
|
26 |
+
--card-bg: rgba(255, 255, 255, 0.95); /* Slightly more opaque for clarity */
|
27 |
+
--text-color: #222; /* Darker text for better contrast */
|
28 |
+
--msg-bg: #3498db; /* Incoming message bubble color */
|
29 |
+
--msg-send-bg: #2ecc71; /* Sent message bubble color */
|
30 |
+
--placeholder-color: #666; /* Darker placeholder text for readability */
|
31 |
+
--input-bg: rgba(255, 255, 255, 0.85);
|
32 |
+
--border-color: #444; /* Slightly softer black for a modern look */
|
33 |
+
|
34 |
+
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%)!important;
|
35 |
+
color: var(--text-color) !important;
|
36 |
}
|
37 |
|
38 |
+
|
39 |
+
|
40 |
+
/* Light Mode - Ensure theme toggle button is dark */
|
41 |
+
/* Theme Toggle Button */
|
42 |
+
#themeToggle {
|
43 |
+
position: absolute;
|
44 |
+
right: 15px;
|
45 |
+
margin-right: 0.5rem;
|
46 |
+
top: 10px;
|
47 |
+
font-size: 14px;
|
48 |
+
padding: 5px 10px;
|
49 |
+
border-radius: 5px;
|
50 |
+
cursor: pointer;
|
51 |
+
transition: all 0.3s ease-in-out;
|
52 |
+
}
|
53 |
.dark-mode {
|
54 |
+
--bg-color: #1a1a1a; /* Slightly darker for better contrast */
|
55 |
+
--gradient-start: #2c2f36;
|
56 |
+
--gradient-mid: #343a40;
|
57 |
+
--gradient-end: #23272a;
|
58 |
+
--card-bg: rgba(0, 0, 0, 0.6); /* More opacity to make text more readable */
|
59 |
+
--text-color: #f8f8f8; /* Slightly off-white for less strain */
|
60 |
+
--msg-bg: #3498db;
|
61 |
+
--msg-send-bg: #2ecc71;
|
62 |
+
--placeholder-color: #bbb;
|
63 |
+
--input-bg: rgba(0,0,0,0.5);
|
64 |
+
--border-color: #777;
|
65 |
+
|
66 |
+
background-image: linear-gradient(to top, #09203f 0%, #537895 100%)!important;
|
67 |
+
color: var(--text-color) !important;
|
68 |
}
|
69 |
.dark-mode .msg_container {
|
70 |
+
background-color: var(--msg-bg) !important;
|
71 |
+
color: #000000 !important; /* Ensure text is visible */
|
72 |
}
|
73 |
+
|
74 |
.dark-mode .msg_container_send {
|
75 |
+
background-color: var(--msg-send-bg) !important;
|
76 |
+
color: #000000 !important;
|
77 |
}
|
78 |
.dark-mode .type_msg::placeholder {
|
79 |
+
color: rgba(255, 255, 255, 0.7) !important; /* Make it more readable */
|
80 |
}
|
81 |
+
|
82 |
+
/* Dark Mode - Light button */
|
83 |
.dark-mode #themeToggle {
|
84 |
+
background-color: #ddd !important;
|
85 |
+
color: black !important;
|
86 |
+
border: 1px solid #333 !important;
|
87 |
}
|
88 |
+
|
89 |
+
/* Light Mode - Dark button */
|
90 |
.light-mode #themeToggle {
|
91 |
+
background-color: #333 !important;
|
92 |
+
color: white !important;
|
93 |
+
border: 1px solid #000 !important;
|
94 |
}
|
95 |
+
|
96 |
+
|
97 |
+
|
98 |
.light-mode .user_info span,
|
99 |
.light-mode .user_info p {
|
100 |
+
color: var(--text-color) !important;
|
101 |
}
|
102 |
+
|
103 |
.light-mode .type_msg {
|
104 |
+
background-color: var(--input-bg) !important;
|
105 |
+
color: var(--text-color) !important;
|
106 |
+
border: 1px solid var(--border-color) !important;
|
107 |
+
}
|
108 |
+
|
109 |
+
/* Placeholder text */
|
110 |
+
.light-mode .type_msg::placeholder {
|
111 |
+
color: var(--placeholder-color) !important;
|
112 |
+
}
|
113 |
+
|
114 |
+
/* Chat container */
|
115 |
+
.light-mode .card {
|
116 |
+
background-color: var(--card-bg) !important;
|
117 |
+
border: 1px solid var(--border-color);
|
118 |
+
}
|
119 |
+
|
120 |
+
.light-mode .msg_container {
|
121 |
+
background-color: var(--msg-bg) !important;
|
122 |
+
color: #fff !important; /* White text for better contrast */
|
123 |
}
|
124 |
+
|
125 |
+
.light-mode .msg_container_send {
|
126 |
+
background-color: var(--msg-send-bg) !important;
|
127 |
+
color: #fff !important;
|
128 |
+
}
|
129 |
+
|
130 |
::placeholder {
|
131 |
+
color: var(--placeholder-color);
|
132 |
+
opacity: 1;
|
133 |
}
|
134 |
|
135 |
/* Chat Container */
|
136 |
.chat {
|
137 |
+
height: 100vh; /* Adjust as needed */
|
138 |
+
max-height: fit-content; /* Ensures it doesn't get too large */
|
139 |
+
padding-top: 5px;
|
140 |
+
padding-bottom: 5px;
|
141 |
+
width: 60%;
|
142 |
+
padding-left: 10px;
|
143 |
+
margin: 0 auto;
|
144 |
}
|
145 |
.card {
|
146 |
+
height: calc(100% );
|
147 |
+
max-height: calc(100%);
|
148 |
+
overflow: hidden;
|
149 |
+
position: relative;
|
150 |
+
background-color: var(--card-bg) !important;
|
151 |
+
border-radius: 15px !important;
|
152 |
+
|
153 |
+
}
|
154 |
+
|
155 |
+
.user_info span{
|
156 |
+
font-size: 30px;
|
157 |
+
color: white;
|
158 |
}
|
159 |
+
.user_info p{
|
160 |
+
font-size: 20px;
|
161 |
+
color: rgba(255,255,255,0.6);
|
162 |
+
}
|
163 |
+
|
164 |
+
/* Message Box */
|
165 |
.msg_card_body {
|
166 |
+
|
167 |
+
max-height: 70vh; /* Adjust based on screen size */
|
168 |
+
overflow-y: auto; /* Enable scrolling */
|
169 |
}
|
170 |
|
171 |
/* Predictive Text */
|
172 |
.predictive-text {
|
173 |
+
position: absolute;
|
174 |
+
background-color: var(--input-bg);
|
175 |
+
border: 1px solid var(--border-color);
|
176 |
+
border-radius: 10px;
|
177 |
+
padding: 5px;
|
178 |
+
z-index: 999;
|
179 |
+
cursor: pointer;
|
180 |
+
max-height: 150px;
|
181 |
+
overflow-y: auto;
|
182 |
+
width: calc(100% - 22px);
|
183 |
+
bottom: 65px;
|
184 |
+
left: 10px;
|
185 |
+
color: var(--text-color);
|
186 |
}
|
187 |
+
|
188 |
.predictive-text p {
|
189 |
+
margin: 5px 0;
|
190 |
+
padding: 5px;
|
191 |
+
cursor: pointer;
|
192 |
+
transition: background-color 0.3s;
|
193 |
+
border-radius: 5px;
|
194 |
}
|
195 |
+
|
196 |
.predictive-text p:hover {
|
197 |
+
background-color: rgba(255, 255, 255, 0.2);
|
198 |
}
|
199 |
+
|
200 |
.predictive-text p:not(:last-child) {
|
201 |
+
border-bottom: 1px solid #555;
|
202 |
}
|
203 |
|
204 |
/* Input Fields */
|
205 |
input[type="text"] {
|
206 |
+
white-space: normal;
|
207 |
+
overflow-wrap: break-word;
|
208 |
+
word-wrap: break-word;
|
209 |
+
width: 100%;
|
210 |
+
padding: 10px;
|
211 |
+
height: auto;
|
212 |
+
background-color: var(--input-bg) !important;
|
213 |
+
color: var(--text-color) !important;
|
214 |
+
border: 0 !important;
|
215 |
}
|
216 |
+
|
217 |
::placeholder {
|
218 |
+
white-space: normal;
|
219 |
+
overflow-wrap: break-word;
|
220 |
+
word-wrap: break-word;
|
221 |
+
color: var(--placeholder-color);
|
222 |
}
|
223 |
|
224 |
+
|
225 |
+
|
226 |
+
a {
|
227 |
+
text-decoration: underline !important;
|
228 |
+
color: blue; /* Keeps the default link color */
|
229 |
+
}
|
230 |
+
|
231 |
+
.attach_btn, .send_btn, .search_btn {
|
232 |
+
border-radius: 15px !important;
|
233 |
+
background-color: var(--input-bg) !important;
|
234 |
+
border: 0 !important;
|
235 |
+
color: var(--text-color) !important;
|
236 |
+
cursor: pointer;
|
237 |
+
}
|
238 |
+
|
239 |
+
|
240 |
+
|
241 |
+
.chat{
|
242 |
+
margin-top: auto;
|
243 |
+
margin-bottom: auto;
|
244 |
}
|
245 |
+
.contacts_body{
|
246 |
+
padding: 0.75rem 0 !important;
|
247 |
+
overflow-y: auto;
|
248 |
+
white-space: nowrap;
|
|
|
|
|
249 |
}
|
250 |
+
.msg_card_body{
|
251 |
+
overflow-y: auto;
|
|
|
|
|
|
|
252 |
}
|
253 |
+
.card-header{
|
254 |
+
border-radius: 15px 15px 0 0 !important;
|
255 |
+
border-bottom: 0 !important;
|
256 |
}
|
257 |
+
.card-footer{
|
258 |
+
border-radius: 0 0 15px 15px !important;
|
259 |
+
border-top: 0 !important;
|
|
|
260 |
}
|
261 |
+
.container{
|
262 |
+
display: flex;
|
263 |
+
flex-direction: column;
|
264 |
+
height: 100vh;
|
265 |
}
|
266 |
.msg_card_body {
|
267 |
+
flex-grow: 1;
|
268 |
+
}
|
269 |
+
.search{
|
270 |
+
border-radius: 15px 0 0 15px !important;
|
271 |
+
background-color: rgba(0,0,0,0.3) !important;
|
272 |
+
border:0 !important;
|
273 |
+
color:white !important;
|
274 |
+
}
|
275 |
+
.search:focus{
|
276 |
+
box-shadow:none !important;
|
277 |
+
outline:0px !important;
|
278 |
+
}
|
279 |
+
.type_msg{
|
280 |
+
background-color: rgba(0,0,0,0.3) !important;
|
281 |
+
border:0 !important;
|
282 |
+
color:white !important;
|
283 |
+
height: 60px !important;
|
284 |
+
overflow-y: auto;
|
285 |
+
}
|
286 |
+
.type_msg:focus{
|
287 |
+
box-shadow:none !important;
|
288 |
+
outline:0px !important;
|
289 |
+
}
|
290 |
+
.attach_btn{
|
291 |
+
border-radius: 15px 0 0 15px !important;
|
292 |
+
background-color: rgba(0,0,0,0.3) !important;
|
293 |
+
border:0 !important;
|
294 |
+
color: white !important;
|
295 |
+
cursor: pointer;
|
296 |
+
}
|
297 |
+
.send_btn{
|
298 |
+
border-radius: 0 15px 15px 0 !important;
|
299 |
+
background-color: rgba(0,0,0,0.3) !important;
|
300 |
+
border:0 !important;
|
301 |
+
color: white !important;
|
302 |
+
cursor: pointer;
|
303 |
+
}
|
304 |
+
.search_btn{
|
305 |
+
border-radius: 0 15px 15px 0 !important;
|
306 |
+
background-color: rgba(0,0,0,0.3) !important;
|
307 |
+
border:0 !important;
|
308 |
+
color: white !important;
|
309 |
+
cursor: pointer;
|
310 |
+
}
|
311 |
+
.contacts{
|
312 |
+
list-style: none;
|
313 |
+
padding: 0;
|
314 |
+
}
|
315 |
+
.contacts li{
|
316 |
+
width: 100% !important;
|
317 |
+
padding: 5px 10px;
|
318 |
+
margin-bottom: 15px !important;
|
319 |
+
}
|
320 |
+
.active{
|
321 |
+
background-color: rgba(0,0,0,0.3);
|
322 |
+
}
|
323 |
+
.user_img{
|
324 |
+
height: 70px;
|
325 |
+
width: 70px;
|
326 |
+
border:1.5px solid #f5f6fa;
|
327 |
+
|
328 |
}
|
329 |
+
.user_img_msg{
|
330 |
+
height: 40px;
|
331 |
+
width: 40px;
|
332 |
+
border:1.5px solid #f5f6fa;
|
333 |
+
|
334 |
}
|
335 |
+
.img_cont{
|
336 |
+
position: relative;
|
337 |
+
height: 70px;
|
338 |
+
width: 70px;
|
339 |
+
}
|
340 |
+
.img_cont_msg{
|
341 |
+
height: 40px;
|
342 |
+
width: 40px;
|
343 |
+
}
|
344 |
+
.online_icon{
|
345 |
+
position: absolute;
|
346 |
+
height: 15px;
|
347 |
+
width:15px;
|
348 |
+
background-color: #4cd137;
|
349 |
+
border-radius: 50%;
|
350 |
+
bottom: 0.2em;
|
351 |
+
right: 0.4em;
|
352 |
+
border:1.5px solid white;
|
353 |
+
}
|
354 |
+
.offline{
|
355 |
+
background-color: #c23616 !important;
|
356 |
+
}
|
357 |
+
.user_info{
|
358 |
+
margin-top: auto;
|
359 |
+
margin-bottom: auto;
|
360 |
+
margin-left: 15px;
|
361 |
}
|
362 |
+
|
363 |
+
.video_cam{
|
364 |
+
margin-left: 50px;
|
365 |
+
margin-top: 5px;
|
366 |
+
}
|
367 |
+
.video_cam span{
|
368 |
+
color: white;
|
369 |
+
font-size: 20px;
|
370 |
+
cursor: pointer;
|
371 |
+
margin-right: 20px;
|
372 |
+
}.msg_container {
|
373 |
+
background-color: var(--msg-bg);
|
374 |
+
padding: 10px;
|
375 |
+
border-radius: 25px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
376 |
}
|
377 |
+
|
378 |
+
|
379 |
.dark-mode .predictive-text {
|
380 |
+
background-color: rgba(0, 0, 0, 0.8) !important; /* Ensure dark background */
|
381 |
+
color: white !important;
|
382 |
+
border: 1px solid var(--border-color) !important;
|
383 |
}
|
384 |
+
|
385 |
.dark-mode .predictive-text p {
|
386 |
+
background-color: transparent !important;
|
387 |
+
color: white !important;
|
388 |
}
|
389 |
+
|
390 |
.dark-mode .predictive-text p:hover {
|
391 |
+
background-color: rgba(255, 255, 255, 0.2) !important;
|
392 |
}
|
393 |
.msg_container_send {
|
394 |
+
background-color: var(--msg-send-bg);
|
395 |
+
padding: 10px;
|
396 |
+
border-radius: 25px;
|
397 |
+
margin-right:10px;
|
398 |
+
padding-left: 20px;
|
399 |
+
padding-right: 20px;
|
400 |
+
|
401 |
+
}
|
402 |
+
.msg_time{
|
403 |
+
position: absolute;
|
404 |
+
left: 0;
|
405 |
+
bottom: -15px;
|
406 |
+
color: rgba(255,255,255,0.5);
|
407 |
+
font-size: 10px;
|
408 |
+
}
|
409 |
+
.msg_time_send{
|
410 |
+
position: absolute;
|
411 |
+
right:0;
|
412 |
+
bottom: -15px;
|
413 |
+
color: rgba(255,255,255,0.5);
|
414 |
+
font-size: 10px;
|
415 |
+
}
|
416 |
+
.msg_head{
|
417 |
+
position: relative;
|
418 |
+
}
|
419 |
+
#action_menu_btn{
|
420 |
+
position: absolute;
|
421 |
+
right: 10px;
|
422 |
+
top: 10px;
|
423 |
+
color: white;
|
424 |
+
cursor: pointer;
|
425 |
+
font-size: 20px;
|
426 |
+
}.action_menu {
|
427 |
+
z-index: 1;
|
428 |
+
position: absolute;
|
429 |
+
padding: 15px 0;
|
430 |
+
background-color: var(--input-bg);
|
431 |
+
color: var(--text-color);
|
432 |
+
border-radius: 15px;
|
433 |
+
top: 30px;
|
434 |
+
right: 15px;
|
435 |
+
display: none;
|
436 |
}
|
437 |
+
|
438 |
.action_menu ul li {
|
439 |
+
width: 100%;
|
440 |
+
padding: 10px 15px;
|
441 |
+
margin-bottom: 5px;
|
442 |
+
cursor: pointer;
|
443 |
}
|
444 |
+
|
445 |
.action_menu ul li:hover {
|
446 |
+
background-color: rgba(0,0,0,0.2);
|
447 |
}
|
448 |
+
@media (max-width: 768px) {
|
449 |
+
.chat {
|
450 |
+
height: 75vh; /* Smaller on mobile */
|
451 |
+
}
|
452 |
+
.msg_card_body {
|
453 |
+
max-height: 60vh;
|
454 |
+
}
|
|
|
|
|
|
|
|
|
455 |
}
|
456 |
|
457 |
+
.predefined-text a {
|
458 |
+
color: #0a66c2; /* LinkedIn blue */
|
459 |
+
text-decoration: none;
|
460 |
+
font-weight: bold;
|
461 |
+
margin-right: 10px;
|
462 |
+
}
|
463 |
+
|
464 |
+
.predefined-text a i {
|
465 |
+
margin-right: 5px;
|
466 |
+
}
|
467 |
+
|
468 |
+
.predefined-text a:hover {
|
469 |
+
text-decoration: underline;
|
470 |
+
}
|
471 |
/* Mobile Adaptability Enhancements */
|
472 |
@media (max-width: 576px) {
|
473 |
+
/* Adjust overall card spacing and sizing */
|
474 |
+
.chat {
|
475 |
+
height: 100vh; /* Adjust as needed */
|
476 |
+
max-height: fit-content; /* Ensures it doesn't get too large */
|
477 |
+
padding-top: 5px;
|
478 |
+
padding-bottom: 5px;
|
479 |
+
width: 95%;
|
480 |
+
padding-left: 10px;
|
481 |
+
margin: 0 auto;
|
482 |
+
}
|
483 |
|
484 |
+
.card {
|
485 |
+
margin: 10px;
|
486 |
+
border-radius: 10px;
|
487 |
+
}
|
488 |
+
.card-header,
|
489 |
+
.card-footer {
|
490 |
+
padding: 10px;
|
491 |
+
}
|
492 |
+
|
493 |
+
/* Stack header elements vertically and center them */
|
494 |
+
.card-header .d-flex {
|
495 |
+
flex-direction: column;
|
496 |
+
align-items: center;
|
497 |
+
}
|
498 |
+
.user_info {
|
499 |
+
margin-left: 0;
|
500 |
+
text-align: center;
|
501 |
+
margin-bottom: 10px;
|
502 |
+
}
|
503 |
+
.user_info span{
|
504 |
+
font-size: 10px;
|
505 |
+
color: white;
|
506 |
+
}
|
507 |
+
.user_info p{
|
508 |
+
font-size: 0px;
|
509 |
+
color: rgba(255,255,255,0.6);
|
510 |
+
}
|
511 |
+
|
512 |
+
/* Adjust chat container height */
|
513 |
+
.chat {
|
514 |
+
height: 80vh;
|
515 |
+
}
|
516 |
+
.msg_card_body {
|
517 |
+
max-height: 50vh;
|
518 |
+
}
|
519 |
+
|
520 |
+
/* Reduce sizes of images for header and messages */
|
521 |
+
.img_cont,
|
522 |
+
.user_img {
|
523 |
+
height: 50px;
|
524 |
+
width: 50px;
|
525 |
+
}
|
526 |
+
.img_cont_msg,
|
527 |
+
.user_img_msg {
|
528 |
+
height: 30px;
|
529 |
+
width: 30px;
|
530 |
+
}
|
531 |
+
|
532 |
|
533 |
+
/* Adjust input field and button sizes */
|
534 |
+
.type_msg {
|
535 |
+
height: 50px;
|
536 |
+
font-size: 14px;
|
537 |
+
}
|
538 |
+
.btn {
|
539 |
+
font-size: 12px;
|
540 |
+
padding: 5px 8px;
|
541 |
+
}
|
|
|
|
|
|
|
542 |
}
|
543 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|