@lemoncat7/dsh-knowledge 2.0.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/lib/client.js +45 -82
- package/lib/client.js.map +2 -2
- 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/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 +1 -0
- package/lib/web.js.map +1 -1
- package/package.json +1 -1
- package/web/app.js +54 -5
- package/web/index.html +1 -0
- package/web/styles.css +445 -134
- package/web/workspace-effects.js +16 -0
package/web/styles.css
CHANGED
|
@@ -2,86 +2,127 @@
|
|
|
2
2
|
color-scheme: light dark;
|
|
3
3
|
font-family: var(--font-ui);
|
|
4
4
|
font-size: 16px;
|
|
5
|
-
--font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
6
|
-
--font-reading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
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
7
|
--font-mono: "SFMono-Regular", "Cascadia Code", "Cascadia Mono", Menlo, Consolas, monospace;
|
|
8
|
-
--bg: #
|
|
9
|
-
--surface: #
|
|
8
|
+
--bg: #e9e9ed;
|
|
9
|
+
--surface: #f2f3f7;
|
|
10
10
|
--surface-raised: #ffffff;
|
|
11
|
-
--surface-soft: #
|
|
12
|
-
--surface-hover: #
|
|
13
|
-
--dialog-surface: #
|
|
14
|
-
--text: #
|
|
15
|
-
--text-secondary: #
|
|
16
|
-
--text-tertiary: #
|
|
17
|
-
--border:
|
|
18
|
-
--border-strong:
|
|
19
|
-
--accent: #
|
|
20
|
-
--accent-hover: #
|
|
21
|
-
--accent-soft: #
|
|
22
|
-
--on-accent: #
|
|
23
|
-
--success: #
|
|
24
|
-
--success-soft: #
|
|
25
|
-
--warning: #
|
|
26
|
-
--warning-soft: #
|
|
27
|
-
--danger: #
|
|
28
|
-
--danger-soft: #
|
|
29
|
-
--shadow: 0
|
|
11
|
+
--surface-soft: #eceef1;
|
|
12
|
+
--surface-hover: #e5e5e7;
|
|
13
|
+
--dialog-surface: #ffffff;
|
|
14
|
+
--text: #1d1d1f;
|
|
15
|
+
--text-secondary: #515154;
|
|
16
|
+
--text-tertiary: #6e6e73;
|
|
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;
|
|
22
|
+
--on-accent: #ffffff;
|
|
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
30
|
--radius: 14px;
|
|
31
31
|
--radius-control: 9px;
|
|
32
32
|
--radius-small: 7px;
|
|
33
|
-
--material-sidebar:
|
|
34
|
-
--material-toolbar:
|
|
35
|
-
--material-panel:
|
|
36
|
-
--material-control:
|
|
37
|
-
--material-control-hover:
|
|
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
38
|
--separator: color-mix(in srgb, var(--border) 76%, transparent);
|
|
39
39
|
--panel-border: color-mix(in srgb, var(--border-strong) 58%, var(--border));
|
|
40
40
|
--surface-highlight: color-mix(in srgb, var(--surface-raised) 74%, transparent);
|
|
41
41
|
--shadow-soft: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
|
|
42
|
-
--shadow-panel: 0 1px 2px
|
|
43
|
-
--surface-canvas:
|
|
44
|
-
--surface-pane:
|
|
45
|
-
--surface-editor:
|
|
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
46
|
--surface-overlay: color-mix(in srgb, var(--surface-raised) 92%, transparent);
|
|
47
|
-
--shadow-control: 0 1px 2px
|
|
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
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%);
|
|
49
67
|
--radius-shell: 18px;
|
|
50
68
|
--radius-panel: 12px;
|
|
51
69
|
--motion-fast: 120ms;
|
|
52
70
|
--motion-base: 190ms;
|
|
53
71
|
--motion-slow: 280ms;
|
|
54
|
-
--ease-out: cubic-bezier(.22,
|
|
55
|
-
--ease-spring: cubic-bezier(.2, .9, .25, 1.
|
|
72
|
+
--ease-out: cubic-bezier(.22, 1, .36, 1);
|
|
73
|
+
--ease-spring: cubic-bezier(.2, .9, .25, 1.04);
|
|
56
74
|
--sidebar-width: 236px;
|
|
75
|
+
--chrome-inset: 10px;
|
|
76
|
+
--topbar-inline-inset: 12px;
|
|
57
77
|
--scrollbar-thumb: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
|
|
58
78
|
--scrollbar-thumb-hover: color-mix(in srgb, var(--text-secondary) 58%, transparent);
|
|
59
79
|
}
|
|
60
80
|
|
|
61
81
|
@media (prefers-color-scheme: dark) {
|
|
62
82
|
:root {
|
|
63
|
-
--bg: #
|
|
64
|
-
--surface: #
|
|
65
|
-
--surface-raised: #
|
|
66
|
-
--surface-soft: #
|
|
67
|
-
--surface-hover: #
|
|
68
|
-
--dialog-surface: #
|
|
69
|
-
--text: #
|
|
70
|
-
--text-secondary: #
|
|
71
|
-
--text-tertiary: #
|
|
72
|
-
--border:
|
|
73
|
-
--border-strong:
|
|
74
|
-
--accent: #
|
|
75
|
-
--accent-hover: #
|
|
76
|
-
--accent-soft: #
|
|
77
|
-
--on-accent: #
|
|
78
|
-
--success: #
|
|
79
|
-
--success-soft: #
|
|
80
|
-
--warning: #
|
|
81
|
-
--warning-soft: #
|
|
82
|
-
--danger: #
|
|
83
|
-
--danger-soft: #
|
|
84
|
-
--shadow: 0
|
|
83
|
+
--bg: #1c1c1e;
|
|
84
|
+
--surface: #242426;
|
|
85
|
+
--surface-raised: #2c2c2e;
|
|
86
|
+
--surface-soft: #3a3a3c;
|
|
87
|
+
--surface-hover: #414145;
|
|
88
|
+
--dialog-surface: #2c2c2e;
|
|
89
|
+
--text: #f5f5f7;
|
|
90
|
+
--text-secondary: #d1d1d6;
|
|
91
|
+
--text-tertiary: #98989d;
|
|
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%);
|
|
85
126
|
}
|
|
86
127
|
}
|
|
87
128
|
|
|
@@ -92,7 +133,8 @@ html, body { min-height: 100%; }
|
|
|
92
133
|
body {
|
|
93
134
|
margin: 0;
|
|
94
135
|
background:
|
|
95
|
-
radial-gradient(
|
|
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%),
|
|
96
138
|
var(--surface-canvas);
|
|
97
139
|
color: var(--text);
|
|
98
140
|
font-size: 14px;
|
|
@@ -295,8 +337,8 @@ html,
|
|
|
295
337
|
padding: 9px 11px;
|
|
296
338
|
background-color: var(--material-control);
|
|
297
339
|
color: var(--text);
|
|
298
|
-
box-shadow:
|
|
299
|
-
transition: background-color
|
|
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);
|
|
300
342
|
}
|
|
301
343
|
|
|
302
344
|
.input, .select { height: 38px; min-height: 38px; font: inherit; line-height: 20px; }
|
|
@@ -317,7 +359,7 @@ html,
|
|
|
317
359
|
.textarea { min-height: 132px; resize: vertical; }
|
|
318
360
|
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
|
|
319
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); }
|
|
320
|
-
.input:focus, .select:focus, .textarea:focus { border-color:
|
|
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); }
|
|
321
363
|
|
|
322
364
|
.login-error { min-height: 21px; margin: 10px 0 0; color: var(--danger); font-size: 13px; }
|
|
323
365
|
|
|
@@ -334,8 +376,8 @@ html,
|
|
|
334
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);
|
|
335
377
|
}
|
|
336
378
|
|
|
337
|
-
.button:hover:not(:disabled) { background: var(--material-control-hover); border-color: var(--border-strong); transform: translateY(-1px); }
|
|
338
|
-
.button:active:not(:disabled) { transform: translateY(0) scale(.
|
|
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); }
|
|
339
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); }
|
|
340
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); }
|
|
341
383
|
.button.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
|
|
@@ -345,26 +387,46 @@ html,
|
|
|
345
387
|
.login-card .button { width: 100%; margin-top: 20px; }
|
|
346
388
|
.login-card .field + .field { margin-top: 16px; }
|
|
347
389
|
|
|
348
|
-
.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
|
+
}
|
|
349
402
|
|
|
350
403
|
.sidebar {
|
|
351
404
|
position: sticky;
|
|
352
|
-
top:
|
|
353
|
-
|
|
354
|
-
|
|
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);
|
|
355
410
|
align-self: start;
|
|
356
411
|
display: flex;
|
|
357
412
|
flex-direction: column;
|
|
413
|
+
margin-left: var(--chrome-inset);
|
|
358
414
|
padding: 18px 13px 13px;
|
|
359
|
-
border
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
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);
|
|
364
426
|
}
|
|
365
427
|
|
|
366
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); }
|
|
367
|
-
.brand-emblem { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid
|
|
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); }
|
|
368
430
|
.brand-emblem::before, .brand-emblem::after, .brand-emblem span { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 3px; }
|
|
369
431
|
.brand-emblem::before { width: 15px; height: 19px; transform: translate(-2px, -1px) rotate(-5deg); opacity: .42; }
|
|
370
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); }
|
|
@@ -373,7 +435,17 @@ html,
|
|
|
373
435
|
.brand strong { display: block; margin-top: 2px; font-size: 16px; line-height: 1.2; font-weight: 690; letter-spacing: -.025em; }
|
|
374
436
|
.brand-copy > span { display: block; color: var(--text-tertiary); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
|
375
437
|
|
|
376
|
-
.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
|
+
}
|
|
377
449
|
.nav-group { display: grid; gap: 2px; }
|
|
378
450
|
.nav-group + .nav-group { padding-top: 1px; }
|
|
379
451
|
.nav-group-label { padding: 0 9px 5px; color: var(--text-tertiary); font-size: 9px; font-weight: 680; letter-spacing: .07em; }
|
|
@@ -394,17 +466,17 @@ html,
|
|
|
394
466
|
font-weight: 520;
|
|
395
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);
|
|
396
468
|
}
|
|
397
|
-
.nav-button:hover { background:
|
|
398
|
-
.nav-button:active { transform:
|
|
399
|
-
.nav-button[aria-current="page"] { background:
|
|
400
|
-
.nav-button[aria-current="page"]::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 2px; border-radius: 2px; background: var(--
|
|
469
|
+
.nav-button:hover { background: var(--surface-hover); color: var(--text); }
|
|
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; }
|
|
401
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; }
|
|
402
|
-
.nav-button:hover .nav-index, .nav-button[aria-current="page"] .nav-index { color: var(--
|
|
474
|
+
.nav-button:hover .nav-index, .nav-button[aria-current="page"] .nav-index { color: var(--text); }
|
|
403
475
|
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
404
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; }
|
|
405
|
-
.nav-button[aria-current="page"] .nav-count { background: var(--
|
|
477
|
+
.nav-button[aria-current="page"] .nav-count { background: var(--surface-soft); color: var(--text-secondary); }
|
|
406
478
|
|
|
407
|
-
.sidebar-footer { margin-top: auto; display: grid; gap: 7px; border: 1px solid
|
|
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); }
|
|
408
480
|
.connection { display: flex; align-items: center; gap: 7px; min-height: 25px; color: var(--text-tertiary); font-size: 10px; }
|
|
409
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); }
|
|
410
482
|
.sidebar-footer .button { justify-self: start; }
|
|
@@ -422,6 +494,10 @@ html,
|
|
|
422
494
|
touch-action: none;
|
|
423
495
|
background: transparent;
|
|
424
496
|
outline-offset: -2px;
|
|
497
|
+
transition:
|
|
498
|
+
opacity 130ms ease-out,
|
|
499
|
+
transform 210ms var(--ease-out),
|
|
500
|
+
background-color var(--motion-fast) ease;
|
|
425
501
|
}
|
|
426
502
|
.app-sidebar-resizer::before {
|
|
427
503
|
content: "";
|
|
@@ -450,31 +526,34 @@ html,
|
|
|
450
526
|
}
|
|
451
527
|
.app-sidebar-resizer:hover span,
|
|
452
528
|
.app-sidebar-resizer:focus-visible span,
|
|
453
|
-
.app-sidebar-resizer.is-dragging span { opacity: 1; background: var(--
|
|
529
|
+
.app-sidebar-resizer.is-dragging span { opacity: 1; background: var(--text-secondary); }
|
|
454
530
|
.app-sidebar-resizer:hover,
|
|
455
531
|
.app-sidebar-resizer.is-dragging { background: color-mix(in srgb, var(--accent) 8%, transparent); }
|
|
456
532
|
.main { min-width: 0; width: 100%; height: 100vh; height: 100dvh; grid-column: 3; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
|
|
457
533
|
.topbar {
|
|
458
534
|
position: sticky;
|
|
459
|
-
top:
|
|
535
|
+
top: var(--chrome-inset);
|
|
460
536
|
z-index: 10;
|
|
461
537
|
min-height: 78px;
|
|
462
538
|
display: flex;
|
|
463
539
|
align-items: center;
|
|
464
540
|
justify-content: space-between;
|
|
465
541
|
gap: 18px;
|
|
466
|
-
|
|
542
|
+
margin: var(--chrome-inset) var(--topbar-inline-inset) 0;
|
|
543
|
+
border: 1px solid var(--glass-border);
|
|
544
|
+
border-radius: 18px;
|
|
467
545
|
padding: 14px clamp(18px, 3vw, 38px);
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
-
|
|
471
|
-
backdrop-filter:
|
|
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);
|
|
472
551
|
}
|
|
473
552
|
.topbar h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
|
|
474
553
|
.topbar p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 11px; text-wrap: pretty; }
|
|
475
554
|
.topbar-title { display: flex; align-items: center; gap: 12px; }
|
|
476
555
|
.topbar-heading { min-width: 0; }
|
|
477
|
-
.topbar-kicker { display: block; margin-bottom: 2px; color:
|
|
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; }
|
|
478
557
|
.route-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 7%, transparent); }
|
|
479
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); }
|
|
480
559
|
.mobile-menu { display: none; }
|
|
@@ -487,7 +566,8 @@ html,
|
|
|
487
566
|
border: 1px solid var(--border);
|
|
488
567
|
border-radius: 9px;
|
|
489
568
|
padding: 2px;
|
|
490
|
-
background:
|
|
569
|
+
background: var(--glass-regular);
|
|
570
|
+
box-shadow: inset 0 1px 0 var(--glass-rim-light);
|
|
491
571
|
}
|
|
492
572
|
.pane-toggle-button {
|
|
493
573
|
width: 30px;
|
|
@@ -505,9 +585,9 @@ html,
|
|
|
505
585
|
.pane-toggle-button[data-pane="library"] { display: none; }
|
|
506
586
|
.pane-toggle-button:hover { background: var(--surface-hover); color: var(--text); }
|
|
507
587
|
.pane-toggle-button[aria-pressed="true"] {
|
|
508
|
-
background: var(--
|
|
588
|
+
background: var(--material-control);
|
|
509
589
|
color: var(--text);
|
|
510
|
-
box-shadow:
|
|
590
|
+
box-shadow: var(--shadow-control);
|
|
511
591
|
}
|
|
512
592
|
.pane-icon {
|
|
513
593
|
position: relative;
|
|
@@ -566,7 +646,7 @@ html,
|
|
|
566
646
|
.app-shell[data-view="notes"] .page {
|
|
567
647
|
width: 100%;
|
|
568
648
|
max-width: none;
|
|
569
|
-
height: calc(100dvh -
|
|
649
|
+
height: calc(100dvh - 74px);
|
|
570
650
|
margin: 0;
|
|
571
651
|
overflow: hidden;
|
|
572
652
|
padding: 0;
|
|
@@ -578,16 +658,16 @@ html,
|
|
|
578
658
|
.section-heading p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
|
|
579
659
|
|
|
580
660
|
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
|
|
581
|
-
.metric { position: relative; min-width: 0; overflow: hidden; border: 1px solid
|
|
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); }
|
|
582
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; }
|
|
583
|
-
.metric:hover { border-color:
|
|
663
|
+
.metric:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
|
|
584
664
|
.metric:hover::after { opacity: 1; }
|
|
585
665
|
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
|
|
586
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; }
|
|
587
667
|
.metric-detail { margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
|
|
588
668
|
|
|
589
669
|
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); gap: 18px; }
|
|
590
|
-
.panel { min-width: 0; overflow: hidden; border: 1px solid
|
|
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); }
|
|
591
671
|
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--separator); padding: 15px 17px; }
|
|
592
672
|
.panel-header h2, .panel-header h3 { margin: 0; font-size: 14px; }
|
|
593
673
|
.panel-body { padding: 8px; }
|
|
@@ -642,10 +722,10 @@ html,
|
|
|
642
722
|
display: grid;
|
|
643
723
|
grid-template-columns: minmax(210px, .85fr) minmax(240px, 1.25fr) minmax(170px, .7fr) 244px;
|
|
644
724
|
overflow: hidden;
|
|
645
|
-
border: 1px solid var(--
|
|
725
|
+
border: 1px solid var(--glass-border);
|
|
646
726
|
border-radius: var(--radius);
|
|
647
727
|
background: var(--material-panel);
|
|
648
|
-
box-shadow: var(--shadow
|
|
728
|
+
box-shadow: var(--glass-shadow);
|
|
649
729
|
}
|
|
650
730
|
.base-card {
|
|
651
731
|
min-width: 0;
|
|
@@ -663,13 +743,13 @@ html,
|
|
|
663
743
|
contain-intrinsic-size: auto 94px;
|
|
664
744
|
}
|
|
665
745
|
.base-card:last-child { border-bottom: 0; }
|
|
666
|
-
.base-card:hover { background:
|
|
746
|
+
.base-card:hover { background: var(--surface-hover); }
|
|
667
747
|
.base-card.is-archived { opacity: .78; }
|
|
668
748
|
.base-card-header { min-width: 0; grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
669
749
|
.base-card-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
|
|
670
750
|
.base-card-identity > div { min-width: 0; }
|
|
671
751
|
.base-card-header > .badge { flex: none; }
|
|
672
|
-
.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; }
|
|
673
753
|
.base-card h3 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
|
|
674
754
|
.base-card small { display: block; overflow: hidden; margin-top: 3px; color: var(--text-tertiary); text-overflow: ellipsis; white-space: nowrap; }
|
|
675
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; }
|
|
@@ -729,10 +809,10 @@ html,
|
|
|
729
809
|
display: grid;
|
|
730
810
|
grid-template-columns: clamp(240px, 24vw, 320px) minmax(0, 1fr);
|
|
731
811
|
overflow: hidden;
|
|
732
|
-
border: 1px solid
|
|
733
|
-
border-radius:
|
|
812
|
+
border: 1px solid var(--glass-border);
|
|
813
|
+
border-radius: 15px;
|
|
734
814
|
background: var(--surface-editor);
|
|
735
|
-
box-shadow: var(--shadow
|
|
815
|
+
box-shadow: var(--glass-shadow);
|
|
736
816
|
}
|
|
737
817
|
.note-tree-panel {
|
|
738
818
|
min-width: 0;
|
|
@@ -741,10 +821,11 @@ html,
|
|
|
741
821
|
display: grid;
|
|
742
822
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
743
823
|
overflow: hidden;
|
|
744
|
-
border-right: 1px solid var(--separator);
|
|
745
|
-
background:
|
|
746
|
-
-
|
|
747
|
-
backdrop-filter:
|
|
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);
|
|
748
829
|
}
|
|
749
830
|
.note-tree-scrim { display: none; }
|
|
750
831
|
.note-tree-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 8px 16px; }
|
|
@@ -753,8 +834,8 @@ html,
|
|
|
753
834
|
.note-add-button { width: 30px; min-width: 30px; min-height: 30px; padding: 0; font-size: 18px; font-weight: 400; }
|
|
754
835
|
.note-tree-search-wrap { position: relative; padding: 5px 10px 9px; }
|
|
755
836
|
.note-tree-search-wrap .search-symbol { left: 20px; }
|
|
756
|
-
.note-tree-search { width: 100%; height: 34px; border: 1px solid var(--
|
|
757
|
-
.note-tree-search:focus { border-color:
|
|
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); }
|
|
758
839
|
.note-tree {
|
|
759
840
|
min-height: 0;
|
|
760
841
|
overflow-x: hidden;
|
|
@@ -765,7 +846,7 @@ html,
|
|
|
765
846
|
.note-tree-group + .note-tree-group { margin-top: 3px; }
|
|
766
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; }
|
|
767
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); }
|
|
768
|
-
.note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background:
|
|
849
|
+
.note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: var(--surface-hover); color: var(--text); transform: translateX(2px); }
|
|
769
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; }
|
|
770
851
|
.note-tree-group[data-expanded="true"] .tree-disclosure { transform: rotate(45deg) translate(-1px, -1px); }
|
|
771
852
|
.tree-folder-icon {
|
|
@@ -779,12 +860,12 @@ html,
|
|
|
779
860
|
transition: color .15s ease, opacity .15s ease;
|
|
780
861
|
}
|
|
781
862
|
.note-tree-base:hover .tree-folder-icon { opacity: .7; }
|
|
782
|
-
.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; }
|
|
783
864
|
.tree-base-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
784
865
|
.tree-count { min-width: 20px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
|
|
785
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); }
|
|
786
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; }
|
|
787
|
-
.note-tree-document[aria-current="page"] { background:
|
|
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); }
|
|
788
869
|
.tree-document-icon {
|
|
789
870
|
width: 14px;
|
|
790
871
|
height: 17px;
|
|
@@ -796,7 +877,7 @@ html,
|
|
|
796
877
|
transition: color .15s ease, opacity .15s ease;
|
|
797
878
|
}
|
|
798
879
|
.note-tree-document:hover .tree-document-icon { opacity: .72; }
|
|
799
|
-
.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; }
|
|
800
881
|
.tree-document-copy { min-width: 0; flex: 1; }
|
|
801
882
|
.note-tree-document > .badge { min-height: 17px; padding: 1px 5px; font-size: 8px; }
|
|
802
883
|
.tree-document-copy strong, .tree-document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
@@ -822,7 +903,7 @@ html,
|
|
|
822
903
|
overflow: hidden;
|
|
823
904
|
background: var(--surface-editor);
|
|
824
905
|
}
|
|
825
|
-
.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(--separator); background:
|
|
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); }
|
|
826
907
|
.notes-browser-header { min-height: 68px; display: grid; gap: 8px; padding: 10px 10px 7px; }
|
|
827
908
|
.notes-browser-header > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
|
828
909
|
.notes-browser-header h2 { margin: 0; font-size: 13px; font-weight: 650; }
|
|
@@ -836,8 +917,8 @@ html,
|
|
|
836
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); }
|
|
837
918
|
.notes-tree-node { min-width: 0; max-width: 100%; }
|
|
838
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); }
|
|
839
|
-
.notes-tree-item:hover { background:
|
|
840
|
-
.notes-tree-item[data-selected="true"] { background:
|
|
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); }
|
|
841
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; }
|
|
842
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; }
|
|
843
924
|
.notes-tree-item[data-drop-target="true"] .notes-row-actions { opacity: 0; pointer-events: none; }
|
|
@@ -846,7 +927,7 @@ html,
|
|
|
846
927
|
.notes-tree-row:hover, .notes-tree-row[aria-selected="true"] { color: var(--text); }
|
|
847
928
|
.notes-tree-chevron, .notes-tree-spacer { position: relative; width: 14px; height: 20px; flex: none; color: var(--text-tertiary); }
|
|
848
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; }
|
|
849
|
-
.notes-tree-row[aria-expanded="true"] .notes-tree-chevron::before { transform: translateY(-65%) rotate(45deg); color: var(--
|
|
930
|
+
.notes-tree-row[aria-expanded="true"] .notes-tree-chevron::before { transform: translateY(-65%) rotate(45deg); color: var(--text); }
|
|
850
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; }
|
|
851
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; }
|
|
852
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); }
|
|
@@ -1030,9 +1111,10 @@ html,
|
|
|
1030
1111
|
gap: 14px;
|
|
1031
1112
|
border-bottom: 1px solid var(--separator);
|
|
1032
1113
|
padding: 5px 14px 5px 20px;
|
|
1033
|
-
background: var(--
|
|
1034
|
-
-
|
|
1035
|
-
backdrop-filter:
|
|
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);
|
|
1036
1118
|
}
|
|
1037
1119
|
.note-editor-loading { grid-template-rows: auto minmax(0, 1fr); }
|
|
1038
1120
|
.editor-load-label { color: var(--text-tertiary); font-size: 10px; }
|
|
@@ -1238,7 +1320,7 @@ html,
|
|
|
1238
1320
|
.diff-stat.additions { background: var(--success-soft); color: var(--success); }
|
|
1239
1321
|
.diff-stat.deletions { background: var(--danger-soft); color: var(--danger); }
|
|
1240
1322
|
.diff-notice { border-bottom: 1px solid var(--border); padding: 7px 12px; background: var(--warning-soft); color: var(--warning); font-size: 11px; }
|
|
1241
|
-
.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; }
|
|
1242
1324
|
.diff-column-headings, .diff-line { display: grid; grid-template-columns: 42px 42px 22px minmax(0, 1fr); }
|
|
1243
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; }
|
|
1244
1326
|
.diff-column-headings span { min-width: 0; padding: 4px 7px; }
|
|
@@ -1324,16 +1406,19 @@ html,
|
|
|
1324
1406
|
.api-access-actions { align-items: center; border-top: 1px solid var(--border); padding-top: 13px; }
|
|
1325
1407
|
.api-access-actions small { color: var(--text-tertiary); }
|
|
1326
1408
|
|
|
1327
|
-
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(8
|
|
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; }
|
|
1328
1410
|
.dialog {
|
|
1329
1411
|
width: min(100%, 640px);
|
|
1330
1412
|
max-height: min(88vh, 820px);
|
|
1331
1413
|
display: flex;
|
|
1332
1414
|
flex-direction: column;
|
|
1333
|
-
|
|
1334
|
-
border
|
|
1335
|
-
|
|
1336
|
-
|
|
1415
|
+
overflow: hidden;
|
|
1416
|
+
border: 1px solid var(--glass-border);
|
|
1417
|
+
border-radius: 18px;
|
|
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);
|
|
1337
1422
|
animation: dialog-enter var(--motion-base) var(--ease-spring) both;
|
|
1338
1423
|
}
|
|
1339
1424
|
@keyframes dialog-backdrop-enter { from { opacity: 0; } }
|
|
@@ -1355,11 +1440,11 @@ html,
|
|
|
1355
1440
|
animation: sheet-enter .2s cubic-bezier(.2, .8, .2, 1);
|
|
1356
1441
|
}
|
|
1357
1442
|
@keyframes sheet-enter { from { opacity: .75; transform: translateX(18px); } }
|
|
1358
|
-
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--separator); padding: 18px 20px; }
|
|
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); }
|
|
1359
1444
|
.dialog-header h2 { margin: 0; font-size: 17px; }
|
|
1360
1445
|
.dialog-header p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
|
|
1361
1446
|
.dialog-body { overflow: auto; padding: 20px; }
|
|
1362
|
-
.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--separator); padding: 13px 20px; background:
|
|
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); }
|
|
1363
1448
|
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
|
|
1364
1449
|
.form-grid .span-2 { grid-column: 1 / -1; }
|
|
1365
1450
|
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
@@ -1403,12 +1488,226 @@ html,
|
|
|
1403
1488
|
.toast.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
|
|
1404
1489
|
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }
|
|
1405
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
|
+
|
|
1406
1696
|
@media (prefers-reduced-transparency: reduce) {
|
|
1407
1697
|
.sidebar, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .note-editor-toolbar, .dialog-backdrop {
|
|
1408
1698
|
-webkit-backdrop-filter: none;
|
|
1409
1699
|
backdrop-filter: none;
|
|
1410
1700
|
}
|
|
1411
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; }
|
|
1412
1711
|
}
|
|
1413
1712
|
|
|
1414
1713
|
@media (max-width: 980px) {
|
|
@@ -1435,18 +1734,26 @@ html,
|
|
|
1435
1734
|
|
|
1436
1735
|
@media (min-width: 761px) {
|
|
1437
1736
|
.app-shell[data-sidebar-hidden="true"] { grid-template-columns: 0 0 minmax(0, 1fr); }
|
|
1438
|
-
.app-shell[data-sidebar-hidden="true"] > .sidebar
|
|
1439
|
-
|
|
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
|
+
}
|
|
1440
1747
|
}
|
|
1441
1748
|
|
|
1442
1749
|
@media (max-width: 760px) {
|
|
1443
|
-
:root { --sidebar-width: 0px; }
|
|
1750
|
+
:root { --sidebar-width: 0px; --chrome-inset: 8px; --topbar-inline-inset: 8px; }
|
|
1444
1751
|
.app-shell { height: auto; min-height: 100dvh; display: block; overflow: visible; }
|
|
1445
1752
|
.main { width: 100%; height: auto; min-height: 100dvh; overflow: visible; }
|
|
1446
1753
|
.app-sidebar-resizer { display: none; }
|
|
1447
1754
|
.pane-toggle-button[data-pane="main"] { display: none; }
|
|
1448
1755
|
.pane-toggle-button[data-pane="library"] { display: inline-grid; }
|
|
1449
|
-
.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; }
|
|
1450
1757
|
.app-shell[data-menu-open="true"] .sidebar { transform: translateX(0); }
|
|
1451
1758
|
.app-shell[data-menu-open="true"]::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 35%); }
|
|
1452
1759
|
.mobile-menu { display: inline-grid; place-items: center; }
|
|
@@ -1455,7 +1762,7 @@ html,
|
|
|
1455
1762
|
.topbar h1 { font-size: 17px; }
|
|
1456
1763
|
.topbar p { display: none; }
|
|
1457
1764
|
.page { padding: 22px 16px 42px; }
|
|
1458
|
-
.app-shell[data-view="notes"] .page { height: auto; min-height: calc(100dvh -
|
|
1765
|
+
.app-shell[data-view="notes"] .page { height: auto; min-height: calc(100dvh - 72px); overflow: visible; padding: 0; }
|
|
1459
1766
|
.app-shell[data-view="notes"] .view-stage { height: auto; min-height: inherit; overflow: visible; }
|
|
1460
1767
|
.app-shell[data-view="notes"] .notes-page { height: auto; }
|
|
1461
1768
|
.workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
|
|
@@ -1516,7 +1823,7 @@ html,
|
|
|
1516
1823
|
.candidate-header, .candidate-footer { align-items: flex-start; flex-direction: column; }
|
|
1517
1824
|
.candidate-footer { gap: 9px; }
|
|
1518
1825
|
.candidate-actions { width: 100%; justify-content: flex-start; }
|
|
1519
|
-
.notes-workspace { height: auto; min-height: calc(100dvh -
|
|
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); }
|
|
1520
1827
|
.notes-browser { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
1521
1828
|
.notes-file-list { min-width: 560px; }
|
|
1522
1829
|
.button, .tab, .nav-button, .note-tree-base, .note-tree-document, .note-tree-new { min-height: 44px; }
|
|
@@ -1579,6 +1886,10 @@ html,
|
|
|
1579
1886
|
|
|
1580
1887
|
@media (prefers-reduced-motion: reduce) {
|
|
1581
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; }
|
|
1582
1893
|
}
|
|
1583
1894
|
|
|
1584
1895
|
@media (forced-colors: active) {
|