+14 -14

src/components/cardDetailModal.ts

··· 19 19 onOpen() { 20 20 const { contentEl } = this; 21 21 contentEl.empty(); 22 22 - contentEl.addClass("semble-detail-modal"); 22 22 + contentEl.addClass("atmark-detail-modal"); 23 23 24 24 - const header = contentEl.createEl("div", { cls: "semble-detail-header" }); 24 24 + const header = contentEl.createEl("div", { cls: "atmark-detail-header" }); 25 25 const source = this.item.getSource(); 26 26 header.createEl("span", { 27 27 text: source, 28 28 - cls: `semble-badge semble-badge-source semble-badge-${source}`, 28 28 + cls: `atmark-badge atmark-badge-source atmark-badge-${source}`, 29 29 }); 30 30 31 31 this.item.renderDetail(contentEl); ··· 40 40 this.renderAddNoteForm(contentEl); 41 41 } 42 42 43 43 - const footer = contentEl.createEl("div", { cls: "semble-detail-footer" }); 43 43 + const footer = contentEl.createEl("div", { cls: "atmark-detail-footer" }); 44 44 footer.createEl("span", { 45 45 text: `Created ${new Date(this.item.getCreatedAt()).toLocaleDateString()}`, 46 46 - cls: "semble-detail-date", 46 46 + cls: "atmark-detail-date", 47 47 }); 48 48 } 49 49 ··· 51 51 const notes = this.item.getAttachedNotes?.(); 52 52 if (!notes || notes.length === 0) return; 53 53 54 54 - const notesSection = contentEl.createEl("div", { cls: "semble-detail-notes-section" }); 54 54 + const notesSection = contentEl.createEl("div", { cls: "atmark-semble-detail-notes-section" }); 55 55 notesSection.createEl("h3", { text: "Notes", cls: "atmark-detail-section-title" }); 56 56 57 57 for (const note of notes) { 58 58 - const noteEl = notesSection.createEl("div", { cls: "semble-detail-note" }); 58 58 + const noteEl = notesSection.createEl("div", { cls: "atmark-semble-detail-note" }); 59 59 60 60 - const noteContent = noteEl.createEl("div", { cls: "semble-detail-note-content" }); 61 61 - const noteIcon = noteContent.createEl("span", { cls: "semble-detail-note-icon" }); 60 60 + const noteContent = noteEl.createEl("div", { cls: "atmark-semble-detail-note-content" }); 61 61 + const noteIcon = noteContent.createEl("span", { cls: "atmark-semble-detail-note-icon" }); 62 62 setIcon(noteIcon, "message-square"); 63 63 - noteContent.createEl("p", { text: note.text, cls: "semble-detail-note-text" }); 63 63 + noteContent.createEl("p", { text: note.text, cls: "atmark-semble-detail-note-text" }); 64 64 65 65 - const deleteBtn = noteEl.createEl("button", { cls: "semble-note-delete-btn" }); 65 65 + const deleteBtn = noteEl.createEl("button", { cls: "atmark-semble-note-delete-btn" }); 66 66 setIcon(deleteBtn, "trash-2"); 67 67 deleteBtn.addEventListener("click", () => { 68 68 void this.handleDeleteNote(note.uri); ··· 71 71 } 72 72 73 73 private renderAddNoteForm(contentEl: HTMLElement) { 74 74 - const formSection = contentEl.createEl("div", { cls: "semble-detail-add-note" }); 74 74 + const formSection = contentEl.createEl("div", { cls: "atmark-semble-detail-add-note" }); 75 75 formSection.createEl("h3", { text: "Add a note", cls: "atmark-detail-section-title" }); 76 76 77 77 - const form = formSection.createEl("div", { cls: "semble-add-note-form" }); 77 77 + const form = formSection.createEl("div", { cls: "atmark-semble-add-note-form" }); 78 78 79 79 this.noteInput = form.createEl("textarea", { 80 80 - cls: "atmark-textarea semble-note-input", 80 80 + cls: "atmark-textarea atmark-semble-note-input", 81 81 attr: { placeholder: "Write a note about this item..." }, 82 82 }); 83 83

+2 -2

src/sources/semble.ts

··· 60 60 61 61 if (card.type === "NOTE") { 62 62 const content = card.content as NoteContent; 63 63 - el.createEl("p", { text: content.text, cls: "semble-card-text" }); 63 63 + el.createEl("p", { text: content.text, cls: "atmark-semble-card-text" }); 64 64 } else if (card.type === "URL") { 65 65 const content = card.content as UrlContent; 66 66 const meta = content.metadata; ··· 101 101 102 102 if (card.type === "NOTE") { 103 103 const content = card.content as NoteContent; 104 104 - body.createEl("p", { text: content.text, cls: "semble-detail-text" }); 104 104 + body.createEl("p", { text: content.text, cls: "atmark-semble-detail-text" }); 105 105 } else if (card.type === "URL") { 106 106 const content = card.content as UrlContent; 107 107 const meta = content.metadata;

+42 -207

styles.css

··· 234 234 } 235 235 236 236 .atmark-badge-semble { 237 237 - background: rgba(255, 87, 34, 0.15); 238 238 - color: rgb(255, 120, 70); 239 239 - border: 1px solid rgba(255, 87, 34, 0.3); 237 237 + background: color-mix(in srgb, var(--color-orange) 15%, transparent); 238 238 + color: var(--color-orange); 239 239 + border: 1px solid color-mix(in srgb, var(--color-orange) 30%, transparent); 240 240 } 241 241 242 242 .atmark-badge-bookmark { 243 243 - background: rgba(3, 169, 244, 0.15); 244 244 - color: rgb(3, 169, 244); 245 245 - border: 1px solid rgba(3, 169, 244, 0.3); 243 243 + background: color-mix(in srgb, var(--color-cyan) 15%, transparent); 244 244 + color: var(--color-cyan); 245 245 + border: 1px solid color-mix(in srgb, var(--color-cyan) 30%, transparent); 246 246 } 247 247 248 248 .atmark-badge-margin { 249 249 - background: rgba(156, 39, 176, 0.15); 250 250 - color: rgb(186, 104, 200); 251 251 - border: 1px solid rgba(156, 39, 176, 0.3); 249 249 + background: color-mix(in srgb, var(--color-purple) 15%, transparent); 250 250 + color: var(--color-purple); 251 251 + border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent); 252 252 } 253 253 254 254 .atmark-item-footer { ··· 356 356 font-size: var(--font-smallest); 357 357 padding: 2px 8px; 358 358 border-radius: var(--radius-s); 359 359 - background: rgba(156, 39, 176, 0.1); 360 360 - color: rgb(186, 104, 200); 361 361 - border: 1px solid rgba(156, 39, 176, 0.3); 359 359 + background: color-mix(in srgb, var(--color-purple) 10%, transparent); 360 360 + color: var(--color-purple); 361 361 + border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent); 362 362 } 363 363 364 364 .atmark-item-collections-section { ··· 707 707 } 708 708 709 709 /* Semble-specific styles (for NOTE cards and attached notes) */ 710 710 - .semble-card-note { 710 710 + .atmark-semble-card-note { 711 711 margin: 0; 712 712 padding: 8px 12px; 713 713 background: var(--background-primary); 714 714 - border-left: 3px solid var(--color-blue); 714 714 + border-left: 3px solid var(--color-accent); 715 715 border-radius: var(--radius-s); 716 716 font-size: var(--font-small); 717 717 font-style: italic; ··· 720 720 line-height: var(--line-height-normal); 721 721 } 722 722 723 723 - .semble-card-text { 723 723 + .atmark-semble-card-text { 724 724 margin: 0; 725 725 line-height: 1.5; 726 726 color: var(--text-normal); ··· 730 730 overflow: hidden; 731 731 } 732 732 733 733 - .semble-detail-text { 733 733 + .atmark-semble-detail-text { 734 734 margin: 0; 735 735 white-space: pre-wrap; 736 736 line-height: var(--line-height-normal); ··· 738 738 font-size: 1.1em; 739 739 } 740 740 741 741 - .semble-detail-notes-section { 741 741 + .atmark-semble-detail-notes-section { 742 742 margin-top: 20px; 743 743 padding-top: 20px; 744 744 border-top: 1px solid var(--background-modifier-border); 745 745 } 746 746 747 747 - .semble-detail-note { 747 747 + .atmark-semble-detail-note { 748 748 display: flex; 749 749 align-items: flex-start; 750 750 justify-content: space-between; 751 751 gap: 12px; 752 752 padding: 12px 16px; 753 753 background: var(--background-secondary); 754 754 - border-left: 3px solid var(--color-blue); 754 754 + border-left: 3px solid var(--color-accent); 755 755 border-radius: var(--radius-s); 756 756 margin-bottom: 8px; 757 757 } 758 758 759 759 - .semble-detail-note-content { 759 759 + .atmark-semble-detail-note-content { 760 760 display: flex; 761 761 gap: 12px; 762 762 flex: 1; 763 763 min-width: 0; 764 764 } 765 765 766 766 - .semble-detail-note-icon { 766 766 + .atmark-semble-detail-note-icon { 767 767 flex-shrink: 0; 768 768 - color: var(--color-blue); 768 768 + color: var(--color-accent); 769 769 } 770 770 771 771 - .semble-detail-note-icon svg { 771 771 + .atmark-semble-detail-note-icon svg { 772 772 width: 16px; 773 773 height: 16px; 774 774 } 775 775 776 776 - .semble-detail-note-text { 776 776 + .atmark-semble-detail-note-text { 777 777 margin: 0; 778 778 color: var(--text-normal); 779 779 line-height: var(--line-height-normal); 780 780 white-space: pre-wrap; 781 781 } 782 782 783 783 - /* Legacy Semble classes (backwards compatibility - will be removed in future) */ 784 784 - .semble-card-grid { 785 785 - display: grid; 786 786 - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 787 787 - gap: 16px; 788 788 - padding: 8px 0; 789 789 - } 790 790 - 791 791 - .semble-card { 792 792 - background: var(--background-secondary); 793 793 - border: 1px solid var(--background-modifier-border); 794 794 - border-radius: var(--radius-m); 795 795 - padding: 16px; 796 796 - display: flex; 797 797 - flex-direction: column; 798 798 - gap: 8px; 799 799 - transition: box-shadow 0.15s ease, border-color 0.15s ease; 800 800 - cursor: pointer; 801 801 - } 802 802 - 803 803 - .semble-card:hover { 804 804 - box-shadow: var(--shadow-s); 805 805 - border-color: var(--background-modifier-border-hover); 806 806 - } 807 807 - 808 808 - .semble-card-header { 809 809 - display: flex; 810 810 - justify-content: space-between; 811 811 - align-items: flex-start; 812 812 - gap: 8px; 813 813 - } 814 814 - 815 815 - .semble-badge { 816 816 - font-size: var(--font-smallest); 817 817 - padding: 2px 8px; 818 818 - border-radius: var(--radius-s); 819 819 - text-transform: uppercase; 820 820 - font-weight: var(--font-medium); 821 821 - flex-shrink: 0; 822 822 - } 823 823 - 824 824 - .semble-badge-open { 825 825 - background: var(--color-green); 826 826 - color: var(--text-on-accent); 827 827 - } 828 828 - 829 829 - .semble-badge-closed { 830 830 - background: var(--color-orange); 831 831 - color: var(--text-on-accent); 832 832 - } 833 833 - 834 783 /* Card type badges */ 835 835 - .semble-badge-note { 836 836 - background: var(--color-blue); 784 784 + .atmark-semble-badge-note { 785 785 + background: var(--color-accent); 837 786 color: var(--text-on-accent); 838 787 } 839 788 840 840 - .semble-badge-url { 841 841 - background: var(--color-purple); 789 789 + .atmark-semble-badge-url { 790 790 + background: color-mix(in srgb, var(--color-purple) 80%, var(--background-primary)); 842 791 color: var(--text-on-accent); 843 792 } 844 793 845 845 - .semble-badge-source { 794 794 + .atmark-badge-source { 846 795 font-size: var(--font-smallest); 847 796 opacity: 0.8; 848 797 } 849 798 850 850 - .semble-badge-semble { 851 851 - background: var(--color-green); 799 799 + .atmark-semble-badge-semble { 800 800 + background: color-mix(in srgb, var(--color-green) 80%, var(--background-primary)); 852 801 color: var(--text-on-accent); 853 802 } 854 803 855 855 - /* Semble-specific page components */ 856 856 - .semble-page-header { 857 857 - margin-bottom: 16px; 858 858 - padding-bottom: 16px; 859 859 - border-top: 1px solid var(--background-modifier-border); 860 860 - } 861 861 - 862 862 - .semble-nav-row { 863 863 - display: flex; 864 864 - align-items: center; 865 865 - gap: 12px; 866 866 - margin-bottom: 8px; 867 867 - } 868 868 - 869 869 - .semble-brand { 870 870 - font-size: var(--font-small); 871 871 - font-weight: var(--font-semibold); 872 872 - color: var(--text-accent); 873 873 - text-transform: uppercase; 874 874 - letter-spacing: 0.5px; 875 875 - } 876 876 - 877 877 - .semble-page-title { 878 878 - margin: 0; 879 879 - font-size: var(--h1-size); 880 880 - font-weight: var(--font-bold); 881 881 - color: var(--text-normal); 882 882 - } 883 883 - 884 884 - .semble-back-btn { 885 885 - display: flex; 886 886 - align-items: center; 887 887 - justify-content: center; 888 888 - width: 32px; 889 889 - height: 32px; 890 890 - padding: 0; 891 891 - background: transparent; 892 892 - border: 1px solid var(--background-modifier-border); 893 893 - border-radius: var(--radius-s); 894 894 - cursor: pointer; 895 895 - color: var(--text-muted); 896 896 - } 897 897 - 898 898 - .semble-back-btn:hover { 899 899 - background: var(--background-modifier-hover); 900 900 - color: var(--text-normal); 901 901 - } 902 902 - 903 804 /* Profile Icon */ 904 805 .atmark-profile-icon { 905 806 display: flex; ··· 983 884 line-height: 1.2; 984 885 } 985 886 986 986 - /* Semble Toolbar */ 987 987 - .semble-toolbar { 988 988 - display: flex; 989 989 - align-items: center; 990 990 - gap: 8px; 991 991 - margin-bottom: 16px; 992 992 - } 993 993 - 994 994 - .semble-create-btn { 995 995 - display: inline-flex; 996 996 - align-items: center; 997 997 - gap: 6px; 998 998 - padding: 6px 12px; 999 999 - background: var(--interactive-accent); 1000 1000 - border: none; 1001 1001 - border-radius: var(--radius-s); 1002 1002 - color: var(--text-on-accent); 1003 1003 - font-size: var(--font-small); 1004 1004 - font-weight: var(--font-medium); 1005 1005 - cursor: pointer; 1006 1006 - transition: all 0.15s ease; 1007 1007 - } 1008 1008 - 1009 1009 - .semble-create-btn:hover { 1010 1010 - background: var(--interactive-accent-hover); 1011 1011 - } 1012 1012 - 1013 1013 - .semble-create-btn svg { 1014 1014 - width: 14px; 1015 1015 - height: 14px; 1016 1016 - } 1017 1017 - 1018 1018 - .semble-toolbar-btn { 1019 1019 - display: inline-flex; 1020 1020 - align-items: center; 1021 1021 - gap: 6px; 1022 1022 - padding: 6px 12px; 1023 1023 - background: var(--background-secondary); 1024 1024 - border: 1px solid var(--background-modifier-border); 1025 1025 - border-radius: var(--radius-s); 1026 1026 - color: var(--text-normal); 1027 1027 - font-size: var(--font-small); 1028 1028 - font-weight: var(--font-medium); 1029 1029 - cursor: pointer; 1030 1030 - transition: all 0.15s ease; 1031 1031 - } 1032 1032 - 1033 1033 - .semble-toolbar-btn:hover { 1034 1034 - background: var(--background-modifier-hover); 1035 1035 - border-color: var(--background-modifier-border-hover); 1036 1036 - } 1037 1037 - 1038 1038 - .semble-toolbar-btn svg { 1039 1039 - width: 14px; 1040 1040 - height: 14px; 1041 1041 - } 1042 1042 - 1043 1043 - /* Semble-specific Card Detail Modal */ 1044 1044 - .semble-detail-modal { 887 887 + /* Generic Card Detail Modal (used for all sources) */ 888 888 + .atmark-detail-modal { 1045 889 padding: 20px; 1046 890 max-width: 600px; 1047 891 } 1048 892 1049 1049 - .semble-detail-header { 893 893 + .atmark-detail-header { 1050 894 margin-bottom: 16px; 1051 895 } 1052 896 1053 1053 - .semble-detail-footer { 897 897 + .atmark-detail-footer { 1054 898 margin-top: 20px; 1055 899 padding-top: 16px; 1056 900 border-top: 1px solid var(--background-modifier-border); 1057 901 } 1058 902 1059 1059 - .semble-detail-date { 903 903 + .atmark-detail-date { 1060 904 font-size: var(--font-small); 1061 905 color: var(--text-faint); 1062 906 } 1063 907 1064 1064 - .semble-detail-section-title { 1065 1065 - margin: 0 0 12px 0; 1066 1066 - font-size: var(--font-small); 1067 1067 - font-weight: var(--font-semibold); 1068 1068 - color: var(--text-muted); 1069 1069 - text-transform: uppercase; 1070 1070 - letter-spacing: 0.5px; 1071 1071 - } 1072 1072 - 1073 908 /* Semble-specific Add Note Form */ 1074 1074 - .semble-detail-add-note { 909 909 + .atmark-semble-detail-add-note { 1075 910 margin-top: 20px; 1076 911 padding-top: 20px; 1077 912 border-top: 1px solid var(--background-modifier-border); 1078 913 } 1079 914 1080 1080 - .semble-add-note-form { 915 915 + .atmark-semble-add-note-form { 1081 916 display: flex; 1082 917 flex-direction: column; 1083 918 gap: 12px; 1084 919 } 1085 920 1086 1086 - .semble-note-input { 921 921 + .atmark-semble-note-input { 1087 922 min-height: 80px; 1088 923 resize: vertical; 1089 924 } 1090 925 1091 1091 - .semble-note-delete-btn { 926 926 + .atmark-semble-note-delete-btn { 1092 927 display: flex; 1093 928 align-items: center; 1094 929 justify-content: center; ··· 1105 940 transition: all 0.15s ease; 1106 941 } 1107 942 1108 1108 - .semble-note-delete-btn:hover { 943 943 + .atmark-semble-note-delete-btn:hover { 1109 944 background: color-mix(in srgb, var(--color-red) 15%, transparent); 1110 945 color: var(--color-red); 1111 946 opacity: 1; 1112 947 } 1113 948 1114 1114 - .semble-note-delete-btn svg { 949 949 + .atmark-semble-note-delete-btn svg { 1115 950 width: 14px; 1116 951 height: 14px; 1117 952 }