| @@ -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); |
| @@ -129,9 +119,9 @@ | ||
| 129 | 119 | } |
| 130 | 120 | |
| 131 | 121 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-badge { |
| 132 | 122 | position: absolute; |
| 133 | - top: 30px; | |
| 123 | + top: 40px; | |
| 134 | 124 | right: -35px; |
| 135 | 125 | background: #212121; |
| 136 | 126 | color: white; |
| 137 | 127 | padding: 0.25rem 2rem; |
| @@ -147,12 +137,8 @@ | ||
| 147 | 137 | |
| 148 | 138 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-content { |
| 149 | 139 | position: relative; |
| 150 | 140 | z-index: 1; |
| 151 | - display: flex; | |
| 152 | - flex-direction: column; | |
| 153 | - height: 100%; | |
| 154 | - justify-content: space-between; | |
| 155 | 141 | } |
| 156 | 142 | |
| 157 | 143 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-title { |
| 158 | 144 | color: #212121; |
| @@ -163,35 +149,15 @@ | ||
| 163 | 149 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| 164 | 150 | } |
| 165 | 151 | |
| 166 | 152 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-description { |
| 167 | - color: #444; | |
| 153 | + color: #666; | |
| 168 | 154 | margin: 0 0 1.5rem; |
| 169 | 155 | line-height: 1.6; |
| 156 | + min-height: 4.8rem; | |
| 170 | 157 | font-size: 1rem; |
| 171 | - font-weight: 500; | |
| 172 | 158 | } |
| 173 | 159 | |
| 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 | 160 | /* Addon Footer */ |
| 195 | 161 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { |
| 196 | 162 | display: flex; |
| 197 | 163 | justify-content: space-between; |
| @@ -197,9 +163,8 @@ | ||
| 197 | 163 | justify-content: space-between; |
| 198 | 164 | align-items: center; |
| 199 | 165 | padding-top: 1.5rem; |
| 200 | 166 | border-top: 1px solid rgba(0,0,0,0.1); |
| 201 | - margin-top: auto; | |
| 202 | 167 | } |
| 203 | 168 | |
| 204 | 169 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator { |
| 205 | 170 | font-size: 0.9rem; |
| @@ -206,26 +171,15 @@ | ||
| 206 | 171 | padding: 0.25rem 0.75rem; |
| 207 | 172 | border-radius: 20px; |
| 208 | 173 | background: #f0f0f0; |
| 209 | 174 | color: #666; |
| 210 | - font-weight: 500; | |
| 211 | 175 | } |
| 212 | 176 | |
| 213 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.active { | |
| 177 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.installed { | |
| 214 | 178 | background: #e8f5e9; |
| 215 | 179 | color: #2e7d32; |
| 216 | 180 | } |
| 217 | 181 | |
| 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 | 182 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-action-button { |
| 229 | 183 | background: linear-gradient(135deg, #fa73e6, #7873f5); |
| 230 | 184 | color: white; |
| 231 | 185 | border: none; |
| @@ -252,58 +206,25 @@ | ||
| 252 | 206 | box-shadow: 0 4px 12px rgba(250, 115, 230, 0.3); |
| 253 | 207 | color: white; |
| 254 | 208 | } |
| 255 | 209 | |
| 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; | |
| 210 | +/* Add these to your existing CSS */ | |
| 211 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.active { | |
| 212 | + background: #e8f5e9; | |
| 213 | + color: #2e7d32; | |
| 264 | 214 | } |
| 265 | 215 | |
| 266 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-cta-section h2 { | |
| 267 | - font-size: 2rem; | |
| 268 | - margin: 0 0 1rem; | |
| 269 | - color: #212121; | |
| 216 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.inactive { | |
| 217 | + background: #fff3e0; | |
| 218 | + color: #ef6c00; | |
| 270 | 219 | } |
| 271 | 220 | |
| 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; | |
| 221 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.not-installed { | |
| 222 | + background: #f0f0f0; | |
| 223 | + color: #666; | |
| 276 | 224 | } |
| 277 | 225 | |
| 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 | 226 | /* 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 | 227 | @media (max-width: 768px) { |
| 307 | 228 | body.wp-admin .wrap.mxchat-addons-wrapper { |
| 308 | 229 | padding: 0; |
| 309 | 230 | } |
| @@ -313,10 +234,9 @@ | ||
| 313 | 234 | margin-bottom: 1rem; |
| 314 | 235 | } |
| 315 | 236 | |
| 316 | 237 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-grid { |
| 317 | - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| 318 | - padding: 0 1rem; | |
| 238 | + grid-template-columns: 1fr; | |
| 319 | 239 | } |
| 320 | 240 | |
| 321 | 241 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-hero { |
| 322 | 242 | padding: 2.5rem 1.5rem; |
| @@ -325,12 +245,17 @@ | ||
| 325 | 245 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-hero-subtitle { |
| 326 | 246 | font-size: 1.1rem; |
| 327 | 247 | padding: 0 1rem; |
| 328 | 248 | } |
| 249 | + | |
| 250 | + .auto-fold #wpcontent { | |
| 251 | + margin-left: 0; | |
| 252 | + padding-left: 0px; | |
| 253 | + } | |
| 329 | 254 | } |
| 330 | 255 | |
| 331 | 256 | @media (max-width: 480px) { |
| 332 | - body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { | |
| 257 | + body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { | |
| 333 | 258 | flex-direction: column; |
| 334 | 259 | gap: 1rem; |
| 335 | 260 | align-items: stretch; |
| 336 | 261 | } |
| @@ -340,66 +265,6 @@ | ||
| 340 | 265 | text-align: center; |
| 341 | 266 | padding: 0.75rem 1rem; |
| 342 | 267 | white-space: normal; |
| 343 | 268 | 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 | 269 | } |
| 405 | 270 | } |
