| @@ -6,9 +6,8 @@ | ||
| 6 | 6 | body.wp-admin .wrap.mxchat-addons-wrapper { |
| 7 | 7 | max-width: 100%; |
| 8 | 8 | margin: 0 auto; |
| 9 | 9 | padding: 0; |
| 10 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| 11 | 10 | } |
| 12 | 11 | |
| 13 | 12 | /* Hero Section */ |
| 14 | 13 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-hero { |
| @@ -18,9 +17,8 @@ | ||
| 18 | 17 | background: #212121; |
| 19 | 18 | border-bottom: 4px solid transparent; |
| 20 | 19 | border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1); |
| 21 | 20 | border-image-slice: 1; |
| 22 | - margin-bottom: 2rem; | |
| 23 | 21 | } |
| 24 | 22 | |
| 25 | 23 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-hero::before { |
| 26 | 24 | content: ''; |
| @@ -69,9 +67,9 @@ | ||
| 69 | 67 | |
| 70 | 68 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-hero-subtitle { |
| 71 | 69 | font-size: 1.25rem; |
| 72 | 70 | color: rgba(255, 255, 255, 0.9); |
| 73 | - max-width: 700px; | |
| 71 | + max-width: 600px; | |
| 74 | 72 | margin: 0 auto; |
| 75 | 73 | position: relative; |
| 76 | 74 | z-index: 2; |
| 77 | 75 | line-height: 1.6; |
| @@ -76,20 +74,14 @@ | ||
| 76 | 74 | z-index: 2; |
| 77 | 75 | line-height: 1.6; |
| 78 | 76 | } |
| 79 | 77 | |
| 80 | -/* Section Headers */ | |
| 81 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-section { | |
| 82 | - padding: 1rem 2rem 3rem; | |
| 83 | - max-width: 1400px; | |
| 84 | - margin: 0 auto 2rem; | |
| 85 | -} | |
| 86 | - | |
| 87 | 78 | /* Addons Grid */ |
| 88 | 79 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-grid { |
| 89 | 80 | display: grid; |
| 90 | - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| 81 | + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| 91 | 82 | gap: 2rem; |
| 83 | + padding: 2rem; | |
| 92 | 84 | max-width: 1400px; |
| 93 | 85 | margin: auto; |
| 94 | 86 | } |
| 95 | 87 | |
| @@ -96,17 +88,15 @@ | ||
| 96 | 88 | /* Addon Cards */ |
| 97 | 89 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-card { |
| 98 | 90 | background: white; |
| 99 | 91 | border-radius: 16px; |
| 100 | - padding: 1.75rem; | |
| 92 | + padding: 1.5rem; | |
| 101 | 93 | box-shadow: 0 8px 32px rgba(0,0,0,0.05); |
| 102 | 94 | border: 1px solid rgba(0,0,0,0.1); |
| 103 | 95 | transition: transform 0.3s ease, box-shadow 0.3s ease; |
| 104 | 96 | position: relative; |
| 105 | 97 | overflow: hidden; |
| 106 | - height: 100%; | |
| 107 | - display: flex; | |
| 108 | - flex-direction: column; | |
| 98 | + max-width: 400px; | |
| 109 | 99 | } |
| 110 | 100 | |
| 111 | 101 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-card:hover { |
| 112 | 102 | transform: translateY(-5px); |
| @@ -163,35 +153,15 @@ | ||
| 163 | 153 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| 164 | 154 | } |
| 165 | 155 | |
| 166 | 156 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-description { |
| 167 | - color: #444; | |
| 157 | + color: #666; | |
| 168 | 158 | margin: 0 0 1.5rem; |
| 169 | 159 | line-height: 1.6; |
| 160 | + min-height: 4.8rem; | |
| 170 | 161 | font-size: 1rem; |
| 171 | - font-weight: 500; | |
| 172 | 162 | } |
| 173 | 163 | |
| 174 | -/* Benefits List */ | |
| 175 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-benefits-list { | |
| 176 | - margin: 0 0 1.5rem; | |
| 177 | - padding: 0; | |
| 178 | -} | |
| 179 | - | |
| 180 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-benefit-item { | |
| 181 | - display: flex; | |
| 182 | - align-items: center; | |
| 183 | - margin-bottom: 0.75rem; | |
| 184 | - color: #555; | |
| 185 | - font-size: 0.95rem; | |
| 186 | -} | |
| 187 | - | |
| 188 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-benefit-icon { | |
| 189 | - color: #7873f5; | |
| 190 | - margin-right: 0.5rem; | |
| 191 | - font-weight: bold; | |
| 192 | -} | |
| 193 | - | |
| 194 | 164 | /* Addon Footer */ |
| 195 | 165 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { |
| 196 | 166 | display: flex; |
| 197 | 167 | justify-content: space-between; |
| @@ -197,9 +167,8 @@ | ||
| 197 | 167 | justify-content: space-between; |
| 198 | 168 | align-items: center; |
| 199 | 169 | padding-top: 1.5rem; |
| 200 | 170 | border-top: 1px solid rgba(0,0,0,0.1); |
| 201 | - margin-top: auto; | |
| 202 | 171 | } |
| 203 | 172 | |
| 204 | 173 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator { |
| 205 | 174 | font-size: 0.9rem; |
| @@ -206,26 +175,15 @@ | ||
| 206 | 175 | padding: 0.25rem 0.75rem; |
| 207 | 176 | border-radius: 20px; |
| 208 | 177 | background: #f0f0f0; |
| 209 | 178 | color: #666; |
| 210 | - font-weight: 500; | |
| 211 | 179 | } |
| 212 | 180 | |
| 213 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.active { | |
| 181 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.installed { | |
| 214 | 182 | background: #e8f5e9; |
| 215 | 183 | color: #2e7d32; |
| 216 | 184 | } |
| 217 | 185 | |
| 218 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.inactive { | |
| 219 | - background: #fff3e0; | |
| 220 | - color: #ef6c00; | |
| 221 | -} | |
| 222 | - | |
| 223 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.not-installed { | |
| 224 | - background: #f0f0f0; | |
| 225 | - color: #666; | |
| 226 | -} | |
| 227 | - | |
| 228 | 186 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-action-button { |
| 229 | 187 | background: linear-gradient(135deg, #fa73e6, #7873f5); |
| 230 | 188 | color: white; |
| 231 | 189 | border: none; |
| @@ -252,58 +210,25 @@ | ||
| 252 | 210 | box-shadow: 0 4px 12px rgba(250, 115, 230, 0.3); |
| 253 | 211 | color: white; |
| 254 | 212 | } |
| 255 | 213 | |
| 256 | -/* Call to Action Section */ | |
| 257 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-cta-section { | |
| 258 | - background: linear-gradient(135deg, rgba(250, 115, 230, 0.1), rgba(120, 115, 245, 0.1)); | |
| 259 | - text-align: center; | |
| 260 | - padding: 3rem 2rem; | |
| 261 | - margin: 3rem auto 2rem; | |
| 262 | - border-radius: 16px; | |
| 263 | - max-width: 900px; | |
| 214 | +/* Add these to your existing CSS */ | |
| 215 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.active { | |
| 216 | + background: #e8f5e9; | |
| 217 | + color: #2e7d32; | |
| 264 | 218 | } |
| 265 | 219 | |
| 266 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-cta-section h2 { | |
| 267 | - font-size: 2rem; | |
| 268 | - margin: 0 0 1rem; | |
| 269 | - color: #212121; | |
| 220 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.inactive { | |
| 221 | + background: #fff3e0; | |
| 222 | + color: #ef6c00; | |
| 270 | 223 | } |
| 271 | 224 | |
| 272 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-cta-section p { | |
| 273 | - color: #555; | |
| 274 | - font-size: 1.1rem; | |
| 275 | - margin: 0 0 2rem; | |
| 225 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.not-installed { | |
| 226 | + background: #f0f0f0; | |
| 227 | + color: #666; | |
| 276 | 228 | } |
| 277 | 229 | |
| 278 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-cta-button { | |
| 279 | - background: linear-gradient(135deg, #fa73e6, #7873f5); | |
| 280 | - color: white; | |
| 281 | - border: none; | |
| 282 | - padding: 1rem 2.5rem; | |
| 283 | - border-radius: 8px; | |
| 284 | - font-size: 1.1rem; | |
| 285 | - font-weight: 600; | |
| 286 | - text-decoration: none; | |
| 287 | - display: inline-block; | |
| 288 | - text-transform: uppercase; | |
| 289 | - letter-spacing: 0.5px; | |
| 290 | - transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| 291 | -} | |
| 292 | - | |
| 293 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-cta-button:hover { | |
| 294 | - transform: translateY(-3px); | |
| 295 | - box-shadow: 0 8px 20px rgba(250, 115, 230, 0.4); | |
| 296 | - color: white; | |
| 297 | -} | |
| 298 | - | |
| 299 | 230 | /* Responsive Design */ |
| 300 | -@media (max-width: 1200px) { | |
| 301 | - body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-grid { | |
| 302 | - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| 303 | - } | |
| 304 | -} | |
| 305 | - | |
| 306 | 231 | @media (max-width: 768px) { |
| 307 | 232 | body.wp-admin .wrap.mxchat-addons-wrapper { |
| 308 | 233 | padding: 0; |
| 309 | 234 | } |
| @@ -313,10 +238,9 @@ | ||
| 313 | 238 | margin-bottom: 1rem; |
| 314 | 239 | } |
| 315 | 240 | |
| 316 | 241 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-grid { |
| 317 | - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| 318 | - padding: 0 1rem; | |
| 242 | + grid-template-columns: 1fr; | |
| 319 | 243 | } |
| 320 | 244 | |
| 321 | 245 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-hero { |
| 322 | 246 | padding: 2.5rem 1.5rem; |
| @@ -325,12 +249,17 @@ | ||
| 325 | 249 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-hero-subtitle { |
| 326 | 250 | font-size: 1.1rem; |
| 327 | 251 | padding: 0 1rem; |
| 328 | 252 | } |
| 253 | + | |
| 254 | + .auto-fold #wpcontent { | |
| 255 | + margin-left: 0; | |
| 256 | + padding-left: 0px; | |
| 257 | + } | |
| 329 | 258 | } |
| 330 | 259 | |
| 331 | 260 | @media (max-width: 480px) { |
| 332 | - body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { | |
| 261 | + body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { | |
| 333 | 262 | flex-direction: column; |
| 334 | 263 | gap: 1rem; |
| 335 | 264 | align-items: stretch; |
| 336 | 265 | } |
| @@ -340,66 +269,6 @@ | ||
| 340 | 269 | text-align: center; |
| 341 | 270 | padding: 0.75rem 1rem; |
| 342 | 271 | white-space: normal; |
| 343 | 272 | height: auto; |
| 344 | - } | |
| 345 | - | |
| 346 | - body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-grid { | |
| 347 | - grid-template-columns: 1fr; | |
| 348 | - } | |
| 349 | -} | |
| 350 | - | |
| 351 | -/* Deprecated addon styling */ | |
| 352 | -.mxchat-addon-card.deprecated { | |
| 353 | - opacity: 0.8; | |
| 354 | - border: 2px dashed #ccc; | |
| 355 | -} | |
| 356 | - | |
| 357 | -.mxchat-addon-card.deprecated .mxchat-addon-badge { | |
| 358 | - background: #666; | |
| 359 | - color: white; | |
| 360 | -} | |
| 361 | - | |
| 362 | -.mxchat-addon-card.deprecated .mxchat-addon-title { | |
| 363 | - color: #666; | |
| 364 | -} | |
| 365 | - | |
| 366 | -.mxchat-status-indicator.deprecated { | |
| 367 | - background: #e8f5e8; | |
| 368 | - color: #2d5a2d; | |
| 369 | - border: 1px solid #4caf50; | |
| 370 | -} | |
| 371 | - | |
| 372 | -.mxchat-action-button.deprecated { | |
| 373 | - background: #4caf50; | |
| 374 | - color: white; | |
| 375 | -} | |
| 376 | - | |
| 377 | -.mxchat-action-button.deprecated:hover { | |
| 378 | - background: #45a049; | |
| 379 | -} | |
| 380 | - | |
| 381 | -/* Fix for overlap issues */ | |
| 382 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-card { | |
| 383 | - box-sizing: border-box; | |
| 384 | - min-height: 330px; | |
| 385 | -} | |
| 386 | - | |
| 387 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-benefits-list { | |
| 388 | - flex-grow: 1; | |
| 389 | -} | |
| 390 | - | |
| 391 | -/* Fix for WordPress Admin Panel */ | |
| 392 | -.auto-fold #wpcontent { | |
| 393 | - padding-left: 0; | |
| 394 | -} | |
| 395 | - | |
| 396 | -#wpbody { | |
| 397 | - padding-top: 0; | |
| 398 | -} | |
| 399 | - | |
| 400 | -/* Fix for Firefox */ | |
| 401 | -@-moz-document url-prefix() { | |
| 402 | - body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-gradient-text { | |
| 403 | - background-clip: text; | |
| 404 | 273 | } |
| 405 | 274 | } |
