@lemoncat7/dsh-knowledge 1.2.0 → 2.1.0
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 +22 -2
- package/docs/architecture.md +30 -4
- package/docs/requirements.md +10 -0
- package/lib/api.d.ts.map +1 -1
- package/lib/api.js +194 -1
- package/lib/api.js.map +1 -1
- package/lib/atomic-file.d.ts +1 -1
- package/lib/atomic-file.d.ts.map +1 -1
- package/lib/atomic-file.js +0 -1
- package/lib/atomic-file.js.map +1 -1
- package/lib/client.d.ts.map +1 -1
- package/lib/client.js +48 -82
- package/lib/client.js.map +2 -2
- package/lib/content-safety.d.ts +12 -0
- package/lib/content-safety.d.ts.map +1 -0
- package/lib/content-safety.js +38 -0
- package/lib/content-safety.js.map +1 -0
- package/lib/domain.d.ts +13 -0
- package/lib/domain.d.ts.map +1 -1
- package/lib/domain.js.map +1 -1
- package/lib/extraction.d.ts.map +1 -1
- package/lib/extraction.js +8 -2
- package/lib/extraction.js.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +6 -1
- package/lib/index.js.map +1 -1
- package/lib/local-provider.d.ts +24 -1
- package/lib/local-provider.d.ts.map +1 -1
- package/lib/local-provider.js +302 -2
- package/lib/local-provider.js.map +1 -1
- package/lib/management-proxy.d.ts.map +1 -1
- package/lib/management-proxy.js +22 -13
- package/lib/management-proxy.js.map +1 -1
- package/lib/note-reference-handle.d.ts +15 -0
- package/lib/note-reference-handle.d.ts.map +1 -0
- package/lib/note-reference-handle.js +54 -0
- package/lib/note-reference-handle.js.map +1 -0
- package/lib/note-reference-tools.d.ts +6 -0
- package/lib/note-reference-tools.d.ts.map +1 -0
- package/lib/note-reference-tools.js +119 -0
- package/lib/note-reference-tools.js.map +1 -0
- package/lib/note-tools.d.ts +6 -0
- package/lib/note-tools.d.ts.map +1 -0
- package/lib/note-tools.js +283 -0
- package/lib/note-tools.js.map +1 -0
- package/lib/notes/domain.d.ts +44 -0
- package/lib/notes/domain.d.ts.map +1 -0
- package/lib/notes/domain.js +38 -0
- package/lib/notes/domain.js.map +1 -0
- package/lib/notes/store.d.ts +39 -0
- package/lib/notes/store.d.ts.map +1 -0
- package/lib/notes/store.js +407 -0
- package/lib/notes/store.js.map +1 -0
- package/lib/provider.d.ts +17 -0
- package/lib/provider.d.ts.map +1 -1
- package/lib/remote-provider.d.ts +19 -0
- package/lib/remote-provider.d.ts.map +1 -1
- package/lib/remote-provider.js +139 -13
- package/lib/remote-provider.js.map +1 -1
- package/lib/runtime.d.ts +1 -0
- package/lib/runtime.d.ts.map +1 -1
- package/lib/runtime.js.map +1 -1
- package/lib/theme-bridge.d.ts +2 -2
- package/lib/theme-bridge.d.ts.map +1 -1
- package/lib/theme-bridge.js +24 -57
- package/lib/theme-bridge.js.map +1 -1
- package/lib/tool-authorization.d.ts +14 -0
- package/lib/tool-authorization.d.ts.map +1 -0
- package/lib/tool-authorization.js +124 -0
- package/lib/tool-authorization.js.map +1 -0
- package/lib/tool-input.d.ts +6 -0
- package/lib/tool-input.d.ts.map +1 -0
- package/lib/tool-input.js +27 -0
- package/lib/tool-input.js.map +1 -0
- package/lib/tools.d.ts +2 -1
- package/lib/tools.d.ts.map +1 -1
- package/lib/tools.js +29 -179
- package/lib/tools.js.map +1 -1
- package/lib/tracking.d.ts +29 -0
- package/lib/tracking.d.ts.map +1 -0
- package/lib/tracking.js +141 -0
- package/lib/tracking.js.map +1 -0
- package/lib/web-markdown-preview.d.ts.map +1 -1
- package/lib/web-markdown-preview.js +10 -0
- package/lib/web-markdown-preview.js.map +1 -1
- package/lib/web-note-editor.d.ts +44 -0
- package/lib/web-note-editor.d.ts.map +1 -0
- package/lib/web-note-editor.js +118 -0
- package/lib/web-note-editor.js.map +1 -0
- package/lib/web-workspace-effects.d.ts +13 -0
- package/lib/web-workspace-effects.d.ts.map +1 -0
- package/lib/web-workspace-effects.js +340 -0
- package/lib/web-workspace-effects.js.map +1 -0
- package/lib/web.d.ts.map +1 -1
- package/lib/web.js +3 -1
- package/lib/web.js.map +1 -1
- package/package.json +12 -1
- package/web/app.js +1670 -93
- package/web/index.html +2 -0
- package/web/markdown-preview.js +8 -8
- package/web/note-editor.js +220 -0
- package/web/styles.css +845 -182
- package/web/workspace-effects.js +16 -0
package/web/styles.css
CHANGED
|
@@ -1,59 +1,128 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
color-scheme: light dark;
|
|
3
|
-
font-family: ui
|
|
3
|
+
font-family: var(--font-ui);
|
|
4
4
|
font-size: 16px;
|
|
5
|
-
--
|
|
6
|
-
--
|
|
5
|
+
--font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei UI", Arial, sans-serif;
|
|
6
|
+
--font-reading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei UI", Arial, sans-serif;
|
|
7
|
+
--font-mono: "SFMono-Regular", "Cascadia Code", "Cascadia Mono", Menlo, Consolas, monospace;
|
|
8
|
+
--bg: #e9e9ed;
|
|
9
|
+
--surface: #f2f3f7;
|
|
7
10
|
--surface-raised: #ffffff;
|
|
8
|
-
--surface-soft: #
|
|
9
|
-
--surface-hover: #
|
|
11
|
+
--surface-soft: #eceef1;
|
|
12
|
+
--surface-hover: #e5e5e7;
|
|
10
13
|
--dialog-surface: #ffffff;
|
|
11
14
|
--text: #1d1d1f;
|
|
12
|
-
--text-secondary: #
|
|
15
|
+
--text-secondary: #515154;
|
|
13
16
|
--text-tertiary: #6e6e73;
|
|
14
|
-
--border:
|
|
15
|
-
--border-strong:
|
|
16
|
-
--accent: #
|
|
17
|
-
--accent-hover: #
|
|
18
|
-
--accent-soft: #
|
|
17
|
+
--border: rgb(60 60 67 / 14%);
|
|
18
|
+
--border-strong: rgb(60 60 67 / 24%);
|
|
19
|
+
--accent: #3a3a3c;
|
|
20
|
+
--accent-hover: #1d1d1f;
|
|
21
|
+
--accent-soft: #e2e2e5;
|
|
19
22
|
--on-accent: #ffffff;
|
|
20
|
-
--success: #
|
|
21
|
-
--success-soft: #
|
|
22
|
-
--warning: #
|
|
23
|
-
--warning-soft: #
|
|
24
|
-
--danger: #
|
|
25
|
-
--danger-soft: #
|
|
26
|
-
--shadow: 0
|
|
27
|
-
--radius:
|
|
23
|
+
--success: #248a3d;
|
|
24
|
+
--success-soft: #e8f5eb;
|
|
25
|
+
--warning: #c93400;
|
|
26
|
+
--warning-soft: #fff1e8;
|
|
27
|
+
--danger: #d70015;
|
|
28
|
+
--danger-soft: #ffebed;
|
|
29
|
+
--shadow: 0 24px 64px rgb(0 0 0 / 20%);
|
|
30
|
+
--radius: 14px;
|
|
31
|
+
--radius-control: 9px;
|
|
32
|
+
--radius-small: 7px;
|
|
33
|
+
--material-sidebar: rgb(242 243 247 / 76%);
|
|
34
|
+
--material-toolbar: rgb(242 243 247 / 78%);
|
|
35
|
+
--material-panel: rgb(255 255 255 / 82%);
|
|
36
|
+
--material-control: rgb(255 255 255 / 76%);
|
|
37
|
+
--material-control-hover: rgb(255 255 255 / 94%);
|
|
38
|
+
--separator: color-mix(in srgb, var(--border) 76%, transparent);
|
|
39
|
+
--panel-border: color-mix(in srgb, var(--border-strong) 58%, var(--border));
|
|
40
|
+
--surface-highlight: color-mix(in srgb, var(--surface-raised) 74%, transparent);
|
|
41
|
+
--shadow-soft: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
|
|
42
|
+
--shadow-panel: 0 1px 2px rgb(0 0 0 / 5%), 0 14px 36px rgb(0 0 0 / 7%);
|
|
43
|
+
--surface-canvas: var(--bg);
|
|
44
|
+
--surface-pane: rgb(242 243 247 / 74%);
|
|
45
|
+
--surface-editor: #ffffff;
|
|
46
|
+
--surface-overlay: color-mix(in srgb, var(--surface-raised) 92%, transparent);
|
|
47
|
+
--shadow-control: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5.5%), inset 0 1px 0 rgb(255 255 255 / 68%);
|
|
48
|
+
--shadow-floating: 0 22px 70px color-mix(in srgb, var(--text) 18%, transparent), 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
|
|
49
|
+
--glass-clear: rgb(255 255 255 / 3.5%);
|
|
50
|
+
--glass-regular: rgb(255 255 255 / 7.5%);
|
|
51
|
+
--glass-thick: rgb(255 255 255 / 16%);
|
|
52
|
+
--glass-border: rgb(60 60 67 / 6.5%);
|
|
53
|
+
--glass-separator: rgb(60 60 67 / 14%);
|
|
54
|
+
--glass-rim-light: rgb(255 255 255 / 58%);
|
|
55
|
+
--glass-rim-shadow: rgb(60 60 67 / 12%);
|
|
56
|
+
--glass-filter: saturate(1.2) contrast(1.035) blur(20px);
|
|
57
|
+
--glass-shadow: inset 0 1px 0 var(--glass-rim-light), inset 0 -1px 0 var(--glass-rim-shadow), 0 10px 28px rgb(0 0 0 / 8.5%);
|
|
58
|
+
--liquid-glass-large: rgb(248 248 250 / 58%);
|
|
59
|
+
--liquid-glass-regular: rgb(250 250 252 / 52%);
|
|
60
|
+
--liquid-glass-clear: rgb(255 255 255 / 42%);
|
|
61
|
+
--liquid-glass-dialog: rgb(252 252 253 / 70%);
|
|
62
|
+
--interaction-glow-core: rgb(67 70 77 / 78%);
|
|
63
|
+
--interaction-glow-soft: rgb(111 115 124 / 36%);
|
|
64
|
+
--interaction-glow-haze: rgb(255 255 255 / 72%);
|
|
65
|
+
--interaction-glare-light: rgb(255 255 255 / 72%);
|
|
66
|
+
--interaction-glare-rim: rgb(45 48 54 / 12%);
|
|
67
|
+
--radius-shell: 18px;
|
|
68
|
+
--radius-panel: 12px;
|
|
69
|
+
--motion-fast: 120ms;
|
|
70
|
+
--motion-base: 190ms;
|
|
71
|
+
--motion-slow: 280ms;
|
|
72
|
+
--ease-out: cubic-bezier(.22, 1, .36, 1);
|
|
73
|
+
--ease-spring: cubic-bezier(.2, .9, .25, 1.04);
|
|
28
74
|
--sidebar-width: 236px;
|
|
75
|
+
--chrome-inset: 10px;
|
|
76
|
+
--topbar-inline-inset: 12px;
|
|
29
77
|
--scrollbar-thumb: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
|
|
30
78
|
--scrollbar-thumb-hover: color-mix(in srgb, var(--text-secondary) 58%, transparent);
|
|
31
79
|
}
|
|
32
80
|
|
|
33
81
|
@media (prefers-color-scheme: dark) {
|
|
34
82
|
:root {
|
|
35
|
-
--bg: #
|
|
36
|
-
--surface: #
|
|
37
|
-
--surface-raised: #
|
|
38
|
-
--surface-soft: #
|
|
39
|
-
--surface-hover: #
|
|
40
|
-
--dialog-surface: #
|
|
83
|
+
--bg: #1c1c1e;
|
|
84
|
+
--surface: #242426;
|
|
85
|
+
--surface-raised: #2c2c2e;
|
|
86
|
+
--surface-soft: #3a3a3c;
|
|
87
|
+
--surface-hover: #414145;
|
|
88
|
+
--dialog-surface: #2c2c2e;
|
|
41
89
|
--text: #f5f5f7;
|
|
42
|
-
--text-secondary: #
|
|
90
|
+
--text-secondary: #d1d1d6;
|
|
43
91
|
--text-tertiary: #98989d;
|
|
44
|
-
--border:
|
|
45
|
-
--border-strong:
|
|
46
|
-
--accent: #
|
|
47
|
-
--accent-hover: #
|
|
48
|
-
--accent-soft: #
|
|
49
|
-
--on-accent: #
|
|
50
|
-
--success: #
|
|
51
|
-
--success-soft: #
|
|
52
|
-
--warning: #
|
|
53
|
-
--warning-soft: #
|
|
54
|
-
--danger: #
|
|
55
|
-
--danger-soft: #
|
|
56
|
-
--shadow: 0
|
|
92
|
+
--border: rgb(255 255 255 / 10%);
|
|
93
|
+
--border-strong: rgb(255 255 255 / 18%);
|
|
94
|
+
--accent: #e5e5ea;
|
|
95
|
+
--accent-hover: #ffffff;
|
|
96
|
+
--accent-soft: #3a3a3c;
|
|
97
|
+
--on-accent: #1d1d1f;
|
|
98
|
+
--success: #30d158;
|
|
99
|
+
--success-soft: #173a22;
|
|
100
|
+
--warning: #ff9f0a;
|
|
101
|
+
--warning-soft: #422f10;
|
|
102
|
+
--danger: #ff453a;
|
|
103
|
+
--danger-soft: #4a2020;
|
|
104
|
+
--shadow: 0 28px 72px rgb(0 0 0 / 48%);
|
|
105
|
+
--material-sidebar: rgb(44 44 46 / 72%);
|
|
106
|
+
--material-toolbar: rgb(44 44 46 / 78%);
|
|
107
|
+
--material-panel: rgb(44 44 46 / 82%);
|
|
108
|
+
--material-control: rgb(58 58 60 / 88%);
|
|
109
|
+
--material-control-hover: rgb(65 65 69 / 94%);
|
|
110
|
+
--surface-pane: rgb(44 44 46 / 74%);
|
|
111
|
+
--surface-editor: #1c1c1e;
|
|
112
|
+
--glass-border: rgb(255 255 255 / 10%);
|
|
113
|
+
--glass-separator: rgb(255 255 255 / 10%);
|
|
114
|
+
--glass-rim-light: rgb(255 255 255 / 18%);
|
|
115
|
+
--glass-rim-shadow: rgb(0 0 0 / 30%);
|
|
116
|
+
--glass-shadow: inset 0 1px 0 var(--glass-rim-light), inset 0 -1px 0 var(--glass-rim-shadow), 0 12px 32px rgb(0 0 0 / 30%);
|
|
117
|
+
--liquid-glass-large: rgb(38 38 41 / 62%);
|
|
118
|
+
--liquid-glass-regular: rgb(43 43 46 / 58%);
|
|
119
|
+
--liquid-glass-clear: rgb(50 50 54 / 46%);
|
|
120
|
+
--liquid-glass-dialog: rgb(43 43 46 / 76%);
|
|
121
|
+
--interaction-glow-core: rgb(244 244 247 / 78%);
|
|
122
|
+
--interaction-glow-soft: rgb(197 199 205 / 34%);
|
|
123
|
+
--interaction-glow-haze: rgb(255 255 255 / 42%);
|
|
124
|
+
--interaction-glare-light: rgb(255 255 255 / 34%);
|
|
125
|
+
--interaction-glare-rim: rgb(255 255 255 / 10%);
|
|
57
126
|
}
|
|
58
127
|
}
|
|
59
128
|
|
|
@@ -63,7 +132,10 @@ html, body { min-height: 100%; }
|
|
|
63
132
|
|
|
64
133
|
body {
|
|
65
134
|
margin: 0;
|
|
66
|
-
background:
|
|
135
|
+
background:
|
|
136
|
+
radial-gradient(ellipse 46% 72% at -8% 28%, color-mix(in srgb, var(--surface-raised) 88%, transparent), transparent 74%),
|
|
137
|
+
radial-gradient(ellipse 58% 42% at 84% -12%, color-mix(in srgb, var(--text-tertiary) 9%, transparent), transparent 72%),
|
|
138
|
+
var(--surface-canvas);
|
|
67
139
|
color: var(--text);
|
|
68
140
|
font-size: 14px;
|
|
69
141
|
line-height: 1.5;
|
|
@@ -168,6 +240,9 @@ input:-webkit-autofill:focus {
|
|
|
168
240
|
|
|
169
241
|
html,
|
|
170
242
|
.mount-table,
|
|
243
|
+
.notes-tree,
|
|
244
|
+
.note-picker-results,
|
|
245
|
+
.notes-inline-viewer,
|
|
171
246
|
.note-tree,
|
|
172
247
|
.note-editor-scroll,
|
|
173
248
|
.markdown-preview pre,
|
|
@@ -179,16 +254,16 @@ html,
|
|
|
179
254
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
180
255
|
}
|
|
181
256
|
|
|
182
|
-
:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar {
|
|
257
|
+
:where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar {
|
|
183
258
|
width: 8px;
|
|
184
259
|
height: 8px;
|
|
185
260
|
}
|
|
186
261
|
|
|
187
|
-
:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-track {
|
|
262
|
+
:where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-track {
|
|
188
263
|
background: transparent;
|
|
189
264
|
}
|
|
190
265
|
|
|
191
|
-
:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-thumb {
|
|
266
|
+
:where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-thumb {
|
|
192
267
|
min-width: 28px;
|
|
193
268
|
min-height: 28px;
|
|
194
269
|
border: 2px solid transparent;
|
|
@@ -197,7 +272,7 @@ html,
|
|
|
197
272
|
background-clip: padding-box;
|
|
198
273
|
}
|
|
199
274
|
|
|
200
|
-
:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-thumb:hover {
|
|
275
|
+
:where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-thumb:hover {
|
|
201
276
|
background: var(--scrollbar-thumb-hover);
|
|
202
277
|
background-clip: padding-box;
|
|
203
278
|
}
|
|
@@ -257,15 +332,16 @@ html,
|
|
|
257
332
|
.input, .select, .textarea {
|
|
258
333
|
box-sizing: border-box;
|
|
259
334
|
width: 100%;
|
|
260
|
-
border: 1px solid var(--border
|
|
261
|
-
border-radius:
|
|
335
|
+
border: 1px solid var(--panel-border);
|
|
336
|
+
border-radius: var(--radius-control);
|
|
262
337
|
padding: 9px 11px;
|
|
263
|
-
background-color: var(--
|
|
338
|
+
background-color: var(--material-control);
|
|
264
339
|
color: var(--text);
|
|
265
|
-
|
|
340
|
+
box-shadow: var(--shadow-control);
|
|
341
|
+
transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-fast) var(--ease-out);
|
|
266
342
|
}
|
|
267
343
|
|
|
268
|
-
.input, .select { height:
|
|
344
|
+
.input, .select { height: 38px; min-height: 38px; font: inherit; line-height: 20px; }
|
|
269
345
|
.select {
|
|
270
346
|
-webkit-appearance: none;
|
|
271
347
|
appearance: none;
|
|
@@ -282,82 +358,125 @@ html,
|
|
|
282
358
|
.select option { background: var(--dialog-surface); color: var(--text); }
|
|
283
359
|
.textarea { min-height: 132px; resize: vertical; }
|
|
284
360
|
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
|
|
285
|
-
.input:
|
|
361
|
+
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 72%, var(--border)); background-color: var(--material-control-hover); }
|
|
362
|
+
.input:focus, .select:focus, .textarea:focus { border-color: var(--border-strong); background-color: var(--surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent), var(--shadow-control); }
|
|
286
363
|
|
|
287
364
|
.login-error { min-height: 21px; margin: 10px 0 0; color: var(--danger); font-size: 13px; }
|
|
288
365
|
|
|
289
366
|
.button {
|
|
290
|
-
min-height:
|
|
291
|
-
border: 1px solid var(--border
|
|
292
|
-
border-radius:
|
|
293
|
-
padding:
|
|
294
|
-
background: var(--
|
|
367
|
+
min-height: 36px;
|
|
368
|
+
border: 1px solid var(--panel-border);
|
|
369
|
+
border-radius: var(--radius-control);
|
|
370
|
+
padding: 6px 12px;
|
|
371
|
+
background: var(--material-control);
|
|
295
372
|
color: var(--text);
|
|
296
|
-
font-weight:
|
|
373
|
+
font-weight: 590;
|
|
297
374
|
white-space: nowrap;
|
|
298
|
-
|
|
375
|
+
box-shadow: var(--shadow-control);
|
|
376
|
+
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
|
|
299
377
|
}
|
|
300
378
|
|
|
301
|
-
.button:hover:not(:disabled) { background: var(--
|
|
302
|
-
.button:active:not(:disabled) { transform: scale(.
|
|
303
|
-
.button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
|
|
304
|
-
.button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); box-shadow: 0
|
|
379
|
+
.button:hover:not(:disabled) { background: var(--material-control-hover); border-color: var(--border-strong); box-shadow: 0 2px 4px rgb(0 0 0 / 9%), 0 8px 18px rgb(0 0 0 / 7.5%); transform: translateY(-1px) scale(1.012); }
|
|
380
|
+
.button:active:not(:disabled) { box-shadow: var(--shadow-control); transform: translateY(0) scale(.97); }
|
|
381
|
+
.button.primary { border-color: color-mix(in srgb, var(--accent) 82%, var(--border)); background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-accent) 24%, transparent), 0 1px 3px color-mix(in srgb, var(--text) 16%, transparent); }
|
|
382
|
+
.button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-accent) 26%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 14%, transparent); }
|
|
305
383
|
.button.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
|
|
306
384
|
.button.danger:hover:not(:disabled) { background: var(--danger-soft); }
|
|
307
|
-
.button.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
|
|
308
|
-
.button.small { min-height:
|
|
385
|
+
.button.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); box-shadow: none; }
|
|
386
|
+
.button.small { min-height: 30px; padding: 4px 9px; font-size: 12px; }
|
|
309
387
|
.login-card .button { width: 100%; margin-top: 20px; }
|
|
310
388
|
.login-card .field + .field { margin-top: 16px; }
|
|
311
389
|
|
|
312
|
-
.app-shell {
|
|
390
|
+
.app-shell {
|
|
391
|
+
width: 100%;
|
|
392
|
+
height: 100vh;
|
|
393
|
+
height: 100dvh;
|
|
394
|
+
min-height: 0;
|
|
395
|
+
display: grid;
|
|
396
|
+
grid-template-columns: calc(var(--sidebar-width) + var(--chrome-inset)) 6px minmax(0, 1fr);
|
|
397
|
+
align-items: start;
|
|
398
|
+
overflow: hidden;
|
|
399
|
+
background: transparent;
|
|
400
|
+
transition: grid-template-columns 230ms var(--ease-out);
|
|
401
|
+
}
|
|
313
402
|
|
|
314
403
|
.sidebar {
|
|
315
404
|
position: sticky;
|
|
316
|
-
top:
|
|
317
|
-
|
|
318
|
-
|
|
405
|
+
top: var(--chrome-inset);
|
|
406
|
+
width: var(--sidebar-width);
|
|
407
|
+
min-width: 0;
|
|
408
|
+
height: calc(100vh - var(--chrome-inset) * 2);
|
|
409
|
+
height: calc(100dvh - var(--chrome-inset) * 2);
|
|
410
|
+
align-self: start;
|
|
319
411
|
display: flex;
|
|
320
412
|
flex-direction: column;
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
413
|
+
margin-left: var(--chrome-inset);
|
|
414
|
+
padding: 18px 13px 13px;
|
|
415
|
+
border: 1px solid var(--glass-border);
|
|
416
|
+
border-radius: 20px;
|
|
417
|
+
overflow: hidden;
|
|
418
|
+
background: var(--material-sidebar);
|
|
419
|
+
box-shadow: inset -1px 0 0 var(--glass-rim-shadow), inset 1px 0 0 var(--glass-rim-light), 10px 0 36px rgb(0 0 0 / 3%);
|
|
420
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
421
|
+
backdrop-filter: var(--glass-filter);
|
|
422
|
+
transform-origin: left center;
|
|
423
|
+
transition:
|
|
424
|
+
opacity 150ms ease-out,
|
|
425
|
+
transform 230ms var(--ease-out);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.brand { display: flex; align-items: center; gap: 11px; min-height: 56px; margin-bottom: 8px; padding: 3px 8px 12px; border-bottom: 1px solid var(--separator); }
|
|
429
|
+
.brand-emblem { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 11px; background: var(--material-control); box-shadow: var(--shadow-control); color: var(--text-secondary); }
|
|
430
|
+
.brand-emblem::before, .brand-emblem::after, .brand-emblem span { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 3px; }
|
|
431
|
+
.brand-emblem::before { width: 15px; height: 19px; transform: translate(-2px, -1px) rotate(-5deg); opacity: .42; }
|
|
432
|
+
.brand-emblem::after { width: 15px; height: 19px; background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised)); transform: translate(2px, 1px) rotate(3deg); }
|
|
433
|
+
.brand-emblem span { z-index: 1; width: 7px; height: 1px; border-width: 1px 0 0; transform: translate(3px, -4px); box-shadow: 0 4px 0 currentColor; opacity: .68; }
|
|
327
434
|
.brand-copy { min-width: 0; }
|
|
328
|
-
.brand strong { display: block; margin-top:
|
|
329
|
-
.brand span { display: block; color: var(--text-tertiary); font-size:
|
|
435
|
+
.brand strong { display: block; margin-top: 2px; font-size: 16px; line-height: 1.2; font-weight: 690; letter-spacing: -.025em; }
|
|
436
|
+
.brand-copy > span { display: block; color: var(--text-tertiary); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
|
330
437
|
|
|
331
|
-
.nav {
|
|
438
|
+
.nav {
|
|
439
|
+
min-height: 0;
|
|
440
|
+
display: grid;
|
|
441
|
+
align-content: start;
|
|
442
|
+
flex: 1 1 auto;
|
|
443
|
+
gap: 17px;
|
|
444
|
+
overflow-x: hidden;
|
|
445
|
+
overflow-y: auto;
|
|
446
|
+
overscroll-behavior: contain;
|
|
447
|
+
scrollbar-gutter: stable;
|
|
448
|
+
}
|
|
332
449
|
.nav-group { display: grid; gap: 2px; }
|
|
333
|
-
.nav-group + .nav-group {
|
|
334
|
-
.nav-group-label { padding: 0
|
|
450
|
+
.nav-group + .nav-group { padding-top: 1px; }
|
|
451
|
+
.nav-group-label { padding: 0 9px 5px; color: var(--text-tertiary); font-size: 9px; font-weight: 680; letter-spacing: .07em; }
|
|
335
452
|
.nav-button {
|
|
336
453
|
position: relative;
|
|
337
454
|
width: 100%;
|
|
338
|
-
min-height:
|
|
455
|
+
min-height: 38px;
|
|
339
456
|
display: flex;
|
|
340
457
|
align-items: center;
|
|
341
458
|
gap: 8px;
|
|
342
459
|
border: 0;
|
|
343
|
-
border-radius:
|
|
344
|
-
padding:
|
|
460
|
+
border-radius: 10px;
|
|
461
|
+
padding: 7px 9px;
|
|
345
462
|
background: transparent;
|
|
346
463
|
color: var(--text-secondary);
|
|
347
464
|
text-align: left;
|
|
348
465
|
font-size: 13px;
|
|
349
466
|
font-weight: 520;
|
|
350
|
-
transition: background
|
|
467
|
+
transition: background var(--motion-base) ease, color var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out);
|
|
351
468
|
}
|
|
352
469
|
.nav-button:hover { background: var(--surface-hover); color: var(--text); }
|
|
353
|
-
.nav-button:active { transform:
|
|
354
|
-
.nav-button[aria-current="page"] { background:
|
|
355
|
-
.nav-button[aria-current="page"]::before { content: ""; position: absolute; top:
|
|
470
|
+
.nav-button:active { transform: scale(.97); }
|
|
471
|
+
.nav-button[aria-current="page"] { background: var(--material-control); color: var(--text); font-weight: 640; box-shadow: var(--shadow-control); }
|
|
472
|
+
.nav-button[aria-current="page"]::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 2px; border-radius: 2px; background: var(--text-secondary); opacity: .72; }
|
|
473
|
+
.nav-index { width: 18px; flex: none; color: color-mix(in srgb, var(--text-tertiary) 70%, transparent); font: 8px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; transition: color var(--motion-fast) ease; }
|
|
474
|
+
.nav-button:hover .nav-index, .nav-button[aria-current="page"] .nav-index { color: var(--text); }
|
|
356
475
|
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
357
|
-
.nav-count { margin-left: auto; min-width: 21px; border-radius: 6px; padding: 1px 6px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
|
|
358
|
-
.nav-button[aria-current="page"] .nav-count { background:
|
|
476
|
+
.nav-count { margin-left: auto; min-width: 21px; border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--surface-soft) 68%, transparent); color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
|
|
477
|
+
.nav-button[aria-current="page"] .nav-count { background: var(--surface-soft); color: var(--text-secondary); }
|
|
359
478
|
|
|
360
|
-
.sidebar-footer { margin-top: auto; display: grid; gap: 7px; border
|
|
479
|
+
.sidebar-footer { margin-top: auto; display: grid; gap: 7px; border: 1px solid var(--glass-border); border-radius: 11px; padding: 8px 10px; background: var(--glass-regular); box-shadow: inset 0 1px 0 var(--glass-rim-light); }
|
|
361
480
|
.connection { display: flex; align-items: center; gap: 7px; min-height: 25px; color: var(--text-tertiary); font-size: 10px; }
|
|
362
481
|
.status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 12%, transparent); }
|
|
363
482
|
.sidebar-footer .button { justify-self: start; }
|
|
@@ -370,10 +489,15 @@ html,
|
|
|
370
489
|
min-width: 6px;
|
|
371
490
|
height: 100vh;
|
|
372
491
|
height: 100dvh;
|
|
492
|
+
align-self: start;
|
|
373
493
|
cursor: col-resize;
|
|
374
494
|
touch-action: none;
|
|
375
495
|
background: transparent;
|
|
376
496
|
outline-offset: -2px;
|
|
497
|
+
transition:
|
|
498
|
+
opacity 130ms ease-out,
|
|
499
|
+
transform 210ms var(--ease-out),
|
|
500
|
+
background-color var(--motion-fast) ease;
|
|
377
501
|
}
|
|
378
502
|
.app-sidebar-resizer::before {
|
|
379
503
|
content: "";
|
|
@@ -402,27 +526,36 @@ html,
|
|
|
402
526
|
}
|
|
403
527
|
.app-sidebar-resizer:hover span,
|
|
404
528
|
.app-sidebar-resizer:focus-visible span,
|
|
405
|
-
.app-sidebar-resizer.is-dragging span { opacity: 1; background: var(--
|
|
529
|
+
.app-sidebar-resizer.is-dragging span { opacity: 1; background: var(--text-secondary); }
|
|
406
530
|
.app-sidebar-resizer:hover,
|
|
407
531
|
.app-sidebar-resizer.is-dragging { background: color-mix(in srgb, var(--accent) 8%, transparent); }
|
|
408
|
-
.main { min-width: 0; grid-column: 3; }
|
|
532
|
+
.main { min-width: 0; width: 100%; height: 100vh; height: 100dvh; grid-column: 3; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
|
|
409
533
|
.topbar {
|
|
410
534
|
position: sticky;
|
|
411
|
-
top:
|
|
535
|
+
top: var(--chrome-inset);
|
|
412
536
|
z-index: 10;
|
|
413
|
-
min-height:
|
|
537
|
+
min-height: 78px;
|
|
414
538
|
display: flex;
|
|
415
539
|
align-items: center;
|
|
416
540
|
justify-content: space-between;
|
|
417
541
|
gap: 18px;
|
|
418
|
-
|
|
542
|
+
margin: var(--chrome-inset) var(--topbar-inline-inset) 0;
|
|
543
|
+
border: 1px solid var(--glass-border);
|
|
544
|
+
border-radius: 18px;
|
|
419
545
|
padding: 14px clamp(18px, 3vw, 38px);
|
|
420
|
-
|
|
421
|
-
|
|
546
|
+
overflow: hidden;
|
|
547
|
+
background: var(--material-toolbar);
|
|
548
|
+
box-shadow: inset 0 1px 0 var(--glass-rim-light), inset 0 -1px 0 var(--glass-rim-shadow);
|
|
549
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
550
|
+
backdrop-filter: var(--glass-filter);
|
|
422
551
|
}
|
|
423
552
|
.topbar h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
|
|
424
|
-
.topbar p { margin:
|
|
553
|
+
.topbar p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 11px; text-wrap: pretty; }
|
|
425
554
|
.topbar-title { display: flex; align-items: center; gap: 12px; }
|
|
555
|
+
.topbar-heading { min-width: 0; }
|
|
556
|
+
.topbar-kicker { display: block; margin-bottom: 2px; color: var(--text-tertiary); font: 8px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; letter-spacing: .12em; }
|
|
557
|
+
.route-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 7%, transparent); }
|
|
558
|
+
.route-progress span { display: block; width: calc(var(--route-progress) * 100%); height: 100%; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 58%, transparent), var(--accent)); transition: width var(--motion-slow) var(--ease-out); }
|
|
426
559
|
.mobile-menu { display: none; }
|
|
427
560
|
.topbar-actions { display: flex; align-items: center; gap: 8px; }
|
|
428
561
|
.pane-toggle-group {
|
|
@@ -433,7 +566,8 @@ html,
|
|
|
433
566
|
border: 1px solid var(--border);
|
|
434
567
|
border-radius: 9px;
|
|
435
568
|
padding: 2px;
|
|
436
|
-
background:
|
|
569
|
+
background: var(--glass-regular);
|
|
570
|
+
box-shadow: inset 0 1px 0 var(--glass-rim-light);
|
|
437
571
|
}
|
|
438
572
|
.pane-toggle-button {
|
|
439
573
|
width: 30px;
|
|
@@ -451,9 +585,9 @@ html,
|
|
|
451
585
|
.pane-toggle-button[data-pane="library"] { display: none; }
|
|
452
586
|
.pane-toggle-button:hover { background: var(--surface-hover); color: var(--text); }
|
|
453
587
|
.pane-toggle-button[aria-pressed="true"] {
|
|
454
|
-
background: var(--
|
|
588
|
+
background: var(--material-control);
|
|
455
589
|
color: var(--text);
|
|
456
|
-
box-shadow:
|
|
590
|
+
box-shadow: var(--shadow-control);
|
|
457
591
|
}
|
|
458
592
|
.pane-icon {
|
|
459
593
|
position: relative;
|
|
@@ -493,7 +627,8 @@ html,
|
|
|
493
627
|
opacity: .18;
|
|
494
628
|
}
|
|
495
629
|
|
|
496
|
-
.page { width: min(100%, 1440px); margin: 0 auto; padding:
|
|
630
|
+
.page { width: min(100%, 1440px); margin: 0 auto; padding: 30px clamp(20px, 3vw, 42px) 64px; }
|
|
631
|
+
.view-stage { min-width: 0; min-height: 100%; }
|
|
497
632
|
.app-shell[data-view="entries"] .topbar { min-height: 68px; padding-block: 11px; }
|
|
498
633
|
.app-shell[data-view="entries"] .topbar h1 { font-size: 19px; }
|
|
499
634
|
.app-shell[data-view="entries"] .page {
|
|
@@ -505,20 +640,35 @@ html,
|
|
|
505
640
|
height: calc(100dvh - 148px);
|
|
506
641
|
min-height: 520px;
|
|
507
642
|
}
|
|
643
|
+
.app-shell[data-view="notes"] .topbar { min-height: 64px; padding-block: 9px; }
|
|
644
|
+
.app-shell[data-view="notes"] .topbar h1 { font-size: 18px; }
|
|
645
|
+
.app-shell[data-view="notes"] .topbar p { display: none; }
|
|
646
|
+
.app-shell[data-view="notes"] .page {
|
|
647
|
+
width: 100%;
|
|
648
|
+
max-width: none;
|
|
649
|
+
height: calc(100dvh - 74px);
|
|
650
|
+
margin: 0;
|
|
651
|
+
overflow: hidden;
|
|
652
|
+
padding: 0;
|
|
653
|
+
}
|
|
654
|
+
.app-shell[data-view="notes"] .view-stage { height: 100%; min-height: 0; overflow: hidden; }
|
|
508
655
|
|
|
509
656
|
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
|
|
510
657
|
.section-heading h2 { margin: 0; font-size: 16px; }
|
|
511
658
|
.section-heading p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
|
|
512
659
|
|
|
513
660
|
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
|
|
514
|
-
.metric { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--
|
|
661
|
+
.metric { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-panel); padding: 18px; background: var(--material-panel); box-shadow: var(--shadow-control); transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out); }
|
|
662
|
+
.metric::after { content: ""; position: absolute; inset: auto 18px 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 32%, transparent), transparent); opacity: 0; transition: opacity var(--motion-base) ease; }
|
|
663
|
+
.metric:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
|
|
664
|
+
.metric:hover::after { opacity: 1; }
|
|
515
665
|
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
|
|
516
666
|
.metric-value { display: block; margin-top: 8px; font-size: 27px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
|
|
517
667
|
.metric-detail { margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
|
|
518
668
|
|
|
519
669
|
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); gap: 18px; }
|
|
520
|
-
.panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--
|
|
521
|
-
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--
|
|
670
|
+
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-panel); background: var(--material-panel); box-shadow: var(--shadow-control); }
|
|
671
|
+
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--separator); padding: 15px 17px; }
|
|
522
672
|
.panel-header h2, .panel-header h3 { margin: 0; font-size: 14px; }
|
|
523
673
|
.panel-body { padding: 8px; }
|
|
524
674
|
|
|
@@ -533,10 +683,11 @@ html,
|
|
|
533
683
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
534
684
|
align-items: center;
|
|
535
685
|
gap: 12px 16px;
|
|
536
|
-
border: 1px solid var(--border);
|
|
686
|
+
border: 1px solid var(--panel-border);
|
|
537
687
|
border-radius: 14px;
|
|
538
688
|
padding: 12px 14px;
|
|
539
|
-
background: var(--
|
|
689
|
+
background: var(--material-panel);
|
|
690
|
+
box-shadow: var(--shadow-soft);
|
|
540
691
|
}
|
|
541
692
|
.library-detail-back { align-self: center; gap: 7px; }
|
|
542
693
|
.library-detail-back::before {
|
|
@@ -571,9 +722,10 @@ html,
|
|
|
571
722
|
display: grid;
|
|
572
723
|
grid-template-columns: minmax(210px, .85fr) minmax(240px, 1.25fr) minmax(170px, .7fr) 244px;
|
|
573
724
|
overflow: hidden;
|
|
574
|
-
border: 1px solid var(--border);
|
|
725
|
+
border: 1px solid var(--glass-border);
|
|
575
726
|
border-radius: var(--radius);
|
|
576
|
-
background: var(--
|
|
727
|
+
background: var(--material-panel);
|
|
728
|
+
box-shadow: var(--glass-shadow);
|
|
577
729
|
}
|
|
578
730
|
.base-card {
|
|
579
731
|
min-width: 0;
|
|
@@ -583,10 +735,12 @@ html,
|
|
|
583
735
|
grid-template-rows: auto auto;
|
|
584
736
|
align-items: center;
|
|
585
737
|
gap: 8px 22px;
|
|
586
|
-
border-bottom: 1px solid var(--
|
|
738
|
+
border-bottom: 1px solid var(--separator);
|
|
587
739
|
padding: 16px 18px;
|
|
588
|
-
background:
|
|
740
|
+
background: transparent;
|
|
589
741
|
transition: background .18s ease;
|
|
742
|
+
content-visibility: auto;
|
|
743
|
+
contain-intrinsic-size: auto 94px;
|
|
590
744
|
}
|
|
591
745
|
.base-card:last-child { border-bottom: 0; }
|
|
592
746
|
.base-card:hover { background: var(--surface-hover); }
|
|
@@ -595,7 +749,7 @@ html,
|
|
|
595
749
|
.base-card-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
|
|
596
750
|
.base-card-identity > div { min-width: 0; }
|
|
597
751
|
.base-card-header > .badge { flex: none; }
|
|
598
|
-
.base-symbol { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--
|
|
752
|
+
.base-symbol { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 11px; background: var(--material-control); color: var(--text-secondary); box-shadow: var(--shadow-control); font-size: 14px; font-weight: 700; }
|
|
599
753
|
.base-card h3 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
|
|
600
754
|
.base-card small { display: block; overflow: hidden; margin-top: 3px; color: var(--text-tertiary); text-overflow: ellipsis; white-space: nowrap; }
|
|
601
755
|
.base-description { min-height: 38px; grid-column: 2; grid-row: 1; display: -webkit-box; overflow: hidden; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
|
@@ -615,8 +769,8 @@ html,
|
|
|
615
769
|
.context-pill strong { color: var(--text-secondary); }
|
|
616
770
|
.context-pill span { overflow: hidden; color: var(--text-tertiary); text-overflow: ellipsis; white-space: nowrap; }
|
|
617
771
|
.context-warning { border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border)); border-radius: 10px; padding: 11px 13px; background: var(--warning-soft); color: var(--warning); font-size: 12px; }
|
|
618
|
-
.mount-manager { overflow: clip; border: 1px solid var(--border); border-radius: var(--radius); background: var(--
|
|
619
|
-
.mount-manager-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid var(--
|
|
772
|
+
.mount-manager { overflow: clip; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--material-panel); box-shadow: var(--shadow-soft); }
|
|
773
|
+
.mount-manager-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid var(--separator); padding: 12px; }
|
|
620
774
|
.mount-search { min-width: 220px; }
|
|
621
775
|
.mount-manager-toolbar > .select { width: auto; min-width: 130px; }
|
|
622
776
|
.mount-target-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); padding: 9px 14px; background: var(--surface-soft); color: var(--text-secondary); font-size: 12px; }
|
|
@@ -655,10 +809,10 @@ html,
|
|
|
655
809
|
display: grid;
|
|
656
810
|
grid-template-columns: clamp(240px, 24vw, 320px) minmax(0, 1fr);
|
|
657
811
|
overflow: hidden;
|
|
658
|
-
border: 1px solid var(--border);
|
|
659
|
-
border-radius:
|
|
660
|
-
background: var(--surface);
|
|
661
|
-
box-shadow:
|
|
812
|
+
border: 1px solid var(--glass-border);
|
|
813
|
+
border-radius: 15px;
|
|
814
|
+
background: var(--surface-editor);
|
|
815
|
+
box-shadow: var(--glass-shadow);
|
|
662
816
|
}
|
|
663
817
|
.note-tree-panel {
|
|
664
818
|
min-width: 0;
|
|
@@ -667,8 +821,11 @@ html,
|
|
|
667
821
|
display: grid;
|
|
668
822
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
669
823
|
overflow: hidden;
|
|
670
|
-
border-right: 1px solid var(--
|
|
671
|
-
background:
|
|
824
|
+
border-right: 1px solid var(--glass-separator);
|
|
825
|
+
background: var(--surface-pane);
|
|
826
|
+
box-shadow: inset 1px 0 0 var(--glass-rim-light);
|
|
827
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
828
|
+
backdrop-filter: var(--glass-filter);
|
|
672
829
|
}
|
|
673
830
|
.note-tree-scrim { display: none; }
|
|
674
831
|
.note-tree-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 8px 16px; }
|
|
@@ -677,8 +834,8 @@ html,
|
|
|
677
834
|
.note-add-button { width: 30px; min-width: 30px; min-height: 30px; padding: 0; font-size: 18px; font-weight: 400; }
|
|
678
835
|
.note-tree-search-wrap { position: relative; padding: 5px 10px 9px; }
|
|
679
836
|
.note-tree-search-wrap .search-symbol { left: 20px; }
|
|
680
|
-
.note-tree-search { width: 100%; height: 34px; border: 1px solid
|
|
681
|
-
.note-tree-search:focus { border-color: color-mix(in srgb, var(--
|
|
837
|
+
.note-tree-search { width: 100%; height: 34px; border: 1px solid var(--glass-border); border-radius: var(--radius-control); padding: 6px 10px 6px 34px; background: var(--material-control); color: var(--text); outline: none; box-shadow: var(--shadow-control); }
|
|
838
|
+
.note-tree-search:focus { border-color: var(--border-strong); background: var(--surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 9%, transparent), var(--shadow-control); }
|
|
682
839
|
.note-tree {
|
|
683
840
|
min-height: 0;
|
|
684
841
|
overflow-x: hidden;
|
|
@@ -688,8 +845,8 @@ html,
|
|
|
688
845
|
}
|
|
689
846
|
.note-tree-group + .note-tree-group { margin-top: 3px; }
|
|
690
847
|
.note-tree-base, .note-tree-document, .note-tree-new { width: 100%; display: flex; align-items: center; border: 0; background: transparent; color: var(--text-secondary); text-align: left; }
|
|
691
|
-
.note-tree-base { min-height:
|
|
692
|
-
.note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: var(--surface-hover); color: var(--text); }
|
|
848
|
+
.note-tree-base { min-height: 36px; gap: 7px; border-radius: 9px; padding: 5px 7px; font-weight: 620; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-base) var(--ease-out); }
|
|
849
|
+
.note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: var(--surface-hover); color: var(--text); transform: translateX(2px); }
|
|
693
850
|
.tree-disclosure { width: 7px; height: 7px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .16s ease; }
|
|
694
851
|
.note-tree-group[data-expanded="true"] .tree-disclosure { transform: rotate(45deg) translate(-1px, -1px); }
|
|
695
852
|
.tree-folder-icon {
|
|
@@ -703,12 +860,12 @@ html,
|
|
|
703
860
|
transition: color .15s ease, opacity .15s ease;
|
|
704
861
|
}
|
|
705
862
|
.note-tree-base:hover .tree-folder-icon { opacity: .7; }
|
|
706
|
-
.note-tree-group[data-expanded="true"] .tree-folder-icon { color: var(--
|
|
863
|
+
.note-tree-group[data-expanded="true"] .tree-folder-icon { color: var(--text-secondary); opacity: .8; }
|
|
707
864
|
.tree-base-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
708
865
|
.tree-count { min-width: 20px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
|
|
709
866
|
.note-tree-documents { display: grid; gap: 1px; margin: 1px 0 5px 18px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--border-strong) 55%, transparent); }
|
|
710
|
-
.note-tree-document { position: relative; min-height:
|
|
711
|
-
.note-tree-document[aria-current="page"] { background:
|
|
867
|
+
.note-tree-document { position: relative; min-height: 40px; gap: 8px; border-radius: 9px; padding: 5px 8px; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) ease; }
|
|
868
|
+
.note-tree-document[aria-current="page"] { background: var(--material-control); color: var(--text); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-secondary) 74%, transparent), var(--shadow-control); transform: translateX(2px); }
|
|
712
869
|
.tree-document-icon {
|
|
713
870
|
width: 14px;
|
|
714
871
|
height: 17px;
|
|
@@ -720,23 +877,222 @@ html,
|
|
|
720
877
|
transition: color .15s ease, opacity .15s ease;
|
|
721
878
|
}
|
|
722
879
|
.note-tree-document:hover .tree-document-icon { opacity: .72; }
|
|
723
|
-
.note-tree-document[aria-current="page"] .tree-document-icon { color: var(--
|
|
880
|
+
.note-tree-document[aria-current="page"] .tree-document-icon { color: var(--text); opacity: .88; }
|
|
724
881
|
.tree-document-copy { min-width: 0; flex: 1; }
|
|
725
882
|
.note-tree-document > .badge { min-height: 17px; padding: 1px 5px; font-size: 8px; }
|
|
726
883
|
.tree-document-copy strong, .tree-document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
727
884
|
.tree-document-copy strong { font-size: 12px; font-weight: 540; }
|
|
728
|
-
.tree-document-copy small { margin-top: 1px; color: var(--text-tertiary); font-size:
|
|
885
|
+
.tree-document-copy small { margin-top: 1px; color: var(--text-tertiary); font-size: 10px; }
|
|
729
886
|
.note-tree-new { min-height: 30px; gap: 7px; border-radius: 7px; padding: 4px 8px; color: var(--text-tertiary); font-size: 11px; }
|
|
887
|
+
.note-tree-status { display: grid; gap: 7px; padding: 10px 9px; color: var(--text-tertiary); font-size: 10px; line-height: 1.45; }
|
|
888
|
+
.note-tree-status.is-error { color: var(--danger); }
|
|
889
|
+
.note-tree-status .button { justify-self: start; }
|
|
890
|
+
.note-tree-more { width: 100%; min-height: 30px; border: 0; border-radius: 7px; padding: 5px 8px; background: transparent; color: var(--text-tertiary); font: inherit; font-size: 10px; text-align: left; transition: background .15s ease, color .15s ease; }
|
|
891
|
+
.note-tree-more:hover:not(:disabled) { background: var(--surface-hover); color: var(--accent); }
|
|
892
|
+
.note-tree-more.search-more { margin: 4px 7px 10px; width: calc(100% - 14px); text-align: center; }
|
|
730
893
|
.note-tree-footer { border-top: 1px solid var(--border); padding: 8px 11px; }
|
|
731
894
|
.note-tree-empty { padding: 28px 12px; color: var(--text-tertiary); font-size: 12px; text-align: center; }
|
|
895
|
+
|
|
896
|
+
.notes-page { min-width: 0; height: 100%; }
|
|
897
|
+
.notes-workspace {
|
|
898
|
+
position: relative;
|
|
899
|
+
min-width: 0;
|
|
900
|
+
height: 100%;
|
|
901
|
+
display: grid;
|
|
902
|
+
grid-template-columns: clamp(250px, 25%, 320px) minmax(0, 1fr);
|
|
903
|
+
overflow: hidden;
|
|
904
|
+
background: var(--surface-editor);
|
|
905
|
+
}
|
|
906
|
+
.notes-browser { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border-right: 1px solid var(--glass-separator); background: var(--surface-pane); box-shadow: inset 1px 0 0 var(--glass-rim-light); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
|
|
907
|
+
.notes-browser-header { min-height: 68px; display: grid; gap: 8px; padding: 10px 10px 7px; }
|
|
908
|
+
.notes-browser-header > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
|
909
|
+
.notes-browser-header h2 { margin: 0; font-size: 13px; font-weight: 650; }
|
|
910
|
+
.notes-browser-header span { color: var(--text-tertiary); font-size: 10px; }
|
|
911
|
+
.notes-browser-actions { display: flex; align-items: center; gap: 4px; }
|
|
912
|
+
.notes-search { padding: 1px 10px 7px; }
|
|
913
|
+
.notes-search .input { width: 100%; height: 34px; }
|
|
914
|
+
.notes-tree { min-width: 0; max-width: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 2px 5px 16px; }
|
|
915
|
+
.notes-tree-branch { min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
|
|
916
|
+
.notes-tree-branch[role="group"] { position: relative; margin-left: 17px; padding-left: 5px; }
|
|
917
|
+
.notes-tree-branch[role="group"]::before { content: ""; position: absolute; top: 0; bottom: 5px; left: 0; width: 1px; background: color-mix(in srgb, var(--border-strong) 48%, transparent); }
|
|
918
|
+
.notes-tree-node { min-width: 0; max-width: 100%; }
|
|
919
|
+
.notes-tree-item { --notes-row-actions-width: 118px; position: relative; width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: center; border-radius: 8px; transition: background var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out); }
|
|
920
|
+
.notes-tree-item:hover { background: var(--surface-hover); }
|
|
921
|
+
.notes-tree-item[data-selected="true"] { background: var(--material-control); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-secondary) 70%, transparent), var(--shadow-control); transform: translateX(2px); }
|
|
922
|
+
.notes-tree-item[data-drop-target="true"] { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); outline: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -1px; }
|
|
923
|
+
.notes-tree-item[data-drop-target="true"]::after { content: "放入此目录"; position: absolute; right: 6px; z-index: 2; border-radius: 4px; padding: 2px 5px; background: color-mix(in srgb, var(--surface-raised) 92%, transparent); color: var(--accent); font-size: 8px; font-weight: 620; pointer-events: none; }
|
|
924
|
+
.notes-tree-item[data-drop-target="true"] .notes-row-actions { opacity: 0; pointer-events: none; }
|
|
925
|
+
.notes-tree-item[data-dragging="true"] { opacity: .45; }
|
|
926
|
+
.notes-tree-row { width: 100%; min-width: 0; min-height: 34px; display: flex; align-items: center; flex: 1 1 0; gap: 7px; overflow: hidden; border: 0; padding: 3px 4px; background: transparent; color: var(--text-secondary); font: inherit; text-align: left; transition: padding-right .12s ease; }
|
|
927
|
+
.notes-tree-row:hover, .notes-tree-row[aria-selected="true"] { color: var(--text); }
|
|
928
|
+
.notes-tree-chevron, .notes-tree-spacer { position: relative; width: 14px; height: 20px; flex: none; color: var(--text-tertiary); }
|
|
929
|
+
.notes-tree-chevron::before { content: ""; position: absolute; top: 50%; left: 3px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-50%) rotate(-45deg); transform-origin: center; transition: transform .16s cubic-bezier(.2, .8, .2, 1), color .14s ease; }
|
|
930
|
+
.notes-tree-row[aria-expanded="true"] .notes-tree-chevron::before { transform: translateY(-65%) rotate(45deg); color: var(--text); }
|
|
931
|
+
.notes-tree-name { min-width: 0; max-width: 100%; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
|
|
932
|
+
.notes-row-actions { position: absolute; z-index: 1; right: 3px; width: var(--notes-row-actions-width); display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding-left: 14px; background: linear-gradient(90deg, transparent, var(--surface-hover) 14px); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
|
|
933
|
+
.notes-tree-item:hover .notes-tree-row, .notes-tree-item:focus-within .notes-tree-row { padding-right: calc(var(--notes-row-actions-width) + 7px); }
|
|
934
|
+
.notes-tree-item:hover .notes-row-actions, .notes-tree-item:focus-within .notes-row-actions { opacity: 1; pointer-events: auto; }
|
|
935
|
+
.button.tiny { min-height: 26px; padding: 3px 6px; border-radius: var(--radius-small); font-size: 10px; }
|
|
936
|
+
.danger-text { color: var(--danger); }
|
|
937
|
+
.notes-tree-loading { margin-left: 24px; padding: 7px 10px; color: var(--text-tertiary); font-size: 10px; }
|
|
938
|
+
.notes-tree-empty, .notes-folder-empty { display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--text-tertiary); text-align: center; }
|
|
939
|
+
.notes-tree-empty { min-height: 170px; padding: 24px 12px; }
|
|
940
|
+
.notes-tree-empty strong { color: var(--text-secondary); font-size: 12px; }
|
|
941
|
+
.notes-search-results { display: grid; gap: 2px; }
|
|
942
|
+
.notes-search-row { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 7px 8px; background: transparent; color: var(--text); text-align: left; }
|
|
943
|
+
.notes-search-row:hover { background: var(--surface-hover); }
|
|
944
|
+
.notes-search-row strong, .notes-search-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
945
|
+
.notes-search-row strong { font-size: 11px; }
|
|
946
|
+
.notes-search-row small { margin-top: 1px; color: var(--text-tertiary); font-size: 10px; }
|
|
947
|
+
.note-node-icon { position: relative; width: 18px; height: 21px; display: grid; place-items: end center; flex: none; border: 1px solid var(--border-strong); border-radius: 3px; padding-bottom: 2px; background: var(--surface-raised); color: var(--text-tertiary); font-size: 5px; font-weight: 720; letter-spacing: .02em; }
|
|
948
|
+
.note-node-icon.is-folder { width: 20px; height: 15px; margin-top: 2px; border-radius: 3px; background: color-mix(in srgb, var(--text-tertiary) 11%, var(--surface-raised)); }
|
|
949
|
+
.note-node-icon.is-folder::before { content: ""; position: absolute; top: -4px; left: 1px; width: 9px; height: 4px; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 3px 3px 0 0; background: inherit; }
|
|
950
|
+
.note-node-icon.is-document, .note-node-icon[data-media-kind="text"] { border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); color: var(--accent); }
|
|
951
|
+
.note-node-icon.is-large { width: 38px; height: 46px; border-radius: 6px; padding-bottom: 5px; font-size: 7px; }
|
|
952
|
+
.note-node-icon.is-folder.is-large { width: 44px; height: 32px; }
|
|
953
|
+
.notes-content { min-width: 0; min-height: 0; overflow: auto; background: var(--surface-editor); }
|
|
954
|
+
.notes-content-header { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--separator); padding: 11px 22px 13px; background: var(--material-toolbar); -webkit-backdrop-filter: blur(16px) saturate(108%); backdrop-filter: blur(16px) saturate(108%); }
|
|
955
|
+
.notes-breadcrumb { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--text-tertiary); font-size: 10px; }
|
|
956
|
+
.notes-breadcrumb span { min-width: 0; display: flex; align-items: center; gap: 5px; }
|
|
957
|
+
.notes-breadcrumb button { min-width: 0; overflow: hidden; border: 0; padding: 2px; background: transparent; color: inherit; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
|
|
958
|
+
.notes-breadcrumb button:hover { color: var(--accent); }
|
|
959
|
+
.notes-breadcrumb strong { overflow: hidden; color: var(--text-secondary); font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
|
|
960
|
+
.notes-content-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 10px; }
|
|
961
|
+
.notes-content-title h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
|
|
962
|
+
.notes-content-title p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 10px; }
|
|
963
|
+
.notes-content-actions { display: flex; gap: 7px; }
|
|
964
|
+
.notes-file-list { min-width: 620px; padding: 6px 12px 28px; }
|
|
965
|
+
.notes-file-row { min-height: 46px; display: grid; grid-template-columns: minmax(230px, 1fr) 130px 72px auto; align-items: center; gap: 12px; border-radius: 6px; padding: 3px 8px; transition: background .14s ease; }
|
|
966
|
+
.notes-file-row:hover { background: var(--surface-hover); }
|
|
967
|
+
.notes-file-main { min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; padding: 3px; background: transparent; color: var(--text); text-align: left; }
|
|
968
|
+
.notes-file-main > span:last-child { min-width: 0; }
|
|
969
|
+
.notes-file-main strong, .notes-file-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
970
|
+
.notes-file-main strong { font-size: 12px; font-weight: 560; }
|
|
971
|
+
.notes-file-main small, .notes-file-row time, .notes-file-size { color: var(--text-tertiary); font-size: 10px; }
|
|
972
|
+
.notes-file-actions { display: flex; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
|
|
973
|
+
.notes-file-row:hover .notes-file-actions, .notes-file-row:focus-within .notes-file-actions { opacity: 1; pointer-events: auto; }
|
|
974
|
+
.notes-folder-empty { min-height: 360px; padding: 32px; }
|
|
975
|
+
.notes-folder-empty h3 { margin: 9px 0 0; color: var(--text); font-size: 16px; }
|
|
976
|
+
.notes-folder-empty p { max-width: 380px; margin: 0 0 12px; }
|
|
977
|
+
.notes-folder-empty > div { display: flex; gap: 8px; }
|
|
978
|
+
.notes-empty-folder-mark { position: relative; width: 58px; height: 40px; border: 1.5px solid var(--border-strong); border-radius: 7px; background: var(--surface-soft); }
|
|
979
|
+
.notes-empty-folder-mark::before { content: ""; position: absolute; top: -8px; left: 4px; width: 24px; height: 8px; border: 1.5px solid var(--border-strong); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--surface-soft); }
|
|
980
|
+
.notes-content.is-document { --notes-document-inline: clamp(24px, 4.5vw, 76px); display: block; background: var(--surface-editor); }
|
|
981
|
+
.notes-content.is-document.has-line-numbers { --notes-document-inline: clamp(34px, 3.2vw, 48px); }
|
|
982
|
+
.notes-document-toolbar { position: sticky; top: 0; z-index: 2; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--separator); padding: 5px 14px 5px 20px; background: var(--material-toolbar); -webkit-backdrop-filter: blur(16px) saturate(108%); backdrop-filter: blur(16px) saturate(108%); }
|
|
983
|
+
.notes-toolbar-leading { min-width: 0; display: flex; align-items: center; gap: 16px; overflow: hidden; }
|
|
984
|
+
.notes-file-info { min-width: 0; display: flex; align-items: center; gap: 5px 12px; overflow: hidden; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
985
|
+
.notes-file-info-item { min-width: 0; display: inline-flex; align-items: baseline; gap: 4px; }
|
|
986
|
+
.notes-file-info-item strong { color: var(--text-secondary); font-size: 10px; font-weight: 590; }
|
|
987
|
+
.notes-file-info-item > span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
|
|
988
|
+
.notes-document-actions { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 5px; }
|
|
989
|
+
.notes-save-state { color: var(--text-tertiary); font-size: 10px; }
|
|
990
|
+
.notes-save-state[data-dirty="true"] { color: var(--warning); }
|
|
991
|
+
.notes-document-title { min-width: 0; margin: 0; padding: clamp(26px, 4vw, 48px) var(--notes-document-inline) 0; outline: 0; color: var(--text); font-family: var(--font-reading); font-size: clamp(25px, 2.5vw, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; caret-color: var(--accent); }
|
|
992
|
+
.notes-document-title:focus, .notes-document-title:focus-visible { outline: 0; box-shadow: none; }
|
|
993
|
+
.notes-content.is-document > .notes-live-editor, .notes-content.is-document > .notes-plain-editor { width: 100%; min-width: 0; min-height: max(520px, calc(100% - 116px)); margin-top: 0; padding: 16px var(--notes-document-inline) 72px; }
|
|
994
|
+
.notes-content.is-document, .note-paper { font-family: var(--font-reading); }
|
|
995
|
+
.notes-live-editor { width: 100%; min-height: 520px; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font-family: var(--font-reading); }
|
|
996
|
+
.notes-plain-editor { max-width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); cursor: text; }
|
|
997
|
+
.notes-plain-editor-surface { width: 100%; min-height: inherit; counter-reset: note-line; border: 0; outline: 0; background: transparent; box-shadow: none; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font: 16px/1.55 var(--font-reading); letter-spacing: normal; caret-color: var(--accent); cursor: text; }
|
|
998
|
+
.notes-plain-editor-surface:focus, .notes-plain-editor-surface:focus-visible { border: 0; outline: 0; box-shadow: none; }
|
|
999
|
+
.notes-plain-editor-surface > p { position: relative; min-height: 1.78em; margin: 0; counter-increment: note-line; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
|
|
1000
|
+
.notes-plain-editor-surface > p::before { content: counter(note-line); position: absolute; right: calc(100% + 8px); top: 0; width: 22px; color: color-mix(in srgb, var(--text-tertiary) 54%, transparent); font: 11px/2.25 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; pointer-events: none; user-select: none; }
|
|
1001
|
+
.notes-plain-editor-surface ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
|
|
1002
|
+
.notes-live-editor-surface { width: 100%; min-width: 0; max-width: 100%; min-height: 520px; border: 0; outline: 0; background: transparent; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font: 16px/1.55 var(--font-reading); letter-spacing: normal; overflow-wrap: anywhere; word-break: break-word; caret-color: var(--accent); }
|
|
1003
|
+
.notes-live-editor-surface:focus, .notes-live-editor-surface:focus-visible { border: 0; outline: 0; box-shadow: none; }
|
|
1004
|
+
.notes-live-editor-surface > :first-child { margin-top: 0; }
|
|
1005
|
+
.notes-live-editor-surface > :last-child { margin-bottom: 0; }
|
|
1006
|
+
.notes-live-editor-surface p { margin: .62em 0; line-height: 1.55; }
|
|
1007
|
+
.notes-live-editor-surface h1, .notes-live-editor-surface h2, .notes-live-editor-surface h3, .notes-live-editor-surface h4 { margin: 1.35em 0 .48em; color: var(--text); line-height: 1.28; letter-spacing: -.018em; }
|
|
1008
|
+
.notes-live-editor-surface h1 { font-size: 1.75em; }
|
|
1009
|
+
.notes-live-editor-surface h2 { font-size: 1.4em; }
|
|
1010
|
+
.notes-live-editor-surface h3 { font-size: 1.16em; }
|
|
1011
|
+
.notes-live-editor-surface ul, .notes-live-editor-surface ol { margin: .65em 0; padding-left: 1.55em; }
|
|
1012
|
+
.notes-live-editor-surface li { margin: .16em 0; line-height: 1.55; }
|
|
1013
|
+
.notes-live-editor-surface blockquote { margin: 1.1em 0; border-left: 3px solid color-mix(in srgb, var(--accent) 42%, var(--border)); padding: .1em 0 .1em 1em; color: var(--text-tertiary); }
|
|
1014
|
+
.notes-live-editor-surface code { border-radius: 4px; padding: .12em .36em; background: var(--surface-soft); color: var(--text); font: .9em/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; }
|
|
1015
|
+
.notes-live-editor-surface pre { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; background: var(--surface-soft); }
|
|
1016
|
+
.notes-live-editor-surface pre code { padding: 0; background: transparent; }
|
|
1017
|
+
.notes-live-editor-surface a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
|
|
1018
|
+
.notes-live-editor-surface hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; }
|
|
1019
|
+
.notes-live-editor-surface img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 7px; }
|
|
1020
|
+
.notes-live-editor-surface table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .94em; }
|
|
1021
|
+
.notes-live-editor-surface th, .notes-live-editor-surface td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
|
|
1022
|
+
.notes-live-editor-surface th { background: var(--surface-soft); color: var(--text); font-weight: 620; }
|
|
1023
|
+
.notes-live-editor-surface ul[data-type="taskList"] { list-style: none; padding-left: 0; }
|
|
1024
|
+
.notes-live-editor-surface ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; }
|
|
1025
|
+
.notes-live-editor-surface ul[data-type="taskList"] label { margin-top: 3px; }
|
|
1026
|
+
.notes-live-editor-surface ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
|
|
1027
|
+
.notes-editor-loading, .notes-editor-error { min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--text-tertiary); font-size: 12px; }
|
|
1028
|
+
.notes-editor-loading::before { content: ""; width: 36px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: note-editor-loading 1.1s ease-in-out infinite; }
|
|
1029
|
+
.notes-editor-error strong { color: var(--text); font-size: 13px; }
|
|
1030
|
+
@keyframes note-editor-loading { 0%, 100% { opacity: .25; transform: scaleX(.72); } 50% { opacity: .75; transform: scaleX(1); } }
|
|
1031
|
+
@media (prefers-reduced-motion: reduce) { .notes-editor-loading::before { animation: none; opacity: .55; } }
|
|
1032
|
+
.notes-inline-viewer { min-height: calc(100% - 62px); display: grid; place-items: center; overflow: auto; padding: clamp(18px, 3vw, 36px); background: color-mix(in srgb, var(--surface-soft) 35%, var(--surface)); }
|
|
1033
|
+
.notes-inline-viewer.is-pdf { padding: 0; background: var(--surface-soft); }
|
|
1034
|
+
.notes-inline-image { display: block; max-width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; border-radius: 6px; box-shadow: 0 10px 32px color-mix(in srgb, var(--text) 9%, transparent); }
|
|
1035
|
+
.notes-inline-frame { width: 100%; height: max(620px, calc(100dvh - 130px)); border: 0; background: var(--surface); }
|
|
1036
|
+
.notes-inline-unavailable { max-width: 440px; display: grid; justify-items: center; gap: 9px; padding: 40px 24px; color: var(--text-tertiary); text-align: center; }
|
|
1037
|
+
.notes-inline-unavailable h2 { overflow-wrap: anywhere; margin: 8px 0 0; color: var(--text); font-size: 18px; }
|
|
1038
|
+
.notes-inline-unavailable p { margin: 0 0 8px; line-height: 1.6; }
|
|
1039
|
+
.notes-drop-overlay { position: absolute; inset: 12px; z-index: 5; display: grid; place-content: center; justify-items: center; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--surface-raised) 94%, transparent); opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
|
|
1040
|
+
.notes-drop-overlay strong { font-size: 16px; }
|
|
1041
|
+
.notes-drop-overlay span { margin-top: 5px; color: var(--text-tertiary); font-size: 12px; }
|
|
1042
|
+
.notes-workspace[data-drop-active="true"] .notes-drop-overlay { opacity: 1; transform: scale(1); }
|
|
1043
|
+
.notes-transfer {
|
|
1044
|
+
--notes-transfer-progress: 0;
|
|
1045
|
+
position: absolute;
|
|
1046
|
+
right: 18px;
|
|
1047
|
+
bottom: 18px;
|
|
1048
|
+
z-index: 6;
|
|
1049
|
+
width: min(370px, calc(100% - 36px));
|
|
1050
|
+
display: grid;
|
|
1051
|
+
gap: 8px;
|
|
1052
|
+
border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent);
|
|
1053
|
+
border-radius: 11px;
|
|
1054
|
+
padding: 11px 12px 10px;
|
|
1055
|
+
background: color-mix(in srgb, var(--dialog-surface) 96%, transparent);
|
|
1056
|
+
box-shadow: 0 12px 34px color-mix(in srgb, var(--text) 11%, transparent), inset 0 1px color-mix(in srgb, white 45%, transparent);
|
|
1057
|
+
color: var(--text);
|
|
1058
|
+
animation: notes-transfer-enter .18s cubic-bezier(.2, .8, .2, 1) both;
|
|
1059
|
+
}
|
|
1060
|
+
.notes-transfer-heading { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
|
|
1061
|
+
.notes-transfer-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
|
|
1062
|
+
.notes-transfer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 640; }
|
|
1063
|
+
.notes-transfer-close { min-height: 23px; padding: 2px 5px; color: var(--text-tertiary); }
|
|
1064
|
+
.notes-transfer-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 11px; }
|
|
1065
|
+
.notes-transfer-track { position: relative; height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--text-tertiary) 14%, transparent); }
|
|
1066
|
+
.notes-transfer-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(var(--notes-transfer-progress)); transform-origin: left center; transition: transform .12s linear; }
|
|
1067
|
+
.notes-transfer-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-tertiary); font-size: 9px; font-variant-numeric: tabular-nums; }
|
|
1068
|
+
.notes-transfer-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1069
|
+
.notes-transfer-percent { flex: none; }
|
|
1070
|
+
.notes-transfer[data-state="scanning"] .notes-transfer-fill { width: 34%; animation: notes-transfer-scan 1s cubic-bezier(.4, 0, .2, 1) infinite; }
|
|
1071
|
+
.notes-transfer[data-state="complete"] .notes-transfer-mark { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent); }
|
|
1072
|
+
.notes-transfer[data-state="error"] .notes-transfer-mark { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent); }
|
|
1073
|
+
.notes-transfer[data-state="error"] .notes-transfer-detail { color: var(--danger); white-space: normal; }
|
|
1074
|
+
@keyframes notes-transfer-enter { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
|
1075
|
+
@keyframes notes-transfer-scan { from { transform: translateX(-115%); } to { transform: translateX(295%); } }
|
|
1076
|
+
.note-picker { display: grid; gap: 12px; }
|
|
1077
|
+
.note-picker-results { max-height: min(58vh, 540px); overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
|
|
1078
|
+
.note-picker-row { width: 100%; min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; background: transparent; color: var(--text); text-align: left; }
|
|
1079
|
+
.note-picker-row:last-child { border-bottom: 0; }
|
|
1080
|
+
.note-picker-row:hover { background: var(--surface-hover); }
|
|
1081
|
+
.note-picker-row > span:last-child { min-width: 0; }
|
|
1082
|
+
.note-picker-row strong, .note-picker-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1083
|
+
.note-picker-row strong { font-size: 12px; }
|
|
1084
|
+
.note-picker-row small { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; }
|
|
1085
|
+
.note-picker-empty { padding: 30px 18px; color: var(--text-tertiary); text-align: center; }
|
|
1086
|
+
.note-reference { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent); font-weight: 590; text-decoration: none; cursor: pointer; }
|
|
1087
|
+
.note-reference:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
|
|
732
1088
|
.note-editor {
|
|
733
1089
|
min-width: 0;
|
|
734
1090
|
min-height: 0;
|
|
735
1091
|
height: 100%;
|
|
736
1092
|
display: grid;
|
|
737
|
-
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
1093
|
+
grid-template-rows: auto minmax(0, 1fr) auto auto;
|
|
738
1094
|
overflow: hidden;
|
|
739
|
-
background: var(--surface);
|
|
1095
|
+
background: var(--surface-editor);
|
|
740
1096
|
container-name: note-editor;
|
|
741
1097
|
container-type: inline-size;
|
|
742
1098
|
}
|
|
@@ -748,25 +1104,32 @@ html,
|
|
|
748
1104
|
.note-editor-toolbar {
|
|
749
1105
|
position: relative;
|
|
750
1106
|
z-index: 2;
|
|
751
|
-
min-height:
|
|
1107
|
+
min-height: 42px;
|
|
752
1108
|
display: flex;
|
|
753
1109
|
align-items: center;
|
|
754
1110
|
justify-content: space-between;
|
|
755
1111
|
gap: 14px;
|
|
756
|
-
border-bottom: 1px solid var(--
|
|
757
|
-
padding:
|
|
758
|
-
background: var(--
|
|
759
|
-
|
|
1112
|
+
border-bottom: 1px solid var(--separator);
|
|
1113
|
+
padding: 5px 14px 5px 20px;
|
|
1114
|
+
background: var(--material-toolbar);
|
|
1115
|
+
box-shadow: inset 0 1px 0 var(--glass-rim-light);
|
|
1116
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
1117
|
+
backdrop-filter: var(--glass-filter);
|
|
1118
|
+
}
|
|
1119
|
+
.note-editor-loading { grid-template-rows: auto minmax(0, 1fr); }
|
|
1120
|
+
.editor-load-label { color: var(--text-tertiary); font-size: 10px; }
|
|
1121
|
+
.editor-paper-skeleton { gap: 15px; padding-top: clamp(38px, 6cqi, 74px); }
|
|
760
1122
|
.note-breadcrumb { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
|
|
761
1123
|
.note-breadcrumb strong { overflow: hidden; color: var(--text-secondary); font-weight: 560; text-overflow: ellipsis; }
|
|
1124
|
+
.note-toolbar-meta { display: inline-flex; gap: 10px; margin-left: 8px; color: var(--text-tertiary); font-size: 10px; }
|
|
1125
|
+
.note-toolbar-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
1126
|
+
.note-toolbar-meta > span + span::before { content: "·"; margin-right: 10px; color: var(--border-strong); }
|
|
762
1127
|
.note-editor-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
|
|
763
1128
|
.editor-save-status { margin-right: 4px; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
|
|
764
|
-
.note-mode-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface-soft); }
|
|
765
|
-
.note-mode-switch button { min-width: 48px; min-height: 28px; border: 0; border-radius: 6px; padding: 4px 9px; background: transparent; color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
|
|
766
|
-
.note-mode-switch button:hover { color: var(--text); }
|
|
767
|
-
.note-mode-switch button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); }
|
|
768
1129
|
.note-editor-scroll {
|
|
769
1130
|
min-height: 0;
|
|
1131
|
+
display: grid;
|
|
1132
|
+
grid-template-columns: minmax(0, 1fr);
|
|
770
1133
|
overflow: auto;
|
|
771
1134
|
overscroll-behavior: contain;
|
|
772
1135
|
container-type: inline-size;
|
|
@@ -791,25 +1154,27 @@ html,
|
|
|
791
1154
|
width: 100%;
|
|
792
1155
|
min-width: 0;
|
|
793
1156
|
min-height: 100%;
|
|
1157
|
+
display: flex;
|
|
1158
|
+
flex-direction: column;
|
|
794
1159
|
margin: 0;
|
|
795
|
-
padding: clamp(
|
|
1160
|
+
padding: clamp(32px, 5cqi, 62px) clamp(32px, 6cqi, 88px) 100px;
|
|
796
1161
|
}
|
|
797
|
-
.note-title-input { width: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font-size: clamp(
|
|
1162
|
+
.note-title-input { width: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font-family: var(--font-reading); font-size: clamp(25px, 2.5vw, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; outline: none; }
|
|
1163
|
+
.note-title-input:focus, .note-title-input:focus-visible { outline: 0; box-shadow: none; }
|
|
798
1164
|
.note-title-input::placeholder { color: color-mix(in srgb, var(--text-tertiary) 62%, transparent); }
|
|
799
|
-
.note-preview-title { margin: 0; color: var(--text); font-size: clamp(
|
|
800
|
-
.
|
|
801
|
-
.
|
|
802
|
-
.
|
|
803
|
-
.markdown-preview { min-width: 0; max-width: 100%; min-height: 420px; padding-bottom: 80px; color: var(--text-secondary); font-size: 15px; line-height: 1.78; overflow-wrap: anywhere; }
|
|
1165
|
+
.note-preview-title { margin: 0; color: var(--text); font-family: var(--font-reading); font-size: clamp(25px, 2.5cqi, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; overflow-wrap: anywhere; }
|
|
1166
|
+
.knowledge-live-editor { width: 100%; min-height: 0; flex: 1; display: flex; margin-top: 18px; }
|
|
1167
|
+
.knowledge-live-editor .notes-live-editor-surface { width: 100%; min-height: 100%; flex: 1; padding-bottom: 72px; font: 16px/1.55 var(--font-reading); }
|
|
1168
|
+
.markdown-preview { min-width: 0; max-width: 100%; min-height: 420px; padding-bottom: 72px; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font: 16px/1.55 var(--font-reading); letter-spacing: normal; overflow-wrap: anywhere; }
|
|
804
1169
|
.markdown-preview.is-empty { color: var(--text-tertiary); }
|
|
805
1170
|
.markdown-preview > :first-child { margin-top: 0; }
|
|
806
1171
|
.markdown-preview > :last-child { margin-bottom: 0; }
|
|
807
1172
|
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4 { color: var(--text); line-height: 1.3; letter-spacing: -.018em; }
|
|
808
|
-
.markdown-preview h1 { margin: 1.
|
|
809
|
-
.markdown-preview h2 { margin: 1.
|
|
810
|
-
.markdown-preview h3 { margin: 1.
|
|
811
|
-
.markdown-preview h4 { margin: 1.
|
|
812
|
-
.markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote { margin: .
|
|
1173
|
+
.markdown-preview h1 { margin: 1.5em 0 .55em; font-size: 1.72em; }
|
|
1174
|
+
.markdown-preview h2 { margin: 1.4em 0 .5em; font-size: 1.38em; }
|
|
1175
|
+
.markdown-preview h3 { margin: 1.25em 0 .42em; font-size: 1.15em; }
|
|
1176
|
+
.markdown-preview h4 { margin: 1.15em 0 .38em; font-size: 1em; }
|
|
1177
|
+
.markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote { margin: .68em 0; }
|
|
813
1178
|
.markdown-preview ul, .markdown-preview ol { padding-left: 1.55em; }
|
|
814
1179
|
.markdown-preview li + li { margin-top: .28em; }
|
|
815
1180
|
.markdown-preview a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
|
|
@@ -837,7 +1202,23 @@ html,
|
|
|
837
1202
|
.markdown-preview th { color: var(--text); font-weight: 650; }
|
|
838
1203
|
.markdown-preview hr { height: 1px; margin: 2em 0; border: 0; background: var(--border); }
|
|
839
1204
|
.markdown-preview img { max-width: 100%; height: auto; border-radius: 10px; }
|
|
840
|
-
.note-inspector { min-height: 48px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--
|
|
1205
|
+
.note-inspector { min-height: 48px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--separator); padding: 7px 16px; background: var(--material-toolbar); }
|
|
1206
|
+
.document-reference-bar { min-width: 0; min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--separator); padding: 7px 14px 7px 16px; background: var(--material-toolbar); }
|
|
1207
|
+
.document-reference-heading { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); white-space: nowrap; }
|
|
1208
|
+
.document-reference-heading strong { font-size: 12px; font-weight: 630; }
|
|
1209
|
+
.document-reference-heading small { color: var(--text-tertiary); font-size: 11px; }
|
|
1210
|
+
.document-reference-mark { width: 6px; height: 6px; border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border)); border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
|
1211
|
+
.document-reference-list { min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
|
|
1212
|
+
.document-reference-list::-webkit-scrollbar { display: none; }
|
|
1213
|
+
.document-reference-chip { min-width: 0; height: 32px; display: inline-flex; flex: 0 1 auto; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
|
|
1214
|
+
.document-reference-open { min-width: 0; height: 100%; display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 3px 7px; background: transparent; color: var(--text-secondary); }
|
|
1215
|
+
.document-reference-open:hover { background: var(--surface-hover); color: var(--text); }
|
|
1216
|
+
.document-reference-open .note-node-icon { width: 16px; height: 16px; flex: none; }
|
|
1217
|
+
.document-reference-open > span:last-child { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
|
|
1218
|
+
.document-reference-remove { width: 28px; height: 100%; flex: none; border: 0; border-left: 1px solid var(--border); padding: 0; background: transparent; color: var(--text-tertiary); font-size: 15px; }
|
|
1219
|
+
.document-reference-remove:hover { background: var(--danger-soft); color: var(--danger); }
|
|
1220
|
+
.document-reference-empty { color: var(--text-tertiary); font-size: 12px; }
|
|
1221
|
+
.document-reference-add { min-height: 27px; white-space: nowrap; }
|
|
841
1222
|
.note-inspector label { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-size: 10px; }
|
|
842
1223
|
.note-inspector input, .note-meta-select { height: 30px; border: 1px solid transparent; border-radius: 6px; padding: 4px 7px; background-color: transparent; color: var(--text-secondary); outline: none; }
|
|
843
1224
|
.note-meta-select {
|
|
@@ -856,7 +1237,7 @@ html,
|
|
|
856
1237
|
.note-inspector input:focus, .note-meta-select:focus { border-color: var(--border-strong); background-color: var(--surface); }
|
|
857
1238
|
.note-tags-field { min-width: 0; flex: 1; }
|
|
858
1239
|
.note-tags-field input { width: min(100%, 360px); }
|
|
859
|
-
.note-format-hint { margin-left: auto; color: var(--text-tertiary); font-size:
|
|
1240
|
+
.note-format-hint { margin-left: auto; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
|
|
860
1241
|
|
|
861
1242
|
@container note-editor (max-width: 700px) {
|
|
862
1243
|
.note-editor-toolbar {
|
|
@@ -873,14 +1254,11 @@ html,
|
|
|
873
1254
|
justify-content: flex-start;
|
|
874
1255
|
}
|
|
875
1256
|
|
|
876
|
-
.note-mode-switch { margin-right: auto; }
|
|
877
1257
|
.editor-save-status { margin-left: auto; }
|
|
878
1258
|
}
|
|
879
1259
|
|
|
880
1260
|
@container note-editor (max-width: 480px) {
|
|
881
1261
|
.note-breadcrumb { display: none; }
|
|
882
|
-
.note-mode-switch { flex: 1 1 112px; }
|
|
883
|
-
.note-mode-switch button { min-width: 0; flex: 1; }
|
|
884
1262
|
.note-editor-actions > .button { flex: 1 1 auto; }
|
|
885
1263
|
}
|
|
886
1264
|
|
|
@@ -902,15 +1280,15 @@ html,
|
|
|
902
1280
|
.list-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
|
|
903
1281
|
.list-actions { display: flex; align-items: flex-start; gap: 4px; }
|
|
904
1282
|
|
|
905
|
-
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 21px; border-radius:
|
|
1283
|
+
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 21px; border-radius: var(--radius-small); padding: 2px 7px; background: var(--material-control); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; }
|
|
906
1284
|
.badge.accent { background: var(--accent-soft); color: var(--accent); }
|
|
907
1285
|
.badge.success { background: var(--success-soft); color: var(--success); }
|
|
908
1286
|
.badge.warning { background: var(--warning-soft); color: var(--warning); }
|
|
909
1287
|
.badge.danger { background: var(--danger-soft); color: var(--danger); }
|
|
910
1288
|
|
|
911
1289
|
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
912
|
-
.knowledge-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 17px; background: var(--
|
|
913
|
-
.knowledge-card:hover { border-color: var(--border-strong); box-shadow:
|
|
1290
|
+
.knowledge-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 17px; background: var(--material-panel); box-shadow: var(--shadow-soft); }
|
|
1291
|
+
.knowledge-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); }
|
|
914
1292
|
.knowledge-card h3 { margin: 11px 0 7px; font-size: 15px; line-height: 1.4; }
|
|
915
1293
|
.knowledge-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--text-secondary); line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
|
|
916
1294
|
.card-top, .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
@@ -920,16 +1298,17 @@ html,
|
|
|
920
1298
|
.tag { border-radius: 6px; padding: 2px 7px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; }
|
|
921
1299
|
.tag.is-empty { color: var(--text-tertiary); font-style: italic; }
|
|
922
1300
|
|
|
923
|
-
.tabs { display: inline-flex; gap: 3px; border-radius: 10px; padding: 3px; background: var(--surface-
|
|
924
|
-
.tab { min-height:
|
|
925
|
-
.tab
|
|
1301
|
+
.tabs { display: inline-flex; gap: 3px; border: 1px solid var(--separator); border-radius: 10px; padding: 3px; background: var(--material-control); box-shadow: inset 0 1px 0 var(--surface-highlight); }
|
|
1302
|
+
.tab { min-height: 31px; border: 0; border-radius: var(--radius-small); padding: 5px 12px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); }
|
|
1303
|
+
.tab:hover { color: var(--text); transform: translateY(-1px); }
|
|
1304
|
+
.tab[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-soft); }
|
|
926
1305
|
|
|
927
1306
|
.candidate-list { display: grid; gap: 13px; }
|
|
928
|
-
.candidate { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
|
|
1307
|
+
.candidate { overflow: hidden; border: 1px solid var(--panel-border); border-radius: var(--radius-panel); background: var(--surface-pane); box-shadow: var(--shadow-control); content-visibility: auto; contain-intrinsic-size: auto 560px; }
|
|
929
1308
|
.candidate-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px 12px; }
|
|
930
1309
|
.candidate-header h3 { margin: 8px 0 0; font-size: 15px; }
|
|
931
1310
|
.candidate-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .34fr); gap: 16px; padding: 0 18px 17px; }
|
|
932
|
-
.candidate-change { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--
|
|
1311
|
+
.candidate-change { min-width: 0; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 11px; background: var(--material-panel); }
|
|
933
1312
|
.candidate-change.is-conflict { border-color: color-mix(in srgb, var(--warning) 24%, var(--border)); }
|
|
934
1313
|
.candidate-change-heading { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 9px 12px; background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface)); }
|
|
935
1314
|
.candidate-change-heading > div:first-child { min-width: 0; }
|
|
@@ -941,7 +1320,7 @@ html,
|
|
|
941
1320
|
.diff-stat.additions { background: var(--success-soft); color: var(--success); }
|
|
942
1321
|
.diff-stat.deletions { background: var(--danger-soft); color: var(--danger); }
|
|
943
1322
|
.diff-notice { border-bottom: 1px solid var(--border); padding: 7px 12px; background: var(--warning-soft); color: var(--warning); font-size: 11px; }
|
|
944
|
-
.diff-viewer { overflow: auto; max-height: 390px; overscroll-behavior:
|
|
1323
|
+
.diff-viewer { overflow: auto; max-height: 390px; overscroll-behavior: auto; background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
|
|
945
1324
|
.diff-column-headings, .diff-line { display: grid; grid-template-columns: 42px 42px 22px minmax(0, 1fr); }
|
|
946
1325
|
.diff-column-headings { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border); background: var(--surface-raised); color: var(--text-tertiary); font-size: 10px; }
|
|
947
1326
|
.diff-column-headings span { min-width: 0; padding: 4px 7px; }
|
|
@@ -971,20 +1350,42 @@ html,
|
|
|
971
1350
|
.candidate-footer small { color: var(--text-tertiary); }
|
|
972
1351
|
.candidate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
|
|
973
1352
|
|
|
974
|
-
.empty-state { display: grid; place-items: center; min-height: 230px; border: 1px dashed var(--border
|
|
1353
|
+
.empty-state { display: grid; place-items: center; min-height: 230px; border: 1px dashed color-mix(in srgb, var(--panel-border) 76%, transparent); border-radius: var(--radius-panel); padding: 28px; background: color-mix(in srgb, var(--surface-pane) 70%, transparent); text-align: center; }
|
|
975
1354
|
.empty-state strong { font-size: 15px; }
|
|
976
1355
|
.empty-state p { max-width: 420px; margin: 7px 0 0; color: var(--text-tertiary); }
|
|
977
1356
|
.empty-state .button { margin-top: 16px; }
|
|
978
1357
|
|
|
979
1358
|
.loading { display: grid; place-items: center; min-height: 240px; color: var(--text-tertiary); }
|
|
980
|
-
.loading-skeleton { min-height:
|
|
1359
|
+
.loading-skeleton { min-height: 360px; padding-top: 2px; }
|
|
1360
|
+
.skeleton-heading { min-height: 52px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
|
|
1361
|
+
.skeleton-phase { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-top: 3px; color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
|
|
1362
|
+
.skeleton-phase::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); animation: loading-pulse 1.4s ease-in-out infinite; }
|
|
981
1363
|
.skeleton-line, .skeleton-block { position: relative; overflow: hidden; background: var(--surface-soft); }
|
|
982
1364
|
.skeleton-line::after, .skeleton-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-raised) 72%, transparent), transparent); transform: translateX(-100%); animation: skeleton-shimmer 1.4s ease-in-out infinite; }
|
|
983
1365
|
.skeleton-title { width: min(280px, 48%); height: 22px; border-radius: 7px; }
|
|
984
1366
|
.skeleton-copy { width: min(460px, 72%); height: 12px; margin-top: 10px; border-radius: 5px; }
|
|
985
1367
|
.skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
|
|
986
|
-
.skeleton-block { height: 150px; border-radius: var(--radius); }
|
|
1368
|
+
.skeleton-block { height: 150px; border-radius: var(--radius-panel); }
|
|
1369
|
+
.skeleton-workspace { min-height: 540px; display: grid; grid-template-columns: minmax(220px, 28%) minmax(0, 1fr); overflow: hidden; margin-top: 16px; border: 1px solid color-mix(in srgb, var(--panel-border) 78%, transparent); border-radius: var(--radius-shell); background: var(--surface-editor); box-shadow: var(--shadow-panel); }
|
|
1370
|
+
.skeleton-pane { min-width: 0; padding: 22px; }
|
|
1371
|
+
.skeleton-pane-tree { display: grid; align-content: start; gap: 14px; border-right: 1px solid var(--separator); background: var(--surface-pane); }
|
|
1372
|
+
.skeleton-tree-row { width: 88%; height: 13px; border-radius: 5px; }
|
|
1373
|
+
.skeleton-tree-row.is-1 { width: 68%; margin-left: 19px; }
|
|
1374
|
+
.skeleton-tree-row.is-2 { width: 76%; margin-left: 19px; }
|
|
1375
|
+
.skeleton-pane-paper { display: grid; align-content: start; gap: 15px; padding: clamp(42px, 6vw, 82px); }
|
|
1376
|
+
.skeleton-paper-title { width: min(460px, 66%); height: 31px; margin-bottom: 16px; border-radius: 8px; }
|
|
1377
|
+
.skeleton-paper-row { width: 94%; height: 12px; border-radius: 5px; }
|
|
1378
|
+
.skeleton-paper-row.is-1 { width: 82%; }
|
|
1379
|
+
.skeleton-paper-row.is-2 { width: 88%; }
|
|
1380
|
+
.skeleton-paper-row.is-3 { width: 58%; margin-bottom: 12px; }
|
|
1381
|
+
.skeleton-pane-list { display: grid; align-content: start; gap: 3px; padding: 18px; }
|
|
1382
|
+
.skeleton-list-row { min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid var(--separator); }
|
|
1383
|
+
.skeleton-list-row .skeleton-block { width: 30px; height: 34px; border-radius: 6px; }
|
|
1384
|
+
.skeleton-list-row .skeleton-line { width: 66%; height: 12px; border-radius: 5px; }
|
|
1385
|
+
.notes-selection-loading { overflow: hidden; }
|
|
1386
|
+
.notes-selection-skeleton { display: grid; align-content: start; gap: 15px; padding: clamp(34px, 5vw, 72px); }
|
|
987
1387
|
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
|
|
1388
|
+
@keyframes loading-pulse { 0%, 100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
|
|
988
1389
|
|
|
989
1390
|
.error-state { border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: var(--radius); padding: 18px; background: var(--danger-soft); color: var(--danger); }
|
|
990
1391
|
.error-state p { margin: 0 0 12px; }
|
|
@@ -995,7 +1396,7 @@ html,
|
|
|
995
1396
|
.token-row strong { display: block; }
|
|
996
1397
|
.token-row small { color: var(--text-tertiary); }
|
|
997
1398
|
.permissions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
|
|
998
|
-
.api-access-card { display: grid; gap: 14px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--
|
|
1399
|
+
.api-access-card { display: grid; gap: 14px; margin-bottom: 20px; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 18px; background: var(--material-panel); box-shadow: var(--shadow-soft); }
|
|
999
1400
|
.api-access-heading, .api-access-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
1000
1401
|
.api-access-heading strong { font-size: 15px; }
|
|
1001
1402
|
.api-access-heading p { margin: 4px 0 0; color: var(--text-tertiary); }
|
|
@@ -1005,17 +1406,23 @@ html,
|
|
|
1005
1406
|
.api-access-actions { align-items: center; border-top: 1px solid var(--border); padding-top: 13px; }
|
|
1006
1407
|
.api-access-actions small { color: var(--text-tertiary); }
|
|
1007
1408
|
|
|
1008
|
-
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(8 10
|
|
1409
|
+
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(8 8 10 / 24%); -webkit-backdrop-filter: blur(14px) saturate(96%); backdrop-filter: blur(14px) saturate(96%); animation: dialog-backdrop-enter var(--motion-base) ease both; }
|
|
1009
1410
|
.dialog {
|
|
1010
1411
|
width: min(100%, 640px);
|
|
1011
1412
|
max-height: min(88vh, 820px);
|
|
1012
1413
|
display: flex;
|
|
1013
1414
|
flex-direction: column;
|
|
1014
|
-
|
|
1415
|
+
overflow: hidden;
|
|
1416
|
+
border: 1px solid var(--glass-border);
|
|
1015
1417
|
border-radius: 18px;
|
|
1016
|
-
background: var(--dialog-surface);
|
|
1017
|
-
box-shadow:
|
|
1018
|
-
|
|
1418
|
+
background: color-mix(in srgb, var(--dialog-surface) 88%, transparent);
|
|
1419
|
+
box-shadow: var(--glass-shadow), var(--shadow-floating);
|
|
1420
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
1421
|
+
backdrop-filter: var(--glass-filter);
|
|
1422
|
+
animation: dialog-enter var(--motion-base) var(--ease-spring) both;
|
|
1423
|
+
}
|
|
1424
|
+
@keyframes dialog-backdrop-enter { from { opacity: 0; } }
|
|
1425
|
+
@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } }
|
|
1019
1426
|
.dialog.narrow { width: min(100%, 460px); }
|
|
1020
1427
|
.dialog-backdrop.sheet-backdrop {
|
|
1021
1428
|
place-items: stretch end;
|
|
@@ -1033,11 +1440,11 @@ html,
|
|
|
1033
1440
|
animation: sheet-enter .2s cubic-bezier(.2, .8, .2, 1);
|
|
1034
1441
|
}
|
|
1035
1442
|
@keyframes sheet-enter { from { opacity: .75; transform: translateX(18px); } }
|
|
1036
|
-
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--
|
|
1443
|
+
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--glass-separator); padding: 18px 20px; background: var(--glass-regular); box-shadow: inset 0 1px 0 var(--glass-rim-light); }
|
|
1037
1444
|
.dialog-header h2 { margin: 0; font-size: 17px; }
|
|
1038
1445
|
.dialog-header p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
|
|
1039
1446
|
.dialog-body { overflow: auto; padding: 20px; }
|
|
1040
|
-
.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--
|
|
1447
|
+
.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--glass-separator); padding: 13px 20px; background: var(--glass-regular); box-shadow: inset 0 1px 0 var(--glass-rim-light); }
|
|
1041
1448
|
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
|
|
1042
1449
|
.form-grid .span-2 { grid-column: 1 / -1; }
|
|
1043
1450
|
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
@@ -1075,12 +1482,234 @@ html,
|
|
|
1075
1482
|
.secret-value code { min-width: 0; flex: 1; overflow-wrap: anywhere; border-radius: 7px; padding: 8px; background: var(--surface); color: var(--text); }
|
|
1076
1483
|
|
|
1077
1484
|
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 8px; pointer-events: none; }
|
|
1078
|
-
.toast { max-width: 420px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 11px 12px 11px 14px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); animation: toast-in
|
|
1485
|
+
.toast { max-width: 420px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 11px 12px 11px 14px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-floating); animation: toast-in var(--motion-base) var(--ease-out); pointer-events: auto; }
|
|
1079
1486
|
.toast > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
|
|
1080
1487
|
.toast-close { flex: none; min-height: 28px; }
|
|
1081
1488
|
.toast.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
|
|
1082
1489
|
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }
|
|
1083
1490
|
|
|
1491
|
+
/*
|
|
1492
|
+
* Workspace effects
|
|
1493
|
+
*
|
|
1494
|
+
* This is the single visual contract for glass refraction, edge response,
|
|
1495
|
+
* glare and directory entrance. Business renderers only provide stable item
|
|
1496
|
+
* identities; the effects runtime owns observers and pointer tracking.
|
|
1497
|
+
*/
|
|
1498
|
+
.knowledge-glass-filter-bank {
|
|
1499
|
+
position: fixed;
|
|
1500
|
+
width: 0;
|
|
1501
|
+
height: 0;
|
|
1502
|
+
overflow: hidden;
|
|
1503
|
+
pointer-events: none;
|
|
1504
|
+
}
|
|
1505
|
+
|
|
1506
|
+
.knowledge-glass-surface {
|
|
1507
|
+
transform: translateZ(0);
|
|
1508
|
+
-webkit-backdrop-filter: blur(18px) saturate(1.18) contrast(1.025);
|
|
1509
|
+
backdrop-filter: blur(18px) saturate(1.18) contrast(1.025);
|
|
1510
|
+
}
|
|
1511
|
+
|
|
1512
|
+
.knowledge-glass-surface[data-knowledge-glass="svg"] {
|
|
1513
|
+
-webkit-backdrop-filter: var(--knowledge-glass-filter) saturate(1.18) contrast(1.025);
|
|
1514
|
+
backdrop-filter: var(--knowledge-glass-filter) saturate(1.18) contrast(1.025);
|
|
1515
|
+
}
|
|
1516
|
+
|
|
1517
|
+
.sidebar.knowledge-glass-surface {
|
|
1518
|
+
background: var(--liquid-glass-large);
|
|
1519
|
+
box-shadow:
|
|
1520
|
+
inset 1px 0 0 var(--glass-rim-light),
|
|
1521
|
+
inset -1px 0 0 var(--glass-rim-shadow),
|
|
1522
|
+
10px 0 36px rgb(0 0 0 / 4%);
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
.topbar.knowledge-glass-surface,
|
|
1526
|
+
.note-editor-toolbar.knowledge-glass-surface,
|
|
1527
|
+
.notes-document-toolbar.knowledge-glass-surface,
|
|
1528
|
+
.notes-content-header.knowledge-glass-surface {
|
|
1529
|
+
background: var(--liquid-glass-regular);
|
|
1530
|
+
box-shadow:
|
|
1531
|
+
inset 0 1px 0 var(--glass-rim-light),
|
|
1532
|
+
inset 0 -1px 0 var(--glass-rim-shadow),
|
|
1533
|
+
0 8px 24px rgb(0 0 0 / 3%);
|
|
1534
|
+
}
|
|
1535
|
+
|
|
1536
|
+
.note-tree-panel.knowledge-glass-surface,
|
|
1537
|
+
.notes-browser.knowledge-glass-surface {
|
|
1538
|
+
background: var(--liquid-glass-clear);
|
|
1539
|
+
box-shadow:
|
|
1540
|
+
inset 1px 0 0 var(--glass-rim-light),
|
|
1541
|
+
inset -1px 0 0 var(--glass-rim-shadow),
|
|
1542
|
+
10px 0 28px rgb(0 0 0 / 3.5%);
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
.dialog.knowledge-glass-surface {
|
|
1546
|
+
background: var(--liquid-glass-dialog);
|
|
1547
|
+
box-shadow:
|
|
1548
|
+
inset 0 1px 0 var(--glass-rim-light),
|
|
1549
|
+
inset 0 -1px 0 var(--glass-rim-shadow),
|
|
1550
|
+
0 2px 8px rgb(0 0 0 / 8%),
|
|
1551
|
+
0 28px 76px rgb(0 0 0 / 25%);
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1554
|
+
.knowledge-border-surface {
|
|
1555
|
+
--knowledge-border-angle: 0deg;
|
|
1556
|
+
--knowledge-border-proximity: 0;
|
|
1557
|
+
position: relative;
|
|
1558
|
+
isolation: isolate;
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
.knowledge-border-surface::before,
|
|
1562
|
+
.knowledge-border-surface::after {
|
|
1563
|
+
position: absolute;
|
|
1564
|
+
border-radius: inherit;
|
|
1565
|
+
pointer-events: none;
|
|
1566
|
+
content: "";
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
.knowledge-border-surface::before {
|
|
1570
|
+
z-index: 20;
|
|
1571
|
+
inset: 0;
|
|
1572
|
+
padding: 1px;
|
|
1573
|
+
background: conic-gradient(
|
|
1574
|
+
from var(--knowledge-border-angle),
|
|
1575
|
+
var(--interaction-glow-core) 0deg,
|
|
1576
|
+
var(--interaction-glow-soft) 10deg,
|
|
1577
|
+
transparent 27deg 333deg,
|
|
1578
|
+
var(--interaction-glow-soft) 350deg,
|
|
1579
|
+
var(--interaction-glow-core) 360deg
|
|
1580
|
+
);
|
|
1581
|
+
opacity: calc(var(--knowledge-border-proximity) * .96);
|
|
1582
|
+
transition: opacity 150ms ease-out;
|
|
1583
|
+
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
1584
|
+
-webkit-mask-composite: xor;
|
|
1585
|
+
mask-composite: exclude;
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
.knowledge-border-surface::after {
|
|
1589
|
+
z-index: 19;
|
|
1590
|
+
inset: -3px;
|
|
1591
|
+
padding: 3px;
|
|
1592
|
+
background: conic-gradient(
|
|
1593
|
+
from var(--knowledge-border-angle),
|
|
1594
|
+
var(--interaction-glow-haze) 0deg,
|
|
1595
|
+
transparent 22deg 338deg,
|
|
1596
|
+
var(--interaction-glow-haze) 360deg
|
|
1597
|
+
);
|
|
1598
|
+
filter: blur(3px);
|
|
1599
|
+
opacity: calc(var(--knowledge-border-proximity) * .42);
|
|
1600
|
+
transition: opacity 210ms ease-out;
|
|
1601
|
+
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
1602
|
+
-webkit-mask-composite: xor;
|
|
1603
|
+
mask-composite: exclude;
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
.knowledge-glare-surface {
|
|
1607
|
+
position: relative;
|
|
1608
|
+
isolation: isolate;
|
|
1609
|
+
overflow: hidden;
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
.knowledge-glare-surface::after {
|
|
1613
|
+
position: absolute;
|
|
1614
|
+
z-index: 5;
|
|
1615
|
+
top: -65%;
|
|
1616
|
+
bottom: -65%;
|
|
1617
|
+
left: -62%;
|
|
1618
|
+
width: 44%;
|
|
1619
|
+
border-radius: 45%;
|
|
1620
|
+
background: linear-gradient(
|
|
1621
|
+
90deg,
|
|
1622
|
+
transparent 0%,
|
|
1623
|
+
color-mix(in srgb, var(--interaction-glare-light) 24%, transparent) 32%,
|
|
1624
|
+
var(--interaction-glare-light) 48%,
|
|
1625
|
+
var(--interaction-glare-rim) 61%,
|
|
1626
|
+
transparent 78%
|
|
1627
|
+
);
|
|
1628
|
+
opacity: 0;
|
|
1629
|
+
transform: skewX(-18deg) translate3d(0, 0, 0);
|
|
1630
|
+
pointer-events: none;
|
|
1631
|
+
transition:
|
|
1632
|
+
opacity 150ms ease-out,
|
|
1633
|
+
transform 760ms cubic-bezier(.2, .72, .2, 1);
|
|
1634
|
+
content: "";
|
|
1635
|
+
}
|
|
1636
|
+
|
|
1637
|
+
.knowledge-glare-surface:is(:hover, :focus-visible, :focus-within):not(:disabled)::after {
|
|
1638
|
+
opacity: .92;
|
|
1639
|
+
transform: skewX(-18deg) translate3d(390%, 0, 0);
|
|
1640
|
+
}
|
|
1641
|
+
|
|
1642
|
+
.knowledge-list-reveal {
|
|
1643
|
+
opacity: 0;
|
|
1644
|
+
translate: 0 16px;
|
|
1645
|
+
scale: .97;
|
|
1646
|
+
transform-origin: center top;
|
|
1647
|
+
transition:
|
|
1648
|
+
opacity 280ms ease-out var(--knowledge-list-delay, 0ms),
|
|
1649
|
+
translate 360ms var(--ease-out) var(--knowledge-list-delay, 0ms),
|
|
1650
|
+
scale 360ms var(--ease-out) var(--knowledge-list-delay, 0ms);
|
|
1651
|
+
will-change: opacity, translate, scale;
|
|
1652
|
+
}
|
|
1653
|
+
|
|
1654
|
+
.knowledge-list-reveal.is-visible {
|
|
1655
|
+
opacity: 1;
|
|
1656
|
+
translate: 0 0;
|
|
1657
|
+
scale: 1;
|
|
1658
|
+
will-change: auto;
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
.base-grid .knowledge-list-reveal {
|
|
1662
|
+
translate: 0 20px;
|
|
1663
|
+
scale: .96;
|
|
1664
|
+
transition-duration: 320ms, 420ms, 420ms;
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1667
|
+
.base-grid .knowledge-list-reveal.is-visible {
|
|
1668
|
+
translate: 0 0;
|
|
1669
|
+
scale: 1;
|
|
1670
|
+
}
|
|
1671
|
+
|
|
1672
|
+
.base-card.is-archived.knowledge-list-reveal { opacity: 0; }
|
|
1673
|
+
.base-card.is-archived.knowledge-list-reveal.is-visible { opacity: .78; }
|
|
1674
|
+
|
|
1675
|
+
.knowledge-animated-list[data-scroll-top="true"][data-scroll-bottom="false"] {
|
|
1676
|
+
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
|
|
1677
|
+
mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
.knowledge-animated-list[data-scroll-top="false"][data-scroll-bottom="true"] {
|
|
1681
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 100%);
|
|
1682
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 100%);
|
|
1683
|
+
}
|
|
1684
|
+
|
|
1685
|
+
.knowledge-animated-list[data-scroll-top="false"][data-scroll-bottom="false"] {
|
|
1686
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
|
|
1687
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
|
|
1688
|
+
}
|
|
1689
|
+
|
|
1690
|
+
@media (hover: none), (pointer: coarse) {
|
|
1691
|
+
.knowledge-glare-surface::after,
|
|
1692
|
+
.knowledge-border-surface::before,
|
|
1693
|
+
.knowledge-border-surface::after { display: none; }
|
|
1694
|
+
}
|
|
1695
|
+
|
|
1696
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
1697
|
+
.sidebar, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .note-editor-toolbar, .dialog-backdrop {
|
|
1698
|
+
-webkit-backdrop-filter: none;
|
|
1699
|
+
backdrop-filter: none;
|
|
1700
|
+
}
|
|
1701
|
+
.sidebar, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .note-editor-toolbar { background: var(--surface); }
|
|
1702
|
+
.knowledge-glass-surface,
|
|
1703
|
+
.knowledge-glass-surface[data-knowledge-glass="svg"] {
|
|
1704
|
+
-webkit-backdrop-filter: none;
|
|
1705
|
+
backdrop-filter: none;
|
|
1706
|
+
}
|
|
1707
|
+
.dialog.knowledge-glass-surface { background: var(--dialog-surface); }
|
|
1708
|
+
.knowledge-border-surface::before,
|
|
1709
|
+
.knowledge-border-surface::after,
|
|
1710
|
+
.knowledge-glare-surface::after { display: none; }
|
|
1711
|
+
}
|
|
1712
|
+
|
|
1084
1713
|
@media (max-width: 980px) {
|
|
1085
1714
|
.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1086
1715
|
.dashboard-grid { grid-template-columns: 1fr; }
|
|
@@ -1089,6 +1718,7 @@ html,
|
|
|
1089
1718
|
.mount-manager-toolbar .tabs { width: 100%; }
|
|
1090
1719
|
.note-workspace { grid-template-columns: minmax(210px, 30%) minmax(0, 1fr); }
|
|
1091
1720
|
.note-paper { padding-inline: clamp(28px, 6cqi, 62px); }
|
|
1721
|
+
.notes-workspace { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
|
|
1092
1722
|
}
|
|
1093
1723
|
|
|
1094
1724
|
@media (max-width: 1180px) {
|
|
@@ -1104,17 +1734,26 @@ html,
|
|
|
1104
1734
|
|
|
1105
1735
|
@media (min-width: 761px) {
|
|
1106
1736
|
.app-shell[data-sidebar-hidden="true"] { grid-template-columns: 0 0 minmax(0, 1fr); }
|
|
1107
|
-
.app-shell[data-sidebar-hidden="true"] > .sidebar
|
|
1108
|
-
|
|
1737
|
+
.app-shell[data-sidebar-hidden="true"] > .sidebar {
|
|
1738
|
+
opacity: 0;
|
|
1739
|
+
transform: translateX(calc(-100% - var(--chrome-inset))) scale(.985);
|
|
1740
|
+
pointer-events: none;
|
|
1741
|
+
}
|
|
1742
|
+
.app-shell[data-sidebar-hidden="true"] > .app-sidebar-resizer {
|
|
1743
|
+
opacity: 0;
|
|
1744
|
+
transform: translateX(-8px);
|
|
1745
|
+
pointer-events: none;
|
|
1746
|
+
}
|
|
1109
1747
|
}
|
|
1110
1748
|
|
|
1111
1749
|
@media (max-width: 760px) {
|
|
1112
|
-
:root { --sidebar-width: 0px; }
|
|
1113
|
-
.app-shell { display: block; }
|
|
1750
|
+
:root { --sidebar-width: 0px; --chrome-inset: 8px; --topbar-inline-inset: 8px; }
|
|
1751
|
+
.app-shell { height: auto; min-height: 100dvh; display: block; overflow: visible; }
|
|
1752
|
+
.main { width: 100%; height: auto; min-height: 100dvh; overflow: visible; }
|
|
1114
1753
|
.app-sidebar-resizer { display: none; }
|
|
1115
1754
|
.pane-toggle-button[data-pane="main"] { display: none; }
|
|
1116
1755
|
.pane-toggle-button[data-pane="library"] { display: inline-grid; }
|
|
1117
|
-
.sidebar { position: fixed; z-index: 40; width: min(82vw, 270px); transform: translateX(-
|
|
1756
|
+
.sidebar { position: fixed; top: 8px; bottom: 8px; z-index: 40; width: min(82vw, 270px); height: auto; margin-left: 8px; border-radius: 18px; transform: translateX(-110%); box-shadow: var(--shadow); transition: transform .2s ease; }
|
|
1118
1757
|
.app-shell[data-menu-open="true"] .sidebar { transform: translateX(0); }
|
|
1119
1758
|
.app-shell[data-menu-open="true"]::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 35%); }
|
|
1120
1759
|
.mobile-menu { display: inline-grid; place-items: center; }
|
|
@@ -1123,6 +1762,9 @@ html,
|
|
|
1123
1762
|
.topbar h1 { font-size: 17px; }
|
|
1124
1763
|
.topbar p { display: none; }
|
|
1125
1764
|
.page { padding: 22px 16px 42px; }
|
|
1765
|
+
.app-shell[data-view="notes"] .page { height: auto; min-height: calc(100dvh - 72px); overflow: visible; padding: 0; }
|
|
1766
|
+
.app-shell[data-view="notes"] .view-stage { height: auto; min-height: inherit; overflow: visible; }
|
|
1767
|
+
.app-shell[data-view="notes"] .notes-page { height: auto; }
|
|
1126
1768
|
.workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
|
|
1127
1769
|
.workspace-switcher-leading { align-items: flex-start; }
|
|
1128
1770
|
.workspace-switcher p { text-align: left; }
|
|
@@ -1157,6 +1799,9 @@ html,
|
|
|
1157
1799
|
.document-finalized-banner p { grid-column: 1; }
|
|
1158
1800
|
.note-title-input { font-size: 26px; }
|
|
1159
1801
|
.note-inspector { align-items: stretch; flex-direction: column; gap: 5px; padding: 8px 12px; }
|
|
1802
|
+
.document-reference-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 7px 10px; }
|
|
1803
|
+
.document-reference-heading { display: none; }
|
|
1804
|
+
.document-reference-open > span:last-child { max-width: 130px; }
|
|
1160
1805
|
.note-inspector label { justify-content: space-between; }
|
|
1161
1806
|
.note-tags-field input { width: 100%; }
|
|
1162
1807
|
.note-format-hint { display: none; }
|
|
@@ -1178,9 +1823,11 @@ html,
|
|
|
1178
1823
|
.candidate-header, .candidate-footer { align-items: flex-start; flex-direction: column; }
|
|
1179
1824
|
.candidate-footer { gap: 9px; }
|
|
1180
1825
|
.candidate-actions { width: 100%; justify-content: flex-start; }
|
|
1826
|
+
.notes-workspace { height: auto; min-height: calc(100dvh - 72px); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(320px, 44dvh) minmax(430px, auto); }
|
|
1827
|
+
.notes-browser { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
1828
|
+
.notes-file-list { min-width: 560px; }
|
|
1181
1829
|
.button, .tab, .nav-button, .note-tree-base, .note-tree-document, .note-tree-new { min-height: 44px; }
|
|
1182
1830
|
.note-add-button, .pane-toggle-button, .mobile-menu { width: 44px; min-width: 44px; min-height: 44px; }
|
|
1183
|
-
.note-mode-switch button { min-height: 38px; }
|
|
1184
1831
|
.toast-region { right: 12px; bottom: 12px; left: 12px; }
|
|
1185
1832
|
.toast { max-width: none; }
|
|
1186
1833
|
}
|
|
@@ -1223,10 +1870,26 @@ html,
|
|
|
1223
1870
|
.diff-column-headings, .diff-line { grid-template-columns: 30px 30px 20px minmax(0, 1fr); }
|
|
1224
1871
|
.diff-column-headings span, .diff-line-number { padding-inline: 4px; }
|
|
1225
1872
|
.candidate-actions .button { flex: 1 1 auto; }
|
|
1873
|
+
.notes-heading { align-items: flex-start; }
|
|
1874
|
+
.notes-browser-actions { flex-wrap: wrap; }
|
|
1875
|
+
.notes-content-title { align-items: stretch; flex-direction: column; }
|
|
1876
|
+
.notes-content-actions .button { flex: 1 1 auto; }
|
|
1877
|
+
.notes-document-toolbar { align-items: center; flex-direction: row; overflow-x: auto; }
|
|
1878
|
+
.notes-toolbar-leading { flex: 1 0 240px; }
|
|
1879
|
+
.notes-file-info { overflow: hidden; }
|
|
1880
|
+
.notes-document-actions { width: auto; flex-wrap: nowrap; justify-content: flex-end; }
|
|
1881
|
+
.notes-content.is-document { --notes-document-inline: 16px; }
|
|
1882
|
+
.notes-content.is-document.has-line-numbers { --notes-document-inline: 30px; }
|
|
1883
|
+
.notes-document-title { padding-top: 24px; }
|
|
1884
|
+
.notes-content.is-document > .notes-live-editor, .notes-content.is-document > .notes-plain-editor { padding-bottom: 64px; }
|
|
1226
1885
|
}
|
|
1227
1886
|
|
|
1228
1887
|
@media (prefers-reduced-motion: reduce) {
|
|
1229
1888
|
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
|
|
1889
|
+
.knowledge-list-reveal { opacity: 1; translate: 0 0; scale: 1; }
|
|
1890
|
+
.knowledge-glare-surface::after,
|
|
1891
|
+
.knowledge-border-surface::before,
|
|
1892
|
+
.knowledge-border-surface::after { display: none; }
|
|
1230
1893
|
}
|
|
1231
1894
|
|
|
1232
1895
|
@media (forced-colors: active) {
|