+4
-5
src/views/atmark.ts
+4
-5
src/views/atmark.ts
···
52
}
53
54
getIcon() {
55
-
return "bookmark";
56
}
57
58
async onOpen() {
···
115
// eslint-disable-next-line obsidianmd/ui/sentence-case
116
nav.createEl("h1", { text: "ATmark", cls: "atmark-title" });
117
118
-
// Source selector in the center
119
-
const sourceSelector = nav.createEl("div", { cls: "atmark-source-selector" });
120
const sources: SourceType[] = ["semble", "bookmark", "margin"];
121
122
for (const source of sources) {
···
139
});
140
}
141
142
-
renderProfileIcon(nav, this.plugin.profile);
143
-
144
// Let the active source render its filters
145
const filtersContainer = container.createEl("div", { cls: "atmark-filters" });
146
const sourceData = this.sources.get(this.activeSource);
···
52
}
53
54
getIcon() {
55
+
return "layers";
56
}
57
58
async onOpen() {
···
115
// eslint-disable-next-line obsidianmd/ui/sentence-case
116
nav.createEl("h1", { text: "ATmark", cls: "atmark-title" });
117
118
+
renderProfileIcon(nav, this.plugin.profile);
119
+
120
+
const sourceSelector = header.createEl("div", { cls: "atmark-source-selector" });
121
const sources: SourceType[] = ["semble", "bookmark", "margin"];
122
123
for (const source of sources) {
···
140
});
141
}
142
143
// Let the active source render its filters
144
const filtersContainer = container.createEl("div", { cls: "atmark-filters" });
145
const sourceData = this.sources.get(this.activeSource);
+77
-34
styles.css
+77
-34
styles.css
···
10
}
11
12
.atmark-nav {
13
-
position: relative;
14
display: flex;
15
align-items: center;
16
justify-content: space-between;
17
-
margin-bottom: 16px;
18
}
19
20
.atmark-title {
···
22
font-size: var(--h1-size);
23
font-weight: var(--font-bold);
24
color: var(--text-accent);
25
}
26
27
.atmark-source-selector {
28
-
position: absolute;
29
-
left: 50%;
30
-
transform: translateX(-50%);
31
display: flex;
32
align-items: center;
33
-
gap: 8px;
34
}
35
36
.atmark-source-option {
37
display: flex;
38
align-items: center;
39
justify-content: center;
40
-
gap: 6px;
41
-
padding: 8px 20px;
42
cursor: pointer;
43
user-select: none;
44
-
border-radius: var(--radius-m);
45
border: 1px solid var(--background-modifier-border);
46
background: var(--background-secondary);
47
transition: all 0.15s ease;
48
}
49
50
.atmark-source-option:hover {
···
66
}
67
68
.atmark-source-text {
69
-
font-size: var(--font-small);
70
font-weight: var(--font-medium);
71
color: var(--text-normal);
72
}
···
74
.atmark-filters {
75
display: flex;
76
flex-direction: column;
77
-
gap: 12px;
78
margin-bottom: 16px;
79
}
80
81
.atmark-filter-section {
82
display: flex;
83
flex-direction: column;
84
-
gap: 8px;
85
}
86
87
.atmark-filter-title-row {
88
display: flex;
89
align-items: center;
90
-
justify-content: space-between;
91
-
gap: 8px;
92
}
93
94
.atmark-filter-title {
95
margin: 0;
96
-
font-size: var(--font-small);
97
font-weight: var(--font-semibold);
98
-
color: var(--text-muted);
99
text-transform: uppercase;
100
-
letter-spacing: 0.5px;
101
}
102
103
.atmark-filter-create-btn {
104
display: flex;
105
align-items: center;
106
justify-content: center;
107
-
width: 24px;
108
-
height: 24px;
109
padding: 0;
110
background: transparent;
111
-
border: 1px solid var(--background-modifier-border);
112
border-radius: var(--radius-s);
113
cursor: pointer;
114
-
color: var(--text-muted);
115
transition: all 0.15s ease;
116
}
117
118
.atmark-filter-create-btn:hover {
119
background: var(--background-modifier-hover);
120
-
color: var(--text-normal);
121
-
border-color: var(--background-modifier-border-hover);
122
}
123
124
.atmark-filter-create-btn svg {
125
-
width: 14px;
126
-
height: 14px;
127
}
128
129
.atmark-filter-chips {
130
display: flex;
131
flex-wrap: wrap;
132
-
gap: 8px;
133
}
134
135
.atmark-chip {
136
-
padding: 6px 14px;
137
-
border-radius: var(--radius-full);
138
-
border: 1px solid var(--background-modifier-border);
139
-
background: var(--background-secondary);
140
color: var(--text-muted);
141
-
font-size: var(--font-small);
142
cursor: pointer;
143
-
transition: all 0.15s ease;
144
}
145
146
.atmark-chip:hover {
147
-
background: var(--background-modifier-hover);
148
color: var(--text-normal);
149
}
150
151
.atmark-chip-active {
152
background: var(--interactive-accent);
153
color: var(--text-on-accent);
154
-
border-color: var(--interactive-accent);
155
}
156
157
.atmark-chip-active:hover {
158
background: var(--interactive-accent-hover);
159
}
160
161
.atmark-grid {
···
1194
.semble-error {
1195
color: var(--text-error);
1196
}
···
10
}
11
12
.atmark-nav {
13
display: flex;
14
align-items: center;
15
justify-content: space-between;
16
+
margin-bottom: 12px;
17
+
gap: 10px;
18
}
19
20
.atmark-title {
···
22
font-size: var(--h1-size);
23
font-weight: var(--font-bold);
24
color: var(--text-accent);
25
+
flex-shrink: 1;
26
+
min-width: 0;
27
}
28
29
.atmark-source-selector {
30
display: flex;
31
align-items: center;
32
+
justify-content: center;
33
+
gap: 6px;
34
+
margin-bottom: 12px;
35
+
flex-wrap: wrap;
36
}
37
38
.atmark-source-option {
39
display: flex;
40
align-items: center;
41
justify-content: center;
42
+
gap: 4px;
43
+
padding: 4px 12px;
44
cursor: pointer;
45
user-select: none;
46
+
border-radius: var(--radius-s);
47
border: 1px solid var(--background-modifier-border);
48
background: var(--background-secondary);
49
transition: all 0.15s ease;
50
+
font-size: var(--font-smaller);
51
}
52
53
.atmark-source-option:hover {
···
69
}
70
71
.atmark-source-text {
72
+
font-size: var(--font-smaller);
73
font-weight: var(--font-medium);
74
color: var(--text-normal);
75
}
···
77
.atmark-filters {
78
display: flex;
79
flex-direction: column;
80
+
gap: 16px;
81
margin-bottom: 16px;
82
}
83
84
.atmark-filter-section {
85
display: flex;
86
flex-direction: column;
87
+
gap: 6px;
88
}
89
90
.atmark-filter-title-row {
91
display: flex;
92
align-items: center;
93
+
gap: 6px;
94
+
margin-bottom: 2px;
95
}
96
97
.atmark-filter-title {
98
margin: 0;
99
+
font-size: var(--font-smallest);
100
font-weight: var(--font-semibold);
101
+
color: var(--text-faint);
102
text-transform: uppercase;
103
+
letter-spacing: 0.05em;
104
}
105
106
.atmark-filter-create-btn {
107
display: flex;
108
align-items: center;
109
justify-content: center;
110
+
width: 18px;
111
+
height: 18px;
112
padding: 0;
113
background: transparent;
114
+
border: none;
115
border-radius: var(--radius-s);
116
cursor: pointer;
117
+
color: var(--text-faint);
118
transition: all 0.15s ease;
119
+
opacity: 0.7;
120
}
121
122
.atmark-filter-create-btn:hover {
123
background: var(--background-modifier-hover);
124
+
color: var(--interactive-accent);
125
+
opacity: 1;
126
}
127
128
.atmark-filter-create-btn svg {
129
+
width: 12px;
130
+
height: 12px;
131
}
132
133
.atmark-filter-chips {
134
display: flex;
135
flex-wrap: wrap;
136
+
gap: 6px;
137
+
align-items: center;
138
}
139
140
.atmark-chip {
141
+
padding: 3px 10px;
142
+
border-radius: var(--radius-m);
143
+
border: none;
144
+
background: var(--background-modifier-border);
145
color: var(--text-muted);
146
+
font-size: var(--font-smallest);
147
+
font-weight: var(--font-medium);
148
cursor: pointer;
149
+
transition: all 0.12s ease;
150
+
white-space: nowrap;
151
}
152
153
.atmark-chip:hover {
154
+
background: var(--background-modifier-border-hover);
155
color: var(--text-normal);
156
+
transform: translateY(-1px);
157
}
158
159
.atmark-chip-active {
160
background: var(--interactive-accent);
161
color: var(--text-on-accent);
162
+
font-weight: var(--font-semibold);
163
}
164
165
.atmark-chip-active:hover {
166
background: var(--interactive-accent-hover);
167
+
transform: translateY(-1px);
168
}
169
170
.atmark-grid {
···
1203
.semble-error {
1204
color: var(--text-error);
1205
}
1206
+
1207
+
/* Responsive styles for mobile and narrow views */
1208
+
@media (max-width: 600px) {
1209
+
.atmark-view {
1210
+
padding: 12px;
1211
+
}
1212
+
1213
+
.atmark-header {
1214
+
margin-bottom: 16px;
1215
+
padding-bottom: 12px;
1216
+
}
1217
+
1218
+
.atmark-title {
1219
+
font-size: var(--font-ui-medium);
1220
+
}
1221
+
1222
+
.atmark-source-option {
1223
+
padding: 3px 10px;
1224
+
font-size: var(--font-smallest);
1225
+
}
1226
+
1227
+
.atmark-source-text {
1228
+
font-size: var(--font-smallest);
1229
+
}
1230
+
1231
+
.atmark-grid {
1232
+
grid-template-columns: 1fr;
1233
+
gap: 12px;
1234
+
}
1235
+
1236
+
.atmark-filter-section {
1237
+
margin-bottom: 12px;
1238
+
}
1239
+
}
History
1 round
0 comments
treethought.xyz
submitted
#0
1 commit
expand
collapse
better responsiveness for source selection
expand 0 comments
pull request successfully merged