@nimtech/nimpress 2.6.11 → 2.6.13
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/.claude/rules/roadmap-entries.md +5 -3
- package/dist/cli.es.js +1 -1
- package/dist/nimpress.es.js +5778 -5752
- package/dist/{plugin-DnnKU6ST.js → plugin-CnifGnSA.js} +1207 -1180
- package/dist/plugin.es.js +1 -1
- package/dist/src/framework/stores/theme.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/styles/themes/glass.css +194 -89
package/package.json
CHANGED
|
@@ -1,88 +1,108 @@
|
|
|
1
1
|
@layer nimpress-theme {
|
|
2
2
|
html[data-np-theme="glass"] {
|
|
3
|
-
--np-
|
|
4
|
-
|
|
3
|
+
--np-glass-ink: color-mix(in oklab, var(--np-brand) 14%, #121117);
|
|
4
|
+
|
|
5
|
+
--np-bg: color-mix(in oklab, var(--np-brand) 4%, #f6f6f8);
|
|
6
|
+
--np-bg-surface: color-mix(in oklab, var(--np-brand) 5%, #eeeef2);
|
|
5
7
|
--np-bg-sidebar: transparent;
|
|
6
|
-
--np-bg-card: color-mix(in oklab, var(--np-brand)
|
|
7
|
-
--np-bg-code-inline: color-mix(in oklab, var(--np-brand) 9%, rgb(255 255 255 / 0.
|
|
8
|
-
--np-bg-code-block: color-mix(in oklab, var(--np-brand)
|
|
8
|
+
--np-bg-card: color-mix(in oklab, var(--np-brand) 2%, #fdfdfe);
|
|
9
|
+
--np-bg-code-inline: color-mix(in oklab, var(--np-brand) 9%, rgb(255 255 255 / 0.72));
|
|
10
|
+
--np-bg-code-block: color-mix(in oklab, var(--np-brand) 8%, #111015);
|
|
9
11
|
|
|
10
|
-
--np-text-primary:
|
|
11
|
-
--np-text-secondary: #
|
|
12
|
-
--np-text-muted: #
|
|
13
|
-
--np-text-faint: #
|
|
12
|
+
--np-text-primary: var(--np-glass-ink);
|
|
13
|
+
--np-text-secondary: color-mix(in oklab, var(--np-glass-ink) 82%, #ffffff);
|
|
14
|
+
--np-text-muted: color-mix(in oklab, var(--np-glass-ink) 70%, #ffffff);
|
|
15
|
+
--np-text-faint: color-mix(in oklab, var(--np-glass-ink) 62%, #ffffff);
|
|
14
16
|
|
|
15
|
-
--np-border:
|
|
16
|
-
--np-border-strong:
|
|
17
|
-
--np-divider:
|
|
17
|
+
--np-border: color-mix(in oklab, var(--np-glass-ink) 12%, transparent);
|
|
18
|
+
--np-border-strong: color-mix(in oklab, var(--np-glass-ink) 22%, transparent);
|
|
19
|
+
--np-divider: color-mix(in oklab, var(--np-glass-ink) 8%, transparent);
|
|
18
20
|
|
|
19
|
-
--np-table-header-bg: rgb(
|
|
20
|
-
--np-table-row-alt:
|
|
21
|
+
--np-table-header-bg: color-mix(in oklab, var(--np-glass-ink) 4%, rgb(255 255 255 / 0.5));
|
|
22
|
+
--np-table-row-alt: color-mix(in oklab, var(--np-glass-ink) 2%, transparent);
|
|
21
23
|
--np-table-row-hover: color-mix(in oklab, var(--np-brand) 8%, transparent);
|
|
22
24
|
|
|
23
25
|
--np-radius-sm: 8px;
|
|
24
26
|
--np-radius-md: 12px;
|
|
25
27
|
--np-radius-lg: 18px;
|
|
26
28
|
|
|
27
|
-
--np-
|
|
28
|
-
--np-shadow-
|
|
29
|
-
--np-shadow-
|
|
30
|
-
--np-shadow-
|
|
29
|
+
--np-glass-shade: color-mix(in oklab, var(--np-brand) 22%, #0c0b10);
|
|
30
|
+
--np-shadow-card: 0 1px 2px color-mix(in oklab, var(--np-glass-shade) 6%, transparent), 0 10px 28px -12px color-mix(in oklab, var(--np-glass-shade) 22%, transparent);
|
|
31
|
+
--np-shadow-popover: 0 2px 4px color-mix(in oklab, var(--np-glass-shade) 6%, transparent), 0 18px 40px -12px color-mix(in oklab, var(--np-glass-shade) 30%, transparent);
|
|
32
|
+
--np-shadow-modal: 0 2px 6px color-mix(in oklab, var(--np-glass-shade) 8%, transparent), 0 30px 70px -20px color-mix(in oklab, var(--np-glass-shade) 38%, transparent);
|
|
33
|
+
--np-shadow-dialog: 0 2px 6px color-mix(in oklab, var(--np-glass-shade) 10%, transparent), 0 40px 90px -24px color-mix(in oklab, var(--np-glass-shade) 46%, transparent);
|
|
31
34
|
|
|
32
|
-
--np-overlay: color-mix(in oklab, var(--np-brand)
|
|
33
|
-
--np-overlay-soft: rgb(
|
|
35
|
+
--np-overlay: color-mix(in oklab, var(--np-brand) 14%, rgb(12 11 16 / 0.4));
|
|
36
|
+
--np-overlay-soft: rgb(12 11 16 / 0.2);
|
|
34
37
|
|
|
35
|
-
--np-glass-ink-brand: color-mix(in oklab, var(--np-brand)
|
|
38
|
+
--np-glass-ink-brand: color-mix(in oklab, var(--np-brand) 78%, #000);
|
|
36
39
|
--np-link: var(--np-glass-ink-brand);
|
|
37
|
-
--np-glass-lamp: color-mix(in oklab, var(--np-brand)
|
|
38
|
-
--np-glass-
|
|
39
|
-
--np-glass-
|
|
40
|
-
--np-glass-
|
|
41
|
-
--np-glass-
|
|
42
|
-
--np-glass-
|
|
43
|
-
--np-glass-
|
|
44
|
-
--np-glass-
|
|
45
|
-
--np-glass-
|
|
46
|
-
--np-glass-
|
|
40
|
+
--np-glass-lamp: color-mix(in oklab, var(--np-brand) 34%, transparent);
|
|
41
|
+
--np-glass-lamp-far: color-mix(in oklab, oklch(from var(--np-brand) l c calc(h + 48)) 22%, transparent);
|
|
42
|
+
--np-glass-lamp-low: color-mix(in oklab, oklch(from var(--np-brand) l c calc(h - 36)) 18%, transparent);
|
|
43
|
+
--np-glass-ground: rgb(255 255 255 / 0.5);
|
|
44
|
+
--np-glass-cover: rgb(255 255 255 / 0.78);
|
|
45
|
+
--np-glass-slip: rgb(255 255 255 / 0.56);
|
|
46
|
+
--np-glass-edge: rgb(255 255 255 / 0.9);
|
|
47
|
+
--np-glass-rim: color-mix(in oklab, var(--np-glass-ink) 10%, transparent);
|
|
48
|
+
--np-glass-sheen: linear-gradient(160deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0) 72%, rgb(255 255 255 / 0.2) 100%);
|
|
49
|
+
--np-glass-frost: blur(24px) saturate(180%);
|
|
50
|
+
--np-glass-frost-light: blur(14px) saturate(160%);
|
|
51
|
+
--np-glass-frost-overlay: blur(8px) saturate(120%);
|
|
52
|
+
--np-glass-chip: rgb(255 255 255 / 0.55);
|
|
53
|
+
--np-glass-chip-ink: var(--np-glass-ink-brand);
|
|
54
|
+
--np-glass-chip-rim: color-mix(in oklab, var(--np-brand) 35%, transparent);
|
|
55
|
+
--np-glass-control: rgb(255 255 255 / 0.45);
|
|
56
|
+
--np-glass-control-hover: rgb(255 255 255 / 0.72);
|
|
57
|
+
--np-glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
47
58
|
}
|
|
48
59
|
|
|
49
60
|
html.dark[data-np-theme="glass"] {
|
|
50
|
-
--np-
|
|
51
|
-
|
|
52
|
-
--np-bg
|
|
53
|
-
--np-bg-
|
|
54
|
-
--np-bg-
|
|
61
|
+
--np-glass-ink: color-mix(in oklab, var(--np-brand) 6%, #f5f5f8);
|
|
62
|
+
|
|
63
|
+
--np-bg: color-mix(in oklab, var(--np-brand) 5%, #0a0a0d);
|
|
64
|
+
--np-bg-surface: color-mix(in oklab, var(--np-brand) 6%, #16161b);
|
|
65
|
+
--np-bg-card: color-mix(in oklab, var(--np-brand) 5%, #1a1a20);
|
|
66
|
+
--np-bg-code-inline: color-mix(in oklab, var(--np-brand) 12%, rgb(255 255 255 / 0.07));
|
|
67
|
+
--np-bg-code-block: color-mix(in oklab, var(--np-brand) 6%, #0c0c10);
|
|
55
68
|
|
|
56
|
-
--np-text-primary:
|
|
57
|
-
--np-text-secondary: #
|
|
58
|
-
--np-text-muted: #
|
|
59
|
-
--np-text-faint: #
|
|
69
|
+
--np-text-primary: var(--np-glass-ink);
|
|
70
|
+
--np-text-secondary: color-mix(in oklab, var(--np-glass-ink) 82%, #000000);
|
|
71
|
+
--np-text-muted: color-mix(in oklab, var(--np-glass-ink) 68%, #000000);
|
|
72
|
+
--np-text-faint: color-mix(in oklab, var(--np-glass-ink) 58%, #000000);
|
|
60
73
|
|
|
61
|
-
--np-border: rgb(255
|
|
62
|
-
--np-border-strong: rgb(255
|
|
63
|
-
--np-divider: rgb(255
|
|
74
|
+
--np-border: rgb(255 255 255 / 0.1);
|
|
75
|
+
--np-border-strong: rgb(255 255 255 / 0.2);
|
|
76
|
+
--np-divider: rgb(255 255 255 / 0.07);
|
|
64
77
|
|
|
65
78
|
--np-table-header-bg: rgb(255 255 255 / 0.05);
|
|
66
79
|
--np-table-row-alt: rgb(255 255 255 / 0.025);
|
|
67
|
-
--np-table-row-hover: color-mix(in oklab, var(--np-brand)
|
|
80
|
+
--np-table-row-hover: color-mix(in oklab, var(--np-brand) 14%, rgb(255 255 255 / 0.04));
|
|
68
81
|
|
|
69
|
-
--np-shadow-card: 0 1px
|
|
70
|
-
--np-shadow-popover: 0 2px 4px rgb(0 0 0 / 0.
|
|
71
|
-
--np-shadow-modal: 0 2px 6px rgb(0 0 0 / 0.
|
|
72
|
-
--np-shadow-dialog: 0 2px 6px rgb(0 0 0 / 0.
|
|
82
|
+
--np-shadow-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 12px 30px -12px rgb(0 0 0 / 0.65);
|
|
83
|
+
--np-shadow-popover: 0 2px 4px rgb(0 0 0 / 0.35), 0 20px 44px -12px rgb(0 0 0 / 0.72);
|
|
84
|
+
--np-shadow-modal: 0 2px 6px rgb(0 0 0 / 0.4), 0 32px 72px -20px rgb(0 0 0 / 0.78);
|
|
85
|
+
--np-shadow-dialog: 0 2px 6px rgb(0 0 0 / 0.45), 0 40px 90px -24px rgb(0 0 0 / 0.82);
|
|
73
86
|
|
|
74
|
-
--np-overlay: color-mix(in oklab, var(--np-brand)
|
|
87
|
+
--np-overlay: color-mix(in oklab, var(--np-brand) 10%, rgb(0 0 0 / 0.6));
|
|
75
88
|
--np-overlay-soft: rgb(0 0 0 / 0.4);
|
|
76
89
|
|
|
77
|
-
--np-glass-ink-brand: color-mix(in oklab, var(--np-brand)
|
|
90
|
+
--np-glass-ink-brand: color-mix(in oklab, var(--np-brand) 64%, #fff);
|
|
78
91
|
--np-link: var(--np-glass-ink-brand);
|
|
79
|
-
--np-glass-lamp: color-mix(in oklab, var(--np-brand)
|
|
80
|
-
--np-glass-
|
|
81
|
-
--np-glass-
|
|
82
|
-
--np-glass-
|
|
83
|
-
--np-glass-
|
|
84
|
-
--np-glass-
|
|
85
|
-
--np-glass-
|
|
92
|
+
--np-glass-lamp: color-mix(in oklab, var(--np-brand) 42%, transparent);
|
|
93
|
+
--np-glass-lamp-far: color-mix(in oklab, oklch(from var(--np-brand) l c calc(h + 48)) 22%, transparent);
|
|
94
|
+
--np-glass-lamp-low: color-mix(in oklab, oklch(from var(--np-brand) l c calc(h - 36)) 20%, transparent);
|
|
95
|
+
--np-glass-ground: rgb(255 255 255 / 0.04);
|
|
96
|
+
--np-glass-cover: color-mix(in oklab, var(--np-brand) 4%, rgb(22 22 28 / 0.84));
|
|
97
|
+
--np-glass-slip: rgb(255 255 255 / 0.06);
|
|
98
|
+
--np-glass-edge: rgb(255 255 255 / 0.14);
|
|
99
|
+
--np-glass-rim: rgb(255 255 255 / 0.09);
|
|
100
|
+
--np-glass-chip: color-mix(in oklab, var(--np-brand) 22%, rgb(255 255 255 / 0.06));
|
|
101
|
+
--np-glass-chip-rim: color-mix(in oklab, var(--np-brand) 50%, transparent);
|
|
102
|
+
--np-glass-control: rgb(255 255 255 / 0.05);
|
|
103
|
+
--np-glass-control-hover: rgb(255 255 255 / 0.1);
|
|
104
|
+
--np-glass-sheen: linear-gradient(160deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0) 72%, rgb(255 255 255 / 0.03) 100%);
|
|
105
|
+
--np-glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
86
106
|
}
|
|
87
107
|
|
|
88
108
|
html[data-np-theme="glass"] ::selection {
|
|
@@ -102,7 +122,9 @@
|
|
|
102
122
|
html[data-np-theme="glass"] .np-app {
|
|
103
123
|
background-color: var(--np-bg);
|
|
104
124
|
background-image:
|
|
105
|
-
radial-gradient(ellipse
|
|
125
|
+
radial-gradient(ellipse 70% 80% at 0% 0%, var(--np-glass-lamp) 0%, transparent 68%),
|
|
126
|
+
radial-gradient(ellipse 50% 55% at 100% 8%, var(--np-glass-lamp-far) 0%, transparent 70%),
|
|
127
|
+
radial-gradient(ellipse 60% 55% at 72% 100%, var(--np-glass-lamp-low) 0%, transparent 72%);
|
|
106
128
|
background-attachment: fixed;
|
|
107
129
|
timeline-scope: --np-glass-scroll;
|
|
108
130
|
}
|
|
@@ -126,17 +148,27 @@
|
|
|
126
148
|
}
|
|
127
149
|
|
|
128
150
|
html[data-np-theme="glass"] .np-header {
|
|
129
|
-
--np-header-bg:
|
|
151
|
+
--np-header-bg: transparent;
|
|
152
|
+
--np-header-border: transparent;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
html[data-np-theme="glass"] .np-header::before {
|
|
156
|
+
content: "";
|
|
157
|
+
position: absolute;
|
|
158
|
+
inset: 0 0 -1px;
|
|
159
|
+
z-index: -1;
|
|
160
|
+
border-bottom: 1px solid var(--np-glass-rim);
|
|
161
|
+
background-color: var(--np-glass-ground);
|
|
130
162
|
background-image: var(--np-glass-grain);
|
|
131
|
-
--np-
|
|
163
|
+
box-shadow: inset 0 1px 0 var(--np-glass-edge), inset 0 -1px 0 var(--np-glass-edge);
|
|
132
164
|
backdrop-filter: var(--np-glass-frost);
|
|
133
165
|
-webkit-backdrop-filter: var(--np-glass-frost);
|
|
134
|
-
|
|
166
|
+
pointer-events: none;
|
|
135
167
|
}
|
|
136
168
|
|
|
137
169
|
html[data-np-theme="glass"] .np-aside {
|
|
138
170
|
background-color: var(--np-glass-ground);
|
|
139
|
-
background-image: var(--np-glass-grain);
|
|
171
|
+
background-image: var(--np-glass-sheen), var(--np-glass-grain);
|
|
140
172
|
backdrop-filter: var(--np-glass-frost);
|
|
141
173
|
-webkit-backdrop-filter: var(--np-glass-frost);
|
|
142
174
|
}
|
|
@@ -151,11 +183,10 @@
|
|
|
151
183
|
html[data-np-theme="glass"] .np-group-header.active,
|
|
152
184
|
html[data-np-theme="glass"] .np-subgroup-row.active {
|
|
153
185
|
color: var(--np-glass-ink-brand);
|
|
154
|
-
background-color: var(--np-glass-cover);
|
|
186
|
+
background-color: color-mix(in oklab, var(--np-brand) 10%, var(--np-glass-cover));
|
|
155
187
|
box-shadow:
|
|
156
|
-
|
|
157
|
-
0
|
|
158
|
-
0 4px 12px -6px color-mix(in oklab, var(--np-brand) 50%, transparent);
|
|
188
|
+
0 0 0 1px var(--np-glass-rim),
|
|
189
|
+
0 6px 16px -10px color-mix(in oklab, var(--np-brand) 45%, transparent);
|
|
159
190
|
}
|
|
160
191
|
|
|
161
192
|
html[data-np-theme="glass"] .np-subgroup-row.active .np-link.active {
|
|
@@ -170,6 +201,41 @@
|
|
|
170
201
|
color: var(--np-glass-ink-brand);
|
|
171
202
|
}
|
|
172
203
|
|
|
204
|
+
html[data-np-theme="glass"] .np-search-trigger {
|
|
205
|
+
border-color: var(--np-glass-rim);
|
|
206
|
+
background-color: var(--np-glass-control);
|
|
207
|
+
backdrop-filter: var(--np-glass-frost-light);
|
|
208
|
+
-webkit-backdrop-filter: var(--np-glass-frost-light);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
html[data-np-theme="glass"] .np-search-trigger:hover,
|
|
212
|
+
html[data-np-theme="glass"] .np-signin:hover,
|
|
213
|
+
html[data-np-theme="glass"] .np-icon-btn:hover {
|
|
214
|
+
background-color: var(--np-glass-control-hover);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
html[data-np-theme="glass"] .np-search-trigger kbd {
|
|
218
|
+
border-color: var(--np-glass-rim);
|
|
219
|
+
background-color: var(--np-glass-control-hover);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
html[data-np-theme="glass"] .np-signin {
|
|
223
|
+
border-color: var(--np-glass-rim);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
html[data-np-theme="glass"] .np-issue-kind {
|
|
227
|
+
color: var(--np-glass-chip-ink);
|
|
228
|
+
border-color: var(--np-glass-chip-rim);
|
|
229
|
+
background-color: var(--np-glass-chip);
|
|
230
|
+
backdrop-filter: var(--np-glass-frost-light);
|
|
231
|
+
-webkit-backdrop-filter: var(--np-glass-frost-light);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
html[data-np-theme="glass"] .np-issue-kind-bug {
|
|
235
|
+
color: color-mix(in oklab, var(--np-danger) 80%, var(--np-text-primary));
|
|
236
|
+
border-color: color-mix(in oklab, var(--np-danger) 45%, transparent);
|
|
237
|
+
}
|
|
238
|
+
|
|
173
239
|
html[data-np-theme="glass"] .np-page-backdrop {
|
|
174
240
|
display: none;
|
|
175
241
|
}
|
|
@@ -233,6 +299,8 @@
|
|
|
233
299
|
html[data-np-theme="glass"] .np-card,
|
|
234
300
|
html[data-np-theme="glass"] .np-feature-card {
|
|
235
301
|
background-color: var(--np-glass-slip);
|
|
302
|
+
background-image: var(--np-glass-sheen);
|
|
303
|
+
border-top-color: var(--np-glass-edge);
|
|
236
304
|
backdrop-filter: var(--np-glass-frost-light);
|
|
237
305
|
-webkit-backdrop-filter: var(--np-glass-frost-light);
|
|
238
306
|
border-color: var(--np-glass-rim);
|
|
@@ -264,6 +332,7 @@
|
|
|
264
332
|
|
|
265
333
|
html[data-np-theme="glass"] .np-search-modal {
|
|
266
334
|
background-color: var(--np-glass-cover);
|
|
335
|
+
background-image: var(--np-glass-sheen);
|
|
267
336
|
backdrop-filter: var(--np-glass-frost);
|
|
268
337
|
-webkit-backdrop-filter: var(--np-glass-frost);
|
|
269
338
|
border-color: var(--np-glass-rim);
|
|
@@ -286,21 +355,52 @@
|
|
|
286
355
|
}
|
|
287
356
|
|
|
288
357
|
@supports (animation-timeline: scroll()) {
|
|
289
|
-
html[data-np-theme="glass"] .np-header {
|
|
358
|
+
html[data-np-theme="glass"] .np-header::before {
|
|
290
359
|
animation: np-glass-header-frost linear both;
|
|
291
360
|
animation-timeline: --np-glass-scroll;
|
|
292
361
|
animation-range: 0 96px;
|
|
293
362
|
}
|
|
363
|
+
|
|
364
|
+
html[data-np-theme="glass"] .np-header-lead {
|
|
365
|
+
position: relative;
|
|
366
|
+
isolation: isolate;
|
|
367
|
+
justify-self: start;
|
|
368
|
+
width: fit-content;
|
|
369
|
+
max-width: 100%;
|
|
370
|
+
height: calc(var(--np-header-height) - 16px);
|
|
371
|
+
padding: 0 18px 0 12px;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
html[data-np-theme="glass"] .np-header-lead::before {
|
|
375
|
+
content: "";
|
|
376
|
+
position: absolute;
|
|
377
|
+
inset: 0;
|
|
378
|
+
z-index: -1;
|
|
379
|
+
border: 1px solid var(--np-glass-rim);
|
|
380
|
+
border-radius: var(--np-radius-pill);
|
|
381
|
+
background-color: var(--np-glass-ground);
|
|
382
|
+
backdrop-filter: var(--np-glass-frost);
|
|
383
|
+
-webkit-backdrop-filter: var(--np-glass-frost);
|
|
384
|
+
pointer-events: none;
|
|
385
|
+
animation: np-glass-lead-clear linear both;
|
|
386
|
+
animation-timeline: --np-glass-scroll;
|
|
387
|
+
animation-range: 0 96px;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
html[data-np-theme="glass"] .np-header-lead .np-crumbs-slot {
|
|
391
|
+
width: auto;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
@keyframes np-glass-lead-clear {
|
|
396
|
+
to {
|
|
397
|
+
opacity: 0;
|
|
398
|
+
}
|
|
294
399
|
}
|
|
295
400
|
|
|
296
401
|
@keyframes np-glass-header-frost {
|
|
297
402
|
from {
|
|
298
|
-
|
|
299
|
-
background-image: none;
|
|
300
|
-
border-bottom-color: transparent;
|
|
301
|
-
box-shadow: none;
|
|
302
|
-
backdrop-filter: blur(0) saturate(100%);
|
|
303
|
-
-webkit-backdrop-filter: blur(0) saturate(100%);
|
|
403
|
+
opacity: 0;
|
|
304
404
|
}
|
|
305
405
|
}
|
|
306
406
|
|
|
@@ -327,7 +427,11 @@
|
|
|
327
427
|
}
|
|
328
428
|
|
|
329
429
|
@media (prefers-reduced-motion: reduce) {
|
|
330
|
-
html[data-np-theme="glass"] .np-header {
|
|
430
|
+
html[data-np-theme="glass"] .np-header::before {
|
|
431
|
+
animation: none;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
html[data-np-theme="glass"] .np-header-lead::before {
|
|
331
435
|
animation: none;
|
|
332
436
|
}
|
|
333
437
|
|
|
@@ -343,37 +447,38 @@
|
|
|
343
447
|
}
|
|
344
448
|
|
|
345
449
|
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
|
|
346
|
-
html[data-np-theme="glass"] .np-header {
|
|
450
|
+
html[data-np-theme="glass"] .np-header::before {
|
|
347
451
|
animation: none;
|
|
348
452
|
}
|
|
349
453
|
|
|
350
454
|
html[data-np-theme="glass"] {
|
|
351
|
-
--np-glass-ground: color-mix(in oklab, var(--np-brand) 4%, #
|
|
455
|
+
--np-glass-ground: color-mix(in oklab, var(--np-brand) 4%, #f3f3f6);
|
|
352
456
|
--np-glass-cover: #ffffff;
|
|
353
|
-
--np-glass-slip: #
|
|
354
|
-
--np-glass-rim:
|
|
457
|
+
--np-glass-slip: #fbfbfc;
|
|
458
|
+
--np-glass-rim: color-mix(in oklab, var(--np-glass-ink) 28%, transparent);
|
|
459
|
+
--np-glass-sheen: none;
|
|
355
460
|
--np-glass-frost: none;
|
|
356
461
|
--np-glass-frost-light: none;
|
|
357
462
|
--np-glass-frost-overlay: none;
|
|
358
463
|
--np-glass-grain: none;
|
|
359
464
|
--np-bg-card: #ffffff;
|
|
360
465
|
--np-bg-code-inline: color-mix(in oklab, var(--np-brand) 9%, #ffffff);
|
|
361
|
-
--np-table-header-bg: #
|
|
362
|
-
--np-table-row-alt: #
|
|
466
|
+
--np-table-header-bg: #f1f1f4;
|
|
467
|
+
--np-table-row-alt: #f9f9fb;
|
|
363
468
|
--np-table-row-hover: color-mix(in oklab, var(--np-brand) 8%, #ffffff);
|
|
364
469
|
}
|
|
365
470
|
|
|
366
471
|
html.dark[data-np-theme="glass"] {
|
|
367
|
-
--np-glass-ground: #
|
|
368
|
-
--np-glass-cover: #
|
|
369
|
-
--np-glass-slip: #
|
|
370
|
-
--np-glass-rim: rgb(255
|
|
472
|
+
--np-glass-ground: #17171c;
|
|
473
|
+
--np-glass-cover: #121216;
|
|
474
|
+
--np-glass-slip: #1e1e24;
|
|
475
|
+
--np-glass-rim: rgb(255 255 255 / 0.24);
|
|
371
476
|
--np-glass-grain: none;
|
|
372
|
-
--np-bg-card: #
|
|
373
|
-
--np-bg-code-inline: color-mix(in oklab, var(--np-brand) 10%, #
|
|
374
|
-
--np-table-header-bg: #
|
|
375
|
-
--np-table-row-alt: #
|
|
376
|
-
--np-table-row-hover: color-mix(in oklab, var(--np-brand) 12%, #
|
|
477
|
+
--np-bg-card: #1e1e24;
|
|
478
|
+
--np-bg-code-inline: color-mix(in oklab, var(--np-brand) 10%, #1e1e24);
|
|
479
|
+
--np-table-header-bg: #1b1b21;
|
|
480
|
+
--np-table-row-alt: #15151a;
|
|
481
|
+
--np-table-row-hover: color-mix(in oklab, var(--np-brand) 12%, #1b1b21);
|
|
377
482
|
}
|
|
378
483
|
}
|
|
379
484
|
}
|