| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | /* ========================================================================== |
| 2 | 2 | MxChat Admin Sidebar Navigation - v2.0 |
| 3 | 3 | Clean, modern CSS for the redesigned settings page |
| 4 | 4 | ========================================================================== */ |
| @@ -40,8 +40,10 @@ | ||
| 40 | 40 | |
| 41 | 41 | /* Status Colors */ |
| 42 | 42 | --mxch-success: #10b981; |
| 43 | 43 | --mxch-warning: #f59e0b; |
| 44 | + --mxch-warning-light: rgba(245, 158, 11, 0.12); | |
| 45 | + --mxch-warning-text: #92400e; | |
| 44 | 46 | --mxch-error: #ef4444; |
| 45 | 47 | --mxch-info: #3b82f6; |
| 46 | 48 | |
| 47 | 49 | /* Spacing */ |
| @@ -92,8 +94,49 @@ | ||
| 92 | 94 | } |
| 93 | 95 | } |
| 94 | 96 | |
| 95 | 97 | /* ========================================================================== |
| 98 | + RTL locales (Arabic, Hebrew, Persian, Urdu, …) | |
| 99 | + On an RTL locale WordPress moves its admin menu to the RIGHT and sets the | |
| 100 | + `rtl` class + `direction: rtl` on <body>. The base wrapper is pinned | |
| 101 | + `left: 160px; right: 0` for a LEFT-side admin menu, so under RTL its right | |
| 102 | + edge slides under the (now right-side) WP menu and a dead 160px gap opens on | |
| 103 | + the left — the nav ends up hidden/overlapped. Mirror the fixed offsets and | |
| 104 | + the negative content margin. The internal sidebar/content flex row reverses | |
| 105 | + automatically under the inherited `direction: rtl`, so the sidebar lands on | |
| 106 | + the wrapper's right edge (just inside the WP menu) as expected for RTL — no | |
| 107 | + per-child repositioning needed. | |
| 108 | + ========================================================================== */ | |
| 109 | +body.rtl .mxch-admin-wrapper { | |
| 110 | + left: 0; | |
| 111 | + right: 160px; /* WordPress admin menu width (now on the right) */ | |
| 112 | + margin-left: 0; | |
| 113 | + margin-right: -20px; | |
| 114 | +} | |
| 115 | + | |
| 116 | +/* Collapsed/folded admin menu (narrower) on RTL */ | |
| 117 | +body.rtl.folded .mxch-admin-wrapper { | |
| 118 | + left: 0; | |
| 119 | + right: 36px; | |
| 120 | +} | |
| 121 | + | |
| 122 | +/* On mobile the WP admin menu collapses to the top bar, so the wrapper is | |
| 123 | + full-width in both directions — clear the RTL right offset too. */ | |
| 124 | +@media screen and (max-width: 782px) { | |
| 125 | + body.rtl .mxch-admin-wrapper { | |
| 126 | + left: 0; | |
| 127 | + right: 0; | |
| 128 | + margin-right: 0; | |
| 129 | + } | |
| 130 | +} | |
| 131 | + | |
| 132 | +/* Active nav-item accent sits on the sidebar's inner edge; flip it for RTL. */ | |
| 133 | +body.rtl .mxch-nav-link.active { | |
| 134 | + border-right: none; | |
| 135 | + border-left: 3px solid var(--mxch-primary); | |
| 136 | +} | |
| 137 | + | |
| 138 | +/* ========================================================================== | |
| 96 | 139 | Sidebar Navigation |
| 97 | 140 | ========================================================================== */ |
| 98 | 141 | .mxch-sidebar { |
| 99 | 142 | width: var(--mxch-sidebar-width); |
| @@ -1154,8 +1197,23 @@ | ||
| 1154 | 1197 | flex: 1; |
| 1155 | 1198 | margin-bottom: 0; |
| 1156 | 1199 | } |
| 1157 | 1200 | |
| 1201 | +/* Global cap "Current usage" readout (plan-mxchat-20260603-e9b3f9) */ | |
| 1202 | +.mxch-rate-limit-usage { | |
| 1203 | + margin-top: var(--mxch-spacing-md); | |
| 1204 | + padding-top: var(--mxch-spacing-md); | |
| 1205 | + border-top: 1px solid var(--mxch-card-border); | |
| 1206 | +} | |
| 1207 | + | |
| 1208 | +.mxch-rate-limit-usage-head { | |
| 1209 | + display: flex; | |
| 1210 | + align-items: center; | |
| 1211 | + justify-content: space-between; | |
| 1212 | + gap: var(--mxch-spacing-md); | |
| 1213 | + margin-bottom: var(--mxch-spacing-xs); | |
| 1214 | +} | |
| 1215 | + | |
| 1158 | 1216 | /* ========================================================================== |
| 1159 | 1217 | Buttons |
| 1160 | 1218 | ========================================================================== */ |
| 1161 | 1219 | .mxch-btn { |
| @@ -1287,9 +1345,95 @@ | ||
| 1287 | 1345 | color: #991b1b; |
| 1288 | 1346 | border: 1px solid #fecaca; |
| 1289 | 1347 | } |
| 1290 | 1348 | |
| 1349 | +/* Standalone notice sitting between a content header and the first card. | |
| 1350 | + Token-based replacement for the inline margin declarations this component | |
| 1351 | + has been carrying at its call sites (b65e8d). */ | |
| 1352 | +.mxch-notice-block { | |
| 1353 | + margin-bottom: var(--mxch-spacing-lg); | |
| 1354 | +} | |
| 1355 | + | |
| 1291 | 1356 | /* ========================================================================== |
| 1357 | + Disclosure (collapsible <details>) | |
| 1358 | + Generic Advanced/opt-in surface — used for static-bearer fallback on | |
| 1359 | + mxchat-mcp's Connected Apps tab, and any add-on that needs the same | |
| 1360 | + "advanced/show more" pattern. Originally lived in plugins/mxchat-mcp/css/ | |
| 1361 | + admin-mcp.css; elevated here so every add-on inherits via the standard | |
| 1362 | + admin-sidebar.css enqueue. | |
| 1363 | + ========================================================================== */ | |
| 1364 | +.mxch-disclosure { | |
| 1365 | + margin-top: 16px; | |
| 1366 | + border: 1px solid var(--mxch-card-border, #e2e4e9); | |
| 1367 | + border-radius: var(--mxch-radius-md, 6px); | |
| 1368 | + background: #fbfcfd; | |
| 1369 | +} | |
| 1370 | +.mxch-disclosure[open] { | |
| 1371 | + background: #fff; | |
| 1372 | +} | |
| 1373 | +.mxch-disclosure-summary { | |
| 1374 | + display: flex; | |
| 1375 | + align-items: center; | |
| 1376 | + gap: 10px; | |
| 1377 | + padding: 10px 14px; | |
| 1378 | + cursor: pointer; | |
| 1379 | + list-style: none; | |
| 1380 | + user-select: none; | |
| 1381 | + color: var(--mxch-text-secondary, #57606a); | |
| 1382 | + font-size: 13px; | |
| 1383 | + font-weight: 600; | |
| 1384 | +} | |
| 1385 | +.mxch-disclosure-summary::-webkit-details-marker { display: none; } | |
| 1386 | +.mxch-disclosure-summary::before { | |
| 1387 | + content: ""; | |
| 1388 | + display: inline-block; | |
| 1389 | + width: 8px; | |
| 1390 | + height: 8px; | |
| 1391 | + border-right: 2px solid currentColor; | |
| 1392 | + border-bottom: 2px solid currentColor; | |
| 1393 | + transform: rotate(-45deg); | |
| 1394 | + transition: transform 0.18s ease; | |
| 1395 | + margin-right: 2px; | |
| 1396 | +} | |
| 1397 | +.mxch-disclosure[open] > .mxch-disclosure-summary::before { | |
| 1398 | + transform: rotate(45deg); | |
| 1399 | +} | |
| 1400 | +.mxch-disclosure-summary svg { | |
| 1401 | + flex-shrink: 0; | |
| 1402 | + opacity: 0.7; | |
| 1403 | +} | |
| 1404 | +.mxch-disclosure-summary-text { | |
| 1405 | + color: var(--mxch-text-primary, #1d2327); | |
| 1406 | + font-weight: 600; | |
| 1407 | +} | |
| 1408 | +.mxch-disclosure-summary-hint { | |
| 1409 | + color: var(--mxch-text-secondary, #57606a); | |
| 1410 | + font-weight: 400; | |
| 1411 | + font-size: 12px; | |
| 1412 | +} | |
| 1413 | +.mxch-disclosure-summary:hover .mxch-disclosure-summary-text { | |
| 1414 | + color: var(--mxch-primary, #7873f5); | |
| 1415 | +} | |
| 1416 | +.mxch-disclosure-summary:focus-visible { | |
| 1417 | + outline: 2px solid var(--mxch-primary, #7873f5); | |
| 1418 | + outline-offset: 2px; | |
| 1419 | + border-radius: var(--mxch-radius-md, 6px); | |
| 1420 | +} | |
| 1421 | +.mxch-disclosure-body { | |
| 1422 | + padding: 8px 14px 14px 14px; | |
| 1423 | + border-top: 1px solid var(--mxch-card-border, #e2e4e9); | |
| 1424 | +} | |
| 1425 | +@media (max-width: 600px) { | |
| 1426 | + .mxch-disclosure-summary { | |
| 1427 | + flex-wrap: wrap; | |
| 1428 | + } | |
| 1429 | + .mxch-disclosure-summary-hint { | |
| 1430 | + flex-basis: 100%; | |
| 1431 | + margin-left: 18px; | |
| 1432 | + } | |
| 1433 | +} | |
| 1434 | + | |
| 1435 | +/* ========================================================================== | |
| 1292 | 1436 | Quick Questions List |
| 1293 | 1437 | ========================================================================== */ |
| 1294 | 1438 | .mxch-quick-questions { |
| 1295 | 1439 | display: flex; |
| @@ -1997,8 +2141,43 @@ | ||
| 1997 | 2141 | .mxch-admin-wrapper .slider-container + .feedback-container { |
| 1998 | 2142 | margin-left: 15px; |
| 1999 | 2143 | } |
| 2000 | 2144 | |
| 2145 | +/* Persistent unsaved-state badge (plan 7787f8). Quiet warning, not an error: | |
| 2146 | + a field whose value differs from its last-saved state carries this on its | |
| 2147 | + label until the autosave round-trip confirms. */ | |
| 2148 | +.mxch-admin-wrapper .mxchat-unsaved-badge { | |
| 2149 | + display: inline-flex; | |
| 2150 | + align-items: center; | |
| 2151 | + gap: 5px; | |
| 2152 | + margin-left: 8px; | |
| 2153 | + padding: 1px 8px 1px 6px; | |
| 2154 | + border-radius: 10px; | |
| 2155 | + background: var(--mxch-warning-light); | |
| 2156 | + color: var(--mxch-warning-text); | |
| 2157 | + font-size: 11px; | |
| 2158 | + font-weight: 600; | |
| 2159 | + line-height: 1.6; | |
| 2160 | + letter-spacing: 0.2px; | |
| 2161 | + vertical-align: middle; | |
| 2162 | + white-space: nowrap; | |
| 2163 | + animation: mxchUnsavedIn 0.15s ease-out; | |
| 2164 | +} | |
| 2165 | + | |
| 2166 | +.mxch-admin-wrapper .mxchat-unsaved-badge::before { | |
| 2167 | + content: ''; | |
| 2168 | + width: 6px; | |
| 2169 | + height: 6px; | |
| 2170 | + border-radius: 50%; | |
| 2171 | + background: var(--mxch-warning); | |
| 2172 | + flex: none; | |
| 2173 | +} | |
| 2174 | + | |
| 2175 | +@keyframes mxchUnsavedIn { | |
| 2176 | + from { opacity: 0; transform: translateY(1px); } | |
| 2177 | + to { opacity: 1; transform: none; } | |
| 2178 | +} | |
| 2179 | + | |
| 2001 | 2180 | /* ========================================================================== |
| 2002 | 2181 | Real-time Entry Updates |
| 2003 | 2182 | ========================================================================== */ |
| 2004 | 2183 | |
| @@ -2554,4 +2733,242 @@ | ||
| 2554 | 2733 | .mxch-modal-content { |
| 2555 | 2734 | margin: 10px; |
| 2556 | 2735 | } |
| 2557 | 2736 | } |
| 2737 | + | |
| 2738 | +/* ============================================================ | |
| 2739 | + Dashboard page (Setup Assistant + dashboard cards) | |
| 2740 | + Added with plan-mxchat-20260526-704e25. | |
| 2741 | + ============================================================ */ | |
| 2742 | + | |
| 2743 | +.mxch-setup-card .mxch-card-body { | |
| 2744 | + padding-top: var(--mxch-spacing-md); | |
| 2745 | +} | |
| 2746 | + | |
| 2747 | +.mxch-progress-bar { | |
| 2748 | + height: 6px; | |
| 2749 | + background: var(--mxch-card-border, #e5e7eb); | |
| 2750 | + border-radius: 999px; | |
| 2751 | + overflow: hidden; | |
| 2752 | + margin: var(--mxch-spacing-sm) 0 var(--mxch-spacing-xs); | |
| 2753 | +} | |
| 2754 | + | |
| 2755 | +.mxch-progress-bar-fill { | |
| 2756 | + height: 100%; | |
| 2757 | + background: linear-gradient(90deg, var(--mxch-primary) 0%, #9b96ff 100%); | |
| 2758 | + border-radius: 999px; | |
| 2759 | + transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1); | |
| 2760 | +} | |
| 2761 | + | |
| 2762 | +.mxch-progress-label { | |
| 2763 | + font-size: 12px; | |
| 2764 | + color: var(--mxch-text-secondary); | |
| 2765 | + margin: 0 0 var(--mxch-spacing-md); | |
| 2766 | + font-weight: 500; | |
| 2767 | +} | |
| 2768 | + | |
| 2769 | +.mxch-step-list { | |
| 2770 | + list-style: none; | |
| 2771 | + margin: 0; | |
| 2772 | + padding: 0; | |
| 2773 | + display: flex; | |
| 2774 | + flex-direction: column; | |
| 2775 | + gap: var(--mxch-spacing-sm); | |
| 2776 | +} | |
| 2777 | + | |
| 2778 | +.mxch-step { | |
| 2779 | + display: grid; | |
| 2780 | + grid-template-columns: 32px 1fr auto; | |
| 2781 | + align-items: center; | |
| 2782 | + gap: var(--mxch-spacing-md); | |
| 2783 | + padding: var(--mxch-spacing-md); | |
| 2784 | + background: var(--mxch-content-bg, #f7f8fa); | |
| 2785 | + border: 1px solid transparent; | |
| 2786 | + border-radius: var(--mxch-radius-md); | |
| 2787 | + transition: background 160ms ease, border-color 160ms ease; | |
| 2788 | +} | |
| 2789 | + | |
| 2790 | +.mxch-step.mxch-step-in-progress { | |
| 2791 | + background: var(--mxch-primary-lighter, rgba(120, 115, 245, 0.05)); | |
| 2792 | + border-color: var(--mxch-primary-light, rgba(120, 115, 245, 0.1)); | |
| 2793 | +} | |
| 2794 | + | |
| 2795 | +.mxch-step.mxch-step-done { | |
| 2796 | + background: rgba(16, 185, 129, 0.06); | |
| 2797 | +} | |
| 2798 | + | |
| 2799 | +.mxch-step-indicator { | |
| 2800 | + width: 28px; | |
| 2801 | + height: 28px; | |
| 2802 | + border-radius: 50%; | |
| 2803 | + display: flex; | |
| 2804 | + align-items: center; | |
| 2805 | + justify-content: center; | |
| 2806 | + font-size: 13px; | |
| 2807 | + font-weight: 600; | |
| 2808 | + background: #fff; | |
| 2809 | + color: var(--mxch-text-secondary, #64748b); | |
| 2810 | + border: 1.5px solid var(--mxch-card-border, #e5e7eb); | |
| 2811 | + flex-shrink: 0; | |
| 2812 | +} | |
| 2813 | + | |
| 2814 | +.mxch-step-in-progress .mxch-step-indicator { | |
| 2815 | + color: var(--mxch-primary); | |
| 2816 | + border-color: var(--mxch-primary); | |
| 2817 | + background: #fff; | |
| 2818 | + box-shadow: 0 0 0 4px var(--mxch-primary-lighter, rgba(120, 115, 245, 0.06)); | |
| 2819 | +} | |
| 2820 | + | |
| 2821 | +.mxch-step-done .mxch-step-indicator { | |
| 2822 | + background: var(--mxch-success, #10b981); | |
| 2823 | + border-color: var(--mxch-success, #10b981); | |
| 2824 | + color: #fff; | |
| 2825 | +} | |
| 2826 | + | |
| 2827 | +.mxch-step-number { | |
| 2828 | + line-height: 1; | |
| 2829 | +} | |
| 2830 | + | |
| 2831 | +.mxch-step-body { | |
| 2832 | + min-width: 0; | |
| 2833 | +} | |
| 2834 | + | |
| 2835 | +.mxch-step-title { | |
| 2836 | + font-size: 14px; | |
| 2837 | + font-weight: 600; | |
| 2838 | + color: var(--mxch-text-primary, #1a1a2e); | |
| 2839 | + margin-bottom: 2px; | |
| 2840 | +} | |
| 2841 | + | |
| 2842 | +.mxch-step-done .mxch-step-title { | |
| 2843 | + color: var(--mxch-text-secondary, #64748b); | |
| 2844 | +} | |
| 2845 | + | |
| 2846 | +.mxch-step-description { | |
| 2847 | + font-size: 12.5px; | |
| 2848 | + color: var(--mxch-text-secondary, #64748b); | |
| 2849 | + line-height: 1.45; | |
| 2850 | +} | |
| 2851 | + | |
| 2852 | +.mxch-step-action { | |
| 2853 | + align-self: center; | |
| 2854 | +} | |
| 2855 | + | |
| 2856 | +.mxch-setup-dismiss-row { | |
| 2857 | + margin-top: var(--mxch-spacing-md); | |
| 2858 | + text-align: right; | |
| 2859 | +} | |
| 2860 | + | |
| 2861 | +.mxch-setup-dismiss, | |
| 2862 | +.mxch-setup-resume { | |
| 2863 | + font-size: 12.5px; | |
| 2864 | + color: var(--mxch-text-secondary, #64748b); | |
| 2865 | + text-decoration: none; | |
| 2866 | + border-bottom: 1px dotted currentColor; | |
| 2867 | +} | |
| 2868 | + | |
| 2869 | +.mxch-setup-dismiss:hover, | |
| 2870 | +.mxch-setup-resume:hover { | |
| 2871 | + color: var(--mxch-primary); | |
| 2872 | +} | |
| 2873 | + | |
| 2874 | +.mxch-resume-setup-row { | |
| 2875 | + margin: 0 0 var(--mxch-spacing-md); | |
| 2876 | + text-align: right; | |
| 2877 | +} | |
| 2878 | + | |
| 2879 | +.mxch-dashboard-grid { | |
| 2880 | + display: grid; | |
| 2881 | + grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 2882 | + gap: var(--mxch-spacing-md); | |
| 2883 | + margin-top: var(--mxch-spacing-lg); | |
| 2884 | +} | |
| 2885 | + | |
| 2886 | +.mxch-dashboard-card .mxch-card-body { | |
| 2887 | + display: flex; | |
| 2888 | + flex-direction: column; | |
| 2889 | + gap: var(--mxch-spacing-sm); | |
| 2890 | +} | |
| 2891 | + | |
| 2892 | +.mxch-dashboard-big-number { | |
| 2893 | + font-size: 36px; | |
| 2894 | + font-weight: 700; | |
| 2895 | + color: var(--mxch-text-primary, #1a1a2e); | |
| 2896 | + line-height: 1.1; | |
| 2897 | + letter-spacing: -0.02em; | |
| 2898 | +} | |
| 2899 | + | |
| 2900 | +.mxch-dashboard-provider-name { | |
| 2901 | + font-size: 16px; | |
| 2902 | + font-weight: 600; | |
| 2903 | + color: var(--mxch-text-primary, #1a1a2e); | |
| 2904 | + word-break: break-word; | |
| 2905 | +} | |
| 2906 | + | |
| 2907 | +.mxch-dashboard-card-meta { | |
| 2908 | + font-size: 13px; | |
| 2909 | + color: var(--mxch-text-secondary, #64748b); | |
| 2910 | + margin: 0; | |
| 2911 | +} | |
| 2912 | + | |
| 2913 | +@media (max-width: 1024px) { | |
| 2914 | + .mxch-dashboard-grid { | |
| 2915 | + grid-template-columns: 1fr 1fr; | |
| 2916 | + } | |
| 2917 | +} | |
| 2918 | + | |
| 2919 | +@media (max-width: 782px) { | |
| 2920 | + .mxch-step { | |
| 2921 | + grid-template-columns: 32px 1fr; | |
| 2922 | + grid-template-rows: auto auto; | |
| 2923 | + gap: var(--mxch-spacing-sm) var(--mxch-spacing-md); | |
| 2924 | + } | |
| 2925 | + .mxch-step-action { | |
| 2926 | + grid-column: 1 / -1; | |
| 2927 | + text-align: right; | |
| 2928 | + } | |
| 2929 | + .mxch-dashboard-grid { | |
| 2930 | + grid-template-columns: 1fr; | |
| 2931 | + } | |
| 2932 | +} | |
| 2933 | + | |
| 2934 | +/* ------------------------------------------------------------------ | |
| 2935 | + * Test Streaming Compatibility button (AI Models page) | |
| 2936 | + * Branded .mxch-btn replacing the legacy WP button + dashicon wrench. | |
| 2937 | + * ------------------------------------------------------------------ */ | |
| 2938 | +.mxch-streaming-test-row { | |
| 2939 | + margin-top: var(--mxch-spacing-md, 16px); | |
| 2940 | +} | |
| 2941 | +.mxch-streaming-test-row .mxch-streaming-test-icon { | |
| 2942 | + vertical-align: middle; | |
| 2943 | + margin-right: 8px; | |
| 2944 | +} | |
| 2945 | +.mxch-streaming-test-result { | |
| 2946 | + margin-top: var(--mxch-spacing-sm, 12px); | |
| 2947 | + font-weight: 600; | |
| 2948 | + color: var(--mxch-text-primary, #1a1a2e); | |
| 2949 | +} | |
| 2950 | + | |
| 2951 | +/* ------------------------------------------------------------------ | |
| 2952 | + * Status pill — documented shell component (CLAUDE.md design table). | |
| 2953 | + * Moved here from admin-api-page.php's inline <style> (plan b6e4d4) so | |
| 2954 | + * every admin page renders it, not just the API page. Rules are | |
| 2955 | + * byte-identical to the inline originals. | |
| 2956 | + * ------------------------------------------------------------------ */ | |
| 2957 | +.mxch-status-pill { | |
| 2958 | + display: inline-flex; | |
| 2959 | + align-items: center; | |
| 2960 | + gap: 6px; | |
| 2961 | + padding: 4px 10px; | |
| 2962 | + border-radius: 999px; | |
| 2963 | + font-size: 12px; | |
| 2964 | + font-weight: 600; | |
| 2965 | +} | |
| 2966 | +.mxch-status-pill .mxch-status-dot { | |
| 2967 | + width: 8px; | |
| 2968 | + height: 8px; | |
| 2969 | + border-radius: 50%; | |
| 2970 | +} | |
| 2971 | +.mxch-status-pill-active { background: #e6f4ea; color: #1d7a3a; } | |
| 2972 | +.mxch-status-pill-active .mxch-status-dot { background: #1d7a3a; } | |
| 2973 | +.mxch-status-pill-disabled { background: #fef3e2; color: #a04a00; } | |
| 2974 | +.mxch-status-pill-disabled .mxch-status-dot { background: #a04a00; } | |
