@lemoncat7/dsh-knowledge 2.0.0 → 2.1.1
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 +47 -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 +358 -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 +65 -10
- package/web/index.html +1 -0
- package/web/styles.css +509 -137
- package/web/workspace-effects.js +16 -0
package/web/styles.css
CHANGED
|
@@ -2,89 +2,144 @@
|
|
|
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: color-mix(in srgb, var(--surface)
|
|
34
|
-
--material-toolbar: color-mix(in srgb, var(--surface)
|
|
35
|
-
--material-panel: color-mix(in srgb, var(--surface-raised)
|
|
36
|
-
--material-control: color-mix(in srgb, var(--surface-
|
|
37
|
-
--material-control-hover: color-mix(in srgb, var(--surface-
|
|
33
|
+
--material-sidebar: color-mix(in srgb, var(--surface) 76%, transparent);
|
|
34
|
+
--material-toolbar: color-mix(in srgb, var(--surface) 78%, transparent);
|
|
35
|
+
--material-panel: color-mix(in srgb, var(--surface-raised) 82%, transparent);
|
|
36
|
+
--material-control: color-mix(in srgb, var(--surface-raised) 76%, transparent);
|
|
37
|
+
--material-control-hover: color-mix(in srgb, var(--surface-raised) 94%, transparent);
|
|
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: color-mix(in srgb, var(--surface)
|
|
45
|
-
--surface-editor: color-mix(in srgb, var(--surface-raised)
|
|
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: color-mix(in srgb, var(--surface) 74%, transparent);
|
|
45
|
+
--surface-editor: color-mix(in srgb, var(--surface-raised) 88%, var(--bg));
|
|
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: color-mix(in srgb, var(--surface-raised) 20%, transparent);
|
|
50
|
+
--glass-regular: color-mix(in srgb, var(--surface-raised) 36%, transparent);
|
|
51
|
+
--glass-thick: color-mix(in srgb, var(--surface-raised) 62%, transparent);
|
|
52
|
+
--glass-border: color-mix(in srgb, var(--border) 58%, transparent);
|
|
53
|
+
--glass-separator: var(--border);
|
|
54
|
+
--glass-rim-light: color-mix(in srgb, var(--surface-raised) 58%, transparent);
|
|
55
|
+
--glass-rim-shadow: color-mix(in srgb, var(--text) 12%, transparent);
|
|
56
|
+
--glass-filter: saturate(1.18) contrast(1.025) blur(28px);
|
|
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: color-mix(in srgb, var(--surface) 68%, transparent);
|
|
59
|
+
--liquid-glass-regular: color-mix(in srgb, var(--surface-raised) 52%, transparent);
|
|
60
|
+
--liquid-glass-clear: color-mix(in srgb, var(--surface-raised) 36%, transparent);
|
|
61
|
+
--liquid-glass-dialog: color-mix(in srgb, var(--surface-raised) 76%, transparent);
|
|
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
|
+
--card-highlight: rgb(255 255 255 / 58%);
|
|
68
|
+
--card-fill: color-mix(in srgb, var(--surface-raised) 48%, transparent);
|
|
49
69
|
--radius-shell: 18px;
|
|
50
70
|
--radius-panel: 12px;
|
|
51
71
|
--motion-fast: 120ms;
|
|
52
72
|
--motion-base: 190ms;
|
|
53
73
|
--motion-slow: 280ms;
|
|
54
|
-
--ease-out: cubic-bezier(.22,
|
|
55
|
-
--ease-spring: cubic-bezier(.2, .9, .25, 1.
|
|
74
|
+
--ease-out: cubic-bezier(.22, 1, .36, 1);
|
|
75
|
+
--ease-spring: cubic-bezier(.2, .9, .25, 1.04);
|
|
56
76
|
--sidebar-width: 236px;
|
|
77
|
+
--chrome-inset: 10px;
|
|
78
|
+
--topbar-inline-inset: 12px;
|
|
57
79
|
--scrollbar-thumb: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
|
|
58
80
|
--scrollbar-thumb-hover: color-mix(in srgb, var(--text-secondary) 58%, transparent);
|
|
59
81
|
}
|
|
60
82
|
|
|
61
83
|
@media (prefers-color-scheme: dark) {
|
|
62
|
-
: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
|
|
84
|
+
:root:not([data-color-scheme]) {
|
|
85
|
+
--bg: transparent;
|
|
86
|
+
--surface: rgb(8 10 12 / 20%);
|
|
87
|
+
--surface-raised: rgb(10 12 15 / 44%);
|
|
88
|
+
--surface-soft: rgb(255 255 255 / 6%);
|
|
89
|
+
--surface-hover: rgb(255 255 255 / 7.5%);
|
|
90
|
+
--dialog-surface: rgb(10 12 15 / 72%);
|
|
91
|
+
--text: #f5f5f7;
|
|
92
|
+
--text-secondary: #d1d1d6;
|
|
93
|
+
--text-tertiary: #98989d;
|
|
94
|
+
--border: rgb(255 255 255 / 10%);
|
|
95
|
+
--border-strong: rgb(255 255 255 / 18%);
|
|
96
|
+
--accent: #e5e5ea;
|
|
97
|
+
--accent-hover: #ffffff;
|
|
98
|
+
--accent-soft: rgb(255 255 255 / 9%);
|
|
99
|
+
--on-accent: #1d1d1f;
|
|
100
|
+
--success: #30d158;
|
|
101
|
+
--success-soft: rgb(48 209 88 / 13%);
|
|
102
|
+
--warning: #ff9f0a;
|
|
103
|
+
--warning-soft: rgb(255 159 10 / 13%);
|
|
104
|
+
--danger: #ff453a;
|
|
105
|
+
--danger-soft: rgb(255 69 58 / 14%);
|
|
106
|
+
--shadow: 0 28px 72px rgb(0 0 0 / 48%);
|
|
107
|
+
--surface-highlight: rgb(255 255 255 / 11%);
|
|
108
|
+
--shadow-soft: 0 1px 2px rgb(0 0 0 / 28%);
|
|
109
|
+
--shadow-panel: 0 2px 7px rgb(0 0 0 / 20%), 0 14px 36px rgb(0 0 0 / 28%);
|
|
110
|
+
--shadow-control: 0 1px 2px rgb(0 0 0 / 28%), 0 5px 16px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 11%);
|
|
111
|
+
--shadow-floating: 0 24px 72px rgb(0 0 0 / 52%), 0 2px 8px rgb(0 0 0 / 28%);
|
|
112
|
+
--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%);
|
|
113
|
+
--interaction-glow-core: rgb(244 244 247 / 78%);
|
|
114
|
+
--interaction-glow-soft: rgb(197 199 205 / 34%);
|
|
115
|
+
--interaction-glow-haze: rgb(255 255 255 / 42%);
|
|
116
|
+
--interaction-glare-light: rgb(255 255 255 / 34%);
|
|
117
|
+
--interaction-glare-rim: rgb(255 255 255 / 10%);
|
|
118
|
+
--glass-rim-light: rgb(255 255 255 / 18%);
|
|
119
|
+
--glass-rim-shadow: rgb(0 0 0 / 30%);
|
|
120
|
+
--card-highlight: rgb(255 255 255 / 11%);
|
|
121
|
+
--card-fill: rgb(7 9 11 / 22%);
|
|
85
122
|
}
|
|
86
123
|
}
|
|
87
124
|
|
|
125
|
+
:root[data-color-scheme="dark"] {
|
|
126
|
+
--glass-rim-light: rgb(255 255 255 / 18%);
|
|
127
|
+
--glass-rim-shadow: rgb(0 0 0 / 30%);
|
|
128
|
+
--surface-highlight: rgb(255 255 255 / 11%);
|
|
129
|
+
--shadow-soft: 0 1px 2px rgb(0 0 0 / 28%);
|
|
130
|
+
--shadow-panel: 0 2px 7px rgb(0 0 0 / 20%), 0 14px 36px rgb(0 0 0 / 28%);
|
|
131
|
+
--shadow-control: 0 1px 2px rgb(0 0 0 / 28%), 0 5px 16px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 11%);
|
|
132
|
+
--shadow-floating: 0 24px 72px rgb(0 0 0 / 52%), 0 2px 8px rgb(0 0 0 / 28%);
|
|
133
|
+
--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%);
|
|
134
|
+
--interaction-glow-core: rgb(244 244 247 / 78%);
|
|
135
|
+
--interaction-glow-soft: rgb(197 199 205 / 34%);
|
|
136
|
+
--interaction-glow-haze: rgb(255 255 255 / 42%);
|
|
137
|
+
--interaction-glare-light: rgb(255 255 255 / 34%);
|
|
138
|
+
--interaction-glare-rim: rgb(255 255 255 / 10%);
|
|
139
|
+
--card-highlight: rgb(255 255 255 / 11%);
|
|
140
|
+
--card-fill: rgb(7 9 11 / 22%);
|
|
141
|
+
}
|
|
142
|
+
|
|
88
143
|
* { box-sizing: border-box; }
|
|
89
144
|
|
|
90
145
|
html, body { min-height: 100%; }
|
|
@@ -92,7 +147,8 @@ html, body { min-height: 100%; }
|
|
|
92
147
|
body {
|
|
93
148
|
margin: 0;
|
|
94
149
|
background:
|
|
95
|
-
radial-gradient(
|
|
150
|
+
radial-gradient(ellipse 46% 72% at -8% 28%, color-mix(in srgb, var(--surface-raised) 88%, transparent), transparent 74%),
|
|
151
|
+
radial-gradient(ellipse 58% 42% at 84% -12%, color-mix(in srgb, var(--text-tertiary) 9%, transparent), transparent 72%),
|
|
96
152
|
var(--surface-canvas);
|
|
97
153
|
color: var(--text);
|
|
98
154
|
font-size: 14px;
|
|
@@ -101,6 +157,9 @@ body {
|
|
|
101
157
|
-webkit-font-smoothing: antialiased;
|
|
102
158
|
}
|
|
103
159
|
|
|
160
|
+
/* The embedded console borrows the host canvas; app-shell stays layout-only. */
|
|
161
|
+
:root[data-dsh-host-theme="true"] body { background: transparent; }
|
|
162
|
+
|
|
104
163
|
button, input, select, textarea { font: inherit; }
|
|
105
164
|
|
|
106
165
|
button {
|
|
@@ -295,8 +354,8 @@ html,
|
|
|
295
354
|
padding: 9px 11px;
|
|
296
355
|
background-color: var(--material-control);
|
|
297
356
|
color: var(--text);
|
|
298
|
-
box-shadow:
|
|
299
|
-
transition: background-color
|
|
357
|
+
box-shadow: var(--shadow-control);
|
|
358
|
+
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
359
|
}
|
|
301
360
|
|
|
302
361
|
.input, .select { height: 38px; min-height: 38px; font: inherit; line-height: 20px; }
|
|
@@ -317,7 +376,7 @@ html,
|
|
|
317
376
|
.textarea { min-height: 132px; resize: vertical; }
|
|
318
377
|
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
|
|
319
378
|
.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:
|
|
379
|
+
.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
380
|
|
|
322
381
|
.login-error { min-height: 21px; margin: 10px 0 0; color: var(--danger); font-size: 13px; }
|
|
323
382
|
|
|
@@ -334,8 +393,8 @@ html,
|
|
|
334
393
|
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
394
|
}
|
|
336
395
|
|
|
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(.
|
|
396
|
+
.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); }
|
|
397
|
+
.button:active:not(:disabled) { box-shadow: var(--shadow-control); transform: translateY(0) scale(.97); }
|
|
339
398
|
.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
399
|
.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
400
|
.button.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
|
|
@@ -345,26 +404,46 @@ html,
|
|
|
345
404
|
.login-card .button { width: 100%; margin-top: 20px; }
|
|
346
405
|
.login-card .field + .field { margin-top: 16px; }
|
|
347
406
|
|
|
348
|
-
.app-shell {
|
|
407
|
+
.app-shell {
|
|
408
|
+
width: 100%;
|
|
409
|
+
height: 100vh;
|
|
410
|
+
height: 100dvh;
|
|
411
|
+
min-height: 0;
|
|
412
|
+
display: grid;
|
|
413
|
+
grid-template-columns: calc(var(--sidebar-width) + var(--chrome-inset)) 6px minmax(0, 1fr);
|
|
414
|
+
align-items: start;
|
|
415
|
+
overflow: hidden;
|
|
416
|
+
background: transparent;
|
|
417
|
+
transition: grid-template-columns 230ms var(--ease-out);
|
|
418
|
+
}
|
|
349
419
|
|
|
350
420
|
.sidebar {
|
|
351
421
|
position: sticky;
|
|
352
|
-
top:
|
|
353
|
-
|
|
354
|
-
|
|
422
|
+
top: var(--chrome-inset);
|
|
423
|
+
width: var(--sidebar-width);
|
|
424
|
+
min-width: 0;
|
|
425
|
+
height: calc(100vh - var(--chrome-inset) * 2);
|
|
426
|
+
height: calc(100dvh - var(--chrome-inset) * 2);
|
|
355
427
|
align-self: start;
|
|
356
428
|
display: flex;
|
|
357
429
|
flex-direction: column;
|
|
430
|
+
margin-left: var(--chrome-inset);
|
|
358
431
|
padding: 18px 13px 13px;
|
|
359
|
-
border
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
432
|
+
border: 1px solid var(--glass-border);
|
|
433
|
+
border-radius: 20px;
|
|
434
|
+
overflow: hidden;
|
|
435
|
+
background: var(--material-sidebar);
|
|
436
|
+
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%);
|
|
437
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
438
|
+
backdrop-filter: var(--glass-filter);
|
|
439
|
+
transform-origin: left center;
|
|
440
|
+
transition:
|
|
441
|
+
opacity 150ms ease-out,
|
|
442
|
+
transform 230ms var(--ease-out);
|
|
364
443
|
}
|
|
365
444
|
|
|
366
445
|
.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
|
|
446
|
+
.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
447
|
.brand-emblem::before, .brand-emblem::after, .brand-emblem span { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 3px; }
|
|
369
448
|
.brand-emblem::before { width: 15px; height: 19px; transform: translate(-2px, -1px) rotate(-5deg); opacity: .42; }
|
|
370
449
|
.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 +452,17 @@ html,
|
|
|
373
452
|
.brand strong { display: block; margin-top: 2px; font-size: 16px; line-height: 1.2; font-weight: 690; letter-spacing: -.025em; }
|
|
374
453
|
.brand-copy > span { display: block; color: var(--text-tertiary); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
|
375
454
|
|
|
376
|
-
.nav {
|
|
455
|
+
.nav {
|
|
456
|
+
min-height: 0;
|
|
457
|
+
display: grid;
|
|
458
|
+
align-content: start;
|
|
459
|
+
flex: 1 1 auto;
|
|
460
|
+
gap: 17px;
|
|
461
|
+
overflow-x: hidden;
|
|
462
|
+
overflow-y: auto;
|
|
463
|
+
overscroll-behavior: contain;
|
|
464
|
+
scrollbar-gutter: stable;
|
|
465
|
+
}
|
|
377
466
|
.nav-group { display: grid; gap: 2px; }
|
|
378
467
|
.nav-group + .nav-group { padding-top: 1px; }
|
|
379
468
|
.nav-group-label { padding: 0 9px 5px; color: var(--text-tertiary); font-size: 9px; font-weight: 680; letter-spacing: .07em; }
|
|
@@ -394,17 +483,17 @@ html,
|
|
|
394
483
|
font-weight: 520;
|
|
395
484
|
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
485
|
}
|
|
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(--
|
|
486
|
+
.nav-button:hover { background: var(--surface-hover); color: var(--text); }
|
|
487
|
+
.nav-button:active { transform: scale(.97); }
|
|
488
|
+
.nav-button[aria-current="page"] { background: var(--material-control); color: var(--text); font-weight: 640; box-shadow: var(--shadow-control); }
|
|
489
|
+
.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
490
|
.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(--
|
|
491
|
+
.nav-button:hover .nav-index, .nav-button[aria-current="page"] .nav-index { color: var(--text); }
|
|
403
492
|
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
404
493
|
.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(--
|
|
494
|
+
.nav-button[aria-current="page"] .nav-count { background: var(--surface-soft); color: var(--text-secondary); }
|
|
406
495
|
|
|
407
|
-
.sidebar-footer { margin-top: auto; display: grid; gap: 7px; border: 1px solid
|
|
496
|
+
.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
497
|
.connection { display: flex; align-items: center; gap: 7px; min-height: 25px; color: var(--text-tertiary); font-size: 10px; }
|
|
409
498
|
.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
499
|
.sidebar-footer .button { justify-self: start; }
|
|
@@ -422,6 +511,10 @@ html,
|
|
|
422
511
|
touch-action: none;
|
|
423
512
|
background: transparent;
|
|
424
513
|
outline-offset: -2px;
|
|
514
|
+
transition:
|
|
515
|
+
opacity 130ms ease-out,
|
|
516
|
+
transform 210ms var(--ease-out),
|
|
517
|
+
background-color var(--motion-fast) ease;
|
|
425
518
|
}
|
|
426
519
|
.app-sidebar-resizer::before {
|
|
427
520
|
content: "";
|
|
@@ -450,34 +543,37 @@ html,
|
|
|
450
543
|
}
|
|
451
544
|
.app-sidebar-resizer:hover span,
|
|
452
545
|
.app-sidebar-resizer:focus-visible span,
|
|
453
|
-
.app-sidebar-resizer.is-dragging span { opacity: 1; background: var(--
|
|
546
|
+
.app-sidebar-resizer.is-dragging span { opacity: 1; background: var(--text-secondary); }
|
|
454
547
|
.app-sidebar-resizer:hover,
|
|
455
548
|
.app-sidebar-resizer.is-dragging { background: color-mix(in srgb, var(--accent) 8%, transparent); }
|
|
456
549
|
.main { min-width: 0; width: 100%; height: 100vh; height: 100dvh; grid-column: 3; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
|
|
457
550
|
.topbar {
|
|
458
551
|
position: sticky;
|
|
459
|
-
top:
|
|
552
|
+
top: var(--chrome-inset);
|
|
460
553
|
z-index: 10;
|
|
461
554
|
min-height: 78px;
|
|
462
555
|
display: flex;
|
|
463
556
|
align-items: center;
|
|
464
557
|
justify-content: space-between;
|
|
465
558
|
gap: 18px;
|
|
466
|
-
|
|
559
|
+
margin: var(--chrome-inset) var(--topbar-inline-inset) 0;
|
|
560
|
+
border: 1px solid var(--glass-border);
|
|
561
|
+
border-radius: 18px;
|
|
467
562
|
padding: 14px clamp(18px, 3vw, 38px);
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
-
|
|
471
|
-
backdrop-filter:
|
|
563
|
+
overflow: hidden;
|
|
564
|
+
background: var(--material-toolbar);
|
|
565
|
+
box-shadow: inset 0 1px 0 var(--glass-rim-light), inset 0 -1px 0 var(--glass-rim-shadow);
|
|
566
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
567
|
+
backdrop-filter: var(--glass-filter);
|
|
472
568
|
}
|
|
473
569
|
.topbar h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
|
|
474
570
|
.topbar p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 11px; text-wrap: pretty; }
|
|
475
571
|
.topbar-title { display: flex; align-items: center; gap: 12px; }
|
|
476
572
|
.topbar-heading { min-width: 0; }
|
|
477
|
-
.topbar-kicker { display: block; margin-bottom: 2px; color:
|
|
573
|
+
.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
574
|
.route-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 7%, transparent); }
|
|
479
575
|
.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
|
-
.mobile-menu { display: none; }
|
|
576
|
+
.mobile-menu, .app-sidebar-scrim { display: none; }
|
|
481
577
|
.topbar-actions { display: flex; align-items: center; gap: 8px; }
|
|
482
578
|
.pane-toggle-group {
|
|
483
579
|
flex: none;
|
|
@@ -487,7 +583,8 @@ html,
|
|
|
487
583
|
border: 1px solid var(--border);
|
|
488
584
|
border-radius: 9px;
|
|
489
585
|
padding: 2px;
|
|
490
|
-
background:
|
|
586
|
+
background: var(--glass-regular);
|
|
587
|
+
box-shadow: inset 0 1px 0 var(--glass-rim-light);
|
|
491
588
|
}
|
|
492
589
|
.pane-toggle-button {
|
|
493
590
|
width: 30px;
|
|
@@ -505,9 +602,9 @@ html,
|
|
|
505
602
|
.pane-toggle-button[data-pane="library"] { display: none; }
|
|
506
603
|
.pane-toggle-button:hover { background: var(--surface-hover); color: var(--text); }
|
|
507
604
|
.pane-toggle-button[aria-pressed="true"] {
|
|
508
|
-
background: var(--
|
|
605
|
+
background: var(--material-control);
|
|
509
606
|
color: var(--text);
|
|
510
|
-
box-shadow:
|
|
607
|
+
box-shadow: var(--shadow-control);
|
|
511
608
|
}
|
|
512
609
|
.pane-icon {
|
|
513
610
|
position: relative;
|
|
@@ -566,7 +663,7 @@ html,
|
|
|
566
663
|
.app-shell[data-view="notes"] .page {
|
|
567
664
|
width: 100%;
|
|
568
665
|
max-width: none;
|
|
569
|
-
height: calc(100dvh -
|
|
666
|
+
height: calc(100dvh - 74px);
|
|
570
667
|
margin: 0;
|
|
571
668
|
overflow: hidden;
|
|
572
669
|
padding: 0;
|
|
@@ -578,16 +675,16 @@ html,
|
|
|
578
675
|
.section-heading p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
|
|
579
676
|
|
|
580
677
|
.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
|
|
678
|
+
.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
679
|
.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:
|
|
680
|
+
.metric:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
|
|
584
681
|
.metric:hover::after { opacity: 1; }
|
|
585
682
|
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
|
|
586
683
|
.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
684
|
.metric-detail { margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
|
|
588
685
|
|
|
589
686
|
.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
|
|
687
|
+
.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
688
|
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--separator); padding: 15px 17px; }
|
|
592
689
|
.panel-header h2, .panel-header h3 { margin: 0; font-size: 14px; }
|
|
593
690
|
.panel-body { padding: 8px; }
|
|
@@ -642,10 +739,10 @@ html,
|
|
|
642
739
|
display: grid;
|
|
643
740
|
grid-template-columns: minmax(210px, .85fr) minmax(240px, 1.25fr) minmax(170px, .7fr) 244px;
|
|
644
741
|
overflow: hidden;
|
|
645
|
-
border: 1px solid var(--
|
|
742
|
+
border: 1px solid var(--glass-border);
|
|
646
743
|
border-radius: var(--radius);
|
|
647
744
|
background: var(--material-panel);
|
|
648
|
-
box-shadow: var(--shadow
|
|
745
|
+
box-shadow: var(--glass-shadow);
|
|
649
746
|
}
|
|
650
747
|
.base-card {
|
|
651
748
|
min-width: 0;
|
|
@@ -663,13 +760,13 @@ html,
|
|
|
663
760
|
contain-intrinsic-size: auto 94px;
|
|
664
761
|
}
|
|
665
762
|
.base-card:last-child { border-bottom: 0; }
|
|
666
|
-
.base-card:hover { background:
|
|
763
|
+
.base-card:hover { background: var(--surface-hover); }
|
|
667
764
|
.base-card.is-archived { opacity: .78; }
|
|
668
765
|
.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
766
|
.base-card-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
|
|
670
767
|
.base-card-identity > div { min-width: 0; }
|
|
671
768
|
.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(--
|
|
769
|
+
.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
770
|
.base-card h3 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
|
|
674
771
|
.base-card small { display: block; overflow: hidden; margin-top: 3px; color: var(--text-tertiary); text-overflow: ellipsis; white-space: nowrap; }
|
|
675
772
|
.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 +826,10 @@ html,
|
|
|
729
826
|
display: grid;
|
|
730
827
|
grid-template-columns: clamp(240px, 24vw, 320px) minmax(0, 1fr);
|
|
731
828
|
overflow: hidden;
|
|
732
|
-
border: 1px solid
|
|
733
|
-
border-radius:
|
|
829
|
+
border: 1px solid var(--glass-border);
|
|
830
|
+
border-radius: 15px;
|
|
734
831
|
background: var(--surface-editor);
|
|
735
|
-
box-shadow: var(--shadow
|
|
832
|
+
box-shadow: var(--glass-shadow);
|
|
736
833
|
}
|
|
737
834
|
.note-tree-panel {
|
|
738
835
|
min-width: 0;
|
|
@@ -741,10 +838,11 @@ html,
|
|
|
741
838
|
display: grid;
|
|
742
839
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
743
840
|
overflow: hidden;
|
|
744
|
-
border-right: 1px solid var(--separator);
|
|
745
|
-
background:
|
|
746
|
-
-
|
|
747
|
-
backdrop-filter:
|
|
841
|
+
border-right: 1px solid var(--glass-separator);
|
|
842
|
+
background: var(--surface-pane);
|
|
843
|
+
box-shadow: inset 1px 0 0 var(--glass-rim-light);
|
|
844
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
845
|
+
backdrop-filter: var(--glass-filter);
|
|
748
846
|
}
|
|
749
847
|
.note-tree-scrim { display: none; }
|
|
750
848
|
.note-tree-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 8px 16px; }
|
|
@@ -753,8 +851,8 @@ html,
|
|
|
753
851
|
.note-add-button { width: 30px; min-width: 30px; min-height: 30px; padding: 0; font-size: 18px; font-weight: 400; }
|
|
754
852
|
.note-tree-search-wrap { position: relative; padding: 5px 10px 9px; }
|
|
755
853
|
.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:
|
|
854
|
+
.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); }
|
|
855
|
+
.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
856
|
.note-tree {
|
|
759
857
|
min-height: 0;
|
|
760
858
|
overflow-x: hidden;
|
|
@@ -765,7 +863,7 @@ html,
|
|
|
765
863
|
.note-tree-group + .note-tree-group { margin-top: 3px; }
|
|
766
864
|
.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
865
|
.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:
|
|
866
|
+
.note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: var(--surface-hover); color: var(--text); transform: translateX(2px); }
|
|
769
867
|
.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
868
|
.note-tree-group[data-expanded="true"] .tree-disclosure { transform: rotate(45deg) translate(-1px, -1px); }
|
|
771
869
|
.tree-folder-icon {
|
|
@@ -779,12 +877,12 @@ html,
|
|
|
779
877
|
transition: color .15s ease, opacity .15s ease;
|
|
780
878
|
}
|
|
781
879
|
.note-tree-base:hover .tree-folder-icon { opacity: .7; }
|
|
782
|
-
.note-tree-group[data-expanded="true"] .tree-folder-icon { color: var(--
|
|
880
|
+
.note-tree-group[data-expanded="true"] .tree-folder-icon { color: var(--text-secondary); opacity: .8; }
|
|
783
881
|
.tree-base-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
784
882
|
.tree-count { min-width: 20px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
|
|
785
883
|
.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
884
|
.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:
|
|
885
|
+
.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
886
|
.tree-document-icon {
|
|
789
887
|
width: 14px;
|
|
790
888
|
height: 17px;
|
|
@@ -796,7 +894,7 @@ html,
|
|
|
796
894
|
transition: color .15s ease, opacity .15s ease;
|
|
797
895
|
}
|
|
798
896
|
.note-tree-document:hover .tree-document-icon { opacity: .72; }
|
|
799
|
-
.note-tree-document[aria-current="page"] .tree-document-icon { color: var(--
|
|
897
|
+
.note-tree-document[aria-current="page"] .tree-document-icon { color: var(--text); opacity: .88; }
|
|
800
898
|
.tree-document-copy { min-width: 0; flex: 1; }
|
|
801
899
|
.note-tree-document > .badge { min-height: 17px; padding: 1px 5px; font-size: 8px; }
|
|
802
900
|
.tree-document-copy strong, .tree-document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
@@ -822,7 +920,7 @@ html,
|
|
|
822
920
|
overflow: hidden;
|
|
823
921
|
background: var(--surface-editor);
|
|
824
922
|
}
|
|
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:
|
|
923
|
+
.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
924
|
.notes-browser-header { min-height: 68px; display: grid; gap: 8px; padding: 10px 10px 7px; }
|
|
827
925
|
.notes-browser-header > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
|
828
926
|
.notes-browser-header h2 { margin: 0; font-size: 13px; font-weight: 650; }
|
|
@@ -836,8 +934,8 @@ html,
|
|
|
836
934
|
.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
935
|
.notes-tree-node { min-width: 0; max-width: 100%; }
|
|
838
936
|
.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:
|
|
937
|
+
.notes-tree-item:hover { background: var(--surface-hover); }
|
|
938
|
+
.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
939
|
.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
940
|
.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
941
|
.notes-tree-item[data-drop-target="true"] .notes-row-actions { opacity: 0; pointer-events: none; }
|
|
@@ -846,7 +944,7 @@ html,
|
|
|
846
944
|
.notes-tree-row:hover, .notes-tree-row[aria-selected="true"] { color: var(--text); }
|
|
847
945
|
.notes-tree-chevron, .notes-tree-spacer { position: relative; width: 14px; height: 20px; flex: none; color: var(--text-tertiary); }
|
|
848
946
|
.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(--
|
|
947
|
+
.notes-tree-row[aria-expanded="true"] .notes-tree-chevron::before { transform: translateY(-65%) rotate(45deg); color: var(--text); }
|
|
850
948
|
.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
949
|
.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
950
|
.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 +1128,10 @@ html,
|
|
|
1030
1128
|
gap: 14px;
|
|
1031
1129
|
border-bottom: 1px solid var(--separator);
|
|
1032
1130
|
padding: 5px 14px 5px 20px;
|
|
1033
|
-
background: var(--
|
|
1034
|
-
-
|
|
1035
|
-
backdrop-filter:
|
|
1131
|
+
background: var(--material-toolbar);
|
|
1132
|
+
box-shadow: inset 0 1px 0 var(--glass-rim-light);
|
|
1133
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
1134
|
+
backdrop-filter: var(--glass-filter);
|
|
1036
1135
|
}
|
|
1037
1136
|
.note-editor-loading { grid-template-rows: auto minmax(0, 1fr); }
|
|
1038
1137
|
.editor-load-label { color: var(--text-tertiary); font-size: 10px; }
|
|
@@ -1238,7 +1337,7 @@ html,
|
|
|
1238
1337
|
.diff-stat.additions { background: var(--success-soft); color: var(--success); }
|
|
1239
1338
|
.diff-stat.deletions { background: var(--danger-soft); color: var(--danger); }
|
|
1240
1339
|
.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:
|
|
1340
|
+
.diff-viewer { overflow: auto; max-height: 390px; overscroll-behavior: auto; background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
|
|
1242
1341
|
.diff-column-headings, .diff-line { display: grid; grid-template-columns: 42px 42px 22px minmax(0, 1fr); }
|
|
1243
1342
|
.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
1343
|
.diff-column-headings span { min-width: 0; padding: 4px 7px; }
|
|
@@ -1324,16 +1423,19 @@ html,
|
|
|
1324
1423
|
.api-access-actions { align-items: center; border-top: 1px solid var(--border); padding-top: 13px; }
|
|
1325
1424
|
.api-access-actions small { color: var(--text-tertiary); }
|
|
1326
1425
|
|
|
1327
|
-
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(8
|
|
1426
|
+
.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
1427
|
.dialog {
|
|
1329
1428
|
width: min(100%, 640px);
|
|
1330
1429
|
max-height: min(88vh, 820px);
|
|
1331
1430
|
display: flex;
|
|
1332
1431
|
flex-direction: column;
|
|
1333
|
-
|
|
1334
|
-
border
|
|
1335
|
-
|
|
1336
|
-
|
|
1432
|
+
overflow: hidden;
|
|
1433
|
+
border: 1px solid var(--glass-border);
|
|
1434
|
+
border-radius: 18px;
|
|
1435
|
+
background: color-mix(in srgb, var(--dialog-surface) 88%, transparent);
|
|
1436
|
+
box-shadow: var(--glass-shadow), var(--shadow-floating);
|
|
1437
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
1438
|
+
backdrop-filter: var(--glass-filter);
|
|
1337
1439
|
animation: dialog-enter var(--motion-base) var(--ease-spring) both;
|
|
1338
1440
|
}
|
|
1339
1441
|
@keyframes dialog-backdrop-enter { from { opacity: 0; } }
|
|
@@ -1355,11 +1457,11 @@ html,
|
|
|
1355
1457
|
animation: sheet-enter .2s cubic-bezier(.2, .8, .2, 1);
|
|
1356
1458
|
}
|
|
1357
1459
|
@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; }
|
|
1460
|
+
.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
1461
|
.dialog-header h2 { margin: 0; font-size: 17px; }
|
|
1360
1462
|
.dialog-header p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
|
|
1361
1463
|
.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:
|
|
1464
|
+
.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
1465
|
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
|
|
1364
1466
|
.form-grid .span-2 { grid-column: 1 / -1; }
|
|
1365
1467
|
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
@@ -1403,12 +1505,270 @@ html,
|
|
|
1403
1505
|
.toast.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
|
|
1404
1506
|
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }
|
|
1405
1507
|
|
|
1508
|
+
/*
|
|
1509
|
+
* Workspace effects
|
|
1510
|
+
*
|
|
1511
|
+
* This is the single visual contract for glass refraction, edge response,
|
|
1512
|
+
* glare and directory entrance. Business renderers only provide stable item
|
|
1513
|
+
* identities; the effects runtime owns observers and pointer tracking.
|
|
1514
|
+
*/
|
|
1515
|
+
.knowledge-glass-filter-bank {
|
|
1516
|
+
position: fixed;
|
|
1517
|
+
width: 0;
|
|
1518
|
+
height: 0;
|
|
1519
|
+
overflow: hidden;
|
|
1520
|
+
pointer-events: none;
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
.knowledge-glass-surface {
|
|
1524
|
+
transform: translateZ(0);
|
|
1525
|
+
-webkit-backdrop-filter: blur(18px) saturate(1.18) contrast(1.025);
|
|
1526
|
+
backdrop-filter: blur(18px) saturate(1.18) contrast(1.025);
|
|
1527
|
+
}
|
|
1528
|
+
|
|
1529
|
+
.knowledge-glass-surface[data-knowledge-glass="svg"] {
|
|
1530
|
+
-webkit-backdrop-filter: var(--knowledge-glass-filter) saturate(1.18) contrast(1.025);
|
|
1531
|
+
backdrop-filter: var(--knowledge-glass-filter) saturate(1.18) contrast(1.025);
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
.sidebar.knowledge-glass-surface {
|
|
1535
|
+
background: var(--liquid-glass-large);
|
|
1536
|
+
box-shadow:
|
|
1537
|
+
inset 1px 0 0 var(--glass-rim-light),
|
|
1538
|
+
inset -1px 0 0 var(--glass-rim-shadow),
|
|
1539
|
+
10px 0 36px rgb(0 0 0 / 4%);
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
.topbar.knowledge-glass-surface,
|
|
1543
|
+
.note-editor-toolbar.knowledge-glass-surface,
|
|
1544
|
+
.notes-document-toolbar.knowledge-glass-surface,
|
|
1545
|
+
.notes-content-header.knowledge-glass-surface {
|
|
1546
|
+
background: var(--liquid-glass-regular);
|
|
1547
|
+
box-shadow:
|
|
1548
|
+
inset 0 1px 0 var(--glass-rim-light),
|
|
1549
|
+
inset 0 -1px 0 var(--glass-rim-shadow),
|
|
1550
|
+
0 8px 24px rgb(0 0 0 / 3%);
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1553
|
+
.note-tree-panel.knowledge-glass-surface,
|
|
1554
|
+
.notes-browser.knowledge-glass-surface {
|
|
1555
|
+
background: var(--liquid-glass-clear);
|
|
1556
|
+
box-shadow:
|
|
1557
|
+
inset 1px 0 0 var(--glass-rim-light),
|
|
1558
|
+
inset -1px 0 0 var(--glass-rim-shadow),
|
|
1559
|
+
10px 0 28px rgb(0 0 0 / 3.5%);
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1562
|
+
.dialog.knowledge-glass-surface {
|
|
1563
|
+
background: var(--liquid-glass-dialog);
|
|
1564
|
+
box-shadow:
|
|
1565
|
+
inset 0 1px 0 var(--glass-rim-light),
|
|
1566
|
+
inset 0 -1px 0 var(--glass-rim-shadow),
|
|
1567
|
+
0 2px 8px rgb(0 0 0 / 8%),
|
|
1568
|
+
0 28px 76px rgb(0 0 0 / 25%);
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
.knowledge-card-surface {
|
|
1572
|
+
--knowledge-pointer-x: 50%;
|
|
1573
|
+
--knowledge-pointer-y: 50%;
|
|
1574
|
+
--knowledge-card-spotlight: transparent;
|
|
1575
|
+
border-color: var(--glass-border);
|
|
1576
|
+
background:
|
|
1577
|
+
radial-gradient(
|
|
1578
|
+
circle 210px at var(--knowledge-pointer-x) var(--knowledge-pointer-y),
|
|
1579
|
+
var(--knowledge-card-spotlight) 0%,
|
|
1580
|
+
transparent 72%
|
|
1581
|
+
),
|
|
1582
|
+
linear-gradient(145deg, color-mix(in srgb, var(--card-highlight) 22%, transparent), transparent 58%),
|
|
1583
|
+
var(--card-fill);
|
|
1584
|
+
-webkit-backdrop-filter: blur(18px) saturate(1.08) contrast(1.02);
|
|
1585
|
+
backdrop-filter: blur(18px) saturate(1.08) contrast(1.02);
|
|
1586
|
+
box-shadow:
|
|
1587
|
+
inset 0 1px 0 var(--card-highlight),
|
|
1588
|
+
inset 0 -1px 0 var(--glass-rim-shadow),
|
|
1589
|
+
0 2px 6px rgb(0 0 0 / 4%),
|
|
1590
|
+
0 10px 28px rgb(0 0 0 / 7%);
|
|
1591
|
+
transition:
|
|
1592
|
+
border-color var(--motion-base) ease,
|
|
1593
|
+
box-shadow 220ms var(--ease-out),
|
|
1594
|
+
transform 220ms var(--ease-out);
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
@media (hover: hover) {
|
|
1598
|
+
.knowledge-card-surface:hover {
|
|
1599
|
+
--knowledge-card-spotlight: color-mix(in srgb, var(--card-highlight) 64%, transparent);
|
|
1600
|
+
border-color: color-mix(in srgb, var(--border) 68%, var(--text-tertiary));
|
|
1601
|
+
box-shadow:
|
|
1602
|
+
inset 0 1px 0 var(--card-highlight),
|
|
1603
|
+
inset 0 -1px 0 var(--glass-rim-shadow),
|
|
1604
|
+
0 3px 8px rgb(0 0 0 / 6%),
|
|
1605
|
+
0 14px 34px rgb(0 0 0 / 10%);
|
|
1606
|
+
transform: translateY(-1px);
|
|
1607
|
+
}
|
|
1608
|
+
}
|
|
1609
|
+
|
|
1610
|
+
.knowledge-border-surface {
|
|
1611
|
+
--knowledge-border-angle: 0deg;
|
|
1612
|
+
--knowledge-border-proximity: 0;
|
|
1613
|
+
position: relative;
|
|
1614
|
+
isolation: isolate;
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.knowledge-border-surface::before,
|
|
1618
|
+
.knowledge-border-surface::after {
|
|
1619
|
+
position: absolute;
|
|
1620
|
+
border-radius: inherit;
|
|
1621
|
+
pointer-events: none;
|
|
1622
|
+
content: "";
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1625
|
+
.knowledge-border-surface::before {
|
|
1626
|
+
z-index: 20;
|
|
1627
|
+
inset: 0;
|
|
1628
|
+
padding: 1px;
|
|
1629
|
+
background: conic-gradient(
|
|
1630
|
+
from var(--knowledge-border-angle),
|
|
1631
|
+
var(--interaction-glow-core) 0deg,
|
|
1632
|
+
var(--interaction-glow-soft) 10deg,
|
|
1633
|
+
transparent 27deg 333deg,
|
|
1634
|
+
var(--interaction-glow-soft) 350deg,
|
|
1635
|
+
var(--interaction-glow-core) 360deg
|
|
1636
|
+
);
|
|
1637
|
+
opacity: calc(var(--knowledge-border-proximity) * .96);
|
|
1638
|
+
transition: opacity 150ms ease-out;
|
|
1639
|
+
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
1640
|
+
-webkit-mask-composite: xor;
|
|
1641
|
+
mask-composite: exclude;
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.knowledge-border-surface::after {
|
|
1645
|
+
z-index: 19;
|
|
1646
|
+
inset: -3px;
|
|
1647
|
+
padding: 3px;
|
|
1648
|
+
background: conic-gradient(
|
|
1649
|
+
from var(--knowledge-border-angle),
|
|
1650
|
+
var(--interaction-glow-haze) 0deg,
|
|
1651
|
+
transparent 22deg 338deg,
|
|
1652
|
+
var(--interaction-glow-haze) 360deg
|
|
1653
|
+
);
|
|
1654
|
+
filter: blur(3px);
|
|
1655
|
+
opacity: calc(var(--knowledge-border-proximity) * .42);
|
|
1656
|
+
transition: opacity 210ms ease-out;
|
|
1657
|
+
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
1658
|
+
-webkit-mask-composite: xor;
|
|
1659
|
+
mask-composite: exclude;
|
|
1660
|
+
}
|
|
1661
|
+
|
|
1662
|
+
.knowledge-glare-surface {
|
|
1663
|
+
position: relative;
|
|
1664
|
+
isolation: isolate;
|
|
1665
|
+
overflow: hidden;
|
|
1666
|
+
}
|
|
1667
|
+
|
|
1668
|
+
.knowledge-glare-surface::after {
|
|
1669
|
+
position: absolute;
|
|
1670
|
+
z-index: 5;
|
|
1671
|
+
top: -65%;
|
|
1672
|
+
bottom: -65%;
|
|
1673
|
+
left: -62%;
|
|
1674
|
+
width: 44%;
|
|
1675
|
+
border-radius: 45%;
|
|
1676
|
+
background: linear-gradient(
|
|
1677
|
+
90deg,
|
|
1678
|
+
transparent 0%,
|
|
1679
|
+
color-mix(in srgb, var(--interaction-glare-light) 24%, transparent) 32%,
|
|
1680
|
+
var(--interaction-glare-light) 48%,
|
|
1681
|
+
var(--interaction-glare-rim) 61%,
|
|
1682
|
+
transparent 78%
|
|
1683
|
+
);
|
|
1684
|
+
opacity: 0;
|
|
1685
|
+
transform: skewX(-18deg) translate3d(0, 0, 0);
|
|
1686
|
+
pointer-events: none;
|
|
1687
|
+
transition:
|
|
1688
|
+
opacity 150ms ease-out,
|
|
1689
|
+
transform 760ms cubic-bezier(.2, .72, .2, 1);
|
|
1690
|
+
content: "";
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
.knowledge-glare-surface:is(:hover, :focus-visible, :focus-within):not(:disabled)::after {
|
|
1694
|
+
opacity: .92;
|
|
1695
|
+
transform: skewX(-18deg) translate3d(390%, 0, 0);
|
|
1696
|
+
}
|
|
1697
|
+
|
|
1698
|
+
.knowledge-list-reveal {
|
|
1699
|
+
opacity: 0;
|
|
1700
|
+
translate: 0 16px;
|
|
1701
|
+
scale: .97;
|
|
1702
|
+
transform-origin: center top;
|
|
1703
|
+
transition:
|
|
1704
|
+
opacity 280ms ease-out var(--knowledge-list-delay, 0ms),
|
|
1705
|
+
translate 360ms var(--ease-out) var(--knowledge-list-delay, 0ms),
|
|
1706
|
+
scale 360ms var(--ease-out) var(--knowledge-list-delay, 0ms);
|
|
1707
|
+
will-change: opacity, translate, scale;
|
|
1708
|
+
}
|
|
1709
|
+
|
|
1710
|
+
.knowledge-list-reveal.is-visible {
|
|
1711
|
+
opacity: 1;
|
|
1712
|
+
translate: 0 0;
|
|
1713
|
+
scale: 1;
|
|
1714
|
+
will-change: auto;
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
.base-grid .knowledge-list-reveal {
|
|
1718
|
+
translate: 0 20px;
|
|
1719
|
+
scale: .96;
|
|
1720
|
+
transition-duration: 320ms, 420ms, 420ms;
|
|
1721
|
+
}
|
|
1722
|
+
|
|
1723
|
+
.base-grid .knowledge-list-reveal.is-visible {
|
|
1724
|
+
translate: 0 0;
|
|
1725
|
+
scale: 1;
|
|
1726
|
+
}
|
|
1727
|
+
|
|
1728
|
+
.base-card.is-archived.knowledge-list-reveal { opacity: 0; }
|
|
1729
|
+
.base-card.is-archived.knowledge-list-reveal.is-visible { opacity: .78; }
|
|
1730
|
+
|
|
1731
|
+
.knowledge-animated-list[data-scroll-top="true"][data-scroll-bottom="false"] {
|
|
1732
|
+
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
|
|
1733
|
+
mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
|
|
1734
|
+
}
|
|
1735
|
+
|
|
1736
|
+
.knowledge-animated-list[data-scroll-top="false"][data-scroll-bottom="true"] {
|
|
1737
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 100%);
|
|
1738
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 100%);
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
.knowledge-animated-list[data-scroll-top="false"][data-scroll-bottom="false"] {
|
|
1742
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
|
|
1743
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1746
|
+
@media (hover: none), (pointer: coarse) {
|
|
1747
|
+
.knowledge-glare-surface::after,
|
|
1748
|
+
.knowledge-border-surface::before,
|
|
1749
|
+
.knowledge-border-surface::after { display: none; }
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1406
1752
|
@media (prefers-reduced-transparency: reduce) {
|
|
1407
1753
|
.sidebar, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .note-editor-toolbar, .dialog-backdrop {
|
|
1408
1754
|
-webkit-backdrop-filter: none;
|
|
1409
1755
|
backdrop-filter: none;
|
|
1410
1756
|
}
|
|
1411
1757
|
.sidebar, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .note-editor-toolbar { background: var(--surface); }
|
|
1758
|
+
.knowledge-glass-surface,
|
|
1759
|
+
.knowledge-glass-surface[data-knowledge-glass="svg"] {
|
|
1760
|
+
-webkit-backdrop-filter: none;
|
|
1761
|
+
backdrop-filter: none;
|
|
1762
|
+
}
|
|
1763
|
+
.knowledge-card-surface {
|
|
1764
|
+
background: var(--surface-raised);
|
|
1765
|
+
-webkit-backdrop-filter: none;
|
|
1766
|
+
backdrop-filter: none;
|
|
1767
|
+
}
|
|
1768
|
+
.dialog.knowledge-glass-surface { background: var(--dialog-surface); }
|
|
1769
|
+
.knowledge-border-surface::before,
|
|
1770
|
+
.knowledge-border-surface::after,
|
|
1771
|
+
.knowledge-glare-surface::after { display: none; }
|
|
1412
1772
|
}
|
|
1413
1773
|
|
|
1414
1774
|
@media (max-width: 980px) {
|
|
@@ -1435,27 +1795,35 @@ html,
|
|
|
1435
1795
|
|
|
1436
1796
|
@media (min-width: 761px) {
|
|
1437
1797
|
.app-shell[data-sidebar-hidden="true"] { grid-template-columns: 0 0 minmax(0, 1fr); }
|
|
1438
|
-
.app-shell[data-sidebar-hidden="true"] > .sidebar
|
|
1439
|
-
|
|
1798
|
+
.app-shell[data-sidebar-hidden="true"] > .sidebar {
|
|
1799
|
+
opacity: 0;
|
|
1800
|
+
transform: translateX(calc(-100% - var(--chrome-inset))) scale(.985);
|
|
1801
|
+
pointer-events: none;
|
|
1802
|
+
}
|
|
1803
|
+
.app-shell[data-sidebar-hidden="true"] > .app-sidebar-resizer {
|
|
1804
|
+
opacity: 0;
|
|
1805
|
+
transform: translateX(-8px);
|
|
1806
|
+
pointer-events: none;
|
|
1807
|
+
}
|
|
1440
1808
|
}
|
|
1441
1809
|
|
|
1442
1810
|
@media (max-width: 760px) {
|
|
1443
|
-
:root { --sidebar-width: 0px; }
|
|
1811
|
+
:root { --sidebar-width: 0px; --chrome-inset: 8px; --topbar-inline-inset: 8px; }
|
|
1444
1812
|
.app-shell { height: auto; min-height: 100dvh; display: block; overflow: visible; }
|
|
1445
1813
|
.main { width: 100%; height: auto; min-height: 100dvh; overflow: visible; }
|
|
1446
1814
|
.app-sidebar-resizer { display: none; }
|
|
1447
1815
|
.pane-toggle-button[data-pane="main"] { display: none; }
|
|
1448
1816
|
.pane-toggle-button[data-pane="library"] { display: inline-grid; }
|
|
1449
|
-
.sidebar { position: fixed; z-index: 40; width: min(82vw, 270px); transform: translateX(-
|
|
1817
|
+
.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
1818
|
.app-shell[data-menu-open="true"] .sidebar { transform: translateX(0); }
|
|
1451
|
-
.app-
|
|
1819
|
+
.app-sidebar-scrim { position: fixed; inset: 0; z-index: 30; display: block; border: 0; padding: 0; background: rgb(0 0 0 / 35%); touch-action: manipulation; }
|
|
1452
1820
|
.mobile-menu { display: inline-grid; place-items: center; }
|
|
1453
1821
|
.topbar { min-height: 64px; padding: 10px 16px; }
|
|
1454
1822
|
.topbar-title { gap: 10px; }
|
|
1455
1823
|
.topbar h1 { font-size: 17px; }
|
|
1456
1824
|
.topbar p { display: none; }
|
|
1457
1825
|
.page { padding: 22px 16px 42px; }
|
|
1458
|
-
.app-shell[data-view="notes"] .page { height: auto; min-height: calc(100dvh -
|
|
1826
|
+
.app-shell[data-view="notes"] .page { height: auto; min-height: calc(100dvh - 72px); overflow: visible; padding: 0; }
|
|
1459
1827
|
.app-shell[data-view="notes"] .view-stage { height: auto; min-height: inherit; overflow: visible; }
|
|
1460
1828
|
.app-shell[data-view="notes"] .notes-page { height: auto; }
|
|
1461
1829
|
.workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
|
|
@@ -1516,7 +1884,7 @@ html,
|
|
|
1516
1884
|
.candidate-header, .candidate-footer { align-items: flex-start; flex-direction: column; }
|
|
1517
1885
|
.candidate-footer { gap: 9px; }
|
|
1518
1886
|
.candidate-actions { width: 100%; justify-content: flex-start; }
|
|
1519
|
-
.notes-workspace { height: auto; min-height: calc(100dvh -
|
|
1887
|
+
.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
1888
|
.notes-browser { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
1521
1889
|
.notes-file-list { min-width: 560px; }
|
|
1522
1890
|
.button, .tab, .nav-button, .note-tree-base, .note-tree-document, .note-tree-new { min-height: 44px; }
|
|
@@ -1579,6 +1947,10 @@ html,
|
|
|
1579
1947
|
|
|
1580
1948
|
@media (prefers-reduced-motion: reduce) {
|
|
1581
1949
|
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
|
|
1950
|
+
.knowledge-list-reveal { opacity: 1; translate: 0 0; scale: 1; }
|
|
1951
|
+
.knowledge-glare-surface::after,
|
|
1952
|
+
.knowledge-border-surface::before,
|
|
1953
|
+
.knowledge-border-surface::after { display: none; }
|
|
1582
1954
|
}
|
|
1583
1955
|
|
|
1584
1956
|
@media (forced-colors: active) {
|