refactor(frontend): extract controllers, repo styles + dashboard.css #61

-458

frontend/src/components/dashboard/ControllersContent.svelte

··· 626 626 </section> 627 627 {/if} 628 628 </div> 629 629 - 630 630 - <style> 631 631 - .controllers { 632 632 - max-width: var(--width-lg); 633 633 - } 634 634 - 635 635 - .loading, 636 636 - .empty { 637 637 - color: var(--text-secondary); 638 638 - padding: var(--space-4); 639 639 - text-align: center; 640 640 - } 641 641 - 642 642 - .section { 643 643 - background: var(--bg-secondary); 644 644 - padding: var(--space-5); 645 645 - border-radius: var(--radius-lg); 646 646 - margin-bottom: var(--space-5); 647 647 - } 648 648 - 649 649 - .section-header { 650 650 - margin-bottom: var(--space-4); 651 651 - } 652 652 - 653 653 - .section-header h3 { 654 654 - margin: 0 0 var(--space-1) 0; 655 655 - font-size: var(--text-base); 656 656 - } 657 657 - 658 658 - .section-description { 659 659 - color: var(--text-secondary); 660 660 - margin: 0; 661 661 - font-size: var(--text-sm); 662 662 - } 663 663 - 664 664 - .constraint-notice { 665 665 - background: var(--bg-tertiary); 666 666 - border: 1px solid var(--border-color); 667 667 - border-radius: var(--radius-md); 668 668 - padding: var(--space-4); 669 669 - margin-top: var(--space-4); 670 670 - } 671 671 - 672 672 - .constraint-notice p { 673 673 - margin: 0; 674 674 - color: var(--text-secondary); 675 675 - font-size: var(--text-sm); 676 676 - } 677 677 - 678 678 - .items-list { 679 679 - display: flex; 680 680 - flex-direction: column; 681 681 - gap: var(--space-4); 682 682 - margin-bottom: var(--space-4); 683 683 - } 684 684 - 685 685 - .item-card { 686 686 - background: var(--bg-card); 687 687 - border: 1px solid var(--border-color); 688 688 - border-radius: var(--radius-lg); 689 689 - padding: var(--space-4); 690 690 - display: flex; 691 691 - justify-content: space-between; 692 692 - align-items: center; 693 693 - gap: var(--space-4); 694 694 - flex-wrap: wrap; 695 695 - } 696 696 - 697 697 - .item-card.inactive { 698 698 - opacity: 0.6; 699 699 - } 700 700 - 701 701 - .item-info { 702 702 - flex: 1; 703 703 - min-width: 200px; 704 704 - } 705 705 - 706 706 - .item-header { 707 707 - margin-bottom: var(--space-2); 708 708 - display: flex; 709 709 - align-items: center; 710 710 - gap: var(--space-2); 711 711 - flex-wrap: wrap; 712 712 - } 713 713 - 714 714 - .item-handle { 715 715 - font-weight: var(--font-semibold); 716 716 - color: var(--text-primary); 717 717 - } 718 718 - 719 719 - .badge { 720 720 - display: inline-block; 721 721 - padding: var(--space-1) var(--space-2); 722 722 - border-radius: var(--radius-md); 723 723 - font-size: var(--text-xs); 724 724 - font-weight: var(--font-medium); 725 725 - } 726 726 - 727 727 - .badge.scope { 728 728 - background: var(--accent); 729 729 - color: var(--text-inverse); 730 730 - } 731 731 - 732 732 - .badge.inactive { 733 733 - background: var(--error-bg); 734 734 - color: var(--error-text); 735 735 - border: 1px solid var(--error-border); 736 736 - } 737 737 - 738 738 - .item-details { 739 739 - display: flex; 740 740 - flex-direction: column; 741 741 - gap: var(--space-1); 742 742 - } 743 743 - 744 744 - .detail { 745 745 - font-size: var(--text-sm); 746 746 - } 747 747 - 748 748 - .detail .label { 749 749 - color: var(--text-secondary); 750 750 - margin-right: var(--space-2); 751 751 - } 752 752 - 753 753 - .detail .value { 754 754 - color: var(--text-primary); 755 755 - } 756 756 - 757 757 - .detail .value.did { 758 758 - font-family: var(--font-mono); 759 759 - font-size: var(--text-xs); 760 760 - word-break: break-all; 761 761 - } 762 762 - 763 763 - .item-actions { 764 764 - display: flex; 765 765 - gap: var(--space-2); 766 766 - } 767 767 - 768 768 - .btn-link { 769 769 - display: inline-block; 770 770 - padding: var(--space-2) var(--space-4); 771 771 - border: 1px solid var(--accent); 772 772 - border-radius: var(--radius-md); 773 773 - background: transparent; 774 774 - color: var(--accent); 775 775 - font-size: var(--text-sm); 776 776 - font-weight: var(--font-medium); 777 777 - text-decoration: none; 778 778 - } 779 779 - 780 780 - .btn-link:hover { 781 781 - background: var(--accent); 782 782 - color: var(--text-inverse); 783 783 - } 784 784 - 785 785 - .danger-outline { 786 786 - padding: var(--space-2) var(--space-4); 787 787 - border: 1px solid var(--error-text); 788 788 - border-radius: var(--radius-md); 789 789 - background: transparent; 790 790 - color: var(--error-text); 791 791 - font-size: var(--text-sm); 792 792 - cursor: pointer; 793 793 - } 794 794 - 795 795 - .danger-outline:hover { 796 796 - background: var(--error-bg); 797 797 - } 798 798 - 799 799 - .ghost { 800 800 - background: transparent; 801 801 - border: 1px solid var(--border-color); 802 802 - color: var(--text-primary); 803 803 - } 804 804 - 805 805 - .ghost:hover { 806 806 - border-color: var(--accent); 807 807 - } 808 808 - 809 809 - .full-width { 810 810 - width: 100%; 811 811 - } 812 812 - 813 813 - .form-card { 814 814 - background: var(--bg-card); 815 815 - border: 1px solid var(--border-color); 816 816 - border-radius: var(--radius-lg); 817 817 - padding: var(--space-5); 818 818 - margin-top: var(--space-4); 819 819 - } 820 820 - 821 821 - .form-card h4 { 822 822 - margin: 0 0 var(--space-4) 0; 823 823 - font-size: var(--text-base); 824 824 - } 825 825 - 826 826 - .warning-box { 827 827 - background: var(--warning-bg); 828 828 - border: 1px solid var(--warning-border); 829 829 - border-radius: var(--radius-md); 830 830 - padding: var(--space-4); 831 831 - margin-bottom: var(--space-5); 832 832 - } 833 833 - 834 834 - .warning-header { 835 835 - font-weight: var(--font-semibold); 836 836 - color: var(--warning-text); 837 837 - margin-bottom: var(--space-2); 838 838 - } 839 839 - 840 840 - .warning-text { 841 841 - margin: 0 0 var(--space-3) 0; 842 842 - color: var(--warning-text); 843 843 - font-size: var(--text-sm); 844 844 - line-height: 1.5; 845 845 - } 846 846 - 847 847 - .warning-bullets { 848 848 - margin: 0; 849 849 - padding-left: var(--space-5); 850 850 - color: var(--warning-text); 851 851 - font-size: var(--text-sm); 852 852 - line-height: 1.6; 853 853 - } 854 854 - 855 855 - .confirm-checkbox { 856 856 - display: flex; 857 857 - align-items: flex-start; 858 858 - gap: var(--space-2); 859 859 - cursor: pointer; 860 860 - padding: var(--space-3); 861 861 - background: var(--bg-tertiary); 862 862 - border: 1px solid var(--border-color); 863 863 - border-radius: var(--radius-md); 864 864 - margin-bottom: var(--space-4); 865 865 - } 866 866 - 867 867 - .confirm-checkbox input { 868 868 - width: 18px; 869 869 - height: 18px; 870 870 - flex-shrink: 0; 871 871 - margin-top: 2px; 872 872 - } 873 873 - 874 874 - .confirm-checkbox span { 875 875 - font-size: var(--text-sm); 876 876 - font-weight: var(--font-medium); 877 877 - color: var(--text-primary); 878 878 - line-height: 1.4; 879 879 - } 880 880 - 881 881 - .field { 882 882 - margin-bottom: var(--space-4); 883 883 - } 884 884 - 885 885 - .field label { 886 886 - display: block; 887 887 - font-size: var(--text-sm); 888 888 - font-weight: var(--font-medium); 889 889 - margin-bottom: var(--space-1); 890 890 - } 891 891 - 892 892 - .field input, 893 893 - .field select { 894 894 - width: 100%; 895 895 - } 896 896 - 897 897 - .form-actions { 898 898 - display: flex; 899 899 - gap: var(--space-3); 900 900 - justify-content: flex-end; 901 901 - } 902 902 - 903 903 - .controller-search { 904 904 - position: relative; 905 905 - } 906 906 - 907 907 - .search-wrapper { 908 908 - position: relative; 909 909 - } 910 910 - 911 911 - .typeahead-dropdown { 912 912 - position: absolute; 913 913 - top: 100%; 914 914 - left: 0; 915 915 - right: 0; 916 916 - z-index: 10; 917 917 - background: var(--bg-card); 918 918 - border: 1px solid var(--border-color); 919 919 - border-radius: var(--radius-md); 920 920 - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 921 921 - max-height: 240px; 922 922 - overflow-y: auto; 923 923 - } 924 924 - 925 925 - .typeahead-item { 926 926 - display: flex; 927 927 - align-items: center; 928 928 - gap: var(--space-2); 929 929 - width: 100%; 930 930 - padding: var(--space-2) var(--space-3); 931 931 - border: none; 932 932 - background: transparent; 933 933 - cursor: pointer; 934 934 - text-align: left; 935 935 - color: var(--text-primary); 936 936 - } 937 937 - 938 938 - .typeahead-item:hover { 939 939 - background: var(--bg-tertiary); 940 940 - } 941 941 - 942 942 - .typeahead-avatar { 943 943 - width: 28px; 944 944 - height: 28px; 945 945 - border-radius: 50%; 946 946 - flex-shrink: 0; 947 947 - } 948 948 - 949 949 - .typeahead-text { 950 950 - display: flex; 951 951 - flex-direction: column; 952 952 - min-width: 0; 953 953 - } 954 954 - 955 955 - .typeahead-name { 956 956 - font-size: var(--text-sm); 957 957 - font-weight: var(--font-medium); 958 958 - white-space: nowrap; 959 959 - overflow: hidden; 960 960 - text-overflow: ellipsis; 961 961 - } 962 962 - 963 963 - .typeahead-handle { 964 964 - font-size: var(--text-xs); 965 965 - color: var(--text-secondary); 966 966 - white-space: nowrap; 967 967 - overflow: hidden; 968 968 - text-overflow: ellipsis; 969 969 - } 970 970 - 971 971 - .resolve-status { 972 972 - display: block; 973 973 - font-size: var(--text-xs); 974 974 - color: var(--text-secondary); 975 975 - margin-top: var(--space-1); 976 976 - } 977 977 - 978 978 - .resolve-status.error { 979 979 - color: var(--error-text); 980 980 - } 981 981 - 982 982 - .resolved-info { 983 983 - display: flex; 984 984 - align-items: center; 985 985 - gap: var(--space-2); 986 986 - flex-wrap: wrap; 987 987 - margin-top: var(--space-2); 988 988 - padding: var(--space-2) var(--space-3); 989 989 - background: var(--bg-tertiary); 990 990 - border-radius: var(--radius-md); 991 991 - font-size: var(--text-xs); 992 992 - } 993 993 - 994 994 - .resolved-did { 995 995 - font-family: var(--font-mono); 996 996 - color: var(--text-secondary); 997 997 - word-break: break-all; 998 998 - } 999 999 - 1000 1000 - .resolved-handle { 1001 1001 - color: var(--text-primary); 1002 1002 - font-weight: var(--font-medium); 1003 1003 - } 1004 1004 - 1005 1005 - .badge.external { 1006 1006 - background: var(--info-bg, var(--bg-tertiary)); 1007 1007 - color: var(--info-text, var(--text-secondary)); 1008 1008 - border: 1px solid var(--info-border, var(--border-color)); 1009 1009 - } 1010 1010 - 1011 1011 - .audit-entries { 1012 1012 - display: flex; 1013 1013 - flex-direction: column; 1014 1014 - gap: var(--space-3); 1015 1015 - } 1016 1016 - 1017 1017 - .audit-entry { 1018 1018 - background: var(--bg-card); 1019 1019 - border: 1px solid var(--border-color); 1020 1020 - border-radius: var(--radius-lg); 1021 1021 - padding: var(--space-4); 1022 1022 - } 1023 1023 - 1024 1024 - .audit-entry-header { 1025 1025 - display: flex; 1026 1026 - justify-content: space-between; 1027 1027 - align-items: center; 1028 1028 - margin-bottom: var(--space-3); 1029 1029 - } 1030 1030 - 1031 1031 - .action-type { 1032 1032 - font-weight: var(--font-medium); 1033 1033 - padding: var(--space-1) var(--space-2); 1034 1034 - background: var(--accent); 1035 1035 - color: var(--text-inverse); 1036 1036 - border-radius: var(--radius-md); 1037 1037 - font-size: var(--text-sm); 1038 1038 - } 1039 1039 - 1040 1040 - .audit-entry-date { 1041 1041 - font-size: var(--text-sm); 1042 1042 - color: var(--text-secondary); 1043 1043 - } 1044 1044 - 1045 1045 - .audit-entry-details { 1046 1046 - display: flex; 1047 1047 - flex-direction: column; 1048 1048 - gap: var(--space-2); 1049 1049 - } 1050 1050 - 1051 1051 - .audit-details-value { 1052 1052 - font-family: var(--font-mono); 1053 1053 - font-size: var(--text-xs); 1054 1054 - word-break: break-word; 1055 1055 - } 1056 1056 - 1057 1057 - @media (max-width: 600px) { 1058 1058 - .item-card { 1059 1059 - flex-direction: column; 1060 1060 - align-items: stretch; 1061 1061 - } 1062 1062 - 1063 1063 - .item-actions { 1064 1064 - width: 100%; 1065 1065 - } 1066 1066 - 1067 1067 - .item-actions button, 1068 1068 - .item-actions a { 1069 1069 - width: 100%; 1070 1070 - text-align: center; 1071 1071 - } 1072 1072 - 1073 1073 - .audit-entry-header { 1074 1074 - flex-direction: column; 1075 1075 - align-items: flex-start; 1076 1076 - gap: var(--space-2); 1077 1077 - } 1078 1078 - 1079 1079 - .audit-entry-details .value.did { 1080 1080 - overflow: hidden; 1081 1081 - text-overflow: ellipsis; 1082 1082 - white-space: nowrap; 1083 1083 - max-width: 60vw; 1084 1084 - } 1085 1085 - } 1086 1086 - </style>

+2 -353

frontend/src/components/dashboard/RepoContent.svelte

··· 419 419 420 420 {:else if view === 'create'} 421 421 <form class="create-form" onsubmit={handleCreate}> 422 422 - <div class="field"> 422 422 + <div> 423 423 <label for="collection">{$_('repoExplorer.collectionNsid')}</label> 424 424 <input 425 425 id="collection" ··· 430 430 required 431 431 /> 432 432 </div> 433 433 - <div class="field"> 433 433 + <div> 434 434 <label for="rkey">{$_('repoExplorer.recordKeyOptional')}</label> 435 435 <input 436 436 id="rkey" ··· 465 465 </form> 466 466 {/if} 467 467 </div> 468 468 - 469 469 - <style> 470 470 - .repo-explorer { 471 471 - max-width: var(--width-xl); 472 472 - } 473 473 - 474 474 - .breadcrumb { 475 475 - display: flex; 476 476 - align-items: center; 477 477 - gap: var(--space-2); 478 478 - font-size: var(--text-sm); 479 479 - margin-bottom: var(--space-4); 480 480 - padding: var(--space-3) var(--space-4); 481 481 - background: var(--bg-secondary); 482 482 - border-radius: var(--radius-md); 483 483 - } 484 484 - 485 485 - .breadcrumb-sep { 486 486 - color: var(--text-muted); 487 487 - } 488 488 - 489 489 - .breadcrumb-link { 490 490 - all: unset; 491 491 - color: var(--text-secondary); 492 492 - cursor: pointer; 493 493 - font-size: inherit; 494 494 - padding: var(--space-1) var(--space-2); 495 495 - border-radius: var(--radius-sm); 496 496 - transition: color var(--transition-normal), background var(--transition-normal); 497 497 - } 498 498 - 499 499 - .breadcrumb-link:hover { 500 500 - color: var(--text-primary); 501 501 - background: var(--bg-hover); 502 502 - } 503 503 - 504 504 - .breadcrumb-current { 505 505 - color: var(--text-primary); 506 506 - font-weight: var(--font-medium); 507 507 - } 508 508 - 509 509 - .message { 510 510 - padding: var(--space-4); 511 511 - border-radius: var(--radius-lg); 512 512 - margin-bottom: var(--space-4); 513 513 - } 514 514 - 515 515 - .message.error { 516 516 - background: var(--error-bg); 517 517 - border: 1px solid var(--error-border); 518 518 - color: var(--error-text); 519 519 - display: flex; 520 520 - flex-direction: column; 521 521 - gap: var(--space-1); 522 522 - } 523 523 - 524 524 - .error-code { 525 525 - font-family: var(--font-mono); 526 526 - font-size: var(--text-sm); 527 527 - } 528 528 - 529 529 - .error-message { 530 530 - font-size: var(--text-sm); 531 531 - } 532 532 - 533 533 - .message.success { 534 534 - background: var(--success-bg); 535 535 - border: 1px solid var(--success-border); 536 536 - color: var(--success-text); 537 537 - } 538 538 - 539 539 - .loading { 540 540 - color: var(--text-secondary); 541 541 - padding: var(--space-6); 542 542 - text-align: center; 543 543 - } 544 544 - 545 545 - .toolbar { 546 546 - display: flex; 547 547 - gap: var(--space-2); 548 548 - margin-bottom: var(--space-4); 549 549 - } 550 550 - 551 551 - .filter-input { 552 552 - flex: 1; 553 553 - padding: var(--space-2) var(--space-3); 554 554 - border: 1px solid var(--border-color); 555 555 - border-radius: var(--radius-md); 556 556 - font-size: var(--text-sm); 557 557 - background: var(--bg-input); 558 558 - color: var(--text-primary); 559 559 - } 560 560 - 561 561 - .filter-input:focus { 562 562 - outline: none; 563 563 - border-color: var(--accent); 564 564 - } 565 565 - 566 566 - 567 567 - .empty { 568 568 - text-align: center; 569 569 - color: var(--text-secondary); 570 570 - padding: var(--space-8); 571 571 - background: var(--bg-secondary); 572 572 - border-radius: var(--radius-lg); 573 573 - } 574 574 - 575 575 - .collections { 576 576 - display: flex; 577 577 - flex-direction: column; 578 578 - gap: var(--space-4); 579 579 - } 580 580 - 581 581 - .collection-group { 582 582 - background: var(--bg-secondary); 583 583 - border-radius: var(--radius-lg); 584 584 - padding: var(--space-4); 585 585 - } 586 586 - 587 587 - .authority { 588 588 - margin: 0 0 var(--space-3) 0; 589 589 - font-size: var(--text-sm); 590 590 - color: var(--text-secondary); 591 591 - font-weight: var(--font-medium); 592 592 - } 593 593 - 594 594 - .nsid-list { 595 595 - list-style: none; 596 596 - padding: 0; 597 597 - margin: 0; 598 598 - display: flex; 599 599 - flex-direction: column; 600 600 - gap: var(--space-1); 601 601 - } 602 602 - 603 603 - .collection-link { 604 604 - display: flex; 605 605 - justify-content: space-between; 606 606 - align-items: center; 607 607 - width: 100%; 608 608 - padding: var(--space-3); 609 609 - background: var(--bg-card); 610 610 - border: 1px solid var(--border-color); 611 611 - border-radius: var(--radius-md); 612 612 - cursor: pointer; 613 613 - text-align: left; 614 614 - color: var(--text-primary); 615 615 - transition: background var(--transition-normal), border-color var(--transition-normal); 616 616 - } 617 617 - 618 618 - .collection-link:hover { 619 619 - background: var(--bg-hover); 620 620 - border-color: var(--accent); 621 621 - } 622 622 - 623 623 - .nsid { 624 624 - font-weight: var(--font-medium); 625 625 - color: var(--accent); 626 626 - } 627 627 - 628 628 - .arrow { 629 629 - color: var(--text-muted); 630 630 - } 631 631 - 632 632 - .collection-link:hover .arrow { 633 633 - color: var(--accent); 634 634 - } 635 635 - 636 636 - .record-list { 637 637 - list-style: none; 638 638 - padding: 0; 639 639 - margin: 0; 640 640 - display: flex; 641 641 - flex-direction: column; 642 642 - gap: var(--space-2); 643 643 - } 644 644 - 645 645 - .record-item { 646 646 - display: block; 647 647 - width: 100%; 648 648 - padding: var(--space-4); 649 649 - background: var(--bg-secondary); 650 650 - border: 1px solid var(--border-color); 651 651 - border-radius: var(--radius-lg); 652 652 - cursor: pointer; 653 653 - text-align: left; 654 654 - color: var(--text-primary); 655 655 - transition: background var(--transition-normal), border-color var(--transition-normal); 656 656 - } 657 657 - 658 658 - .record-item:hover { 659 659 - background: var(--bg-hover); 660 660 - border-color: var(--accent); 661 661 - } 662 662 - 663 663 - .record-info { 664 664 - display: flex; 665 665 - justify-content: space-between; 666 666 - margin-bottom: var(--space-2); 667 667 - } 668 668 - 669 669 - .rkey { 670 670 - font-family: var(--font-mono); 671 671 - font-weight: var(--font-medium); 672 672 - color: var(--accent); 673 673 - } 674 674 - 675 675 - .cid { 676 676 - font-family: var(--font-mono); 677 677 - font-size: var(--text-xs); 678 678 - color: var(--text-muted); 679 679 - } 680 680 - 681 681 - .record-preview { 682 682 - margin: 0; 683 683 - padding: var(--space-2); 684 684 - background: var(--bg-card); 685 685 - border-radius: var(--radius-md); 686 686 - font-family: var(--font-mono); 687 687 - font-size: var(--text-xs); 688 688 - color: var(--text-secondary); 689 689 - white-space: pre-wrap; 690 690 - word-break: break-word; 691 691 - max-height: 100px; 692 692 - overflow: hidden; 693 693 - } 694 694 - 695 695 - .record-detail { 696 696 - display: flex; 697 697 - flex-direction: column; 698 698 - gap: var(--space-5); 699 699 - } 700 700 - 701 701 - .record-meta { 702 702 - background: var(--bg-secondary); 703 703 - padding: var(--space-4); 704 704 - border-radius: var(--radius-lg); 705 705 - } 706 706 - 707 707 - .record-meta dl { 708 708 - display: grid; 709 709 - grid-template-columns: auto 1fr; 710 710 - gap: var(--space-2) var(--space-4); 711 711 - margin: 0; 712 712 - } 713 713 - 714 714 - .record-meta dt { 715 715 - font-weight: var(--font-medium); 716 716 - color: var(--text-secondary); 717 717 - } 718 718 - 719 719 - .record-meta dd { 720 720 - margin: 0; 721 721 - } 722 722 - 723 723 - .mono { 724 724 - font-family: var(--font-mono); 725 725 - font-size: var(--text-xs); 726 726 - word-break: break-all; 727 727 - } 728 728 - 729 729 - .field { 730 730 - margin-bottom: var(--space-4); 731 731 - } 732 732 - 733 733 - .field label { 734 734 - display: block; 735 735 - font-size: var(--text-sm); 736 736 - font-weight: var(--font-medium); 737 737 - margin-bottom: var(--space-1); 738 738 - } 739 739 - 740 740 - .field input { 741 741 - width: 100%; 742 742 - } 743 743 - 744 744 - .hint { 745 745 - font-size: var(--text-xs); 746 746 - color: var(--text-muted); 747 747 - margin: var(--space-1) 0 0 0; 748 748 - } 749 749 - 750 750 - .editor-container { 751 751 - margin-bottom: var(--space-4); 752 752 - } 753 753 - 754 754 - .editor-container label { 755 755 - display: block; 756 756 - font-size: var(--text-sm); 757 757 - font-weight: var(--font-medium); 758 758 - margin-bottom: var(--space-1); 759 759 - } 760 760 - 761 761 - textarea { 762 762 - width: 100%; 763 763 - min-height: 300px; 764 764 - padding: var(--space-4); 765 765 - border: 1px solid var(--border-color); 766 766 - border-radius: var(--radius-md); 767 767 - font-family: var(--font-mono); 768 768 - font-size: var(--text-sm); 769 769 - background: var(--bg-input); 770 770 - color: var(--text-primary); 771 771 - resize: vertical; 772 772 - box-sizing: border-box; 773 773 - } 774 774 - 775 775 - textarea:focus { 776 776 - outline: none; 777 777 - border-color: var(--accent); 778 778 - } 779 779 - 780 780 - textarea.has-error { 781 781 - border-color: var(--error-text); 782 782 - } 783 783 - 784 784 - .json-error { 785 785 - margin: var(--space-1) 0 0 0; 786 786 - font-size: var(--text-xs); 787 787 - color: var(--error-text); 788 788 - } 789 789 - 790 790 - .actions { 791 791 - display: flex; 792 792 - gap: var(--space-2); 793 793 - } 794 794 - 795 795 - .create-form { 796 796 - background: var(--bg-secondary); 797 797 - padding: var(--space-5); 798 798 - border-radius: var(--radius-lg); 799 799 - } 800 800 - 801 801 - @media (max-width: 600px) { 802 802 - .toolbar { 803 803 - flex-direction: column; 804 804 - } 805 805 - 806 806 - .record-meta dl { 807 807 - grid-template-columns: 1fr; 808 808 - } 809 809 - 810 810 - .actions { 811 811 - flex-direction: column; 812 812 - } 813 813 - 814 814 - .actions button { 815 815 - width: 100%; 816 816 - } 817 817 - } 818 818 - </style>

+2545

frontend/src/styles/dashboard.css

··· 1 1 + .dashboard { 2 2 + display: flex; 3 3 + height: 100vh; 4 4 + background: var(--bg-primary); 5 5 + overflow: hidden; 6 6 + } 7 7 + 8 8 + .sidebar { 9 9 + width: 320px; 10 10 + flex-shrink: 0; 11 11 + background: var(--bg-secondary); 12 12 + display: flex; 13 13 + flex-direction: column; 14 14 + height: 100%; 15 15 + overflow: hidden; 16 16 + } 17 17 + 18 18 + .sidebar-header { 19 19 + padding: var(--space-6); 20 20 + border-bottom: 1px solid var(--border-color); 21 21 + } 22 22 + 23 23 + .sidebar-header h1 { 24 24 + margin: 0; 25 25 + font-size: var(--text-2xl); 26 26 + } 27 27 + 28 28 + .sidebar-subtitle { 29 29 + margin: var(--space-1) 0 var(--space-4) 0; 30 30 + font-size: var(--text-sm); 31 31 + color: var(--text-secondary); 32 32 + } 33 33 + 34 34 + .account-section { 35 35 + display: flex; 36 36 + flex-direction: column; 37 37 + gap: var(--space-3); 38 38 + } 39 39 + 40 40 + .account-dropdown { 41 41 + position: relative; 42 42 + width: 100%; 43 43 + } 44 44 + 45 45 + .account-trigger { 46 46 + display: flex; 47 47 + align-items: center; 48 48 + justify-content: space-between; 49 49 + gap: var(--space-3); 50 50 + width: 100%; 51 51 + padding: var(--space-3) var(--space-4); 52 52 + background: var(--bg-card); 53 53 + border: 1px solid var(--border-color); 54 54 + cursor: pointer; 55 55 + color: var(--text-primary); 56 56 + text-align: left; 57 57 + } 58 58 + 59 59 + .account-trigger .account-handle { 60 60 + font-weight: var(--font-medium); 61 61 + overflow: hidden; 62 62 + text-overflow: ellipsis; 63 63 + white-space: nowrap; 64 64 + } 65 65 + 66 66 + .account-trigger:hover:not(:disabled) { 67 67 + border-color: var(--secondary); 68 68 + background: var(--bg-tertiary); 69 69 + } 70 70 + 71 71 + .account-trigger:disabled { 72 72 + opacity: 0.6; 73 73 + cursor: not-allowed; 74 74 + } 75 75 + 76 76 + .dropdown-arrow { 77 77 + font-size: 0.625rem; 78 78 + color: var(--text-secondary); 79 79 + flex-shrink: 0; 80 80 + } 81 81 + 82 82 + .dropdown-menu { 83 83 + position: absolute; 84 84 + top: 100%; 85 85 + left: 0; 86 86 + right: 0; 87 87 + margin-top: var(--space-2); 88 88 + background: var(--bg-card); 89 89 + box-shadow: var(--shadow-lg); 90 90 + z-index: 100; 91 91 + overflow: hidden; 92 92 + } 93 93 + 94 94 + .account-details { 95 95 + display: flex; 96 96 + flex-direction: column; 97 97 + gap: var(--space-2); 98 98 + padding: 0 var(--space-1); 99 99 + } 100 100 + 101 101 + .account-details .account-did { 102 102 + font-size: var(--text-xs); 103 103 + font-family: var(--font-mono); 104 104 + color: var(--text-muted); 105 105 + overflow: hidden; 106 106 + text-overflow: ellipsis; 107 107 + white-space: nowrap; 108 108 + } 109 109 + 110 110 + .account-status { 111 111 + display: flex; 112 112 + gap: var(--space-2); 113 113 + flex-wrap: wrap; 114 114 + } 115 115 + 116 116 + .dropdown-section { 117 117 + padding: var(--space-3) 0; 118 118 + } 119 119 + 120 120 + .dropdown-label { 121 121 + display: block; 122 122 + padding: var(--space-2) var(--space-5); 123 123 + font-size: var(--text-xs); 124 124 + color: var(--text-muted); 125 125 + text-transform: uppercase; 126 126 + letter-spacing: 0.05em; 127 127 + } 128 128 + 129 129 + button.dropdown-item { 130 130 + display: block; 131 131 + width: 100%; 132 132 + padding: var(--space-3) var(--space-5); 133 133 + background: transparent; 134 134 + border: none; 135 135 + text-align: left; 136 136 + cursor: pointer; 137 137 + color: var(--text-primary); 138 138 + font-size: var(--text-sm); 139 139 + } 140 140 + 141 141 + button.dropdown-item:hover:not(:disabled) { 142 142 + background: var(--bg-hover); 143 143 + color: var(--text-primary); 144 144 + } 145 145 + 146 146 + button.dropdown-item.logout-item { 147 147 + color: var(--error-text); 148 148 + } 149 149 + 150 150 + .dropdown-divider { 151 151 + height: 1px; 152 152 + background: var(--border-color); 153 153 + } 154 154 + 155 155 + .status-banner { 156 156 + margin: var(--space-4); 157 157 + padding: var(--space-4); 158 158 + } 159 159 + 160 160 + .status-banner.deactivated { 161 161 + background: var(--warning-bg); 162 162 + } 163 163 + 164 164 + .status-banner.deactivated strong { 165 165 + color: var(--warning-text); 166 166 + } 167 167 + 168 168 + .status-banner.deactivated p { 169 169 + margin: var(--space-2) 0 0 0; 170 170 + color: var(--warning-text); 171 171 + font-size: var(--text-sm); 172 172 + } 173 173 + 174 174 + .status-banner.migrated { 175 175 + background: var(--info-bg); 176 176 + } 177 177 + 178 178 + .status-banner.migrated strong { 179 179 + color: var(--info-text); 180 180 + } 181 181 + 182 182 + .status-banner.migrated p { 183 183 + margin: var(--space-2) 0 0 0; 184 184 + color: var(--info-text); 185 185 + font-size: var(--text-sm); 186 186 + } 187 187 + 188 188 + .nav-list { 189 189 + flex: 1; 190 190 + padding: var(--space-2); 191 191 + overflow-y: auto; 192 192 + } 193 193 + 194 194 + .nav-item { 195 195 + display: flex; 196 196 + align-items: center; 197 197 + justify-content: space-between; 198 198 + width: 100%; 199 199 + padding: var(--space-4); 200 200 + background: transparent; 201 201 + border: none; 202 202 + cursor: pointer; 203 203 + color: var(--text-primary); 204 204 + font-size: var(--text-base); 205 205 + text-align: left; 206 206 + } 207 207 + 208 208 + .nav-item:hover:not(.active) { 209 209 + background: var(--bg-tertiary); 210 210 + color: var(--secondary); 211 211 + } 212 212 + 213 213 + .nav-item:hover:not(.active) .nav-chevron { 214 214 + color: var(--secondary); 215 215 + } 216 216 + 217 217 + .nav-item.active { 218 218 + background: var(--accent); 219 219 + color: var(--text-inverse); 220 220 + } 221 221 + 222 222 + .nav-item.active .nav-chevron { 223 223 + color: var(--text-inverse); 224 224 + } 225 225 + 226 226 + .nav-item.highlight-admin { 227 227 + color: var(--secondary); 228 228 + } 229 229 + 230 230 + .nav-item.highlight-admin.active { 231 231 + background: var(--accent); 232 232 + color: var(--text-inverse); 233 233 + } 234 234 + 235 235 + .nav-item.highlight-migrated { 236 236 + color: var(--info-text); 237 237 + } 238 238 + 239 239 + .nav-item.highlight-migrated.active { 240 240 + background: var(--info-text); 241 241 + color: var(--text-inverse); 242 242 + } 243 243 + 244 244 + .nav-item.highlight-did-web { 245 245 + color: var(--secondary); 246 246 + } 247 247 + 248 248 + .nav-item.highlight-did-web.active { 249 249 + background: var(--accent); 250 250 + color: var(--text-inverse); 251 251 + } 252 252 + 253 253 + .nav-chevron { 254 254 + display: none; 255 255 + } 256 256 + 257 257 + .content { 258 258 + flex: 1; 259 259 + display: flex; 260 260 + flex-direction: column; 261 261 + min-width: 0; 262 262 + height: 100%; 263 263 + overflow: hidden; 264 264 + background: var(--bg-primary); 265 265 + } 266 266 + 267 267 + .content-header { 268 268 + display: none; 269 269 + padding: var(--space-4) var(--space-6); 270 270 + text-align: center; 271 271 + } 272 272 + 273 273 + .content-header h2 { 274 274 + margin: 0; 275 275 + font-size: var(--text-lg); 276 276 + } 277 277 + 278 278 + .back-button { 279 279 + display: flex; 280 280 + align-items: center; 281 281 + gap: var(--space-1); 282 282 + padding: 0; 283 283 + background: transparent; 284 284 + border: none; 285 285 + color: var(--secondary); 286 286 + font-size: var(--text-base); 287 287 + cursor: pointer; 288 288 + margin-bottom: var(--space-2); 289 289 + } 290 290 + 291 291 + .back-arrow { 292 292 + font-size: var(--text-xl); 293 293 + font-weight: 300; 294 294 + } 295 295 + 296 296 + .content-body { 297 297 + flex: 1; 298 298 + padding: var(--space-6); 299 299 + overflow-y: auto; 300 300 + } 301 301 + 302 302 + .content-body > * { 303 303 + max-width: var(--width-lg); 304 304 + margin: 0 auto; 305 305 + width: 100%; 306 306 + } 307 307 + 308 308 + .loading-state .sidebar { 309 309 + opacity: 0.7; 310 310 + } 311 311 + 312 312 + .skeleton-header { 313 313 + height: 100px; 314 314 + background: var(--bg-tertiary); 315 315 + margin: var(--space-6); 316 316 + } 317 317 + 318 318 + .skeleton-nav-item { 319 319 + height: 48px; 320 320 + background: var(--bg-tertiary); 321 321 + margin: var(--space-2) var(--space-2); 322 322 + } 323 323 + 324 324 + .skeleton-content { 325 325 + height: 300px; 326 326 + background: var(--bg-secondary); 327 327 + margin: var(--space-6); 328 328 + } 329 329 + 330 330 + @media (max-width: 768px) { 331 331 + .dashboard { 332 332 + flex-direction: column; 333 333 + height: 100vh; 334 334 + } 335 335 + 336 336 + .sidebar { 337 337 + width: 100%; 338 338 + height: auto; 339 339 + flex: 1; 340 340 + border-right: none; 341 341 + border-bottom: 1px solid var(--border-color); 342 342 + overflow-y: auto; 343 343 + } 344 344 + 345 345 + .sidebar.hidden-mobile { 346 346 + display: none; 347 347 + } 348 348 + 349 349 + .content { 350 350 + display: flex; 351 351 + flex: 1; 352 352 + height: auto; 353 353 + } 354 354 + 355 355 + .content.hidden-mobile { 356 356 + display: none; 357 357 + } 358 358 + 359 359 + .content-header { 360 360 + display: block; 361 361 + } 362 362 + } 363 363 + 364 364 + @media (min-width: 769px) { 365 365 + .back-button { 366 366 + display: none; 367 367 + } 368 368 + 369 369 + .content-header { 370 370 + display: block; 371 371 + padding: var(--space-6); 372 372 + } 373 373 + 374 374 + .content-header h2 { 375 375 + font-size: var(--text-xl); 376 376 + } 377 377 + } 378 378 + 379 379 + .overview { 380 380 + background: var(--bg-secondary); 381 381 + padding: var(--space-6); 382 382 + } 383 383 + 384 384 + .overview dl { 385 385 + display: grid; 386 386 + grid-template-columns: auto 1fr; 387 387 + gap: var(--space-3) var(--space-5); 388 388 + margin: 0; 389 389 + } 390 390 + 391 391 + .overview dt { 392 392 + font-weight: var(--font-medium); 393 393 + color: var(--text-secondary); 394 394 + } 395 395 + 396 396 + .overview dd { 397 397 + margin: 0; 398 398 + min-width: 0; 399 399 + } 400 400 + 401 401 + .overview .mono { 402 402 + font-family: var(--font-mono); 403 403 + font-size: var(--text-sm); 404 404 + word-break: break-all; 405 405 + } 406 406 + 407 407 + .badge.deactivated { 408 408 + background: var(--warning-bg); 409 409 + color: var(--warning-text); 410 410 + } 411 411 + 412 412 + .badge.migrated { 413 413 + background: var(--info-bg); 414 414 + color: var(--info-text); 415 415 + } 416 416 + 417 417 + @media (max-width: 500px) { 418 418 + .overview dl { 419 419 + grid-template-columns: 1fr; 420 420 + gap: var(--space-2); 421 421 + } 422 422 + 423 423 + .overview dt { 424 424 + margin-top: var(--space-3); 425 425 + } 426 426 + 427 427 + .overview dt:first-child { 428 428 + margin-top: 0; 429 429 + } 430 430 + } 431 431 + 432 432 + 433 433 + .current { 434 434 + color: var(--text-secondary); 435 435 + font-size: var(--text-sm); 436 436 + margin: 0 0 var(--space-3) 0; 437 437 + } 438 438 + 439 439 + .language-select { 440 440 + width: 100%; 441 441 + } 442 442 + 443 443 + .backup-list, 444 444 + .passkey-list, 445 445 + .sso-list, 446 446 + .did-editor .list { 447 447 + list-style: none; 448 448 + padding: 0; 449 449 + margin: 0 0 var(--space-4) 0; 450 450 + display: flex; 451 451 + flex-direction: column; 452 452 + gap: var(--space-2); 453 453 + } 454 454 + 455 455 + .backup-item { 456 456 + display: flex; 457 457 + justify-content: space-between; 458 458 + align-items: center; 459 459 + padding: var(--space-3); 460 460 + background: var(--bg-card); 461 461 + } 462 462 + 463 463 + .backup-info { 464 464 + display: flex; 465 465 + gap: var(--space-3); 466 466 + font-size: var(--text-sm); 467 467 + } 468 468 + 469 469 + .backup-date { 470 470 + font-weight: var(--font-medium); 471 471 + } 472 472 + 473 473 + .backup-size { 474 474 + color: var(--text-secondary); 475 475 + } 476 476 + 477 477 + .backup-actions { 478 478 + display: flex; 479 479 + justify-content: space-between; 480 480 + align-items: center; 481 481 + margin-bottom: var(--space-4); 482 482 + gap: var(--space-3); 483 483 + flex-wrap: wrap; 484 484 + } 485 485 + 486 486 + .backup-toggle { 487 487 + margin-bottom: var(--space-3); 488 488 + } 489 489 + 490 490 + .backup-toggle .toggle-label { 491 491 + display: flex; 492 492 + align-items: center; 493 493 + gap: var(--space-2); 494 494 + cursor: pointer; 495 495 + font-size: var(--text-sm); 496 496 + white-space: nowrap; 497 497 + } 498 498 + 499 499 + .backup-toggle .toggle-label input[type="checkbox"] { 500 500 + width: 16px; 501 501 + height: 16px; 502 502 + flex-shrink: 0; 503 503 + } 504 504 + 505 505 + .backup-item-actions, 506 506 + .controllers .item-actions { 507 507 + display: flex; 508 508 + gap: var(--space-2); 509 509 + } 510 510 + 511 511 + .restore-section { 512 512 + margin-top: var(--space-5); 513 513 + padding-top: var(--space-4); 514 514 + border-top: 1px solid var(--border-color); 515 515 + } 516 516 + 517 517 + .restore-section h4 { 518 518 + margin: 0 0 var(--space-2) 0; 519 519 + font-size: var(--text-sm); 520 520 + font-weight: var(--font-medium); 521 521 + } 522 522 + 523 523 + .restore-section .hint { 524 524 + margin-bottom: var(--space-3); 525 525 + } 526 526 + 527 527 + .restore-form { 528 528 + display: flex; 529 529 + gap: var(--space-2); 530 530 + flex-wrap: wrap; 531 531 + } 532 532 + 533 533 + .restore-form input[type="file"] { 534 534 + flex: 1; 535 535 + min-width: 200px; 536 536 + } 537 537 + 538 538 + .restore-preview { 539 539 + margin-top: var(--space-2); 540 540 + font-size: var(--text-sm); 541 541 + color: var(--text-secondary); 542 542 + display: flex; 543 543 + gap: var(--space-2); 544 544 + flex-wrap: wrap; 545 545 + } 546 546 + 547 547 + .restore-preview .file-name { 548 548 + font-weight: var(--font-medium); 549 549 + color: var(--text-primary); 550 550 + } 551 551 + 552 552 + .danger-zone h3 { 553 553 + color: var(--error-text); 554 554 + } 555 555 + 556 556 + .warning-text { 557 557 + color: var(--text-secondary); 558 558 + font-size: var(--text-sm); 559 559 + margin: 0 0 var(--space-4) 0; 560 560 + } 561 561 + 562 562 + .hint.success { 563 563 + color: var(--success-text); 564 564 + background: var(--success-bg); 565 565 + padding: var(--space-2); 566 566 + margin-bottom: var(--space-3); 567 567 + } 568 568 + 569 569 + .byo-handle { 570 570 + margin-top: var(--space-3); 571 571 + } 572 572 + 573 573 + .verification-info { 574 574 + background: var(--bg-card); 575 575 + padding: var(--space-4); 576 576 + margin-bottom: var(--space-4); 577 577 + } 578 578 + 579 579 + .verification-info h4 { 580 580 + margin: 0 0 var(--space-2) 0; 581 581 + font-size: var(--text-sm); 582 582 + font-weight: var(--font-medium); 583 583 + } 584 584 + 585 585 + .verification-info h5 { 586 586 + margin: var(--space-3) 0 var(--space-1) 0; 587 587 + font-size: var(--text-xs); 588 588 + font-weight: var(--font-medium); 589 589 + color: var(--text-secondary); 590 590 + } 591 591 + 592 592 + .verification-info p { 593 593 + margin: var(--space-1) 0; 594 594 + font-size: var(--text-xs); 595 595 + color: var(--text-secondary); 596 596 + } 597 597 + 598 598 + .method { 599 599 + margin-top: var(--space-3); 600 600 + padding-top: var(--space-3); 601 601 + border-top: 1px solid var(--border-color); 602 602 + } 603 603 + 604 604 + .method:first-of-type { 605 605 + margin-top: var(--space-2); 606 606 + padding-top: 0; 607 607 + border-top: none; 608 608 + } 609 609 + 610 610 + code.record { 611 611 + display: block; 612 612 + background: var(--bg-input); 613 613 + padding: var(--space-2); 614 614 + font-size: var(--text-xs); 615 615 + word-break: break-all; 616 616 + margin: var(--space-1) 0; 617 617 + } 618 618 + 619 619 + .security .loading { 620 620 + color: var(--text-secondary); 621 621 + padding: var(--space-4); 622 622 + } 623 623 + 624 624 + .status { 625 625 + display: block; 626 626 + padding: var(--space-2) var(--space-3); 627 627 + font-size: var(--text-sm); 628 628 + margin-bottom: var(--space-4); 629 629 + width: fit-content; 630 630 + } 631 631 + 632 632 + .status.success { 633 633 + background: var(--success-bg); 634 634 + color: var(--success-text); 635 635 + } 636 636 + 637 637 + .status.warning { 638 638 + background: var(--warning-bg); 639 639 + color: var(--warning-text); 640 640 + } 641 641 + 642 642 + .status.info { 643 643 + background: var(--accent-muted); 644 644 + color: var(--secondary); 645 645 + } 646 646 + 647 647 + .passkey-item { 648 648 + display: flex; 649 649 + justify-content: space-between; 650 650 + align-items: center; 651 651 + padding: var(--space-3); 652 652 + background: var(--bg-card); 653 653 + gap: var(--space-3); 654 654 + } 655 655 + 656 656 + .passkey-info { 657 657 + display: flex; 658 658 + flex-direction: column; 659 659 + gap: var(--space-1); 660 660 + min-width: 0; 661 661 + } 662 662 + 663 663 + .passkey-name { 664 664 + font-weight: var(--font-medium); 665 665 + } 666 666 + 667 667 + .passkey-meta { 668 668 + font-size: var(--text-xs); 669 669 + color: var(--text-secondary); 670 670 + } 671 671 + 672 672 + .passkey-actions, 673 673 + .edit-actions { 674 674 + display: flex; 675 675 + gap: var(--space-2); 676 676 + flex-shrink: 0; 677 677 + } 678 678 + 679 679 + .passkey-edit { 680 680 + display: flex; 681 681 + gap: var(--space-2); 682 682 + align-items: center; 683 683 + width: 100%; 684 684 + } 685 685 + 686 686 + .passkey-edit input { 687 687 + flex: 1; 688 688 + } 689 689 + 690 690 + .add-passkey { 691 691 + display: flex; 692 692 + gap: var(--space-2); 693 693 + margin-top: var(--space-4); 694 694 + padding-top: var(--space-4); 695 695 + border-top: 1px solid var(--border-color); 696 696 + } 697 697 + 698 698 + .add-passkey input { 699 699 + flex: 1; 700 700 + } 701 701 + 702 702 + .password-actions, 703 703 + .totp-actions, 704 704 + .export-buttons { 705 705 + display: flex; 706 706 + gap: var(--space-2); 707 707 + flex-wrap: wrap; 708 708 + } 709 709 + 710 710 + .remove-password-form { 711 711 + background: var(--error-bg); 712 712 + padding: var(--space-4); 713 713 + } 714 714 + 715 715 + .remove-password-form .warning-text { 716 716 + color: var(--error-text); 717 717 + font-size: var(--text-sm); 718 718 + margin: 0 0 var(--space-4) 0; 719 719 + } 720 720 + 721 721 + .remove-password-form .actions { 722 722 + gap: var(--space-2); 723 723 + } 724 724 + 725 725 + .setup-step { 726 726 + background: var(--bg-card); 727 727 + padding: var(--space-4); 728 728 + } 729 729 + 730 730 + .setup-step p { 731 731 + color: var(--text-secondary); 732 732 + font-size: var(--text-sm); 733 733 + margin: 0 0 var(--space-4) 0; 734 734 + } 735 735 + 736 736 + .setup-step h4 { 737 737 + margin: 0 0 var(--space-2) 0; 738 738 + } 739 739 + 740 740 + .qr-container { 741 741 + display: flex; 742 742 + justify-content: center; 743 743 + margin: var(--space-4) 0; 744 744 + } 745 745 + 746 746 + .qr-code { 747 747 + width: 180px; 748 748 + height: 180px; 749 749 + image-rendering: pixelated; 750 750 + } 751 751 + 752 752 + .manual-entry { 753 753 + margin-bottom: var(--space-4); 754 754 + font-size: var(--text-sm); 755 755 + } 756 756 + 757 757 + .manual-entry summary { 758 758 + cursor: pointer; 759 759 + color: var(--secondary); 760 760 + } 761 761 + 762 762 + .secret-code { 763 763 + display: block; 764 764 + margin-top: var(--space-2); 765 765 + padding: var(--space-2); 766 766 + background: var(--bg-input); 767 767 + word-break: break-all; 768 768 + font-size: var(--text-xs); 769 769 + } 770 770 + 771 771 + .code-input { 772 772 + font-size: var(--text-xl); 773 773 + letter-spacing: 0.3em; 774 774 + text-align: center; 775 775 + max-width: 180px; 776 776 + margin: 0 auto var(--space-4) auto; 777 777 + display: block; 778 778 + } 779 779 + 780 780 + .security .warning-text { 781 781 + color: var(--error-text); 782 782 + font-size: var(--text-sm); 783 783 + margin-bottom: var(--space-4); 784 784 + } 785 785 + 786 786 + .backup-codes { 787 787 + display: grid; 788 788 + grid-template-columns: repeat(2, 1fr); 789 789 + gap: var(--space-2); 790 790 + margin-bottom: var(--space-4); 791 791 + } 792 792 + 793 793 + .backup-code { 794 794 + padding: var(--space-2); 795 795 + background: var(--bg-input); 796 796 + text-align: center; 797 797 + font-size: var(--text-sm); 798 798 + font-family: var(--font-mono); 799 799 + } 800 800 + 801 801 + .security .inline-form { 802 802 + margin-top: var(--space-4); 803 803 + } 804 804 + 805 805 + .security .inline-form.danger-form { 806 806 + border-color: var(--error-border); 807 807 + } 808 808 + 809 809 + .security .inline-form h4 { 810 810 + margin: 0 0 var(--space-3) 0; 811 811 + font-size: var(--text-base); 812 812 + } 813 813 + 814 814 + .sso-item { 815 815 + display: flex; 816 816 + justify-content: space-between; 817 817 + align-items: center; 818 818 + padding: var(--space-3); 819 819 + background: var(--bg-card); 820 820 + gap: var(--space-3); 821 821 + } 822 822 + 823 823 + .sso-info, 824 824 + .password-info, 825 825 + .channel-info { 826 826 + display: flex; 827 827 + flex-direction: column; 828 828 + gap: var(--space-1); 829 829 + } 830 830 + 831 831 + .sso-provider { 832 832 + font-weight: var(--font-medium); 833 833 + } 834 834 + 835 835 + .sso-id { 836 836 + font-size: var(--text-xs); 837 837 + color: var(--text-secondary); 838 838 + } 839 839 + 840 840 + .sso-meta { 841 841 + font-size: var(--text-xs); 842 842 + color: var(--text-secondary); 843 843 + } 844 844 + 845 845 + .sso-providers { 846 846 + padding-top: var(--space-4); 847 847 + border-top: 1px solid var(--border-color); 848 848 + } 849 849 + 850 850 + .sso-providers h4 { 851 851 + margin: 0 0 var(--space-3) 0; 852 852 + font-size: var(--text-sm); 853 853 + color: var(--text-secondary); 854 854 + } 855 855 + 856 856 + .provider-buttons { 857 857 + display: flex; 858 858 + flex-wrap: wrap; 859 859 + gap: var(--space-2); 860 860 + } 861 861 + 862 862 + .provider-btn { 863 863 + display: flex; 864 864 + align-items: center; 865 865 + gap: var(--space-2); 866 866 + padding: var(--space-2) var(--space-4); 867 867 + background: var(--bg-card); 868 868 + border: 1px solid var(--border-color); 869 869 + cursor: pointer; 870 870 + color: var(--text-primary); 871 871 + } 872 872 + 873 873 + .provider-btn:hover:not(:disabled) { 874 874 + border-color: var(--secondary); 875 875 + } 876 876 + 877 877 + .provider-btn:disabled { 878 878 + opacity: 0.6; 879 879 + cursor: not-allowed; 880 880 + } 881 881 + 882 882 + .linked-badge { 883 883 + font-size: var(--text-xs); 884 884 + padding: var(--space-1) var(--space-2); 885 885 + background: var(--success-bg); 886 886 + color: var(--success-text); 887 887 + } 888 888 + 889 889 + .empty-hint { 890 890 + color: var(--text-secondary); 891 891 + font-size: var(--text-sm); 892 892 + margin: 0; 893 893 + } 894 894 + 895 895 + .hint-text { 896 896 + color: var(--text-secondary); 897 897 + font-size: var(--text-sm); 898 898 + margin: var(--space-2) 0 0 0; 899 899 + } 900 900 + 901 901 + .device-list { 902 902 + display: flex; 903 903 + flex-direction: column; 904 904 + gap: var(--space-3); 905 905 + } 906 906 + 907 907 + .device-card { 908 908 + display: flex; 909 909 + align-items: center; 910 910 + gap: var(--space-3); 911 911 + padding: var(--space-3); 912 912 + background: var(--bg-card); 913 913 + } 914 914 + 915 915 + .device-header { 916 916 + display: flex; 917 917 + align-items: center; 918 918 + gap: var(--space-2); 919 919 + flex: 1; 920 920 + min-width: 0; 921 921 + } 922 922 + 923 923 + .device-name { 924 924 + font-weight: var(--font-medium); 925 925 + white-space: nowrap; 926 926 + overflow: hidden; 927 927 + text-overflow: ellipsis; 928 928 + } 929 929 + 930 930 + .edit-name-input { 931 931 + flex: 1; 932 932 + padding: var(--space-2); 933 933 + font-size: var(--text-sm); 934 934 + min-width: 0; 935 935 + } 936 936 + 937 937 + .device-details { 938 938 + display: flex; 939 939 + gap: var(--space-3); 940 940 + flex-shrink: 0; 941 941 + } 942 942 + 943 943 + .device-details .detail { 944 944 + font-size: var(--text-xs); 945 945 + color: var(--text-secondary); 946 946 + white-space: nowrap; 947 947 + } 948 948 + 949 949 + .device-details .expiring-soon { 950 950 + color: var(--warning-text); 951 951 + } 952 952 + 953 953 + @media (max-width: 500px) { 954 954 + .passkey-item { 955 955 + flex-direction: column; 956 956 + align-items: stretch; 957 957 + } 958 958 + 959 959 + .passkey-actions { 960 960 + width: 100%; 961 961 + } 962 962 + 963 963 + .passkey-actions button { 964 964 + flex: 1; 965 965 + } 966 966 + 967 967 + .add-passkey { 968 968 + flex-direction: column; 969 969 + } 970 970 + 971 971 + .device-card { 972 972 + flex-direction: column; 973 973 + align-items: stretch; 974 974 + } 975 975 + 976 976 + .device-details { 977 977 + flex-direction: column; 978 978 + gap: var(--space-1); 979 979 + } 980 980 + 981 981 + .device-card > button { 982 982 + width: 100%; 983 983 + } 984 984 + } 985 985 + 986 986 + .sessions-list { 987 987 + display: flex; 988 988 + flex-direction: column; 989 989 + gap: var(--space-4); 990 990 + } 991 991 + 992 992 + .session-card { 993 993 + background: var(--bg-secondary); 994 994 + padding: var(--space-4); 995 995 + display: flex; 996 996 + justify-content: space-between; 997 997 + align-items: center; 998 998 + gap: var(--space-4); 999 999 + } 1000 1000 + 1001 1001 + .session-card.current { 1002 1002 + border-color: var(--secondary); 1003 1003 + background: var(--bg-card); 1004 1004 + } 1005 1005 + 1006 1006 + .session-info { 1007 1007 + flex: 1; 1008 1008 + min-width: 0; 1009 1009 + } 1010 1010 + 1011 1011 + .session-header { 1012 1012 + margin-bottom: var(--space-2); 1013 1013 + display: flex; 1014 1014 + align-items: center; 1015 1015 + gap: var(--space-2); 1016 1016 + flex-wrap: wrap; 1017 1017 + } 1018 1018 + 1019 1019 + .client-name { 1020 1020 + font-weight: var(--font-medium); 1021 1021 + color: var(--text-primary); 1022 1022 + } 1023 1023 + 1024 1024 + .badge.current { 1025 1025 + background: var(--accent); 1026 1026 + color: var(--text-inverse); 1027 1027 + } 1028 1028 + 1029 1029 + .badge.type { 1030 1030 + background: var(--bg-secondary); 1031 1031 + color: var(--text-secondary); 1032 1032 + } 1033 1033 + 1034 1034 + .badge.type.oauth { 1035 1035 + background: var(--success-bg); 1036 1036 + color: var(--success-text); 1037 1037 + border-color: var(--success-border); 1038 1038 + } 1039 1039 + 1040 1040 + .session-details { 1041 1041 + display: flex; 1042 1042 + flex-direction: column; 1043 1043 + gap: var(--space-1); 1044 1044 + } 1045 1045 + 1046 1046 + .sessions .detail { 1047 1047 + font-size: var(--text-sm); 1048 1048 + } 1049 1049 + 1050 1050 + .sessions .detail .label { 1051 1051 + color: var(--text-secondary); 1052 1052 + margin-right: var(--space-2); 1053 1053 + } 1054 1054 + 1055 1055 + .sessions .detail .value { 1056 1056 + color: var(--text-primary); 1057 1057 + } 1058 1058 + 1059 1059 + .actions-bar { 1060 1060 + margin-top: var(--space-4); 1061 1061 + display: flex; 1062 1062 + gap: var(--space-2); 1063 1063 + flex-wrap: wrap; 1064 1064 + } 1065 1065 + 1066 1066 + @media (max-width: 500px) { 1067 1067 + .session-card { 1068 1068 + flex-direction: column; 1069 1069 + align-items: stretch; 1070 1070 + } 1071 1071 + 1072 1072 + .revoke-btn { 1073 1073 + width: 100%; 1074 1074 + } 1075 1075 + } 1076 1076 + 1077 1077 + .new-password-banner { 1078 1078 + background: var(--warning-bg); 1079 1079 + padding: var(--space-4); 1080 1080 + margin-bottom: var(--space-6); 1081 1081 + } 1082 1082 + 1083 1083 + .new-password-banner .password-label { 1084 1084 + font-size: var(--text-sm); 1085 1085 + color: var(--text-primary); 1086 1086 + margin-bottom: var(--space-2); 1087 1087 + } 1088 1088 + 1089 1089 + .new-password-banner .warning { 1090 1090 + color: var(--warning-text); 1091 1091 + font-weight: var(--font-medium); 1092 1092 + margin: 0 0 var(--space-3) 0; 1093 1093 + } 1094 1094 + 1095 1095 + .acknowledge-label { 1096 1096 + display: flex; 1097 1097 + align-items: center; 1098 1098 + gap: var(--space-2); 1099 1099 + margin-bottom: var(--space-3); 1100 1100 + cursor: pointer; 1101 1101 + font-size: var(--text-sm); 1102 1102 + color: var(--text-primary); 1103 1103 + } 1104 1104 + 1105 1105 + .acknowledge-label input[type="checkbox"] { 1106 1106 + width: 18px; 1107 1107 + height: 18px; 1108 1108 + accent-color: var(--accent); 1109 1109 + } 1110 1110 + 1111 1111 + .password-display { 1112 1112 + display: flex; 1113 1113 + gap: var(--space-2); 1114 1114 + margin-bottom: var(--space-3); 1115 1115 + } 1116 1116 + 1117 1117 + .password-display code { 1118 1118 + flex: 1; 1119 1119 + padding: var(--space-3); 1120 1120 + background: var(--bg-card); 1121 1121 + font-family: var(--font-mono); 1122 1122 + word-break: break-all; 1123 1123 + } 1124 1124 + 1125 1125 + .app-passwords .copy-btn { 1126 1126 + padding: var(--space-2) var(--space-3); 1127 1127 + font-size: var(--text-sm); 1128 1128 + } 1129 1129 + 1130 1130 + .dismiss-btn { 1131 1131 + width: 100%; 1132 1132 + } 1133 1133 + 1134 1134 + .create-form { 1135 1135 + background: var(--bg-secondary); 1136 1136 + padding: var(--space-5); 1137 1137 + margin-bottom: var(--space-6); 1138 1138 + } 1139 1139 + 1140 1140 + form.create-form > div { 1141 1141 + margin-bottom: var(--space-4); 1142 1142 + } 1143 1143 + 1144 1144 + .scope-selector { 1145 1145 + display: flex; 1146 1146 + flex-direction: column; 1147 1147 + gap: var(--space-2); 1148 1148 + margin-bottom: var(--space-4); 1149 1149 + } 1150 1150 + 1151 1151 + .scope-label { 1152 1152 + font-size: var(--text-sm); 1153 1153 + color: var(--text-secondary); 1154 1154 + } 1155 1155 + 1156 1156 + .scope-buttons { 1157 1157 + display: flex; 1158 1158 + flex-wrap: wrap; 1159 1159 + gap: var(--space-2); 1160 1160 + } 1161 1161 + 1162 1162 + .scope-btn { 1163 1163 + padding: var(--space-2) var(--space-4); 1164 1164 + background: var(--bg-card); 1165 1165 + border: 1px solid var(--border-color); 1166 1166 + color: var(--text-primary); 1167 1167 + cursor: pointer; 1168 1168 + font-size: var(--text-sm); 1169 1169 + } 1170 1170 + 1171 1171 + .scope-btn:hover:not(:disabled) { 1172 1172 + background: var(--bg-hover); 1173 1173 + border-color: var(--secondary); 1174 1174 + } 1175 1175 + 1176 1176 + .scope-btn.selected { 1177 1177 + background: var(--accent); 1178 1178 + border-color: var(--accent); 1179 1179 + color: var(--text-inverse); 1180 1180 + } 1181 1181 + 1182 1182 + .scope-btn:disabled { 1183 1183 + opacity: 0.6; 1184 1184 + cursor: not-allowed; 1185 1185 + } 1186 1186 + 1187 1187 + .password-list, 1188 1188 + .code-list { 1189 1189 + list-style: none; 1190 1190 + padding: 0; 1191 1191 + margin: 0; 1192 1192 + display: flex; 1193 1193 + flex-direction: column; 1194 1194 + gap: var(--space-3); 1195 1195 + } 1196 1196 + 1197 1197 + .password-item { 1198 1198 + display: flex; 1199 1199 + justify-content: space-between; 1200 1200 + align-items: center; 1201 1201 + padding: var(--space-4); 1202 1202 + background: var(--bg-secondary); 1203 1203 + gap: var(--space-4); 1204 1204 + } 1205 1205 + 1206 1206 + .password-name { 1207 1207 + font-weight: var(--font-medium); 1208 1208 + } 1209 1209 + 1210 1210 + .password-meta { 1211 1211 + display: flex; 1212 1212 + align-items: center; 1213 1213 + flex-wrap: wrap; 1214 1214 + gap: var(--space-2); 1215 1215 + font-size: var(--text-sm); 1216 1216 + color: var(--text-secondary); 1217 1217 + } 1218 1218 + 1219 1219 + .scope-badge { 1220 1220 + font-size: var(--text-xs); 1221 1221 + padding: var(--space-1) var(--space-2); 1222 1222 + background: var(--bg-card); 1223 1223 + color: var(--text-secondary); 1224 1224 + } 1225 1225 + 1226 1226 + .scope-badge.full { 1227 1227 + background: var(--success-bg); 1228 1228 + border-color: var(--success-border); 1229 1229 + color: var(--success-text); 1230 1230 + } 1231 1231 + 1232 1232 + .controller-badge { 1233 1233 + font-size: var(--text-xs); 1234 1234 + padding: var(--space-1) var(--space-2); 1235 1235 + background: var(--accent-muted); 1236 1236 + color: var(--secondary); 1237 1237 + cursor: help; 1238 1238 + } 1239 1239 + 1240 1240 + .app-passwords .date { 1241 1241 + color: var(--text-secondary); 1242 1242 + } 1243 1243 + 1244 1244 + @media (max-width: 500px) { 1245 1245 + .password-item { 1246 1246 + flex-direction: column; 1247 1247 + align-items: stretch; 1248 1248 + } 1249 1249 + 1250 1250 + .app-passwords .delete-btn { 1251 1251 + width: 100%; 1252 1252 + } 1253 1253 + 1254 1254 + .password-display { 1255 1255 + flex-direction: column; 1256 1256 + } 1257 1257 + } 1258 1258 + 1259 1259 + .channel-options { 1260 1260 + display: flex; 1261 1261 + flex-direction: column; 1262 1262 + gap: var(--space-2); 1263 1263 + } 1264 1264 + 1265 1265 + .channel-option { 1266 1266 + display: flex; 1267 1267 + align-items: center; 1268 1268 + gap: var(--space-3); 1269 1269 + padding: var(--space-3) var(--space-4); 1270 1270 + background: var(--bg-card); 1271 1271 + cursor: pointer; 1272 1272 + } 1273 1273 + 1274 1274 + .channel-option input[type="radio"] { 1275 1275 + margin: 0; 1276 1276 + width: 18px; 1277 1277 + height: 18px; 1278 1278 + flex-shrink: 0; 1279 1279 + accent-color: var(--accent); 1280 1280 + } 1281 1281 + 1282 1282 + .channel-option:hover:not(.disabled) { 1283 1283 + border-color: var(--secondary); 1284 1284 + } 1285 1285 + 1286 1286 + .channel-option.disabled, 1287 1287 + .channel-option.unavailable { 1288 1288 + opacity: 0.6; 1289 1289 + cursor: not-allowed; 1290 1290 + } 1291 1291 + 1292 1292 + .channel-name { 1293 1293 + font-weight: var(--font-medium); 1294 1294 + } 1295 1295 + 1296 1296 + .channel-desc { 1297 1297 + font-size: var(--text-xs); 1298 1298 + color: var(--text-secondary); 1299 1299 + } 1300 1300 + 1301 1301 + .channel-hint { 1302 1302 + font-size: var(--text-xs); 1303 1303 + color: var(--text-muted); 1304 1304 + margin-left: auto; 1305 1305 + } 1306 1306 + 1307 1307 + .channel-config { 1308 1308 + display: flex; 1309 1309 + flex-direction: column; 1310 1310 + gap: var(--space-4); 1311 1311 + } 1312 1312 + 1313 1313 + .config-item { 1314 1314 + display: flex; 1315 1315 + flex-direction: column; 1316 1316 + gap: var(--space-2); 1317 1317 + } 1318 1318 + 1319 1319 + .config-header { 1320 1320 + display: flex; 1321 1321 + align-items: center; 1322 1322 + justify-content: space-between; 1323 1323 + } 1324 1324 + 1325 1325 + .config-input { 1326 1326 + display: flex; 1327 1327 + gap: var(--space-2); 1328 1328 + } 1329 1329 + 1330 1330 + .config-input input { 1331 1331 + flex: 1; 1332 1332 + } 1333 1333 + 1334 1334 + input.readonly { 1335 1335 + background: var(--bg-tertiary); 1336 1336 + color: var(--text-secondary); 1337 1337 + } 1338 1338 + 1339 1339 + .comms .status { 1340 1340 + padding: var(--space-1) var(--space-2); 1341 1341 + font-size: var(--text-xs); 1342 1342 + } 1343 1343 + 1344 1344 + .comms .status.verified { 1345 1345 + background: var(--success-bg); 1346 1346 + color: var(--success-text); 1347 1347 + } 1348 1348 + 1349 1349 + .comms .status.unverified { 1350 1350 + background: var(--warning-bg); 1351 1351 + color: var(--warning-text); 1352 1352 + } 1353 1353 + 1354 1354 + .telegram-verify-prompt, 1355 1355 + .discord-verify-prompt { 1356 1356 + display: flex; 1357 1357 + flex-direction: column; 1358 1358 + gap: var(--space-2); 1359 1359 + padding: var(--space-3) var(--space-4); 1360 1360 + background: var(--bg-card); 1361 1361 + font-size: var(--text-sm); 1362 1362 + color: var(--text-primary); 1363 1363 + } 1364 1364 + 1365 1365 + .manual-hint { 1366 1366 + font-size: var(--text-xs); 1367 1367 + color: var(--text-secondary); 1368 1368 + } 1369 1369 + 1370 1370 + .verify-form { 1371 1371 + display: flex; 1372 1372 + flex-direction: column; 1373 1373 + gap: var(--space-2); 1374 1374 + } 1375 1375 + 1376 1376 + .verify-form button { 1377 1377 + padding: var(--space-2) var(--space-3); 1378 1378 + font-size: var(--text-sm); 1379 1379 + } 1380 1380 + 1381 1381 + .comms .actions { 1382 1382 + margin-bottom: var(--space-5); 1383 1383 + } 1384 1384 + 1385 1385 + .history-section { 1386 1386 + margin-top: var(--space-6); 1387 1387 + } 1388 1388 + 1389 1389 + .message-list { 1390 1390 + display: flex; 1391 1391 + flex-direction: column; 1392 1392 + gap: var(--space-3); 1393 1393 + } 1394 1394 + 1395 1395 + .message-item { 1396 1396 + background: var(--bg-card); 1397 1397 + padding: var(--space-3); 1398 1398 + } 1399 1399 + 1400 1400 + .message-header { 1401 1401 + display: flex; 1402 1402 + gap: var(--space-2); 1403 1403 + align-items: center; 1404 1404 + margin-bottom: var(--space-2); 1405 1405 + } 1406 1406 + 1407 1407 + .message-type { 1408 1408 + font-weight: var(--font-medium); 1409 1409 + font-size: var(--text-sm); 1410 1410 + } 1411 1411 + 1412 1412 + .message-channel { 1413 1413 + font-size: var(--text-xs); 1414 1414 + padding: var(--space-1) var(--space-2); 1415 1415 + background: var(--bg-secondary); 1416 1416 + color: var(--text-secondary); 1417 1417 + } 1418 1418 + 1419 1419 + .message-status { 1420 1420 + font-size: var(--text-xs); 1421 1421 + padding: var(--space-1) var(--space-2); 1422 1422 + margin-left: auto; 1423 1423 + } 1424 1424 + 1425 1425 + .message-status.sent { 1426 1426 + background: var(--success-bg); 1427 1427 + color: var(--success-text); 1428 1428 + } 1429 1429 + 1430 1430 + .message-status.failed { 1431 1431 + background: var(--error-bg); 1432 1432 + color: var(--error-text); 1433 1433 + } 1434 1434 + 1435 1435 + .message-subject { 1436 1436 + font-weight: var(--font-medium); 1437 1437 + font-size: var(--text-sm); 1438 1438 + margin-bottom: var(--space-1); 1439 1439 + } 1440 1440 + 1441 1441 + .message-body { 1442 1442 + font-size: var(--text-sm); 1443 1443 + color: var(--text-secondary); 1444 1444 + white-space: pre-wrap; 1445 1445 + } 1446 1446 + 1447 1447 + .message-date { 1448 1448 + font-size: var(--text-xs); 1449 1449 + color: var(--text-muted); 1450 1450 + margin-top: var(--space-2); 1451 1451 + } 1452 1452 + 1453 1453 + .breadcrumb { 1454 1454 + display: flex; 1455 1455 + align-items: center; 1456 1456 + gap: var(--space-2); 1457 1457 + font-size: var(--text-sm); 1458 1458 + margin-bottom: var(--space-4); 1459 1459 + padding: var(--space-3) var(--space-4); 1460 1460 + background: var(--bg-secondary); 1461 1461 + } 1462 1462 + 1463 1463 + .breadcrumb-sep { 1464 1464 + color: var(--text-muted); 1465 1465 + } 1466 1466 + 1467 1467 + .breadcrumb-link { 1468 1468 + all: unset; 1469 1469 + color: var(--text-secondary); 1470 1470 + cursor: pointer; 1471 1471 + font-size: inherit; 1472 1472 + padding: var(--space-1) var(--space-2); 1473 1473 + } 1474 1474 + 1475 1475 + button.breadcrumb-link:hover { 1476 1476 + color: var(--text-primary); 1477 1477 + background: var(--bg-hover); 1478 1478 + } 1479 1479 + 1480 1480 + .breadcrumb-current { 1481 1481 + color: var(--text-primary); 1482 1482 + font-weight: var(--font-medium); 1483 1483 + } 1484 1484 + 1485 1485 + .repo-explorer .message { 1486 1486 + margin-bottom: var(--space-4); 1487 1487 + } 1488 1488 + 1489 1489 + .repo-explorer .message.error { 1490 1490 + display: flex; 1491 1491 + flex-direction: column; 1492 1492 + gap: var(--space-1); 1493 1493 + } 1494 1494 + 1495 1495 + .error-code { 1496 1496 + font-family: var(--font-mono); 1497 1497 + font-size: var(--text-sm); 1498 1498 + } 1499 1499 + 1500 1500 + .error-message { 1501 1501 + font-size: var(--text-sm); 1502 1502 + } 1503 1503 + 1504 1504 + .toolbar { 1505 1505 + display: flex; 1506 1506 + gap: var(--space-2); 1507 1507 + margin-bottom: var(--space-4); 1508 1508 + } 1509 1509 + 1510 1510 + .filter-input { 1511 1511 + flex: 1; 1512 1512 + padding: var(--space-2) var(--space-3); 1513 1513 + font-size: var(--text-sm); 1514 1514 + } 1515 1515 + 1516 1516 + .collections { 1517 1517 + display: flex; 1518 1518 + flex-direction: column; 1519 1519 + gap: var(--space-4); 1520 1520 + } 1521 1521 + 1522 1522 + .collection-group { 1523 1523 + background: var(--bg-secondary); 1524 1524 + padding: var(--space-4); 1525 1525 + } 1526 1526 + 1527 1527 + .authority { 1528 1528 + margin: 0 0 var(--space-3) 0; 1529 1529 + font-size: var(--text-sm); 1530 1530 + color: var(--text-secondary); 1531 1531 + font-weight: var(--font-medium); 1532 1532 + } 1533 1533 + 1534 1534 + .nsid-list { 1535 1535 + list-style: none; 1536 1536 + padding: 0; 1537 1537 + margin: 0; 1538 1538 + display: flex; 1539 1539 + flex-direction: column; 1540 1540 + gap: var(--space-1); 1541 1541 + } 1542 1542 + 1543 1543 + .collection-link { 1544 1544 + display: flex; 1545 1545 + justify-content: space-between; 1546 1546 + align-items: center; 1547 1547 + width: 100%; 1548 1548 + padding: var(--space-3); 1549 1549 + background: var(--bg-card); 1550 1550 + cursor: pointer; 1551 1551 + text-align: left; 1552 1552 + color: var(--text-primary); 1553 1553 + } 1554 1554 + 1555 1555 + button.collection-link:hover { 1556 1556 + background: var(--bg-hover); 1557 1557 + border-color: var(--secondary); 1558 1558 + } 1559 1559 + 1560 1560 + .nsid { 1561 1561 + font-weight: var(--font-medium); 1562 1562 + color: var(--secondary); 1563 1563 + } 1564 1564 + 1565 1565 + .arrow { 1566 1566 + color: var(--text-muted); 1567 1567 + } 1568 1568 + 1569 1569 + .collection-link:hover .arrow { 1570 1570 + color: var(--secondary); 1571 1571 + } 1572 1572 + 1573 1573 + .record-list, 1574 1574 + .user-list { 1575 1575 + list-style: none; 1576 1576 + padding: 0; 1577 1577 + margin: 0; 1578 1578 + display: flex; 1579 1579 + flex-direction: column; 1580 1580 + gap: var(--space-2); 1581 1581 + } 1582 1582 + 1583 1583 + .record-item { 1584 1584 + display: block; 1585 1585 + width: 100%; 1586 1586 + padding: var(--space-4); 1587 1587 + background: var(--bg-secondary); 1588 1588 + cursor: pointer; 1589 1589 + text-align: left; 1590 1590 + color: var(--text-primary); 1591 1591 + } 1592 1592 + 1593 1593 + button.record-item:hover { 1594 1594 + background: var(--bg-hover); 1595 1595 + border-color: var(--secondary); 1596 1596 + } 1597 1597 + 1598 1598 + .record-info { 1599 1599 + display: flex; 1600 1600 + justify-content: space-between; 1601 1601 + margin-bottom: var(--space-2); 1602 1602 + } 1603 1603 + 1604 1604 + .rkey { 1605 1605 + font-family: var(--font-mono); 1606 1606 + font-weight: var(--font-medium); 1607 1607 + color: var(--secondary); 1608 1608 + } 1609 1609 + 1610 1610 + .cid { 1611 1611 + font-family: var(--font-mono); 1612 1612 + font-size: var(--text-xs); 1613 1613 + color: var(--text-muted); 1614 1614 + } 1615 1615 + 1616 1616 + .record-preview { 1617 1617 + margin: 0; 1618 1618 + padding: var(--space-2); 1619 1619 + background: var(--bg-card); 1620 1620 + font-family: var(--font-mono); 1621 1621 + font-size: var(--text-xs); 1622 1622 + color: var(--text-secondary); 1623 1623 + white-space: pre-wrap; 1624 1624 + word-break: break-word; 1625 1625 + max-height: 100px; 1626 1626 + overflow: hidden; 1627 1627 + } 1628 1628 + 1629 1629 + .record-detail { 1630 1630 + display: flex; 1631 1631 + flex-direction: column; 1632 1632 + gap: var(--space-5); 1633 1633 + } 1634 1634 + 1635 1635 + .record-meta { 1636 1636 + background: var(--bg-secondary); 1637 1637 + padding: var(--space-4); 1638 1638 + } 1639 1639 + 1640 1640 + .record-meta dl { 1641 1641 + display: grid; 1642 1642 + grid-template-columns: auto 1fr; 1643 1643 + gap: var(--space-2) var(--space-4); 1644 1644 + margin: 0; 1645 1645 + } 1646 1646 + 1647 1647 + .record-meta dt { 1648 1648 + font-weight: var(--font-medium); 1649 1649 + color: var(--text-secondary); 1650 1650 + } 1651 1651 + 1652 1652 + .record-meta dd { 1653 1653 + margin: 0; 1654 1654 + } 1655 1655 + 1656 1656 + .editor-container { 1657 1657 + margin-bottom: var(--space-4); 1658 1658 + } 1659 1659 + 1660 1660 + .repo-explorer textarea { 1661 1661 + min-height: 300px; 1662 1662 + font-family: var(--font-mono); 1663 1663 + font-size: var(--text-sm); 1664 1664 + resize: vertical; 1665 1665 + } 1666 1666 + 1667 1667 + .repo-explorer textarea.has-error { 1668 1668 + border-color: var(--error-text); 1669 1669 + } 1670 1670 + 1671 1671 + .json-error { 1672 1672 + margin: var(--space-1) 0 0 0; 1673 1673 + font-size: var(--text-xs); 1674 1674 + color: var(--error-text); 1675 1675 + } 1676 1676 + 1677 1677 + .repo-explorer .create-form { 1678 1678 + background: var(--bg-secondary); 1679 1679 + padding: var(--space-5); 1680 1680 + } 1681 1681 + 1682 1682 + @media (max-width: 600px) { 1683 1683 + .toolbar { 1684 1684 + flex-direction: column; 1685 1685 + } 1686 1686 + 1687 1687 + .record-meta dl { 1688 1688 + grid-template-columns: 1fr; 1689 1689 + } 1690 1690 + 1691 1691 + .repo-explorer .actions { 1692 1692 + flex-direction: column; 1693 1693 + } 1694 1694 + 1695 1695 + .repo-explorer .actions button { 1696 1696 + width: 100%; 1697 1697 + } 1698 1698 + } 1699 1699 + 1700 1700 + .controllers { 1701 1701 + } 1702 1702 + 1703 1703 + .controllers .section { 1704 1704 + background: var(--bg-secondary); 1705 1705 + padding: var(--space-5); 1706 1706 + margin-bottom: var(--space-5); 1707 1707 + } 1708 1708 + 1709 1709 + .controllers .section-header { 1710 1710 + margin-bottom: var(--space-4); 1711 1711 + } 1712 1712 + 1713 1713 + .controllers .section-header h3 { 1714 1714 + margin: 0 0 var(--space-1) 0; 1715 1715 + font-size: var(--text-base); 1716 1716 + } 1717 1717 + 1718 1718 + .constraint-notice { 1719 1719 + background: var(--bg-tertiary); 1720 1720 + padding: var(--space-4); 1721 1721 + margin-top: var(--space-4); 1722 1722 + } 1723 1723 + 1724 1724 + .constraint-notice p { 1725 1725 + margin: 0; 1726 1726 + color: var(--text-secondary); 1727 1727 + font-size: var(--text-sm); 1728 1728 + } 1729 1729 + 1730 1730 + .items-list { 1731 1731 + display: flex; 1732 1732 + flex-direction: column; 1733 1733 + gap: var(--space-4); 1734 1734 + margin-bottom: var(--space-4); 1735 1735 + } 1736 1736 + 1737 1737 + .item-card { 1738 1738 + background: var(--bg-card); 1739 1739 + padding: var(--space-4); 1740 1740 + display: flex; 1741 1741 + justify-content: space-between; 1742 1742 + align-items: center; 1743 1743 + gap: var(--space-4); 1744 1744 + flex-wrap: wrap; 1745 1745 + } 1746 1746 + 1747 1747 + .item-card.inactive { 1748 1748 + opacity: 0.6; 1749 1749 + } 1750 1750 + 1751 1751 + .controllers .item-info { 1752 1752 + flex: 1; 1753 1753 + min-width: 200px; 1754 1754 + } 1755 1755 + 1756 1756 + .item-header { 1757 1757 + margin-bottom: var(--space-2); 1758 1758 + display: flex; 1759 1759 + align-items: center; 1760 1760 + gap: var(--space-2); 1761 1761 + flex-wrap: wrap; 1762 1762 + } 1763 1763 + 1764 1764 + .item-handle { 1765 1765 + font-weight: var(--font-semibold); 1766 1766 + color: var(--text-primary); 1767 1767 + } 1768 1768 + 1769 1769 + .badge.scope { 1770 1770 + background: var(--accent); 1771 1771 + color: var(--text-inverse); 1772 1772 + } 1773 1773 + 1774 1774 + .badge.inactive { 1775 1775 + background: var(--error-bg); 1776 1776 + color: var(--error-text); 1777 1777 + } 1778 1778 + 1779 1779 + .controllers .item-details { 1780 1780 + display: flex; 1781 1781 + flex-direction: column; 1782 1782 + gap: var(--space-1); 1783 1783 + } 1784 1784 + 1785 1785 + .controllers .detail { 1786 1786 + font-size: var(--text-sm); 1787 1787 + } 1788 1788 + 1789 1789 + .controllers .detail .label { 1790 1790 + color: var(--text-secondary); 1791 1791 + margin-right: var(--space-2); 1792 1792 + } 1793 1793 + 1794 1794 + .controllers .detail .value { 1795 1795 + color: var(--text-primary); 1796 1796 + } 1797 1797 + 1798 1798 + .controllers .detail .value.did { 1799 1799 + font-family: var(--font-mono); 1800 1800 + font-size: var(--text-xs); 1801 1801 + word-break: break-all; 1802 1802 + } 1803 1803 + 1804 1804 + .btn-link { 1805 1805 + display: inline-block; 1806 1806 + padding: var(--space-2) var(--space-4); 1807 1807 + border: 1px solid var(--secondary); 1808 1808 + background: transparent; 1809 1809 + color: var(--secondary); 1810 1810 + font-size: var(--text-sm); 1811 1811 + font-weight: var(--font-medium); 1812 1812 + text-decoration: none; 1813 1813 + } 1814 1814 + 1815 1815 + a.btn-link:hover { 1816 1816 + background: var(--accent); 1817 1817 + color: var(--text-inverse); 1818 1818 + } 1819 1819 + 1820 1820 + .controllers .danger-outline { 1821 1821 + padding: var(--space-2) var(--space-4); 1822 1822 + border: 1px solid var(--error-text); 1823 1823 + font-size: var(--text-sm); 1824 1824 + } 1825 1825 + 1826 1826 + .controllers .ghost { 1827 1827 + border: 1px solid var(--border-color); 1828 1828 + } 1829 1829 + 1830 1830 + .controllers .ghost:hover { 1831 1831 + border-color: var(--secondary); 1832 1832 + } 1833 1833 + 1834 1834 + .form-card { 1835 1835 + background: var(--bg-card); 1836 1836 + padding: var(--space-5); 1837 1837 + margin-top: var(--space-4); 1838 1838 + } 1839 1839 + 1840 1840 + .form-card h4 { 1841 1841 + margin: 0 0 var(--space-4) 0; 1842 1842 + font-size: var(--text-base); 1843 1843 + } 1844 1844 + 1845 1845 + .controllers .warning-header { 1846 1846 + font-weight: var(--font-semibold); 1847 1847 + color: var(--warning-text); 1848 1848 + margin-bottom: var(--space-2); 1849 1849 + } 1850 1850 + 1851 1851 + .controllers .warning-text { 1852 1852 + margin: 0 0 var(--space-3) 0; 1853 1853 + color: var(--warning-text); 1854 1854 + font-size: var(--text-sm); 1855 1855 + line-height: 1.5; 1856 1856 + } 1857 1857 + 1858 1858 + .warning-bullets { 1859 1859 + margin: 0; 1860 1860 + padding-left: var(--space-5); 1861 1861 + color: var(--warning-text); 1862 1862 + font-size: var(--text-sm); 1863 1863 + line-height: 1.6; 1864 1864 + } 1865 1865 + 1866 1866 + .controller-search { 1867 1867 + position: relative; 1868 1868 + } 1869 1869 + 1870 1870 + .search-wrapper { 1871 1871 + position: relative; 1872 1872 + } 1873 1873 + 1874 1874 + .typeahead-dropdown { 1875 1875 + position: absolute; 1876 1876 + top: 100%; 1877 1877 + left: 0; 1878 1878 + right: 0; 1879 1879 + z-index: 10; 1880 1880 + background: var(--bg-card); 1881 1881 + box-shadow: var(--shadow-lg); 1882 1882 + max-height: 240px; 1883 1883 + overflow-y: auto; 1884 1884 + } 1885 1885 + 1886 1886 + .typeahead-item { 1887 1887 + display: flex; 1888 1888 + align-items: center; 1889 1889 + gap: var(--space-2); 1890 1890 + width: 100%; 1891 1891 + padding: var(--space-2) var(--space-3); 1892 1892 + border: none; 1893 1893 + background: transparent; 1894 1894 + cursor: pointer; 1895 1895 + text-align: left; 1896 1896 + color: var(--text-primary); 1897 1897 + } 1898 1898 + 1899 1899 + button.typeahead-item:hover { 1900 1900 + background: var(--bg-tertiary); 1901 1901 + } 1902 1902 + 1903 1903 + .typeahead-avatar { 1904 1904 + width: 28px; 1905 1905 + height: 28px; 1906 1906 + flex-shrink: 0; 1907 1907 + } 1908 1908 + 1909 1909 + .typeahead-text { 1910 1910 + display: flex; 1911 1911 + flex-direction: column; 1912 1912 + min-width: 0; 1913 1913 + } 1914 1914 + 1915 1915 + .typeahead-name { 1916 1916 + font-size: var(--text-sm); 1917 1917 + font-weight: var(--font-medium); 1918 1918 + white-space: nowrap; 1919 1919 + overflow: hidden; 1920 1920 + text-overflow: ellipsis; 1921 1921 + } 1922 1922 + 1923 1923 + .typeahead-handle { 1924 1924 + font-size: var(--text-xs); 1925 1925 + color: var(--text-secondary); 1926 1926 + white-space: nowrap; 1927 1927 + overflow: hidden; 1928 1928 + text-overflow: ellipsis; 1929 1929 + } 1930 1930 + 1931 1931 + .resolve-status { 1932 1932 + display: block; 1933 1933 + font-size: var(--text-xs); 1934 1934 + color: var(--text-secondary); 1935 1935 + margin-top: var(--space-1); 1936 1936 + } 1937 1937 + 1938 1938 + .resolve-status.error { 1939 1939 + color: var(--error-text); 1940 1940 + } 1941 1941 + 1942 1942 + .resolved-info { 1943 1943 + display: flex; 1944 1944 + align-items: center; 1945 1945 + gap: var(--space-2); 1946 1946 + flex-wrap: wrap; 1947 1947 + margin-top: var(--space-2); 1948 1948 + padding: var(--space-2) var(--space-3); 1949 1949 + background: var(--bg-tertiary); 1950 1950 + font-size: var(--text-xs); 1951 1951 + } 1952 1952 + 1953 1953 + .resolved-did { 1954 1954 + font-family: var(--font-mono); 1955 1955 + color: var(--text-secondary); 1956 1956 + word-break: break-all; 1957 1957 + } 1958 1958 + 1959 1959 + .resolved-handle { 1960 1960 + color: var(--text-primary); 1961 1961 + font-weight: var(--font-medium); 1962 1962 + } 1963 1963 + 1964 1964 + .badge.external { 1965 1965 + background: var(--info-bg); 1966 1966 + color: var(--info-text); 1967 1967 + } 1968 1968 + 1969 1969 + .audit-entries { 1970 1970 + display: flex; 1971 1971 + flex-direction: column; 1972 1972 + gap: var(--space-3); 1973 1973 + } 1974 1974 + 1975 1975 + .audit-entry { 1976 1976 + background: var(--bg-card); 1977 1977 + padding: var(--space-4); 1978 1978 + } 1979 1979 + 1980 1980 + .audit-entry-header { 1981 1981 + display: flex; 1982 1982 + justify-content: space-between; 1983 1983 + align-items: center; 1984 1984 + margin-bottom: var(--space-3); 1985 1985 + } 1986 1986 + 1987 1987 + .action-type { 1988 1988 + font-weight: var(--font-medium); 1989 1989 + padding: var(--space-1) var(--space-2); 1990 1990 + background: var(--accent); 1991 1991 + color: var(--text-inverse); 1992 1992 + font-size: var(--text-sm); 1993 1993 + } 1994 1994 + 1995 1995 + .audit-entry-date { 1996 1996 + font-size: var(--text-sm); 1997 1997 + color: var(--text-secondary); 1998 1998 + } 1999 1999 + 2000 2000 + .audit-entry-details { 2001 2001 + display: flex; 2002 2002 + flex-direction: column; 2003 2003 + gap: var(--space-2); 2004 2004 + } 2005 2005 + 2006 2006 + .audit-details-value { 2007 2007 + font-family: var(--font-mono); 2008 2008 + font-size: var(--text-xs); 2009 2009 + word-break: break-word; 2010 2010 + } 2011 2011 + 2012 2012 + @media (max-width: 600px) { 2013 2013 + .item-card { 2014 2014 + flex-direction: column; 2015 2015 + align-items: stretch; 2016 2016 + } 2017 2017 + 2018 2018 + .controllers .item-actions { 2019 2019 + width: 100%; 2020 2020 + } 2021 2021 + 2022 2022 + .controllers .item-actions button, 2023 2023 + .controllers .item-actions a { 2024 2024 + width: 100%; 2025 2025 + text-align: center; 2026 2026 + } 2027 2027 + 2028 2028 + .audit-entry-header { 2029 2029 + flex-direction: column; 2030 2030 + align-items: flex-start; 2031 2031 + gap: var(--space-2); 2032 2032 + } 2033 2033 + 2034 2034 + .audit-entry-details .value.did { 2035 2035 + overflow: hidden; 2036 2036 + text-overflow: ellipsis; 2037 2037 + white-space: nowrap; 2038 2038 + max-width: 60vw; 2039 2039 + } 2040 2040 + } 2041 2041 + 2042 2042 + .created-code { 2043 2043 + padding: var(--space-5); 2044 2044 + background: var(--success-bg); 2045 2045 + margin-bottom: var(--space-6); 2046 2046 + } 2047 2047 + 2048 2048 + .created-code h3 { 2049 2049 + margin: 0 0 var(--space-4) 0; 2050 2050 + color: var(--success-text); 2051 2051 + } 2052 2052 + 2053 2053 + .code-display { 2054 2054 + display: flex; 2055 2055 + align-items: center; 2056 2056 + gap: var(--space-4); 2057 2057 + background: var(--bg-card); 2058 2058 + padding: var(--space-4); 2059 2059 + margin-bottom: var(--space-4); 2060 2060 + } 2061 2061 + 2062 2062 + .code-display code { 2063 2063 + font-size: var(--text-lg); 2064 2064 + font-family: var(--font-mono); 2065 2065 + flex: 1; 2066 2066 + } 2067 2067 + 2068 2068 + .list-section h2 { 2069 2069 + font-size: var(--text-lg); 2070 2070 + margin: 0 0 var(--space-4) 0; 2071 2071 + } 2072 2072 + 2073 2073 + .code-item { 2074 2074 + padding: var(--space-4); 2075 2075 + background: var(--bg-secondary); 2076 2076 + } 2077 2077 + 2078 2078 + .skeleton-item { 2079 2079 + pointer-events: none; 2080 2080 + } 2081 2081 + 2082 2082 + .code-item.disabled { 2083 2083 + opacity: 0.6; 2084 2084 + } 2085 2085 + 2086 2086 + .code-item.used { 2087 2087 + background: var(--bg-tertiary); 2088 2088 + } 2089 2089 + 2090 2090 + .code-main { 2091 2091 + display: flex; 2092 2092 + align-items: center; 2093 2093 + gap: var(--space-3); 2094 2094 + margin-bottom: var(--space-2); 2095 2095 + } 2096 2096 + 2097 2097 + .code-value { 2098 2098 + font-family: var(--font-mono); 2099 2099 + font-size: var(--text-sm); 2100 2100 + padding: var(--space-2) var(--space-3); 2101 2101 + background: var(--bg-card); 2102 2102 + } 2103 2103 + 2104 2104 + .invite-codes .copy-btn { 2105 2105 + flex-shrink: 0; 2106 2106 + } 2107 2107 + 2108 2108 + .code-meta { 2109 2109 + display: flex; 2110 2110 + gap: var(--space-4); 2111 2111 + font-size: var(--text-sm); 2112 2112 + align-items: center; 2113 2113 + flex-wrap: wrap; 2114 2114 + } 2115 2115 + 2116 2116 + .invite-codes .date { 2117 2117 + color: var(--text-secondary); 2118 2118 + } 2119 2119 + 2120 2120 + .invite-codes .status { 2121 2121 + padding: var(--space-1) var(--space-2); 2122 2122 + font-size: var(--text-xs); 2123 2123 + } 2124 2124 + 2125 2125 + .invite-codes .status.available { 2126 2126 + background: var(--success-bg); 2127 2127 + color: var(--success-text); 2128 2128 + } 2129 2129 + 2130 2130 + .invite-codes .status.used { 2131 2131 + background: var(--bg-secondary); 2132 2132 + color: var(--text-secondary); 2133 2133 + } 2134 2134 + 2135 2135 + .invite-codes .status.spent { 2136 2136 + background: var(--bg-tertiary); 2137 2137 + color: var(--text-tertiary); 2138 2138 + } 2139 2139 + 2140 2140 + .invite-codes .status.disabled { 2141 2141 + background: var(--error-bg); 2142 2142 + color: var(--error-text); 2143 2143 + } 2144 2144 + 2145 2145 + @media (max-width: 500px) { 2146 2146 + .code-display { 2147 2147 + flex-direction: column; 2148 2148 + align-items: stretch; 2149 2149 + } 2150 2150 + 2151 2151 + .code-main { 2152 2152 + flex-direction: column; 2153 2153 + align-items: stretch; 2154 2154 + } 2155 2155 + } 2156 2156 + 2157 2157 + .did-editor .loading, 2158 2158 + .did-editor .empty { 2159 2159 + color: var(--text-secondary); 2160 2160 + padding: var(--space-4); 2161 2161 + } 2162 2162 + 2163 2163 + .did-editor section h3 { 2164 2164 + margin: 0 0 var(--space-2) 0; 2165 2165 + font-size: var(--text-base); 2166 2166 + } 2167 2167 + 2168 2168 + .help-section { 2169 2169 + background: var(--bg-card); 2170 2170 + } 2171 2171 + 2172 2172 + .help-text { 2173 2173 + color: var(--text-secondary); 2174 2174 + font-size: var(--text-sm); 2175 2175 + margin: 0; 2176 2176 + line-height: 1.5; 2177 2177 + } 2178 2178 + 2179 2179 + .did-editor .description, 2180 2180 + .migration .description { 2181 2181 + margin: 0 0 var(--space-4) 0; 2182 2182 + } 2183 2183 + 2184 2184 + .did-editor .list-item { 2185 2185 + display: flex; 2186 2186 + justify-content: space-between; 2187 2187 + align-items: flex-start; 2188 2188 + padding: var(--space-3); 2189 2189 + background: var(--bg-card); 2190 2190 + gap: var(--space-3); 2191 2191 + } 2192 2192 + 2193 2193 + 2194 2194 + 2195 2195 + .item-id { 2196 2196 + font-weight: var(--font-medium); 2197 2197 + font-family: var(--font-mono); 2198 2198 + font-size: var(--text-sm); 2199 2199 + } 2200 2200 + 2201 2201 + .item-type { 2202 2202 + font-size: var(--text-xs); 2203 2203 + padding: var(--space-1) var(--space-2); 2204 2204 + background: var(--accent); 2205 2205 + color: var(--text-inverse); 2206 2206 + } 2207 2207 + 2208 2208 + .item-key { 2209 2209 + font-family: var(--font-mono); 2210 2210 + font-size: var(--text-xs); 2211 2211 + color: var(--text-secondary); 2212 2212 + word-break: break-all; 2213 2213 + } 2214 2214 + 2215 2215 + .did-editor .item-handle { 2216 2216 + font-family: var(--font-mono); 2217 2217 + font-size: var(--text-sm); 2218 2218 + } 2219 2219 + 2220 2220 + .did-editor .field { 2221 2221 + display: flex; 2222 2222 + flex-direction: column; 2223 2223 + gap: var(--space-1); 2224 2224 + } 2225 2225 + 2226 2226 + .did-editor .field label { 2227 2227 + font-size: var(--text-sm); 2228 2228 + font-weight: var(--font-medium); 2229 2229 + color: var(--text-secondary); 2230 2230 + } 2231 2231 + 2232 2232 + .add-form { 2233 2233 + display: grid; 2234 2234 + grid-template-columns: 1fr 2fr auto; 2235 2235 + gap: var(--space-3); 2236 2236 + align-items: end; 2237 2237 + } 2238 2238 + 2239 2239 + .add-form.single { 2240 2240 + grid-template-columns: 1fr auto; 2241 2241 + } 2242 2242 + 2243 2243 + .preview-section pre { 2244 2244 + background: var(--bg-card); 2245 2245 + padding: var(--space-4); 2246 2246 + overflow-x: auto; 2247 2247 + font-size: var(--text-xs); 2248 2248 + font-family: var(--font-mono); 2249 2249 + } 2250 2250 + 2251 2251 + .did-editor .actions { 2252 2252 + display: flex; 2253 2253 + justify-content: flex-end; 2254 2254 + } 2255 2255 + 2256 2256 + @media (max-width: 600px) { 2257 2257 + .add-form { 2258 2258 + grid-template-columns: 1fr; 2259 2259 + } 2260 2260 + 2261 2261 + .did-editor .list-item { 2262 2262 + flex-direction: column; 2263 2263 + } 2264 2264 + 2265 2265 + .did-editor .remove-btn { 2266 2266 + width: 100%; 2267 2267 + } 2268 2268 + } 2269 2269 + 2270 2270 + .migration section h3 { 2271 2271 + margin: 0 0 var(--space-2) 0; 2272 2272 + font-size: var(--text-base); 2273 2273 + } 2274 2274 + 2275 2275 + .feature-list { 2276 2276 + list-style: none; 2277 2277 + padding: 0; 2278 2278 + margin: 0 0 var(--space-4) 0; 2279 2279 + } 2280 2280 + 2281 2281 + .feature-list li { 2282 2282 + padding: var(--space-2) 0; 2283 2283 + padding-left: var(--space-4); 2284 2284 + position: relative; 2285 2285 + font-size: var(--text-sm); 2286 2286 + color: var(--text-secondary); 2287 2287 + } 2288 2288 + 2289 2289 + .feature-list li::before { 2290 2290 + content: '\2713'; 2291 2291 + position: absolute; 2292 2292 + left: 0; 2293 2293 + color: var(--success-text); 2294 2294 + } 2295 2295 + 2296 2296 + .info-section { 2297 2297 + background: var(--info-bg); 2298 2298 + } 2299 2299 + 2300 2300 + .info-section h3 { 2301 2301 + color: var(--info-text); 2302 2302 + } 2303 2303 + 2304 2304 + .info-section p { 2305 2305 + color: var(--info-text); 2306 2306 + font-size: var(--text-sm); 2307 2307 + margin: 0; 2308 2308 + } 2309 2309 + 2310 2310 + .stats-grid { 2311 2311 + display: grid; 2312 2312 + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 2313 2313 + gap: var(--space-4); 2314 2314 + } 2315 2315 + 2316 2316 + .stat-item { 2317 2317 + background: var(--bg-card); 2318 2318 + padding: var(--space-4); 2319 2319 + text-align: center; 2320 2320 + } 2321 2321 + 2322 2322 + .stat-value { 2323 2323 + display: block; 2324 2324 + font-size: var(--text-2xl); 2325 2325 + font-weight: var(--font-bold); 2326 2326 + color: var(--secondary); 2327 2327 + } 2328 2328 + 2329 2329 + .stat-label { 2330 2330 + display: block; 2331 2331 + font-size: var(--text-sm); 2332 2332 + color: var(--text-secondary); 2333 2333 + margin-top: var(--space-1); 2334 2334 + } 2335 2335 + 2336 2336 + .search-bar { 2337 2337 + display: flex; 2338 2338 + gap: var(--space-2); 2339 2339 + margin-bottom: var(--space-4); 2340 2340 + } 2341 2341 + 2342 2342 + .search-bar input { 2343 2343 + flex: 1; 2344 2344 + } 2345 2345 + 2346 2346 + .user-item { 2347 2347 + list-style: none; 2348 2348 + } 2349 2349 + 2350 2350 + .user-item-btn { 2351 2351 + display: flex; 2352 2352 + align-items: flex-start; 2353 2353 + width: 100%; 2354 2354 + padding: var(--space-3); 2355 2355 + background: var(--bg-card); 2356 2356 + gap: var(--space-3); 2357 2357 + cursor: pointer; 2358 2358 + text-align: left; 2359 2359 + color: inherit; 2360 2360 + font: inherit; 2361 2361 + } 2362 2362 + 2363 2363 + button.user-item-btn:hover { 2364 2364 + border-color: var(--secondary); 2365 2365 + } 2366 2366 + 2367 2367 + .user-info { 2368 2368 + flex: 1; 2369 2369 + min-width: 0; 2370 2370 + display: flex; 2371 2371 + flex-direction: column; 2372 2372 + gap: var(--space-1); 2373 2373 + } 2374 2374 + 2375 2375 + .user-handle { 2376 2376 + font-weight: var(--font-medium); 2377 2377 + } 2378 2378 + 2379 2379 + .user-did { 2380 2380 + font-family: var(--font-mono); 2381 2381 + font-size: var(--text-xs); 2382 2382 + color: var(--text-secondary); 2383 2383 + word-break: break-all; 2384 2384 + } 2385 2385 + 2386 2386 + .user-email { 2387 2387 + font-size: var(--text-sm); 2388 2388 + color: var(--text-secondary); 2389 2389 + } 2390 2390 + 2391 2391 + .user-date { 2392 2392 + font-size: var(--text-xs); 2393 2393 + color: var(--text-muted); 2394 2394 + } 2395 2395 + 2396 2396 + .user-badges { 2397 2397 + display: flex; 2398 2398 + gap: var(--space-2); 2399 2399 + flex-shrink: 0; 2400 2400 + } 2401 2401 + 2402 2402 + .admin .badge.verified { 2403 2403 + background: var(--success-bg); 2404 2404 + color: var(--success-text); 2405 2405 + } 2406 2406 + 2407 2407 + .admin .badge.unverified { 2408 2408 + background: var(--bg-tertiary); 2409 2409 + color: var(--text-secondary); 2410 2410 + } 2411 2411 + 2412 2412 + .field-help { 2413 2413 + display: block; 2414 2414 + font-size: var(--text-xs); 2415 2415 + color: var(--text-secondary); 2416 2416 + margin-top: var(--space-1); 2417 2417 + } 2418 2418 + 2419 2419 + .logo-section { 2420 2420 + display: flex; 2421 2421 + flex-direction: column; 2422 2422 + gap: var(--space-3); 2423 2423 + } 2424 2424 + 2425 2425 + .logo-preview { 2426 2426 + display: flex; 2427 2427 + align-items: center; 2428 2428 + gap: var(--space-3); 2429 2429 + } 2430 2430 + 2431 2431 + .logo-preview img { 2432 2432 + width: 48px; 2433 2433 + height: 48px; 2434 2434 + object-fit: contain; 2435 2435 + background: var(--bg-card); 2436 2436 + padding: var(--space-2); 2437 2437 + } 2438 2438 + 2439 2439 + .remove-logo { 2440 2440 + padding: var(--space-2) var(--space-3); 2441 2441 + font-size: var(--text-sm); 2442 2442 + background: transparent; 2443 2443 + border: 1px solid var(--error-border); 2444 2444 + color: var(--error-text); 2445 2445 + cursor: pointer; 2446 2446 + } 2447 2447 + 2448 2448 + button.remove-logo:hover { 2449 2449 + background: var(--error-bg); 2450 2450 + } 2451 2451 + 2452 2452 + .colors-grid { 2453 2453 + margin-bottom: var(--space-5); 2454 2454 + } 2455 2455 + 2456 2456 + .colors-grid h4 { 2457 2457 + margin: 0 0 var(--space-2) 0; 2458 2458 + font-size: var(--text-sm); 2459 2459 + font-weight: var(--font-medium); 2460 2460 + } 2461 2461 + 2462 2462 + .color-fields { 2463 2463 + display: grid; 2464 2464 + grid-template-columns: repeat(2, 1fr); 2465 2465 + gap: var(--space-3); 2466 2466 + margin-top: var(--space-3); 2467 2467 + } 2468 2468 + 2469 2469 + .color-field label { 2470 2470 + display: block; 2471 2471 + font-size: var(--text-xs); 2472 2472 + color: var(--text-secondary); 2473 2473 + margin-bottom: var(--space-1); 2474 2474 + } 2475 2475 + 2476 2476 + .color-input-row { 2477 2477 + display: flex; 2478 2478 + gap: var(--space-2); 2479 2479 + align-items: center; 2480 2480 + } 2481 2481 + 2482 2482 + .color-input-row input[type="color"] { 2483 2483 + width: 40px; 2484 2484 + height: 36px; 2485 2485 + padding: 2px; 2486 2486 + border: 1px solid var(--border-color); 2487 2487 + cursor: pointer; 2488 2488 + flex-shrink: 0; 2489 2489 + } 2490 2490 + 2491 2491 + .color-input-row input[type="text"] { 2492 2492 + flex: 1; 2493 2493 + font-family: var(--font-mono); 2494 2494 + font-size: var(--text-sm); 2495 2495 + } 2496 2496 + 2497 2497 + .load-more { 2498 2498 + display: block; 2499 2499 + width: 100%; 2500 2500 + margin-top: var(--space-4); 2501 2501 + } 2502 2502 + 2503 2503 + .admin .definition-list { 2504 2504 + margin-bottom: var(--space-5); 2505 2505 + } 2506 2506 + 2507 2507 + .admin .definition-list .mono { 2508 2508 + font-family: var(--font-mono); 2509 2509 + font-size: var(--text-xs); 2510 2510 + word-break: break-all; 2511 2511 + } 2512 2512 + 2513 2513 + .admin .modal { 2514 2514 + width: 90%; 2515 2515 + box-shadow: var(--shadow-lg); 2516 2516 + padding: 0; 2517 2517 + } 2518 2518 + 2519 2519 + @media (max-width: 600px) { 2520 2520 + .user-item { 2521 2521 + flex-direction: column; 2522 2522 + } 2523 2523 + 2524 2524 + .user-item-btn { 2525 2525 + flex-direction: column; 2526 2526 + gap: var(--space-2); 2527 2527 + } 2528 2528 + 2529 2529 + .user-info { 2530 2530 + width: 100%; 2531 2531 + } 2532 2532 + 2533 2533 + .user-badges { 2534 2534 + width: 100%; 2535 2535 + flex-wrap: wrap; 2536 2536 + } 2537 2537 + 2538 2538 + .search-bar { 2539 2539 + flex-direction: column; 2540 2540 + } 2541 2541 + 2542 2542 + .color-fields { 2543 2543 + grid-template-columns: 1fr; 2544 2544 + } 2545 2545 + }