Adieee5 commited on
Commit
d8f820c
·
verified ·
1 Parent(s): 1cf2e98

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +462 -387
static/style.css CHANGED
@@ -1,468 +1,543 @@
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;
23
- --gradient-start: #dcdcdc;
24
- --gradient-mid: #e6e6e6;
25
- --gradient-end: #cfcfcf;
26
- --card-bg: rgba(255, 255, 255, 0.95);
27
- --text-color: #222;
28
- --msg-bg: #3498db;
29
- --msg-send-bg: #2ecc71;
30
- --placeholder-color: #666;
31
- --input-bg: rgba(255, 255, 255, 0.85);
32
- --border-color: #444;
33
-
34
- background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%)!important;
35
- color: var(--text-color) !important;
36
  }
37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  .dark-mode {
39
- --bg-color: #1a1a1a;
40
- --gradient-start: #2c2f36;
41
- --gradient-mid: #343a40;
42
- --gradient-end: #23272a;
43
- --card-bg: rgba(0, 0, 0, 0.6);
44
- --text-color: #f8f8f8;
45
- --msg-bg: #3498db;
46
- --msg-send-bg: #2ecc71;
47
- --placeholder-color: #bbb;
48
- --input-bg: rgba(0,0,0,0.5);
49
- --border-color: #777;
50
-
51
- background-image: linear-gradient(to top, #09203f 0%, #537895 100%)!important;
52
- color: var(--text-color) !important;
53
  }
54
  .dark-mode .msg_container {
55
- background-color: var(--msg-bg) !important;
56
- color: #000000 !important;
57
  }
 
58
  .dark-mode .msg_container_send {
59
- background-color: var(--msg-send-bg) !important;
60
- color: #000000 !important;
61
  }
62
  .dark-mode .type_msg::placeholder {
63
- color: rgba(255, 255, 255, 0.7) !important;
64
  }
 
 
65
  .dark-mode #themeToggle {
66
- background-color: #ddd !important;
67
- color: black !important;
68
- border: 1px solid #333 !important;
69
  }
 
 
70
  .light-mode #themeToggle {
71
- background-color: #333 !important;
72
- color: white !important;
73
- border: 1px solid #000 !important;
74
  }
 
 
 
75
  .light-mode .user_info span,
76
  .light-mode .user_info p {
77
- color: var(--text-color) !important;
78
  }
 
79
  .light-mode .type_msg {
80
- background-color: var(--input-bg) !important;
81
- color: var(--text-color) !important;
82
- border: 1px solid var(--border-color) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
 
 
 
 
 
 
84
  ::placeholder {
85
- color: var(--placeholder-color);
86
- opacity: 1;
87
  }
88
 
89
  /* Chat Container */
90
  .chat {
91
- height: 90vh;
92
- max-height: 700px;
 
 
 
 
 
93
  }
94
  .card {
95
- height: calc(100%);
96
- max-height: calc(100%);
97
- overflow: hidden;
98
- position: relative;
99
- background-color: var(--card-bg) !important;
100
- border-radius: 15px !important;
 
 
 
 
 
 
101
  }
 
 
 
 
 
 
102
  .msg_card_body {
103
- max-height: 70vh;
104
- overflow-y: auto;
 
105
  }
106
 
107
  /* Predictive Text */
108
  .predictive-text {
109
- position: absolute;
110
- background-color: var(--input-bg);
111
- border: 1px solid var(--border-color);
112
- border-radius: 10px;
113
- padding: 5px;
114
- z-index: 999;
115
- cursor: pointer;
116
- max-height: 150px;
117
- overflow-y: auto;
118
- width: calc(100% - 22px);
119
- bottom: 65px;
120
- left: 10px;
121
- color: var(--text-color);
122
  }
 
123
  .predictive-text p {
124
- margin: 5px 0;
125
- padding: 5px;
126
- cursor: pointer;
127
- transition: background-color 0.3s;
128
- border-radius: 5px;
129
  }
 
130
  .predictive-text p:hover {
131
- background-color: rgba(255, 255, 255, 0.2);
132
  }
 
133
  .predictive-text p:not(:last-child) {
134
- border-bottom: 1px solid #555;
135
  }
136
 
137
  /* Input Fields */
138
  input[type="text"] {
139
- white-space: normal;
140
- overflow-wrap: break-word;
141
- word-wrap: break-word;
142
- width: 100%;
143
- padding: 10px;
144
- height: auto;
145
- background-color: var(--input-bg) !important;
146
- color: var(--text-color) !important;
147
- border: 0 !important;
148
  }
 
149
  ::placeholder {
150
- white-space: normal;
151
- overflow-wrap: break-word;
152
- word-wrap: break-word;
153
- color: var(--placeholder-color);
154
  }
155
 
156
- /* Button styles */
157
- a {
158
- text-decoration: underline !important;
159
- color: blue;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
160
  }
161
- .attach_btn, .send_btn, .search_btn {
162
- border-radius: 15px !important;
163
- background-color: var(--input-bg) !important;
164
- border: 0 !important;
165
- color: var(--text-color) !important;
166
- cursor: pointer;
167
  }
168
-
169
- /* User Info */
170
- .user_info span {
171
- font-size: 20px;
172
- color: var(--text-color);
173
  }
174
- .user_info p {
175
- font-size: 10px;
176
- color: rgba(255, 255, 255, 0.6);
177
  }
178
-
179
- .chat {
180
- margin-top: auto;
181
- margin-bottom: auto;
182
  }
183
- .contacts_body {
184
- padding: 0.75rem 0 !important;
185
- overflow-y: auto;
186
- white-space: nowrap;
187
  }
188
  .msg_card_body {
189
- overflow-y: auto;
190
- }
191
- .card-header {
192
- border-radius: 15px 15px 0 0 !important;
193
- border-bottom: 0 !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  }
195
- .card-footer {
196
- border-radius: 0 0 15px 15px !important;
197
- border-top: 0 !important;
 
 
198
  }
199
- .container {
200
- display: flex;
201
- flex-direction: column;
202
- height: 100vh;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  }
204
- .msg_card_body {
205
- flex-grow: 1;
206
- }
207
- .search {
208
- border-radius: 15px 0 0 15px !important;
209
- background-color: rgba(0,0,0,0.3) !important;
210
- border: 0 !important;
211
- color: white !important;
212
- }
213
- .search:focus {
214
- box-shadow: none !important;
215
- outline: 0px !important;
216
- }
217
- .type_msg {
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
- background-color: rgba(0, 0, 0, 0.8) !important;
323
- color: white !important;
324
- border: 1px solid var(--border-color) !important;
325
  }
 
326
  .dark-mode .predictive-text p {
327
- background-color: transparent !important;
328
- color: white !important;
329
  }
 
330
  .dark-mode .predictive-text p:hover {
331
- background-color: rgba(255, 255, 255, 0.2) !important;
332
  }
333
  .msg_container_send {
334
- background-color: var(--msg-send-bg);
335
- padding: 10px;
336
- border-radius: 25px;
337
- margin-right: 10px;
338
- padding-left: 20px;
339
- padding-right: 20px;
340
- }
341
- .msg_time {
342
- position: absolute;
343
- left: 0;
344
- bottom: -15px;
345
- color: rgba(255,255,255,0.5);
346
- font-size: 10px;
347
- }
348
- .msg_time_send {
349
- position: absolute;
350
- right: 0;
351
- bottom: -15px;
352
- color: rgba(255,255,255,0.5);
353
- font-size: 10px;
354
- }
355
- .msg_head {
356
- position: relative;
357
- }
358
- #action_menu_btn {
359
- position: absolute;
360
- right: 10px;
361
- top: 10px;
362
- color: white;
363
- cursor: pointer;
364
- font-size: 20px;
365
- }
366
- .action_menu {
367
- z-index: 1;
368
- position: absolute;
369
- padding: 15px 0;
370
- background-color: var(--input-bg);
371
- color: var(--text-color);
372
- border-radius: 15px;
373
- top: 30px;
374
- right: 15px;
375
- display: none;
376
  }
 
377
  .action_menu ul li {
378
- width: 100%;
379
- padding: 10px 15px;
380
- margin-bottom: 5px;
381
- cursor: pointer;
382
  }
 
383
  .action_menu ul li:hover {
384
- background-color: rgba(0,0,0,0.2);
385
  }
386
- .predefined-text a {
387
- color: #0a66c2;
388
- text-decoration: none;
389
- font-weight: bold;
390
- margin-right: 10px;
391
- }
392
- .predefined-text a i {
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
- /* Adjust overall card spacing and sizing */
402
- .card {
403
- margin: 10px;
404
- border-radius: 10px;
405
- }
406
- .card-header,
407
- .card-footer {
408
- padding: 10px;
409
- }
 
410
 
411
- /* Stack header elements vertically and center them */
412
- .card-header .d-flex {
413
- flex-direction: column;
414
- align-items: center;
415
- }
416
- .user_info {
417
- margin-left: 0;
418
- text-align: center;
419
- margin-bottom: 10px;
420
- }
421
- /* Center the button container */
422
- .d-flex.flex-column.align-items-end.ml-auto {
423
- margin: 0 auto;
424
- }
425
-
426
- /* Adjust chat container height */
427
- .chat {
428
- height: 80vh;
429
- }
430
- .msg_card_body {
431
- max-height: 50vh;
432
- }
433
-
434
- /* Reduce sizes of images for header and messages */
435
- .img_cont,
436
- .user_img {
437
- height: 50px;
438
- width: 50px;
439
- }
440
- .img_cont_msg,
441
- .user_img_msg {
442
- height: 30px;
443
- width: 30px;
444
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
445
 
446
- /* Adjust text sizes for header info */
447
- .user_info span {
448
- font-size: 18px;
449
- }
450
- .user_info p {
451
- font-size: 10px;
452
- }
453
-
454
- /* Adjust input field and button sizes */
455
- .type_msg {
456
- height: 50px;
457
- font-size: 14px;
458
  }
459
- .btn {
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
+