| @@ -6,8 +6,9 @@ | ||
| 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; | |
| 10 | 11 | } |
| 11 | 12 | |
| 12 | 13 | /* Hero Section */ |
| 13 | 14 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-hero { |
| @@ -17,8 +18,9 @@ | ||
| 17 | 18 | background: #212121; |
| 18 | 19 | border-bottom: 4px solid transparent; |
| 19 | 20 | border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1); |
| 20 | 21 | border-image-slice: 1; |
| 22 | + margin-bottom: 2rem; | |
| 21 | 23 | } |
| 22 | 24 | |
| 23 | 25 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-hero::before { |
| 24 | 26 | content: ''; |
| @@ -67,9 +69,9 @@ | ||
| 67 | 69 | |
| 68 | 70 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-hero-subtitle { |
| 69 | 71 | font-size: 1.25rem; |
| 70 | 72 | color: rgba(255, 255, 255, 0.9); |
| 71 | - max-width: 600px; | |
| 73 | + max-width: 700px; | |
| 72 | 74 | margin: 0 auto; |
| 73 | 75 | position: relative; |
| 74 | 76 | z-index: 2; |
| 75 | 77 | line-height: 1.6; |
| @@ -74,14 +76,20 @@ | ||
| 74 | 76 | z-index: 2; |
| 75 | 77 | line-height: 1.6; |
| 76 | 78 | } |
| 77 | 79 | |
| 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 | + | |
| 78 | 87 | /* Addons Grid */ |
| 79 | 88 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-grid { |
| 80 | 89 | display: grid; |
| 81 | - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| 90 | + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| 82 | 91 | gap: 2rem; |
| 83 | - padding: 2rem; | |
| 84 | 92 | max-width: 1400px; |
| 85 | 93 | margin: auto; |
| 86 | 94 | } |
| 87 | 95 | |
| @@ -88,15 +96,17 @@ | ||
| 88 | 96 | /* Addon Cards */ |
| 89 | 97 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-card { |
| 90 | 98 | background: white; |
| 91 | 99 | border-radius: 16px; |
| 92 | - padding: 1.5rem; | |
| 100 | + padding: 1.75rem; | |
| 93 | 101 | box-shadow: 0 8px 32px rgba(0,0,0,0.05); |
| 94 | 102 | border: 1px solid rgba(0,0,0,0.1); |
| 95 | 103 | transition: transform 0.3s ease, box-shadow 0.3s ease; |
| 96 | 104 | position: relative; |
| 97 | 105 | overflow: hidden; |
| 98 | - max-width: 400px; | |
| 106 | + height: 100%; | |
| 107 | + display: flex; | |
| 108 | + flex-direction: column; | |
| 99 | 109 | } |
| 100 | 110 | |
| 101 | 111 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-card:hover { |
| 102 | 112 | transform: translateY(-5px); |
| @@ -119,9 +129,9 @@ | ||
| 119 | 129 | } |
| 120 | 130 | |
| 121 | 131 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-badge { |
| 122 | 132 | position: absolute; |
| 123 | - top: 40px; | |
| 133 | + top: 30px; | |
| 124 | 134 | right: -35px; |
| 125 | 135 | background: #212121; |
| 126 | 136 | color: white; |
| 127 | 137 | padding: 0.25rem 2rem; |
| @@ -137,8 +147,12 @@ | ||
| 137 | 147 | |
| 138 | 148 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-content { |
| 139 | 149 | position: relative; |
| 140 | 150 | z-index: 1; |
| 151 | + display: flex; | |
| 152 | + flex-direction: column; | |
| 153 | + height: 100%; | |
| 154 | + justify-content: space-between; | |
| 141 | 155 | } |
| 142 | 156 | |
| 143 | 157 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-title { |
| 144 | 158 | color: #212121; |
| @@ -149,15 +163,35 @@ | ||
| 149 | 163 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| 150 | 164 | } |
| 151 | 165 | |
| 152 | 166 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-description { |
| 153 | - color: #666; | |
| 167 | + color: #444; | |
| 154 | 168 | margin: 0 0 1.5rem; |
| 155 | 169 | line-height: 1.6; |
| 156 | - min-height: 4.8rem; | |
| 157 | 170 | font-size: 1rem; |
| 171 | + font-weight: 500; | |
| 158 | 172 | } |
| 159 | 173 | |
| 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 | + | |
| 160 | 194 | /* Addon Footer */ |
| 161 | 195 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { |
| 162 | 196 | display: flex; |
| 163 | 197 | justify-content: space-between; |
| @@ -163,8 +197,9 @@ | ||
| 163 | 197 | justify-content: space-between; |
| 164 | 198 | align-items: center; |
| 165 | 199 | padding-top: 1.5rem; |
| 166 | 200 | border-top: 1px solid rgba(0,0,0,0.1); |
| 201 | + margin-top: auto; | |
| 167 | 202 | } |
| 168 | 203 | |
| 169 | 204 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator { |
| 170 | 205 | font-size: 0.9rem; |
| @@ -171,15 +206,26 @@ | ||
| 171 | 206 | padding: 0.25rem 0.75rem; |
| 172 | 207 | border-radius: 20px; |
| 173 | 208 | background: #f0f0f0; |
| 174 | 209 | color: #666; |
| 210 | + font-weight: 500; | |
| 175 | 211 | } |
| 176 | 212 | |
| 177 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.installed { | |
| 213 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.active { | |
| 178 | 214 | background: #e8f5e9; |
| 179 | 215 | color: #2e7d32; |
| 180 | 216 | } |
| 181 | 217 | |
| 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 | + | |
| 182 | 228 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-action-button { |
| 183 | 229 | background: linear-gradient(135deg, #fa73e6, #7873f5); |
| 184 | 230 | color: white; |
| 185 | 231 | border: none; |
| @@ -206,25 +252,58 @@ | ||
| 206 | 252 | box-shadow: 0 4px 12px rgba(250, 115, 230, 0.3); |
| 207 | 253 | color: white; |
| 208 | 254 | } |
| 209 | 255 | |
| 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; | |
| 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 | 264 | } |
| 215 | 265 | |
| 216 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.inactive { | |
| 217 | - background: #fff3e0; | |
| 218 | - color: #ef6c00; | |
| 266 | +body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-cta-section h2 { | |
| 267 | + font-size: 2rem; | |
| 268 | + margin: 0 0 1rem; | |
| 269 | + color: #212121; | |
| 219 | 270 | } |
| 220 | 271 | |
| 221 | -body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-status-indicator.not-installed { | |
| 222 | - background: #f0f0f0; | |
| 223 | - color: #666; | |
| 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; | |
| 224 | 276 | } |
| 225 | 277 | |
| 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 | + | |
| 226 | 299 | /* 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 | + | |
| 227 | 306 | @media (max-width: 768px) { |
| 228 | 307 | body.wp-admin .wrap.mxchat-addons-wrapper { |
| 229 | 308 | padding: 0; |
| 230 | 309 | } |
| @@ -234,9 +313,10 @@ | ||
| 234 | 313 | margin-bottom: 1rem; |
| 235 | 314 | } |
| 236 | 315 | |
| 237 | 316 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-grid { |
| 238 | - grid-template-columns: 1fr; | |
| 317 | + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| 318 | + padding: 0 1rem; | |
| 239 | 319 | } |
| 240 | 320 | |
| 241 | 321 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addons-hero { |
| 242 | 322 | padding: 2.5rem 1.5rem; |
| @@ -245,17 +325,12 @@ | ||
| 245 | 325 | body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-hero-subtitle { |
| 246 | 326 | font-size: 1.1rem; |
| 247 | 327 | padding: 0 1rem; |
| 248 | 328 | } |
| 249 | - | |
| 250 | - .auto-fold #wpcontent { | |
| 251 | - margin-left: 0; | |
| 252 | - padding-left: 0px; | |
| 253 | - } | |
| 254 | 329 | } |
| 255 | 330 | |
| 256 | 331 | @media (max-width: 480px) { |
| 257 | - body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { | |
| 332 | + body.wp-admin .wrap.mxchat-addons-wrapper .mxchat-addon-footer { | |
| 258 | 333 | flex-direction: column; |
| 259 | 334 | gap: 1rem; |
| 260 | 335 | align-items: stretch; |
| 261 | 336 | } |
| @@ -265,6 +340,66 @@ | ||
| 265 | 340 | text-align: center; |
| 266 | 341 | padding: 0.75rem 1rem; |
| 267 | 342 | white-space: normal; |
| 268 | 343 | 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; | |
| 269 | 404 | } |
| 270 | 405 | } |
