forked from
treethought.xyz/obsidian-atmosphere
Various AT Protocol integrations with obsidian
better source selection
+52
-19
+1
-1
src/views/atmark.ts
+1
-1
src/views/atmark.ts
···
117
117
renderProfileIcon(nav, this.plugin.profile);
118
118
119
119
const sourceSelector = header.createEl("div", { cls: "atmark-source-selector" });
120
-
const sources: SourceType[] = ["semble", "bookmark", "margin"];
120
+
const sources: SourceType[] = ["semble", "margin", "bookmark"];
121
121
122
122
for (const source of sources) {
123
123
const label = sourceSelector.createEl("label", { cls: "atmark-source-option" });
+51
-18
styles.css
+51
-18
styles.css
···
30
30
display: flex;
31
31
align-items: center;
32
32
justify-content: center;
33
-
gap: 6px;
33
+
gap: 0;
34
34
margin-bottom: 12px;
35
-
flex-wrap: wrap;
35
+
border-bottom: 1px solid var(--background-modifier-border);
36
36
}
37
37
38
38
.atmark-source-option {
···
40
40
align-items: center;
41
41
justify-content: center;
42
42
gap: 4px;
43
-
padding: 4px 12px;
43
+
padding: 10px 20px;
44
44
cursor: pointer;
45
45
user-select: none;
46
-
border-radius: var(--radius-s);
47
-
border: 1px solid var(--background-modifier-border);
48
-
background: var(--background-secondary);
46
+
border: none;
47
+
background: transparent;
49
48
transition: all 0.15s ease;
50
-
font-size: var(--font-smaller);
49
+
position: relative;
50
+
margin-bottom: -1px;
51
+
}
52
+
53
+
.atmark-source-option::after {
54
+
content: "";
55
+
position: absolute;
56
+
bottom: 0;
57
+
left: 0;
58
+
right: 0;
59
+
height: 2px;
60
+
background: transparent;
61
+
transition: background 0.15s ease;
51
62
}
52
63
53
64
.atmark-source-option:hover {
54
65
background: var(--background-modifier-hover);
55
-
border-color: var(--background-modifier-border-hover);
56
66
}
57
67
58
-
.atmark-source-option:has(input:checked) {
68
+
.atmark-source-option:has(input:checked)::after {
59
69
background: var(--interactive-accent);
60
-
border-color: var(--interactive-accent);
61
70
}
62
71
63
72
.atmark-source-option:has(input:checked) .atmark-source-text {
64
-
color: var(--text-on-accent);
73
+
color: var(--interactive-accent);
74
+
font-weight: var(--font-semibold);
65
75
}
66
76
67
77
.atmark-source-radio {
···
69
79
}
70
80
71
81
.atmark-source-text {
72
-
font-size: var(--font-smaller);
82
+
font-size: var(--font-ui-small);
73
83
font-weight: var(--font-medium);
74
-
color: var(--text-normal);
84
+
color: var(--text-muted);
75
85
}
76
86
77
87
.atmark-filters {
···
1123
1133
padding-bottom: 12px;
1124
1134
}
1125
1135
1126
-
.atmark-title {
1127
-
font-size: var(--font-ui-medium);
1136
+
.atmark-title,
1137
+
.semble-profile-icon {
1138
+
display: none;
1128
1139
}
1129
1140
1130
1141
.atmark-source-option {
1131
-
padding: 3px 10px;
1132
-
font-size: var(--font-smallest);
1142
+
padding: 8px 16px;
1143
+
font-size: var(--font-ui-small);
1133
1144
}
1134
1145
1135
1146
.atmark-source-text {
1136
-
font-size: var(--font-smallest);
1147
+
font-size: var(--font-ui-small);
1148
+
}
1149
+
1150
+
.atmark-source-selector {
1151
+
justify-content: center;
1137
1152
}
1138
1153
1139
1154
.atmark-grid {
···
1145
1160
margin-bottom: 12px;
1146
1161
}
1147
1162
}
1163
+
1164
+
.is-mobile .atmark-title,
1165
+
.is-mobile .semble-profile-icon {
1166
+
display: none;
1167
+
}
1168
+
1169
+
.is-mobile .atmark-source-option {
1170
+
padding: 8px 16px;
1171
+
font-size: var(--font-ui-small);
1172
+
}
1173
+
1174
+
.is-mobile .atmark-source-text {
1175
+
font-size: var(--font-ui-small);
1176
+
}
1177
+
1178
+
.is-mobile .atmark-source-selector {
1179
+
justify-content: center;
1180
+
}