| @@ -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 */ |
| @@ -1343,8 +1345,15 @@ | ||
| 1343 | 1345 | color: #991b1b; |
| 1344 | 1346 | border: 1px solid #fecaca; |
| 1345 | 1347 | } |
| 1346 | 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 | + | |
| 1347 | 1356 | /* ========================================================================== |
| 1348 | 1357 | Disclosure (collapsible <details>) |
| 1349 | 1358 | Generic Advanced/opt-in surface — used for static-bearer fallback on |
| 1350 | 1359 | mxchat-mcp's Connected Apps tab, and any add-on that needs the same |
| @@ -2132,8 +2141,43 @@ | ||
| 2132 | 2141 | .mxch-admin-wrapper .slider-container + .feedback-container { |
| 2133 | 2142 | margin-left: 15px; |
| 2134 | 2143 | } |
| 2135 | 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 | + | |
| 2136 | 2180 | /* ========================================================================== |
| 2137 | 2181 | Real-time Entry Updates |
| 2138 | 2182 | ========================================================================== */ |
| 2139 | 2183 | |
| @@ -2902,4 +2946,29 @@ | ||
| 2902 | 2946 | margin-top: var(--mxch-spacing-sm, 12px); |
| 2903 | 2947 | font-weight: 600; |
| 2904 | 2948 | color: var(--mxch-text-primary, #1a1a2e); |
| 2905 | 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; } | |
