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

998 lines 19.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .mxchat-process-status {
2 margin-top: 20px;
3 padding: 15px;
4 background: #fff;
5 border: 1px solid #ddd;
6 border-radius: 4px;
7 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
8 }
9
10 .mxchat-process-status h3 {
11 margin: 0 0 15px 0;
12 color: #23282d;
13 font-size: 14px;
14 font-weight: 600;
15 }
16
17 .mxchat-process-status p {
18 margin: 8px 0;
19 color: #555;
20 font-size: 13px;
21 }
22
23 .mxchat-process-status .status-complete {
24 color: #46b450;
25 font-weight: 500;
26 }
27
28 .mxchat-process-status.complete {
29 border-color: #46b450;
30 }
31
32
33
34
35
36 /* Toggle Switch Styles */
37 .mxchat-switch {
38 position: relative;
39 display: inline-block;
40 width: 60px;
41 height: 34px;
42 margin-right: 10px;
43 }
44
45 .mxchat-switch input {
46 opacity: 0;
47 width: 0;
48 height: 0;
49 }
50
51 .mxchat-slider {
52 position: absolute;
53 cursor: pointer;
54 top: 0;
55 left: 0;
56 right: 0;
57 bottom: 0;
58 background-color: #ccc;
59 transition: .4s;
60 border-radius: 34px;
61 }
62
63 .mxchat-slider:before {
64 position: absolute;
65 content: "";
66 height: 26px;
67 width: 26px;
68 left: 4px;
69 bottom: 4px;
70 background-color: white;
71 transition: .4s;
72 border-radius: 50%;
73 }
74
75 input:checked + .mxchat-slider {
76 background-color: #2196F3;
77 }
78
79 input:disabled + .mxchat-slider {
80 opacity: 0.5;
81 cursor: not-allowed;
82 }
83
84 input:checked + .mxchat-slider:before {
85 transform: translateX(26px);
86 }
87
88 .mxchat-status-label {
89 display: inline-block;
90 vertical-align: middle;
91 margin-left: 10px;
92 }
93
94 .status-text {
95 font-weight: 500;
96 }
97
98
99
100
101 .mxchat-question-row {
102 margin-bottom: 10px;
103 }
104
105 .mxchat-similarity-threshold .mxchat-slider-container {
106 display: flex;
107 align-items: center;
108 gap: 15px;
109 margin-top: 10px;
110 }
111
112 .mxchat-similarity-threshold input[type="range"] {
113 flex: 1;
114 margin: 0;
115 }
116
117 .mxchat-similarity-threshold .button-primary {
118 white-space: nowrap;
119 }
120
121 .mxchat-similarity-threshold label {
122 font-weight: bold;
123 display: block;
124 margin-bottom: 5px;
125 }
126
127 .mxchat-similarity-threshold {
128 max-width: 600px;
129 }
130
131 #threshold_value_display {
132 font-weight: normal;
133 margin-left: 10px;
134 color: #0073aa;
135 }
136
137 .mxchat-form-group {
138 margin-bottom: 20px;
139 }
140
141 .mxchat-form-group input[type="range"] {
142 width: 100%;
143 margin-top: 10px;
144 }
145
146 .mxchat-form-group label {
147 font-weight: bold;
148 display: block;
149 margin-bottom: 5px;
150 }
151
152 .mxchat-form-group .description {
153 font-size: 0.9em;
154 color: #666;
155 }
156
157 #threshold_value_display {
158 font-weight: normal;
159 margin-left: 10px;
160 color: #0073aa;
161 }
162
163
164
165
166 .mxchat-product-image, .mxchat-generated-image, .mxchat-image-thumbnail {
167 max-width: 100%;
168 }
169 .description {
170 margin-top: -10px;
171 }
172 .mxchat-search-group {
173 margin-top: 20px;
174 }
175
176 .tablenav .tablenav-pages {
177 display: flex;
178 align-items: center;
179 margin-left: 20px;
180 gap: 5px;
181 }
182
183 /* General Styles */
184 .mxchat-admin body, .mxchat-admin html {
185 font-family: Arial, sans-serif;
186 background-color: #fff;
187 color: #212121;
188 margin: 0;
189 padding: 0;
190 }
191
192 /* Main Wrapper */
193 .mxchat-admin .wrap {
194 max-width: 1200px;
195 margin: 0 auto;
196 padding: 20px;
197 background: #f9f9f9;
198 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
199 }
200
201 /* Header */
202 .mxchat-admin .wrap h2 {
203 border-bottom: 2px solid #ddd;
204 padding-bottom: 10px;
205 margin-bottom: 20px;
206 color: #212121;
207 }
208
209 .wrap.mxchat-admin .admin-title {
210 text-shadow: 0 2px 0 #c6c6c6;
211 font-weight: bold;
212 letter-spacing: 5px;
213 color: #212121;
214 font-size: 2.5rem;
215 }
216
217 .mxchat-admin .admin-emphasis {
218 color: white;
219 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;
220 font-weight: bold;
221 letter-spacing: 5px;
222 font-size: 2.5rem;
223 }
224 /* Grid Layout */
225 .mxchat-admin .mxchat-grid-container {
226 display: grid;
227 grid-template-columns: repeat(2, 1fr);
228 grid-gap: 20px;
229 }
230
231 .mxchat-admin .mxchat-grid-item {
232 background: #fff;
233 border: 1px solid #ddd;
234 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
235 padding: 20px;
236 }
237
238 /* Full Width for Submit Content */
239 .mxchat-admin .mxchat-grid-item.full-width {
240 grid-column: span 2;
241 }
242
243 /* Form Styles */
244 .mxchat-admin .mxchat-form-group {
245 display: flex;
246 flex-direction: column;
247 margin-bottom: 20px;
248 }
249
250 .mxchat-admin .mxchat-form-group label {
251 margin-bottom: 10px;
252 font-weight: bold;
253 color: #212121;
254 }
255
256 .mxchat-admin .mxchat-form-group input[type="url"],
257 .mxchat-admin .mxchat-form-group input[type="text"],
258 .mxchat-admin .mxchat-form-group textarea {
259 padding: 10px;
260 border: 1px solid #ddd;
261 border-radius: 4px;
262 font-size: 1rem;
263 width: 100%;
264 box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
265 }
266
267 /* Larger Textarea for Content Submission */
268 .mxchat-admin .mxchat-form-group textarea {
269 min-height: 200px;
270 }
271
272 /* Button Styles */
273 .mxchat-admin .button.button-primary {
274 color: #fff;
275 background: #212121;
276 border-radius: 20px;
277 padding: 0px 30px;
278 font-size: 1rem;
279 font-weight: 700;
280 text-decoration: none;
281 transition: all .2s;
282 display: inline-flex;
283 justify-content: center;
284 align-items: center;
285 max-width: 200px;
286 width: auto;
287 box-shadow: 4px 4px #14141499;
288 border: none;
289 cursor: pointer;
290 }
291
292 .mxchat-admin .button.button-primary:hover,
293 .mxchat-admin .button.button-primary:active {
294 background: #444;
295 }
296
297 .submit-content-button {
298 margin-top: 10px !important;
299 }
300
301 /* Search and Sitemap Group */
302 .mxchat-admin .mxchat-search-group {
303 display: flex;
304 align-items: center;
305 gap: 10px;
306 }
307
308 .mxchat-admin .mxchat-search-group input[type="text"],
309 .mxchat-admin .mxchat-search-group input[type="url"] {
310 flex-grow: 1;
311 }
312
313 .mxchat-admin .mxchat-search-group input[type="submit"] {
314 background: #212121;
315 color: #fff;
316 border-radius: 20px;
317 padding: 0px 30px;
318 font-size: 1rem;
319 font-weight: 700;
320 box-shadow: 4px 4px #14141499;
321 border: none;
322 transition: background-color .2s;
323 cursor: pointer;
324 }
325
326 .mxchat-admin .mxchat-search-group input[type="submit"]:hover {
327 background-color: #444;
328 }
329
330 .mxchat-admin .mxchat-delete-all {
331 background: #e74c3c;
332 color: #fff;
333 border-radius: 20px;
334 padding: 10px 20px !important;
335 font-size: 1rem;
336 font-weight: 700;
337 text-decoration: none;
338 transition: all .2s;
339 justify-content: center;
340 align-items: center;
341 box-shadow: 4px 4px #c0392b;
342 cursor: pointer;
343 margin-top: 10px;
344 border: none;
345 }
346
347 .mxchat-admin .mxchat-delete-all:hover {
348 color: #fff;
349 background-color: #c0392b;
350 box-shadow: 4px 4px #a93226
351 }
352
353 .mxchat-admin .mxchat-intents-table .mxchat-delete-all {
354 background: #e74c3c;
355 color: #fff;
356 border-radius: 20px;
357 padding: 0px 20px !important;
358 font-size: 1rem;
359 font-weight: 700;
360 text-decoration: none;
361 transition: all .2s;
362 justify-content: center;
363 align-items: center;
364 box-shadow: 4px 4px #c0392b;
365 cursor: pointer;
366 margin-top: 10px;
367 border: none;
368 }
369
370 .mxchat-admin .mxchat-intents-table .mxchat-delete-all:hover {
371 color: #fff;
372 background-color: #c0392b;
373 box-shadow: 4px 4px #a93226;
374 }
375
376
377
378 /* Table Styles */
379 .mxchat-admin .wp-list-table {
380 width: 100%;
381 margin-top: 20px;
382 border-collapse: collapse;
383 background: #fff;
384 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
385 }
386
387 .mxchat-admin .wp-list-table th,
388 .mxchat-admin .wp-list-table td {
389 padding: 15px;
390 border-bottom: 1px solid #ddd;
391 text-align: left;
392 }
393
394 .mxchat-admin .wp-list-table th {
395 background: #f0f2f5;
396 color: #212121;
397 }
398
399 .mxchat-admin .wp-list-table tr:nth-child(even) {
400 background: #f9f9f9;
401 }
402
403 .mxchat-admin .mxchat-pro-banner {
404 background-color: #fff;
405 border-left: 4px solid #212121;
406 padding: 15px;
407 margin-bottom: 20px;
408 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
409 }
410
411 .mxchat-admin .mxchat-pro-banner p {
412 margin: 0;
413 font-size: 16px;
414 color: #212121;
415 }
416
417 .mxchat-admin .mxchat-pro-banner a {
418 color: #212121;
419 text-decoration: none;
420 font-weight: bold;
421 }
422
423 .mxchat-admin .mxchat-pro-banner a:hover {
424 text-decoration: underline;
425 }
426
427 /* Toggle Switch Styles */
428 .mxchat-admin .toggle-switch {
429 position: relative;
430 display: inline-block;
431 width: 60px;
432 height: 34px;
433 }
434
435 .mxchat-admin .toggle-switch input {
436 opacity: 0;
437 width: 0;
438 height: 0;
439 }
440
441 .mxchat-admin .slider {
442 position: absolute;
443 cursor: pointer;
444 top: 0;
445 left: 0;
446 right: 0;
447 bottom: 0;
448 background-color: #ccc;
449 transition: .4s;
450 border-radius: 34px;
451 }
452
453 .mxchat-admin .slider:before {
454 position: absolute;
455 content: "";
456 height: 26px;
457 width: 26px;
458 left: 4px;
459 bottom: 4px;
460 background-color: white;
461 transition: .4s;
462 border-radius: 50%;
463 }
464
465 .mxchat-admin input:checked + .slider {
466 background-color: #212121;
467 }
468
469 .mxchat-admin input:checked + .slider:before {
470 transform: translateX(26px);
471 }
472
473 /* Toggle Switch Label */
474 .mxchat-admin .toggle-switch-label {
475 display: flex;
476 align-items: center;
477 font-weight: 600;
478 color: #212121;
479 margin-bottom: 20px;
480 }
481
482 .mxchat-loading-text {
483 display: none;
484 margin-top: 10px;
485 color: #333;
486 }
487
488 .mxchat-spinner {
489 border: 8px solid #f3f3f3;
490 border-top: 8px solid #333;
491 border-radius: 50%;
492 width: 30px;
493 height: 30px;
494 animation: mxchat-spin 1s linear infinite;
495 display: flex;
496 justify-content: center;
497 align-items: center;
498 }
499
500 #mxchat-content-loading-text {
501 display: none;
502 margin-top: 10px;
503 color: #333;
504 }
505
506 .mxchat-content-spinner {
507 border: 8px solid #f3f3f3;
508 border-top: 8px solid #333;
509 border-radius: 50%;
510 width: 30px;
511 height: 30px;
512 animation: mxchat-spin 1s linear infinite;
513 display: flex;
514 justify-content: center;
515 align-items: center;
516 }
517
518 #mxchat-intent-loading {
519 border: 8px solid #f3f3f3;
520 border-top: 8px solid #333;
521 border-radius: 50%;
522 width: 30px;
523 height: 30px;
524 animation: mxchat-spin 1s linear infinite;
525 display: inline-block; /* Display as inline for better alignment */
526 margin-left: 10px;
527 vertical-align: middle;
528 }
529
530 #mxchat-intent-loading-text {
531 display: none;
532 margin-top: 10px;
533 color: #333;
534 }
535
536 #mxchat-activation-spinner {
537 border: 4px solid #f3f3f3;
538 border-top: 4px solid #007cba; /* Match the WordPress primary button color */
539 border-radius: 50%;
540 width: 20px;
541 height: 20px;
542 animation: mxchat-spin 1s linear infinite;
543 display: inline-block;
544 vertical-align: middle;
545 margin-left: 10px;
546 }
547
548 @keyframes mxchat-spin {
549 0% { transform: rotate(0deg); }
550 100% { transform: rotate(360deg); }
551 }
552
553
554
555
556 .pro-feature-wrapper {
557 position: relative;
558 display: inline-block;
559 }
560
561 .pro-feature-wrapper.active select,
562 .pro-feature-wrapper.active textarea {
563 opacity: 1; /* Fully opaque when active */
564 }
565
566 .pro-feature-wrapper.inactive select,
567 .pro-feature-wrapper.inactive textarea {
568 opacity: 0.5; /* Grayed out when inactive */
569 }
570
571 .pro-feature-overlay {
572 position: absolute;
573 top: 0;
574 left: 0;
575 width: 100%;
576 height: 100%;
577 display: flex;
578 justify-content: center;
579 align-items: center;
580 pointer-events: none;
581 }
582
583 .pro-feature-overlay img {
584 max-width: 100px;
585 pointer-events: auto; /* Allow clicking the image */
586 }
587
588 .pro-feature-wrapper a {
589 text-decoration: none;
590 position: absolute;
591 top: 0;
592 left: 0;
593 width: 100%;
594 height: 100%;
595 z-index: 10; /* Ensure the link is above everything else */
596 }
597
598 /* Transcripts Layout */
599 #mxchat-transcripts {
600 display: flex;
601 flex-wrap: wrap;
602 gap: 20px;
603 justify-content: flex-start;
604 }
605
606 .mxchat-admin .chat-session {
607 border: 1px solid #ddd;
608 padding: 15px;
609 width: calc(33.333% - 20px);
610 box-sizing: border-box;
611 background-color: #f9f9f9;
612 display: flex;
613 flex-direction: column;
614 max-height: 500px;
615 overflow: auto;
616 }
617
618 .mxchat-admin .chat-message {
619 border-bottom: 1px solid #eee;
620 padding-bottom: 10px;
621 margin-bottom: 10px;
622 }
623
624 .mxchat-admin .chat-session h4 {
625 margin-bottom: 15px;
626 font-size: 1.1em;
627 font-weight: 700;
628 }
629
630 .mxchat-controls {
631 display: flex;
632 align-items: center;
633 margin-bottom: 15px;
634 }
635
636 .mxchat-select-all-label {
637 margin-right: 15px;
638 display: flex;
639 align-items: center;
640 }
641
642 .mxchat-select-all-label input[type="checkbox"] {
643 margin-right: 5px;
644 }
645
646 .mxchat-controls .delete-chats-button.button {
647 padding: 6px 12px;
648 font-size: 14px;
649 background: #e74c3c;
650 color: #fff;
651 border-radius: 20px;
652 font-weight: 700;
653 text-decoration: none;
654 transition: all .2s;
655 justify-content: center;
656 align-items: center;
657 box-shadow: 4px 4px #c0392b;
658 cursor: pointer;
659 margin-top: 10px;
660 border: none;
661 }
662
663
664 .mxchat-controls .delete-chats-button.button:hover {
665 color: #fff;
666 background-color: #c0392b;
667 box-shadow: 4px 4px #a93226
668 }
669
670
671 .mxchat-license-status.active {
672 color: green;
673 font-weight: bold;
674 }
675
676 .mxchat-license-status.inactive {
677 color: red;
678 font-weight: bold;
679 }
680 .mxchat-nav-tab-wrapper {
681 margin: 0px 0px;
682 padding: 0px 0px;
683 display: flex;
684 }
685
686 .mxchat-nav-tab {
687 font-size: 14px;
688 padding: 10px 20px;
689 margin-right: 10px;
690 background: #f1f1f1;
691 border: 1px solid #ddd;
692 border-bottom: none;
693 cursor: pointer;
694 box-shadow: none;
695 color: #333;
696 text-decoration: none;
697 }
698
699 .mxchat-nav-tab:hover, .mxchat-nav-tab:focus {
700 background: #fff;
701 color: #0073aa;
702 box-shadow: none;
703 }
704
705 .mxchat-nav-tab-active {
706 background: #fff;
707 border-bottom: 1px solid #fff;
708 color: #0073aa;
709 }
710
711 .mxchat-tab-content {
712 display: none;
713 padding: 20px;
714 background: #fff;
715 border: 1px solid #ddd;
716 }
717
718 .mxchat-tab-content.active {
719 display: block;
720 }
721
722
723 .mxchat-settings-section {
724 padding: 20px 0;
725 }
726
727 .mxchat-settings-section h2 {
728 font-size: 1.2em;
729 margin-bottom: 10px;
730 color: #333;
731 font-weight: bold;
732 }
733
734 .section-divider {
735 width: 95%;
736 height: 2px;
737 background-color: #e0e0e0;
738 margin: 20px auto;
739 border-radius: 1px;
740 }
741
742 .form-table th {
743 padding: 10px 0;
744 vertical-align: top;
745 width: 220px;
746 }
747
748 .form-table td {
749 padding: 10px 0;
750 }
751
752
753
754
755 .mxchat-table {
756 width: 100%;
757 table-layout: fixed;
758 border-collapse: collapse;
759 border: 1px solid #ccc; /* Adds a border around the table */
760 }
761
762 /* Header styling to match theme */
763 .mxchat-table th {
764 background-color: #212121; /* Dark gray/black background */
765 color: #fff; /* White text */
766 font-weight: bold;
767 padding: 10px;
768 border-bottom: 3px solid #ccc; /* Thicker divider for the header */
769 }
770
771 /* General cell styling */
772 .mxchat-table th, .mxchat-table td {
773 padding: 8px 10px;
774 text-align: left;
775 vertical-align: top; /* Aligns content to the top of the cell */
776 border-bottom: 2px solid #ddd; /* Adds prominent dividers between rows */
777 }
778
779 /* Alternate row background for better readability */
780 .mxchat-table tbody tr:nth-child(odd) {
781 background-color: #f9f9f9;
782 }
783
784 .mxchat-table tbody tr:nth-child(even) {
785 background-color: #fff;
786 }
787
788 /* ID column should be small */
789 .mxchat-table td:nth-child(1),
790 .mxchat-table th:nth-child(1) {
791 width: 15%; /* ID column */
792 text-align: center;
793 }
794
795 /* Content column should be wide */
796 .mxchat-table td:nth-child(2),
797 .mxchat-table th:nth-child(2) {
798 width: 50%; /* Content column */
799 }
800
801 /* URL column */
802 .mxchat-table td:nth-child(3),
803 .mxchat-table th:nth-child(3) {
804 width: 20%; /* URL column */
805 text-align: left;
806 overflow-x: auto; /* Allow the URL to scroll horizontally if it's too long */
807 white-space: nowrap;
808 }
809
810 /* Actions column */
811 .mxchat-table td:nth-child(4),
812 .mxchat-table th:nth-child(4) {
813 width: 15%; /* Edit/Delete column */
814 text-align: center;
815 }
816
817 .mxchat-intents-table {
818 width: 100%;
819 table-layout: fixed;
820 border-collapse: collapse;
821 border: 1px solid #ccc;
822 }
823
824 .mxchat-intents-table th {
825 background-color: #212121;
826 color: #fff;
827 font-weight: bold;
828 padding: 10px;
829 border-bottom: 3px solid #ccc;
830 }
831
832 .mxchat-intents-table th,
833 .mxchat-intents-table td {
834 padding: 8px 10px;
835 text-align: left;
836 vertical-align: top;
837 border-bottom: 2px solid #ddd;
838 }
839
840 .mxchat-intents-table tbody tr:nth-child(odd) {
841 background-color: #f9f9f9;
842 }
843
844 .mxchat-intents-table tbody tr:nth-child(even) {
845 background-color: #fff;
846 }
847
848 /* Intent Label column */
849 .mxchat-intents-table td:nth-child(1),
850 .mxchat-intents-table th:nth-child(1) {
851 width: 20%;
852 }
853
854 /* Phrases column */
855 .mxchat-intents-table td:nth-child(2),
856 .mxchat-intents-table th:nth-child(2) {
857 width: 30%;
858 overflow-x: auto;
859 }
860
861 /* Callback Function column */
862 .mxchat-intents-table td:nth-child(3),
863 .mxchat-intents-table th:nth-child(3) {
864 width: 20%;
865 }
866
867 /* Similarity Threshold column */
868 .mxchat-intents-table td:nth-child(4),
869 .mxchat-intents-table th:nth-child(4) {
870 width: 15%;
871 text-align: center;
872 }
873
874 /* Actions column */
875 .mxchat-intents-table td:nth-child(5),
876 .mxchat-intents-table th:nth-child(5) {
877 width: 15%;
878 text-align: center;
879 }
880
881 /* Style the threshold range slider */
882 .mxchat-intents-threshold-form input[type="range"] {
883 width: 100%;
884 margin: 5px 0;
885 }
886
887 .mxchat-intents-threshold-form button {
888 margin-top: 5px;
889 }
890
891
892
893 /* Edit content textarea styling */
894 .content-edit {
895 width: 100%; /* Make textarea fill the column */
896 height: 100px; /* Adjust height as needed */
897 box-sizing: border-box; /* Ensure padding and border are included in the width/height */
898 }
899
900 /* Button styling to match theme */
901 .mxchat-table td .button {
902 display: inline-block;
903 margin-right: 5px;
904 background-color: #212121;
905 color: #fff;
906 border: none;
907 padding: 5px 10px;
908 text-decoration: none;
909 border-radius: 3px;
910 cursor: pointer;
911 box-shadow: 4px 4px #14141499;
912 }
913
914 /* Hover state */
915 .mxchat-table td .button:hover {
916 display: inline-block;
917 margin-right: 5px;
918 background-color: #444;
919 color: #fff;
920 border: none;
921 padding: 5px 10px;
922 text-decoration: none;
923 border-radius: 3px;
924 cursor: pointer;
925 box-shadow: 4px 4px #14141499;
926 }
927
928 /* Active state */
929 .mxchat-table td .button:active {
930 display: inline-block;
931 margin-right: 5px;
932 background-color: #444;
933 color: #fff;
934 border: none;
935 padding: 5px 10px;
936 text-decoration: none;
937 border-radius: 3px;
938 cursor: pointer;
939 box-shadow: 4px 4px #14141499;
940 }
941
942 /* Focus state */
943 .mxchat-table td .button:focus {
944 display: inline-block;
945 margin-right: 5px;
946 background-color: #444;
947 color: #fff;
948 border: none;
949 padding: 5px 10px;
950 text-decoration: none;
951 border-radius: 3px;
952 cursor: pointer;
953 box-shadow: 4px 4px #14141499;
954 outline: none; /* Removes default outline */
955 }
956
957
958
959 /* Responsive Design */
960 @media (max-width: 1024px) {
961 .mxchat-admin .mxchat-grid-container {
962 grid-template-columns: 1fr;
963 }
964
965 .mxchat-admin .mxchat-grid-item.full-width {
966 grid-column: span 1;
967 }
968
969 .mxchat-admin .chat-session {
970 width: calc(100% - 0px);
971 }
972
973 .mxchat-nav-tab {
974 padding: 10px 12px;
975 }
976
977 /* Search and Sitemap Group */
978 .mxchat-admin .mxchat-search-group {
979 align-items: normal;
980 flex-direction: column;
981 }
982
983 .mxchat-admin .mxchat-nav-tab-wrapper,
984 .mxchat-admin .wrap h2.mxchat-nav-tab-wrapper,
985 .mxchat-admin h1.mxchat-nav-tab-wrapper {
986 border-bottom: 0;
987 justify-content: space-evenly;
988 display: flex;
989 }
990
991 .mxchat-admin .mxchat-nav-tab-wrapper .mxchat-nav-tab {
992 margin: 0;
993 }
994
995
996 }
997
998