refactor(frontend): extract dashboard shell and lightweight component styles #58

-81

frontend/src/components/dashboard/AccountOverview.svelte

··· 58 58 {/if} 59 59 </dl> 60 60 </div> 61 61 - 62 62 - <style> 63 63 - .overview { 64 64 - background: var(--bg-secondary); 65 65 - padding: var(--space-6); 66 66 - border-radius: var(--radius-xl); 67 67 - } 68 68 - 69 69 - dl { 70 70 - display: grid; 71 71 - grid-template-columns: auto 1fr; 72 72 - gap: var(--space-3) var(--space-5); 73 73 - margin: 0; 74 74 - } 75 75 - 76 76 - dt { 77 77 - font-weight: var(--font-medium); 78 78 - color: var(--text-secondary); 79 79 - } 80 80 - 81 81 - dd { 82 82 - margin: 0; 83 83 - min-width: 0; 84 84 - } 85 85 - 86 86 - .mono { 87 87 - font-family: var(--font-mono); 88 88 - font-size: var(--text-sm); 89 89 - word-break: break-all; 90 90 - } 91 91 - 92 92 - .badge { 93 93 - display: inline-block; 94 94 - padding: var(--space-1) var(--space-3); 95 95 - border-radius: var(--radius-md); 96 96 - font-size: var(--text-xs); 97 97 - margin-left: var(--space-3); 98 98 - } 99 99 - 100 100 - .badge.success { 101 101 - background: var(--success-bg); 102 102 - color: var(--success-text); 103 103 - } 104 104 - 105 105 - .badge.warning { 106 106 - background: var(--warning-bg); 107 107 - color: var(--warning-text); 108 108 - } 109 109 - 110 110 - .badge.admin { 111 111 - background: var(--accent); 112 112 - color: var(--text-inverse); 113 113 - } 114 114 - 115 115 - .badge.deactivated { 116 116 - background: var(--warning-bg); 117 117 - color: var(--warning-text); 118 118 - border: 1px solid var(--warning-border); 119 119 - } 120 120 - 121 121 - .badge.migrated { 122 122 - background: var(--info-bg, #e0f2fe); 123 123 - color: var(--info-text, #0369a1); 124 124 - border: 1px solid var(--info-border, #7dd3fc); 125 125 - } 126 126 - 127 127 - @media (max-width: 500px) { 128 128 - dl { 129 129 - grid-template-columns: 1fr; 130 130 - gap: var(--space-2); 131 131 - } 132 132 - 133 133 - dt { 134 134 - margin-top: var(--space-3); 135 135 - } 136 136 - 137 137 - dt:first-child { 138 138 - margin-top: 0; 139 139 - } 140 140 - } 141 141 - </style>

-255

frontend/src/components/dashboard/CommsContent.svelte

··· 382 382 </section> 383 383 {/if} 384 384 </div> 385 385 - 386 386 - <style> 387 387 - .comms { 388 388 - max-width: var(--width-lg); 389 389 - } 390 390 - 391 391 - .loading, 392 392 - .empty { 393 393 - color: var(--text-secondary); 394 394 - padding: var(--space-4); 395 395 - } 396 396 - 397 397 - section { 398 398 - background: var(--bg-secondary); 399 399 - padding: var(--space-5); 400 400 - border-radius: var(--radius-lg); 401 401 - margin-bottom: var(--space-5); 402 402 - } 403 403 - 404 404 - section h3 { 405 405 - margin: 0 0 var(--space-4) 0; 406 406 - font-size: var(--text-base); 407 407 - } 408 408 - 409 409 - .channel-options { 410 410 - display: flex; 411 411 - flex-direction: column; 412 412 - gap: var(--space-2); 413 413 - } 414 414 - 415 415 - .channel-option { 416 416 - display: flex; 417 417 - align-items: center; 418 418 - gap: var(--space-3); 419 419 - padding: var(--space-3) var(--space-4); 420 420 - background: var(--bg-card); 421 421 - border: 1px solid var(--border-color); 422 422 - border-radius: var(--radius-md); 423 423 - cursor: pointer; 424 424 - } 425 425 - 426 426 - .channel-option input[type="radio"] { 427 427 - margin: 0; 428 428 - width: 18px; 429 429 - height: 18px; 430 430 - flex-shrink: 0; 431 431 - accent-color: var(--accent); 432 432 - } 433 433 - 434 434 - .channel-option:hover:not(.disabled) { 435 435 - border-color: var(--accent); 436 436 - } 437 437 - 438 438 - .channel-option.disabled, 439 439 - .channel-option.unavailable { 440 440 - opacity: 0.6; 441 441 - cursor: not-allowed; 442 442 - } 443 443 - 444 444 - .channel-info { 445 445 - display: flex; 446 446 - flex-direction: column; 447 447 - gap: var(--space-1); 448 448 - } 449 449 - 450 450 - .channel-name { 451 451 - font-weight: var(--font-medium); 452 452 - } 453 453 - 454 454 - .channel-desc { 455 455 - font-size: var(--text-xs); 456 456 - color: var(--text-secondary); 457 457 - } 458 458 - 459 459 - .channel-hint { 460 460 - font-size: var(--text-xs); 461 461 - color: var(--text-muted); 462 462 - margin-left: auto; 463 463 - } 464 464 - 465 465 - .channel-config { 466 466 - display: flex; 467 467 - flex-direction: column; 468 468 - gap: var(--space-4); 469 469 - } 470 470 - 471 471 - .config-item { 472 472 - display: flex; 473 473 - flex-direction: column; 474 474 - gap: var(--space-2); 475 475 - } 476 476 - 477 477 - .config-header { 478 478 - display: flex; 479 479 - align-items: center; 480 480 - justify-content: space-between; 481 481 - } 482 482 - 483 483 - .config-input { 484 484 - display: flex; 485 485 - gap: var(--space-2); 486 486 - } 487 487 - 488 488 - .config-input input { 489 489 - flex: 1; 490 490 - } 491 491 - 492 492 - input.readonly { 493 493 - background: var(--bg-tertiary); 494 494 - color: var(--text-secondary); 495 495 - } 496 496 - 497 497 - .status { 498 498 - padding: var(--space-1) var(--space-2); 499 499 - border-radius: var(--radius-md); 500 500 - font-size: var(--text-xs); 501 501 - } 502 502 - 503 503 - .status.verified { 504 504 - background: var(--success-bg); 505 505 - color: var(--success-text); 506 506 - } 507 507 - 508 508 - .status.unverified { 509 509 - background: var(--warning-bg); 510 510 - color: var(--warning-text); 511 511 - } 512 512 - 513 513 - .hint { 514 514 - font-size: var(--text-xs); 515 515 - color: var(--text-secondary); 516 516 - margin: 0; 517 517 - } 518 518 - 519 519 - .hint.warning { 520 520 - color: var(--warning-text); 521 521 - } 522 522 - 523 523 - .telegram-verify-prompt { 524 524 - display: flex; 525 525 - flex-direction: column; 526 526 - gap: var(--space-2); 527 527 - padding: var(--space-3) var(--space-4); 528 528 - background: var(--accent-bg, var(--bg-card)); 529 529 - border: 1px solid var(--accent, var(--border-color)); 530 530 - border-radius: var(--radius-md); 531 531 - font-size: var(--text-sm); 532 532 - color: var(--text-primary); 533 533 - } 534 534 - 535 535 - .discord-verify-prompt { 536 536 - display: flex; 537 537 - flex-direction: column; 538 538 - gap: var(--space-2); 539 539 - padding: var(--space-3) var(--space-4); 540 540 - background: var(--accent-bg, var(--bg-card)); 541 541 - border: 1px solid var(--accent, var(--border-color)); 542 542 - border-radius: var(--radius-md); 543 543 - font-size: var(--text-sm); 544 544 - color: var(--text-primary); 545 545 - } 546 546 - 547 547 - .manual-hint { 548 548 - font-size: var(--text-xs); 549 549 - color: var(--text-secondary); 550 550 - } 551 551 - 552 552 - 553 553 - .verify-form { 554 554 - display: flex; 555 555 - flex-direction: column; 556 556 - gap: var(--space-2); 557 557 - } 558 558 - 559 559 - .verify-form button { 560 560 - padding: var(--space-2) var(--space-3); 561 561 - font-size: var(--text-sm); 562 562 - } 563 563 - 564 564 - .actions { 565 565 - margin-bottom: var(--space-5); 566 566 - } 567 567 - 568 568 - .history-section { 569 569 - margin-top: var(--space-6); 570 570 - } 571 571 - 572 572 - .message-list { 573 573 - display: flex; 574 574 - flex-direction: column; 575 575 - gap: var(--space-3); 576 576 - } 577 577 - 578 578 - .message-item { 579 579 - background: var(--bg-card); 580 580 - border: 1px solid var(--border-color); 581 581 - border-radius: var(--radius-md); 582 582 - padding: var(--space-3); 583 583 - } 584 584 - 585 585 - .message-header { 586 586 - display: flex; 587 587 - gap: var(--space-2); 588 588 - align-items: center; 589 589 - margin-bottom: var(--space-2); 590 590 - } 591 591 - 592 592 - .message-type { 593 593 - font-weight: var(--font-medium); 594 594 - font-size: var(--text-sm); 595 595 - } 596 596 - 597 597 - .message-channel { 598 598 - font-size: var(--text-xs); 599 599 - padding: var(--space-1) var(--space-2); 600 600 - background: var(--bg-secondary); 601 601 - border-radius: var(--radius-md); 602 602 - color: var(--text-secondary); 603 603 - } 604 604 - 605 605 - .message-status { 606 606 - font-size: var(--text-xs); 607 607 - padding: var(--space-1) var(--space-2); 608 608 - border-radius: var(--radius-md); 609 609 - margin-left: auto; 610 610 - } 611 611 - 612 612 - .message-status.sent { 613 613 - background: var(--success-bg); 614 614 - color: var(--success-text); 615 615 - } 616 616 - 617 617 - .message-status.failed { 618 618 - background: var(--error-bg); 619 619 - color: var(--error-text); 620 620 - } 621 621 - 622 622 - .message-subject { 623 623 - font-weight: var(--font-medium); 624 624 - font-size: var(--text-sm); 625 625 - margin-bottom: var(--space-1); 626 626 - } 627 627 - 628 628 - .message-body { 629 629 - font-size: var(--text-sm); 630 630 - color: var(--text-secondary); 631 631 - white-space: pre-wrap; 632 632 - } 633 633 - 634 634 - .message-date { 635 635 - font-size: var(--text-xs); 636 636 - color: var(--text-muted); 637 637 - margin-top: var(--space-2); 638 638 - } 639 639 - </style>

-147

frontend/src/components/dashboard/InviteCodesContent.svelte

··· 158 158 {/if} 159 159 </section> 160 160 </div> 161 161 - 162 162 - <style> 163 163 - .invite-codes { 164 164 - max-width: var(--width-lg); 165 165 - } 166 166 - 167 167 - .created-code { 168 168 - padding: var(--space-5); 169 169 - background: var(--success-bg); 170 170 - border: 1px solid var(--success-border); 171 171 - border-radius: var(--radius-xl); 172 172 - margin-bottom: var(--space-6); 173 173 - } 174 174 - 175 175 - .created-code h3 { 176 176 - margin: 0 0 var(--space-4) 0; 177 177 - color: var(--success-text); 178 178 - } 179 179 - 180 180 - .code-display { 181 181 - display: flex; 182 182 - align-items: center; 183 183 - gap: var(--space-4); 184 184 - background: var(--bg-card); 185 185 - padding: var(--space-4); 186 186 - border-radius: var(--radius-md); 187 187 - margin-bottom: var(--space-4); 188 188 - } 189 189 - 190 190 - .code-display code { 191 191 - font-size: var(--text-lg); 192 192 - font-family: var(--font-mono); 193 193 - flex: 1; 194 194 - } 195 195 - 196 196 - .actions { 197 197 - margin-bottom: var(--space-6); 198 198 - } 199 199 - 200 200 - .list-section h2 { 201 201 - font-size: var(--text-lg); 202 202 - margin: 0 0 var(--space-4) 0; 203 203 - } 204 204 - 205 205 - .empty { 206 206 - color: var(--text-secondary); 207 207 - padding: var(--space-6); 208 208 - text-align: center; 209 209 - } 210 210 - 211 211 - .code-list { 212 212 - list-style: none; 213 213 - padding: 0; 214 214 - margin: 0; 215 215 - display: flex; 216 216 - flex-direction: column; 217 217 - gap: var(--space-3); 218 218 - } 219 219 - 220 220 - .code-item { 221 221 - padding: var(--space-4); 222 222 - background: var(--bg-secondary); 223 223 - border: 1px solid var(--border-color); 224 224 - border-radius: var(--radius-lg); 225 225 - } 226 226 - 227 227 - .skeleton-item { 228 228 - pointer-events: none; 229 229 - } 230 230 - 231 231 - .code-item.disabled { 232 232 - opacity: 0.6; 233 233 - } 234 234 - 235 235 - .code-item.used { 236 236 - background: var(--bg-tertiary); 237 237 - } 238 238 - 239 239 - .code-main { 240 240 - display: flex; 241 241 - align-items: center; 242 242 - gap: var(--space-3); 243 243 - margin-bottom: var(--space-2); 244 244 - } 245 245 - 246 246 - .code-value { 247 247 - font-family: var(--font-mono); 248 248 - font-size: var(--text-sm); 249 249 - padding: var(--space-2) var(--space-3); 250 250 - background: var(--bg-card); 251 251 - border-radius: var(--radius-md); 252 252 - } 253 253 - 254 254 - .copy-btn { 255 255 - flex-shrink: 0; 256 256 - } 257 257 - 258 258 - .code-meta { 259 259 - display: flex; 260 260 - gap: var(--space-4); 261 261 - font-size: var(--text-sm); 262 262 - align-items: center; 263 263 - flex-wrap: wrap; 264 264 - } 265 265 - 266 266 - .date { 267 267 - color: var(--text-secondary); 268 268 - } 269 269 - 270 270 - .status { 271 271 - padding: var(--space-1) var(--space-2); 272 272 - border-radius: var(--radius-md); 273 273 - font-size: var(--text-xs); 274 274 - } 275 275 - 276 276 - .status.available { 277 277 - background: var(--success-bg); 278 278 - color: var(--success-text); 279 279 - } 280 280 - 281 281 - .status.used { 282 282 - background: var(--bg-secondary); 283 283 - color: var(--text-secondary); 284 284 - } 285 285 - 286 286 - .status.spent { 287 287 - background: var(--bg-tertiary); 288 288 - color: var(--text-tertiary); 289 289 - } 290 290 - 291 291 - .status.disabled { 292 292 - background: var(--error-bg); 293 293 - color: var(--error-text); 294 294 - } 295 295 - 296 296 - @media (max-width: 500px) { 297 297 - .code-display { 298 298 - flex-direction: column; 299 299 - align-items: stretch; 300 300 - } 301 301 - 302 302 - .code-main { 303 303 - flex-direction: column; 304 304 - align-items: stretch; 305 305 - } 306 306 - } 307 307 - </style>

-60

frontend/src/components/dashboard/MigrationContent.svelte

··· 51 51 </section> 52 52 {/if} 53 53 </div> 54 54 - 55 55 - <style> 56 56 - .migration { 57 57 - max-width: var(--width-md); 58 58 - } 59 59 - 60 60 - section { 61 61 - background: var(--bg-secondary); 62 62 - padding: var(--space-5); 63 63 - border-radius: var(--radius-lg); 64 64 - margin-bottom: var(--space-5); 65 65 - } 66 66 - 67 67 - section h3 { 68 68 - margin: 0 0 var(--space-2) 0; 69 69 - font-size: var(--text-base); 70 70 - } 71 71 - 72 72 - .description { 73 73 - color: var(--text-secondary); 74 74 - font-size: var(--text-sm); 75 75 - margin: 0 0 var(--space-4) 0; 76 76 - } 77 77 - 78 78 - .feature-list { 79 79 - list-style: none; 80 80 - padding: 0; 81 81 - margin: 0 0 var(--space-4) 0; 82 82 - } 83 83 - 84 84 - .feature-list li { 85 85 - padding: var(--space-2) 0; 86 86 - padding-left: var(--space-4); 87 87 - position: relative; 88 88 - font-size: var(--text-sm); 89 89 - color: var(--text-secondary); 90 90 - } 91 91 - 92 92 - .feature-list li::before { 93 93 - content: '✓'; 94 94 - position: absolute; 95 95 - left: 0; 96 96 - color: var(--success-text); 97 97 - } 98 98 - 99 99 - .info-section { 100 100 - background: var(--info-bg, #e0f2fe); 101 101 - border: 1px solid var(--info-border, #7dd3fc); 102 102 - } 103 103 - 104 104 - .info-section h3 { 105 105 - color: var(--info-text, #0369a1); 106 106 - } 107 107 - 108 108 - .info-section p { 109 109 - color: var(--info-text, #0369a1); 110 110 - font-size: var(--text-sm); 111 111 - margin: 0; 112 112 - } 113 113 - </style>

-419

frontend/src/routes/Dashboard.svelte

··· 328 328 </main> 329 329 </div> 330 330 {/if} 331 331 - 332 332 - <style> 333 333 - .dashboard { 334 334 - display: flex; 335 335 - height: 100vh; 336 336 - background: var(--bg-primary); 337 337 - overflow: hidden; 338 338 - } 339 339 - 340 340 - .sidebar { 341 341 - width: 320px; 342 342 - flex-shrink: 0; 343 343 - background: var(--bg-secondary); 344 344 - border-right: 1px solid var(--border-color); 345 345 - display: flex; 346 346 - flex-direction: column; 347 347 - height: 100%; 348 348 - overflow: hidden; 349 349 - } 350 350 - 351 351 - .sidebar-header { 352 352 - padding: var(--space-6); 353 353 - border-bottom: 1px solid var(--border-color); 354 354 - } 355 355 - 356 356 - .sidebar-header h1 { 357 357 - margin: 0; 358 358 - font-size: var(--text-2xl); 359 359 - } 360 360 - 361 361 - .sidebar-subtitle { 362 362 - margin: var(--space-1) 0 var(--space-4) 0; 363 363 - font-size: var(--text-sm); 364 364 - color: var(--text-secondary); 365 365 - } 366 366 - 367 367 - .account-section { 368 368 - display: flex; 369 369 - flex-direction: column; 370 370 - gap: var(--space-3); 371 371 - } 372 372 - 373 373 - .account-dropdown { 374 374 - position: relative; 375 375 - width: 100%; 376 376 - } 377 377 - 378 378 - .account-trigger { 379 379 - display: flex; 380 380 - align-items: center; 381 381 - justify-content: space-between; 382 382 - gap: var(--space-3); 383 383 - width: 100%; 384 384 - padding: var(--space-3) var(--space-4); 385 385 - background: var(--bg-card); 386 386 - border: 1px solid var(--border-color); 387 387 - border-radius: var(--radius-lg); 388 388 - cursor: pointer; 389 389 - color: var(--text-primary); 390 390 - text-align: left; 391 391 - } 392 392 - 393 393 - .account-trigger .account-handle { 394 394 - font-weight: var(--font-medium); 395 395 - overflow: hidden; 396 396 - text-overflow: ellipsis; 397 397 - white-space: nowrap; 398 398 - } 399 399 - 400 400 - .account-trigger:hover:not(:disabled) { 401 401 - border-color: var(--accent); 402 402 - background: var(--bg-tertiary); 403 403 - } 404 404 - 405 405 - .account-trigger:disabled { 406 406 - opacity: 0.6; 407 407 - cursor: not-allowed; 408 408 - } 409 409 - 410 410 - .dropdown-arrow { 411 411 - font-size: 0.625rem; 412 412 - color: var(--text-secondary); 413 413 - flex-shrink: 0; 414 414 - } 415 415 - 416 416 - .dropdown-menu { 417 417 - position: absolute; 418 418 - top: 100%; 419 419 - left: 0; 420 420 - right: 0; 421 421 - margin-top: var(--space-2); 422 422 - background: var(--bg-card); 423 423 - border: 1px solid var(--border-color); 424 424 - border-radius: var(--radius-xl); 425 425 - box-shadow: var(--shadow-lg); 426 426 - z-index: 100; 427 427 - overflow: hidden; 428 428 - } 429 429 - 430 430 - .account-details { 431 431 - display: flex; 432 432 - flex-direction: column; 433 433 - gap: var(--space-2); 434 434 - padding: 0 var(--space-1); 435 435 - } 436 436 - 437 437 - .account-details .account-did { 438 438 - font-size: var(--text-xs); 439 439 - font-family: var(--font-mono); 440 440 - color: var(--text-muted); 441 441 - overflow: hidden; 442 442 - text-overflow: ellipsis; 443 443 - white-space: nowrap; 444 444 - } 445 445 - 446 446 - .account-status { 447 447 - display: flex; 448 448 - gap: var(--space-2); 449 449 - flex-wrap: wrap; 450 450 - } 451 451 - 452 452 - .badge { 453 453 - display: inline-block; 454 454 - padding: var(--space-1) var(--space-2); 455 455 - border-radius: var(--radius-md); 456 456 - font-size: var(--text-xs); 457 457 - font-weight: var(--font-medium); 458 458 - } 459 459 - 460 460 - .badge.admin { 461 461 - background: var(--accent); 462 462 - color: var(--text-inverse); 463 463 - } 464 464 - 465 465 - .badge.success { 466 466 - background: var(--success-bg); 467 467 - color: var(--success-text); 468 468 - } 469 469 - 470 470 - .badge.warning { 471 471 - background: var(--warning-bg); 472 472 - color: var(--warning-text); 473 473 - } 474 474 - 475 475 - .dropdown-section { 476 476 - padding: var(--space-3) 0; 477 477 - } 478 478 - 479 479 - .dropdown-label { 480 480 - display: block; 481 481 - padding: var(--space-2) var(--space-5); 482 482 - font-size: var(--text-xs); 483 483 - color: var(--text-muted); 484 484 - text-transform: uppercase; 485 485 - letter-spacing: 0.05em; 486 486 - } 487 487 - 488 488 - .dropdown-item { 489 489 - display: block; 490 490 - width: 100%; 491 491 - padding: var(--space-3) var(--space-5); 492 492 - background: transparent; 493 493 - border: none; 494 494 - text-align: left; 495 495 - cursor: pointer; 496 496 - color: var(--text-primary); 497 497 - font-size: var(--text-sm); 498 498 - } 499 499 - 500 500 - .dropdown-item:hover { 501 501 - background: var(--bg-secondary); 502 502 - } 503 503 - 504 504 - .dropdown-item.logout-item { 505 505 - color: var(--error-text); 506 506 - } 507 507 - 508 508 - .dropdown-divider { 509 509 - height: 1px; 510 510 - background: var(--border-color); 511 511 - } 512 512 - 513 513 - .status-banner { 514 514 - margin: var(--space-4); 515 515 - padding: var(--space-4); 516 516 - border-radius: var(--radius-lg); 517 517 - } 518 518 - 519 519 - .status-banner.deactivated { 520 520 - background: var(--warning-bg); 521 521 - border: 1px solid var(--warning-border); 522 522 - } 523 523 - 524 524 - .status-banner.deactivated strong { 525 525 - color: var(--warning-text); 526 526 - } 527 527 - 528 528 - .status-banner.deactivated p { 529 529 - margin: var(--space-2) 0 0 0; 530 530 - color: var(--warning-text); 531 531 - font-size: var(--text-sm); 532 532 - } 533 533 - 534 534 - .status-banner.migrated { 535 535 - background: var(--info-bg, #e0f2fe); 536 536 - border: 1px solid var(--info-border, #7dd3fc); 537 537 - } 538 538 - 539 539 - .status-banner.migrated strong { 540 540 - color: var(--info-text, #0369a1); 541 541 - } 542 542 - 543 543 - .status-banner.migrated p { 544 544 - margin: var(--space-2) 0 0 0; 545 545 - color: var(--info-text, #0369a1); 546 546 - font-size: var(--text-sm); 547 547 - } 548 548 - 549 549 - .nav-list { 550 550 - flex: 1; 551 551 - padding: var(--space-2); 552 552 - overflow-y: auto; 553 553 - } 554 554 - 555 555 - .nav-item { 556 556 - display: flex; 557 557 - align-items: center; 558 558 - justify-content: space-between; 559 559 - width: 100%; 560 560 - padding: var(--space-4); 561 561 - background: transparent; 562 562 - border: none; 563 563 - border-radius: var(--radius-lg); 564 564 - cursor: pointer; 565 565 - color: var(--text-primary); 566 566 - font-size: var(--text-base); 567 567 - text-align: left; 568 568 - transition: background var(--transition-fast), color var(--transition-fast); 569 569 - } 570 570 - 571 571 - .nav-item:hover:not(.active) { 572 572 - background: var(--bg-tertiary); 573 573 - color: var(--accent); 574 574 - } 575 575 - 576 576 - .nav-item:hover:not(.active) .nav-chevron { 577 577 - color: var(--accent); 578 578 - } 579 579 - 580 580 - .nav-item.active { 581 581 - background: var(--accent); 582 582 - color: var(--text-inverse); 583 583 - } 584 584 - 585 585 - .nav-item.active .nav-chevron { 586 586 - color: var(--text-inverse); 587 587 - } 588 588 - 589 589 - .nav-item.highlight-admin { 590 590 - color: var(--accent); 591 591 - } 592 592 - 593 593 - .nav-item.highlight-admin.active { 594 594 - background: var(--accent); 595 595 - color: var(--text-inverse); 596 596 - } 597 597 - 598 598 - .nav-item.highlight-migrated { 599 599 - color: var(--info-text, #0369a1); 600 600 - } 601 601 - 602 602 - .nav-item.highlight-migrated.active { 603 603 - background: var(--info-text, #0369a1); 604 604 - color: var(--text-inverse); 605 605 - } 606 606 - 607 607 - .nav-item.highlight-did-web { 608 608 - color: var(--accent); 609 609 - } 610 610 - 611 611 - .nav-item.highlight-did-web.active { 612 612 - background: var(--accent); 613 613 - color: var(--text-inverse); 614 614 - } 615 615 - 616 616 - .nav-chevron { 617 617 - display: none; 618 618 - } 619 619 - 620 620 - .content { 621 621 - flex: 1; 622 622 - display: flex; 623 623 - flex-direction: column; 624 624 - min-width: 0; 625 625 - height: 100%; 626 626 - overflow: hidden; 627 627 - background: var(--bg-primary); 628 628 - } 629 629 - 630 630 - .content-header { 631 631 - display: none; 632 632 - padding: var(--space-4) var(--space-6); 633 633 - border-bottom: 1px solid var(--border-color); 634 634 - background: var(--bg-secondary); 635 635 - } 636 636 - 637 637 - .content-header h2 { 638 638 - margin: 0; 639 639 - font-size: var(--text-lg); 640 640 - } 641 641 - 642 642 - .back-button { 643 643 - display: flex; 644 644 - align-items: center; 645 645 - gap: var(--space-1); 646 646 - padding: 0; 647 647 - background: transparent; 648 648 - border: none; 649 649 - color: var(--accent); 650 650 - font-size: var(--text-base); 651 651 - cursor: pointer; 652 652 - margin-bottom: var(--space-2); 653 653 - } 654 654 - 655 655 - .back-arrow { 656 656 - font-size: var(--text-xl); 657 657 - font-weight: 300; 658 658 - } 659 659 - 660 660 - .content-body { 661 661 - flex: 1; 662 662 - padding: var(--space-6); 663 663 - overflow-y: auto; 664 664 - display: flex; 665 665 - flex-direction: column; 666 666 - align-items: center; 667 667 - } 668 668 - 669 669 - .content-body > :global(*) { 670 670 - width: 100%; 671 671 - } 672 672 - 673 673 - .loading-state .sidebar { 674 674 - opacity: 0.7; 675 675 - } 676 676 - 677 677 - .skeleton-header { 678 678 - height: 100px; 679 679 - background: var(--bg-tertiary); 680 680 - border-radius: var(--radius-lg); 681 681 - margin: var(--space-6); 682 682 - animation: skeleton-pulse 1.5s ease-in-out infinite; 683 683 - } 684 684 - 685 685 - .skeleton-nav-item { 686 686 - height: 48px; 687 687 - background: var(--bg-tertiary); 688 688 - border-radius: var(--radius-lg); 689 689 - margin: var(--space-2) var(--space-2); 690 690 - animation: skeleton-pulse 1.5s ease-in-out infinite; 691 691 - } 692 692 - 693 693 - .skeleton-content { 694 694 - height: 300px; 695 695 - background: var(--bg-secondary); 696 696 - border-radius: var(--radius-xl); 697 697 - margin: var(--space-6); 698 698 - animation: skeleton-pulse 1.5s ease-in-out infinite; 699 699 - } 700 700 - 701 701 - @media (max-width: 768px) { 702 702 - .dashboard { 703 703 - flex-direction: column; 704 704 - height: 100vh; 705 705 - } 706 706 - 707 707 - .sidebar { 708 708 - width: 100%; 709 709 - height: auto; 710 710 - flex: 1; 711 711 - border-right: none; 712 712 - border-bottom: 1px solid var(--border-color); 713 713 - overflow-y: auto; 714 714 - } 715 715 - 716 716 - .sidebar.hidden-mobile { 717 717 - display: none; 718 718 - } 719 719 - 720 720 - .content { 721 721 - display: flex; 722 722 - flex: 1; 723 723 - height: auto; 724 724 - } 725 725 - 726 726 - .content.hidden-mobile { 727 727 - display: none; 728 728 - } 729 729 - 730 730 - .content-header { 731 731 - display: block; 732 732 - } 733 733 - } 734 734 - 735 735 - @media (min-width: 769px) { 736 736 - .back-button { 737 737 - display: none; 738 738 - } 739 739 - 740 740 - .content-header { 741 741 - display: block; 742 742 - padding: var(--space-6); 743 743 - } 744 744 - 745 745 - .content-header h2 { 746 746 - font-size: var(--text-xl); 747 747 - } 748 748 - } 749 749 - </style>