PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 2.5.9
MxChat – AI Chatbot & Content Generation for WordPress v2.5.9
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
mxchat-basic / css / chat-transcripts.css

chat-transcripts.css in MxChat – AI Chatbot & Content Generation for WordPress 2.5.9, at css/chat-transcripts.css

628 lines 13.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Core Styles */
2 #wpcontent {
3 padding-left: 0;
4 }
5 .stat-sublabel {
6 font-size: 0.8rem;
7 color: #666;
8 display: block;
9 margin-top: 0.5rem;
10 }
11 body.wp-admin .wrap.mxchat-transcripts-wrapper {
12 max-width: 100%;
13 margin: 0 auto;
14 padding: 0;
15 }
16
17 /* Hero Section */
18 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-transcripts-hero {
19 text-align: center;
20 padding: 3.5rem 2rem;
21 position: relative;
22 background: #212121;
23 border-bottom: 4px solid transparent;
24 border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
25 border-image-slice: 1;
26 }
27
28 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-transcripts-hero::before {
29 content: '';
30 position: absolute;
31 top: 0;
32 left: 0;
33 width: 100%;
34 height: 100%;
35 background: radial-gradient(
36 circle at center,
37 rgba(250, 115, 230, 0.08) 0%,
38 rgba(120, 115, 245, 0.08) 50%,
39 rgba(58, 201, 209, 0.08) 100%
40 );
41 z-index: 1;
42 }
43
44 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-main-title {
45 font-size: 3.5rem;
46 margin: 0 0 1.5rem;
47 line-height: 1.2;
48 color: white;
49 position: relative;
50 z-index: 2;
51 }
52
53 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-gradient-text {
54 background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
55 -webkit-background-clip: text;
56 -webkit-text-fill-color: transparent;
57 display: inline-block;
58 font-weight: 700;
59 }
60
61 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-hero-subtitle {
62 font-size: 1.25rem;
63 color: rgba(255, 255, 255, 0.9);
64 max-width: 800px;
65 margin: 0 auto;
66 position: relative;
67 z-index: 2;
68 line-height: 1.6;
69 }
70
71 /* Content Area */
72 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-content {
73 padding: 2rem;
74 max-width: 1400px;
75 margin: 0 auto;
76 }
77
78 /* Action Buttons */
79 .mxchat-action-button {
80 background: linear-gradient(135deg, #fa73e6, #7873f5);
81 color: white;
82 border: none;
83 padding: 8px 16px;
84 border-radius: 8px;
85 cursor: pointer;
86 font-weight: 600;
87 display: flex;
88 align-items: center;
89 gap: 8px;
90 transition: transform 0.2s ease, box-shadow 0.2s ease;
91 }
92
93 .mxchat-action-button:hover {
94 transform: translateY(-1px);
95 box-shadow: 0 4px 12px rgba(120, 115, 245, 0.2);
96 }
97
98 .mxchat-action-button.loading {
99 opacity: 0.7;
100 cursor: not-allowed;
101 }
102
103 .mxchat-action-button .dashicons {
104 font-size: 16px;
105 width: 16px;
106 height: 16px;
107 }
108
109 /* Session Container - Clean and Minimal */
110 .mxchat-session {
111 background: #ffffff;
112 border: 1px solid #e5e7eb;
113 border-radius: 8px;
114 margin-bottom: 16px;
115 overflow: hidden;
116 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
117 transition: all 0.2s ease;
118 }
119
120 .mxchat-session:hover {
121 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
122 }
123
124 /* Selected state for entire session */
125 .mxchat-session.selected {
126 border: 2px solid #3b82f6;
127 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
128 }
129
130 .mxchat-session.selected .mxchat-session-header {
131 background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
132 }
133
134 /* Show trash icon when session is selected */
135 .mxchat-session.selected .mxchat-hover-actions {
136 opacity: 1;
137 }
138
139 /* Clean Hover-Action Session Header */
140 .mxchat-session-header {
141 background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
142 border-bottom: 1px solid #e2e8f0;
143 padding: 16px 20px;
144 transition: background-color 0.2s ease;
145 position: relative;
146 cursor: pointer;
147 }
148
149 .mxchat-session-header:hover {
150 background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
151 }
152
153 /* Top-centered user pill */
154 .mxchat-user-row {
155 color: #1e293b;
156 font-size: 15px;
157 font-weight: 600;
158 margin-bottom: 12px;
159 background: linear-gradient(135deg, #f0f9ff, #dbeafe);
160 padding: 6px 16px;
161 border-radius: 20px;
162 border: 1px solid #bfdbfe;
163 display: inline-block;
164 max-width: calc(100% - 40px);
165 overflow: hidden;
166 text-overflow: ellipsis;
167 white-space: nowrap;
168 text-align: center;
169 width: fit-content;
170 display: block;
171 margin: 0 auto 12px auto;
172 }
173
174 .mxchat-header-row {
175 display: flex;
176 justify-content: flex-start;
177 align-items: center;
178 margin-bottom: 8px;
179 }
180
181 .mxchat-main-info {
182 display: flex;
183 align-items: left;
184 flex-direction: column;
185 gap: 8px;
186 }
187
188 .mxchat-session-id {
189 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
190 font-size: 14px;
191 font-weight: 700;
192 color: #475569;
193 background: #e2e8f0;
194 padding: 4px 8px;
195 border-radius: 6px;
196 }
197
198 .mxchat-separator {
199 color: #94a3b8;
200 font-weight: 500;
201 }
202
203 .mxchat-session-time {
204 color: #64748b;
205 font-size: 13px;
206 font-weight: 500;
207 }
208
209 /* Bottom-right positioned trash can */
210 .mxchat-hover-actions {
211 position: absolute;
212 bottom: 12px;
213 right: 16px;
214 opacity: 0;
215 transition: opacity 0.2s ease;
216 }
217
218 .mxchat-session-header:hover .mxchat-hover-actions {
219 opacity: 1;
220 }
221
222 .mxchat-delete-btn {
223 background: none;
224 border: none;
225 cursor: pointer;
226 font-size: 16px;
227 padding: 4px 8px;
228 border-radius: 4px;
229 transition: background-color 0.2s ease;
230 }
231
232 .mxchat-delete-btn:hover {
233 background: rgba(239, 68, 68, 0.1);
234 }
235
236 /* Content Rows */
237 .mxchat-page-row,
238 .mxchat-links-row {
239 color: #64748b;
240 font-size: 13px;
241 margin-bottom: 4px;
242 line-height: 1.4;
243 }
244
245 .mxchat-label {
246 font-weight: 600;
247 color: #475569;
248 }
249
250 .mxchat-page-link {
251 color: #3b82f6;
252 text-decoration: none;
253 font-weight: 500;
254 transition: color 0.2s ease;
255 }
256
257 .mxchat-page-link:hover {
258 color: #1d4ed8;
259 text-decoration: underline;
260 }
261
262 .mxchat-link-item {
263 color: #7c3aed;
264 text-decoration: none;
265 font-weight: 500;
266 transition: color 0.2s ease;
267 }
268
269 .mxchat-link-item:hover {
270 color: #5b21b6;
271 text-decoration: underline;
272 }
273
274 /* Messages Section - Keep existing styling */
275 .mxchat-messages {
276 padding: 16px;
277 background: #ffffff;
278 }
279
280 .mxchat-message {
281 border-radius: 8px;
282 border-left: 4px solid transparent;
283 }
284
285 .mxchat-message-header {
286 font-weight: 600;
287 font-size: 14px;
288 color: #374151;
289 margin-bottom: 6px;
290 }
291
292 .mxchat-message-content {
293 color: #4b5563;
294 line-height: 1.6;
295 font-size: 14px;
296 margin-bottom: 8px;
297 }
298
299 .mxchat-timestamp {
300 font-size: 12px;
301 color: #9ca3af;
302 font-weight: 500;
303 }
304
305 /* Chat Email Notification Modal styles */
306 .mxchat-chat-notification-modal-overlay {
307 position: fixed;
308 z-index: 9999;
309 left: 0;
310 top: 0;
311 width: 100%;
312 height: 100%;
313 background-color: rgba(0, 0, 0, 0.5);
314 display: flex;
315 align-items: center;
316 justify-content: center;
317 animation: mxchatNotificationFadeIn 0.3s ease;
318 }
319
320 @keyframes mxchatNotificationFadeIn {
321 from { opacity: 0; }
322 to { opacity: 1; }
323 }
324
325 .mxchat-chat-notification-modal-content {
326 background-color: #fff;
327 border-radius: 12px;
328 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
329 width: 90%;
330 max-width: 500px;
331 max-height: 90vh;
332 display: flex;
333 flex-direction: column;
334 animation: mxchatNotificationSlideIn 0.3s ease;
335 }
336
337 @keyframes mxchatNotificationSlideIn {
338 from { transform: translateY(-20px); opacity: 0; }
339 to { transform: translateY(0); opacity: 1; }
340 }
341
342 .mxchat-chat-notification-modal-header {
343 padding: 20px;
344 border-bottom: 1px solid #e5e7eb;
345 display: flex;
346 justify-content: space-between;
347 align-items: center;
348 }
349
350 .mxchat-chat-notification-modal-header h2 {
351 margin: 0;
352 font-size: 20px;
353 font-weight: 600;
354 color: #1f2937;
355 }
356
357 .mxchat-chat-notification-modal-close {
358 background: none;
359 border: none;
360 font-size: 24px;
361 cursor: pointer;
362 color: #6b7280;
363 padding: 0;
364 width: 30px;
365 height: 30px;
366 display: flex;
367 align-items: center;
368 justify-content: center;
369 border-radius: 50%;
370 transition: all 0.2s ease;
371 }
372
373 .mxchat-chat-notification-modal-close:hover {
374 background-color: #f3f4f6;
375 color: #1f2937;
376 }
377
378 .mxchat-chat-notification-modal-body {
379 padding: 20px;
380 overflow-y: auto;
381 flex: 1;
382 }
383
384 .mxchat-chat-notification-modal-body p {
385 margin-top: 0;
386 color: #4b5563;
387 line-height: 1.6;
388 }
389
390 .mxchat-chat-notification-modal-footer {
391 padding: 20px;
392 border-top: 1px solid #e5e7eb;
393 display: flex;
394 justify-content: flex-end;
395 gap: 10px;
396 }
397
398 #mxchat-chat-email-notification-btn:hover {
399 transform: translateY(-2px);
400 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
401 }
402
403 #mxchat-chat-email-notification-btn .dashicons {
404 font-size: 18px;
405 width: 18px;
406 height: 18px;
407 }
408
409 /* Form styles within chat notification modal */
410 .mxchat-chat-notification-modal-content .form-table {
411 margin: 0;
412 }
413
414 .mxchat-chat-notification-modal-content .form-table th {
415 padding: 15px 10px 15px 0;
416 width: 180px;
417 font-weight: 600;
418 color: #374151;
419 }
420
421 .mxchat-chat-notification-modal-content .form-table td {
422 padding: 15px 10px;
423 }
424
425 .mxchat-chat-notification-modal-content .regular-text {
426 width: 100%;
427 max-width: 100%;
428 border: 1px solid #d1d5db;
429 border-radius: 6px;
430 padding: 8px 12px;
431 font-size: 14px;
432 }
433
434 .mxchat-chat-notification-modal-content .description {
435 margin-top: 8px;
436 color: #6b7280;
437 font-size: 13px;
438 }
439
440 /* Checkbox styling in chat notification modal */
441 .mxchat-chat-notification-modal-content input[type="checkbox"] {
442 margin-right: 8px;
443 }
444
445 .mxchat-chat-notification-modal-content label {
446 color: #374151;
447 font-size: 14px;
448 }
449
450 /* Button styling in chat notification modal */
451 .mxchat-chat-notification-modal-content .button {
452 padding: 8px 16px;
453 border-radius: 6px;
454 font-size: 14px;
455 cursor: pointer;
456 transition: all 0.2s ease;
457 }
458
459 .mxchat-chat-notification-modal-content .button-primary {
460 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
461 border: none;
462 color: #fff;
463 }
464
465 .mxchat-chat-notification-modal-content .button-primary:hover {
466 transform: translateY(-1px);
467 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
468 }
469
470 .mxchat-chat-notification-modal-content .mxchat-chat-notification-modal-cancel {
471 background: #f3f4f6;
472 border: 1px solid #e5e7eb;
473 color: #374151;
474 }
475
476 .mxchat-chat-notification-modal-content .mxchat-chat-notification-modal-cancel:hover {
477 background: #e5e7eb;
478 }
479
480 /* Pagination Styles */
481 .mxchat-pagination {
482 margin-top: 20px;
483 display: flex;
484 flex-wrap: wrap;
485 justify-content: space-between;
486 align-items: center;
487 }
488
489 .mxchat-pagination-info {
490 margin-bottom: 10px;
491 color: #666;
492 }
493
494 .mxchat-pagination-controls {
495 display: flex;
496 flex-wrap: wrap;
497 gap: 5px;
498 }
499
500 .mxchat-pagination-button {
501 padding: 6px 12px;
502 background: #f7f7f7;
503 border: 1px solid #ddd;
504 border-radius: 3px;
505 cursor: pointer;
506 transition: all 0.2s ease;
507 }
508
509 .mxchat-pagination-button:hover {
510 background: #e9e9e9;
511 }
512
513 .mxchat-pagination-button.active {
514 background: #2271b1;
515 border-color: #2271b1;
516 color: white;
517 font-weight: bold;
518 }
519
520 .mxchat-pagination-ellipsis {
521 padding: 6px 8px;
522 color: #666;
523 }
524
525 /* No Results Styling */
526 .mxchat-no-results {
527 text-align: center;
528 padding: 40px 20px;
529 color: #6b7280;
530 font-size: 16px;
531 background: #f9fafb;
532 border-radius: 8px;
533 border: 2px dashed #d1d5db;
534 }
535
536 /* Responsive Design */
537 @media (max-width: 768px) {
538 body.wp-admin .wrap.mxchat-transcripts-wrapper {
539 padding: 0;
540 }
541
542 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-main-title {
543 font-size: 2.5rem;
544 }
545
546 body.wp-admin .wrap.mxchat-transcripts-wrapper .mxchat-transcripts-hero {
547 padding: 2.5rem 1.5rem;
548 }
549
550 .auto-fold #wpcontent {
551 margin-left: 0;
552 padding-left: 0px;
553 }
554
555 .mxchat-action-button {
556 width: 100%;
557 }
558
559 .mxchat-session-header {
560 padding: 10px 12px;
561 flex-direction: column;
562 align-items: flex-start;
563 gap: 8px;
564 }
565
566 .mxchat-session-info {
567 width: 100%;
568 gap: 8px;
569 }
570
571 .mxchat-session-details {
572 flex-direction: column;
573 align-items: flex-start;
574 gap: 6px;
575 }
576
577 .mxchat-user,
578 .mxchat-page,
579 .mxchat-links {
580 max-width: none;
581 }
582
583 .mxchat-session-time {
584 align-self: flex-end;
585 }
586
587 .mxchat-messages {
588 padding: 12px;
589 }
590
591 .mxchat-pagination {
592 flex-direction: column;
593 align-items: flex-start;
594 }
595
596 .mxchat-pagination-controls {
597 margin-top: 10px;
598 }
599 }
600
601 /* Focus states for accessibility */
602 .mxchat-checkbox:focus {
603 outline: 2px solid #7873f5;
604 outline-offset: 2px;
605 }
606
607 .mxchat-page a:focus,
608 .mxchat-links a:focus {
609 outline: 2px solid #3b82f6;
610 outline-offset: 1px;
611 border-radius: 2px;
612 }
613
614 /* Animation for new sessions */
615 .mxchat-session.animate-in {
616 animation: slideInFromTop 0.3s ease-out;
617 }
618
619 @keyframes slideInFromTop {
620 0% {
621 opacity: 0;
622 transform: translateY(-10px);
623 }
624 100% {
625 opacity: 1;
626 transform: translateY(0);
627 }
628 }