granite-mem 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -14
- package/dist/index.js +1002 -910
- package/dist/public/app.js +252 -300
- package/dist/public/graph.js +11 -14
- package/dist/public/index.html +115 -102
- package/dist/public/markdown-renderer.js +49 -51
- package/dist/public/style.css +595 -558
- package/package.json +2 -1
package/dist/public/style.css
CHANGED
|
@@ -1,237 +1,210 @@
|
|
|
1
|
-
/*
|
|
2
|
-
GRANITE — Editorial
|
|
3
|
-
|
|
4
|
-
═══════════════════════════════════════════════ */
|
|
1
|
+
/* ═══════════════════════════════════════
|
|
2
|
+
GRANITE — Editorial Knowledge Interface
|
|
3
|
+
═══════════════════════════════════════ */
|
|
5
4
|
|
|
6
|
-
*, *::before, *::after {
|
|
7
|
-
margin: 0;
|
|
8
|
-
padding: 0;
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
}
|
|
5
|
+
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
11
6
|
|
|
12
7
|
:root {
|
|
13
|
-
|
|
14
|
-
--bg-0:
|
|
15
|
-
--bg-1:
|
|
16
|
-
--bg-2:
|
|
17
|
-
--bg-3:
|
|
18
|
-
--bg-hover:
|
|
19
|
-
--bg-active:
|
|
20
|
-
|
|
21
|
-
--border
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
--text-
|
|
25
|
-
--text-
|
|
26
|
-
--text-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
--accent
|
|
30
|
-
--accent-
|
|
31
|
-
|
|
32
|
-
--
|
|
33
|
-
|
|
34
|
-
--link
|
|
35
|
-
|
|
36
|
-
--
|
|
37
|
-
|
|
38
|
-
--
|
|
39
|
-
|
|
40
|
-
--
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
--font-
|
|
45
|
-
--font-mono:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
--ease-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
--
|
|
53
|
-
--sidebar-panel: 260px;
|
|
54
|
-
--sidebar-total: 308px;
|
|
55
|
-
--content-max: 680px;
|
|
56
|
-
--radius: 8px;
|
|
57
|
-
--radius-sm: 5px;
|
|
8
|
+
--bg-deep: #050507;
|
|
9
|
+
--bg-0: #0a0a0d;
|
|
10
|
+
--bg-1: #0f0f13;
|
|
11
|
+
--bg-2: #151519;
|
|
12
|
+
--bg-3: #1b1b20;
|
|
13
|
+
--bg-hover: #1e1e24;
|
|
14
|
+
--bg-active: #232329;
|
|
15
|
+
|
|
16
|
+
--border: #1e1e25;
|
|
17
|
+
--border-dim: #16161c;
|
|
18
|
+
|
|
19
|
+
--text-0: #ededf0;
|
|
20
|
+
--text-1: #a8a8b4;
|
|
21
|
+
--text-2: #6b6b7a;
|
|
22
|
+
--text-3: #5a5a68;
|
|
23
|
+
|
|
24
|
+
--accent: #7c7fff;
|
|
25
|
+
--accent-dim: rgba(124, 127, 255, 0.08);
|
|
26
|
+
--accent-mid: rgba(124, 127, 255, 0.15);
|
|
27
|
+
--accent-text:#a8aaff;
|
|
28
|
+
|
|
29
|
+
--link: #8b8eff;
|
|
30
|
+
--link-hover: #b0b2ff;
|
|
31
|
+
--link-broken:#ef6b6b;
|
|
32
|
+
|
|
33
|
+
--green: #5cd9a8;
|
|
34
|
+
--green-dim: rgba(92, 217, 168, 0.08);
|
|
35
|
+
--synthesis: #e0a0ff;
|
|
36
|
+
--output: #ffb86c;
|
|
37
|
+
--code-text: #c0c8d8;
|
|
38
|
+
|
|
39
|
+
--font-sans: 'Instrument Sans', -apple-system, sans-serif;
|
|
40
|
+
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
|
|
41
|
+
|
|
42
|
+
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
43
|
+
--ease-smooth:cubic-bezier(0.4, 0, 0.2, 1);
|
|
44
|
+
|
|
45
|
+
--nav-w: 260px;
|
|
46
|
+
--radius: 8px;
|
|
47
|
+
--radius-sm: 5px;
|
|
58
48
|
}
|
|
59
49
|
|
|
60
50
|
html, body {
|
|
61
51
|
height: 100%;
|
|
62
52
|
font-family: var(--font-sans);
|
|
63
|
-
background: var(--bg-
|
|
53
|
+
background: var(--bg-deep);
|
|
64
54
|
color: var(--text-1);
|
|
65
55
|
font-size: 13px;
|
|
66
56
|
line-height: 1.5;
|
|
67
57
|
-webkit-font-smoothing: antialiased;
|
|
68
|
-
-moz-osx-font-smoothing: grayscale;
|
|
69
58
|
overflow: hidden;
|
|
70
59
|
}
|
|
71
60
|
|
|
72
|
-
/*
|
|
73
|
-
|
|
61
|
+
/* ═══ Focus ═══ */
|
|
62
|
+
*:focus-visible {
|
|
63
|
+
outline: 2px solid var(--accent);
|
|
64
|
+
outline-offset: 2px;
|
|
65
|
+
}
|
|
66
|
+
button:focus-visible, .nav-btn:focus-visible, .type-pill:focus-visible, .note-item:focus-visible {
|
|
67
|
+
outline: 2px solid var(--accent);
|
|
68
|
+
outline-offset: -2px;
|
|
69
|
+
border-radius: var(--radius-sm);
|
|
70
|
+
}
|
|
71
|
+
input:focus-visible, select:focus-visible, textarea:focus-visible {
|
|
72
|
+
outline: none; /* handled by box-shadow */
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* ═══ Reduced motion ═══ */
|
|
76
|
+
@media (prefers-reduced-motion: reduce) {
|
|
77
|
+
*, *::before, *::after {
|
|
78
|
+
animation-duration: 0.01ms !important;
|
|
79
|
+
animation-iteration-count: 1 !important;
|
|
80
|
+
transition-duration: 0.01ms !important;
|
|
81
|
+
scroll-behavior: auto !important;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
::selection { background: var(--accent-mid); color: var(--text-0); }
|
|
86
|
+
::-webkit-scrollbar { width: 3px; }
|
|
74
87
|
::-webkit-scrollbar-track { background: transparent; }
|
|
75
88
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|
76
89
|
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
|
|
77
90
|
|
|
78
|
-
/*
|
|
79
|
-
#
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
91
|
+
/* ═══ Grain texture ═══ */
|
|
92
|
+
#grain {
|
|
93
|
+
position: fixed;
|
|
94
|
+
inset: 0;
|
|
95
|
+
z-index: 9999;
|
|
96
|
+
pointer-events: none;
|
|
97
|
+
opacity: 0.035;
|
|
98
|
+
mix-blend-mode: overlay;
|
|
83
99
|
}
|
|
84
100
|
|
|
85
|
-
/*
|
|
86
|
-
|
|
87
|
-
═══════════════════════════════════ */
|
|
88
|
-
|
|
89
|
-
#sidebar {
|
|
101
|
+
/* ═══ Layout ═══ */
|
|
102
|
+
#app {
|
|
90
103
|
display: flex;
|
|
91
104
|
height: 100%;
|
|
92
|
-
flex-shrink: 0;
|
|
93
|
-
border-right: 1px solid var(--border);
|
|
94
|
-
transition: width 0.3s var(--ease-out);
|
|
95
105
|
}
|
|
96
106
|
|
|
97
|
-
|
|
98
|
-
#
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
width: var(--sidebar-rail);
|
|
103
|
-
min-width: var(--sidebar-rail);
|
|
107
|
+
/* ═══ NAVIGATION ═══ */
|
|
108
|
+
#nav {
|
|
109
|
+
width: var(--nav-w);
|
|
110
|
+
min-width: var(--nav-w);
|
|
111
|
+
height: 100%;
|
|
104
112
|
display: flex;
|
|
105
113
|
flex-direction: column;
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
background: var(--bg-1);
|
|
110
|
-
border-right: 1px solid var(--border-subtle);
|
|
111
|
-
z-index: 2;
|
|
114
|
+
background: var(--bg-0);
|
|
115
|
+
border-right: 1px solid var(--border-dim);
|
|
116
|
+
z-index: 10;
|
|
112
117
|
}
|
|
113
118
|
|
|
114
|
-
|
|
115
|
-
width: 32px;
|
|
116
|
-
height: 32px;
|
|
119
|
+
.nav-brand {
|
|
117
120
|
display: flex;
|
|
118
121
|
align-items: center;
|
|
119
|
-
|
|
122
|
+
gap: 8px;
|
|
123
|
+
padding: 16px 18px 12px;
|
|
120
124
|
color: var(--accent);
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
border-radius: var(--radius-sm);
|
|
125
|
-
margin-bottom: 12px;
|
|
126
|
-
transition: color 0.15s;
|
|
127
|
-
}
|
|
128
|
-
#brand-mark:hover { color: var(--text-0); }
|
|
129
|
-
|
|
130
|
-
.rail-btn {
|
|
131
|
-
width: 32px;
|
|
132
|
-
height: 32px;
|
|
133
|
-
display: flex;
|
|
134
|
-
align-items: center;
|
|
135
|
-
justify-content: center;
|
|
136
|
-
color: var(--text-2);
|
|
137
|
-
background: none;
|
|
138
|
-
border: none;
|
|
139
|
-
cursor: pointer;
|
|
140
|
-
border-radius: var(--radius-sm);
|
|
141
|
-
transition: all 0.15s;
|
|
125
|
+
font-size: 13px;
|
|
126
|
+
font-weight: 600;
|
|
127
|
+
letter-spacing: 0.04em;
|
|
142
128
|
}
|
|
143
|
-
.
|
|
144
|
-
.rail-btn.active { color: var(--accent-text); background: var(--accent-soft); }
|
|
129
|
+
.nav-brand svg { flex-shrink: 0; }
|
|
145
130
|
|
|
146
|
-
|
|
147
|
-
#sidebar-panel {
|
|
148
|
-
width: var(--sidebar-panel);
|
|
131
|
+
.nav-actions {
|
|
149
132
|
display: flex;
|
|
150
133
|
flex-direction: column;
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
transition: width 0.3s var(--ease-out), opacity 0.2s;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
#sidebar.collapsed #sidebar-panel {
|
|
157
|
-
width: 0;
|
|
158
|
-
opacity: 0;
|
|
159
|
-
pointer-events: none;
|
|
134
|
+
gap: 1px;
|
|
135
|
+
padding: 0 8px 10px;
|
|
160
136
|
}
|
|
161
137
|
|
|
162
|
-
|
|
163
|
-
#sidebar-search { padding: 12px 12px 8px; }
|
|
164
|
-
|
|
165
|
-
#search-wrapper {
|
|
138
|
+
.nav-btn {
|
|
166
139
|
display: flex;
|
|
167
140
|
align-items: center;
|
|
168
141
|
gap: 8px;
|
|
169
142
|
padding: 6px 10px;
|
|
170
|
-
background: var(--bg-2);
|
|
171
|
-
border: 1px solid var(--border);
|
|
172
|
-
border-radius: var(--radius-sm);
|
|
173
|
-
transition: border-color 0.15s;
|
|
174
|
-
}
|
|
175
|
-
#search-wrapper:focus-within {
|
|
176
|
-
border-color: var(--accent);
|
|
177
|
-
box-shadow: 0 0 0 2px var(--accent-soft);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
#search-box {
|
|
181
|
-
flex: 1;
|
|
182
|
-
background: none;
|
|
183
|
-
border: none;
|
|
184
|
-
color: var(--text-0);
|
|
185
143
|
font-family: var(--font-sans);
|
|
186
144
|
font-size: 12.5px;
|
|
187
|
-
|
|
145
|
+
color: var(--text-2);
|
|
146
|
+
background: none;
|
|
147
|
+
border: none;
|
|
148
|
+
border-radius: var(--radius-sm);
|
|
149
|
+
cursor: pointer;
|
|
150
|
+
transition: color 0.12s, background-color 0.12s;
|
|
188
151
|
}
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
152
|
+
.nav-btn:hover { color: var(--text-1); background: var(--bg-hover); }
|
|
153
|
+
.nav-btn.active { color: var(--accent-text); background: var(--accent-dim); }
|
|
154
|
+
.nav-btn span { flex: 1; text-align: left; }
|
|
155
|
+
.nav-btn kbd {
|
|
192
156
|
font-family: var(--font-sans);
|
|
193
157
|
font-size: 10px;
|
|
194
158
|
color: var(--text-3);
|
|
195
|
-
background: var(--bg-
|
|
159
|
+
background: var(--bg-2);
|
|
196
160
|
border: 1px solid var(--border);
|
|
197
161
|
border-radius: 3px;
|
|
198
|
-
padding:
|
|
199
|
-
line-height: 1.
|
|
162
|
+
padding: 0 4px;
|
|
163
|
+
line-height: 1.5;
|
|
200
164
|
}
|
|
165
|
+
.nav-btn svg { opacity: 0.5; flex-shrink: 0; }
|
|
166
|
+
.nav-btn:hover svg { opacity: 0.8; }
|
|
201
167
|
|
|
202
168
|
/* ── Type filters ── */
|
|
169
|
+
#nav-note-list {
|
|
170
|
+
flex: 1;
|
|
171
|
+
display: flex;
|
|
172
|
+
flex-direction: column;
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
border-top: 1px solid var(--border-dim);
|
|
175
|
+
}
|
|
176
|
+
|
|
203
177
|
#type-filters {
|
|
204
178
|
display: flex;
|
|
205
179
|
gap: 4px;
|
|
206
|
-
padding:
|
|
180
|
+
padding: 10px 12px 6px;
|
|
207
181
|
flex-wrap: wrap;
|
|
208
182
|
}
|
|
209
183
|
|
|
210
|
-
.type-
|
|
211
|
-
padding:
|
|
184
|
+
.type-pill {
|
|
185
|
+
padding: 2px 10px;
|
|
212
186
|
font-family: var(--font-sans);
|
|
213
187
|
font-size: 11px;
|
|
214
188
|
font-weight: 500;
|
|
215
|
-
letter-spacing: 0.01em;
|
|
216
189
|
border-radius: 20px;
|
|
217
190
|
border: 1px solid transparent;
|
|
218
|
-
background:
|
|
219
|
-
color: var(--text-
|
|
191
|
+
background: none;
|
|
192
|
+
color: var(--text-3);
|
|
220
193
|
cursor: pointer;
|
|
221
|
-
transition:
|
|
194
|
+
transition: color 0.12s, background-color 0.12s, border-color 0.12s;
|
|
222
195
|
}
|
|
223
|
-
.type-
|
|
224
|
-
.type-
|
|
196
|
+
.type-pill:hover { color: var(--text-2); }
|
|
197
|
+
.type-pill.active {
|
|
225
198
|
color: var(--accent-text);
|
|
226
|
-
background: var(--accent-
|
|
227
|
-
border-color: var(--
|
|
199
|
+
background: var(--accent-dim);
|
|
200
|
+
border-color: var(--accent-mid);
|
|
228
201
|
}
|
|
229
202
|
|
|
230
203
|
/* ── Note list ── */
|
|
231
204
|
#note-list {
|
|
232
205
|
flex: 1;
|
|
233
206
|
overflow-y: auto;
|
|
234
|
-
padding:
|
|
207
|
+
padding: 4px 8px 12px;
|
|
235
208
|
}
|
|
236
209
|
|
|
237
210
|
.note-item {
|
|
@@ -239,21 +212,15 @@ html, body {
|
|
|
239
212
|
border-radius: var(--radius-sm);
|
|
240
213
|
cursor: pointer;
|
|
241
214
|
transition: background 0.1s;
|
|
242
|
-
margin-bottom: 1px;
|
|
243
215
|
}
|
|
244
216
|
.note-item:hover { background: var(--bg-hover); }
|
|
245
217
|
.note-item.active { background: var(--bg-active); }
|
|
246
|
-
.note-item.keyboard-focus {
|
|
247
|
-
background: var(--bg-hover);
|
|
248
|
-
outline: 1px solid var(--border);
|
|
249
|
-
}
|
|
250
218
|
|
|
251
219
|
.note-item-title {
|
|
252
220
|
font-size: 13px;
|
|
253
221
|
font-weight: 500;
|
|
254
222
|
color: var(--text-0);
|
|
255
223
|
line-height: 1.4;
|
|
256
|
-
margin-bottom: 2px;
|
|
257
224
|
white-space: nowrap;
|
|
258
225
|
overflow: hidden;
|
|
259
226
|
text-overflow: ellipsis;
|
|
@@ -265,6 +232,7 @@ html, body {
|
|
|
265
232
|
display: flex;
|
|
266
233
|
align-items: center;
|
|
267
234
|
gap: 6px;
|
|
235
|
+
margin-top: 1px;
|
|
268
236
|
}
|
|
269
237
|
|
|
270
238
|
.note-item-type {
|
|
@@ -272,19 +240,14 @@ html, body {
|
|
|
272
240
|
font-weight: 500;
|
|
273
241
|
letter-spacing: 0.03em;
|
|
274
242
|
text-transform: uppercase;
|
|
275
|
-
color: var(--text-2);
|
|
276
243
|
}
|
|
277
|
-
.note-item-type.
|
|
278
|
-
.note-item-type.
|
|
279
|
-
.note-item-type.
|
|
280
|
-
.note-item-type.
|
|
281
|
-
.note-item-type.meeting { color: #93c5fd; }
|
|
282
|
-
.note-item-type.project { color: #c4b5fd; }
|
|
283
|
-
.note-item-type.decision { color: #fca5a5; }
|
|
244
|
+
.note-item-type.note { color: var(--accent-text); }
|
|
245
|
+
.note-item-type.source { color: var(--green); }
|
|
246
|
+
.note-item-type.synthesis { color: var(--synthesis); }
|
|
247
|
+
.note-item-type.output { color: var(--output); }
|
|
284
248
|
|
|
285
249
|
.note-item-dot {
|
|
286
|
-
width: 2px;
|
|
287
|
-
height: 2px;
|
|
250
|
+
width: 2px; height: 2px;
|
|
288
251
|
border-radius: 50%;
|
|
289
252
|
background: var(--text-3);
|
|
290
253
|
}
|
|
@@ -292,7 +255,7 @@ html, body {
|
|
|
292
255
|
.note-item-snippet {
|
|
293
256
|
font-size: 11px;
|
|
294
257
|
color: var(--text-3);
|
|
295
|
-
margin-top:
|
|
258
|
+
margin-top: 2px;
|
|
296
259
|
line-height: 1.4;
|
|
297
260
|
display: -webkit-box;
|
|
298
261
|
-webkit-line-clamp: 2;
|
|
@@ -300,180 +263,66 @@ html, body {
|
|
|
300
263
|
overflow: hidden;
|
|
301
264
|
}
|
|
302
265
|
.note-item-snippet mark {
|
|
303
|
-
background: var(--accent-
|
|
266
|
+
background: var(--accent-dim);
|
|
304
267
|
color: var(--accent-text);
|
|
305
268
|
border-radius: 2px;
|
|
306
269
|
padding: 0 1px;
|
|
307
270
|
}
|
|
308
271
|
|
|
309
|
-
/*
|
|
310
|
-
CREATION PANEL
|
|
311
|
-
═══════════════════════════════════ */
|
|
312
|
-
|
|
313
|
-
#create-panel {
|
|
314
|
-
flex: 1;
|
|
315
|
-
display: flex;
|
|
316
|
-
flex-direction: column;
|
|
317
|
-
overflow-y: auto;
|
|
318
|
-
padding: 0 12px 12px;
|
|
319
|
-
animation: fadeSlideIn 0.25s var(--ease-out);
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
#create-panel-header {
|
|
323
|
-
display: flex;
|
|
324
|
-
align-items: center;
|
|
325
|
-
justify-content: space-between;
|
|
326
|
-
padding: 8px 0 12px;
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
.create-panel-title {
|
|
330
|
-
font-size: 12px;
|
|
331
|
-
font-weight: 600;
|
|
332
|
-
color: var(--text-1);
|
|
333
|
-
letter-spacing: 0.02em;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
.create-panel-close {
|
|
337
|
-
width: 24px;
|
|
338
|
-
height: 24px;
|
|
339
|
-
display: flex;
|
|
340
|
-
align-items: center;
|
|
341
|
-
justify-content: center;
|
|
342
|
-
color: var(--text-3);
|
|
343
|
-
background: none;
|
|
344
|
-
border: none;
|
|
345
|
-
cursor: pointer;
|
|
346
|
-
border-radius: var(--radius-sm);
|
|
347
|
-
transition: all 0.15s;
|
|
348
|
-
}
|
|
349
|
-
.create-panel-close:hover { color: var(--text-1); background: var(--bg-hover); }
|
|
350
|
-
|
|
351
|
-
.create-label {
|
|
352
|
-
font-size: 10px;
|
|
353
|
-
font-weight: 600;
|
|
354
|
-
color: var(--text-3);
|
|
355
|
-
text-transform: uppercase;
|
|
356
|
-
letter-spacing: 0.06em;
|
|
357
|
-
margin-bottom: 4px;
|
|
358
|
-
margin-top: 10px;
|
|
359
|
-
display: block;
|
|
360
|
-
}
|
|
361
|
-
.create-label:first-of-type { margin-top: 0; }
|
|
362
|
-
|
|
363
|
-
.create-select,
|
|
364
|
-
.create-input {
|
|
365
|
-
width: 100%;
|
|
366
|
-
padding: 6px 10px;
|
|
367
|
-
background: var(--bg-2);
|
|
368
|
-
border: 1px solid var(--border);
|
|
369
|
-
border-radius: var(--radius-sm);
|
|
370
|
-
color: var(--text-0);
|
|
371
|
-
font-family: var(--font-sans);
|
|
372
|
-
font-size: 12.5px;
|
|
373
|
-
outline: none;
|
|
374
|
-
transition: border-color 0.15s;
|
|
375
|
-
}
|
|
376
|
-
.create-select:focus,
|
|
377
|
-
.create-input:focus {
|
|
378
|
-
border-color: var(--accent);
|
|
379
|
-
box-shadow: 0 0 0 2px var(--accent-soft);
|
|
380
|
-
}
|
|
381
|
-
.create-select {
|
|
382
|
-
appearance: none;
|
|
383
|
-
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e7a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
384
|
-
background-repeat: no-repeat;
|
|
385
|
-
background-position: right 10px center;
|
|
386
|
-
padding-right: 28px;
|
|
387
|
-
cursor: pointer;
|
|
388
|
-
}
|
|
389
|
-
.create-select option { background: var(--bg-2); color: var(--text-0); }
|
|
390
|
-
|
|
391
|
-
.create-textarea {
|
|
392
|
-
width: 100%;
|
|
393
|
-
min-height: 160px;
|
|
394
|
-
padding: 10px;
|
|
395
|
-
background: var(--bg-2);
|
|
396
|
-
border: 1px solid var(--border);
|
|
397
|
-
border-radius: var(--radius-sm);
|
|
398
|
-
color: var(--text-0);
|
|
399
|
-
font-family: var(--font-mono);
|
|
400
|
-
font-size: 12px;
|
|
401
|
-
line-height: 1.6;
|
|
402
|
-
outline: none;
|
|
403
|
-
resize: vertical;
|
|
404
|
-
transition: border-color 0.15s;
|
|
405
|
-
}
|
|
406
|
-
.create-textarea:focus {
|
|
407
|
-
border-color: var(--accent);
|
|
408
|
-
box-shadow: 0 0 0 2px var(--accent-soft);
|
|
409
|
-
}
|
|
410
|
-
.create-textarea::placeholder { color: var(--text-3); }
|
|
411
|
-
|
|
412
|
-
.create-submit {
|
|
413
|
-
margin-top: 12px;
|
|
414
|
-
width: 100%;
|
|
415
|
-
padding: 8px;
|
|
416
|
-
background: var(--accent);
|
|
417
|
-
color: #fff;
|
|
418
|
-
font-family: var(--font-sans);
|
|
419
|
-
font-size: 12.5px;
|
|
420
|
-
font-weight: 600;
|
|
421
|
-
border: none;
|
|
422
|
-
border-radius: var(--radius-sm);
|
|
423
|
-
cursor: pointer;
|
|
424
|
-
transition: opacity 0.15s, transform 0.1s;
|
|
425
|
-
}
|
|
426
|
-
.create-submit:hover { opacity: 0.9; }
|
|
427
|
-
.create-submit:active { transform: scale(0.98); }
|
|
428
|
-
|
|
429
|
-
/* ═══════════════════════════════════
|
|
430
|
-
MAIN CONTENT
|
|
431
|
-
═══════════════════════════════════ */
|
|
432
|
-
|
|
272
|
+
/* ═══ MAIN ═══ */
|
|
433
273
|
#main {
|
|
434
274
|
flex: 1;
|
|
435
275
|
display: flex;
|
|
436
276
|
flex-direction: column;
|
|
437
277
|
overflow: hidden;
|
|
438
278
|
position: relative;
|
|
439
|
-
background: var(--bg-
|
|
279
|
+
background: var(--bg-deep);
|
|
440
280
|
}
|
|
441
281
|
|
|
442
|
-
|
|
282
|
+
/* ═══ NOTE VIEW ═══ */
|
|
283
|
+
#note-view {
|
|
284
|
+
display: none;
|
|
443
285
|
flex: 1;
|
|
444
|
-
|
|
445
|
-
|
|
286
|
+
overflow: hidden;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
#note-scroll {
|
|
290
|
+
height: 100%;
|
|
446
291
|
overflow-y: auto;
|
|
447
292
|
scroll-behavior: smooth;
|
|
448
293
|
}
|
|
449
294
|
|
|
450
|
-
|
|
451
|
-
#note-header {
|
|
452
|
-
display: none;
|
|
453
|
-
max-width: var(--content-max);
|
|
295
|
+
#note-article {
|
|
454
296
|
width: 100%;
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
297
|
+
padding: 48px 56px 80px;
|
|
298
|
+
}
|
|
299
|
+
#note-article.animate {
|
|
300
|
+
animation: noteEnter 0.5s var(--ease) both;
|
|
458
301
|
}
|
|
459
302
|
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
303
|
+
@keyframes noteEnter {
|
|
304
|
+
from { opacity: 0; transform: translateY(12px); }
|
|
305
|
+
to { opacity: 1; transform: translateY(0); }
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
#note-type-line {
|
|
309
|
+
font-size: 10px;
|
|
310
|
+
font-weight: 600;
|
|
311
|
+
letter-spacing: 0.1em;
|
|
464
312
|
text-transform: uppercase;
|
|
465
|
-
|
|
466
|
-
|
|
313
|
+
color: var(--accent-text);
|
|
314
|
+
margin-bottom: 10px;
|
|
315
|
+
opacity: 0.7;
|
|
467
316
|
}
|
|
468
317
|
|
|
469
318
|
#note-title {
|
|
470
|
-
font-family: var(--font-
|
|
471
|
-
font-size: clamp(26px,
|
|
472
|
-
font-weight:
|
|
319
|
+
font-family: var(--font-sans);
|
|
320
|
+
font-size: clamp(26px, 3.5vw, 34px);
|
|
321
|
+
font-weight: 700;
|
|
473
322
|
color: var(--text-0);
|
|
474
323
|
line-height: 1.2;
|
|
475
|
-
letter-spacing: -0.
|
|
476
|
-
margin-bottom:
|
|
324
|
+
letter-spacing: -0.03em;
|
|
325
|
+
margin-bottom: 16px;
|
|
477
326
|
}
|
|
478
327
|
|
|
479
328
|
#note-meta {
|
|
@@ -481,223 +330,197 @@ html, body {
|
|
|
481
330
|
align-items: center;
|
|
482
331
|
gap: 10px;
|
|
483
332
|
font-size: 12px;
|
|
484
|
-
color: var(--text-
|
|
485
|
-
padding-bottom:
|
|
486
|
-
border-bottom: 1px solid var(--border-
|
|
487
|
-
}
|
|
488
|
-
|
|
489
|
-
.meta-badge {
|
|
490
|
-
font-size: 10px;
|
|
491
|
-
font-weight: 600;
|
|
492
|
-
letter-spacing: 0.05em;
|
|
493
|
-
text-transform: uppercase;
|
|
494
|
-
padding: 2px 8px;
|
|
495
|
-
border-radius: 3px;
|
|
496
|
-
background: var(--accent-soft);
|
|
497
|
-
color: var(--accent-text);
|
|
498
|
-
border: 1px solid var(--tag-border);
|
|
333
|
+
color: var(--text-3);
|
|
334
|
+
padding-bottom: 32px;
|
|
335
|
+
border-bottom: 1px solid var(--border-dim);
|
|
499
336
|
}
|
|
500
337
|
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
#note-tags { display: flex; gap: 4px; }
|
|
504
|
-
|
|
338
|
+
#note-tags { display: flex; gap: 5px; flex-wrap: wrap; }
|
|
505
339
|
.tag {
|
|
506
340
|
font-size: 11px;
|
|
507
341
|
color: var(--text-2);
|
|
508
|
-
padding: 1px
|
|
342
|
+
padding: 1px 8px;
|
|
509
343
|
border-radius: 3px;
|
|
510
|
-
background: var(--bg-
|
|
344
|
+
background: var(--bg-2);
|
|
511
345
|
border: 1px solid var(--border);
|
|
512
346
|
}
|
|
513
347
|
|
|
514
|
-
/*
|
|
515
|
-
NOTE BODY — Rendered Markdown
|
|
516
|
-
═══════════════════════════════════ */
|
|
517
|
-
|
|
348
|
+
/* ═══ NOTE BODY ═══ */
|
|
518
349
|
#note-body {
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
350
|
+
padding-top: 28px;
|
|
351
|
+
animation: bodyEnter 0.6s var(--ease) 0.1s both;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
@keyframes bodyEnter {
|
|
355
|
+
from { opacity: 0; }
|
|
356
|
+
to { opacity: 1; }
|
|
525
357
|
}
|
|
526
358
|
|
|
527
|
-
/* ── Headings ── */
|
|
528
359
|
#note-body .md-h1 {
|
|
529
|
-
font-family: var(--font-
|
|
530
|
-
font-size:
|
|
531
|
-
font-weight:
|
|
360
|
+
font-family: var(--font-sans);
|
|
361
|
+
font-size: 22px;
|
|
362
|
+
font-weight: 700;
|
|
532
363
|
color: var(--text-0);
|
|
533
364
|
line-height: 1.3;
|
|
534
|
-
margin:
|
|
535
|
-
letter-spacing: -0.
|
|
365
|
+
margin: 36px 0 12px;
|
|
366
|
+
letter-spacing: -0.02em;
|
|
536
367
|
}
|
|
537
368
|
|
|
538
369
|
#note-body .md-h2 {
|
|
539
|
-
font-family: var(--font-
|
|
540
|
-
font-size:
|
|
541
|
-
font-weight:
|
|
370
|
+
font-family: var(--font-sans);
|
|
371
|
+
font-size: 18px;
|
|
372
|
+
font-weight: 600;
|
|
542
373
|
color: var(--text-0);
|
|
543
374
|
line-height: 1.35;
|
|
544
|
-
margin:
|
|
375
|
+
margin: 32px 0 10px;
|
|
376
|
+
letter-spacing: -0.01em;
|
|
545
377
|
}
|
|
546
378
|
|
|
547
379
|
#note-body .md-h3 {
|
|
548
380
|
font-family: var(--font-sans);
|
|
549
|
-
font-size:
|
|
381
|
+
font-size: 12px;
|
|
550
382
|
font-weight: 600;
|
|
551
383
|
color: var(--accent-text);
|
|
552
384
|
text-transform: uppercase;
|
|
553
|
-
letter-spacing: 0.
|
|
554
|
-
margin:
|
|
385
|
+
letter-spacing: 0.06em;
|
|
386
|
+
margin: 28px 0 8px;
|
|
555
387
|
}
|
|
556
388
|
|
|
557
|
-
/* ── Body text ── */
|
|
558
389
|
#note-body .md-body {
|
|
559
|
-
font-
|
|
560
|
-
font-size: 14px;
|
|
390
|
+
font-size: 14.5px;
|
|
561
391
|
color: var(--text-1);
|
|
562
|
-
line-height: 1.
|
|
392
|
+
line-height: 1.8;
|
|
563
393
|
margin: 0 0 4px;
|
|
564
394
|
}
|
|
565
395
|
|
|
566
|
-
/* ── Lists ── */
|
|
567
396
|
#note-body .md-list {
|
|
568
397
|
padding-left: 20px;
|
|
569
398
|
margin: 4px 0;
|
|
570
399
|
}
|
|
571
|
-
|
|
572
400
|
#note-body .md-list li {
|
|
573
|
-
font-
|
|
574
|
-
font-size: 14px;
|
|
401
|
+
font-size: 14.5px;
|
|
575
402
|
color: var(--text-1);
|
|
576
|
-
line-height: 1.
|
|
403
|
+
line-height: 1.8;
|
|
577
404
|
margin: 2px 0;
|
|
578
405
|
}
|
|
579
|
-
|
|
580
|
-
#note-body .md-list li::marker {
|
|
581
|
-
color: var(--text-3);
|
|
582
|
-
}
|
|
583
|
-
|
|
406
|
+
#note-body .md-list li::marker { color: var(--text-3); }
|
|
584
407
|
#note-body ul.md-list { list-style-type: disc; }
|
|
585
|
-
#note-body ul.md-list li::marker {
|
|
408
|
+
#note-body ul.md-list li::marker { font-size: 8px; }
|
|
586
409
|
|
|
587
|
-
/* ── Blockquotes ── */
|
|
588
410
|
#note-body .md-blockquote {
|
|
589
|
-
font-family: var(--font-
|
|
411
|
+
font-family: var(--font-sans);
|
|
590
412
|
font-style: italic;
|
|
591
413
|
font-size: 14px;
|
|
592
414
|
color: var(--text-2);
|
|
593
415
|
line-height: 1.75;
|
|
594
|
-
margin:
|
|
595
|
-
padding: 2px 0 2px
|
|
416
|
+
margin: 16px 0;
|
|
417
|
+
padding: 2px 0 2px 18px;
|
|
596
418
|
border-left: 2px solid var(--border);
|
|
597
419
|
}
|
|
598
420
|
|
|
599
|
-
/* ── Code blocks ── */
|
|
600
421
|
#note-body .code-block {
|
|
601
|
-
margin:
|
|
602
|
-
background: var(--bg-
|
|
422
|
+
margin: 16px 0;
|
|
423
|
+
background: var(--bg-1);
|
|
603
424
|
border: 1px solid var(--border);
|
|
604
425
|
border-radius: 6px;
|
|
605
426
|
position: relative;
|
|
606
427
|
overflow: hidden;
|
|
607
428
|
}
|
|
608
|
-
|
|
609
429
|
#note-body .code-block .code-lang {
|
|
610
430
|
position: absolute;
|
|
611
|
-
top: 0;
|
|
612
|
-
right: 0;
|
|
431
|
+
top: 0; right: 0;
|
|
613
432
|
font-family: var(--font-sans);
|
|
614
433
|
font-size: 10px;
|
|
615
434
|
font-weight: 500;
|
|
616
435
|
color: var(--text-3);
|
|
617
|
-
padding:
|
|
436
|
+
padding: 6px 12px;
|
|
618
437
|
letter-spacing: 0.02em;
|
|
619
438
|
}
|
|
620
|
-
|
|
621
|
-
#note-body .code-block pre {
|
|
622
|
-
padding: 14px;
|
|
623
|
-
overflow-x: auto;
|
|
624
|
-
}
|
|
625
|
-
|
|
439
|
+
#note-body .code-block pre { padding: 16px; overflow-x: auto; }
|
|
626
440
|
#note-body .code-block code {
|
|
627
441
|
font-family: var(--font-mono);
|
|
628
442
|
font-size: 12.5px;
|
|
629
443
|
line-height: 1.6;
|
|
630
|
-
color:
|
|
444
|
+
color: var(--code-text);
|
|
631
445
|
}
|
|
632
446
|
|
|
633
|
-
/* ── Inline code ── */
|
|
634
447
|
#note-body .inline-code {
|
|
635
448
|
font-family: var(--font-mono);
|
|
636
449
|
font-size: 12px;
|
|
637
|
-
color:
|
|
450
|
+
color: var(--code-text);
|
|
638
451
|
background: var(--bg-2);
|
|
639
452
|
border: 1px solid var(--border);
|
|
640
453
|
border-radius: 3px;
|
|
641
454
|
padding: 1px 5px;
|
|
642
455
|
}
|
|
643
456
|
|
|
644
|
-
/* ── Horizontal rule ── */
|
|
645
457
|
#note-body .md-hr {
|
|
646
458
|
border: none;
|
|
647
459
|
height: 1px;
|
|
648
460
|
background: var(--border);
|
|
649
|
-
margin:
|
|
461
|
+
margin: 32px 20%;
|
|
650
462
|
}
|
|
651
463
|
|
|
652
|
-
|
|
653
|
-
#note-body
|
|
654
|
-
font-weight: 600;
|
|
655
|
-
color: var(--text-0);
|
|
656
|
-
}
|
|
657
|
-
|
|
658
|
-
#note-body em {
|
|
659
|
-
font-family: var(--font-serif);
|
|
660
|
-
font-style: italic;
|
|
661
|
-
}
|
|
464
|
+
#note-body strong { font-weight: 600; color: var(--text-0); }
|
|
465
|
+
#note-body em { font-style: italic; }
|
|
662
466
|
|
|
663
|
-
/* ── External links ── */
|
|
664
467
|
#note-body .external-link {
|
|
665
468
|
color: var(--text-2);
|
|
666
469
|
text-decoration: underline;
|
|
667
470
|
text-decoration-color: var(--border);
|
|
668
471
|
text-underline-offset: 2px;
|
|
669
|
-
transition: color 0.15s
|
|
472
|
+
transition: color 0.15s;
|
|
473
|
+
}
|
|
474
|
+
#note-body .external-link:hover { color: var(--text-1); text-decoration-color: var(--text-2); }
|
|
475
|
+
|
|
476
|
+
/* ── Markdown table ── */
|
|
477
|
+
#note-body .md-table-wrap {
|
|
478
|
+
overflow-x: auto;
|
|
479
|
+
margin: 16px 0;
|
|
480
|
+
border-radius: 6px;
|
|
481
|
+
}
|
|
482
|
+
#note-body .md-table {
|
|
483
|
+
margin: 0;
|
|
484
|
+
width: 100%;
|
|
485
|
+
border-collapse: collapse;
|
|
486
|
+
font-size: 13px;
|
|
670
487
|
}
|
|
671
|
-
#note-body .
|
|
488
|
+
#note-body .md-table th,
|
|
489
|
+
#note-body .md-table td {
|
|
490
|
+
padding: 8px 12px;
|
|
491
|
+
border: 1px solid var(--border);
|
|
492
|
+
text-align: left;
|
|
672
493
|
color: var(--text-1);
|
|
673
|
-
text-decoration-color: var(--text-2);
|
|
674
494
|
}
|
|
495
|
+
#note-body .md-table th {
|
|
496
|
+
background: var(--bg-2);
|
|
497
|
+
font-weight: 600;
|
|
498
|
+
color: var(--text-0);
|
|
499
|
+
font-size: 11px;
|
|
500
|
+
text-transform: uppercase;
|
|
501
|
+
letter-spacing: 0.04em;
|
|
502
|
+
}
|
|
503
|
+
#note-body .md-table td { background: var(--bg-1); }
|
|
504
|
+
#note-body .md-table tr:hover td { background: var(--bg-2); }
|
|
675
505
|
|
|
676
|
-
/*
|
|
677
|
-
WIKILINKS
|
|
678
|
-
═══════════════════════════════════ */
|
|
679
|
-
|
|
506
|
+
/* ═══ WIKILINKS ═══ */
|
|
680
507
|
.wikilink {
|
|
681
508
|
color: var(--link);
|
|
682
509
|
text-decoration: none;
|
|
683
510
|
border-bottom: 1px solid transparent;
|
|
684
|
-
transition: color 0.15s, border-color 0.
|
|
511
|
+
transition: color 0.15s, border-color 0.15s;
|
|
685
512
|
cursor: pointer;
|
|
686
513
|
}
|
|
687
|
-
.wikilink:hover {
|
|
688
|
-
color: var(--link-hover);
|
|
689
|
-
border-bottom-color: var(--link-hover);
|
|
690
|
-
}
|
|
514
|
+
.wikilink:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }
|
|
691
515
|
|
|
692
516
|
.wikilink-broken {
|
|
693
517
|
color: var(--link-broken);
|
|
694
|
-
border-bottom: 1px dashed rgba(
|
|
518
|
+
border-bottom: 1px dashed rgba(239, 107, 107, 0.3);
|
|
695
519
|
}
|
|
696
520
|
|
|
697
|
-
|
|
698
|
-
.wikilink-preview {
|
|
521
|
+
#wikilink-preview {
|
|
699
522
|
position: fixed;
|
|
700
|
-
z-index:
|
|
523
|
+
z-index: 200;
|
|
701
524
|
width: 280px;
|
|
702
525
|
background: var(--bg-2);
|
|
703
526
|
border: 1px solid var(--border);
|
|
@@ -706,86 +529,53 @@ html, body {
|
|
|
706
529
|
pointer-events: none;
|
|
707
530
|
opacity: 0;
|
|
708
531
|
transform: translateY(4px);
|
|
709
|
-
transition: opacity 0.2s var(--ease
|
|
710
|
-
box-shadow: 0
|
|
711
|
-
}
|
|
712
|
-
|
|
713
|
-
.wikilink-preview.visible {
|
|
714
|
-
opacity: 1;
|
|
715
|
-
transform: translateY(0);
|
|
716
|
-
pointer-events: auto;
|
|
532
|
+
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
|
|
533
|
+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.02);
|
|
717
534
|
}
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
font-size: 10px;
|
|
721
|
-
|
|
722
|
-
text-
|
|
723
|
-
letter-spacing: 0.05em;
|
|
724
|
-
color: var(--accent-text);
|
|
725
|
-
margin-bottom: 4px;
|
|
535
|
+
#wikilink-preview.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
|
|
536
|
+
#wikilink-preview .preview-type {
|
|
537
|
+
font-size: 10px; font-weight: 600;
|
|
538
|
+
text-transform: uppercase; letter-spacing: 0.06em;
|
|
539
|
+
color: var(--accent-text); margin-bottom: 4px;
|
|
726
540
|
}
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
font-
|
|
730
|
-
|
|
731
|
-
color: var(--text-0);
|
|
732
|
-
line-height: 1.3;
|
|
733
|
-
margin-bottom: 8px;
|
|
541
|
+
#wikilink-preview .preview-title {
|
|
542
|
+
font-family: var(--font-sans);
|
|
543
|
+
font-size: 14px; font-weight: 600; color: var(--text-0);
|
|
544
|
+
line-height: 1.3; margin-bottom: 8px;
|
|
734
545
|
}
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
font-size: 12px;
|
|
738
|
-
color: var(--text-2);
|
|
546
|
+
#wikilink-preview .preview-snippet {
|
|
547
|
+
font-size: 12px; color: var(--text-2);
|
|
739
548
|
line-height: 1.5;
|
|
740
|
-
display: -webkit-box;
|
|
741
|
-
-webkit-
|
|
742
|
-
-webkit-box-orient: vertical;
|
|
743
|
-
overflow: hidden;
|
|
549
|
+
display: -webkit-box; -webkit-line-clamp: 3;
|
|
550
|
+
-webkit-box-orient: vertical; overflow: hidden;
|
|
744
551
|
}
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
display: flex;
|
|
748
|
-
gap: 4px;
|
|
749
|
-
margin-top: 8px;
|
|
552
|
+
#wikilink-preview .preview-tags {
|
|
553
|
+
display: flex; gap: 4px; margin-top: 8px;
|
|
750
554
|
}
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
color: var(--text-3);
|
|
757
|
-
padding: 1px 6px;
|
|
758
|
-
border-radius: 3px;
|
|
759
|
-
background: var(--bg-3);
|
|
760
|
-
border: 1px solid var(--border);
|
|
555
|
+
#wikilink-preview .preview-tags:empty { display: none; }
|
|
556
|
+
#wikilink-preview .preview-tag {
|
|
557
|
+
font-size: 10px; color: var(--text-3);
|
|
558
|
+
padding: 1px 6px; border-radius: 3px;
|
|
559
|
+
background: var(--bg-3); border: 1px solid var(--border);
|
|
761
560
|
}
|
|
762
561
|
|
|
763
|
-
/*
|
|
764
|
-
|
|
765
|
-
═══════════════════════════════════ */
|
|
766
|
-
|
|
767
|
-
#backlinks-panel {
|
|
562
|
+
/* ═══ BACKLINKS ═══ */
|
|
563
|
+
#backlinks {
|
|
768
564
|
display: none;
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
animation: fadeSlideIn 0.5s var(--ease-out) 0.1s both;
|
|
565
|
+
margin-top: 48px;
|
|
566
|
+
padding-top: 24px;
|
|
567
|
+
border-top: 1px solid var(--border-dim);
|
|
568
|
+
animation: bodyEnter 0.6s var(--ease) 0.2s both;
|
|
774
569
|
}
|
|
775
570
|
|
|
776
|
-
|
|
777
|
-
display: flex;
|
|
778
|
-
align-items: center;
|
|
779
|
-
gap: 6px;
|
|
571
|
+
.backlinks-label {
|
|
780
572
|
font-size: 11px;
|
|
781
573
|
font-weight: 600;
|
|
782
574
|
color: var(--text-3);
|
|
783
575
|
text-transform: uppercase;
|
|
784
576
|
letter-spacing: 0.06em;
|
|
785
|
-
|
|
786
|
-
border-top: 1px solid var(--border-subtle);
|
|
577
|
+
margin-bottom: 10px;
|
|
787
578
|
}
|
|
788
|
-
|
|
789
579
|
#backlinks-count { color: var(--text-2); }
|
|
790
580
|
|
|
791
581
|
.backlink-item {
|
|
@@ -796,128 +586,375 @@ html, body {
|
|
|
796
586
|
transition: background 0.1s;
|
|
797
587
|
}
|
|
798
588
|
.backlink-item:hover { background: var(--bg-hover); }
|
|
799
|
-
|
|
800
589
|
.backlink-title {
|
|
801
590
|
font-size: 13px;
|
|
802
591
|
font-weight: 500;
|
|
803
592
|
color: var(--link);
|
|
804
|
-
display: flex;
|
|
805
|
-
align-items: center;
|
|
806
|
-
gap: 6px;
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
.backlink-arrow {
|
|
810
|
-
font-size: 11px;
|
|
811
|
-
color: var(--text-3);
|
|
593
|
+
display: flex; align-items: center; gap: 6px;
|
|
812
594
|
}
|
|
813
|
-
|
|
595
|
+
.backlink-arrow { font-size: 11px; color: var(--text-3); }
|
|
814
596
|
.backlink-context {
|
|
815
|
-
font-size: 11.5px;
|
|
816
|
-
|
|
817
|
-
margin-top: 2px;
|
|
818
|
-
line-height: 1.5;
|
|
597
|
+
font-size: 11.5px; color: var(--text-3);
|
|
598
|
+
margin-top: 2px; line-height: 1.5;
|
|
819
599
|
}
|
|
820
600
|
|
|
821
|
-
/*
|
|
822
|
-
GRAPH VIEW
|
|
823
|
-
═══════════════════════════════════ */
|
|
824
|
-
|
|
601
|
+
/* ═══ GRAPH ═══ */
|
|
825
602
|
#graph-view {
|
|
826
603
|
flex: 1;
|
|
827
604
|
position: relative;
|
|
828
605
|
overflow: hidden;
|
|
829
606
|
}
|
|
830
|
-
|
|
831
607
|
#graph-canvas {
|
|
832
|
-
display: block;
|
|
833
|
-
width: 100%;
|
|
834
|
-
height: 100%;
|
|
608
|
+
display: block; width: 100%; height: 100%;
|
|
835
609
|
cursor: grab;
|
|
836
610
|
}
|
|
837
611
|
#graph-canvas:active { cursor: grabbing; }
|
|
838
612
|
|
|
839
613
|
#graph-tooltip {
|
|
840
|
-
position: fixed;
|
|
841
|
-
z-index: 50;
|
|
614
|
+
position: fixed; z-index: 50;
|
|
842
615
|
font-family: var(--font-sans);
|
|
843
|
-
font-size: 12px;
|
|
844
|
-
font-weight: 500;
|
|
616
|
+
font-size: 12px; font-weight: 500;
|
|
845
617
|
color: var(--text-0);
|
|
846
618
|
background: var(--bg-2);
|
|
847
619
|
border: 1px solid var(--border);
|
|
848
620
|
border-radius: var(--radius-sm);
|
|
849
621
|
padding: 4px 10px;
|
|
850
|
-
pointer-events: none;
|
|
851
|
-
opacity: 0;
|
|
622
|
+
pointer-events: none; opacity: 0;
|
|
852
623
|
transition: opacity 0.12s;
|
|
853
624
|
white-space: nowrap;
|
|
854
|
-
box-shadow: 0 4px
|
|
625
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
855
626
|
}
|
|
856
627
|
|
|
857
|
-
/*
|
|
858
|
-
EMPTY STATE
|
|
859
|
-
═══════════════════════════════════ */
|
|
860
|
-
|
|
628
|
+
/* ═══ EMPTY STATE ═══ */
|
|
861
629
|
#empty-state {
|
|
862
630
|
flex: 1;
|
|
863
631
|
display: flex;
|
|
864
632
|
flex-direction: column;
|
|
865
633
|
align-items: center;
|
|
866
634
|
justify-content: center;
|
|
867
|
-
gap:
|
|
635
|
+
gap: 10px;
|
|
636
|
+
animation: fadeIn 0.8s var(--ease);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.empty-glyph {
|
|
868
640
|
color: var(--text-3);
|
|
869
|
-
|
|
870
|
-
animation: fadeIn 0.6s var(--ease-out);
|
|
641
|
+
margin-bottom: 4px;
|
|
871
642
|
}
|
|
872
643
|
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
644
|
+
.empty-title {
|
|
645
|
+
font-family: var(--font-sans);
|
|
646
|
+
font-size: 16px;
|
|
647
|
+
font-weight: 500;
|
|
648
|
+
color: var(--text-2);
|
|
876
649
|
}
|
|
877
650
|
|
|
878
|
-
.empty-
|
|
651
|
+
.empty-shortcuts {
|
|
879
652
|
font-size: 12px;
|
|
880
653
|
color: var(--text-3);
|
|
881
|
-
|
|
654
|
+
display: flex;
|
|
655
|
+
align-items: center;
|
|
656
|
+
gap: 8px;
|
|
657
|
+
}
|
|
658
|
+
.empty-shortcuts kbd {
|
|
659
|
+
font-family: var(--font-sans);
|
|
660
|
+
font-size: 10px;
|
|
661
|
+
background: var(--bg-2);
|
|
662
|
+
border: 1px solid var(--border);
|
|
663
|
+
border-radius: 3px;
|
|
664
|
+
padding: 1px 5px;
|
|
665
|
+
}
|
|
666
|
+
.empty-shortcuts .dot {
|
|
667
|
+
width: 2px; height: 2px;
|
|
668
|
+
border-radius: 50%;
|
|
669
|
+
background: var(--text-3);
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
/* ═══ COMMAND BAR ═══ */
|
|
673
|
+
.overlay {
|
|
674
|
+
position: fixed;
|
|
675
|
+
inset: 0;
|
|
676
|
+
z-index: 100;
|
|
677
|
+
display: flex;
|
|
678
|
+
align-items: flex-start;
|
|
679
|
+
justify-content: center;
|
|
680
|
+
padding-top: 20vh;
|
|
681
|
+
background: rgba(5, 5, 7, 0.7);
|
|
682
|
+
backdrop-filter: blur(8px);
|
|
683
|
+
animation: overlayIn 0.15s var(--ease);
|
|
684
|
+
}
|
|
685
|
+
.overlay.hidden { display: none; }
|
|
686
|
+
|
|
687
|
+
@keyframes overlayIn {
|
|
688
|
+
from { opacity: 0; }
|
|
689
|
+
to { opacity: 1; }
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
#command-bar {
|
|
693
|
+
width: 520px;
|
|
694
|
+
max-width: 90vw;
|
|
695
|
+
background: var(--bg-1);
|
|
696
|
+
border: 1px solid var(--border);
|
|
697
|
+
border-radius: 12px;
|
|
698
|
+
overflow: hidden;
|
|
699
|
+
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03);
|
|
700
|
+
animation: barIn 0.2s var(--ease);
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
@keyframes barIn {
|
|
704
|
+
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
|
|
705
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.command-input-wrap {
|
|
709
|
+
display: flex;
|
|
710
|
+
align-items: center;
|
|
711
|
+
gap: 10px;
|
|
712
|
+
padding: 14px 16px;
|
|
713
|
+
border-bottom: 1px solid var(--border-dim);
|
|
714
|
+
}
|
|
715
|
+
.command-icon { color: var(--text-3); flex-shrink: 0; }
|
|
716
|
+
|
|
717
|
+
#command-input {
|
|
718
|
+
flex: 1;
|
|
719
|
+
background: none; border: none;
|
|
720
|
+
color: var(--text-0);
|
|
721
|
+
font-family: var(--font-sans);
|
|
722
|
+
font-size: 15px;
|
|
723
|
+
outline: none;
|
|
882
724
|
}
|
|
725
|
+
#command-input::placeholder { color: var(--text-3); }
|
|
883
726
|
|
|
884
|
-
.
|
|
727
|
+
.command-kbd {
|
|
885
728
|
font-family: var(--font-sans);
|
|
886
729
|
font-size: 10px;
|
|
730
|
+
color: var(--text-3);
|
|
887
731
|
background: var(--bg-2);
|
|
888
732
|
border: 1px solid var(--border);
|
|
889
733
|
border-radius: 3px;
|
|
890
734
|
padding: 1px 5px;
|
|
891
735
|
}
|
|
892
736
|
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
737
|
+
#command-results {
|
|
738
|
+
max-height: 320px;
|
|
739
|
+
overflow-y: auto;
|
|
740
|
+
}
|
|
741
|
+
#command-results:empty { display: none; }
|
|
742
|
+
|
|
743
|
+
.command-result {
|
|
744
|
+
display: flex;
|
|
745
|
+
flex-direction: column;
|
|
746
|
+
padding: 10px 16px;
|
|
747
|
+
cursor: pointer;
|
|
748
|
+
transition: background 0.08s;
|
|
749
|
+
}
|
|
750
|
+
.command-result:hover,
|
|
751
|
+
.command-result.focused { background: var(--bg-hover); }
|
|
752
|
+
.command-result-title {
|
|
753
|
+
font-size: 14px;
|
|
754
|
+
font-weight: 500;
|
|
755
|
+
color: var(--text-0);
|
|
756
|
+
}
|
|
757
|
+
.command-result-meta {
|
|
758
|
+
font-size: 11px;
|
|
759
|
+
color: var(--text-3);
|
|
760
|
+
margin-top: 1px;
|
|
761
|
+
}
|
|
762
|
+
.command-result-snippet {
|
|
763
|
+
font-size: 12px;
|
|
764
|
+
color: var(--text-2);
|
|
765
|
+
margin-top: 3px;
|
|
766
|
+
line-height: 1.4;
|
|
767
|
+
}
|
|
768
|
+
.command-result-snippet mark {
|
|
769
|
+
background: var(--accent-dim);
|
|
770
|
+
color: var(--accent-text);
|
|
771
|
+
border-radius: 2px;
|
|
772
|
+
padding: 0 1px;
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
/* ═══ CREATE DIALOG ═══ */
|
|
776
|
+
#create-dialog {
|
|
777
|
+
width: 480px;
|
|
778
|
+
max-width: 90vw;
|
|
779
|
+
background: var(--bg-1);
|
|
780
|
+
border: 1px solid var(--border);
|
|
781
|
+
border-radius: 12px;
|
|
782
|
+
overflow: hidden;
|
|
783
|
+
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
|
|
784
|
+
animation: barIn 0.2s var(--ease);
|
|
785
|
+
display: flex;
|
|
786
|
+
flex-direction: column;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
.create-header {
|
|
790
|
+
display: flex;
|
|
791
|
+
align-items: center;
|
|
792
|
+
justify-content: space-between;
|
|
793
|
+
padding: 14px 16px;
|
|
794
|
+
font-size: 13px;
|
|
795
|
+
font-weight: 600;
|
|
796
|
+
color: var(--text-1);
|
|
797
|
+
border-bottom: 1px solid var(--border-dim);
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
.icon-btn {
|
|
801
|
+
width: 24px; height: 24px;
|
|
802
|
+
display: flex; align-items: center; justify-content: center;
|
|
803
|
+
color: var(--text-3);
|
|
804
|
+
background: none; border: none;
|
|
805
|
+
cursor: pointer; border-radius: var(--radius-sm);
|
|
806
|
+
transition: color 0.12s, background-color 0.12s;
|
|
807
|
+
}
|
|
808
|
+
.icon-btn:hover { color: var(--text-1); background: var(--bg-hover); }
|
|
809
|
+
|
|
810
|
+
.create-fields {
|
|
811
|
+
padding: 16px;
|
|
812
|
+
display: flex;
|
|
813
|
+
flex-direction: column;
|
|
814
|
+
gap: 12px;
|
|
815
|
+
}
|
|
896
816
|
|
|
817
|
+
.field-row {
|
|
818
|
+
display: flex;
|
|
819
|
+
flex-direction: column;
|
|
820
|
+
gap: 4px;
|
|
821
|
+
}
|
|
822
|
+
.field-row label {
|
|
823
|
+
font-size: 10px;
|
|
824
|
+
font-weight: 600;
|
|
825
|
+
color: var(--text-3);
|
|
826
|
+
text-transform: uppercase;
|
|
827
|
+
letter-spacing: 0.06em;
|
|
828
|
+
}
|
|
829
|
+
.field-row select,
|
|
830
|
+
.field-row input {
|
|
831
|
+
padding: 7px 10px;
|
|
832
|
+
background: var(--bg-2);
|
|
833
|
+
border: 1px solid var(--border);
|
|
834
|
+
border-radius: var(--radius-sm);
|
|
835
|
+
color: var(--text-0);
|
|
836
|
+
font-family: var(--font-sans);
|
|
837
|
+
font-size: 13px;
|
|
838
|
+
outline: none;
|
|
839
|
+
transition: border-color 0.15s;
|
|
840
|
+
}
|
|
841
|
+
.field-row select:focus,
|
|
842
|
+
.field-row input:focus {
|
|
843
|
+
border-color: var(--accent);
|
|
844
|
+
box-shadow: 0 0 0 2px var(--accent-dim);
|
|
845
|
+
}
|
|
846
|
+
.field-row select {
|
|
847
|
+
appearance: none;
|
|
848
|
+
cursor: pointer;
|
|
849
|
+
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b7a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
850
|
+
background-repeat: no-repeat;
|
|
851
|
+
background-position: right 10px center;
|
|
852
|
+
padding-right: 28px;
|
|
853
|
+
}
|
|
854
|
+
.field-row select option { background: var(--bg-2); }
|
|
855
|
+
|
|
856
|
+
.field-grow { flex: 1; }
|
|
857
|
+
.field-grow textarea {
|
|
858
|
+
width: 100%;
|
|
859
|
+
min-height: 140px;
|
|
860
|
+
padding: 10px;
|
|
861
|
+
background: var(--bg-2);
|
|
862
|
+
border: 1px solid var(--border);
|
|
863
|
+
border-radius: var(--radius-sm);
|
|
864
|
+
color: var(--text-0);
|
|
865
|
+
font-family: var(--font-mono);
|
|
866
|
+
font-size: 12.5px;
|
|
867
|
+
line-height: 1.6;
|
|
868
|
+
outline: none;
|
|
869
|
+
resize: vertical;
|
|
870
|
+
transition: border-color 0.15s;
|
|
871
|
+
}
|
|
872
|
+
.field-grow textarea:focus {
|
|
873
|
+
border-color: var(--accent);
|
|
874
|
+
box-shadow: 0 0 0 2px var(--accent-dim);
|
|
875
|
+
}
|
|
876
|
+
.field-grow textarea::placeholder { color: var(--text-3); }
|
|
877
|
+
|
|
878
|
+
#create-submit {
|
|
879
|
+
margin: 0 16px 16px;
|
|
880
|
+
padding: 8px;
|
|
881
|
+
background: var(--accent);
|
|
882
|
+
color: var(--text-0);
|
|
883
|
+
font-family: var(--font-sans);
|
|
884
|
+
font-size: 13px;
|
|
885
|
+
font-weight: 600;
|
|
886
|
+
border: none;
|
|
887
|
+
border-radius: var(--radius-sm);
|
|
888
|
+
cursor: pointer;
|
|
889
|
+
transition: opacity 0.12s, transform 0.08s;
|
|
890
|
+
}
|
|
891
|
+
#create-submit:hover { opacity: 0.9; }
|
|
892
|
+
#create-submit:active { transform: scale(0.98); }
|
|
893
|
+
|
|
894
|
+
/* ═══ ANIMATIONS ═══ */
|
|
897
895
|
@keyframes fadeIn {
|
|
898
896
|
from { opacity: 0; }
|
|
899
897
|
to { opacity: 1; }
|
|
900
898
|
}
|
|
901
899
|
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
900
|
+
.hidden { display: none !important; }
|
|
901
|
+
|
|
902
|
+
/* ═══ MOBILE HEADER ═══ */
|
|
903
|
+
#mobile-header {
|
|
904
|
+
display: none;
|
|
905
|
+
align-items: center;
|
|
906
|
+
justify-content: space-between;
|
|
907
|
+
padding: 8px 12px;
|
|
908
|
+
background: var(--bg-0);
|
|
909
|
+
border-bottom: 1px solid var(--border-dim);
|
|
910
|
+
z-index: 10;
|
|
911
|
+
}
|
|
912
|
+
#mobile-header .icon-btn {
|
|
913
|
+
width: 40px; height: 40px;
|
|
914
|
+
color: var(--text-2);
|
|
915
|
+
}
|
|
916
|
+
.mobile-brand {
|
|
917
|
+
font-size: 13px;
|
|
918
|
+
font-weight: 600;
|
|
919
|
+
color: var(--accent);
|
|
920
|
+
letter-spacing: 0.04em;
|
|
911
921
|
}
|
|
912
922
|
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
923
|
+
#nav-backdrop {
|
|
924
|
+
position: fixed;
|
|
925
|
+
inset: 0;
|
|
926
|
+
background: rgba(5, 5, 7, 0.6);
|
|
927
|
+
z-index: 15;
|
|
928
|
+
opacity: 0;
|
|
929
|
+
transition: opacity 0.2s var(--ease-smooth);
|
|
930
|
+
}
|
|
931
|
+
#nav-backdrop.visible { opacity: 1; }
|
|
932
|
+
#nav-backdrop.hidden { display: none; }
|
|
916
933
|
|
|
934
|
+
/* ═══ RESPONSIVE ═══ */
|
|
917
935
|
@media (max-width: 768px) {
|
|
918
|
-
#
|
|
919
|
-
|
|
920
|
-
#
|
|
921
|
-
|
|
922
|
-
|
|
936
|
+
#mobile-header { display: flex; }
|
|
937
|
+
|
|
938
|
+
#nav {
|
|
939
|
+
position: fixed;
|
|
940
|
+
top: 0; left: 0; bottom: 0;
|
|
941
|
+
width: 280px;
|
|
942
|
+
z-index: 20;
|
|
943
|
+
transform: translateX(-100%);
|
|
944
|
+
transition: transform 0.25s var(--ease);
|
|
945
|
+
box-shadow: none;
|
|
946
|
+
}
|
|
947
|
+
#nav.open {
|
|
948
|
+
transform: translateX(0);
|
|
949
|
+
box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
#main { flex-direction: column; }
|
|
953
|
+
#note-article { padding: 24px 20px 60px; }
|
|
954
|
+
|
|
955
|
+
/* Touch targets */
|
|
956
|
+
.nav-btn { padding: 10px 12px; min-height: 44px; }
|
|
957
|
+
.type-pill { padding: 6px 14px; min-height: 36px; }
|
|
958
|
+
.note-item { padding: 12px 12px; min-height: 44px; }
|
|
959
|
+
.backlink-item { padding: 12px; min-height: 44px; }
|
|
923
960
|
}
|