refactor(frontend): extract admin, settings, app passwords styles #60

+5 -408

frontend/src/components/dashboard/AdminContent.svelte

··· 269 269 <section class="config-section"> 270 270 <h3>{$_('admin.serverConfig')}</h3> 271 271 <form onsubmit={saveServerConfig}> 272 272 - <div class="field"> 272 272 + <div> 273 273 <label for="server-name">{$_('admin.serverName')}</label> 274 274 <input 275 275 id="server-name" ··· 281 281 <span class="field-help">{$_('admin.serverNameHelp')}</span> 282 282 </div> 283 283 284 284 - <div class="field"> 284 284 + <div> 285 285 <label for="server-logo">{$_('admin.serverLogo')}</label> 286 286 <div class="logo-section"> 287 287 {#if logoPreview} ··· 341 341 <section class="stats-section"> 342 342 <div class="section-header-row"> 343 343 <h3>{$_('admin.serverStats')}</h3> 344 344 - <button type="button" class="refresh-btn" onclick={loadStats} disabled={loading}> 344 344 + <button type="button" class="sm tertiary" onclick={loadStats} disabled={loading}> 345 345 {$_('admin.refreshStats')} 346 346 </button> 347 347 </div> ··· 423 423 </div> 424 424 425 425 {#if selectedUser} 426 426 - <div class="modal-overlay" onclick={closeUserDetail} onkeydown={(e) => e.key === 'Escape' && closeUserDetail()} role="presentation"> 426 426 + <div class="modal-backdrop" onclick={closeUserDetail} onkeydown={(e) => e.key === 'Escape' && closeUserDetail()} role="presentation"> 427 427 <div class="modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="dialog" aria-modal="true" tabindex="-1"> 428 428 <div class="modal-header"> 429 429 <h2>{$_('admin.userDetails')}</h2> ··· 433 433 {#if userDetailLoading} 434 434 <div class="loading">{$_('common.loading')}</div> 435 435 {/if} 436 436 - <dl class="user-details"> 436 436 + <dl class="definition-list"> 437 437 <dt>{$_('admin.handle')}</dt> 438 438 <dd>@{selectedUser.handle}</dd> 439 439 <dt>{$_('admin.did')}</dt> ··· 480 480 </div> 481 481 </div> 482 482 {/if} 483 483 - 484 484 - <style> 485 485 - .admin { 486 486 - max-width: var(--width-lg); 487 487 - } 488 488 - 489 489 - section { 490 490 - background: var(--bg-secondary); 491 491 - padding: var(--space-5); 492 492 - border-radius: var(--radius-lg); 493 493 - margin-bottom: var(--space-5); 494 494 - } 495 495 - 496 496 - section h3 { 497 497 - margin: 0 0 var(--space-4) 0; 498 498 - font-size: var(--text-base); 499 499 - } 500 500 - 501 501 - .section-header-row { 502 502 - display: flex; 503 503 - justify-content: space-between; 504 504 - align-items: center; 505 505 - margin-bottom: var(--space-4); 506 506 - } 507 507 - 508 508 - .section-header-row h3 { 509 509 - margin: 0; 510 510 - } 511 511 - 512 512 - .refresh-btn { 513 513 - padding: var(--space-2) var(--space-3); 514 514 - font-size: var(--text-sm); 515 515 - background: transparent; 516 516 - border: 1px solid var(--border-color); 517 517 - border-radius: var(--radius-md); 518 518 - cursor: pointer; 519 519 - color: var(--text-primary); 520 520 - } 521 521 - 522 522 - .refresh-btn:hover:not(:disabled) { 523 523 - border-color: var(--accent); 524 524 - } 525 525 - 526 526 - .refresh-btn:disabled { 527 527 - opacity: 0.6; 528 528 - cursor: not-allowed; 529 529 - } 530 530 - 531 531 - .loading, 532 532 - .empty { 533 533 - color: var(--text-secondary); 534 534 - padding: var(--space-4); 535 535 - text-align: center; 536 536 - } 537 537 - 538 538 - .stats-grid { 539 539 - display: grid; 540 540 - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 541 541 - gap: var(--space-4); 542 542 - } 543 543 - 544 544 - .stat-item { 545 545 - background: var(--bg-card); 546 546 - padding: var(--space-4); 547 547 - border-radius: var(--radius-md); 548 548 - text-align: center; 549 549 - } 550 550 - 551 551 - .stat-value { 552 552 - display: block; 553 553 - font-size: var(--text-2xl); 554 554 - font-weight: var(--font-bold); 555 555 - color: var(--accent); 556 556 - } 557 557 - 558 558 - .stat-label { 559 559 - display: block; 560 560 - font-size: var(--text-sm); 561 561 - color: var(--text-secondary); 562 562 - margin-top: var(--space-1); 563 563 - } 564 564 - 565 565 - .search-bar { 566 566 - display: flex; 567 567 - gap: var(--space-2); 568 568 - margin-bottom: var(--space-4); 569 569 - } 570 570 - 571 571 - .search-bar input { 572 572 - flex: 1; 573 573 - } 574 574 - 575 575 - .user-list { 576 576 - list-style: none; 577 577 - padding: 0; 578 578 - margin: 0; 579 579 - display: flex; 580 580 - flex-direction: column; 581 581 - gap: var(--space-2); 582 582 - } 583 583 - 584 584 - .user-item { 585 585 - list-style: none; 586 586 - } 587 587 - 588 588 - .user-item-btn { 589 589 - display: flex; 590 590 - align-items: flex-start; 591 591 - width: 100%; 592 592 - padding: var(--space-3); 593 593 - background: var(--bg-card); 594 594 - border: 1px solid var(--border-color); 595 595 - border-radius: var(--radius-md); 596 596 - gap: var(--space-3); 597 597 - cursor: pointer; 598 598 - text-align: left; 599 599 - color: inherit; 600 600 - font: inherit; 601 601 - } 602 602 - 603 603 - .user-item-btn:hover { 604 604 - border-color: var(--accent); 605 605 - } 606 606 - 607 607 - .user-info { 608 608 - flex: 1; 609 609 - min-width: 0; 610 610 - display: flex; 611 611 - flex-direction: column; 612 612 - gap: var(--space-1); 613 613 - } 614 614 - 615 615 - .user-handle { 616 616 - font-weight: var(--font-medium); 617 617 - } 618 618 - 619 619 - .user-did { 620 620 - font-family: var(--font-mono); 621 621 - font-size: var(--text-xs); 622 622 - color: var(--text-secondary); 623 623 - word-break: break-all; 624 624 - } 625 625 - 626 626 - .user-email { 627 627 - font-size: var(--text-sm); 628 628 - color: var(--text-secondary); 629 629 - } 630 630 - 631 631 - .user-date { 632 632 - font-size: var(--text-xs); 633 633 - color: var(--text-muted); 634 634 - } 635 635 - 636 636 - .user-badges { 637 637 - display: flex; 638 638 - gap: var(--space-2); 639 639 - flex-shrink: 0; 640 640 - } 641 641 - 642 642 - .badge { 643 643 - padding: var(--space-1) var(--space-2); 644 644 - border-radius: var(--radius-md); 645 645 - font-size: var(--text-xs); 646 646 - } 647 647 - 648 648 - .badge.deactivated { 649 649 - background: var(--warning-bg); 650 650 - color: var(--warning-text); 651 651 - } 652 652 - 653 653 - .field { 654 654 - margin-bottom: var(--space-4); 655 655 - } 656 656 - 657 657 - .field label { 658 658 - display: block; 659 659 - font-size: var(--text-sm); 660 660 - font-weight: var(--font-medium); 661 661 - margin-bottom: var(--space-1); 662 662 - } 663 663 - 664 664 - .field-help { 665 665 - display: block; 666 666 - font-size: var(--text-xs); 667 667 - color: var(--text-secondary); 668 668 - margin-top: var(--space-1); 669 669 - } 670 670 - 671 671 - .logo-section { 672 672 - display: flex; 673 673 - flex-direction: column; 674 674 - gap: var(--space-3); 675 675 - } 676 676 - 677 677 - .logo-preview { 678 678 - display: flex; 679 679 - align-items: center; 680 680 - gap: var(--space-3); 681 681 - } 682 682 - 683 683 - .logo-preview img { 684 684 - width: 48px; 685 685 - height: 48px; 686 686 - object-fit: contain; 687 687 - border-radius: var(--radius-md); 688 688 - background: var(--bg-card); 689 689 - padding: var(--space-2); 690 690 - } 691 691 - 692 692 - .remove-logo { 693 693 - padding: var(--space-2) var(--space-3); 694 694 - font-size: var(--text-sm); 695 695 - background: transparent; 696 696 - border: 1px solid var(--error-border); 697 697 - color: var(--error-text); 698 698 - border-radius: var(--radius-md); 699 699 - cursor: pointer; 700 700 - } 701 701 - 702 702 - .remove-logo:hover { 703 703 - background: var(--error-bg); 704 704 - } 705 705 - 706 706 - .colors-grid { 707 707 - margin-bottom: var(--space-5); 708 708 - } 709 709 - 710 710 - .colors-grid h4 { 711 711 - margin: 0 0 var(--space-2) 0; 712 712 - font-size: var(--text-sm); 713 713 - font-weight: var(--font-medium); 714 714 - } 715 715 - 716 716 - .color-fields { 717 717 - display: grid; 718 718 - grid-template-columns: repeat(2, 1fr); 719 719 - gap: var(--space-3); 720 720 - margin-top: var(--space-3); 721 721 - } 722 722 - 723 723 - .color-field label { 724 724 - display: block; 725 725 - font-size: var(--text-xs); 726 726 - color: var(--text-secondary); 727 727 - margin-bottom: var(--space-1); 728 728 - } 729 729 - 730 730 - .color-input-row { 731 731 - display: flex; 732 732 - gap: var(--space-2); 733 733 - align-items: center; 734 734 - } 735 735 - 736 736 - .color-input-row input[type="color"] { 737 737 - width: 40px; 738 738 - height: 36px; 739 739 - padding: 2px; 740 740 - border: 1px solid var(--border-color); 741 741 - border-radius: var(--radius-md); 742 742 - cursor: pointer; 743 743 - flex-shrink: 0; 744 744 - } 745 745 - 746 746 - .color-input-row input[type="text"] { 747 747 - flex: 1; 748 748 - font-family: var(--font-mono); 749 749 - font-size: var(--text-sm); 750 750 - } 751 751 - 752 752 - .load-more { 753 753 - display: block; 754 754 - width: 100%; 755 755 - margin-top: var(--space-4); 756 756 - } 757 757 - 758 758 - .badge.verified { 759 759 - background: var(--success-bg); 760 760 - color: var(--success-text); 761 761 - } 762 762 - 763 763 - .badge.unverified { 764 764 - background: var(--bg-tertiary); 765 765 - color: var(--text-secondary); 766 766 - } 767 767 - 768 768 - .modal-overlay { 769 769 - position: fixed; 770 770 - inset: 0; 771 771 - background: var(--overlay-bg); 772 772 - display: flex; 773 773 - align-items: center; 774 774 - justify-content: center; 775 775 - z-index: var(--z-modal); 776 776 - } 777 777 - 778 778 - .modal { 779 779 - background: var(--bg-card); 780 780 - border-radius: var(--radius-xl); 781 781 - box-shadow: var(--shadow-lg); 782 782 - max-width: var(--width-sm); 783 783 - width: 90%; 784 784 - max-height: 90vh; 785 785 - overflow-y: auto; 786 786 - } 787 787 - 788 788 - .modal-header { 789 789 - display: flex; 790 790 - justify-content: space-between; 791 791 - align-items: center; 792 792 - padding: var(--space-4) var(--space-5); 793 793 - border-bottom: 1px solid var(--border-color); 794 794 - } 795 795 - 796 796 - .modal-header h2 { 797 797 - margin: 0; 798 798 - font-size: var(--text-lg); 799 799 - } 800 800 - 801 801 - .close-btn { 802 802 - background: none; 803 803 - border: none; 804 804 - font-size: var(--text-xl); 805 805 - cursor: pointer; 806 806 - color: var(--text-secondary); 807 807 - padding: 0; 808 808 - line-height: 1; 809 809 - } 810 810 - 811 811 - .close-btn:hover { 812 812 - color: var(--text-primary); 813 813 - } 814 814 - 815 815 - .modal-body { 816 816 - padding: var(--space-5); 817 817 - } 818 818 - 819 819 - .user-details { 820 820 - display: grid; 821 821 - grid-template-columns: auto 1fr; 822 822 - gap: var(--space-2) var(--space-4); 823 823 - margin: 0 0 var(--space-5) 0; 824 824 - } 825 825 - 826 826 - .user-details dt { 827 827 - font-weight: var(--font-medium); 828 828 - color: var(--text-secondary); 829 829 - font-size: var(--text-sm); 830 830 - } 831 831 - 832 832 - .user-details dd { 833 833 - margin: 0; 834 834 - } 835 835 - 836 836 - .user-details .mono { 837 837 - font-family: var(--font-mono); 838 838 - font-size: var(--text-xs); 839 839 - word-break: break-all; 840 840 - } 841 841 - 842 842 - .modal-actions { 843 843 - display: flex; 844 844 - gap: var(--space-3); 845 845 - flex-wrap: wrap; 846 846 - } 847 847 - 848 848 - .modal-actions button.danger { 849 849 - background: var(--error-text); 850 850 - border: 1px solid var(--error-text); 851 851 - color: white; 852 852 - } 853 853 - 854 854 - .modal-actions button.danger:hover { 855 855 - background: var(--error-border); 856 856 - } 857 857 - 858 858 - @media (max-width: 600px) { 859 859 - .user-item { 860 860 - flex-direction: column; 861 861 - } 862 862 - 863 863 - .user-item-btn { 864 864 - flex-direction: column; 865 865 - gap: var(--space-2); 866 866 - } 867 867 - 868 868 - .user-info { 869 869 - width: 100%; 870 870 - } 871 871 - 872 872 - .user-badges { 873 873 - width: 100%; 874 874 - flex-wrap: wrap; 875 875 - } 876 876 - 877 877 - .search-bar { 878 878 - flex-direction: column; 879 879 - } 880 880 - 881 881 - .color-fields { 882 882 - grid-template-columns: 1fr; 883 883 - } 884 884 - } 885 885 - </style>

+2 -233

frontend/src/components/dashboard/AppPasswordsContent.svelte

··· 131 131 {/if} 132 132 133 133 <form class="create-form" onsubmit={handleCreate}> 134 134 - <div class="field"> 134 134 + <div> 135 135 <label for="app-name">{$_('appPasswords.name')}</label> 136 136 <input 137 137 id="app-name" ··· 183 183 </div> 184 184 <button 185 185 type="button" 186 186 - class="delete-btn" 186 186 + class="sm danger-outline" 187 187 onclick={() => handleDelete(pw.name)} 188 188 disabled={deleting === pw.name} 189 189 > ··· 194 194 </ul> 195 195 {/if} 196 196 </div> 197 197 - 198 198 - <style> 199 199 - .app-passwords { 200 200 - max-width: var(--width-lg); 201 201 - } 202 202 - 203 203 - .new-password-banner { 204 204 - background: var(--warning-bg); 205 205 - border: 1px solid var(--warning-border); 206 206 - border-radius: var(--radius-lg); 207 207 - padding: var(--space-4); 208 208 - margin-bottom: var(--space-6); 209 209 - } 210 210 - 211 211 - .new-password-banner .password-label { 212 212 - font-size: var(--text-sm); 213 213 - color: var(--text-primary); 214 214 - margin-bottom: var(--space-2); 215 215 - } 216 216 - 217 217 - .new-password-banner .warning { 218 218 - color: var(--warning-text); 219 219 - font-weight: var(--font-medium); 220 220 - margin: 0 0 var(--space-3) 0; 221 221 - } 222 222 - 223 223 - .acknowledge-label { 224 224 - display: flex; 225 225 - align-items: center; 226 226 - gap: var(--space-2); 227 227 - margin-bottom: var(--space-3); 228 228 - cursor: pointer; 229 229 - font-size: var(--text-sm); 230 230 - color: var(--text-primary); 231 231 - } 232 232 - 233 233 - .acknowledge-label input[type="checkbox"] { 234 234 - width: 18px; 235 235 - height: 18px; 236 236 - accent-color: var(--accent); 237 237 - } 238 238 - 239 239 - .password-display { 240 240 - display: flex; 241 241 - gap: var(--space-2); 242 242 - margin-bottom: var(--space-3); 243 243 - } 244 244 - 245 245 - .password-display code { 246 246 - flex: 1; 247 247 - padding: var(--space-3); 248 248 - background: var(--bg-card); 249 249 - border-radius: var(--radius-md); 250 250 - font-family: var(--font-mono); 251 251 - word-break: break-all; 252 252 - } 253 253 - 254 254 - .copy-btn { 255 255 - padding: var(--space-2) var(--space-3); 256 256 - font-size: var(--text-sm); 257 257 - } 258 258 - 259 259 - .dismiss-btn { 260 260 - width: 100%; 261 261 - } 262 262 - 263 263 - .create-form { 264 264 - background: var(--bg-secondary); 265 265 - padding: var(--space-5); 266 266 - border-radius: var(--radius-lg); 267 267 - margin-bottom: var(--space-6); 268 268 - } 269 269 - 270 270 - .create-form .field { 271 271 - margin-bottom: var(--space-4); 272 272 - } 273 273 - 274 274 - .scope-selector { 275 275 - display: flex; 276 276 - flex-direction: column; 277 277 - gap: var(--space-2); 278 278 - margin-bottom: var(--space-4); 279 279 - } 280 280 - 281 281 - .scope-label { 282 282 - font-size: var(--text-sm); 283 283 - color: var(--text-secondary); 284 284 - } 285 285 - 286 286 - .scope-buttons { 287 287 - display: flex; 288 288 - flex-wrap: wrap; 289 289 - gap: var(--space-2); 290 290 - } 291 291 - 292 292 - .scope-btn { 293 293 - padding: var(--space-2) var(--space-4); 294 294 - background: var(--bg-card); 295 295 - border: 1px solid var(--border-color); 296 296 - border-radius: var(--radius-md); 297 297 - color: var(--text-primary); 298 298 - cursor: pointer; 299 299 - font-size: var(--text-sm); 300 300 - transition: all 0.15s ease; 301 301 - } 302 302 - 303 303 - .scope-btn:hover:not(:disabled) { 304 304 - background: var(--bg-hover); 305 305 - border-color: var(--accent); 306 306 - } 307 307 - 308 308 - .scope-btn.selected { 309 309 - background: var(--accent); 310 310 - border-color: var(--accent); 311 311 - color: var(--text-inverse); 312 312 - } 313 313 - 314 314 - .scope-btn:disabled { 315 315 - opacity: 0.6; 316 316 - cursor: not-allowed; 317 317 - } 318 318 - 319 319 - .loading, 320 320 - .empty { 321 321 - color: var(--text-secondary); 322 322 - padding: var(--space-6); 323 323 - text-align: center; 324 324 - } 325 325 - 326 326 - .password-list { 327 327 - list-style: none; 328 328 - padding: 0; 329 329 - margin: 0; 330 330 - display: flex; 331 331 - flex-direction: column; 332 332 - gap: var(--space-3); 333 333 - } 334 334 - 335 335 - .password-item { 336 336 - display: flex; 337 337 - justify-content: space-between; 338 338 - align-items: center; 339 339 - padding: var(--space-4); 340 340 - background: var(--bg-secondary); 341 341 - border-radius: var(--radius-lg); 342 342 - gap: var(--space-4); 343 343 - } 344 344 - 345 345 - .password-info { 346 346 - display: flex; 347 347 - flex-direction: column; 348 348 - gap: var(--space-1); 349 349 - } 350 350 - 351 351 - .password-name { 352 352 - font-weight: var(--font-medium); 353 353 - } 354 354 - 355 355 - .password-meta { 356 356 - display: flex; 357 357 - align-items: center; 358 358 - flex-wrap: wrap; 359 359 - gap: var(--space-2); 360 360 - font-size: var(--text-sm); 361 361 - color: var(--text-secondary); 362 362 - } 363 363 - 364 364 - .scope-badge { 365 365 - font-size: var(--text-xs); 366 366 - padding: var(--space-1) var(--space-2); 367 367 - background: var(--bg-card); 368 368 - border: 1px solid var(--border-color); 369 369 - border-radius: var(--radius-sm); 370 370 - color: var(--text-secondary); 371 371 - } 372 372 - 373 373 - .scope-badge.full { 374 374 - background: var(--success-bg); 375 375 - border-color: var(--success-border); 376 376 - color: var(--success-text); 377 377 - } 378 378 - 379 379 - .controller-badge { 380 380 - font-size: var(--text-xs); 381 381 - padding: var(--space-1) var(--space-2); 382 382 - background: var(--accent-muted); 383 383 - border: 1px solid var(--accent); 384 384 - border-radius: var(--radius-sm); 385 385 - color: var(--accent); 386 386 - cursor: help; 387 387 - } 388 388 - 389 389 - .date { 390 390 - color: var(--text-secondary); 391 391 - } 392 392 - 393 393 - .delete-btn { 394 394 - flex-shrink: 0; 395 395 - padding: var(--space-2) var(--space-3); 396 396 - font-size: var(--text-sm); 397 397 - background: transparent; 398 398 - border: 1px solid var(--error-border); 399 399 - color: var(--error-text); 400 400 - border-radius: var(--radius-md); 401 401 - cursor: pointer; 402 402 - } 403 403 - 404 404 - .delete-btn:hover:not(:disabled) { 405 405 - background: var(--error-bg); 406 406 - } 407 407 - 408 408 - .delete-btn:disabled { 409 409 - opacity: 0.6; 410 410 - cursor: not-allowed; 411 411 - } 412 412 - 413 413 - @media (max-width: 500px) { 414 414 - .password-item { 415 415 - flex-direction: column; 416 416 - align-items: stretch; 417 417 - } 418 418 - 419 419 - .delete-btn { 420 420 - width: 100%; 421 421 - } 422 422 - 423 423 - .password-display { 424 424 - flex-direction: column; 425 425 - } 426 426 - } 427 427 - </style>

+9 -309

frontend/src/components/dashboard/SettingsContent.svelte

··· 382 382 {#if emailUpdateAuthorized} 383 383 <p class="hint success">{$_('settings.emailUpdateAuthorized')}</p> 384 384 {:else} 385 385 - <div class="field"> 385 385 + <div> 386 386 <label for="email-token">{$_('settings.verificationCode')}</label> 387 387 <input 388 388 id="email-token" ··· 394 394 <p class="hint">{$_('settings.emailTokenHint')}</p> 395 395 </div> 396 396 {/if} 397 397 - <div class="field"> 397 397 + <div> 398 398 <label for="new-email">{$_('settings.newEmail')}</label> 399 399 <input 400 400 id="new-email" ··· 420 420 </form> 421 421 {:else} 422 422 <form onsubmit={(e) => { e.preventDefault(); handleRequestEmailUpdate() }}> 423 423 - <div class="field"> 423 423 + <div> 424 424 <label for="new-email">{$_('settings.newEmail')}</label> 425 425 <input 426 426 id="new-email" ··· 472 472 </div> 473 473 </div> 474 474 <form onsubmit={handleUpdateHandle}> 475 475 - <div class="field"> 475 475 + <div> 476 476 <label for="new-handle-byo">{$_('settings.yourDomain')}</label> 477 477 <input id="new-handle-byo" type="text" bind:value={newHandle} placeholder={$_('settings.yourDomainPlaceholder')} disabled={handleLoading} required /> 478 478 </div> ··· 483 483 </div> 484 484 {:else} 485 485 <form onsubmit={handleUpdateHandle}> 486 486 - <div class="field"> 486 486 + <div> 487 487 <label for="new-handle">{$_('settings.newHandle')}</label> 488 488 <HandleInput 489 489 id="new-handle" ··· 529 529 <span class="backup-size">{formatBytes(backup.sizeBytes)}</span> 530 530 </div> 531 531 <div class="backup-item-actions"> 532 532 - <button class="small" onclick={() => handleDownloadBackup(backup.id, backup.repoRev)}> 532 532 + <button class="sm" onclick={() => handleDownloadBackup(backup.id, backup.repoRev)}> 533 533 {$_('settings.backups.download')} 534 534 </button> 535 535 - <button class="small danger" onclick={() => handleDeleteBackup(backup.id)}> 535 535 + <button class="sm danger-outline" onclick={() => handleDeleteBackup(backup.id)}> 536 536 {$_('settings.backups.delete')} 537 537 </button> 538 538 </div> ··· 586 586 <p class="warning-text">{$_('settings.deleteWarning')}</p> 587 587 {#if deleteTokenSent} 588 588 <form onsubmit={handleConfirmDelete}> 589 589 - <div class="field"> 589 589 + <div> 590 590 <label for="delete-token">{$_('settings.confirmationCode')}</label> 591 591 <input 592 592 id="delete-token" ··· 597 597 required 598 598 /> 599 599 </div> 600 600 - <div class="field"> 600 600 + <div> 601 601 <label for="delete-password">{$_('settings.yourPassword')}</label> 602 602 <input 603 603 id="delete-password" ··· 624 624 {/if} 625 625 </section> 626 626 </div> 627 627 - 628 628 - <style> 629 629 - .settings { 630 630 - max-width: var(--width-lg); 631 631 - } 632 632 - 633 633 - section { 634 634 - background: var(--bg-secondary); 635 635 - padding: var(--space-5); 636 636 - border-radius: var(--radius-lg); 637 637 - margin-bottom: var(--space-5); 638 638 - } 639 639 - 640 640 - section h3 { 641 641 - margin: 0 0 var(--space-3) 0; 642 642 - font-size: var(--text-base); 643 643 - } 644 644 - 645 645 - .current { 646 646 - color: var(--text-secondary); 647 647 - font-size: var(--text-sm); 648 648 - margin: 0 0 var(--space-3) 0; 649 649 - } 650 650 - 651 651 - .language-select { 652 652 - width: 100%; 653 653 - } 654 654 - 655 655 - .field { 656 656 - margin-bottom: var(--space-3); 657 657 - } 658 658 - 659 659 - .field label { 660 660 - display: block; 661 661 - margin-bottom: var(--space-1); 662 662 - font-size: var(--text-sm); 663 663 - font-weight: var(--font-medium); 664 664 - } 665 665 - 666 666 - .actions { 667 667 - display: flex; 668 668 - gap: var(--space-2); 669 669 - margin-top: var(--space-3); 670 670 - } 671 671 - 672 672 - .tabs { 673 673 - display: flex; 674 674 - gap: var(--space-1); 675 675 - margin-bottom: var(--space-4); 676 676 - } 677 677 - 678 678 - .tab { 679 679 - flex: 1; 680 680 - padding: var(--space-2) var(--space-4); 681 681 - background: transparent; 682 682 - border: 1px solid var(--border-color); 683 683 - cursor: pointer; 684 684 - font-size: var(--text-sm); 685 685 - color: var(--text-secondary); 686 686 - } 687 687 - 688 688 - .tab:first-child { 689 689 - border-radius: var(--radius-md) 0 0 var(--radius-md); 690 690 - } 691 691 - 692 692 - .tab:last-child { 693 693 - border-radius: 0 var(--radius-md) var(--radius-md) 0; 694 694 - } 695 695 - 696 696 - .tab.active { 697 697 - background: var(--accent); 698 698 - border-color: var(--accent); 699 699 - color: var(--text-inverse); 700 700 - } 701 701 - 702 702 - .loading, 703 703 - .empty { 704 704 - color: var(--text-secondary); 705 705 - font-size: var(--text-sm); 706 706 - margin-bottom: var(--space-4); 707 707 - } 708 708 - 709 709 - .backup-list { 710 710 - list-style: none; 711 711 - padding: 0; 712 712 - margin: 0 0 var(--space-4) 0; 713 713 - display: flex; 714 714 - flex-direction: column; 715 715 - gap: var(--space-2); 716 716 - } 717 717 - 718 718 - .backup-item { 719 719 - display: flex; 720 720 - justify-content: space-between; 721 721 - align-items: center; 722 722 - padding: var(--space-3); 723 723 - background: var(--bg-card); 724 724 - border: 1px solid var(--border-color); 725 725 - border-radius: var(--radius-md); 726 726 - } 727 727 - 728 728 - .backup-info { 729 729 - display: flex; 730 730 - gap: var(--space-3); 731 731 - font-size: var(--text-sm); 732 732 - } 733 733 - 734 734 - .backup-date { 735 735 - font-weight: var(--font-medium); 736 736 - } 737 737 - 738 738 - .backup-size { 739 739 - color: var(--text-secondary); 740 740 - } 741 741 - 742 742 - .backup-actions { 743 743 - display: flex; 744 744 - justify-content: space-between; 745 745 - align-items: center; 746 746 - margin-bottom: var(--space-4); 747 747 - gap: var(--space-3); 748 748 - flex-wrap: wrap; 749 749 - } 750 750 - 751 751 - .backup-toggle { 752 752 - margin-bottom: var(--space-3); 753 753 - } 754 754 - 755 755 - .backup-toggle .toggle-label { 756 756 - display: flex; 757 757 - align-items: center; 758 758 - gap: var(--space-2); 759 759 - cursor: pointer; 760 760 - font-size: var(--text-sm); 761 761 - white-space: nowrap; 762 762 - } 763 763 - 764 764 - .backup-toggle .toggle-label input[type="checkbox"] { 765 765 - width: 16px; 766 766 - height: 16px; 767 767 - flex-shrink: 0; 768 768 - } 769 769 - 770 770 - .backup-item-actions { 771 771 - display: flex; 772 772 - gap: var(--space-2); 773 773 - } 774 774 - 775 775 - .restore-section { 776 776 - margin-top: var(--space-5); 777 777 - padding-top: var(--space-4); 778 778 - border-top: 1px solid var(--border-color); 779 779 - } 780 780 - 781 781 - .restore-section h4 { 782 782 - margin: 0 0 var(--space-2) 0; 783 783 - font-size: var(--text-sm); 784 784 - font-weight: var(--font-medium); 785 785 - } 786 786 - 787 787 - .restore-section .hint { 788 788 - margin-bottom: var(--space-3); 789 789 - } 790 790 - 791 791 - .restore-form { 792 792 - display: flex; 793 793 - gap: var(--space-2); 794 794 - flex-wrap: wrap; 795 795 - } 796 796 - 797 797 - .restore-form input[type="file"] { 798 798 - flex: 1; 799 799 - min-width: 200px; 800 800 - } 801 801 - 802 802 - .restore-preview { 803 803 - margin-top: var(--space-2); 804 804 - font-size: var(--text-sm); 805 805 - color: var(--text-secondary); 806 806 - display: flex; 807 807 - gap: var(--space-2); 808 808 - flex-wrap: wrap; 809 809 - } 810 810 - 811 811 - .restore-preview .file-name { 812 812 - font-weight: var(--font-medium); 813 813 - color: var(--text-primary); 814 814 - } 815 815 - 816 816 - .export-buttons { 817 817 - display: flex; 818 818 - gap: var(--space-2); 819 819 - flex-wrap: wrap; 820 820 - } 821 821 - 822 822 - button.small { 823 823 - padding: var(--space-2) var(--space-3); 824 824 - font-size: var(--text-sm); 825 825 - } 826 826 - 827 827 - .danger-zone { 828 828 - border: 1px solid var(--error-border); 829 829 - } 830 830 - 831 831 - .danger-zone h3 { 832 832 - color: var(--error-text); 833 833 - } 834 834 - 835 835 - .warning-text { 836 836 - color: var(--text-secondary); 837 837 - font-size: var(--text-sm); 838 838 - margin: 0 0 var(--space-4) 0; 839 839 - } 840 840 - 841 841 - button.danger { 842 842 - background: var(--error-text); 843 843 - border: 1px solid var(--error-text); 844 844 - color: white; 845 845 - } 846 846 - 847 847 - button.danger:hover:not(:disabled) { 848 848 - background: var(--error-border); 849 849 - } 850 850 - 851 851 - button.danger:disabled { 852 852 - opacity: 0.6; 853 853 - cursor: not-allowed; 854 854 - } 855 855 - 856 856 - .hint { 857 857 - font-size: var(--text-xs); 858 858 - color: var(--text-secondary); 859 859 - margin: var(--space-1) 0 0 0; 860 860 - } 861 861 - 862 862 - .hint.warning { 863 863 - color: var(--warning-text); 864 864 - } 865 865 - 866 866 - .hint.success { 867 867 - color: var(--success-text); 868 868 - background: var(--success-bg); 869 869 - padding: var(--space-2); 870 870 - border-radius: var(--radius-md); 871 871 - margin-bottom: var(--space-3); 872 872 - } 873 873 - 874 874 - .byo-handle { 875 875 - margin-top: var(--space-3); 876 876 - } 877 877 - 878 878 - .verification-info { 879 879 - background: var(--bg-card); 880 880 - border: 1px solid var(--border-color); 881 881 - border-radius: var(--radius-lg); 882 882 - padding: var(--space-4); 883 883 - margin-bottom: var(--space-4); 884 884 - } 885 885 - 886 886 - .verification-info h4 { 887 887 - margin: 0 0 var(--space-2) 0; 888 888 - font-size: var(--text-sm); 889 889 - font-weight: var(--font-medium); 890 890 - } 891 891 - 892 892 - .verification-info h5 { 893 893 - margin: var(--space-3) 0 var(--space-1) 0; 894 894 - font-size: var(--text-xs); 895 895 - font-weight: var(--font-medium); 896 896 - color: var(--text-secondary); 897 897 - } 898 898 - 899 899 - .verification-info p { 900 900 - margin: var(--space-1) 0; 901 901 - font-size: var(--text-xs); 902 902 - color: var(--text-secondary); 903 903 - } 904 904 - 905 905 - .method { 906 906 - margin-top: var(--space-3); 907 907 - padding-top: var(--space-3); 908 908 - border-top: 1px solid var(--border-color); 909 909 - } 910 910 - 911 911 - .method:first-of-type { 912 912 - margin-top: var(--space-2); 913 913 - padding-top: 0; 914 914 - border-top: none; 915 915 - } 916 916 - 917 917 - code.record { 918 918 - display: block; 919 919 - background: var(--bg-input); 920 920 - padding: var(--space-2); 921 921 - border-radius: var(--radius-md); 922 922 - font-size: var(--text-xs); 923 923 - word-break: break-all; 924 924 - margin: var(--space-1) 0; 925 925 - } 926 926 - </style>