Various AT Protocol integrations with obsidian
better use of obsidian css classes
+58
-223
+14
-14
src/components/cardDetailModal.ts
+14
-14
src/components/cardDetailModal.ts
···
19
19
onOpen() {
20
20
const { contentEl } = this;
21
21
contentEl.empty();
22
-
contentEl.addClass("semble-detail-modal");
22
+
contentEl.addClass("atmark-detail-modal");
23
23
24
-
const header = contentEl.createEl("div", { cls: "semble-detail-header" });
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
-
cls: `semble-badge semble-badge-source semble-badge-${source}`,
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
-
const footer = contentEl.createEl("div", { cls: "semble-detail-footer" });
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
-
cls: "semble-detail-date",
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
-
const notesSection = contentEl.createEl("div", { cls: "semble-detail-notes-section" });
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
-
const noteEl = notesSection.createEl("div", { cls: "semble-detail-note" });
58
+
const noteEl = notesSection.createEl("div", { cls: "atmark-semble-detail-note" });
59
59
60
-
const noteContent = noteEl.createEl("div", { cls: "semble-detail-note-content" });
61
-
const noteIcon = noteContent.createEl("span", { cls: "semble-detail-note-icon" });
60
+
const noteContent = noteEl.createEl("div", { cls: "atmark-semble-detail-note-content" });
61
+
const noteIcon = noteContent.createEl("span", { cls: "atmark-semble-detail-note-icon" });
62
62
setIcon(noteIcon, "message-square");
63
-
noteContent.createEl("p", { text: note.text, cls: "semble-detail-note-text" });
63
+
noteContent.createEl("p", { text: note.text, cls: "atmark-semble-detail-note-text" });
64
64
65
-
const deleteBtn = noteEl.createEl("button", { cls: "semble-note-delete-btn" });
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
-
const formSection = contentEl.createEl("div", { cls: "semble-detail-add-note" });
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
-
const form = formSection.createEl("div", { cls: "semble-add-note-form" });
77
+
const form = formSection.createEl("div", { cls: "atmark-semble-add-note-form" });
78
78
79
79
this.noteInput = form.createEl("textarea", {
80
-
cls: "atmark-textarea semble-note-input",
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
+2
-2
src/sources/semble.ts
···
60
60
61
61
if (card.type === "NOTE") {
62
62
const content = card.content as NoteContent;
63
-
el.createEl("p", { text: content.text, cls: "semble-card-text" });
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
-
body.createEl("p", { text: content.text, cls: "semble-detail-text" });
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
+42
-207
styles.css
···
234
234
}
235
235
236
236
.atmark-badge-semble {
237
-
background: rgba(255, 87, 34, 0.15);
238
-
color: rgb(255, 120, 70);
239
-
border: 1px solid rgba(255, 87, 34, 0.3);
237
+
background: color-mix(in srgb, var(--color-orange) 15%, transparent);
238
+
color: var(--color-orange);
239
+
border: 1px solid color-mix(in srgb, var(--color-orange) 30%, transparent);
240
240
}
241
241
242
242
.atmark-badge-bookmark {
243
-
background: rgba(3, 169, 244, 0.15);
244
-
color: rgb(3, 169, 244);
245
-
border: 1px solid rgba(3, 169, 244, 0.3);
243
+
background: color-mix(in srgb, var(--color-cyan) 15%, transparent);
244
+
color: var(--color-cyan);
245
+
border: 1px solid color-mix(in srgb, var(--color-cyan) 30%, transparent);
246
246
}
247
247
248
248
.atmark-badge-margin {
249
-
background: rgba(156, 39, 176, 0.15);
250
-
color: rgb(186, 104, 200);
251
-
border: 1px solid rgba(156, 39, 176, 0.3);
249
+
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
250
+
color: var(--color-purple);
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
-
background: rgba(156, 39, 176, 0.1);
360
-
color: rgb(186, 104, 200);
361
-
border: 1px solid rgba(156, 39, 176, 0.3);
359
+
background: color-mix(in srgb, var(--color-purple) 10%, transparent);
360
+
color: var(--color-purple);
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
-
.semble-card-note {
710
+
.atmark-semble-card-note {
711
711
margin: 0;
712
712
padding: 8px 12px;
713
713
background: var(--background-primary);
714
-
border-left: 3px solid var(--color-blue);
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
-
.semble-card-text {
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
-
.semble-detail-text {
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
-
.semble-detail-notes-section {
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
-
.semble-detail-note {
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
-
border-left: 3px solid var(--color-blue);
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
-
.semble-detail-note-content {
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
-
.semble-detail-note-icon {
766
+
.atmark-semble-detail-note-icon {
767
767
flex-shrink: 0;
768
-
color: var(--color-blue);
768
+
color: var(--color-accent);
769
769
}
770
770
771
-
.semble-detail-note-icon svg {
771
+
.atmark-semble-detail-note-icon svg {
772
772
width: 16px;
773
773
height: 16px;
774
774
}
775
775
776
-
.semble-detail-note-text {
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
-
/* Legacy Semble classes (backwards compatibility - will be removed in future) */
784
-
.semble-card-grid {
785
-
display: grid;
786
-
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
787
-
gap: 16px;
788
-
padding: 8px 0;
789
-
}
790
-
791
-
.semble-card {
792
-
background: var(--background-secondary);
793
-
border: 1px solid var(--background-modifier-border);
794
-
border-radius: var(--radius-m);
795
-
padding: 16px;
796
-
display: flex;
797
-
flex-direction: column;
798
-
gap: 8px;
799
-
transition: box-shadow 0.15s ease, border-color 0.15s ease;
800
-
cursor: pointer;
801
-
}
802
-
803
-
.semble-card:hover {
804
-
box-shadow: var(--shadow-s);
805
-
border-color: var(--background-modifier-border-hover);
806
-
}
807
-
808
-
.semble-card-header {
809
-
display: flex;
810
-
justify-content: space-between;
811
-
align-items: flex-start;
812
-
gap: 8px;
813
-
}
814
-
815
-
.semble-badge {
816
-
font-size: var(--font-smallest);
817
-
padding: 2px 8px;
818
-
border-radius: var(--radius-s);
819
-
text-transform: uppercase;
820
-
font-weight: var(--font-medium);
821
-
flex-shrink: 0;
822
-
}
823
-
824
-
.semble-badge-open {
825
-
background: var(--color-green);
826
-
color: var(--text-on-accent);
827
-
}
828
-
829
-
.semble-badge-closed {
830
-
background: var(--color-orange);
831
-
color: var(--text-on-accent);
832
-
}
833
-
834
783
/* Card type badges */
835
-
.semble-badge-note {
836
-
background: var(--color-blue);
784
+
.atmark-semble-badge-note {
785
+
background: var(--color-accent);
837
786
color: var(--text-on-accent);
838
787
}
839
788
840
-
.semble-badge-url {
841
-
background: var(--color-purple);
789
+
.atmark-semble-badge-url {
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
-
.semble-badge-source {
794
+
.atmark-badge-source {
846
795
font-size: var(--font-smallest);
847
796
opacity: 0.8;
848
797
}
849
798
850
-
.semble-badge-semble {
851
-
background: var(--color-green);
799
+
.atmark-semble-badge-semble {
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
-
/* Semble-specific page components */
856
-
.semble-page-header {
857
-
margin-bottom: 16px;
858
-
padding-bottom: 16px;
859
-
border-top: 1px solid var(--background-modifier-border);
860
-
}
861
-
862
-
.semble-nav-row {
863
-
display: flex;
864
-
align-items: center;
865
-
gap: 12px;
866
-
margin-bottom: 8px;
867
-
}
868
-
869
-
.semble-brand {
870
-
font-size: var(--font-small);
871
-
font-weight: var(--font-semibold);
872
-
color: var(--text-accent);
873
-
text-transform: uppercase;
874
-
letter-spacing: 0.5px;
875
-
}
876
-
877
-
.semble-page-title {
878
-
margin: 0;
879
-
font-size: var(--h1-size);
880
-
font-weight: var(--font-bold);
881
-
color: var(--text-normal);
882
-
}
883
-
884
-
.semble-back-btn {
885
-
display: flex;
886
-
align-items: center;
887
-
justify-content: center;
888
-
width: 32px;
889
-
height: 32px;
890
-
padding: 0;
891
-
background: transparent;
892
-
border: 1px solid var(--background-modifier-border);
893
-
border-radius: var(--radius-s);
894
-
cursor: pointer;
895
-
color: var(--text-muted);
896
-
}
897
-
898
-
.semble-back-btn:hover {
899
-
background: var(--background-modifier-hover);
900
-
color: var(--text-normal);
901
-
}
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
-
/* Semble Toolbar */
987
-
.semble-toolbar {
988
-
display: flex;
989
-
align-items: center;
990
-
gap: 8px;
991
-
margin-bottom: 16px;
992
-
}
993
-
994
-
.semble-create-btn {
995
-
display: inline-flex;
996
-
align-items: center;
997
-
gap: 6px;
998
-
padding: 6px 12px;
999
-
background: var(--interactive-accent);
1000
-
border: none;
1001
-
border-radius: var(--radius-s);
1002
-
color: var(--text-on-accent);
1003
-
font-size: var(--font-small);
1004
-
font-weight: var(--font-medium);
1005
-
cursor: pointer;
1006
-
transition: all 0.15s ease;
1007
-
}
1008
-
1009
-
.semble-create-btn:hover {
1010
-
background: var(--interactive-accent-hover);
1011
-
}
1012
-
1013
-
.semble-create-btn svg {
1014
-
width: 14px;
1015
-
height: 14px;
1016
-
}
1017
-
1018
-
.semble-toolbar-btn {
1019
-
display: inline-flex;
1020
-
align-items: center;
1021
-
gap: 6px;
1022
-
padding: 6px 12px;
1023
-
background: var(--background-secondary);
1024
-
border: 1px solid var(--background-modifier-border);
1025
-
border-radius: var(--radius-s);
1026
-
color: var(--text-normal);
1027
-
font-size: var(--font-small);
1028
-
font-weight: var(--font-medium);
1029
-
cursor: pointer;
1030
-
transition: all 0.15s ease;
1031
-
}
1032
-
1033
-
.semble-toolbar-btn:hover {
1034
-
background: var(--background-modifier-hover);
1035
-
border-color: var(--background-modifier-border-hover);
1036
-
}
1037
-
1038
-
.semble-toolbar-btn svg {
1039
-
width: 14px;
1040
-
height: 14px;
1041
-
}
1042
-
1043
-
/* Semble-specific Card Detail Modal */
1044
-
.semble-detail-modal {
887
+
/* Generic Card Detail Modal (used for all sources) */
888
+
.atmark-detail-modal {
1045
889
padding: 20px;
1046
890
max-width: 600px;
1047
891
}
1048
892
1049
-
.semble-detail-header {
893
+
.atmark-detail-header {
1050
894
margin-bottom: 16px;
1051
895
}
1052
896
1053
-
.semble-detail-footer {
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
-
.semble-detail-date {
903
+
.atmark-detail-date {
1060
904
font-size: var(--font-small);
1061
905
color: var(--text-faint);
1062
906
}
1063
907
1064
-
.semble-detail-section-title {
1065
-
margin: 0 0 12px 0;
1066
-
font-size: var(--font-small);
1067
-
font-weight: var(--font-semibold);
1068
-
color: var(--text-muted);
1069
-
text-transform: uppercase;
1070
-
letter-spacing: 0.5px;
1071
-
}
1072
-
1073
908
/* Semble-specific Add Note Form */
1074
-
.semble-detail-add-note {
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
-
.semble-add-note-form {
915
+
.atmark-semble-add-note-form {
1081
916
display: flex;
1082
917
flex-direction: column;
1083
918
gap: 12px;
1084
919
}
1085
920
1086
-
.semble-note-input {
921
+
.atmark-semble-note-input {
1087
922
min-height: 80px;
1088
923
resize: vertical;
1089
924
}
1090
925
1091
-
.semble-note-delete-btn {
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
-
.semble-note-delete-btn:hover {
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
-
.semble-note-delete-btn svg {
949
+
.atmark-semble-note-delete-btn svg {
1115
950
width: 14px;
1116
951
height: 14px;
1117
952
}