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

-81

frontend/src/components/dashboard/AccountOverview.svelte

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

-255

frontend/src/components/dashboard/CommsContent.svelte

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

-147

frontend/src/components/dashboard/InviteCodesContent.svelte

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

-60

frontend/src/components/dashboard/MigrationContent.svelte

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

-419

frontend/src/routes/Dashboard.svelte

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

Configure Feed

Configure Feed