PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 1.6.3
MxChat – AI Chatbot & Content Generation for WordPress v1.6.3
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
← All changes | css/admin-style.css +101 -654 2.0.31.6.3 View file →
@@ -1,122 +1,4 @@
1 -.wp-core-ui .notice.is-dismissible {
2 - z-index: 10000;
3 -}
4 -
5 -.mxchat-form-intent {
6 - background-color: rgba(240, 240, 245, 0.5);
7 -}
8 -
9 -.mxchat-badge {
10 - display: inline-block;
11 - padding: 2px 8px;
12 - border-radius: 12px;
13 - background: #7873f5;
14 - color: white;
15 - font-size: 12px;
16 - margin-left: 8px;
17 -}
18 -
19 -.mxchat-threshold-readonly {
20 - padding: 8px;
21 - background: rgba(120, 115, 245, 0.1);
22 - border-radius: 4px;
23 - text-align: center;
24 -}
25 -
26 -.mxchat-form-intent .mxchat-button-secondary {
27 - background: #7873f5;
28 - color: white;
29 - border: none;
30 - padding: 6px 12px;
31 - border-radius: 4px;
32 - text-decoration: none;
33 - display: inline-block;
34 -}
35 -
36 -.mxchat-form-intent .mxchat-button-secondary:hover {
37 - background: #6863e5;
38 -}
39 -
40 -/* Tab Navigation */
41 -.mxchat-tabs {
42 - border-bottom: 1px solid #ccc;
43 - margin-bottom: 20px;
44 - padding-bottom: 0;
45 -}
46 -
47 -.mxchat-default-db-h2 {
48 - text-align: center;
49 - margin: 0px;
50 - padding: 0px;
51 -}
52 -
53 -.mxchat-tab-button {
54 - background: #f1f1f1;
55 - border: 1px solid #ccc;
56 - border-bottom: none;
57 - color: #555;
58 - cursor: pointer;
59 - font-size: 14px;
60 - margin: 0 5px -1px 0;
61 - padding: 10px 15px;
62 - transition: all 0.3s ease;
63 -}
64 -
65 -.mxchat-tab-button.active {
66 - background: #fff;
67 - border-bottom: 1px solid #fff;
68 - color: #000;
69 -}
70 -
71 -/* Tab Content */
72 -.mxchat-tab-content {
73 - display: none;
74 - padding: 25px;
75 - background: white;
76 - border: 1px solid #ddd;
77 - border-radius: 10px;
78 - box-shadow: 0 2px 15px rgba(0,0,0,0.05);
79 - animation: fadeIn 0.3s ease-in-out;
80 -}
81 -
82 -#default-db.mxchat-tab-content, #pinecone-db.mxchat-tab-content {
83 - border: none;
84 - box-shadow: none;
85 - padding: 0px;
86 -}
87 -
88 -.mxchat-tab-content.active {
89 - display: block;
90 -}
91 -
92 -@keyframes fadeIn {
93 - from { opacity: 0; }
94 - to { opacity: 1; }
95 -}
96 -
97 -.mxchat-tab-content.active {
98 - display: block;
99 -}
100 -
101 -/* Pinecone Settings Styling */
102 -.mxchat-input-group {
103 - margin-bottom: 20px;
104 -}
105 -
106 -.mxchat-input-group label {
107 - display: block;
108 - font-weight: 600;
109 - margin-bottom: 5px;
110 -}
111 -
112 -.mxchat-input-group .description {
113 - color: #666;
114 - font-style: italic;
115 - margin-top: 5px;
116 -}
117 -
118 -
119 1 .mxchat-sync-settings {
120 2 background: #fff;
121 3 border-radius: 5px;
122 4 }
@@ -175,16 +57,15 @@
175 57 font-weight: 500;
176 58 }
177 59 .mxchat-knowledge-container {
178 60 display: flex;
179 - flex-direction: column;
180 - gap: 1rem;
61 + flex-direction: column-reverse;
62 + gap: 2rem;
181 63 margin: 1.5rem 0;
182 64 padding: 1rem;
183 65 background: #fff;
184 - border-radius: 10px;
185 - border: 1px solid #ddd;
186 - box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
66 + border-radius: 8px;
67 + box-shadow: 0 1px 3px rgba(0,0,0,0.1);
187 68 }
188 69
189 70 /* Left Column */
190 71 .mxchat-knowledge-controls {
@@ -191,9 +72,9 @@
191 72 flex: 1;
192 73 display: flex;
193 74 gap: 1rem;
194 75 justify-content: space-between;
195 - align-items: center;
76 + align-items: center;
196 77 }
197 78
198 79 .mxchat-controls-header {
199 80 display: flex;
@@ -233,8 +114,14 @@
233 114 /* Right Column */
234 115 .mxchat-knowledge-search {
235 116 flex: 1;
236 117 }
118 +
119 +.mxchat-search-group {
120 + display: flex;
121 + gap: 0.5rem;
122 +}
123 +
237 124 .search-input {
238 125 flex: 1;
239 126 padding: 0.5rem;
240 127 border: 1px solid #ddd;
@@ -247,22 +134,20 @@
247 134 gap: 0.5rem;
248 135 padding: 0.5rem 1rem;
249 136 }
250 137
138 +.search-button .dashicons {
139 + font-size: 1.2rem;
140 +}
141 +
251 142 /* Mobile Responsiveness */
252 143 @media screen and (max-width: 782px) {
253 - .mxchat-knowledge-controls {
144 + .mxchat-knowledge-container {
254 145 flex-direction: column;
255 146 }
256 -
257 - .mxchat-grid-container {
258 - display: grid;
259 - /* Add these properties */
260 - max-width: 100%; /* Constrain to parent width */
261 - width: 100%;
262 - overflow-x: hidden; /* Prevent horizontal scrolling */
263 - grid-template-columns: 1fr; /* Single column layout */
264 - grid-gap: 20px;
147 +
148 + .mxchat-knowledge-search {
149 + order: -1; /* Moves search to top on mobile */
265 150 }
266 151
267 152 .mxchat-controls-header {
268 153 flex-direction: column;
@@ -273,8 +158,16 @@
273 158 .mxchat-search-group {
274 159 flex-direction: column;
275 160 }
276 161
162 + .search-input {
163 + width: 100%;
164 + }
165 +
166 + .search-button {
167 + width: 100%;
168 + justify-content: center;
169 + }
277 170 }
278 171
279 172
280 173
@@ -593,8 +486,11 @@
593 486 }
594 487 .description {
595 488 margin-top: -10px;
596 489 }
490 +.mxchat-search-group {
491 + margin-top: 20px;
492 +}
597 493
598 494 .tablenav .tablenav-pages {
599 495 display: flex;
600 496 align-items: center;
@@ -618,8 +514,9 @@
618 514 padding: 20px;
619 515 background: #f9f9f9;
620 516 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
621 517 }
518 +
622 519 /* Header */
623 520 .mxchat-admin .wrap h2 {
624 521 border-bottom: 2px solid #ddd;
625 522 padding-bottom: 10px;
@@ -653,9 +550,8 @@
653 550 background: #fff;
654 551 border: 1px solid #ddd;
655 552 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
656 553 padding: 20px;
657 - border-radius: 10px;
658 554 }
659 555
660 556 /* Full Width for Submit Content */
661 557 .mxchat-admin .mxchat-grid-item.full-width {
@@ -676,9 +572,8 @@
676 572 }
677 573
678 574 .mxchat-admin .mxchat-form-group input[type="url"],
679 575 .mxchat-admin .mxchat-form-group input[type="text"],
680 -.mxchat-admin .mxchat-form-group input[type="password"],
681 576 .mxchat-admin .mxchat-form-group textarea {
682 577 padding: 10px;
683 578 border: 1px solid #ddd;
684 579 border-radius: 4px;
@@ -711,19 +606,8 @@
711 606 border: none;
712 607 cursor: pointer;
713 608 }
714 609
715 -.mxchat-search-group .button.button-primary.search-button {
716 - box-shadow: none;
717 - border-radius: 0px 20px 20px 0px;
718 - margin-bottom: 0px;
719 - padding: 0px 15px;
720 -}
721 -
722 -.mxchat-search-group .button.button-primary.search-button:hover {
723 - opacity: .8px;
724 -}
725 -
726 610 .mxchat-admin .button.button-primary:hover,
727 611 .mxchat-admin .button.button-primary:active {
728 612 background: #444;
729 613 }
@@ -734,27 +618,17 @@
734 618
735 619 /* Search and Sitemap Group */
736 620 .mxchat-admin .mxchat-search-group {
737 621 display: flex;
738 - gap: 0px;
739 - max-width: 800px;
740 - margin: auto;
741 - margin-top: 20px;
742 - align-items: stretch;
743 - flex-direction: row;
622 + align-items: center;
623 + gap: 10px;
744 624 }
745 625
746 626 .mxchat-admin .mxchat-search-group input[type="text"],
747 627 .mxchat-admin .mxchat-search-group input[type="url"] {
748 628 flex-grow: 1;
749 - border-radius: 20px 0px 0px 20px;
750 - padding: 8px;
751 629 }
752 630
753 -.mxchat-search-group #mxchat-intent-search {
754 - border-radius: 0px 0px 0px 0px;
755 -}
756 -
757 631 .mxchat-admin .mxchat-search-group input[type="submit"] {
758 632 background: #212121;
759 633 color: #fff;
760 634 border-radius: 20px;
@@ -770,9 +644,9 @@
770 644 .mxchat-admin .mxchat-search-group input[type="submit"]:hover {
771 645 background-color: #444;
772 646 }
773 647
774 -.mxchat-admin .mxchat-delete-all, .button.button-link-delete.mxchat-delete-all {
648 +.mxchat-admin .mxchat-delete-all {
775 649 background: #e74c3c;
776 650 color: #fff;
777 651 border-radius: 20px;
778 652 padding: 0px 15px !important;
@@ -971,9 +845,26 @@
971 845 justify-content: center;
972 846 align-items: center;
973 847 }
974 848
849 +#mxchat-intent-loading {
850 + border: 8px solid #f3f3f3;
851 + border-top: 8px solid #333;
852 + border-radius: 50%;
853 + width: 30px;
854 + height: 30px;
855 + animation: mxchat-spin 1s linear infinite;
856 + display: inline-block; /* Display as inline for better alignment */
857 + margin-left: 10px;
858 + vertical-align: middle;
859 +}
975 860
861 +#mxchat-intent-loading-text {
862 + display: none;
863 + margin-top: 10px;
864 + color: #333;
865 +}
866 +
976 867 #mxchat-activation-spinner {
977 868 border: 4px solid #f3f3f3;
978 869 border-top: 4px solid #007cba; /* Match the WordPress primary button color */
979 870 border-radius: 50%;
@@ -1134,10 +1025,15 @@
1134 1025 border-bottom: 1px solid #fff;
1135 1026 color: #0073aa;
1136 1027 }
1137 1028
1029 +.mxchat-tab-content {
1030 + display: none;
1031 + padding: 20px;
1032 + background: #fff;
1033 + border: 1px solid #ddd;
1034 +}
1138 1035
1139 -
1140 1036 .mxchat-tab-content.active {
1141 1037 display: block;
1142 1038 }
1143 1039
@@ -1395,8 +1291,14 @@
1395 1291 .mxchat-nav-tab {
1396 1292 padding: 10px 12px;
1397 1293 }
1398 1294
1295 + /* Search and Sitemap Group */
1296 + .mxchat-admin .mxchat-search-group {
1297 + align-items: normal;
1298 + flex-direction: column;
1299 + }
1300 +
1399 1301 .mxchat-admin .mxchat-nav-tab-wrapper,
1400 1302 .mxchat-admin .wrap h2.mxchat-nav-tab-wrapper,
1401 1303 .mxchat-admin h1.mxchat-nav-tab-wrapper {
1402 1304 border-bottom: 0;
@@ -1500,8 +1402,25 @@
1500 1402 margin: 0;
1501 1403 }
1502 1404 }
1503 1405
1406 +/* Filter section responsive styles */
1407 +@media screen and (max-width: 782px) {
1408 + .mxchat-search-group {
1409 + display: flex;
1410 + flex-direction: column;
1411 + gap: 0.5rem;
1412 + }
1413 +
1414 + .mxchat-search-group input,
1415 + .mxchat-search-group select,
1416 + .mxchat-search-group button {
1417 + width: 100%;
1418 + margin: 0;
1419 + }
1420 +}
1421 +
1422 +
1504 1423 /* Stats Grid */
1505 1424 .mxchat-stats-grid {
1506 1425 display: grid;
1507 1426 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -1735,8 +1654,15 @@
1735 1654
1736 1655
1737 1656
1738 1657
1658 +/* Settings Page Container */
1659 +.mxchat-tab-content {
1660 + background: white;
1661 + padding: 25px;
1662 + border-radius: 10px;
1663 + box-shadow: 0 2px 15px rgba(0,0,0,0.05);
1664 +}
1739 1665
1740 1666 /* Form Table Layout */
1741 1667 .form-table {
1742 1668 border-collapse: separate;
@@ -2053,8 +1979,16 @@
2053 1979
2054 1980
2055 1981
2056 1982
1983 +.mxchat-import-container {
1984 + background: #fff;
1985 + border-radius: 8px;
1986 + box-shadow: 0 1px 3px rgba(0,0,0,0.1);
1987 + margin-bottom: 1rem;
1988 + padding: 1.5rem;
1989 +}
1990 +
2057 1991 .mxchat-flex-section h2 {
2058 1992 margin: 0 0 1rem;
2059 1993 padding-bottom: 0.5rem;
2060 1994 border-bottom: 1px solid #eee;
@@ -2218,8 +2152,13 @@
2218 2152 @media screen and (max-width: 782px) {
2219 2153 .mxchat-settings-row {
2220 2154 flex-direction: column;
2221 2155 }
2156 +
2157 + .mxchat-url-input-group {
2158 + flex-direction: column;
2159 + }
2160 +
2222 2161 .mxchat-url-input-group input[type="submit"] {
2223 2162 width: 100%;
2224 2163 }
2225 2164 }
@@ -2230,12 +2169,11 @@
2230 2169
2231 2170 /* Feedback container for saving indicator */
2232 2171 .feedback-container {
2233 2172 display: inline-flex;
2234 - align-items: right;
2173 + align-items: center;
2235 2174 margin-left: 10px;
2236 2175 position: relative;
2237 - z-index: 2;
2238 2176 }
2239 2177
2240 2178 /* Spinner animation */
2241 2179 .saving-spinner {
@@ -2315,495 +2253,4 @@
2315 2253 background: #2271b1;
2316 2254 border-radius: 50%;
2317 2255 cursor: pointer;
2318 2256 }
2319 -
2320 -
2321 -
2322 -
2323 -
2324 -
2325 -
2326 -
2327 -
2328 -
2329 -
2330 -
2331 -
2332 -
2333 -
2334 -
2335 -
2336 -/* Container Styles */
2337 -.mxchat-import-container {
2338 - background: #fff;
2339 - padding: 20px;
2340 - border: 1px solid #e1e1e1;
2341 - border-radius: 10px;
2342 - box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
2343 -}
2344 -
2345 -
2346 -
2347 -/* Tabs Navigation */
2348 -.mxchat-tabs {
2349 - display: flex;
2350 - border-bottom: 2px solid #e1e1e1;
2351 - margin-bottom: 20px;
2352 -}
2353 -.mxchat-tab-button {
2354 - padding: 10px 20px;
2355 - cursor: pointer;
2356 - background: transparent;
2357 - border: none;
2358 - border-bottom: 2px solid transparent;
2359 - transition: all 0.3s ease;
2360 - font-size: 16px;
2361 - color: #333;
2362 -}
2363 -.mxchat-tab-button:hover,
2364 -.mxchat-tab-button:focus {
2365 - background: #f9f9f9;
2366 -}
2367 -.mxchat-tab-button.active {
2368 - border-bottom: 2px solid #0073aa;
2369 - font-weight: bold;
2370 - color: #0073aa;
2371 -}
2372 -
2373 -
2374 -
2375 -/* Flex Container for Default DB Tab */
2376 -.mxchat-flex-container {
2377 - display: flex;
2378 - gap: 20px;
2379 - flex-wrap: wrap;
2380 -}
2381 -.mxchat-sync-column,
2382 -.mxchat-import-column {
2383 - flex: 1;
2384 - min-width: 300px;
2385 -}
2386 -
2387 -/* Section Headings and Descriptions */
2388 -.mxchat-section h3 {
2389 - font-size: 18px;
2390 - margin-bottom: 10px;
2391 - color: #0073aa;
2392 -}
2393 -.mxchat-description {
2394 - font-size: 14px;
2395 - margin-bottom: 15px;
2396 - color: #555;
2397 -}
2398 -
2399 -/* Toggle Switches */
2400 -.mxchat-toggle-container {
2401 - display: flex;
2402 - align-items: center;
2403 - margin-bottom: 15px;
2404 -}
2405 -.mxchat-toggle-switch {
2406 - position: relative;
2407 - display: inline-block;
2408 - width: 50px;
2409 - height: 24px;
2410 - margin-right: 10px;
2411 -}
2412 -.mxchat-toggle-switch input {
2413 - opacity: 0;
2414 - width: 0;
2415 - height: 0;
2416 -}
2417 -.mxchat-toggle-slider {
2418 - position: absolute;
2419 - cursor: pointer;
2420 - top: 0;
2421 - left: 0;
2422 - right: 0;
2423 - bottom: 0;
2424 - background-color: #ccc;
2425 - transition: 0.4s;
2426 - border-radius: 24px;
2427 -}
2428 -.mxchat-toggle-switch input:checked + .mxchat-toggle-slider {
2429 - background-color: #212121;
2430 -}
2431 -.mxchat-toggle-slider:before {
2432 - position: absolute;
2433 - content: "";
2434 - height: 18px;
2435 - width: 18px;
2436 - left: 3px;
2437 - bottom: 3px;
2438 - background-color: white;
2439 - transition: 0.4s;
2440 - border-radius: 50%;
2441 -}
2442 -.mxchat-toggle-switch input:checked + .mxchat-toggle-slider:before {
2443 - transform: translateX(26px);
2444 -}
2445 -.mxchat-toggle-label {
2446 - font-size: 14px;
2447 - color: #333;
2448 -}
2449 -
2450 -/* Form Groups */
2451 -.mxchat-form-group {
2452 - margin-bottom: 15px;
2453 -}
2454 -.mxchat-form-group label {
2455 - display: block;
2456 - margin-bottom: 5px;
2457 - font-weight: bold;
2458 - color: #333;
2459 -}
2460 -
2461 -.mxchat-form-group .description {
2462 - font-size: 12px;
2463 - color: #777;
2464 -}
2465 -
2466 -/* URL and Pinecone Input Groups */
2467 -.mxchat-url-input-group,
2468 -.mxchat-pinecone-input-group {
2469 - display: flex;
2470 - gap: 0px;
2471 - margin-bottom: 15px;
2472 -}
2473 -.mxchat-url-input-group input[type="url"],
2474 -.mxchat-pinecone-input-group input[type="url"] {
2475 - flex: 1;
2476 - padding: 8px;
2477 - border: 1px solid #ccc;
2478 -border-radius: 4px 0px 0px 4px;
2479 -}
2480 -.mxchat-url-input-group input[type="submit"],
2481 -.mxchat-pinecone-input-group input[type="submit"] {
2482 - padding: 8px 16px;
2483 - background-color: #0073aa;
2484 - color: #fff;
2485 - border: none;
2486 - border-radius: 4px;
2487 - cursor: pointer;
2488 - transition: background-color 0.3s ease;
2489 -}
2490 -.mxchat-url-input-group input[type="submit"]:hover,
2491 -.mxchat-pinecone-input-group input[type="submit"]:hover {
2492 - background-color: #005177;
2493 -}
2494 -
2495 -/* Submit Wrapper */
2496 -.mxchat-submit-wrapper {
2497 - margin-top: 20px;
2498 -}
2499 -
2500 -/* Import & Pinecone Options List */
2501 -.import-options,
2502 -.pinecone-options {
2503 - margin: 10px 0 15px 20px;
2504 - color: #555;
2505 -}
2506 -.import-options li,
2507 -.pinecone-options li {
2508 - margin-bottom: 5px;
2509 -}
2510 -
2511 -/* Spinner Styles */
2512 -.mxchat-spinner,
2513 -.mxchat-pinecone-spinner {
2514 - border: 4px solid #f3f3f3;
2515 - border-top: 4px solid #0073aa;
2516 - border-radius: 50%;
2517 - width: 30px;
2518 - height: 30px;
2519 - animation: spin 1s linear infinite;
2520 - margin: 10px auto;
2521 -}
2522 -@keyframes spin {
2523 - 0% { transform: rotate(0deg); }
2524 - 100% { transform: rotate(360deg); }
2525 -}
2526 -
2527 -/* Processing Status Messages */
2528 -.mxchat-process-status,
2529 -.mxchat-pinecone-status {
2530 - border: 1px solid #0073aa;
2531 - background-color: #f1f8ff;
2532 - padding: 10px;
2533 - border-radius: 4px;
2534 - margin-top: 15px;
2535 -}
2536 -.mxchat-process-status h3,
2537 -.mxchat-pinecone-status h3 {
2538 - margin-top: 0;
2539 - font-size: 16px;
2540 - color: #0073aa;
2541 -}
2542 -.mxchat-process-status p,
2543 -.mxchat-pinecone-status p {
2544 - margin: 5px 0;
2545 - font-size: 14px;
2546 - color: #333;
2547 -}
2548 -
2549 -/* Responsive Adjustments */
2550 -@media (max-width: 768px) {
2551 - .mxchat-flex-container {
2552 - flex-direction: column;
2553 - }
2554 -}
2555 -
2556 -
2557 -
2558 -.button.button-primary.pinecone-submit {
2559 - box-shadow: none;
2560 - border-radius: 0px 4px 4px 0px;
2561 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2562 - margin-bottom: 0px;
2563 -}
2564 -
2565 -.button.button-primary.pinecone-submit:hover {
2566 - opacity: .8;
2567 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2568 -
2569 -}
2570 -
2571 -/* Pro Hero Section */
2572 -body.wp-admin .mxchat-pro-hero {
2573 - text-align: center;
2574 - padding: 3.5rem 2rem;
2575 - position: relative;
2576 - background: #212121;
2577 - border-bottom: 4px solid transparent;
2578 - border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2579 - border-image-slice: 1;
2580 -}
2581 -
2582 -body.wp-admin .mxchat-pro-hero::before {
2583 - content: '';
2584 - position: absolute;
2585 - top: 0;
2586 - left: 0;
2587 - width: 100%;
2588 - height: 100%;
2589 - background: radial-gradient(
2590 - circle at center,
2591 - rgba(250, 115, 230, 0.08) 0%,
2592 - rgba(120, 115, 245, 0.08) 50%,
2593 - rgba(58, 201, 209, 0.08) 100%
2594 - );
2595 - z-index: 1;
2596 -}
2597 -
2598 -body.wp-admin .mxchat-pro-hero::after {
2599 - content: '';
2600 - position: absolute;
2601 - bottom: -20px;
2602 - left: 0;
2603 - width: 100%;
2604 - height: 20px;
2605 - background: linear-gradient(180deg, rgba(33, 33, 33, 0.2) 0%, transparent 100%);
2606 - z-index: 2;
2607 -}
2608 -
2609 -body.wp-admin .pro-title {
2610 - font-size: 3.5rem;
2611 - margin: 0 0 1.5rem;
2612 - line-height: 1.2;
2613 - color: white;
2614 - position: relative;
2615 - z-index: 2;
2616 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
2617 -}
2618 -
2619 -body.wp-admin .pro-gradient-text {
2620 - font-weight: 700;
2621 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2622 - -webkit-background-clip: text;
2623 - -webkit-text-fill-color: transparent;
2624 - display: inline-block;
2625 -}
2626 -
2627 -body.wp-admin .pro-subtitle {
2628 - font-size: 1.25rem;
2629 - color: rgba(255, 255, 255, 0.9);
2630 - max-width: 600px;
2631 - margin: 0 auto;
2632 - position: relative;
2633 - z-index: 2;
2634 - line-height: 1.6;
2635 -}
2636 -
2637 -/* Responsive Design */
2638 -@media (max-width: 768px) {
2639 - body.wp-admin .pro-title {
2640 - font-size: 2.1rem;
2641 - margin-bottom: 1rem;
2642 - }
2643 -
2644 - body.wp-admin .mxchat-pro-hero {
2645 - padding: 2.5rem 1.5rem;
2646 - }
2647 -
2648 - body.wp-admin .pro-subtitle {
2649 - font-size: 1.1rem;
2650 - }
2651 -}
2652 -
2653 -
2654 -/* Form Container Styles */
2655 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form-container {
2656 - max-width: 600px;
2657 - margin: 2rem auto;
2658 - background: white;
2659 - padding: 2rem;
2660 - border-radius: 12px;
2661 - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
2662 -}
2663 -
2664 -/* Form Table Styles */
2665 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form .form-table {
2666 - margin: 0;
2667 - border-collapse: separate;
2668 - border-spacing: 0 1rem;
2669 -}
2670 -
2671 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form .form-table th {
2672 - padding: 0 1rem 0 0;
2673 - width: 140px;
2674 - font-weight: 600;
2675 - color: #212121;
2676 - font-size: 15px;
2677 - vertical-align: middle;
2678 -}
2679 -
2680 -/* Input Field Styles */
2681 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-input {
2682 - width: 100%;
2683 - padding: 10px 16px;
2684 - border: 2px solid #e0e0e0;
2685 - border-radius: 8px;
2686 - font-size: 15px;
2687 - transition: all 0.3s ease;
2688 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
2689 -}
2690 -
2691 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-input:focus {
2692 - border-color: #7873f5;
2693 - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
2694 - outline: none;
2695 -}
2696 -
2697 -/* Button Container and Button Styles */
2698 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-button-container {
2699 - margin-top: 2rem;
2700 - text-align: right;
2701 - display: flex;
2702 - align-items: center;
2703 - justify-content: flex-end;
2704 - gap: 1rem;
2705 -}
2706 -
2707 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-button {
2708 - background: linear-gradient(135deg, #fa73e6, #7873f5);
2709 - border: none;
2710 - padding: 12px 24px;
2711 - border-radius: 8px;
2712 - color: white;
2713 - font-weight: 600;
2714 - font-size: 15px;
2715 - cursor: pointer;
2716 - transition: all 0.3s ease;
2717 - text-shadow: none;
2718 - box-shadow: 0 4px 12px rgba(120, 115, 245, 0.2);
2719 - height: auto;
2720 - line-height: 1.4;
2721 -}
2722 -
2723 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-button:hover {
2724 - transform: translateY(-2px);
2725 - box-shadow: 0 6px 16px rgba(120, 115, 245, 0.3);
2726 -}
2727 -
2728 -/* Error Notice Styles */
2729 -body.wp-admin .wrap.mxchat-admin-activation .error.notice {
2730 - margin: 2rem auto;
2731 - max-width: 600px;
2732 - border-left-color: #dc3232;
2733 - background: #fff;
2734 - border-radius: 4px;
2735 - box-shadow: 0 2px 8px rgba(220, 50, 50, 0.1);
2736 -}
2737 -
2738 -/* License Status Styles */
2739 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-status {
2740 - max-width: 600px;
2741 - margin: 2rem;
2742 - padding: 1.5rem;
2743 - background: white;
2744 - border-radius: 12px;
2745 - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
2746 -}
2747 -
2748 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-status h3 {
2749 - margin: 0;
2750 - font-size: 15px;
2751 - color: #212121;
2752 - display: flex;
2753 - align-items: center;
2754 - gap: 0.5rem;
2755 -}
2756 -
2757 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-status-badge {
2758 - padding: 6px 12px;
2759 - border-radius: 20px;
2760 - font-size: 13px;
2761 - font-weight: 600;
2762 -}
2763 -
2764 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-status-badge.active {
2765 - background: #e8f5e9;
2766 - color: #2e7d32;
2767 -}
2768 -
2769 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-status-badge.inactive {
2770 - background: #fff3e0;
2771 - color: #ef6c00;
2772 -}
2773 -
2774 -/* Spinner Styles */
2775 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-activation-spinner {
2776 - width: 20px;
2777 - height: 20px;
2778 - border: 2px solid rgba(120, 115, 245, 0.3);
2779 - border-radius: 50%;
2780 - border-top-color: #7873f5;
2781 - animation: spin 1s linear infinite;
2782 -}
2783 -
2784 -@keyframes spin {
2785 - to {
2786 - transform: rotate(360deg);
2787 - }
2788 -}
2789 -
2790 -/* Responsive Adjustments */
2791 -@media (max-width: 782px) {
2792 - body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form .form-table th {
2793 - padding-bottom: 0.5rem;
2794 - }
2795 -
2796 - body.wp-admin .wrap.mxchat-admin-activation .form-table,
2797 - body.wp-admin .wrap.mxchat-admin-activation .form-table tbody,
2798 - body.wp-admin .wrap.mxchat-admin-activation .form-table tr,
2799 - body.wp-admin .wrap.mxchat-admin-activation .form-table th,
2800 - body.wp-admin .wrap.mxchat-admin-activation .form-table td {
2801 - display: block;
2802 - width: 100%;
2803 - padding: 0;
2804 - }
2805 -
2806 - body.wp-admin .wrap.mxchat-admin-activation .form-table td {
2807 - margin-bottom: 1.5rem;
2808 - }
2809 -}