PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 1.5.6
MxChat – AI Chatbot & Content Generation for WordPress v1.5.6
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 / admin-style.css

admin-style.css in MxChat – AI Chatbot & Content Generation for WordPress 1.5.6, at css/admin-style.css

1,338 lines 26.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2
3 .mxchat-modal {
4 display: none;
5 position: fixed;
6 z-index: 1000;
7 left: 0;
8 top: 0;
9 width: 100%;
10 height: 100%;
11 background-color: rgba(0,0,0,0.4);
12 }
13
14 .mxchat-modal-content {
15 background-color: #fefefe;
16 margin: 15% auto;
17 padding: 20px;
18 border: 1px solid #ddd;
19 width: 70%;
20 max-width: 600px;
21 border-radius: 4px;
22 }
23
24 .mxchat-modal-close {
25 color: #aaa;
26 float: right;
27 font-size: 28px;
28 font-weight: bold;
29 cursor: pointer;
30 }
31
32 .mxchat-modal-close:hover {
33 color: black;
34 }
35
36
37
38
39 .mxchat-admin .button.button-secondary.mxchat-edit-button {
40 background: #3498db;
41 color: #fff;
42 border-radius: 20px;
43 padding: 0px 20px !important;
44 font-size: 1rem;
45 font-weight: 700;
46 text-decoration: none;
47 transition: all .2s;
48 justify-content: center;
49 align-items: center;
50 box-shadow: 4px 4px #2980b9;
51 cursor: pointer;
52 margin-top: 10px;
53 border: none;
54 width: 100%;
55 }
56
57
58 .mxchat-admin .mxchat-intents-table .mxchat-delete-all {
59 width: 100%;
60 }
61
62 .mxchat-admin .mxchat-intents-table .mxchat-save-button {
63 max-width: 100% !important;
64 width: 100% !important;
65 }
66
67 .mxchat-agents-banner {
68 background-color: #fff;
69 margin-bottom: 20px;
70 border-radius: 4px;
71 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
72 position: relative;
73 margin-left: auto;
74 margin-right: auto;
75 padding: 0px 15px;
76 }
77
78 .mxchat-agents-banner::before {
79 content: '';
80 position: absolute;
81 top: 0;
82 left: 0px;
83 width: 10px; /* Matches border-left width */
84 height: 100%;
85 background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1); /* Gradient */
86 border-radius: 4px 0 0 4px; /* Match overall border radius */
87 }
88
89 .mxchat-agents-banner p {
90 font-size: 14px;
91 line-height: 1.6;
92 color: #444; /* Dark gray text */
93 margin: 0;
94 padding: 15px 10px;
95 }
96
97 .mxchat-agents-banner a {
98 background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1); /* Gradient text */
99 -webkit-background-clip: text;
100 -webkit-text-fill-color: transparent; /* Makes gradient visible */
101 font-weight: bold;
102 text-decoration: none;
103 transition: opacity 0.2s ease;
104 }
105
106 .mxchat-agents-banner a:hover {
107 opacity: 0.8; /* Subtle fade on hover */
108 text-decoration: underline; /* Underline for accessibility */
109 }
110
111
112
113 .mxchat-transcript {
114 display: flex;
115 flex-wrap: wrap;
116 gap: 20px;
117 justify-content: flex-start;
118 }
119
120 .mxchat-session {
121 border: 1px solid #ddd;
122 padding: 15px;
123 width: calc(33.333% - 20px);
124 box-sizing: border-box;
125 background-color: #f9f9f9;
126 display: flex;
127 flex-direction: column;
128 max-height: 500px;
129 overflow: auto;
130 border-radius: 6px;
131 padding: 12px;
132 box-shadow: 0 1px 2px rgba(0,0,0,0.05);
133 max-width: 300px;
134 }
135
136 .mxchat-session-header {
137 display: flex;
138 align-items: center;
139 gap: 8px;
140 margin-bottom: 10px;
141 padding-bottom: 8px;
142 border-bottom: 1px solid #dcdcde;
143 font-size: 12px;
144 color: #50575e;
145 }
146
147 .mxchat-messages {
148 display: flex;
149 flex-direction: column;
150 gap: 8px;
151 max-height: 400px;
152 overflow-y: auto;
153 }
154
155 .mxchat-message {
156 display: flex;
157 flex-direction: column;
158 max-width: 85%;
159 }
160
161 .mxchat-messages .user-message {
162 align-self: flex-end;
163 }
164
165 .mxchat-messages .bot-message,
166 .mxchat-messages .agent-message {
167 align-self: flex-start;
168 }
169
170 .mxchat-message-header {
171 font-size: 11px;
172 color: #666;
173 margin-bottom: 2px;
174 padding: 0 8px;
175 }
176
177 .mxchat-message-content {
178 padding: 8px 12px;
179 border-radius: 12px;
180 font-size: 13px;
181 line-height: 1.4;
182 word-wrap: break-word;
183 }
184
185 .mxchat-messages .user-message .mxchat-message-content {
186 background: #0073aa;
187 color: #fff;
188 border-bottom-right-radius: 4px;
189 }
190
191 .mxchat-messages .bot-message .mxchat-message-content {
192 background: #f0f0f1;
193 color: #1d2327;
194 border-bottom-left-radius: 4px;
195 }
196
197 .mxchat-messages .agent-message .mxchat-message-content {
198 background: #2271b1;
199 color: #fff;
200 border-bottom-left-radius: 4px;
201 }
202
203 .mxchat-timestamp {
204 font-size: 10px;
205 color: #8c8f94;
206 margin-top: 2px;
207 padding: 0 8px;
208 }
209
210 .mxchat-messages::-webkit-scrollbar {
211 width: 6px;
212 }
213
214 .mxchat-messages::-webkit-scrollbar-track {
215 background: #f1f1f1;
216 }
217
218 .mxchat-messages::-webkit-scrollbar-thumb {
219 background: #888;
220 border-radius: 3px;
221 }
222
223
224
225
226
227
228
229
230
231 .mxchat-process-status {
232 margin-top: 20px;
233 padding: 15px;
234 background: #fff;
235 border: 1px solid #ddd;
236 border-radius: 4px;
237 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
238 }
239
240 .mxchat-process-status h3 {
241 margin: 0 0 15px 0;
242 color: #23282d;
243 font-size: 14px;
244 font-weight: 600;
245 }
246
247 .mxchat-process-status p {
248 margin: 8px 0;
249 color: #555;
250 font-size: 13px;
251 }
252
253 .mxchat-process-status .status-complete {
254 color: #46b450;
255 font-weight: 500;
256 }
257
258 .mxchat-process-status.complete {
259 border-color: #46b450;
260 }
261
262
263
264
265
266 /* Toggle Switch Styles */
267 .mxchat-switch {
268 position: relative;
269 display: inline-block;
270 width: 60px;
271 height: 34px;
272 margin-right: 10px;
273 }
274
275 .mxchat-switch input {
276 opacity: 0;
277 width: 0;
278 height: 0;
279 }
280
281 .mxchat-slider {
282 position: absolute;
283 cursor: pointer;
284 top: 0;
285 left: 0;
286 right: 0;
287 bottom: 0;
288 background-color: #ccc;
289 transition: .4s;
290 border-radius: 34px;
291 }
292
293 .mxchat-slider:before {
294 position: absolute;
295 content: "";
296 height: 26px;
297 width: 26px;
298 left: 4px;
299 bottom: 4px;
300 background-color: white;
301 transition: .4s;
302 border-radius: 50%;
303 }
304
305 input:checked + .mxchat-slider {
306 background-color: #2196F3;
307 }
308
309 input:disabled + .mxchat-slider {
310 opacity: 0.5;
311 cursor: not-allowed;
312 }
313
314 input:checked + .mxchat-slider:before {
315 transform: translateX(26px);
316 }
317
318 .mxchat-status-label {
319 display: inline-block;
320 vertical-align: middle;
321 margin-left: 10px;
322 }
323
324 .status-text {
325 font-weight: 500;
326 }
327
328
329
330
331 .mxchat-question-row {
332 margin-bottom: 10px;
333 }
334
335 .mxchat-similarity-threshold .mxchat-slider-container {
336 display: flex;
337 align-items: center;
338 gap: 15px;
339 margin-top: 10px;
340 }
341
342 .mxchat-similarity-threshold input[type="range"] {
343 flex: 1;
344 margin: 0;
345 }
346
347 .mxchat-similarity-threshold .button-primary {
348 white-space: nowrap;
349 }
350
351 .mxchat-similarity-threshold label {
352 font-weight: bold;
353 display: block;
354 margin-bottom: 5px;
355 }
356
357 .mxchat-similarity-threshold {
358 max-width: 600px;
359 }
360
361 #threshold_value_display {
362 font-weight: normal;
363 margin-left: 10px;
364 color: #0073aa;
365 }
366
367 .mxchat-form-group {
368 margin-bottom: 20px;
369 }
370
371 .mxchat-form-group input[type="range"] {
372 width: 100%;
373 margin-top: 10px;
374 }
375
376 .mxchat-form-group label {
377 font-weight: bold;
378 display: block;
379 margin-bottom: 5px;
380 }
381
382 .mxchat-form-group .description {
383 font-size: 0.9em;
384 color: #666;
385 }
386
387 #threshold_value_display {
388 font-weight: normal;
389 margin-left: 10px;
390 color: #0073aa;
391 }
392
393
394
395
396 .mxchat-product-image, .mxchat-generated-image, .mxchat-image-thumbnail {
397 max-width: 100%;
398 }
399 .description {
400 margin-top: -10px;
401 }
402 .mxchat-search-group {
403 margin-top: 20px;
404 }
405
406 .tablenav .tablenav-pages {
407 display: flex;
408 align-items: center;
409 margin-left: 20px;
410 gap: 5px;
411 }
412
413 /* General Styles */
414 .mxchat-admin body, .mxchat-admin html {
415 font-family: Arial, sans-serif;
416 background-color: #fff;
417 color: #212121;
418 margin: 0;
419 padding: 0;
420 }
421
422 /* Main Wrapper */
423 .mxchat-admin .wrap {
424 max-width: 1200px;
425 margin: 0 auto;
426 padding: 20px;
427 background: #f9f9f9;
428 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
429 }
430
431 /* Header */
432 .mxchat-admin .wrap h2 {
433 border-bottom: 2px solid #ddd;
434 padding-bottom: 10px;
435 margin-bottom: 20px;
436 color: #212121;
437 }
438
439 .wrap.mxchat-admin .admin-title {
440 text-shadow: 0 2px 0 #c6c6c6;
441 font-weight: bold;
442 letter-spacing: 5px;
443 color: #212121;
444 font-size: 2.5rem;
445 }
446
447 .mxchat-admin .admin-emphasis {
448 color: white;
449 text-shadow: 2px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 0px 0 0 #000, 4px 0 0 #000, 0 0px 0 #000, 0 0px 0 #000;
450 font-weight: bold;
451 letter-spacing: 5px;
452 font-size: 2.5rem;
453 }
454 /* Grid Layout */
455 .mxchat-admin .mxchat-grid-container {
456 display: grid;
457 grid-template-columns: repeat(2, 1fr);
458 grid-gap: 20px;
459 }
460
461 .mxchat-admin .mxchat-grid-item {
462 background: #fff;
463 border: 1px solid #ddd;
464 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
465 padding: 20px;
466 }
467
468 /* Full Width for Submit Content */
469 .mxchat-admin .mxchat-grid-item.full-width {
470 grid-column: span 2;
471 }
472
473 /* Form Styles */
474 .mxchat-admin .mxchat-form-group {
475 display: flex;
476 flex-direction: column;
477 margin-bottom: 20px;
478 }
479
480 .mxchat-admin .mxchat-form-group label {
481 margin-bottom: 10px;
482 font-weight: bold;
483 color: #212121;
484 }
485
486 .mxchat-admin .mxchat-form-group input[type="url"],
487 .mxchat-admin .mxchat-form-group input[type="text"],
488 .mxchat-admin .mxchat-form-group textarea {
489 padding: 10px;
490 border: 1px solid #ddd;
491 border-radius: 4px;
492 font-size: 1rem;
493 width: 100%;
494 box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
495 }
496
497 /* Larger Textarea for Content Submission */
498 .mxchat-admin .mxchat-form-group textarea {
499 min-height: 200px;
500 }
501
502 /* Button Styles */
503 .mxchat-admin .button.button-primary {
504 color: #fff;
505 background: #212121;
506 border-radius: 20px;
507 padding: 0px 30px;
508 font-size: 1rem;
509 font-weight: 700;
510 text-decoration: none;
511 transition: all .2s;
512 display: inline-flex;
513 justify-content: center;
514 align-items: center;
515 max-width: 200px;
516 width: auto;
517 box-shadow: 4px 4px #14141499;
518 border: none;
519 cursor: pointer;
520 }
521
522 .mxchat-admin .button.button-primary:hover,
523 .mxchat-admin .button.button-primary:active {
524 background: #444;
525 }
526
527 .submit-content-button {
528 margin-top: 10px !important;
529 }
530
531 /* Search and Sitemap Group */
532 .mxchat-admin .mxchat-search-group {
533 display: flex;
534 align-items: center;
535 gap: 10px;
536 }
537
538 .mxchat-admin .mxchat-search-group input[type="text"],
539 .mxchat-admin .mxchat-search-group input[type="url"] {
540 flex-grow: 1;
541 }
542
543 .mxchat-admin .mxchat-search-group input[type="submit"] {
544 background: #212121;
545 color: #fff;
546 border-radius: 20px;
547 padding: 0px 30px;
548 font-size: 1rem;
549 font-weight: 700;
550 box-shadow: 4px 4px #14141499;
551 border: none;
552 transition: background-color .2s;
553 cursor: pointer;
554 }
555
556 .mxchat-admin .mxchat-search-group input[type="submit"]:hover {
557 background-color: #444;
558 }
559
560 .mxchat-admin .mxchat-delete-all {
561 background: #e74c3c;
562 color: #fff;
563 border-radius: 20px;
564 padding: 10px 20px !important;
565 font-size: 1rem;
566 font-weight: 700;
567 text-decoration: none;
568 transition: all .2s;
569 justify-content: center;
570 align-items: center;
571 box-shadow: 4px 4px #c0392b;
572 cursor: pointer;
573 margin-top: 10px;
574 border: none;
575 }
576
577 .mxchat-admin .mxchat-delete-all:hover {
578 color: #fff;
579 background-color: #c0392b;
580 box-shadow: 4px 4px #a93226
581 }
582
583 .mxchat-admin .mxchat-intents-table .mxchat-delete-all {
584 background: #e74c3c;
585 color: #fff;
586 border-radius: 20px;
587 padding: 0px 20px !important;
588 font-size: 1rem;
589 font-weight: 700;
590 text-decoration: none;
591 transition: all .2s;
592 justify-content: center;
593 align-items: center;
594 box-shadow: 4px 4px #c0392b;
595 cursor: pointer;
596 margin-top: 10px;
597 border: none;
598 }
599
600 .mxchat-admin .mxchat-intents-table .mxchat-delete-all:hover {
601 color: #fff;
602 background-color: #c0392b;
603 box-shadow: 4px 4px #a93226;
604 }
605
606
607
608 /* Table Styles */
609 .mxchat-admin .wp-list-table {
610 width: 100%;
611 margin-top: 20px;
612 border-collapse: collapse;
613 background: #fff;
614 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
615 }
616
617 .mxchat-admin .wp-list-table th,
618 .mxchat-admin .wp-list-table td {
619 padding: 15px;
620 border-bottom: 1px solid #ddd;
621 text-align: left;
622 }
623
624 .mxchat-admin .wp-list-table th {
625 background: #f0f2f5;
626 color: #212121;
627 }
628
629 .mxchat-admin .wp-list-table tr:nth-child(even) {
630 background: #f9f9f9;
631 }
632
633 .mxchat-admin .mxchat-pro-banner {
634 background-color: #fff;
635 padding: 0px 15px;
636 margin-bottom: 20px;
637 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
638 position: relative; /* Required for the ::before pseudo-element */
639 }
640
641 .mxchat-admin .mxchat-pro-banner::before {
642 content: '';
643 position: absolute;
644 top: 0;
645 left: 0px;
646 width: 10px; /* Matches the border-left width in your original CSS */
647 height: 100%;
648 background-color: #212121; /* Dark bar color */
649 border-radius: 4px 0 0 4px; /* Rounded corners on the left */
650 }
651
652
653 .mxchat-admin .mxchat-pro-banner p {
654 margin: 0;
655 font-size: 16px;
656 color: #212121;
657 padding: 15px 10px;
658 }
659
660 .mxchat-admin .mxchat-pro-banner a {
661 color: #212121;
662 text-decoration: none;
663 font-weight: bold;
664 }
665
666 .mxchat-admin .mxchat-pro-banner a:hover {
667 text-decoration: underline;
668 }
669
670 /* Toggle Switch Styles */
671 .mxchat-admin .toggle-switch {
672 position: relative;
673 display: inline-block;
674 width: 60px;
675 height: 34px;
676 }
677
678 .mxchat-admin .toggle-switch input {
679 opacity: 0;
680 width: 0;
681 height: 0;
682 }
683
684 .mxchat-admin .slider {
685 position: absolute;
686 cursor: pointer;
687 top: 0;
688 left: 0;
689 right: 0;
690 bottom: 0;
691 background-color: #ccc;
692 transition: .4s;
693 border-radius: 34px;
694 }
695
696 .mxchat-admin .slider:before {
697 position: absolute;
698 content: "";
699 height: 26px;
700 width: 26px;
701 left: 4px;
702 bottom: 4px;
703 background-color: white;
704 transition: .4s;
705 border-radius: 50%;
706 }
707
708 .mxchat-admin input:checked + .slider {
709 background-color: #212121;
710 }
711
712 .mxchat-admin input:checked + .slider:before {
713 transform: translateX(26px);
714 }
715
716 /* Toggle Switch Label */
717 .mxchat-admin .toggle-switch-label {
718 display: flex;
719 align-items: center;
720 font-weight: 600;
721 color: #212121;
722 margin-bottom: 20px;
723 }
724
725 .mxchat-loading-text {
726 display: none;
727 margin-top: 10px;
728 color: #333;
729 }
730
731 .mxchat-spinner {
732 border: 8px solid #f3f3f3;
733 border-top: 8px solid #333;
734 border-radius: 50%;
735 width: 30px;
736 height: 30px;
737 animation: mxchat-spin 1s linear infinite;
738 display: flex;
739 justify-content: center;
740 align-items: center;
741 }
742
743 #mxchat-content-loading-text {
744 display: none;
745 margin-top: 10px;
746 color: #333;
747 }
748
749 .mxchat-content-spinner {
750 border: 8px solid #f3f3f3;
751 border-top: 8px solid #333;
752 border-radius: 50%;
753 width: 30px;
754 height: 30px;
755 animation: mxchat-spin 1s linear infinite;
756 display: flex;
757 justify-content: center;
758 align-items: center;
759 }
760
761 #mxchat-intent-loading {
762 border: 8px solid #f3f3f3;
763 border-top: 8px solid #333;
764 border-radius: 50%;
765 width: 30px;
766 height: 30px;
767 animation: mxchat-spin 1s linear infinite;
768 display: inline-block; /* Display as inline for better alignment */
769 margin-left: 10px;
770 vertical-align: middle;
771 }
772
773 #mxchat-intent-loading-text {
774 display: none;
775 margin-top: 10px;
776 color: #333;
777 }
778
779 #mxchat-activation-spinner {
780 border: 4px solid #f3f3f3;
781 border-top: 4px solid #007cba; /* Match the WordPress primary button color */
782 border-radius: 50%;
783 width: 20px;
784 height: 20px;
785 animation: mxchat-spin 1s linear infinite;
786 display: inline-block;
787 vertical-align: middle;
788 margin-left: 10px;
789 }
790
791 @keyframes mxchat-spin {
792 0% { transform: rotate(0deg); }
793 100% { transform: rotate(360deg); }
794 }
795
796
797
798
799 .pro-feature-wrapper {
800 position: relative;
801 display: inline-block;
802 }
803
804 .pro-feature-wrapper.active select,
805 .pro-feature-wrapper.active textarea {
806 opacity: 1; /* Fully opaque when active */
807 }
808
809 .pro-feature-wrapper.inactive select,
810 .pro-feature-wrapper.inactive textarea {
811 opacity: 0.5; /* Grayed out when inactive */
812 }
813
814 .pro-feature-overlay {
815 position: absolute;
816 top: 0;
817 left: 0;
818 width: 100%;
819 height: 100%;
820 display: flex;
821 justify-content: center;
822 align-items: center;
823 pointer-events: none;
824 }
825
826 .pro-feature-overlay img {
827 max-width: 100px;
828 pointer-events: auto; /* Allow clicking the image */
829 }
830
831 .pro-feature-wrapper a {
832 text-decoration: none;
833 position: absolute;
834 top: 0;
835 left: 0;
836 width: 100%;
837 height: 100%;
838 z-index: 10; /* Ensure the link is above everything else */
839 }
840
841
842 .mxchat-admin .chat-session {
843 border: 1px solid #ddd;
844 padding: 15px;
845 width: calc(33.333% - 20px);
846 box-sizing: border-box;
847 background-color: #f9f9f9;
848 display: flex;
849 flex-direction: column;
850 max-height: 500px;
851 overflow: auto;
852 }
853
854 .mxchat-admin .chat-message {
855 border-bottom: 1px solid #eee;
856 padding-bottom: 10px;
857 margin-bottom: 10px;
858 }
859
860 .mxchat-admin .chat-session h4 {
861 margin-bottom: 15px;
862 font-size: 1.1em;
863 font-weight: 700;
864 }
865
866 .mxchat-controls {
867 display: flex;
868 align-items: center;
869 margin-bottom: 15px;
870 }
871
872 .mxchat-select-all-label {
873 margin-right: 15px;
874 display: flex;
875 align-items: center;
876 }
877
878 .mxchat-select-all-label input[type="checkbox"] {
879 margin-right: 5px;
880 }
881
882 .mxchat-controls .delete-chats-button.button {
883 padding: 6px 12px;
884 font-size: 14px;
885 background: #e74c3c;
886 color: #fff;
887 border-radius: 20px;
888 font-weight: 700;
889 text-decoration: none;
890 transition: all .2s;
891 justify-content: center;
892 align-items: center;
893 box-shadow: 4px 4px #c0392b;
894 cursor: pointer;
895 margin-top: 10px;
896 border: none;
897 }
898
899
900 .mxchat-controls .delete-chats-button.button:hover {
901 color: #fff;
902 background-color: #c0392b;
903 box-shadow: 4px 4px #a93226
904 }
905
906
907 .mxchat-license-status.active {
908 color: green;
909 font-weight: bold;
910 }
911
912 .mxchat-license-status.inactive {
913 color: red;
914 font-weight: bold;
915 }
916 .mxchat-nav-tab-wrapper {
917 margin: 0px 0px;
918 padding: 0px 0px;
919 display: flex;
920 }
921
922 .mxchat-nav-tab {
923 font-size: 14px;
924 padding: 10px 20px;
925 margin-right: 10px;
926 background: #f1f1f1;
927 border: 1px solid #ddd;
928 border-bottom: none;
929 cursor: pointer;
930 box-shadow: none;
931 color: #333;
932 text-decoration: none;
933 }
934
935 .mxchat-nav-tab:hover, .mxchat-nav-tab:focus {
936 background: #fff;
937 color: #0073aa;
938 box-shadow: none;
939 }
940
941 .mxchat-nav-tab-active {
942 background: #fff;
943 border-bottom: 1px solid #fff;
944 color: #0073aa;
945 }
946
947 .mxchat-tab-content {
948 display: none;
949 padding: 20px;
950 background: #fff;
951 border: 1px solid #ddd;
952 }
953
954 .mxchat-tab-content.active {
955 display: block;
956 }
957
958
959 .mxchat-settings-section {
960 padding: 20px 0;
961 }
962
963 .mxchat-settings-section h2 {
964 font-size: 1.2em;
965 margin-bottom: 10px;
966 color: #333;
967 font-weight: bold;
968 }
969
970 .section-divider {
971 width: 95%;
972 height: 2px;
973 background-color: #e0e0e0;
974 margin: 20px auto;
975 border-radius: 1px;
976 }
977
978 .form-table th {
979 padding: 10px 0;
980 vertical-align: top;
981 width: 220px;
982 }
983
984 .form-table td {
985 padding: 10px 0;
986 }
987
988
989
990
991 .mxchat-table {
992 width: 100%;
993 table-layout: fixed;
994 border-collapse: collapse;
995 border: 1px solid #ccc; /* Adds a border around the table */
996 }
997
998 /* Header styling to match theme */
999 .mxchat-table th {
1000 background-color: #212121; /* Dark gray/black background */
1001 color: #fff; /* White text */
1002 font-weight: bold;
1003 padding: 10px;
1004 border-bottom: 3px solid #ccc; /* Thicker divider for the header */
1005 }
1006
1007 /* General cell styling */
1008 .mxchat-table th, .mxchat-table td {
1009 padding: 8px 10px;
1010 text-align: left;
1011 vertical-align: top; /* Aligns content to the top of the cell */
1012 border-bottom: 2px solid #ddd; /* Adds prominent dividers between rows */
1013 }
1014
1015 /* Alternate row background for better readability */
1016 .mxchat-table tbody tr:nth-child(odd) {
1017 background-color: #f9f9f9;
1018 }
1019
1020 .mxchat-table tbody tr:nth-child(even) {
1021 background-color: #fff;
1022 }
1023
1024 /* ID column should be small */
1025 .mxchat-table td:nth-child(1),
1026 .mxchat-table th:nth-child(1) {
1027 width: 15%; /* ID column */
1028 text-align: center;
1029 }
1030
1031 /* Content column should be wide */
1032 .mxchat-table td:nth-child(2),
1033 .mxchat-table th:nth-child(2) {
1034 width: 50%; /* Content column */
1035 }
1036
1037 /* URL column */
1038 .mxchat-table td:nth-child(3),
1039 .mxchat-table th:nth-child(3) {
1040 width: 20%; /* URL column */
1041 text-align: left;
1042 overflow-x: auto; /* Allow the URL to scroll horizontally if it's too long */
1043 white-space: nowrap;
1044 }
1045
1046 /* Actions column */
1047 .mxchat-table td:nth-child(4),
1048 .mxchat-table th:nth-child(4) {
1049 width: 15%; /* Edit/Delete column */
1050 text-align: center;
1051 }
1052
1053 .mxchat-intents-table {
1054 width: 100%;
1055 table-layout: fixed;
1056 border-collapse: collapse;
1057 border: 1px solid #ccc;
1058 }
1059
1060 .mxchat-intents-table th {
1061 background-color: #212121;
1062 color: #fff;
1063 font-weight: bold;
1064 padding: 10px;
1065 border-bottom: 3px solid #ccc;
1066 }
1067
1068 .mxchat-intents-table th,
1069 .mxchat-intents-table td {
1070 padding: 8px 10px;
1071 text-align: left;
1072 vertical-align: top;
1073 border-bottom: 2px solid #ddd;
1074 }
1075
1076 .mxchat-intents-table tbody tr:nth-child(odd) {
1077 background-color: #f9f9f9;
1078 }
1079
1080 .mxchat-intents-table tbody tr:nth-child(even) {
1081 background-color: #fff;
1082 }
1083
1084 /* Intent Label column */
1085 .mxchat-intents-table td:nth-child(1),
1086 .mxchat-intents-table th:nth-child(1) {
1087 width: 20%;
1088 }
1089
1090 /* Phrases column */
1091 .mxchat-intents-table td:nth-child(2),
1092 .mxchat-intents-table th:nth-child(2) {
1093 width: 30%;
1094 overflow-x: auto;
1095 }
1096
1097 /* Callback Function column */
1098 .mxchat-intents-table td:nth-child(3),
1099 .mxchat-intents-table th:nth-child(3) {
1100 width: 20%;
1101 }
1102
1103 /* Similarity Threshold column */
1104 .mxchat-intents-table td:nth-child(4),
1105 .mxchat-intents-table th:nth-child(4) {
1106 width: 15%;
1107 text-align: center;
1108 }
1109
1110 /* Actions column */
1111 .mxchat-intents-table td:nth-child(5),
1112 .mxchat-intents-table th:nth-child(5) {
1113 width: 15%;
1114 text-align: center;
1115 }
1116
1117 /* Style the threshold range slider */
1118 .mxchat-intents-threshold-form input[type="range"] {
1119 width: 100%;
1120 margin: 5px 0;
1121 }
1122
1123 .mxchat-intents-threshold-form button {
1124 margin-top: 5px;
1125 }
1126
1127
1128
1129 /* Edit content textarea styling */
1130 .content-edit {
1131 width: 100%; /* Make textarea fill the column */
1132 height: 100px; /* Adjust height as needed */
1133 box-sizing: border-box; /* Ensure padding and border are included in the width/height */
1134 }
1135
1136 /* Button styling to match theme */
1137 .mxchat-table td .button {
1138 display: inline-block;
1139 margin-right: 5px;
1140 background-color: #212121;
1141 color: #fff;
1142 border: none;
1143 padding: 5px 10px;
1144 text-decoration: none;
1145 border-radius: 3px;
1146 cursor: pointer;
1147 box-shadow: 4px 4px #14141499;
1148 }
1149
1150 /* Hover state */
1151 .mxchat-table td .button:hover {
1152 display: inline-block;
1153 margin-right: 5px;
1154 background-color: #444;
1155 color: #fff;
1156 border: none;
1157 padding: 5px 10px;
1158 text-decoration: none;
1159 border-radius: 3px;
1160 cursor: pointer;
1161 box-shadow: 4px 4px #14141499;
1162 }
1163
1164 /* Active state */
1165 .mxchat-table td .button:active {
1166 display: inline-block;
1167 margin-right: 5px;
1168 background-color: #444;
1169 color: #fff;
1170 border: none;
1171 padding: 5px 10px;
1172 text-decoration: none;
1173 border-radius: 3px;
1174 cursor: pointer;
1175 box-shadow: 4px 4px #14141499;
1176 }
1177
1178 /* Focus state */
1179 .mxchat-table td .button:focus {
1180 display: inline-block;
1181 margin-right: 5px;
1182 background-color: #444;
1183 color: #fff;
1184 border: none;
1185 padding: 5px 10px;
1186 text-decoration: none;
1187 border-radius: 3px;
1188 cursor: pointer;
1189 box-shadow: 4px 4px #14141499;
1190 outline: none; /* Removes default outline */
1191 }
1192
1193
1194
1195 /* Responsive Design */
1196 @media (max-width: 1024px) {
1197 .mxchat-admin .mxchat-grid-container {
1198 grid-template-columns: 1fr;
1199 }
1200
1201 .mxchat-admin .mxchat-grid-item.full-width {
1202 grid-column: span 1;
1203 }
1204
1205 .mxchat-admin .chat-session {
1206 width: calc(100% - 0px);
1207 }
1208
1209 .mxchat-nav-tab {
1210 padding: 10px 12px;
1211 }
1212
1213 /* Search and Sitemap Group */
1214 .mxchat-admin .mxchat-search-group {
1215 align-items: normal;
1216 flex-direction: column;
1217 }
1218
1219 .mxchat-admin .mxchat-nav-tab-wrapper,
1220 .mxchat-admin .wrap h2.mxchat-nav-tab-wrapper,
1221 .mxchat-admin h1.mxchat-nav-tab-wrapper {
1222 border-bottom: 0;
1223 justify-content: space-evenly;
1224 display: flex;
1225 }
1226
1227 .mxchat-admin .mxchat-nav-tab-wrapper .mxchat-nav-tab {
1228 margin: 0;
1229 }
1230
1231 .mxchat-session {
1232 width: 100%;
1233 }
1234
1235
1236 }
1237
1238
1239 /* Basic responsive table styles */
1240 @media screen and (max-width: 782px) {
1241 .mxchat-intents-table {
1242 display: block;
1243 width: 100%;
1244 }
1245
1246 .mxchat-intents-table thead {
1247 display: none; /* Hide header on mobile */
1248 }
1249
1250 .mxchat-intents-table tbody,
1251 .mxchat-intents-table tr,
1252 .mxchat-intents-table td {
1253 display: block;
1254 width: 100%;
1255 }
1256
1257 .mxchat-intents-table tr {
1258 margin-bottom: 1.5rem;
1259 background: #fff;
1260 padding: 1rem;
1261 border-radius: 8px;
1262 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
1263 max-width: 300px;
1264 }
1265
1266 /* Add labels before content */
1267 .mxchat-intents-table td:before {
1268 content: attr(data-label);
1269 font-weight: 600;
1270 display: block;
1271 margin-bottom: 0.5rem;
1272 color: #1d2327;
1273 }
1274
1275 /* Spacing between cells */
1276 .mxchat-intents-table td {
1277 padding: 0.5rem 0;
1278 border: none;
1279 }
1280
1281 /* Handle the slider container */
1282 .mxchat-intents-table td:nth-child(4) {
1283 margin: 1rem 0;
1284 }
1285
1286 /* Style the range input */
1287 .mxchat-intents-table input[type="range"] {
1288 width: 100%;
1289 margin: 0.5rem 0;
1290 }
1291
1292 /* Style the actions column */
1293 .mxchat-intents-table td:last-child {
1294 display: flex;
1295 flex-direction: column;
1296 gap: 0.5rem;
1297 margin-top: 1rem;
1298 }
1299
1300 /* Make buttons full width on mobile */
1301 .mxchat-intents-table .mxchat-save-button,
1302 .mxchat-intents-table .mxchat-edit-button,
1303 .mxchat-intents-table .mxchat-delete-all {
1304 width: 100%;
1305 margin: 0;
1306 }
1307
1308 /* Adjust output display */
1309 .mxchat-intents-table output {
1310 display: block;
1311 text-align: center;
1312 margin-top: 0.25rem;
1313 }
1314
1315 /* Additional spacing for forms */
1316 .mxchat-intents-table form {
1317 margin: 0;
1318 }
1319 }
1320
1321 /* Filter section responsive styles */
1322 @media screen and (max-width: 782px) {
1323 .mxchat-search-group {
1324 display: flex;
1325 flex-direction: column;
1326 gap: 0.5rem;
1327 }
1328
1329 .mxchat-search-group input,
1330 .mxchat-search-group select,
1331 .mxchat-search-group button {
1332 width: 100%;
1333 margin: 0;
1334 }
1335 }
1336
1337
1338