@smallwebco/tinypivot-react 1.0.79 → 1.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +91 -1
- package/dist/index.cjs +14 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -5
- package/dist/index.d.ts +7 -5
- package/dist/index.js +14 -9
- package/dist/index.js.map +1 -1
- package/dist/style.css +727 -900
- package/package.json +2 -2
package/dist/style.css
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* TinyPivot - Shared Styles
|
|
3
3
|
* Import this file in your app: import '@smallwebco/tinypivot-react/style.css'
|
|
4
4
|
*/
|
|
5
|
+
@import './themes.css';
|
|
5
6
|
|
|
6
7
|
/* ==========================================================================
|
|
7
8
|
Reset and Base
|
|
@@ -17,32 +18,135 @@
|
|
|
17
18
|
.vpg-pivot-skeleton *::after,
|
|
18
19
|
.vpg-filter-dropdown *,
|
|
19
20
|
.vpg-filter-dropdown *::before,
|
|
20
|
-
.vpg-filter-dropdown *::after
|
|
21
|
+
.vpg-filter-dropdown *::after,
|
|
22
|
+
.vpg-modal-overlay *,
|
|
23
|
+
.vpg-modal-overlay *::before,
|
|
24
|
+
.vpg-modal-overlay *::after {
|
|
21
25
|
box-sizing: border-box;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
.vpg-data-grid,
|
|
25
29
|
.vpg-pivot-config,
|
|
26
30
|
.vpg-pivot-skeleton,
|
|
27
|
-
.vpg-filter-dropdown
|
|
31
|
+
.vpg-filter-dropdown,
|
|
32
|
+
.vpg-modal-overlay {
|
|
28
33
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
29
34
|
line-height: 1.5;
|
|
30
35
|
-webkit-font-smoothing: antialiased;
|
|
31
36
|
-moz-osx-font-smoothing: grayscale;
|
|
32
37
|
}
|
|
33
38
|
|
|
39
|
+
/* ==========================================================================
|
|
40
|
+
Theme Tokens
|
|
41
|
+
========================================================================== */
|
|
42
|
+
/* Light defaults */
|
|
43
|
+
.vpg-data-grid,
|
|
44
|
+
.vpg-pivot-config,
|
|
45
|
+
.vpg-pivot-skeleton,
|
|
46
|
+
.vpg-filter-dropdown,
|
|
47
|
+
.vpg-modal-overlay {
|
|
48
|
+
--vpg-surface-bg: #ffffff;
|
|
49
|
+
--vpg-surface-panel: #f8fafc;
|
|
50
|
+
--vpg-surface-elevated: #ffffff;
|
|
51
|
+
--vpg-surface-hover: #f1f5f9;
|
|
52
|
+
--vpg-surface-selected: #eef2ff;
|
|
53
|
+
--vpg-surface-striped: #f9fafb;
|
|
54
|
+
--vpg-text-primary: #1f2937;
|
|
55
|
+
--vpg-text-secondary: #475569;
|
|
56
|
+
--vpg-text-muted: #94a3b8;
|
|
57
|
+
--vpg-text-inverse: #ffffff;
|
|
58
|
+
--vpg-border-default: #e2e8f0;
|
|
59
|
+
--vpg-border-strong: #cbd5e1;
|
|
60
|
+
--vpg-border-subtle: #f1f5f9;
|
|
61
|
+
--vpg-accent: #4f46e5;
|
|
62
|
+
--vpg-accent-hover: #4338ca;
|
|
63
|
+
--vpg-accent-soft-bg: #eef2ff;
|
|
64
|
+
--vpg-accent-soft-text: #4338ca;
|
|
65
|
+
--vpg-focus-ring: var(--vpg-accent);
|
|
66
|
+
--vpg-state-error: #dc2626;
|
|
67
|
+
--vpg-state-warning: #d97706;
|
|
68
|
+
--vpg-state-success: #059669;
|
|
69
|
+
--vpg-state-info: #0284c7;
|
|
70
|
+
--vpg-scrollbar-thumb: #cbd5e1;
|
|
71
|
+
--vpg-scrollbar-track: #f1f5f9;
|
|
72
|
+
--vpg-dim-row-bg: #eef2ff;
|
|
73
|
+
--vpg-dim-row-text: #3730a3;
|
|
74
|
+
--vpg-dim-row-border: #c7d2fe;
|
|
75
|
+
--vpg-dim-col-bg: #f5f3ff;
|
|
76
|
+
--vpg-dim-col-text: #6d28d9;
|
|
77
|
+
--vpg-dim-col-border: #ddd6fe;
|
|
78
|
+
--vpg-dim-value-bg: #ecfdf5;
|
|
79
|
+
--vpg-dim-value-text: #047857;
|
|
80
|
+
--vpg-dim-value-border: #a7f3d0;
|
|
81
|
+
--vpg-dim-calc-bg: #fdf4ff;
|
|
82
|
+
--vpg-dim-calc-text: #86198f;
|
|
83
|
+
--vpg-dim-calc-border: #f0abfc;
|
|
84
|
+
--vpg-highlight-bg: #fef3c7;
|
|
85
|
+
--vpg-highlight-text: #92400e;
|
|
86
|
+
--vpg-highlight-border: #fde68a;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Dark overrides */
|
|
90
|
+
.vpg-data-grid.vpg-theme-dark,
|
|
91
|
+
.vpg-pivot-config.vpg-theme-dark,
|
|
92
|
+
.vpg-pivot-skeleton.vpg-theme-dark,
|
|
93
|
+
.vpg-filter-dropdown.vpg-theme-dark,
|
|
94
|
+
.vpg-modal-overlay.vpg-theme-dark {
|
|
95
|
+
--vpg-surface-bg: #0f172a;
|
|
96
|
+
--vpg-surface-panel: #1e293b;
|
|
97
|
+
--vpg-surface-elevated: #1e293b;
|
|
98
|
+
--vpg-surface-hover: #334155;
|
|
99
|
+
--vpg-surface-selected: #1e1b4b;
|
|
100
|
+
--vpg-surface-striped: #1a2434;
|
|
101
|
+
--vpg-text-primary: #e2e8f0;
|
|
102
|
+
--vpg-text-secondary: #94a3b8;
|
|
103
|
+
--vpg-text-muted: #64748b;
|
|
104
|
+
--vpg-text-inverse: #ffffff;
|
|
105
|
+
--vpg-border-default: #334155;
|
|
106
|
+
--vpg-border-strong: #475569;
|
|
107
|
+
--vpg-border-subtle: #1e293b;
|
|
108
|
+
--vpg-accent: #8b5cf6;
|
|
109
|
+
--vpg-accent-hover: #7c3aed;
|
|
110
|
+
--vpg-accent-soft-bg: #1e1b4b;
|
|
111
|
+
--vpg-accent-soft-text: #c4b5fd;
|
|
112
|
+
--vpg-focus-ring: var(--vpg-accent);
|
|
113
|
+
--vpg-state-error: #f87171;
|
|
114
|
+
--vpg-state-warning: #fbbf24;
|
|
115
|
+
--vpg-state-success: #34d399;
|
|
116
|
+
--vpg-state-info: #38bdf8;
|
|
117
|
+
--vpg-scrollbar-thumb: #475569;
|
|
118
|
+
--vpg-scrollbar-track: #1e293b;
|
|
119
|
+
--vpg-dim-row-bg: #312e81;
|
|
120
|
+
--vpg-dim-row-text: #c7d2fe;
|
|
121
|
+
--vpg-dim-row-border: #4338ca;
|
|
122
|
+
--vpg-dim-col-bg: #4c1d95;
|
|
123
|
+
--vpg-dim-col-text: #c4b5fd;
|
|
124
|
+
--vpg-dim-col-border: #6d28d9;
|
|
125
|
+
--vpg-dim-value-bg: #064e3b;
|
|
126
|
+
--vpg-dim-value-text: #6ee7b7;
|
|
127
|
+
--vpg-dim-value-border: #047857;
|
|
128
|
+
--vpg-dim-calc-bg: #581c87;
|
|
129
|
+
--vpg-dim-calc-text: #f0abfc;
|
|
130
|
+
--vpg-dim-calc-border: #86198f;
|
|
131
|
+
--vpg-highlight-bg: #451a03;
|
|
132
|
+
--vpg-highlight-text: #fcd34d;
|
|
133
|
+
--vpg-highlight-border: #92400e;
|
|
134
|
+
}
|
|
135
|
+
|
|
34
136
|
.vpg-data-grid :focus-visible,
|
|
35
137
|
.vpg-pivot-config :focus-visible,
|
|
36
138
|
.vpg-pivot-skeleton :focus-visible,
|
|
37
|
-
.vpg-filter-dropdown :focus-visible
|
|
38
|
-
|
|
139
|
+
.vpg-filter-dropdown :focus-visible,
|
|
140
|
+
.vpg-modal-overlay :focus-visible {
|
|
141
|
+
outline: 2px solid var(--vpg-focus-ring);
|
|
39
142
|
outline-offset: 2px;
|
|
40
143
|
}
|
|
41
144
|
|
|
42
145
|
.vpg-data-grid button,
|
|
43
146
|
.vpg-pivot-config button,
|
|
44
147
|
.vpg-pivot-skeleton button,
|
|
45
|
-
.vpg-filter-dropdown button
|
|
148
|
+
.vpg-filter-dropdown button,
|
|
149
|
+
.vpg-modal-overlay button {
|
|
46
150
|
font-family: inherit;
|
|
47
151
|
}
|
|
48
152
|
|
|
@@ -50,10 +154,12 @@
|
|
|
50
154
|
.vpg-pivot-config input,
|
|
51
155
|
.vpg-pivot-skeleton input,
|
|
52
156
|
.vpg-filter-dropdown input,
|
|
157
|
+
.vpg-modal-overlay input,
|
|
53
158
|
.vpg-data-grid select,
|
|
54
159
|
.vpg-pivot-config select,
|
|
55
160
|
.vpg-pivot-skeleton select,
|
|
56
|
-
.vpg-filter-dropdown select
|
|
161
|
+
.vpg-filter-dropdown select,
|
|
162
|
+
.vpg-modal-overlay select {
|
|
57
163
|
font-family: inherit;
|
|
58
164
|
}
|
|
59
165
|
|
|
@@ -71,10 +177,10 @@
|
|
|
71
177
|
.vpg-data-grid {
|
|
72
178
|
display: flex;
|
|
73
179
|
flex-direction: column;
|
|
74
|
-
background:
|
|
180
|
+
background: var(--vpg-surface-bg);
|
|
75
181
|
border-radius: 0.5rem;
|
|
76
182
|
overflow: hidden;
|
|
77
|
-
border: 1px solid
|
|
183
|
+
border: 1px solid var(--vpg-border-default);
|
|
78
184
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
79
185
|
margin-bottom: 1.5rem;
|
|
80
186
|
position: relative;
|
|
@@ -88,8 +194,8 @@
|
|
|
88
194
|
align-items: center;
|
|
89
195
|
justify-content: space-between;
|
|
90
196
|
padding: 0.5rem 1rem;
|
|
91
|
-
background:
|
|
92
|
-
border-bottom: 1px solid
|
|
197
|
+
background: var(--vpg-surface-panel);
|
|
198
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
93
199
|
}
|
|
94
200
|
|
|
95
201
|
.vpg-toolbar-left,
|
|
@@ -104,9 +210,9 @@
|
|
|
104
210
|
/* View Toggle */
|
|
105
211
|
.vpg-view-toggle {
|
|
106
212
|
display: flex;
|
|
107
|
-
background:
|
|
213
|
+
background: var(--vpg-surface-bg);
|
|
108
214
|
border-radius: 0.5rem;
|
|
109
|
-
border: 1px solid
|
|
215
|
+
border: 1px solid var(--vpg-border-default);
|
|
110
216
|
overflow: hidden;
|
|
111
217
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
112
218
|
}
|
|
@@ -118,20 +224,20 @@
|
|
|
118
224
|
padding: 0.375rem 0.75rem;
|
|
119
225
|
font-size: 0.75rem;
|
|
120
226
|
font-weight: 500;
|
|
121
|
-
color:
|
|
227
|
+
color: var(--vpg-text-secondary);
|
|
122
228
|
background: transparent;
|
|
123
229
|
border: none;
|
|
124
230
|
cursor: pointer;
|
|
125
231
|
transition: all 0.15s;
|
|
126
232
|
}
|
|
127
233
|
|
|
128
|
-
.vpg-view-btn:hover { background:
|
|
234
|
+
.vpg-view-btn:hover { background: var(--vpg-surface-panel); }
|
|
129
235
|
.vpg-view-btn.active {
|
|
130
|
-
background:
|
|
131
|
-
color:
|
|
236
|
+
background: var(--vpg-accent);
|
|
237
|
+
color: var(--vpg-text-inverse);
|
|
132
238
|
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.1);
|
|
133
239
|
}
|
|
134
|
-
.vpg-view-btn.vpg-pivot-btn.active { background:
|
|
240
|
+
.vpg-view-btn.vpg-pivot-btn.active { background: var(--vpg-accent); }
|
|
135
241
|
|
|
136
242
|
/* Font Size Control */
|
|
137
243
|
.vpg-font-size-control {
|
|
@@ -142,14 +248,14 @@
|
|
|
142
248
|
|
|
143
249
|
.vpg-label {
|
|
144
250
|
font-size: 0.75rem;
|
|
145
|
-
color:
|
|
251
|
+
color: var(--vpg-text-secondary);
|
|
146
252
|
}
|
|
147
253
|
|
|
148
254
|
.vpg-font-size-toggle {
|
|
149
255
|
display: flex;
|
|
150
|
-
background:
|
|
256
|
+
background: var(--vpg-surface-bg);
|
|
151
257
|
border-radius: 0.25rem;
|
|
152
|
-
border: 1px solid
|
|
258
|
+
border: 1px solid var(--vpg-border-default);
|
|
153
259
|
overflow: hidden;
|
|
154
260
|
}
|
|
155
261
|
|
|
@@ -157,15 +263,15 @@
|
|
|
157
263
|
padding: 0.25rem 0.5rem;
|
|
158
264
|
font-size: 0.75rem;
|
|
159
265
|
font-weight: 500;
|
|
160
|
-
color:
|
|
266
|
+
color: var(--vpg-text-secondary);
|
|
161
267
|
background: transparent;
|
|
162
268
|
border: none;
|
|
163
269
|
cursor: pointer;
|
|
164
270
|
transition: all 0.15s;
|
|
165
271
|
}
|
|
166
272
|
|
|
167
|
-
.vpg-font-size-btn:hover { background:
|
|
168
|
-
.vpg-font-size-btn.active { background:
|
|
273
|
+
.vpg-font-size-btn:hover { background: var(--vpg-surface-hover); }
|
|
274
|
+
.vpg-font-size-btn.active { background: var(--vpg-accent); color: var(--vpg-text-inverse); }
|
|
169
275
|
|
|
170
276
|
/* Filter Info */
|
|
171
277
|
.vpg-filter-info {
|
|
@@ -173,10 +279,10 @@
|
|
|
173
279
|
align-items: center;
|
|
174
280
|
gap: 0.5rem;
|
|
175
281
|
font-size: 0.875rem;
|
|
176
|
-
color:
|
|
282
|
+
color: var(--vpg-text-secondary);
|
|
177
283
|
}
|
|
178
284
|
|
|
179
|
-
.vpg-filter-info svg { color:
|
|
285
|
+
.vpg-filter-info svg { color: var(--vpg-accent); }
|
|
180
286
|
|
|
181
287
|
/* Reset to Full Data Button */
|
|
182
288
|
.vpg-reset-data-btn {
|
|
@@ -187,16 +293,16 @@
|
|
|
187
293
|
font-size: 0.75rem;
|
|
188
294
|
font-weight: 500;
|
|
189
295
|
border-radius: 0.375rem;
|
|
190
|
-
background:
|
|
191
|
-
border: 1px solid
|
|
192
|
-
color:
|
|
296
|
+
background: var(--vpg-highlight-bg);
|
|
297
|
+
border: 1px solid var(--vpg-highlight-border);
|
|
298
|
+
color: var(--vpg-highlight-text);
|
|
193
299
|
cursor: pointer;
|
|
194
300
|
transition: all 0.15s;
|
|
195
301
|
}
|
|
196
302
|
|
|
197
303
|
.vpg-reset-data-btn:hover {
|
|
198
|
-
background:
|
|
199
|
-
border-color:
|
|
304
|
+
background: var(--vpg-highlight-border);
|
|
305
|
+
border-color: var(--vpg-highlight-text);
|
|
200
306
|
}
|
|
201
307
|
|
|
202
308
|
.vpg-reset-data-btn svg {
|
|
@@ -215,34 +321,34 @@
|
|
|
215
321
|
background: transparent;
|
|
216
322
|
border: none;
|
|
217
323
|
border-radius: 0.375rem;
|
|
218
|
-
color:
|
|
324
|
+
color: var(--vpg-text-secondary);
|
|
219
325
|
cursor: pointer;
|
|
220
326
|
transition: all 0.15s;
|
|
221
327
|
}
|
|
222
328
|
|
|
223
|
-
.vpg-icon-btn:hover { background:
|
|
329
|
+
.vpg-icon-btn:hover { background: var(--vpg-surface-hover); color: var(--vpg-text-secondary); }
|
|
224
330
|
|
|
225
331
|
.vpg-search-box {
|
|
226
332
|
display: flex;
|
|
227
333
|
align-items: center;
|
|
228
334
|
gap: 0.375rem;
|
|
229
335
|
padding: 0.375rem 0.625rem;
|
|
230
|
-
background:
|
|
336
|
+
background: var(--vpg-surface-panel);
|
|
231
337
|
border: 1px solid transparent;
|
|
232
338
|
border-radius: 0.5rem;
|
|
233
339
|
transition: all 0.15s ease;
|
|
234
340
|
}
|
|
235
341
|
|
|
236
342
|
.vpg-search-box:focus-within {
|
|
237
|
-
background:
|
|
238
|
-
border-color:
|
|
343
|
+
background: var(--vpg-surface-bg);
|
|
344
|
+
border-color: var(--vpg-border-default);
|
|
239
345
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
|
|
240
346
|
}
|
|
241
347
|
|
|
242
348
|
.vpg-search-icon {
|
|
243
349
|
width: 1rem;
|
|
244
350
|
height: 1rem;
|
|
245
|
-
color:
|
|
351
|
+
color: var(--vpg-text-muted);
|
|
246
352
|
flex-shrink: 0;
|
|
247
353
|
}
|
|
248
354
|
|
|
@@ -252,7 +358,7 @@
|
|
|
252
358
|
box-shadow: none !important;
|
|
253
359
|
background: transparent;
|
|
254
360
|
font-size: 0.8125rem;
|
|
255
|
-
color:
|
|
361
|
+
color: var(--vpg-text-primary);
|
|
256
362
|
width: 200px;
|
|
257
363
|
}
|
|
258
364
|
|
|
@@ -262,26 +368,26 @@
|
|
|
262
368
|
border: none !important;
|
|
263
369
|
box-shadow: none !important;
|
|
264
370
|
}
|
|
265
|
-
.vpg-search-input::-moz-placeholder { color:
|
|
266
|
-
.vpg-search-input::placeholder { color:
|
|
371
|
+
.vpg-search-input::-moz-placeholder { color: var(--vpg-text-muted); }
|
|
372
|
+
.vpg-search-input::placeholder { color: var(--vpg-text-muted); }
|
|
267
373
|
|
|
268
374
|
.vpg-search-clear {
|
|
269
375
|
display: flex;
|
|
270
376
|
align-items: center;
|
|
271
377
|
justify-content: center;
|
|
272
378
|
padding: 0.125rem;
|
|
273
|
-
background:
|
|
379
|
+
background: var(--vpg-surface-hover);
|
|
274
380
|
border: none;
|
|
275
381
|
border-radius: 50%;
|
|
276
|
-
color:
|
|
382
|
+
color: var(--vpg-text-secondary);
|
|
277
383
|
cursor: pointer;
|
|
278
384
|
}
|
|
279
385
|
|
|
280
|
-
.vpg-search-clear:hover { background:
|
|
386
|
+
.vpg-search-clear:hover { background: var(--vpg-border-default); color: var(--vpg-text-secondary); }
|
|
281
387
|
|
|
282
388
|
.vpg-search-info {
|
|
283
389
|
font-size: 0.75rem;
|
|
284
|
-
color:
|
|
390
|
+
color: var(--vpg-text-secondary);
|
|
285
391
|
font-style: italic;
|
|
286
392
|
}
|
|
287
393
|
|
|
@@ -293,16 +399,16 @@
|
|
|
293
399
|
padding: 0.375rem 0.75rem;
|
|
294
400
|
font-size: 0.875rem;
|
|
295
401
|
font-weight: 500;
|
|
296
|
-
color:
|
|
297
|
-
background:
|
|
298
|
-
border: 1px solid
|
|
402
|
+
color: var(--vpg-text-secondary);
|
|
403
|
+
background: var(--vpg-surface-bg);
|
|
404
|
+
border: 1px solid var(--vpg-border-default);
|
|
299
405
|
border-radius: 0.375rem;
|
|
300
406
|
cursor: pointer;
|
|
301
407
|
transition: all 0.15s;
|
|
302
408
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
303
409
|
}
|
|
304
410
|
|
|
305
|
-
.vpg-clear-filters:hover { background:
|
|
411
|
+
.vpg-clear-filters:hover { background: var(--vpg-surface-panel); border-color: var(--vpg-border-strong); }
|
|
306
412
|
|
|
307
413
|
.vpg-export-btn {
|
|
308
414
|
display: flex;
|
|
@@ -311,15 +417,15 @@
|
|
|
311
417
|
padding: 0.375rem 0.75rem;
|
|
312
418
|
font-size: 0.75rem;
|
|
313
419
|
font-weight: 500;
|
|
314
|
-
color:
|
|
315
|
-
background:
|
|
316
|
-
border: 1px solid
|
|
420
|
+
color: var(--vpg-accent);
|
|
421
|
+
background: var(--vpg-accent-soft-bg);
|
|
422
|
+
border: 1px solid var(--vpg-accent);
|
|
317
423
|
border-radius: 0.375rem;
|
|
318
424
|
cursor: pointer;
|
|
319
425
|
transition: all 0.15s;
|
|
320
426
|
}
|
|
321
427
|
|
|
322
|
-
.vpg-export-btn:hover { background:
|
|
428
|
+
.vpg-export-btn:hover { background: var(--vpg-accent); color: var(--vpg-text-inverse); }
|
|
323
429
|
|
|
324
430
|
.vpg-config-toggle {
|
|
325
431
|
display: flex;
|
|
@@ -329,18 +435,18 @@
|
|
|
329
435
|
font-size: 0.75rem;
|
|
330
436
|
font-weight: 500;
|
|
331
437
|
border-radius: 0.375rem;
|
|
332
|
-
background:
|
|
333
|
-
border: 1px solid
|
|
334
|
-
color:
|
|
438
|
+
background: var(--vpg-surface-bg);
|
|
439
|
+
border: 1px solid var(--vpg-border-default);
|
|
440
|
+
color: var(--vpg-text-secondary);
|
|
335
441
|
cursor: pointer;
|
|
336
442
|
transition: all 0.15s;
|
|
337
443
|
}
|
|
338
444
|
|
|
339
|
-
.vpg-config-toggle:hover { background:
|
|
445
|
+
.vpg-config-toggle:hover { background: var(--vpg-surface-panel); }
|
|
340
446
|
.vpg-config-toggle.active {
|
|
341
|
-
background:
|
|
342
|
-
border-color:
|
|
343
|
-
color:
|
|
447
|
+
background: var(--vpg-accent-soft-bg);
|
|
448
|
+
border-color: var(--vpg-accent);
|
|
449
|
+
color: var(--vpg-accent);
|
|
344
450
|
}
|
|
345
451
|
|
|
346
452
|
.vpg-pivot-status {
|
|
@@ -348,7 +454,7 @@
|
|
|
348
454
|
align-items: center;
|
|
349
455
|
gap: 0.5rem;
|
|
350
456
|
font-size: 0.875rem;
|
|
351
|
-
color:
|
|
457
|
+
color: var(--vpg-state-success);
|
|
352
458
|
}
|
|
353
459
|
|
|
354
460
|
/* ==========================================================================
|
|
@@ -379,15 +485,15 @@
|
|
|
379
485
|
.vpg-spinner {
|
|
380
486
|
width: 2rem;
|
|
381
487
|
height: 2rem;
|
|
382
|
-
border: 2px solid
|
|
383
|
-
border-top-color:
|
|
488
|
+
border: 2px solid var(--vpg-border-default);
|
|
489
|
+
border-top-color: var(--vpg-accent);
|
|
384
490
|
border-radius: 50%;
|
|
385
491
|
animation: vpg-spin 1s linear infinite;
|
|
386
492
|
}
|
|
387
493
|
|
|
388
494
|
@keyframes vpg-spin { to { transform: rotate(360deg); } }
|
|
389
495
|
|
|
390
|
-
.vpg-loading span { margin-top: 0.5rem; font-size: 0.875rem; color:
|
|
496
|
+
.vpg-loading span { margin-top: 0.5rem; font-size: 0.875rem; color: var(--vpg-text-secondary); }
|
|
391
497
|
|
|
392
498
|
.vpg-empty {
|
|
393
499
|
display: flex;
|
|
@@ -403,19 +509,19 @@
|
|
|
403
509
|
width: 5rem;
|
|
404
510
|
height: 5rem;
|
|
405
511
|
border-radius: 50%;
|
|
406
|
-
background:
|
|
512
|
+
background: var(--vpg-surface-hover);
|
|
407
513
|
display: flex;
|
|
408
514
|
align-items: center;
|
|
409
515
|
justify-content: center;
|
|
410
|
-
color:
|
|
516
|
+
color: var(--vpg-border-strong);
|
|
411
517
|
margin-bottom: 0.5rem;
|
|
412
518
|
}
|
|
413
519
|
|
|
414
|
-
.vpg-empty-icon.vpg-warning { background:
|
|
415
|
-
.vpg-empty span { color:
|
|
520
|
+
.vpg-empty-icon.vpg-warning { background: var(--vpg-highlight-bg); color: var(--vpg-highlight-border); }
|
|
521
|
+
.vpg-empty span { color: var(--vpg-text-secondary); font-weight: 500; }
|
|
416
522
|
|
|
417
523
|
.vpg-clear-link {
|
|
418
|
-
color:
|
|
524
|
+
color: var(--vpg-accent);
|
|
419
525
|
font-size: 0.875rem;
|
|
420
526
|
font-weight: 500;
|
|
421
527
|
margin-top: 0.25rem;
|
|
@@ -447,15 +553,15 @@
|
|
|
447
553
|
-webkit-user-select: none;
|
|
448
554
|
-moz-user-select: none;
|
|
449
555
|
user-select: none;
|
|
450
|
-
background:
|
|
556
|
+
background: var(--vpg-surface-panel);
|
|
451
557
|
transition: all 0.15s;
|
|
452
|
-
border-bottom: 1px solid
|
|
453
|
-
border-right: 1px solid
|
|
558
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
559
|
+
border-right: 1px solid var(--vpg-border-subtle);
|
|
454
560
|
}
|
|
455
561
|
|
|
456
|
-
.vpg-header-cell:hover { background:
|
|
562
|
+
.vpg-header-cell:hover { background: var(--vpg-surface-hover); }
|
|
457
563
|
.vpg-header-cell:last-child { border-right: none; }
|
|
458
|
-
.vpg-header-cell.vpg-has-filter { background:
|
|
564
|
+
.vpg-header-cell.vpg-has-filter { background: var(--vpg-surface-selected); }
|
|
459
565
|
.vpg-header-cell.vpg-is-sorted { background: #eff6ff; }
|
|
460
566
|
.vpg-header-cell.vpg-has-filter.vpg-is-sorted { background: #ede9fe; }
|
|
461
567
|
.vpg-header-cell.vpg-is-active {
|
|
@@ -473,7 +579,7 @@
|
|
|
473
579
|
.vpg-header-text {
|
|
474
580
|
font-size: 0.75rem;
|
|
475
581
|
font-weight: 600;
|
|
476
|
-
color:
|
|
582
|
+
color: var(--vpg-text-secondary);
|
|
477
583
|
text-transform: uppercase;
|
|
478
584
|
letter-spacing: 0.05em;
|
|
479
585
|
overflow: hidden;
|
|
@@ -489,18 +595,18 @@
|
|
|
489
595
|
}
|
|
490
596
|
|
|
491
597
|
.vpg-sort-indicator { color: #3b82f6; }
|
|
492
|
-
.vpg-filter-indicator { color:
|
|
598
|
+
.vpg-filter-indicator { color: var(--vpg-accent); }
|
|
493
599
|
|
|
494
600
|
.vpg-dropdown-arrow {
|
|
495
601
|
padding: 0.125rem;
|
|
496
602
|
border-radius: 0.25rem;
|
|
497
|
-
color:
|
|
603
|
+
color: var(--vpg-border-strong);
|
|
498
604
|
transition: all 0.15s;
|
|
499
605
|
cursor: pointer;
|
|
500
606
|
}
|
|
501
607
|
|
|
502
|
-
.vpg-dropdown-arrow:hover { background:
|
|
503
|
-
.vpg-header-cell:hover .vpg-dropdown-arrow { color:
|
|
608
|
+
.vpg-dropdown-arrow:hover { background: var(--vpg-border-default); color: var(--vpg-text-secondary); }
|
|
609
|
+
.vpg-header-cell:hover .vpg-dropdown-arrow { color: var(--vpg-text-muted); }
|
|
504
610
|
|
|
505
611
|
/* Resize Handle */
|
|
506
612
|
.vpg-resize-handle {
|
|
@@ -521,23 +627,23 @@
|
|
|
521
627
|
|
|
522
628
|
/* Rows */
|
|
523
629
|
.vpg-row { transition: background 0.15s; }
|
|
524
|
-
.vpg-row:nth-child(odd) { background:
|
|
525
|
-
.vpg-row:nth-child(even) { background:
|
|
526
|
-
.vpg-row:hover { background:
|
|
630
|
+
.vpg-row:nth-child(odd) { background: var(--vpg-surface-bg); }
|
|
631
|
+
.vpg-row:nth-child(even) { background: var(--vpg-surface-striped); }
|
|
632
|
+
.vpg-row:hover { background: var(--vpg-accent-soft-bg); }
|
|
527
633
|
|
|
528
634
|
/* Cells */
|
|
529
635
|
.vpg-cell {
|
|
530
636
|
padding: 0.625rem 1rem;
|
|
531
637
|
font-size: 0.875rem;
|
|
532
|
-
color:
|
|
638
|
+
color: var(--vpg-text-primary);
|
|
533
639
|
overflow: hidden;
|
|
534
640
|
text-overflow: ellipsis;
|
|
535
641
|
white-space: nowrap;
|
|
536
642
|
cursor: cell;
|
|
537
643
|
transition: all 0.15s;
|
|
538
644
|
max-width: 350px;
|
|
539
|
-
border-bottom: 1px solid
|
|
540
|
-
border-right: 1px solid
|
|
645
|
+
border-bottom: 1px solid var(--vpg-border-subtle);
|
|
646
|
+
border-right: 1px solid var(--vpg-surface-panel);
|
|
541
647
|
}
|
|
542
648
|
|
|
543
649
|
.vpg-cell:last-child { border-right: none; }
|
|
@@ -554,7 +660,7 @@
|
|
|
554
660
|
.vpg-cell.vpg-is-number {
|
|
555
661
|
text-align: right;
|
|
556
662
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
557
|
-
color:
|
|
663
|
+
color: var(--vpg-text-primary);
|
|
558
664
|
font-variant-numeric: tabular-nums;
|
|
559
665
|
}
|
|
560
666
|
|
|
@@ -584,14 +690,14 @@
|
|
|
584
690
|
.vpg-footer-left {
|
|
585
691
|
display: flex;
|
|
586
692
|
align-items: center;
|
|
587
|
-
color:
|
|
693
|
+
color: var(--vpg-text-secondary);
|
|
588
694
|
}
|
|
589
695
|
|
|
590
|
-
.vpg-filtered-count { color:
|
|
591
|
-
.vpg-separator { color:
|
|
592
|
-
.vpg-pivot-label { color:
|
|
696
|
+
.vpg-filtered-count { color: var(--vpg-accent); font-weight: 500; }
|
|
697
|
+
.vpg-separator { color: var(--vpg-text-muted); margin: 0 0.25rem; }
|
|
698
|
+
.vpg-pivot-label { color: var(--vpg-accent); font-weight: 500; }
|
|
593
699
|
.vpg-footer-right { display: flex; align-items: center; gap: 1rem; }
|
|
594
|
-
.vpg-filtered-note { font-size: 0.75rem; color:
|
|
700
|
+
.vpg-filtered-note { font-size: 0.75rem; color: var(--vpg-text-muted); margin-left: 0.25rem; }
|
|
595
701
|
|
|
596
702
|
/* Selection Stats */
|
|
597
703
|
.vpg-selection-stats {
|
|
@@ -605,9 +711,9 @@
|
|
|
605
711
|
}
|
|
606
712
|
|
|
607
713
|
.vpg-stat { display: flex; align-items: center; gap: 0.25rem; }
|
|
608
|
-
.vpg-stat-label { font-size: 0.6875rem; color:
|
|
609
|
-
.vpg-stat-value { font-size: 0.6875rem; color:
|
|
610
|
-
.vpg-stat-divider { color:
|
|
714
|
+
.vpg-stat-label { font-size: 0.6875rem; color: var(--vpg-text-secondary); font-weight: 400; }
|
|
715
|
+
.vpg-stat-value { font-size: 0.6875rem; color: var(--vpg-accent); font-weight: 500; font-variant-numeric: tabular-nums; }
|
|
716
|
+
.vpg-stat-divider { color: var(--vpg-border-strong); }
|
|
611
717
|
|
|
612
718
|
/* Watermark */
|
|
613
719
|
.vpg-watermark-inline a {
|
|
@@ -616,19 +722,23 @@
|
|
|
616
722
|
gap: 0.35rem;
|
|
617
723
|
font-size: 0.7rem;
|
|
618
724
|
font-weight: 500;
|
|
619
|
-
color:
|
|
725
|
+
color: var(--vpg-text-secondary);
|
|
620
726
|
text-decoration: none;
|
|
621
727
|
padding: 0.25rem 0.5rem;
|
|
622
|
-
background: linear-gradient(135deg,
|
|
623
|
-
border: 1px solid
|
|
728
|
+
background: linear-gradient(135deg, var(--vpg-surface-hover) 0%, var(--vpg-border-default) 100%);
|
|
729
|
+
border: 1px solid var(--vpg-border-strong);
|
|
624
730
|
border-radius: 0.25rem;
|
|
625
731
|
transition: all 0.15s ease;
|
|
626
732
|
}
|
|
627
733
|
|
|
734
|
+
.vpg-data-grid.vpg-theme-dark .vpg-watermark-inline a {
|
|
735
|
+
background: linear-gradient(135deg, var(--vpg-surface-panel) 0%, var(--vpg-surface-hover) 100%);
|
|
736
|
+
}
|
|
737
|
+
|
|
628
738
|
.vpg-watermark-inline a:hover {
|
|
629
|
-
color:
|
|
630
|
-
background: linear-gradient(135deg,
|
|
631
|
-
border-color:
|
|
739
|
+
color: var(--vpg-text-secondary);
|
|
740
|
+
background: linear-gradient(135deg, var(--vpg-border-default) 0%, var(--vpg-border-strong) 100%);
|
|
741
|
+
border-color: var(--vpg-text-muted);
|
|
632
742
|
}
|
|
633
743
|
|
|
634
744
|
.vpg-watermark-inline a svg {
|
|
@@ -636,57 +746,32 @@
|
|
|
636
746
|
opacity: 0.7;
|
|
637
747
|
}
|
|
638
748
|
|
|
639
|
-
/* Watermark Dark Mode */
|
|
640
|
-
.vpg-theme-dark .vpg-watermark-inline a {
|
|
641
|
-
color: #94a3b8;
|
|
642
|
-
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
|
643
|
-
border-color: #475569;
|
|
644
|
-
}
|
|
645
|
-
|
|
646
|
-
.vpg-theme-dark .vpg-watermark-inline a:hover {
|
|
647
|
-
color: #cbd5e1;
|
|
648
|
-
background: linear-gradient(135deg, #334155 0%, #475569 100%);
|
|
649
|
-
border-color: #64748b;
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
/* Reset Data Button Dark Mode */
|
|
653
|
-
.vpg-theme-dark .vpg-reset-data-btn {
|
|
654
|
-
background: rgba(251, 191, 36, 0.15);
|
|
655
|
-
border-color: rgba(251, 191, 36, 0.4);
|
|
656
|
-
color: #fbbf24;
|
|
657
|
-
}
|
|
658
|
-
|
|
659
|
-
.vpg-theme-dark .vpg-reset-data-btn:hover {
|
|
660
|
-
background: rgba(251, 191, 36, 0.25);
|
|
661
|
-
border-color: rgba(251, 191, 36, 0.6);
|
|
662
|
-
}
|
|
663
|
-
|
|
664
749
|
/* Demo Banner */
|
|
665
750
|
.vpg-demo-banner {
|
|
666
751
|
display: flex;
|
|
667
752
|
align-items: center;
|
|
668
753
|
gap: 0.5rem;
|
|
669
754
|
padding: 0.25rem 0.75rem;
|
|
670
|
-
background:
|
|
671
|
-
border: 1px solid
|
|
755
|
+
background: var(--vpg-highlight-bg);
|
|
756
|
+
border: 1px solid var(--vpg-highlight-border);
|
|
672
757
|
border-radius: 0.375rem;
|
|
673
758
|
font-size: 0.75rem;
|
|
674
|
-
color:
|
|
759
|
+
color: var(--vpg-highlight-text);
|
|
675
760
|
}
|
|
676
761
|
|
|
677
762
|
.vpg-demo-badge {
|
|
678
763
|
display: inline-flex;
|
|
679
764
|
padding: 0.125rem 0.375rem;
|
|
680
|
-
background:
|
|
681
|
-
color:
|
|
765
|
+
background: var(--vpg-highlight-text);
|
|
766
|
+
color: var(--vpg-text-inverse);
|
|
682
767
|
font-size: 0.625rem;
|
|
683
768
|
font-weight: 700;
|
|
684
769
|
border-radius: 0.25rem;
|
|
685
770
|
letter-spacing: 0.05em;
|
|
686
771
|
}
|
|
687
772
|
|
|
688
|
-
.vpg-demo-banner a { font-weight: 600; color:
|
|
689
|
-
.vpg-demo-banner a:hover { color:
|
|
773
|
+
.vpg-demo-banner a { font-weight: 600; color: var(--vpg-highlight-text); text-decoration: none; }
|
|
774
|
+
.vpg-demo-banner a:hover { color: var(--vpg-highlight-text); text-decoration: underline; opacity: 0.85; }
|
|
690
775
|
|
|
691
776
|
/* ==========================================================================
|
|
692
777
|
Pagination
|
|
@@ -699,17 +784,17 @@
|
|
|
699
784
|
justify-content: center;
|
|
700
785
|
width: 28px;
|
|
701
786
|
height: 28px;
|
|
702
|
-
background:
|
|
703
|
-
border: 1px solid
|
|
787
|
+
background: var(--vpg-surface-bg);
|
|
788
|
+
border: 1px solid var(--vpg-border-default);
|
|
704
789
|
border-radius: 0.25rem;
|
|
705
|
-
color:
|
|
790
|
+
color: var(--vpg-text-secondary);
|
|
706
791
|
cursor: pointer;
|
|
707
792
|
transition: all 0.15s;
|
|
708
793
|
}
|
|
709
794
|
|
|
710
|
-
.vpg-page-btn:hover:not(:disabled) { background:
|
|
795
|
+
.vpg-page-btn:hover:not(:disabled) { background: var(--vpg-surface-panel); border-color: var(--vpg-border-strong); }
|
|
711
796
|
.vpg-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
712
|
-
.vpg-page-info { font-size: 0.75rem; color:
|
|
797
|
+
.vpg-page-info { font-size: 0.75rem; color: var(--vpg-text-secondary); padding: 0 0.5rem; }
|
|
713
798
|
|
|
714
799
|
/* ==========================================================================
|
|
715
800
|
Toast
|
|
@@ -722,8 +807,8 @@
|
|
|
722
807
|
align-items: center;
|
|
723
808
|
gap: 0.5rem;
|
|
724
809
|
padding: 0.5rem 1rem;
|
|
725
|
-
background:
|
|
726
|
-
color:
|
|
810
|
+
background: var(--vpg-state-success);
|
|
811
|
+
color: var(--vpg-text-inverse);
|
|
727
812
|
border-radius: 0.5rem;
|
|
728
813
|
font-size: 0.875rem;
|
|
729
814
|
font-weight: 500;
|
|
@@ -756,7 +841,7 @@
|
|
|
756
841
|
.vpg-resize-grip span {
|
|
757
842
|
width: 16px;
|
|
758
843
|
height: 2px;
|
|
759
|
-
background:
|
|
844
|
+
background: var(--vpg-border-strong);
|
|
760
845
|
border-radius: 1px;
|
|
761
846
|
transition: background 0.15s;
|
|
762
847
|
}
|
|
@@ -805,10 +890,10 @@
|
|
|
805
890
|
Filter Dropdown
|
|
806
891
|
========================================================================== */
|
|
807
892
|
.vpg-filter-dropdown {
|
|
808
|
-
background:
|
|
893
|
+
background: var(--vpg-surface-bg);
|
|
809
894
|
border-radius: 0.375rem;
|
|
810
895
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
811
|
-
border: 1px solid
|
|
896
|
+
border: 1px solid var(--vpg-border-default);
|
|
812
897
|
min-width: 220px;
|
|
813
898
|
max-width: 280px;
|
|
814
899
|
max-height: calc(100vh - 100px);
|
|
@@ -822,27 +907,27 @@
|
|
|
822
907
|
align-items: center;
|
|
823
908
|
justify-content: space-between;
|
|
824
909
|
padding: 0.625rem;
|
|
825
|
-
background:
|
|
826
|
-
border-bottom: 1px solid
|
|
910
|
+
background: var(--vpg-surface-panel);
|
|
911
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
827
912
|
border-radius: 0.375rem 0.375rem 0 0;
|
|
828
913
|
}
|
|
829
914
|
|
|
830
915
|
.vpg-filter-title {
|
|
831
916
|
font-size: 0.75rem;
|
|
832
917
|
font-weight: 600;
|
|
833
|
-
color:
|
|
918
|
+
color: var(--vpg-text-primary);
|
|
834
919
|
overflow: hidden;
|
|
835
920
|
text-overflow: ellipsis;
|
|
836
921
|
white-space: nowrap;
|
|
837
922
|
}
|
|
838
923
|
|
|
839
|
-
.vpg-filter-count { font-size: 0.625rem; color:
|
|
924
|
+
.vpg-filter-count { font-size: 0.625rem; color: var(--vpg-text-secondary); }
|
|
840
925
|
|
|
841
926
|
.vpg-sort-controls {
|
|
842
927
|
display: flex;
|
|
843
928
|
gap: 0.25rem;
|
|
844
929
|
padding: 0.5rem;
|
|
845
|
-
background:
|
|
930
|
+
background: var(--vpg-surface-panel);
|
|
846
931
|
}
|
|
847
932
|
|
|
848
933
|
.vpg-sort-btn {
|
|
@@ -853,17 +938,17 @@
|
|
|
853
938
|
font-size: 0.6875rem;
|
|
854
939
|
font-weight: 500;
|
|
855
940
|
border-radius: 0.25rem;
|
|
856
|
-
color:
|
|
941
|
+
color: var(--vpg-text-secondary);
|
|
857
942
|
background: transparent;
|
|
858
943
|
border: none;
|
|
859
944
|
cursor: pointer;
|
|
860
945
|
transition: all 0.15s;
|
|
861
946
|
}
|
|
862
947
|
|
|
863
|
-
.vpg-sort-btn:hover { background:
|
|
864
|
-
.vpg-sort-btn.active { background:
|
|
948
|
+
.vpg-sort-btn:hover { background: var(--vpg-border-default); }
|
|
949
|
+
.vpg-sort-btn.active { background: var(--vpg-accent-soft-bg); color: var(--vpg-accent-soft-text); }
|
|
865
950
|
|
|
866
|
-
.vpg-divider { height: 1px; background:
|
|
951
|
+
.vpg-divider { height: 1px; background: var(--vpg-border-default); }
|
|
867
952
|
|
|
868
953
|
.vpg-filter-dropdown .vpg-search-container {
|
|
869
954
|
position: relative;
|
|
@@ -877,21 +962,21 @@
|
|
|
877
962
|
transform: translateY(-50%);
|
|
878
963
|
width: 0.875rem;
|
|
879
964
|
height: 0.875rem;
|
|
880
|
-
color:
|
|
965
|
+
color: var(--vpg-text-muted);
|
|
881
966
|
}
|
|
882
967
|
|
|
883
968
|
.vpg-filter-dropdown .vpg-search-input {
|
|
884
969
|
width: 100%;
|
|
885
970
|
padding: 0.25rem 1.5rem 0.25rem 1.75rem;
|
|
886
971
|
font-size: 0.75rem;
|
|
887
|
-
border: 1px solid
|
|
972
|
+
border: 1px solid var(--vpg-border-strong);
|
|
888
973
|
border-radius: 0.25rem;
|
|
889
974
|
outline: none;
|
|
890
975
|
}
|
|
891
976
|
|
|
892
977
|
.vpg-filter-dropdown .vpg-search-input:focus {
|
|
893
|
-
border-color:
|
|
894
|
-
box-shadow: 0 0 0 1px
|
|
978
|
+
border-color: var(--vpg-accent);
|
|
979
|
+
box-shadow: 0 0 0 1px var(--vpg-accent);
|
|
895
980
|
}
|
|
896
981
|
|
|
897
982
|
.vpg-clear-search {
|
|
@@ -904,7 +989,7 @@
|
|
|
904
989
|
display: flex;
|
|
905
990
|
align-items: center;
|
|
906
991
|
justify-content: center;
|
|
907
|
-
color:
|
|
992
|
+
color: var(--vpg-text-muted);
|
|
908
993
|
font-size: 0.875rem;
|
|
909
994
|
line-height: 1;
|
|
910
995
|
background: transparent;
|
|
@@ -912,13 +997,13 @@
|
|
|
912
997
|
cursor: pointer;
|
|
913
998
|
}
|
|
914
999
|
|
|
915
|
-
.vpg-clear-search:hover { color:
|
|
1000
|
+
.vpg-clear-search:hover { color: var(--vpg-text-secondary); }
|
|
916
1001
|
|
|
917
1002
|
.vpg-bulk-actions {
|
|
918
1003
|
display: flex;
|
|
919
1004
|
gap: 0.375rem;
|
|
920
1005
|
padding: 0.25rem 0.5rem;
|
|
921
|
-
border-bottom: 1px solid
|
|
1006
|
+
border-bottom: 1px solid var(--vpg-border-subtle);
|
|
922
1007
|
}
|
|
923
1008
|
|
|
924
1009
|
.vpg-bulk-btn {
|
|
@@ -928,7 +1013,7 @@
|
|
|
928
1013
|
padding: 0.125rem 0.375rem;
|
|
929
1014
|
font-size: 0.625rem;
|
|
930
1015
|
font-weight: 500;
|
|
931
|
-
color:
|
|
1016
|
+
color: var(--vpg-text-secondary);
|
|
932
1017
|
background: transparent;
|
|
933
1018
|
border: none;
|
|
934
1019
|
border-radius: 0.25rem;
|
|
@@ -936,7 +1021,7 @@
|
|
|
936
1021
|
transition: all 0.15s;
|
|
937
1022
|
}
|
|
938
1023
|
|
|
939
|
-
.vpg-bulk-btn:hover { color:
|
|
1024
|
+
.vpg-bulk-btn:hover { color: var(--vpg-accent); background: var(--vpg-accent-soft-bg); }
|
|
940
1025
|
|
|
941
1026
|
.vpg-values-list {
|
|
942
1027
|
max-height: 200px;
|
|
@@ -956,32 +1041,32 @@
|
|
|
956
1041
|
transition: background 0.15s;
|
|
957
1042
|
}
|
|
958
1043
|
|
|
959
|
-
.vpg-value-item:hover { background:
|
|
960
|
-
.vpg-value-item.selected { background:
|
|
1044
|
+
.vpg-value-item:hover { background: var(--vpg-surface-hover); }
|
|
1045
|
+
.vpg-value-item.selected { background: var(--vpg-surface-selected); }
|
|
961
1046
|
|
|
962
1047
|
.vpg-value-checkbox {
|
|
963
1048
|
width: 0.875rem;
|
|
964
1049
|
height: 0.875rem;
|
|
965
|
-
accent-color:
|
|
1050
|
+
accent-color: var(--vpg-accent);
|
|
966
1051
|
border-radius: 0.25rem;
|
|
967
1052
|
}
|
|
968
1053
|
|
|
969
1054
|
.vpg-value-text {
|
|
970
1055
|
font-size: 0.75rem;
|
|
971
|
-
color:
|
|
1056
|
+
color: var(--vpg-text-primary);
|
|
972
1057
|
overflow: hidden;
|
|
973
1058
|
text-overflow: ellipsis;
|
|
974
1059
|
white-space: nowrap;
|
|
975
1060
|
flex: 1;
|
|
976
1061
|
}
|
|
977
1062
|
|
|
978
|
-
.vpg-value-text.vpg-blank { font-style: italic; color:
|
|
1063
|
+
.vpg-value-text.vpg-blank { font-style: italic; color: var(--vpg-text-muted); }
|
|
979
1064
|
|
|
980
1065
|
.vpg-no-results {
|
|
981
1066
|
text-align: center;
|
|
982
1067
|
padding: 0.75rem;
|
|
983
1068
|
font-size: 0.75rem;
|
|
984
|
-
color:
|
|
1069
|
+
color: var(--vpg-text-muted);
|
|
985
1070
|
}
|
|
986
1071
|
|
|
987
1072
|
.vpg-filter-footer {
|
|
@@ -989,8 +1074,8 @@
|
|
|
989
1074
|
justify-content: space-between;
|
|
990
1075
|
align-items: center;
|
|
991
1076
|
padding: 0.5rem 0.625rem;
|
|
992
|
-
background:
|
|
993
|
-
border-top: 1px solid
|
|
1077
|
+
background: var(--vpg-surface-panel);
|
|
1078
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
994
1079
|
border-radius: 0 0 0.375rem 0.375rem;
|
|
995
1080
|
}
|
|
996
1081
|
|
|
@@ -998,7 +1083,7 @@
|
|
|
998
1083
|
padding: 0.25rem 0.5rem;
|
|
999
1084
|
font-size: 0.75rem;
|
|
1000
1085
|
font-weight: 500;
|
|
1001
|
-
color:
|
|
1086
|
+
color: var(--vpg-text-secondary);
|
|
1002
1087
|
background: transparent;
|
|
1003
1088
|
border: none;
|
|
1004
1089
|
border-radius: 0.25rem;
|
|
@@ -1006,14 +1091,14 @@
|
|
|
1006
1091
|
transition: all 0.15s;
|
|
1007
1092
|
}
|
|
1008
1093
|
|
|
1009
|
-
.vpg-btn-clear:hover { background:
|
|
1094
|
+
.vpg-btn-clear:hover { background: var(--vpg-border-default); color: var(--vpg-text-primary); }
|
|
1010
1095
|
|
|
1011
1096
|
.vpg-btn-apply {
|
|
1012
1097
|
padding: 0.25rem 0.75rem;
|
|
1013
1098
|
font-size: 0.75rem;
|
|
1014
1099
|
font-weight: 500;
|
|
1015
|
-
color:
|
|
1016
|
-
background:
|
|
1100
|
+
color: var(--vpg-text-inverse);
|
|
1101
|
+
background: var(--vpg-accent);
|
|
1017
1102
|
border: none;
|
|
1018
1103
|
border-radius: 0.25rem;
|
|
1019
1104
|
cursor: pointer;
|
|
@@ -1021,14 +1106,14 @@
|
|
|
1021
1106
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
1022
1107
|
}
|
|
1023
1108
|
|
|
1024
|
-
.vpg-btn-apply:hover { background:
|
|
1109
|
+
.vpg-btn-apply:hover { background: var(--vpg-accent-hover); }
|
|
1025
1110
|
|
|
1026
1111
|
/* ==========================================================================
|
|
1027
1112
|
Pivot Config Panel
|
|
1028
1113
|
========================================================================== */
|
|
1029
1114
|
.vpg-pivot-config {
|
|
1030
|
-
background:
|
|
1031
|
-
border: 1px solid
|
|
1115
|
+
background: var(--vpg-surface-bg);
|
|
1116
|
+
border: 1px solid var(--vpg-border-default);
|
|
1032
1117
|
border-radius: 0.5rem;
|
|
1033
1118
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
1034
1119
|
overflow: hidden;
|
|
@@ -1042,8 +1127,8 @@
|
|
|
1042
1127
|
align-items: center;
|
|
1043
1128
|
justify-content: space-between;
|
|
1044
1129
|
padding: 0.5rem 0.75rem;
|
|
1045
|
-
background:
|
|
1046
|
-
border-bottom: 1px solid
|
|
1130
|
+
background: var(--vpg-surface-panel);
|
|
1131
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
1047
1132
|
flex-shrink: 0;
|
|
1048
1133
|
}
|
|
1049
1134
|
|
|
@@ -1053,7 +1138,7 @@
|
|
|
1053
1138
|
gap: 0.375rem;
|
|
1054
1139
|
font-size: 0.75rem;
|
|
1055
1140
|
font-weight: 600;
|
|
1056
|
-
color:
|
|
1141
|
+
color: var(--vpg-text-secondary);
|
|
1057
1142
|
text-transform: uppercase;
|
|
1058
1143
|
letter-spacing: 0.05em;
|
|
1059
1144
|
}
|
|
@@ -1069,23 +1154,23 @@
|
|
|
1069
1154
|
transition: all 0.15s;
|
|
1070
1155
|
}
|
|
1071
1156
|
|
|
1072
|
-
.vpg-clear-btn { color:
|
|
1157
|
+
.vpg-clear-btn { color: var(--vpg-text-muted); }
|
|
1073
1158
|
.vpg-clear-btn:hover { background: #fee2e2; color: #ef4444; }
|
|
1074
1159
|
|
|
1075
1160
|
.vpg-section-label {
|
|
1076
1161
|
font-size: 0.625rem;
|
|
1077
1162
|
font-weight: 700;
|
|
1078
|
-
color:
|
|
1163
|
+
color: var(--vpg-text-muted);
|
|
1079
1164
|
text-transform: uppercase;
|
|
1080
1165
|
letter-spacing: 0.1em;
|
|
1081
1166
|
padding: 0.25rem 0.5rem;
|
|
1082
1167
|
}
|
|
1083
1168
|
|
|
1084
|
-
.vpg-section-label .vpg-count { color:
|
|
1169
|
+
.vpg-section-label .vpg-count { color: var(--vpg-border-strong); margin-left: 0.25rem; }
|
|
1085
1170
|
|
|
1086
1171
|
.vpg-assigned-section {
|
|
1087
|
-
border-bottom: 1px solid
|
|
1088
|
-
background: linear-gradient(to bottom,
|
|
1172
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
1173
|
+
background: linear-gradient(to bottom, var(--vpg-surface-panel), var(--vpg-surface-bg));
|
|
1089
1174
|
padding-bottom: 0.5rem;
|
|
1090
1175
|
flex-shrink: 0;
|
|
1091
1176
|
}
|
|
@@ -1110,10 +1195,10 @@
|
|
|
1110
1195
|
}
|
|
1111
1196
|
|
|
1112
1197
|
.vpg-assigned-item:active { cursor: grabbing; transform: scale(0.98); }
|
|
1113
|
-
.vpg-assigned-item.vpg-type-row { background:
|
|
1114
|
-
.vpg-assigned-item.vpg-type-column { background:
|
|
1115
|
-
.vpg-assigned-item.vpg-type-value { background:
|
|
1116
|
-
.vpg-assigned-item.vpg-type-calc { background:
|
|
1198
|
+
.vpg-assigned-item.vpg-type-row { background: var(--vpg-dim-row-bg); border: 1px solid var(--vpg-dim-row-border); }
|
|
1199
|
+
.vpg-assigned-item.vpg-type-column { background: var(--vpg-dim-col-bg); border: 1px solid var(--vpg-dim-col-border); }
|
|
1200
|
+
.vpg-assigned-item.vpg-type-value { background: var(--vpg-dim-value-bg); border: 1px solid var(--vpg-dim-value-border); }
|
|
1201
|
+
.vpg-assigned-item.vpg-type-calc { background: var(--vpg-dim-calc-bg); border: 1px solid var(--vpg-dim-calc-border); cursor: pointer; }
|
|
1117
1202
|
|
|
1118
1203
|
.vpg-item-main { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
|
|
1119
1204
|
|
|
@@ -1128,17 +1213,17 @@
|
|
|
1128
1213
|
border-radius: 0.25rem;
|
|
1129
1214
|
}
|
|
1130
1215
|
|
|
1131
|
-
.vpg-item-badge.row { background:
|
|
1132
|
-
.vpg-item-badge.column { background:
|
|
1133
|
-
.vpg-item-badge.value { background:
|
|
1134
|
-
.vpg-item-badge.calc { background:
|
|
1216
|
+
.vpg-item-badge.row { background: var(--vpg-dim-row-border); color: var(--vpg-dim-row-text); }
|
|
1217
|
+
.vpg-item-badge.column { background: var(--vpg-dim-col-border); color: var(--vpg-dim-col-text); }
|
|
1218
|
+
.vpg-item-badge.value { background: var(--vpg-dim-value-border); color: var(--vpg-dim-value-text); }
|
|
1219
|
+
.vpg-item-badge.calc { background: var(--vpg-dim-calc-border); color: var(--vpg-dim-calc-text); }
|
|
1135
1220
|
|
|
1136
1221
|
.vpg-item-name {
|
|
1137
1222
|
overflow: hidden;
|
|
1138
1223
|
text-overflow: ellipsis;
|
|
1139
1224
|
white-space: nowrap;
|
|
1140
1225
|
font-weight: 500;
|
|
1141
|
-
color:
|
|
1226
|
+
color: var(--vpg-text-primary);
|
|
1142
1227
|
}
|
|
1143
1228
|
|
|
1144
1229
|
.vpg-item-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
|
|
@@ -1150,28 +1235,28 @@
|
|
|
1150
1235
|
align-items: center;
|
|
1151
1236
|
justify-content: center;
|
|
1152
1237
|
border-radius: 0.25rem;
|
|
1153
|
-
color:
|
|
1238
|
+
color: var(--vpg-text-muted);
|
|
1154
1239
|
background: transparent;
|
|
1155
1240
|
border: none;
|
|
1156
1241
|
cursor: pointer;
|
|
1157
1242
|
transition: all 0.15s;
|
|
1158
1243
|
}
|
|
1159
1244
|
|
|
1160
|
-
.vpg-toggle-btn:hover { background:
|
|
1245
|
+
.vpg-toggle-btn:hover { background: var(--vpg-surface-bg); color: var(--vpg-text-secondary); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
|
|
1161
1246
|
|
|
1162
1247
|
.vpg-agg-select {
|
|
1163
1248
|
font-size: 0.625rem;
|
|
1164
|
-
background:
|
|
1165
|
-
border: 1px solid
|
|
1249
|
+
background: var(--vpg-surface-elevated);
|
|
1250
|
+
border: 1px solid var(--vpg-dim-value-border);
|
|
1166
1251
|
border-radius: 0.25rem;
|
|
1167
1252
|
padding: 0.125rem 0.25rem;
|
|
1168
|
-
color:
|
|
1253
|
+
color: var(--vpg-dim-value-text);
|
|
1169
1254
|
font-weight: 500;
|
|
1170
1255
|
min-width: 70px;
|
|
1171
1256
|
cursor: pointer;
|
|
1172
1257
|
}
|
|
1173
1258
|
|
|
1174
|
-
.vpg-agg-select:focus { outline: none; box-shadow: 0 0 0 1px
|
|
1259
|
+
.vpg-agg-select:focus { outline: none; box-shadow: 0 0 0 1px var(--vpg-dim-value-text); }
|
|
1175
1260
|
|
|
1176
1261
|
.vpg-remove-btn {
|
|
1177
1262
|
width: 1.25rem;
|
|
@@ -1181,7 +1266,7 @@
|
|
|
1181
1266
|
justify-content: center;
|
|
1182
1267
|
font-size: 0.875rem;
|
|
1183
1268
|
line-height: 1;
|
|
1184
|
-
color:
|
|
1269
|
+
color: var(--vpg-text-muted);
|
|
1185
1270
|
background: transparent;
|
|
1186
1271
|
border: none;
|
|
1187
1272
|
border-radius: 50%;
|
|
@@ -1218,7 +1303,7 @@
|
|
|
1218
1303
|
transform: translateY(-50%);
|
|
1219
1304
|
width: 0.875rem;
|
|
1220
1305
|
height: 0.875rem;
|
|
1221
|
-
color:
|
|
1306
|
+
color: var(--vpg-text-muted);
|
|
1222
1307
|
pointer-events: none;
|
|
1223
1308
|
}
|
|
1224
1309
|
|
|
@@ -1226,16 +1311,16 @@
|
|
|
1226
1311
|
width: 100%;
|
|
1227
1312
|
padding: 0.375rem 1.75rem 0.375rem 1.75rem;
|
|
1228
1313
|
font-size: 0.75rem;
|
|
1229
|
-
border: 1px solid
|
|
1314
|
+
border: 1px solid var(--vpg-border-default);
|
|
1230
1315
|
border-radius: 0.375rem;
|
|
1231
|
-
background:
|
|
1232
|
-
color:
|
|
1316
|
+
background: var(--vpg-surface-bg);
|
|
1317
|
+
color: var(--vpg-text-primary);
|
|
1233
1318
|
}
|
|
1234
1319
|
|
|
1235
|
-
.vpg-field-search .vpg-search-input::-moz-placeholder { color:
|
|
1320
|
+
.vpg-field-search .vpg-search-input::-moz-placeholder { color: var(--vpg-text-muted); }
|
|
1236
1321
|
|
|
1237
|
-
.vpg-field-search .vpg-search-input::placeholder { color:
|
|
1238
|
-
.vpg-field-search .vpg-search-input:focus { outline: none; box-shadow: 0 0 0 1px
|
|
1322
|
+
.vpg-field-search .vpg-search-input::placeholder { color: var(--vpg-text-muted); }
|
|
1323
|
+
.vpg-field-search .vpg-search-input:focus { outline: none; box-shadow: 0 0 0 1px var(--vpg-accent); border-color: var(--vpg-accent); }
|
|
1239
1324
|
|
|
1240
1325
|
.vpg-field-search .vpg-clear-search {
|
|
1241
1326
|
position: absolute;
|
|
@@ -1244,14 +1329,14 @@
|
|
|
1244
1329
|
transform: translateY(-50%);
|
|
1245
1330
|
padding: 0.125rem;
|
|
1246
1331
|
border-radius: 0.25rem;
|
|
1247
|
-
color:
|
|
1332
|
+
color: var(--vpg-text-muted);
|
|
1248
1333
|
background: transparent;
|
|
1249
1334
|
border: none;
|
|
1250
1335
|
cursor: pointer;
|
|
1251
1336
|
transition: all 0.15s;
|
|
1252
1337
|
}
|
|
1253
1338
|
|
|
1254
|
-
.vpg-field-search .vpg-clear-search:hover { background:
|
|
1339
|
+
.vpg-field-search .vpg-clear-search:hover { background: var(--vpg-surface-hover); color: var(--vpg-text-secondary); }
|
|
1255
1340
|
|
|
1256
1341
|
.vpg-field-list {
|
|
1257
1342
|
flex: 1;
|
|
@@ -1270,18 +1355,18 @@
|
|
|
1270
1355
|
border-radius: 0.375rem;
|
|
1271
1356
|
font-size: 0.75rem;
|
|
1272
1357
|
cursor: grab;
|
|
1273
|
-
background:
|
|
1274
|
-
border: 1px solid
|
|
1275
|
-
color:
|
|
1358
|
+
background: var(--vpg-surface-bg);
|
|
1359
|
+
border: 1px solid var(--vpg-border-default);
|
|
1360
|
+
color: var(--vpg-text-secondary);
|
|
1276
1361
|
transition: all 0.15s;
|
|
1277
1362
|
}
|
|
1278
1363
|
|
|
1279
|
-
.vpg-field-item:hover { border-color:
|
|
1364
|
+
.vpg-field-item:hover { border-color: var(--vpg-border-strong); background: var(--vpg-surface-panel); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
|
|
1280
1365
|
.vpg-field-item:active { cursor: grabbing; transform: scale(0.98); }
|
|
1281
|
-
.vpg-field-item.vpg-is-numeric { border-color:
|
|
1282
|
-
.vpg-field-item.vpg-is-calculated { border-color:
|
|
1366
|
+
.vpg-field-item.vpg-is-numeric { border-color: var(--vpg-dim-value-border); background: var(--vpg-dim-value-bg); }
|
|
1367
|
+
.vpg-field-item.vpg-is-calculated { border-color: var(--vpg-dim-calc-border); background: var(--vpg-dim-calc-bg); }
|
|
1283
1368
|
|
|
1284
|
-
.vpg-calc-type { background:
|
|
1369
|
+
.vpg-calc-type { background: var(--vpg-dim-calc-border) !important; color: var(--vpg-dim-calc-text) !important; }
|
|
1285
1370
|
|
|
1286
1371
|
.vpg-field-edit,
|
|
1287
1372
|
.vpg-field-delete {
|
|
@@ -1292,7 +1377,7 @@
|
|
|
1292
1377
|
justify-content: center;
|
|
1293
1378
|
font-size: 0.75rem;
|
|
1294
1379
|
line-height: 1;
|
|
1295
|
-
color:
|
|
1380
|
+
color: var(--vpg-text-muted);
|
|
1296
1381
|
background: transparent;
|
|
1297
1382
|
border: none;
|
|
1298
1383
|
border-radius: 50%;
|
|
@@ -1301,7 +1386,7 @@
|
|
|
1301
1386
|
flex-shrink: 0;
|
|
1302
1387
|
}
|
|
1303
1388
|
|
|
1304
|
-
.vpg-field-edit:hover { background:
|
|
1389
|
+
.vpg-field-edit:hover { background: var(--vpg-accent-soft-bg); color: var(--vpg-accent); }
|
|
1305
1390
|
.vpg-field-delete:hover { background: #fee2e2; color: #ef4444; }
|
|
1306
1391
|
|
|
1307
1392
|
.vpg-field-type-icon {
|
|
@@ -1312,13 +1397,13 @@
|
|
|
1312
1397
|
justify-content: center;
|
|
1313
1398
|
font-size: 0.625rem;
|
|
1314
1399
|
font-weight: 700;
|
|
1315
|
-
background:
|
|
1400
|
+
background: var(--vpg-surface-hover);
|
|
1316
1401
|
border-radius: 0.25rem;
|
|
1317
|
-
color:
|
|
1402
|
+
color: var(--vpg-text-secondary);
|
|
1318
1403
|
flex-shrink: 0;
|
|
1319
1404
|
}
|
|
1320
1405
|
|
|
1321
|
-
.vpg-field-item.vpg-is-numeric .vpg-field-type-icon { background:
|
|
1406
|
+
.vpg-field-item.vpg-is-numeric .vpg-field-type-icon { background: var(--vpg-dim-value-border); color: var(--vpg-dim-value-text); }
|
|
1322
1407
|
|
|
1323
1408
|
.vpg-field-name {
|
|
1324
1409
|
flex: 1;
|
|
@@ -1330,14 +1415,14 @@
|
|
|
1330
1415
|
|
|
1331
1416
|
.vpg-unique-count {
|
|
1332
1417
|
font-size: 0.625rem;
|
|
1333
|
-
color:
|
|
1418
|
+
color: var(--vpg-text-muted);
|
|
1334
1419
|
font-variant-numeric: tabular-nums;
|
|
1335
1420
|
flex-shrink: 0;
|
|
1336
1421
|
}
|
|
1337
1422
|
|
|
1338
1423
|
.vpg-empty-hint {
|
|
1339
1424
|
font-size: 0.6875rem;
|
|
1340
|
-
color:
|
|
1425
|
+
color: var(--vpg-text-muted);
|
|
1341
1426
|
font-style: italic;
|
|
1342
1427
|
text-align: center;
|
|
1343
1428
|
padding: 1rem;
|
|
@@ -1349,7 +1434,7 @@
|
|
|
1349
1434
|
justify-content: space-between;
|
|
1350
1435
|
gap: 0.5rem;
|
|
1351
1436
|
padding: 0.5rem 0.75rem;
|
|
1352
|
-
border-top: 1px solid
|
|
1437
|
+
border-top: 1px solid var(--vpg-border-subtle);
|
|
1353
1438
|
background: rgba(248, 250, 252, 0.5);
|
|
1354
1439
|
flex-shrink: 0;
|
|
1355
1440
|
}
|
|
@@ -1359,7 +1444,7 @@
|
|
|
1359
1444
|
align-items: center;
|
|
1360
1445
|
gap: 0.375rem;
|
|
1361
1446
|
font-size: 0.6875rem;
|
|
1362
|
-
color:
|
|
1447
|
+
color: var(--vpg-text-secondary);
|
|
1363
1448
|
cursor: pointer;
|
|
1364
1449
|
-webkit-user-select: none;
|
|
1365
1450
|
-moz-user-select: none;
|
|
@@ -1370,7 +1455,7 @@
|
|
|
1370
1455
|
width: 0.875rem;
|
|
1371
1456
|
height: 0.875rem;
|
|
1372
1457
|
border-radius: 0.25rem;
|
|
1373
|
-
accent-color:
|
|
1458
|
+
accent-color: var(--vpg-accent);
|
|
1374
1459
|
cursor: pointer;
|
|
1375
1460
|
}
|
|
1376
1461
|
|
|
@@ -1382,14 +1467,14 @@
|
|
|
1382
1467
|
font-size: 0.6875rem;
|
|
1383
1468
|
font-weight: 500;
|
|
1384
1469
|
border-radius: 0.25rem;
|
|
1385
|
-
background:
|
|
1386
|
-
color:
|
|
1387
|
-
border: 1px solid
|
|
1470
|
+
background: var(--vpg-dim-value-bg);
|
|
1471
|
+
color: var(--vpg-dim-value-text);
|
|
1472
|
+
border: 1px solid var(--vpg-dim-value-border);
|
|
1388
1473
|
cursor: pointer;
|
|
1389
1474
|
transition: all 0.15s;
|
|
1390
1475
|
}
|
|
1391
1476
|
|
|
1392
|
-
.vpg-auto-btn:hover { background:
|
|
1477
|
+
.vpg-auto-btn:hover { background: var(--vpg-dim-value-border); }
|
|
1393
1478
|
|
|
1394
1479
|
.vpg-calc-btn {
|
|
1395
1480
|
display: flex;
|
|
@@ -1399,45 +1484,45 @@
|
|
|
1399
1484
|
font-size: 0.6875rem;
|
|
1400
1485
|
font-weight: 500;
|
|
1401
1486
|
border-radius: 0.25rem;
|
|
1402
|
-
background:
|
|
1403
|
-
color:
|
|
1404
|
-
border: 1px solid
|
|
1487
|
+
background: var(--vpg-dim-calc-bg);
|
|
1488
|
+
color: var(--vpg-dim-calc-text);
|
|
1489
|
+
border: 1px solid var(--vpg-dim-calc-border);
|
|
1405
1490
|
cursor: pointer;
|
|
1406
1491
|
transition: all 0.15s;
|
|
1407
1492
|
}
|
|
1408
1493
|
|
|
1409
|
-
.vpg-calc-btn:hover { background:
|
|
1494
|
+
.vpg-calc-btn:hover { background: var(--vpg-dim-calc-border); border-color: var(--vpg-dim-calc-text); }
|
|
1410
1495
|
.vpg-calc-icon { font-size: 0.75rem; font-weight: 700; }
|
|
1411
1496
|
|
|
1412
1497
|
.vpg-pivot-config .vpg-watermark {
|
|
1413
1498
|
padding: 0.375rem 0.75rem;
|
|
1414
|
-
background:
|
|
1415
|
-
border-top: 1px solid
|
|
1499
|
+
background: var(--vpg-surface-hover);
|
|
1500
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
1416
1501
|
text-align: center;
|
|
1417
1502
|
flex-shrink: 0;
|
|
1418
1503
|
}
|
|
1419
1504
|
|
|
1420
1505
|
.vpg-pivot-config .vpg-watermark a {
|
|
1421
1506
|
font-size: 0.625rem;
|
|
1422
|
-
color:
|
|
1507
|
+
color: var(--vpg-text-muted);
|
|
1423
1508
|
text-decoration: none;
|
|
1424
1509
|
transition: color 0.15s;
|
|
1425
1510
|
}
|
|
1426
1511
|
|
|
1427
|
-
.vpg-pivot-config .vpg-watermark a:hover { color:
|
|
1512
|
+
.vpg-pivot-config .vpg-watermark a:hover { color: var(--vpg-text-secondary); }
|
|
1428
1513
|
|
|
1429
1514
|
/* Config field list scrollbar */
|
|
1430
1515
|
.vpg-field-list::-webkit-scrollbar { width: 0.375rem; }
|
|
1431
1516
|
.vpg-field-list::-webkit-scrollbar-track { background: transparent; }
|
|
1432
|
-
.vpg-field-list::-webkit-scrollbar-thumb { background:
|
|
1433
|
-
.vpg-field-list::-webkit-scrollbar-thumb:hover { background:
|
|
1517
|
+
.vpg-field-list::-webkit-scrollbar-thumb { background: var(--vpg-border-default); border-radius: 9999px; }
|
|
1518
|
+
.vpg-field-list::-webkit-scrollbar-thumb:hover { background: var(--vpg-border-strong); }
|
|
1434
1519
|
|
|
1435
1520
|
/* ==========================================================================
|
|
1436
1521
|
Pivot Skeleton
|
|
1437
1522
|
========================================================================== */
|
|
1438
1523
|
.vpg-pivot-skeleton {
|
|
1439
|
-
background:
|
|
1440
|
-
border: 1px solid
|
|
1524
|
+
background: var(--vpg-surface-bg);
|
|
1525
|
+
border: 1px solid var(--vpg-border-default);
|
|
1441
1526
|
border-radius: 0.75rem;
|
|
1442
1527
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
1443
1528
|
overflow: hidden;
|
|
@@ -1446,15 +1531,15 @@
|
|
|
1446
1531
|
height: 100%;
|
|
1447
1532
|
}
|
|
1448
1533
|
|
|
1449
|
-
.vpg-pivot-skeleton.vpg-is-dragging { box-shadow: 0 0 0 2px
|
|
1534
|
+
.vpg-pivot-skeleton.vpg-is-dragging { box-shadow: 0 0 0 2px var(--vpg-accent); }
|
|
1450
1535
|
|
|
1451
1536
|
.vpg-skeleton-header {
|
|
1452
1537
|
display: flex;
|
|
1453
1538
|
align-items: center;
|
|
1454
1539
|
justify-content: space-between;
|
|
1455
1540
|
padding: 0.5rem 1rem;
|
|
1456
|
-
background:
|
|
1457
|
-
border-bottom: 1px solid
|
|
1541
|
+
background: var(--vpg-surface-panel);
|
|
1542
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
1458
1543
|
flex-shrink: 0;
|
|
1459
1544
|
}
|
|
1460
1545
|
|
|
@@ -1464,7 +1549,7 @@
|
|
|
1464
1549
|
gap: 0.5rem;
|
|
1465
1550
|
font-size: 0.75rem;
|
|
1466
1551
|
font-weight: 600;
|
|
1467
|
-
color:
|
|
1552
|
+
color: var(--vpg-text-secondary);
|
|
1468
1553
|
text-transform: uppercase;
|
|
1469
1554
|
letter-spacing: 0.05em;
|
|
1470
1555
|
}
|
|
@@ -1480,9 +1565,9 @@
|
|
|
1480
1565
|
border-radius: 0.25rem;
|
|
1481
1566
|
}
|
|
1482
1567
|
|
|
1483
|
-
.vpg-summary-badge.vpg-rows { background:
|
|
1484
|
-
.vpg-summary-badge.vpg-cols { background:
|
|
1485
|
-
.vpg-summary-badge.vpg-vals { background:
|
|
1568
|
+
.vpg-summary-badge.vpg-rows { background: var(--vpg-dim-row-bg); color: var(--vpg-dim-row-text); }
|
|
1569
|
+
.vpg-summary-badge.vpg-cols { background: var(--vpg-dim-col-bg); color: var(--vpg-dim-col-text); }
|
|
1570
|
+
.vpg-summary-badge.vpg-vals { background: var(--vpg-dim-value-bg); color: var(--vpg-dim-value-text); }
|
|
1486
1571
|
|
|
1487
1572
|
/* Pro Required */
|
|
1488
1573
|
.vpg-pro-required {
|
|
@@ -1490,26 +1575,26 @@
|
|
|
1490
1575
|
display: flex;
|
|
1491
1576
|
align-items: center;
|
|
1492
1577
|
justify-content: center;
|
|
1493
|
-
background:
|
|
1578
|
+
background: var(--vpg-highlight-bg);
|
|
1494
1579
|
}
|
|
1495
1580
|
|
|
1496
1581
|
.vpg-pro-content { text-align: center; padding: 2rem; }
|
|
1497
|
-
.vpg-pro-icon { width: 3rem; height: 3rem; color:
|
|
1498
|
-
.vpg-pro-content h3 { font-size: 1.25rem; font-weight: 600; color:
|
|
1499
|
-
.vpg-pro-content p { font-size: 0.875rem; color:
|
|
1582
|
+
.vpg-pro-icon { width: 3rem; height: 3rem; color: var(--vpg-highlight-text); margin: 0 auto 1rem; }
|
|
1583
|
+
.vpg-pro-content h3 { font-size: 1.25rem; font-weight: 600; color: var(--vpg-highlight-text); margin-bottom: 0.5rem; }
|
|
1584
|
+
.vpg-pro-content p { font-size: 0.875rem; color: var(--vpg-highlight-text); margin-bottom: 1rem; }
|
|
1500
1585
|
|
|
1501
1586
|
.vpg-pro-link {
|
|
1502
1587
|
display: inline-block;
|
|
1503
1588
|
padding: 0.5rem 1rem;
|
|
1504
|
-
background:
|
|
1505
|
-
color:
|
|
1589
|
+
background: var(--vpg-highlight-text);
|
|
1590
|
+
color: var(--vpg-text-inverse);
|
|
1506
1591
|
font-weight: 500;
|
|
1507
1592
|
border-radius: 0.375rem;
|
|
1508
1593
|
text-decoration: none;
|
|
1509
|
-
transition:
|
|
1594
|
+
transition: opacity 0.15s;
|
|
1510
1595
|
}
|
|
1511
1596
|
|
|
1512
|
-
.vpg-pro-link:hover {
|
|
1597
|
+
.vpg-pro-link:hover { opacity: 0.85; }
|
|
1513
1598
|
|
|
1514
1599
|
/* Config Bar / Drop Zones */
|
|
1515
1600
|
.vpg-config-bar {
|
|
@@ -1517,8 +1602,8 @@
|
|
|
1517
1602
|
align-items: stretch;
|
|
1518
1603
|
gap: 0.5rem;
|
|
1519
1604
|
padding: 0.5rem 0.75rem;
|
|
1520
|
-
background:
|
|
1521
|
-
border-bottom: 1px solid
|
|
1605
|
+
background: var(--vpg-surface-panel);
|
|
1606
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
1522
1607
|
flex-shrink: 0;
|
|
1523
1608
|
}
|
|
1524
1609
|
|
|
@@ -1532,14 +1617,14 @@
|
|
|
1532
1617
|
transition: all 0.15s;
|
|
1533
1618
|
}
|
|
1534
1619
|
|
|
1535
|
-
.vpg-drop-zone.vpg-row-zone { background:
|
|
1536
|
-
.vpg-drop-zone.vpg-column-zone { background:
|
|
1537
|
-
.vpg-drop-zone.vpg-value-zone { background:
|
|
1620
|
+
.vpg-drop-zone.vpg-row-zone { background: var(--vpg-dim-row-bg); border-color: var(--vpg-dim-row-border); }
|
|
1621
|
+
.vpg-drop-zone.vpg-column-zone { background: var(--vpg-dim-col-bg); border-color: var(--vpg-dim-col-border); flex: 1; }
|
|
1622
|
+
.vpg-drop-zone.vpg-value-zone { background: var(--vpg-dim-value-bg); border-color: var(--vpg-dim-value-border); }
|
|
1538
1623
|
|
|
1539
1624
|
.vpg-drop-zone.vpg-drag-over { border-style: solid; box-shadow: 0 0 0 2px currentColor inset; }
|
|
1540
|
-
.vpg-drop-zone.vpg-row-zone.vpg-drag-over { background:
|
|
1541
|
-
.vpg-drop-zone.vpg-column-zone.vpg-drag-over { background:
|
|
1542
|
-
.vpg-drop-zone.vpg-value-zone.vpg-drag-over { background:
|
|
1625
|
+
.vpg-drop-zone.vpg-row-zone.vpg-drag-over { background: var(--vpg-dim-row-bg); border-color: var(--vpg-dim-row-text); }
|
|
1626
|
+
.vpg-drop-zone.vpg-column-zone.vpg-drag-over { background: var(--vpg-dim-col-bg); border-color: var(--vpg-dim-col-text); }
|
|
1627
|
+
.vpg-drop-zone.vpg-value-zone.vpg-drag-over { background: var(--vpg-dim-value-bg); border-color: var(--vpg-dim-value-text); }
|
|
1543
1628
|
|
|
1544
1629
|
.vpg-zone-header { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
|
|
1545
1630
|
|
|
@@ -1554,9 +1639,9 @@
|
|
|
1554
1639
|
border-radius: 0.25rem;
|
|
1555
1640
|
}
|
|
1556
1641
|
|
|
1557
|
-
.vpg-zone-icon.vpg-row-icon { background:
|
|
1558
|
-
.vpg-zone-icon.vpg-column-icon { background:
|
|
1559
|
-
.vpg-zone-icon.vpg-value-icon { background:
|
|
1642
|
+
.vpg-zone-icon.vpg-row-icon { background: var(--vpg-dim-row-border); color: var(--vpg-dim-row-text); }
|
|
1643
|
+
.vpg-zone-icon.vpg-column-icon { background: var(--vpg-dim-col-border); color: var(--vpg-dim-col-text); }
|
|
1644
|
+
.vpg-zone-icon.vpg-value-icon { background: var(--vpg-dim-value-border); color: var(--vpg-dim-value-text); }
|
|
1560
1645
|
|
|
1561
1646
|
.vpg-zone-label {
|
|
1562
1647
|
font-size: 0.625rem;
|
|
@@ -1565,12 +1650,12 @@
|
|
|
1565
1650
|
letter-spacing: 0.05em;
|
|
1566
1651
|
}
|
|
1567
1652
|
|
|
1568
|
-
.vpg-row-zone .vpg-zone-label { color:
|
|
1569
|
-
.vpg-column-zone .vpg-zone-label { color:
|
|
1570
|
-
.vpg-value-zone .vpg-zone-label { color:
|
|
1653
|
+
.vpg-row-zone .vpg-zone-label { color: var(--vpg-dim-row-text); }
|
|
1654
|
+
.vpg-column-zone .vpg-zone-label { color: var(--vpg-dim-col-text); }
|
|
1655
|
+
.vpg-value-zone .vpg-zone-label { color: var(--vpg-dim-value-text); }
|
|
1571
1656
|
|
|
1572
1657
|
.vpg-zone-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
|
|
1573
|
-
.vpg-zone-hint { font-size: 0.625rem; color:
|
|
1658
|
+
.vpg-zone-hint { font-size: 0.625rem; color: var(--vpg-text-muted); font-style: italic; }
|
|
1574
1659
|
|
|
1575
1660
|
.vpg-mini-chip {
|
|
1576
1661
|
display: inline-flex;
|
|
@@ -1587,9 +1672,9 @@
|
|
|
1587
1672
|
}
|
|
1588
1673
|
|
|
1589
1674
|
.vpg-mini-chip:active { cursor: grabbing; }
|
|
1590
|
-
.vpg-mini-chip.vpg-row-chip { background:
|
|
1591
|
-
.vpg-mini-chip.vpg-column-chip { background:
|
|
1592
|
-
.vpg-mini-chip.vpg-value-chip { background:
|
|
1675
|
+
.vpg-mini-chip.vpg-row-chip { background: var(--vpg-surface-elevated); color: var(--vpg-dim-row-text); border: 1px solid var(--vpg-dim-row-border); }
|
|
1676
|
+
.vpg-mini-chip.vpg-column-chip { background: var(--vpg-surface-elevated); color: var(--vpg-dim-col-text); border: 1px solid var(--vpg-dim-col-border); }
|
|
1677
|
+
.vpg-mini-chip.vpg-value-chip { background: var(--vpg-surface-elevated); color: var(--vpg-dim-value-text); border: 1px solid var(--vpg-dim-value-border); }
|
|
1593
1678
|
|
|
1594
1679
|
.vpg-mini-chip.vpg-chip-dragging {
|
|
1595
1680
|
opacity: 0.4;
|
|
@@ -1647,8 +1732,8 @@
|
|
|
1647
1732
|
justify-content: center;
|
|
1648
1733
|
font-size: 0.625rem;
|
|
1649
1734
|
font-weight: 700;
|
|
1650
|
-
background:
|
|
1651
|
-
color:
|
|
1735
|
+
background: var(--vpg-dim-value-border);
|
|
1736
|
+
color: var(--vpg-dim-value-text);
|
|
1652
1737
|
border-radius: 0.25rem;
|
|
1653
1738
|
flex-shrink: 0;
|
|
1654
1739
|
}
|
|
@@ -1659,8 +1744,8 @@
|
|
|
1659
1744
|
display: flex;
|
|
1660
1745
|
align-items: center;
|
|
1661
1746
|
justify-content: center;
|
|
1662
|
-
background: linear-gradient(135deg,
|
|
1663
|
-
border-top: 1px solid
|
|
1747
|
+
background: linear-gradient(135deg, var(--vpg-surface-panel), var(--vpg-surface-bg), rgba(236, 253, 245, 0.3));
|
|
1748
|
+
border-top: 1px solid var(--vpg-border-subtle);
|
|
1664
1749
|
}
|
|
1665
1750
|
|
|
1666
1751
|
.vpg-placeholder-content {
|
|
@@ -1672,9 +1757,9 @@
|
|
|
1672
1757
|
padding: 2rem;
|
|
1673
1758
|
}
|
|
1674
1759
|
|
|
1675
|
-
.vpg-placeholder-icon { width: 4rem; height: 4rem; color:
|
|
1676
|
-
.vpg-placeholder-text { font-size: 0.875rem; color:
|
|
1677
|
-
.vpg-placeholder-text strong { color:
|
|
1760
|
+
.vpg-placeholder-icon { width: 4rem; height: 4rem; color: var(--vpg-border-strong); }
|
|
1761
|
+
.vpg-placeholder-text { font-size: 0.875rem; color: var(--vpg-text-secondary); }
|
|
1762
|
+
.vpg-placeholder-text strong { color: var(--vpg-text-primary); font-weight: 600; }
|
|
1678
1763
|
|
|
1679
1764
|
/* Pivot Table */
|
|
1680
1765
|
.vpg-table-container {
|
|
@@ -1698,8 +1783,8 @@
|
|
|
1698
1783
|
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
|
|
1699
1784
|
}
|
|
1700
1785
|
|
|
1701
|
-
.vpg-column-header-row { background:
|
|
1702
|
-
.vpg-column-header-row th { background:
|
|
1786
|
+
.vpg-column-header-row { background: var(--vpg-surface-panel); }
|
|
1787
|
+
.vpg-column-header-row th { background: var(--vpg-surface-panel); }
|
|
1703
1788
|
|
|
1704
1789
|
.vpg-row-header-label {
|
|
1705
1790
|
position: sticky;
|
|
@@ -1709,30 +1794,30 @@
|
|
|
1709
1794
|
text-align: left;
|
|
1710
1795
|
font-size: 0.625rem;
|
|
1711
1796
|
font-weight: 600;
|
|
1712
|
-
color:
|
|
1797
|
+
color: var(--vpg-text-secondary);
|
|
1713
1798
|
text-transform: uppercase;
|
|
1714
|
-
border-bottom: 1px solid
|
|
1715
|
-
border-right: 1px solid
|
|
1716
|
-
background:
|
|
1799
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
1800
|
+
border-right: 1px solid var(--vpg-border-default);
|
|
1801
|
+
background: var(--vpg-surface-panel);
|
|
1717
1802
|
cursor: pointer;
|
|
1718
1803
|
}
|
|
1719
1804
|
|
|
1720
|
-
.vpg-row-header-label:hover { background:
|
|
1805
|
+
.vpg-row-header-label:hover { background: var(--vpg-surface-hover); }
|
|
1721
1806
|
|
|
1722
1807
|
.vpg-column-header-cell {
|
|
1723
1808
|
padding: 0.5rem 0.75rem;
|
|
1724
1809
|
text-align: center;
|
|
1725
1810
|
font-size: 0.6875rem;
|
|
1726
1811
|
font-weight: 600;
|
|
1727
|
-
color:
|
|
1728
|
-
border-bottom: 1px solid
|
|
1729
|
-
border-right: 1px solid
|
|
1812
|
+
color: var(--vpg-text-primary);
|
|
1813
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
1814
|
+
border-right: 1px solid var(--vpg-border-default);
|
|
1730
1815
|
white-space: nowrap;
|
|
1731
|
-
background:
|
|
1816
|
+
background: var(--vpg-surface-panel);
|
|
1732
1817
|
cursor: pointer;
|
|
1733
1818
|
}
|
|
1734
1819
|
|
|
1735
|
-
.vpg-column-header-cell:hover { background:
|
|
1820
|
+
.vpg-column-header-cell:hover { background: var(--vpg-surface-hover); }
|
|
1736
1821
|
|
|
1737
1822
|
.vpg-pivot-skeleton .vpg-header-content {
|
|
1738
1823
|
display: flex;
|
|
@@ -1748,26 +1833,26 @@
|
|
|
1748
1833
|
display: flex;
|
|
1749
1834
|
align-items: center;
|
|
1750
1835
|
justify-content: center;
|
|
1751
|
-
color:
|
|
1836
|
+
color: var(--vpg-text-muted);
|
|
1752
1837
|
font-size: 0.75rem;
|
|
1753
1838
|
}
|
|
1754
1839
|
|
|
1755
|
-
.vpg-pivot-skeleton .vpg-sort-indicator.active { color:
|
|
1840
|
+
.vpg-pivot-skeleton .vpg-sort-indicator.active { color: var(--vpg-accent); font-weight: 700; }
|
|
1756
1841
|
|
|
1757
1842
|
.vpg-total-header {
|
|
1758
1843
|
padding: 0.5rem;
|
|
1759
1844
|
text-align: center;
|
|
1760
1845
|
font-size: 0.6875rem;
|
|
1761
1846
|
font-weight: 700;
|
|
1762
|
-
color:
|
|
1763
|
-
border-bottom: 1px solid
|
|
1764
|
-
border-left: 2px solid
|
|
1765
|
-
background:
|
|
1847
|
+
color: var(--vpg-highlight-text);
|
|
1848
|
+
border-bottom: 1px solid var(--vpg-border-strong);
|
|
1849
|
+
border-left: 2px solid var(--vpg-highlight-border);
|
|
1850
|
+
background: var(--vpg-highlight-border);
|
|
1766
1851
|
vertical-align: middle;
|
|
1767
1852
|
}
|
|
1768
1853
|
|
|
1769
|
-
.vpg-data-row:hover { background:
|
|
1770
|
-
.vpg-data-row:nth-child(even) { background:
|
|
1854
|
+
.vpg-data-row:hover { background: var(--vpg-accent-soft-bg); }
|
|
1855
|
+
.vpg-data-row:nth-child(even) { background: var(--vpg-surface-striped); }
|
|
1771
1856
|
|
|
1772
1857
|
.vpg-row-header-cell {
|
|
1773
1858
|
position: sticky;
|
|
@@ -1776,26 +1861,26 @@
|
|
|
1776
1861
|
text-align: left;
|
|
1777
1862
|
font-size: 0.75rem;
|
|
1778
1863
|
font-weight: 500;
|
|
1779
|
-
color:
|
|
1780
|
-
background:
|
|
1781
|
-
border-bottom: 1px solid
|
|
1782
|
-
border-right: 1px solid
|
|
1864
|
+
color: var(--vpg-text-primary);
|
|
1865
|
+
background: var(--vpg-surface-bg);
|
|
1866
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
1867
|
+
border-right: 1px solid var(--vpg-border-default);
|
|
1783
1868
|
white-space: nowrap;
|
|
1784
1869
|
z-index: 10;
|
|
1785
1870
|
}
|
|
1786
1871
|
|
|
1787
|
-
.vpg-data-row:nth-child(even) .vpg-row-header-cell { background:
|
|
1788
|
-
.vpg-row-value + .vpg-row-value::before { content: ' / '; color:
|
|
1872
|
+
.vpg-data-row:nth-child(even) .vpg-row-header-cell { background: var(--vpg-surface-striped); }
|
|
1873
|
+
.vpg-row-value + .vpg-row-value::before { content: ' / '; color: var(--vpg-text-muted); }
|
|
1789
1874
|
|
|
1790
1875
|
.vpg-data-cell {
|
|
1791
1876
|
padding: 0.5rem 0.75rem;
|
|
1792
1877
|
text-align: right;
|
|
1793
1878
|
font-size: 0.75rem;
|
|
1794
1879
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
1795
|
-
color:
|
|
1880
|
+
color: var(--vpg-text-primary);
|
|
1796
1881
|
font-variant-numeric: tabular-nums;
|
|
1797
|
-
border-bottom: 1px solid
|
|
1798
|
-
border-right: 1px solid
|
|
1882
|
+
border-bottom: 1px solid var(--vpg-border-subtle);
|
|
1883
|
+
border-right: 1px solid var(--vpg-surface-panel);
|
|
1799
1884
|
cursor: cell;
|
|
1800
1885
|
white-space: nowrap;
|
|
1801
1886
|
}
|
|
@@ -1805,16 +1890,16 @@
|
|
|
1805
1890
|
}
|
|
1806
1891
|
|
|
1807
1892
|
.vpg-data-cell.selected {
|
|
1808
|
-
background:
|
|
1809
|
-
box-shadow: inset 0 0 0 2px
|
|
1893
|
+
background: var(--vpg-dim-value-bg);
|
|
1894
|
+
box-shadow: inset 0 0 0 2px var(--vpg-dim-value-text);
|
|
1810
1895
|
}
|
|
1811
1896
|
|
|
1812
|
-
.vpg-data-cell.vpg-is-null { color:
|
|
1813
|
-
.vpg-data-cell.vpg-total-cell { background:
|
|
1814
|
-
.vpg-data-cell.vpg-grand-total-cell { background:
|
|
1897
|
+
.vpg-data-cell.vpg-is-null { color: var(--vpg-border-strong); }
|
|
1898
|
+
.vpg-data-cell.vpg-total-cell { background: var(--vpg-highlight-bg); font-weight: 600; color: var(--vpg-highlight-text); }
|
|
1899
|
+
.vpg-data-cell.vpg-grand-total-cell { background: var(--vpg-highlight-border); font-weight: 700; color: var(--vpg-highlight-text); }
|
|
1815
1900
|
|
|
1816
|
-
.vpg-totals-row { background:
|
|
1817
|
-
.vpg-total-label { font-weight: 700; color:
|
|
1901
|
+
.vpg-totals-row { background: var(--vpg-highlight-bg); }
|
|
1902
|
+
.vpg-total-label { font-weight: 700; color: var(--vpg-highlight-text); background: var(--vpg-highlight-bg); }
|
|
1818
1903
|
|
|
1819
1904
|
/* Pivot font sizes */
|
|
1820
1905
|
.vpg-pivot-skeleton.vpg-font-xs .vpg-data-cell,
|
|
@@ -1832,14 +1917,14 @@
|
|
|
1832
1917
|
gap: 0.5rem;
|
|
1833
1918
|
padding: 0.5rem 1rem;
|
|
1834
1919
|
font-size: 0.75rem;
|
|
1835
|
-
color:
|
|
1836
|
-
background:
|
|
1837
|
-
border-top: 1px solid
|
|
1920
|
+
color: var(--vpg-text-secondary);
|
|
1921
|
+
background: var(--vpg-surface-panel);
|
|
1922
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
1838
1923
|
flex-shrink: 0;
|
|
1839
1924
|
}
|
|
1840
1925
|
|
|
1841
1926
|
.vpg-skeleton-footer .vpg-footer-info {
|
|
1842
|
-
color:
|
|
1927
|
+
color: var(--vpg-text-muted);
|
|
1843
1928
|
}
|
|
1844
1929
|
|
|
1845
1930
|
.vpg-skeleton-footer .vpg-selection-stats {
|
|
@@ -1860,18 +1945,18 @@
|
|
|
1860
1945
|
}
|
|
1861
1946
|
|
|
1862
1947
|
.vpg-skeleton-footer .vpg-stat-label {
|
|
1863
|
-
color:
|
|
1948
|
+
color: var(--vpg-text-secondary);
|
|
1864
1949
|
font-weight: 400;
|
|
1865
1950
|
}
|
|
1866
1951
|
|
|
1867
1952
|
.vpg-skeleton-footer .vpg-stat-value {
|
|
1868
|
-
color:
|
|
1953
|
+
color: var(--vpg-accent);
|
|
1869
1954
|
font-weight: 500;
|
|
1870
1955
|
font-variant-numeric: tabular-nums;
|
|
1871
1956
|
}
|
|
1872
1957
|
|
|
1873
1958
|
.vpg-skeleton-footer .vpg-stat-divider {
|
|
1874
|
-
color:
|
|
1959
|
+
color: var(--vpg-border-strong);
|
|
1875
1960
|
}
|
|
1876
1961
|
|
|
1877
1962
|
/* Pivot toast notification */
|
|
@@ -1883,8 +1968,8 @@
|
|
|
1883
1968
|
align-items: center;
|
|
1884
1969
|
gap: 0.5rem;
|
|
1885
1970
|
padding: 0.5rem 1rem;
|
|
1886
|
-
background:
|
|
1887
|
-
color:
|
|
1971
|
+
background: var(--vpg-state-success);
|
|
1972
|
+
color: var(--vpg-text-inverse);
|
|
1888
1973
|
border-radius: 0.5rem;
|
|
1889
1974
|
font-size: 0.875rem;
|
|
1890
1975
|
font-weight: 500;
|
|
@@ -1907,20 +1992,20 @@
|
|
|
1907
1992
|
/* Skeleton Watermark */
|
|
1908
1993
|
.vpg-pivot-skeleton .vpg-watermark {
|
|
1909
1994
|
padding: 0.375rem 1rem;
|
|
1910
|
-
background:
|
|
1911
|
-
border-top: 1px solid
|
|
1995
|
+
background: var(--vpg-surface-hover);
|
|
1996
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
1912
1997
|
text-align: center;
|
|
1913
1998
|
flex-shrink: 0;
|
|
1914
1999
|
}
|
|
1915
2000
|
|
|
1916
2001
|
.vpg-pivot-skeleton .vpg-watermark a {
|
|
1917
2002
|
font-size: 0.625rem;
|
|
1918
|
-
color:
|
|
2003
|
+
color: var(--vpg-text-muted);
|
|
1919
2004
|
text-decoration: none;
|
|
1920
2005
|
transition: color 0.15s;
|
|
1921
2006
|
}
|
|
1922
2007
|
|
|
1923
|
-
.vpg-pivot-skeleton .vpg-watermark a:hover { color:
|
|
2008
|
+
.vpg-pivot-skeleton .vpg-watermark a:hover { color: var(--vpg-text-secondary); }
|
|
1924
2009
|
|
|
1925
2010
|
/* Demo Mode */
|
|
1926
2011
|
.vpg-pivot-skeleton .vpg-watermark.vpg-demo-mode {
|
|
@@ -1929,21 +2014,21 @@
|
|
|
1929
2014
|
justify-content: center;
|
|
1930
2015
|
gap: 0.75rem;
|
|
1931
2016
|
padding: 0.5rem 1rem;
|
|
1932
|
-
background:
|
|
1933
|
-
border-top: 1px solid
|
|
2017
|
+
background: var(--vpg-highlight-bg);
|
|
2018
|
+
border-top: 1px solid var(--vpg-highlight-border);
|
|
1934
2019
|
font-size: 0.75rem;
|
|
1935
|
-
color:
|
|
2020
|
+
color: var(--vpg-highlight-text);
|
|
1936
2021
|
}
|
|
1937
2022
|
|
|
1938
|
-
.vpg-get-pro { font-weight: 600; color:
|
|
1939
|
-
.vpg-get-pro:hover { color:
|
|
2023
|
+
.vpg-get-pro { font-weight: 600; color: var(--vpg-highlight-text) !important; }
|
|
2024
|
+
.vpg-get-pro:hover { color: var(--vpg-highlight-text) !important; text-decoration: underline; opacity: 0.85; }
|
|
1940
2025
|
|
|
1941
2026
|
/* Pivot table scrollbar */
|
|
1942
2027
|
.vpg-table-container::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
|
|
1943
|
-
.vpg-table-container::-webkit-scrollbar-track { background:
|
|
1944
|
-
.vpg-table-container::-webkit-scrollbar-thumb { background:
|
|
1945
|
-
.vpg-table-container::-webkit-scrollbar-thumb:hover { background:
|
|
1946
|
-
.vpg-table-container::-webkit-scrollbar-corner { background:
|
|
2028
|
+
.vpg-table-container::-webkit-scrollbar-track { background: var(--vpg-scrollbar-track); }
|
|
2029
|
+
.vpg-table-container::-webkit-scrollbar-thumb { background: var(--vpg-scrollbar-thumb); border-radius: 9999px; }
|
|
2030
|
+
.vpg-table-container::-webkit-scrollbar-thumb:hover { background: var(--vpg-text-muted); }
|
|
2031
|
+
.vpg-table-container::-webkit-scrollbar-corner { background: var(--vpg-scrollbar-track); }
|
|
1947
2032
|
|
|
1948
2033
|
/* Filter indicator in pivot */
|
|
1949
2034
|
.vpg-pivot-skeleton .vpg-filter-indicator {
|
|
@@ -1952,19 +2037,18 @@
|
|
|
1952
2037
|
align-items: center;
|
|
1953
2038
|
gap: 0.375rem;
|
|
1954
2039
|
padding: 0.25rem 0.625rem;
|
|
1955
|
-
background:
|
|
1956
|
-
border: 1px solid
|
|
2040
|
+
background: var(--vpg-highlight-bg);
|
|
2041
|
+
border: 1px solid var(--vpg-highlight-border);
|
|
1957
2042
|
border-radius: 0.375rem;
|
|
1958
2043
|
font-size: 0.6875rem;
|
|
1959
|
-
color:
|
|
1960
|
-
box-shadow: 0 1px 2px rgba(245, 158, 11, 0.15);
|
|
2044
|
+
color: var(--vpg-highlight-text);
|
|
1961
2045
|
}
|
|
1962
2046
|
|
|
1963
2047
|
.vpg-pivot-skeleton .vpg-filter-icon {
|
|
1964
2048
|
width: 0.875rem;
|
|
1965
2049
|
height: 0.875rem;
|
|
1966
2050
|
flex-shrink: 0;
|
|
1967
|
-
color:
|
|
2051
|
+
color: var(--vpg-highlight-text);
|
|
1968
2052
|
}
|
|
1969
2053
|
|
|
1970
2054
|
.vpg-pivot-skeleton .vpg-filter-text {
|
|
@@ -1976,14 +2060,14 @@
|
|
|
1976
2060
|
|
|
1977
2061
|
.vpg-pivot-skeleton .vpg-filter-text strong {
|
|
1978
2062
|
font-weight: 600;
|
|
1979
|
-
color:
|
|
2063
|
+
color: var(--vpg-highlight-text);
|
|
1980
2064
|
max-width: 150px;
|
|
1981
2065
|
overflow: hidden;
|
|
1982
2066
|
text-overflow: ellipsis;
|
|
1983
2067
|
}
|
|
1984
2068
|
|
|
1985
2069
|
.vpg-pivot-skeleton .vpg-filter-count {
|
|
1986
|
-
color:
|
|
2070
|
+
color: var(--vpg-highlight-text);
|
|
1987
2071
|
font-size: 0.625rem;
|
|
1988
2072
|
}
|
|
1989
2073
|
|
|
@@ -1994,8 +2078,8 @@
|
|
|
1994
2078
|
right: 0;
|
|
1995
2079
|
min-width: 220px;
|
|
1996
2080
|
max-width: 320px;
|
|
1997
|
-
background:
|
|
1998
|
-
border: 1px solid
|
|
2081
|
+
background: var(--vpg-surface-elevated);
|
|
2082
|
+
border: 1px solid var(--vpg-border-default);
|
|
1999
2083
|
border-radius: 0.5rem;
|
|
2000
2084
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
2001
2085
|
z-index: 100;
|
|
@@ -2006,16 +2090,16 @@
|
|
|
2006
2090
|
padding: 0.5rem 0.75rem;
|
|
2007
2091
|
font-size: 0.6875rem;
|
|
2008
2092
|
font-weight: 700;
|
|
2009
|
-
color:
|
|
2010
|
-
background:
|
|
2011
|
-
border-bottom: 1px solid
|
|
2093
|
+
color: var(--vpg-text-secondary);
|
|
2094
|
+
background: var(--vpg-surface-panel);
|
|
2095
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
2012
2096
|
text-transform: uppercase;
|
|
2013
2097
|
letter-spacing: 0.05em;
|
|
2014
2098
|
}
|
|
2015
2099
|
|
|
2016
2100
|
.vpg-tooltip-filter {
|
|
2017
2101
|
padding: 0.5rem 0.75rem;
|
|
2018
|
-
border-bottom: 1px solid
|
|
2102
|
+
border-bottom: 1px solid var(--vpg-border-subtle);
|
|
2019
2103
|
}
|
|
2020
2104
|
|
|
2021
2105
|
.vpg-tooltip-filter:last-of-type {
|
|
@@ -2025,7 +2109,7 @@
|
|
|
2025
2109
|
.vpg-tooltip-column {
|
|
2026
2110
|
font-size: 0.6875rem;
|
|
2027
2111
|
font-weight: 600;
|
|
2028
|
-
color:
|
|
2112
|
+
color: var(--vpg-text-primary);
|
|
2029
2113
|
margin-bottom: 0.375rem;
|
|
2030
2114
|
}
|
|
2031
2115
|
|
|
@@ -2038,81 +2122,54 @@
|
|
|
2038
2122
|
.vpg-tooltip-value {
|
|
2039
2123
|
padding: 0.125rem 0.375rem;
|
|
2040
2124
|
font-size: 0.625rem;
|
|
2041
|
-
background:
|
|
2042
|
-
color:
|
|
2125
|
+
background: var(--vpg-highlight-bg);
|
|
2126
|
+
color: var(--vpg-highlight-text);
|
|
2043
2127
|
border-radius: 0.25rem;
|
|
2044
|
-
border: 1px solid
|
|
2128
|
+
border: 1px solid var(--vpg-highlight-border);
|
|
2045
2129
|
}
|
|
2046
2130
|
|
|
2047
2131
|
.vpg-tooltip-more {
|
|
2048
2132
|
padding: 0.125rem 0.375rem;
|
|
2049
2133
|
font-size: 0.625rem;
|
|
2050
|
-
color:
|
|
2134
|
+
color: var(--vpg-text-secondary);
|
|
2051
2135
|
font-style: italic;
|
|
2052
2136
|
}
|
|
2053
2137
|
|
|
2054
2138
|
.vpg-tooltip-summary {
|
|
2055
2139
|
padding: 0.5rem 0.75rem;
|
|
2056
2140
|
font-size: 0.625rem;
|
|
2057
|
-
color:
|
|
2058
|
-
background:
|
|
2059
|
-
border-top: 1px solid
|
|
2141
|
+
color: var(--vpg-text-secondary);
|
|
2142
|
+
background: var(--vpg-surface-panel);
|
|
2143
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
2060
2144
|
text-align: center;
|
|
2061
2145
|
}
|
|
2062
2146
|
|
|
2063
|
-
/* Filter tooltip
|
|
2147
|
+
/* Filter tooltip — border swaps to strong in dark (token-mismatch with light=default). */
|
|
2064
2148
|
.vpg-theme-dark .vpg-pivot-skeleton .vpg-filter-tooltip {
|
|
2065
|
-
|
|
2066
|
-
border-color: #475569 !important;
|
|
2149
|
+
border-color: var(--vpg-border-strong);
|
|
2067
2150
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
|
|
2068
2151
|
}
|
|
2069
2152
|
|
|
2153
|
+
/* Tooltip header background flips to surface-bg in dark (token-mismatch). */
|
|
2070
2154
|
.vpg-theme-dark .vpg-pivot-skeleton .vpg-tooltip-header {
|
|
2071
|
-
background:
|
|
2072
|
-
border-color: #334155 !important;
|
|
2073
|
-
color: #94a3b8 !important;
|
|
2155
|
+
background: var(--vpg-surface-bg);
|
|
2074
2156
|
}
|
|
2075
2157
|
|
|
2158
|
+
/* Filter row border swaps to default in dark (light=subtle). */
|
|
2076
2159
|
.vpg-theme-dark .vpg-pivot-skeleton .vpg-tooltip-filter {
|
|
2077
|
-
border-color:
|
|
2078
|
-
}
|
|
2079
|
-
|
|
2080
|
-
.vpg-theme-dark .vpg-pivot-skeleton .vpg-tooltip-column {
|
|
2081
|
-
color: #e2e8f0 !important;
|
|
2082
|
-
}
|
|
2083
|
-
|
|
2084
|
-
.vpg-theme-dark .vpg-pivot-skeleton .vpg-tooltip-value {
|
|
2085
|
-
background: rgba(245, 158, 11, 0.2) !important;
|
|
2086
|
-
color: #fbbf24 !important;
|
|
2087
|
-
border-color: rgba(245, 158, 11, 0.4) !important;
|
|
2088
|
-
}
|
|
2089
|
-
|
|
2090
|
-
.vpg-theme-dark .vpg-pivot-skeleton .vpg-tooltip-more {
|
|
2091
|
-
color: #94a3b8 !important;
|
|
2160
|
+
border-color: var(--vpg-border-default);
|
|
2092
2161
|
}
|
|
2093
2162
|
|
|
2163
|
+
/* Tooltip summary background flips to surface-bg in dark (token-mismatch). */
|
|
2094
2164
|
.vpg-theme-dark .vpg-pivot-skeleton .vpg-tooltip-summary {
|
|
2095
|
-
background:
|
|
2096
|
-
border-color: #334155 !important;
|
|
2097
|
-
color: #94a3b8 !important;
|
|
2165
|
+
background: var(--vpg-surface-bg);
|
|
2098
2166
|
}
|
|
2099
2167
|
|
|
2100
|
-
/*
|
|
2168
|
+
/* Placeholder gradient: first two stops resolve identically via tokens, but the
|
|
2169
|
+
decorative emerald tint and border-top role differ between light and dark. */
|
|
2101
2170
|
.vpg-theme-dark .vpg-pivot-skeleton .vpg-placeholder {
|
|
2102
|
-
background: linear-gradient(135deg,
|
|
2103
|
-
border-top-color:
|
|
2104
|
-
}
|
|
2105
|
-
|
|
2106
|
-
.vpg-theme-dark .vpg-pivot-skeleton .vpg-placeholder-icon {
|
|
2107
|
-
color: #475569;
|
|
2108
|
-
}
|
|
2109
|
-
|
|
2110
|
-
.vpg-theme-dark .vpg-pivot-skeleton .vpg-placeholder-text {
|
|
2111
|
-
color: #94a3b8;
|
|
2112
|
-
}
|
|
2113
|
-
|
|
2114
|
-
.vpg-theme-dark .vpg-pivot-skeleton .vpg-placeholder-text strong {
|
|
2115
|
-
color: #e2e8f0;
|
|
2171
|
+
background: linear-gradient(135deg, var(--vpg-surface-panel), var(--vpg-surface-bg), rgba(16, 185, 129, 0.05));
|
|
2172
|
+
border-top-color: var(--vpg-border-default);
|
|
2116
2173
|
}
|
|
2117
2174
|
|
|
2118
2175
|
/* ==========================================================================
|
|
@@ -2130,7 +2187,7 @@
|
|
|
2130
2187
|
}
|
|
2131
2188
|
|
|
2132
2189
|
.vpg-modal {
|
|
2133
|
-
background:
|
|
2190
|
+
background: var(--vpg-surface-bg);
|
|
2134
2191
|
border-radius: 0.75rem;
|
|
2135
2192
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
2136
2193
|
width: 90%;
|
|
@@ -2146,14 +2203,14 @@
|
|
|
2146
2203
|
align-items: center;
|
|
2147
2204
|
justify-content: space-between;
|
|
2148
2205
|
padding: 1rem 1.25rem;
|
|
2149
|
-
border-bottom: 1px solid
|
|
2150
|
-
background:
|
|
2206
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
2207
|
+
background: var(--vpg-surface-panel);
|
|
2151
2208
|
}
|
|
2152
2209
|
|
|
2153
2210
|
.vpg-modal-header h3 {
|
|
2154
2211
|
font-size: 1rem;
|
|
2155
2212
|
font-weight: 600;
|
|
2156
|
-
color:
|
|
2213
|
+
color: var(--vpg-text-primary);
|
|
2157
2214
|
margin: 0;
|
|
2158
2215
|
}
|
|
2159
2216
|
|
|
@@ -2164,7 +2221,7 @@
|
|
|
2164
2221
|
align-items: center;
|
|
2165
2222
|
justify-content: center;
|
|
2166
2223
|
font-size: 1.5rem;
|
|
2167
|
-
color:
|
|
2224
|
+
color: var(--vpg-text-secondary);
|
|
2168
2225
|
background: transparent;
|
|
2169
2226
|
border: none;
|
|
2170
2227
|
border-radius: 0.375rem;
|
|
@@ -2172,7 +2229,7 @@
|
|
|
2172
2229
|
transition: all 0.15s;
|
|
2173
2230
|
}
|
|
2174
2231
|
|
|
2175
|
-
.vpg-modal-close:hover { background:
|
|
2232
|
+
.vpg-modal-close:hover { background: var(--vpg-border-default); color: var(--vpg-text-primary); }
|
|
2176
2233
|
|
|
2177
2234
|
.vpg-modal-body {
|
|
2178
2235
|
padding: 1.25rem;
|
|
@@ -2188,7 +2245,7 @@
|
|
|
2188
2245
|
display: block;
|
|
2189
2246
|
font-size: 0.8125rem;
|
|
2190
2247
|
font-weight: 600;
|
|
2191
|
-
color:
|
|
2248
|
+
color: var(--vpg-text-primary);
|
|
2192
2249
|
margin-bottom: 0.375rem;
|
|
2193
2250
|
}
|
|
2194
2251
|
|
|
@@ -2196,7 +2253,7 @@
|
|
|
2196
2253
|
display: block;
|
|
2197
2254
|
font-size: 0.6875rem;
|
|
2198
2255
|
font-weight: 500;
|
|
2199
|
-
color:
|
|
2256
|
+
color: var(--vpg-text-secondary);
|
|
2200
2257
|
margin-bottom: 0.375rem;
|
|
2201
2258
|
text-transform: uppercase;
|
|
2202
2259
|
letter-spacing: 0.05em;
|
|
@@ -2208,10 +2265,10 @@
|
|
|
2208
2265
|
width: 100%;
|
|
2209
2266
|
padding: 0.5rem 0.75rem;
|
|
2210
2267
|
font-size: 0.875rem;
|
|
2211
|
-
border: 1px solid
|
|
2268
|
+
border: 1px solid var(--vpg-border-strong);
|
|
2212
2269
|
border-radius: 0.375rem;
|
|
2213
|
-
background:
|
|
2214
|
-
color:
|
|
2270
|
+
background: var(--vpg-surface-elevated);
|
|
2271
|
+
color: var(--vpg-text-primary);
|
|
2215
2272
|
transition: all 0.15s;
|
|
2216
2273
|
}
|
|
2217
2274
|
|
|
@@ -2219,7 +2276,7 @@
|
|
|
2219
2276
|
.vpg-textarea:focus,
|
|
2220
2277
|
.vpg-select:focus {
|
|
2221
2278
|
outline: none;
|
|
2222
|
-
border-color:
|
|
2279
|
+
border-color: var(--vpg-accent);
|
|
2223
2280
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
|
2224
2281
|
}
|
|
2225
2282
|
|
|
@@ -2232,8 +2289,8 @@
|
|
|
2232
2289
|
padding: 0.25rem 0.5rem;
|
|
2233
2290
|
font-size: 0.6875rem;
|
|
2234
2291
|
font-weight: 600;
|
|
2235
|
-
background:
|
|
2236
|
-
color:
|
|
2292
|
+
background: var(--vpg-accent-soft-bg);
|
|
2293
|
+
color: var(--vpg-accent);
|
|
2237
2294
|
border: 1px solid #c7d2fe;
|
|
2238
2295
|
border-radius: 0.25rem;
|
|
2239
2296
|
cursor: pointer;
|
|
@@ -2254,16 +2311,16 @@
|
|
|
2254
2311
|
.vpg-formula-hint {
|
|
2255
2312
|
margin-top: 0.25rem;
|
|
2256
2313
|
font-size: 0.6875rem;
|
|
2257
|
-
color:
|
|
2314
|
+
color: var(--vpg-text-secondary);
|
|
2258
2315
|
}
|
|
2259
2316
|
|
|
2260
2317
|
.vpg-no-fields {
|
|
2261
2318
|
font-size: 0.75rem;
|
|
2262
|
-
color:
|
|
2319
|
+
color: var(--vpg-text-muted);
|
|
2263
2320
|
font-style: italic;
|
|
2264
2321
|
padding: 0.5rem;
|
|
2265
2322
|
text-align: center;
|
|
2266
|
-
background:
|
|
2323
|
+
background: var(--vpg-surface-panel);
|
|
2267
2324
|
border-radius: 0.375rem;
|
|
2268
2325
|
}
|
|
2269
2326
|
|
|
@@ -2286,8 +2343,8 @@
|
|
|
2286
2343
|
justify-content: flex-end;
|
|
2287
2344
|
gap: 0.75rem;
|
|
2288
2345
|
padding: 1rem 1.25rem;
|
|
2289
|
-
border-top: 1px solid
|
|
2290
|
-
background:
|
|
2346
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
2347
|
+
background: var(--vpg-surface-panel);
|
|
2291
2348
|
}
|
|
2292
2349
|
|
|
2293
2350
|
.vpg-btn {
|
|
@@ -2300,78 +2357,43 @@
|
|
|
2300
2357
|
}
|
|
2301
2358
|
|
|
2302
2359
|
.vpg-btn-secondary {
|
|
2303
|
-
background:
|
|
2304
|
-
color:
|
|
2305
|
-
border: 1px solid
|
|
2360
|
+
background: var(--vpg-surface-elevated);
|
|
2361
|
+
color: var(--vpg-text-primary);
|
|
2362
|
+
border: 1px solid var(--vpg-border-strong);
|
|
2306
2363
|
}
|
|
2307
2364
|
|
|
2308
|
-
.vpg-btn-secondary:hover { background:
|
|
2365
|
+
.vpg-btn-secondary:hover { background: var(--vpg-surface-hover); }
|
|
2309
2366
|
|
|
2310
2367
|
.vpg-btn-primary {
|
|
2311
|
-
background:
|
|
2312
|
-
color:
|
|
2313
|
-
border: 1px solid
|
|
2314
|
-
}
|
|
2315
|
-
|
|
2316
|
-
.vpg-btn-primary:hover { background:
|
|
2317
|
-
|
|
2318
|
-
/* Dark mode -
|
|
2319
|
-
.vpg-theme-dark .vpg-modal { background: #1e293b; }
|
|
2320
|
-
.vpg-theme-dark .vpg-modal-header { background: #0f172a; border-color: #334155; }
|
|
2321
|
-
.vpg-theme-dark .vpg-modal-header h3 { color: #f1f5f9; }
|
|
2322
|
-
.vpg-theme-dark .vpg-modal-close { color: #94a3b8; }
|
|
2323
|
-
.vpg-theme-dark .vpg-modal-close:hover { background: #334155; color: #f1f5f9; }
|
|
2324
|
-
.vpg-theme-dark .vpg-modal .vpg-label { color: #e2e8f0; }
|
|
2325
|
-
.vpg-theme-dark .vpg-label-small { color: #94a3b8; }
|
|
2326
|
-
.vpg-theme-dark .vpg-input,
|
|
2327
|
-
.vpg-theme-dark .vpg-textarea,
|
|
2328
|
-
.vpg-theme-dark .vpg-select { background: #0f172a; border-color: #334155; color: #f1f5f9; }
|
|
2329
|
-
.vpg-theme-dark .vpg-input:focus,
|
|
2330
|
-
.vpg-theme-dark .vpg-textarea:focus,
|
|
2331
|
-
.vpg-theme-dark .vpg-select:focus { border-color: #6366f1; }
|
|
2332
|
-
.vpg-theme-dark .vpg-insert-btn { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.3); }
|
|
2333
|
-
.vpg-theme-dark .vpg-field-btn { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
|
|
2334
|
-
.vpg-theme-dark .vpg-no-fields { background: #334155; color: #64748b; }
|
|
2335
|
-
.vpg-theme-dark .vpg-modal-footer { background: #0f172a; border-color: #334155; }
|
|
2336
|
-
.vpg-theme-dark .vpg-btn-secondary { background: #334155; color: #e2e8f0; border-color: #475569; }
|
|
2337
|
-
.vpg-theme-dark .vpg-btn-secondary:hover { background: #475569; }
|
|
2338
|
-
.vpg-theme-dark .vpg-error-box { background: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.3); }
|
|
2339
|
-
|
|
2340
|
-
/* Dark mode - Calculated fields in config */
|
|
2341
|
-
.vpg-theme-dark .vpg-assigned-item.vpg-type-calc { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.3); }
|
|
2342
|
-
.vpg-theme-dark .vpg-item-badge.calc { background: rgba(168, 85, 247, 0.3); color: #c4b5fd; }
|
|
2343
|
-
.vpg-theme-dark .vpg-field-item.vpg-is-calculated { border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.1); }
|
|
2344
|
-
.vpg-theme-dark .vpg-calc-type { background: rgba(168, 85, 247, 0.4) !important; color: #c4b5fd !important; }
|
|
2368
|
+
background: var(--vpg-accent);
|
|
2369
|
+
color: var(--vpg-text-inverse);
|
|
2370
|
+
border: 1px solid var(--vpg-accent);
|
|
2371
|
+
}
|
|
2372
|
+
|
|
2373
|
+
.vpg-btn-primary:hover { background: var(--vpg-accent-hover); border-color: var(--vpg-accent-hover); }
|
|
2374
|
+
|
|
2375
|
+
/* Dark mode - Calculated field overrides (token-mismatch fallbacks) */
|
|
2345
2376
|
.vpg-theme-dark .vpg-field-edit,
|
|
2346
2377
|
.vpg-theme-dark .vpg-field-delete { color: #64748b; }
|
|
2347
2378
|
.vpg-theme-dark .vpg-field-edit:hover { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
|
|
2348
2379
|
.vpg-theme-dark .vpg-field-delete:hover { background: rgba(239, 68, 68, 0.2); color: #f87171; }
|
|
2349
|
-
.vpg-theme-dark .vpg-calc-btn { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
|
|
2350
|
-
.vpg-theme-dark .vpg-calc-btn:hover { background: rgba(168, 85, 247, 0.25); border-color: rgba(168, 85, 247, 0.5); }
|
|
2351
2380
|
|
|
2352
|
-
/* Dark mode - Selection stats */
|
|
2381
|
+
/* Dark mode - Selection stats (rgba indigo wash + decorative indigo accent text) */
|
|
2353
2382
|
.vpg-theme-dark .vpg-selection-stats {
|
|
2354
2383
|
background: rgba(99, 102, 241, 0.1);
|
|
2355
2384
|
border-color: rgba(99, 102, 241, 0.2);
|
|
2356
2385
|
}
|
|
2357
|
-
.vpg-theme-dark .vpg-stat-label { color: #94a3b8; }
|
|
2358
2386
|
.vpg-theme-dark .vpg-stat-value { color: #a5b4fc; }
|
|
2359
|
-
.vpg-theme-dark .vpg-stat-divider { color: #475569; }
|
|
2360
2387
|
|
|
2361
|
-
/* Dark mode - Pivot skeleton footer */
|
|
2388
|
+
/* Dark mode - Pivot skeleton footer (background flips to surface-bg in dark vs surface-panel in light) */
|
|
2362
2389
|
.vpg-theme-dark .vpg-skeleton-footer {
|
|
2363
|
-
background:
|
|
2364
|
-
border-color: #334155;
|
|
2365
|
-
color: #94a3b8;
|
|
2390
|
+
background: var(--vpg-surface-bg);
|
|
2366
2391
|
}
|
|
2367
|
-
.vpg-theme-dark .vpg-skeleton-footer .vpg-footer-info { color: #64748b; }
|
|
2368
2392
|
.vpg-theme-dark .vpg-skeleton-footer .vpg-selection-stats {
|
|
2369
2393
|
background: rgba(16, 185, 129, 0.1);
|
|
2370
2394
|
border-color: rgba(16, 185, 129, 0.2);
|
|
2371
2395
|
}
|
|
2372
|
-
.vpg-theme-dark .vpg-skeleton-footer .vpg-stat-label { color: #94a3b8; }
|
|
2373
2396
|
.vpg-theme-dark .vpg-skeleton-footer .vpg-stat-value { color: #34d399; }
|
|
2374
|
-
.vpg-theme-dark .vpg-skeleton-footer .vpg-stat-divider { color: #475569; }
|
|
2375
2397
|
|
|
2376
2398
|
/* ============================================
|
|
2377
2399
|
Numeric Range Filter Styles
|
|
@@ -2382,7 +2404,7 @@
|
|
|
2382
2404
|
display: flex;
|
|
2383
2405
|
gap: 0.25rem;
|
|
2384
2406
|
padding: 0.375rem 0.5rem;
|
|
2385
|
-
background:
|
|
2407
|
+
background: var(--vpg-surface-panel);
|
|
2386
2408
|
}
|
|
2387
2409
|
|
|
2388
2410
|
.vpg-tab-btn {
|
|
@@ -2394,27 +2416,27 @@
|
|
|
2394
2416
|
padding: 0.375rem 0.5rem;
|
|
2395
2417
|
font-size: 0.6875rem;
|
|
2396
2418
|
font-weight: 500;
|
|
2397
|
-
color:
|
|
2398
|
-
background:
|
|
2399
|
-
border: 1px solid
|
|
2419
|
+
color: var(--vpg-text-secondary);
|
|
2420
|
+
background: var(--vpg-surface-bg);
|
|
2421
|
+
border: 1px solid var(--vpg-border-default);
|
|
2400
2422
|
border-radius: 0.25rem;
|
|
2401
2423
|
cursor: pointer;
|
|
2402
2424
|
transition: all 0.15s;
|
|
2403
2425
|
}
|
|
2404
2426
|
|
|
2405
2427
|
.vpg-tab-btn:hover {
|
|
2406
|
-
background:
|
|
2407
|
-
color:
|
|
2428
|
+
background: var(--vpg-surface-hover);
|
|
2429
|
+
color: var(--vpg-text-primary);
|
|
2408
2430
|
}
|
|
2409
2431
|
|
|
2410
2432
|
.vpg-tab-btn.active {
|
|
2411
|
-
background:
|
|
2412
|
-
color:
|
|
2413
|
-
border-color:
|
|
2433
|
+
background: var(--vpg-accent);
|
|
2434
|
+
color: var(--vpg-text-inverse);
|
|
2435
|
+
border-color: var(--vpg-accent);
|
|
2414
2436
|
}
|
|
2415
2437
|
|
|
2416
2438
|
.vpg-tab-btn.active:hover {
|
|
2417
|
-
background:
|
|
2439
|
+
background: var(--vpg-accent-hover);
|
|
2418
2440
|
}
|
|
2419
2441
|
|
|
2420
2442
|
/* Range filter container */
|
|
@@ -2431,13 +2453,13 @@
|
|
|
2431
2453
|
}
|
|
2432
2454
|
|
|
2433
2455
|
.vpg-range-label {
|
|
2434
|
-
color:
|
|
2456
|
+
color: var(--vpg-text-secondary);
|
|
2435
2457
|
}
|
|
2436
2458
|
|
|
2437
2459
|
.vpg-range-bounds {
|
|
2438
2460
|
font-weight: 500;
|
|
2439
|
-
color:
|
|
2440
|
-
background:
|
|
2461
|
+
color: var(--vpg-text-primary);
|
|
2462
|
+
background: var(--vpg-surface-hover);
|
|
2441
2463
|
padding: 0.125rem 0.375rem;
|
|
2442
2464
|
border-radius: 0.25rem;
|
|
2443
2465
|
}
|
|
@@ -2455,7 +2477,7 @@
|
|
|
2455
2477
|
left: 0;
|
|
2456
2478
|
right: 0;
|
|
2457
2479
|
height: 4px;
|
|
2458
|
-
background:
|
|
2480
|
+
background: var(--vpg-border-default);
|
|
2459
2481
|
border-radius: 2px;
|
|
2460
2482
|
transform: translateY(-50%);
|
|
2461
2483
|
}
|
|
@@ -2549,7 +2571,7 @@
|
|
|
2549
2571
|
display: block;
|
|
2550
2572
|
font-size: 0.625rem;
|
|
2551
2573
|
font-weight: 500;
|
|
2552
|
-
color:
|
|
2574
|
+
color: var(--vpg-text-secondary);
|
|
2553
2575
|
margin-bottom: 0.125rem;
|
|
2554
2576
|
text-transform: uppercase;
|
|
2555
2577
|
letter-spacing: 0.025em;
|
|
@@ -2559,23 +2581,23 @@
|
|
|
2559
2581
|
width: 100%;
|
|
2560
2582
|
padding: 0.375rem 0.5rem;
|
|
2561
2583
|
font-size: 0.75rem;
|
|
2562
|
-
border: 1px solid
|
|
2584
|
+
border: 1px solid var(--vpg-border-strong);
|
|
2563
2585
|
border-radius: 0.25rem;
|
|
2564
2586
|
outline: none;
|
|
2565
2587
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
2566
2588
|
}
|
|
2567
2589
|
|
|
2568
2590
|
.vpg-range-input:focus {
|
|
2569
|
-
border-color:
|
|
2591
|
+
border-color: var(--vpg-accent);
|
|
2570
2592
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
|
|
2571
2593
|
}
|
|
2572
2594
|
|
|
2573
2595
|
.vpg-range-input::-moz-placeholder {
|
|
2574
|
-
color:
|
|
2596
|
+
color: var(--vpg-text-muted);
|
|
2575
2597
|
}
|
|
2576
2598
|
|
|
2577
2599
|
.vpg-range-input::placeholder {
|
|
2578
|
-
color:
|
|
2600
|
+
color: var(--vpg-text-muted);
|
|
2579
2601
|
}
|
|
2580
2602
|
|
|
2581
2603
|
/* Hide number input spinners */
|
|
@@ -2590,7 +2612,7 @@
|
|
|
2590
2612
|
}
|
|
2591
2613
|
|
|
2592
2614
|
.vpg-input-separator {
|
|
2593
|
-
color:
|
|
2615
|
+
color: var(--vpg-text-muted);
|
|
2594
2616
|
font-size: 0.6875rem;
|
|
2595
2617
|
padding-top: 1rem;
|
|
2596
2618
|
}
|
|
@@ -2609,18 +2631,18 @@
|
|
|
2609
2631
|
padding: 0.25rem 0.5rem;
|
|
2610
2632
|
font-size: 0.6875rem;
|
|
2611
2633
|
font-weight: 500;
|
|
2612
|
-
color:
|
|
2613
|
-
background:
|
|
2614
|
-
border: 1px solid
|
|
2634
|
+
color: var(--vpg-text-secondary);
|
|
2635
|
+
background: var(--vpg-surface-panel);
|
|
2636
|
+
border: 1px solid var(--vpg-border-default);
|
|
2615
2637
|
border-radius: 0.25rem;
|
|
2616
2638
|
cursor: pointer;
|
|
2617
2639
|
transition: all 0.15s;
|
|
2618
2640
|
}
|
|
2619
2641
|
|
|
2620
2642
|
.vpg-range-btn:hover:not(:disabled) {
|
|
2621
|
-
background:
|
|
2622
|
-
border-color:
|
|
2623
|
-
color:
|
|
2643
|
+
background: var(--vpg-surface-hover);
|
|
2644
|
+
border-color: var(--vpg-border-strong);
|
|
2645
|
+
color: var(--vpg-text-primary);
|
|
2624
2646
|
}
|
|
2625
2647
|
|
|
2626
2648
|
.vpg-range-btn:disabled {
|
|
@@ -2639,36 +2661,28 @@
|
|
|
2639
2661
|
align-items: center;
|
|
2640
2662
|
gap: 0.375rem;
|
|
2641
2663
|
padding: 0.375rem 0.5rem;
|
|
2642
|
-
background:
|
|
2664
|
+
background: var(--vpg-accent-soft-bg);
|
|
2643
2665
|
border-radius: 0.25rem;
|
|
2644
2666
|
font-size: 0.6875rem;
|
|
2645
|
-
color:
|
|
2667
|
+
color: var(--vpg-accent-soft-text);
|
|
2646
2668
|
}
|
|
2647
2669
|
|
|
2648
2670
|
.vpg-filter-summary strong {
|
|
2649
2671
|
font-weight: 600;
|
|
2650
2672
|
}
|
|
2651
2673
|
|
|
2652
|
-
/* Dark mode -
|
|
2653
|
-
|
|
2654
|
-
.vpg-theme-dark .vpg-
|
|
2655
|
-
.vpg-theme-dark .vpg-tab-btn
|
|
2674
|
+
/* Dark mode overrides — kept only for token-mismatch (light/dark use different roles)
|
|
2675
|
+
or decorative palettes (indigo accents, rgba washes) */
|
|
2676
|
+
.vpg-theme-dark .vpg-filter-tabs { background: var(--vpg-surface-bg); }
|
|
2677
|
+
.vpg-theme-dark .vpg-tab-btn { background: var(--vpg-surface-panel); }
|
|
2656
2678
|
.vpg-theme-dark .vpg-tab-btn.active { background: #6366f1; color: white; border-color: #6366f1; }
|
|
2657
2679
|
|
|
2658
|
-
|
|
2659
|
-
.vpg-theme-dark .vpg-
|
|
2660
|
-
.vpg-theme-dark .vpg-
|
|
2661
|
-
.vpg-theme-dark .vpg-range-
|
|
2662
|
-
.vpg-theme-dark .vpg-
|
|
2663
|
-
.vpg-theme-dark .vpg-
|
|
2664
|
-
.vpg-theme-dark .vpg-slider::-moz-range-thumb { background: #1e293b; border-color: #818cf8; }
|
|
2665
|
-
.vpg-theme-dark .vpg-input-label { color: #94a3b8; }
|
|
2666
|
-
.vpg-theme-dark .vpg-range-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
|
|
2667
|
-
.vpg-theme-dark .vpg-range-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }
|
|
2668
|
-
.vpg-theme-dark .vpg-range-input::-moz-placeholder { color: #64748b; }
|
|
2669
|
-
.vpg-theme-dark .vpg-range-input::placeholder { color: #64748b; }
|
|
2670
|
-
.vpg-theme-dark .vpg-input-separator { color: #64748b; }
|
|
2671
|
-
.vpg-theme-dark .vpg-range-btn { background: #334155; color: #e2e8f0; border-color: #475569; }
|
|
2680
|
+
.vpg-theme-dark .vpg-range-filter { background: var(--vpg-surface-panel); }
|
|
2681
|
+
.vpg-theme-dark .vpg-slider-track { background: var(--vpg-surface-hover); }
|
|
2682
|
+
.vpg-theme-dark .vpg-slider::-webkit-slider-thumb { background: var(--vpg-surface-panel); border-color: #818cf8; }
|
|
2683
|
+
.vpg-theme-dark .vpg-slider::-moz-range-thumb { background: var(--vpg-surface-panel); border-color: #818cf8; }
|
|
2684
|
+
.vpg-theme-dark .vpg-range-input { background: var(--vpg-surface-bg); border-color: var(--vpg-border-default); color: var(--vpg-text-primary); }
|
|
2685
|
+
.vpg-theme-dark .vpg-range-btn { background: var(--vpg-surface-hover); color: var(--vpg-text-primary); border-color: var(--vpg-border-strong); }
|
|
2672
2686
|
.vpg-theme-dark .vpg-range-btn:hover:not(:disabled) { background: #475569; border-color: #64748b; }
|
|
2673
2687
|
.vpg-theme-dark .vpg-filter-summary { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
|
|
2674
2688
|
|
|
@@ -2686,8 +2700,8 @@
|
|
|
2686
2700
|
font-weight: 700;
|
|
2687
2701
|
padding: 0.125rem 0.25rem;
|
|
2688
2702
|
border-radius: 0.25rem;
|
|
2689
|
-
background:
|
|
2690
|
-
color:
|
|
2703
|
+
background: var(--vpg-highlight-bg);
|
|
2704
|
+
color: var(--vpg-highlight-text);
|
|
2691
2705
|
margin-left: 0.25rem;
|
|
2692
2706
|
}
|
|
2693
2707
|
|
|
@@ -2722,17 +2736,17 @@
|
|
|
2722
2736
|
padding: 0.25rem 0.5rem;
|
|
2723
2737
|
font-size: 0.75rem;
|
|
2724
2738
|
font-weight: 500;
|
|
2725
|
-
color:
|
|
2726
|
-
background:
|
|
2727
|
-
border: 1px solid
|
|
2739
|
+
color: var(--vpg-text-secondary);
|
|
2740
|
+
background: var(--vpg-surface-elevated);
|
|
2741
|
+
border: 1px solid var(--vpg-border-default);
|
|
2728
2742
|
border-radius: 0.25rem;
|
|
2729
2743
|
cursor: pointer;
|
|
2730
2744
|
transition: all 0.15s;
|
|
2731
2745
|
}
|
|
2732
2746
|
|
|
2733
2747
|
.vpg-chart-clear-filters:hover {
|
|
2734
|
-
background:
|
|
2735
|
-
border-color:
|
|
2748
|
+
background: var(--vpg-surface-hover);
|
|
2749
|
+
border-color: var(--vpg-border-strong);
|
|
2736
2750
|
}
|
|
2737
2751
|
|
|
2738
2752
|
.vpg-chart-label {
|
|
@@ -2749,7 +2763,7 @@
|
|
|
2749
2763
|
flex-direction: column;
|
|
2750
2764
|
height: 100%;
|
|
2751
2765
|
min-height: 400px;
|
|
2752
|
-
background:
|
|
2766
|
+
background: var(--vpg-surface-bg);
|
|
2753
2767
|
}
|
|
2754
2768
|
|
|
2755
2769
|
.vpg-chart-type-bar {
|
|
@@ -2757,8 +2771,8 @@
|
|
|
2757
2771
|
flex-wrap: wrap;
|
|
2758
2772
|
gap: 0.25rem;
|
|
2759
2773
|
padding: 0.5rem 0.75rem;
|
|
2760
|
-
background:
|
|
2761
|
-
border-bottom: 1px solid
|
|
2774
|
+
background: var(--vpg-surface-panel);
|
|
2775
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
2762
2776
|
}
|
|
2763
2777
|
|
|
2764
2778
|
.vpg-chart-type-btn {
|
|
@@ -2771,15 +2785,15 @@
|
|
|
2771
2785
|
border: 1px solid transparent;
|
|
2772
2786
|
border-radius: 0.375rem;
|
|
2773
2787
|
background: transparent;
|
|
2774
|
-
color:
|
|
2788
|
+
color: var(--vpg-text-secondary);
|
|
2775
2789
|
font-size: 0.625rem;
|
|
2776
2790
|
cursor: pointer;
|
|
2777
2791
|
transition: all 0.15s;
|
|
2778
2792
|
}
|
|
2779
2793
|
|
|
2780
2794
|
.vpg-chart-type-btn:hover {
|
|
2781
|
-
background:
|
|
2782
|
-
border-color:
|
|
2795
|
+
background: var(--vpg-surface-hover);
|
|
2796
|
+
border-color: var(--vpg-border-default);
|
|
2783
2797
|
}
|
|
2784
2798
|
|
|
2785
2799
|
.vpg-chart-type-btn.active {
|
|
@@ -2808,14 +2822,14 @@
|
|
|
2808
2822
|
flex-shrink: 0;
|
|
2809
2823
|
display: flex;
|
|
2810
2824
|
flex-direction: column;
|
|
2811
|
-
border-right: 1px solid
|
|
2812
|
-
background:
|
|
2825
|
+
border-right: 1px solid var(--vpg-border-default);
|
|
2826
|
+
background: var(--vpg-surface-panel);
|
|
2813
2827
|
overflow-y: auto;
|
|
2814
2828
|
}
|
|
2815
2829
|
|
|
2816
2830
|
.vpg-chart-fields-section {
|
|
2817
2831
|
padding: 0.75rem;
|
|
2818
|
-
border-bottom: 1px solid
|
|
2832
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
2819
2833
|
}
|
|
2820
2834
|
|
|
2821
2835
|
.vpg-chart-fields-title {
|
|
@@ -2824,7 +2838,7 @@
|
|
|
2824
2838
|
gap: 0.375rem;
|
|
2825
2839
|
font-size: 0.625rem;
|
|
2826
2840
|
font-weight: 700;
|
|
2827
|
-
color:
|
|
2841
|
+
color: var(--vpg-text-secondary);
|
|
2828
2842
|
text-transform: uppercase;
|
|
2829
2843
|
letter-spacing: 0.05em;
|
|
2830
2844
|
margin: 0 0 0.5rem 0;
|
|
@@ -2833,7 +2847,7 @@
|
|
|
2833
2847
|
.vpg-chart-fields-hint {
|
|
2834
2848
|
font-weight: 400;
|
|
2835
2849
|
text-transform: none;
|
|
2836
|
-
color:
|
|
2850
|
+
color: var(--vpg-text-muted);
|
|
2837
2851
|
margin-left: 0.25rem;
|
|
2838
2852
|
}
|
|
2839
2853
|
|
|
@@ -2860,25 +2874,25 @@
|
|
|
2860
2874
|
.vpg-chart-field-chip:active { cursor: grabbing; }
|
|
2861
2875
|
|
|
2862
2876
|
.vpg-field-dimension {
|
|
2863
|
-
background:
|
|
2864
|
-
border: 1px solid
|
|
2865
|
-
color:
|
|
2877
|
+
background: var(--vpg-dim-row-bg);
|
|
2878
|
+
border: 1px solid var(--vpg-dim-row-border);
|
|
2879
|
+
color: var(--vpg-dim-row-text);
|
|
2866
2880
|
}
|
|
2867
2881
|
|
|
2868
2882
|
.vpg-field-dimension:hover {
|
|
2869
|
-
background:
|
|
2870
|
-
box-shadow: 0 2px 4px rgba(
|
|
2883
|
+
background: var(--vpg-dim-row-border);
|
|
2884
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2871
2885
|
}
|
|
2872
2886
|
|
|
2873
2887
|
.vpg-field-measure {
|
|
2874
|
-
background:
|
|
2875
|
-
border: 1px solid
|
|
2876
|
-
color:
|
|
2888
|
+
background: var(--vpg-dim-value-bg);
|
|
2889
|
+
border: 1px solid var(--vpg-dim-value-border);
|
|
2890
|
+
color: var(--vpg-dim-value-text);
|
|
2877
2891
|
}
|
|
2878
2892
|
|
|
2879
2893
|
.vpg-field-measure:hover {
|
|
2880
|
-
background:
|
|
2881
|
-
box-shadow: 0 2px 4px rgba(
|
|
2894
|
+
background: var(--vpg-dim-value-border);
|
|
2895
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2882
2896
|
}
|
|
2883
2897
|
|
|
2884
2898
|
.vpg-field-name {
|
|
@@ -2896,7 +2910,7 @@
|
|
|
2896
2910
|
|
|
2897
2911
|
.vpg-chart-fields-empty {
|
|
2898
2912
|
font-size: 0.75rem;
|
|
2899
|
-
color:
|
|
2913
|
+
color: var(--vpg-text-muted);
|
|
2900
2914
|
font-style: italic;
|
|
2901
2915
|
padding: 0.5rem;
|
|
2902
2916
|
text-align: center;
|
|
@@ -2910,8 +2924,8 @@
|
|
|
2910
2924
|
flex-direction: column;
|
|
2911
2925
|
gap: 0.75rem;
|
|
2912
2926
|
padding: 0.75rem;
|
|
2913
|
-
border-right: 1px solid
|
|
2914
|
-
background:
|
|
2927
|
+
border-right: 1px solid var(--vpg-border-default);
|
|
2928
|
+
background: var(--vpg-surface-bg);
|
|
2915
2929
|
overflow-y: auto;
|
|
2916
2930
|
}
|
|
2917
2931
|
|
|
@@ -2924,7 +2938,7 @@
|
|
|
2924
2938
|
.vpg-chart-zone-label {
|
|
2925
2939
|
font-size: 0.625rem;
|
|
2926
2940
|
font-weight: 600;
|
|
2927
|
-
color:
|
|
2941
|
+
color: var(--vpg-text-secondary);
|
|
2928
2942
|
text-transform: uppercase;
|
|
2929
2943
|
letter-spacing: 0.05em;
|
|
2930
2944
|
}
|
|
@@ -2936,28 +2950,28 @@
|
|
|
2936
2950
|
gap: 0.5rem;
|
|
2937
2951
|
min-height: 2.25rem;
|
|
2938
2952
|
padding: 0.5rem;
|
|
2939
|
-
border: 2px dashed
|
|
2953
|
+
border: 2px dashed var(--vpg-border-default);
|
|
2940
2954
|
border-radius: 0.5rem;
|
|
2941
|
-
background:
|
|
2955
|
+
background: var(--vpg-surface-elevated);
|
|
2942
2956
|
transition: all 0.2s;
|
|
2943
2957
|
}
|
|
2944
2958
|
|
|
2945
2959
|
.vpg-chart-drop-zone.drag-over {
|
|
2946
|
-
border-color:
|
|
2947
|
-
background:
|
|
2948
|
-
box-shadow: 0 0 0 4px
|
|
2960
|
+
border-color: var(--vpg-accent);
|
|
2961
|
+
background: var(--vpg-accent-soft-bg);
|
|
2962
|
+
box-shadow: 0 0 0 4px var(--vpg-accent-soft-bg);
|
|
2949
2963
|
}
|
|
2950
2964
|
|
|
2951
2965
|
.vpg-chart-drop-zone.has-field {
|
|
2952
2966
|
border-style: solid;
|
|
2953
|
-
border-color:
|
|
2954
|
-
background:
|
|
2967
|
+
border-color: var(--vpg-accent);
|
|
2968
|
+
background: var(--vpg-accent-soft-bg);
|
|
2955
2969
|
justify-content: space-between;
|
|
2956
2970
|
}
|
|
2957
2971
|
|
|
2958
2972
|
.vpg-zone-placeholder {
|
|
2959
2973
|
font-size: 0.6875rem;
|
|
2960
|
-
color:
|
|
2974
|
+
color: var(--vpg-text-muted);
|
|
2961
2975
|
}
|
|
2962
2976
|
|
|
2963
2977
|
.vpg-zone-field-name {
|
|
@@ -2974,7 +2988,7 @@
|
|
|
2974
2988
|
padding: 0.125rem 0.25rem;
|
|
2975
2989
|
border: 1px solid #ddd6fe;
|
|
2976
2990
|
border-radius: 0.25rem;
|
|
2977
|
-
background:
|
|
2991
|
+
background: var(--vpg-surface-elevated);
|
|
2978
2992
|
color: #6d28d9;
|
|
2979
2993
|
cursor: pointer;
|
|
2980
2994
|
}
|
|
@@ -3012,10 +3026,10 @@
|
|
|
3012
3026
|
gap: 0.5rem;
|
|
3013
3027
|
padding: 0.625rem;
|
|
3014
3028
|
margin-top: auto;
|
|
3015
|
-
background:
|
|
3029
|
+
background: var(--vpg-surface-hover);
|
|
3016
3030
|
border-radius: 0.5rem;
|
|
3017
3031
|
font-size: 0.6875rem;
|
|
3018
|
-
color:
|
|
3032
|
+
color: var(--vpg-text-secondary);
|
|
3019
3033
|
line-height: 1.4;
|
|
3020
3034
|
}
|
|
3021
3035
|
|
|
@@ -3030,7 +3044,7 @@
|
|
|
3030
3044
|
flex: 1;
|
|
3031
3045
|
display: flex;
|
|
3032
3046
|
flex-direction: column;
|
|
3033
|
-
background:
|
|
3047
|
+
background: var(--vpg-surface-bg);
|
|
3034
3048
|
overflow: hidden;
|
|
3035
3049
|
}
|
|
3036
3050
|
|
|
@@ -3049,36 +3063,36 @@
|
|
|
3049
3063
|
gap: 0.75rem;
|
|
3050
3064
|
padding: 2rem;
|
|
3051
3065
|
text-align: center;
|
|
3052
|
-
color:
|
|
3066
|
+
color: var(--vpg-text-secondary);
|
|
3053
3067
|
}
|
|
3054
3068
|
|
|
3055
3069
|
.vpg-chart-empty-state .vpg-icon-lg {
|
|
3056
3070
|
width: 4rem;
|
|
3057
3071
|
height: 4rem;
|
|
3058
|
-
color:
|
|
3072
|
+
color: var(--vpg-border-strong);
|
|
3059
3073
|
}
|
|
3060
3074
|
|
|
3061
3075
|
.vpg-chart-empty-state h3 {
|
|
3062
3076
|
margin: 0;
|
|
3063
3077
|
font-size: 1rem;
|
|
3064
3078
|
font-weight: 600;
|
|
3065
|
-
color:
|
|
3079
|
+
color: var(--vpg-text-secondary);
|
|
3066
3080
|
}
|
|
3067
3081
|
|
|
3068
3082
|
.vpg-chart-empty-state p {
|
|
3069
3083
|
margin: 0;
|
|
3070
3084
|
font-size: 0.875rem;
|
|
3071
|
-
color:
|
|
3085
|
+
color: var(--vpg-text-muted);
|
|
3072
3086
|
max-width: 280px;
|
|
3073
3087
|
}
|
|
3074
3088
|
|
|
3075
3089
|
.vpg-chart-hint {
|
|
3076
3090
|
margin-top: 0.5rem;
|
|
3077
3091
|
padding: 0.75rem 1rem;
|
|
3078
|
-
background:
|
|
3092
|
+
background: var(--vpg-surface-panel);
|
|
3079
3093
|
border-radius: 0.5rem;
|
|
3080
3094
|
font-size: 0.75rem;
|
|
3081
|
-
color:
|
|
3095
|
+
color: var(--vpg-text-secondary);
|
|
3082
3096
|
max-width: 320px;
|
|
3083
3097
|
}
|
|
3084
3098
|
|
|
@@ -3094,13 +3108,13 @@
|
|
|
3094
3108
|
justify-content: center;
|
|
3095
3109
|
gap: 0.75rem;
|
|
3096
3110
|
height: 100%;
|
|
3097
|
-
color:
|
|
3111
|
+
color: var(--vpg-text-secondary);
|
|
3098
3112
|
}
|
|
3099
3113
|
|
|
3100
3114
|
.vpg-chart-spinner {
|
|
3101
3115
|
width: 2rem;
|
|
3102
3116
|
height: 2rem;
|
|
3103
|
-
border: 2px solid
|
|
3117
|
+
border: 2px solid var(--vpg-border-default);
|
|
3104
3118
|
border-top-color: #8b5cf6;
|
|
3105
3119
|
border-radius: 50%;
|
|
3106
3120
|
animation: vpg-chart-spin 0.8s linear infinite;
|
|
@@ -3114,40 +3128,14 @@
|
|
|
3114
3128
|
font-size: 0.875rem;
|
|
3115
3129
|
}
|
|
3116
3130
|
|
|
3117
|
-
|
|
3118
|
-
.
|
|
3119
|
-
|
|
3120
|
-
/* Dark mode support */
|
|
3131
|
+
/* Dark mode overrides — only retained where the token system can't express the original dark value
|
|
3132
|
+
(e.g. decorative purple/indigo/emerald accents, or fields with non-tokenized backgrounds like #fafbfc) */
|
|
3121
3133
|
.vpg-theme-dark .vpg-chart-filter-bar { background: #1e1b4b; border-color: #4c1d95; color: #a5b4fc; }
|
|
3122
3134
|
.vpg-theme-dark .vpg-chart-filter-bar svg { color: #8b5cf6; }
|
|
3123
|
-
.vpg-theme-dark .vpg-chart-clear-filters { background: #312e81; border-color: #4c1d95; color: #c4b5fd; }
|
|
3124
|
-
.vpg-theme-dark .vpg-chart-clear-filters:hover { background: #3730a3; border-color: #6366f1; }
|
|
3125
|
-
.vpg-theme-dark .vpg-chart-builder { background: #0f172a; }
|
|
3126
|
-
.vpg-theme-dark .vpg-chart-type-bar { background: #1e293b; border-color: #334155; }
|
|
3127
|
-
.vpg-theme-dark .vpg-chart-type-btn { color: #94a3b8; }
|
|
3128
|
-
.vpg-theme-dark .vpg-chart-type-btn:hover { background: #334155; border-color: #475569; }
|
|
3129
|
-
.vpg-theme-dark .vpg-chart-fields-panel { background: #1e293b; border-color: #334155; }
|
|
3130
|
-
.vpg-theme-dark .vpg-chart-fields-section { border-color: #334155; }
|
|
3131
|
-
.vpg-theme-dark .vpg-chart-fields-title { color: #94a3b8; }
|
|
3132
|
-
.vpg-theme-dark .vpg-field-dimension { background: #312e81; border-color: #4338ca; color: #a5b4fc; }
|
|
3133
|
-
.vpg-theme-dark .vpg-field-measure { background: #064e3b; border-color: #059669; color: #6ee7b7; }
|
|
3134
|
-
.vpg-theme-dark .vpg-chart-config-panel { background: #0f172a; border-color: #334155; }
|
|
3135
|
-
.vpg-theme-dark .vpg-chart-zone-label { color: #94a3b8; }
|
|
3136
|
-
.vpg-theme-dark .vpg-chart-drop-zone { border-color: #334155; background: #1e293b; }
|
|
3137
|
-
.vpg-theme-dark .vpg-chart-drop-zone.drag-over { border-color: #8b5cf6; background: #1e1b4b; }
|
|
3138
|
-
.vpg-theme-dark .vpg-chart-drop-zone.has-field { background: #1e1b4b; border-color: #7c3aed; }
|
|
3139
|
-
.vpg-theme-dark .vpg-zone-placeholder { color: #64748b; }
|
|
3140
3135
|
.vpg-theme-dark .vpg-zone-field-name { color: #c4b5fd; }
|
|
3141
3136
|
.vpg-theme-dark .vpg-zone-aggregation { background: #1e1b4b; border-color: #4c1d95; color: #c4b5fd; }
|
|
3142
3137
|
.vpg-theme-dark .vpg-zone-remove-btn { color: #a78bfa; }
|
|
3143
3138
|
.vpg-theme-dark .vpg-zone-remove-btn:hover { background: #312e81; }
|
|
3144
|
-
.vpg-theme-dark .vpg-chart-guidance { background: #1e293b; color: #94a3b8; }
|
|
3145
|
-
.vpg-theme-dark .vpg-chart-preview-panel { background: #0f172a; }
|
|
3146
|
-
.vpg-theme-dark .vpg-chart-empty-state { color: #94a3b8; }
|
|
3147
|
-
.vpg-theme-dark .vpg-chart-empty-state .vpg-icon-lg { color: #475569; }
|
|
3148
|
-
.vpg-theme-dark .vpg-chart-empty-state h3 { color: #e2e8f0; }
|
|
3149
|
-
.vpg-theme-dark .vpg-chart-empty-state p { color: #64748b; }
|
|
3150
|
-
.vpg-theme-dark .vpg-chart-hint { background: #1e293b; color: #94a3b8; }
|
|
3151
3139
|
|
|
3152
3140
|
/* ==========================================================================
|
|
3153
3141
|
ApexCharts Tooltip Overrides
|
|
@@ -3179,7 +3167,7 @@
|
|
|
3179
3167
|
display: flex;
|
|
3180
3168
|
flex-direction: column;
|
|
3181
3169
|
height: 100%;
|
|
3182
|
-
background:
|
|
3170
|
+
background: var(--vpg-surface-panel);
|
|
3183
3171
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
3184
3172
|
}
|
|
3185
3173
|
|
|
@@ -3228,12 +3216,12 @@
|
|
|
3228
3216
|
margin: 0 0 0.5rem;
|
|
3229
3217
|
font-size: 1.5rem;
|
|
3230
3218
|
font-weight: 600;
|
|
3231
|
-
color:
|
|
3219
|
+
color: var(--vpg-text-primary);
|
|
3232
3220
|
}
|
|
3233
3221
|
|
|
3234
3222
|
.vpg-ai-picker-header p {
|
|
3235
3223
|
margin: 0;
|
|
3236
|
-
color:
|
|
3224
|
+
color: var(--vpg-text-secondary);
|
|
3237
3225
|
}
|
|
3238
3226
|
|
|
3239
3227
|
/* Search */
|
|
@@ -3242,8 +3230,8 @@
|
|
|
3242
3230
|
align-items: center;
|
|
3243
3231
|
gap: 0.75rem;
|
|
3244
3232
|
padding: 0.75rem 1rem;
|
|
3245
|
-
background:
|
|
3246
|
-
border: 1px solid
|
|
3233
|
+
background: var(--vpg-surface-elevated);
|
|
3234
|
+
border: 1px solid var(--vpg-border-default);
|
|
3247
3235
|
border-radius: 0.5rem;
|
|
3248
3236
|
margin-bottom: 1rem;
|
|
3249
3237
|
flex-shrink: 0;
|
|
@@ -3252,7 +3240,7 @@
|
|
|
3252
3240
|
.vpg-ai-analyst .vpg-ai-search svg {
|
|
3253
3241
|
width: 1.25rem;
|
|
3254
3242
|
height: 1.25rem;
|
|
3255
|
-
color:
|
|
3243
|
+
color: var(--vpg-text-muted);
|
|
3256
3244
|
flex-shrink: 0;
|
|
3257
3245
|
}
|
|
3258
3246
|
|
|
@@ -3261,16 +3249,16 @@
|
|
|
3261
3249
|
border: none;
|
|
3262
3250
|
outline: none;
|
|
3263
3251
|
font-size: 0.9375rem;
|
|
3264
|
-
color:
|
|
3252
|
+
color: var(--vpg-text-primary);
|
|
3265
3253
|
background: transparent;
|
|
3266
3254
|
}
|
|
3267
3255
|
|
|
3268
3256
|
.vpg-ai-search-input::-moz-placeholder {
|
|
3269
|
-
color:
|
|
3257
|
+
color: var(--vpg-text-muted);
|
|
3270
3258
|
}
|
|
3271
3259
|
|
|
3272
3260
|
.vpg-ai-search-input::placeholder {
|
|
3273
|
-
color:
|
|
3261
|
+
color: var(--vpg-text-muted);
|
|
3274
3262
|
}
|
|
3275
3263
|
|
|
3276
3264
|
/* Data source grid */
|
|
@@ -3288,8 +3276,8 @@
|
|
|
3288
3276
|
align-items: center;
|
|
3289
3277
|
gap: 0.75rem;
|
|
3290
3278
|
padding: 1rem;
|
|
3291
|
-
background:
|
|
3292
|
-
border: 1px solid
|
|
3279
|
+
background: var(--vpg-surface-elevated);
|
|
3280
|
+
border: 1px solid var(--vpg-border-default);
|
|
3293
3281
|
border-radius: 0.5rem;
|
|
3294
3282
|
cursor: pointer;
|
|
3295
3283
|
text-align: left;
|
|
@@ -3297,19 +3285,19 @@
|
|
|
3297
3285
|
}
|
|
3298
3286
|
|
|
3299
3287
|
.vpg-ai-datasource-card:hover {
|
|
3300
|
-
border-color:
|
|
3288
|
+
border-color: var(--vpg-accent);
|
|
3301
3289
|
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
|
|
3302
3290
|
}
|
|
3303
3291
|
|
|
3304
3292
|
.vpg-ai-datasource-icon {
|
|
3305
3293
|
width: 2.25rem;
|
|
3306
3294
|
height: 2.25rem;
|
|
3307
|
-
background:
|
|
3295
|
+
background: var(--vpg-accent-soft-bg);
|
|
3308
3296
|
border-radius: 0.5rem;
|
|
3309
3297
|
display: flex;
|
|
3310
3298
|
align-items: center;
|
|
3311
3299
|
justify-content: center;
|
|
3312
|
-
color:
|
|
3300
|
+
color: var(--vpg-accent);
|
|
3313
3301
|
flex-shrink: 0;
|
|
3314
3302
|
}
|
|
3315
3303
|
|
|
@@ -3327,7 +3315,7 @@
|
|
|
3327
3315
|
display: block;
|
|
3328
3316
|
font-size: 0.8125rem;
|
|
3329
3317
|
font-weight: 600;
|
|
3330
|
-
color:
|
|
3318
|
+
color: var(--vpg-text-primary);
|
|
3331
3319
|
white-space: nowrap;
|
|
3332
3320
|
overflow: hidden;
|
|
3333
3321
|
text-overflow: ellipsis;
|
|
@@ -3336,7 +3324,7 @@
|
|
|
3336
3324
|
.vpg-ai-datasource-desc {
|
|
3337
3325
|
display: block;
|
|
3338
3326
|
font-size: 0.6875rem;
|
|
3339
|
-
color:
|
|
3327
|
+
color: var(--vpg-text-secondary);
|
|
3340
3328
|
white-space: nowrap;
|
|
3341
3329
|
overflow: hidden;
|
|
3342
3330
|
text-overflow: ellipsis;
|
|
@@ -3346,7 +3334,7 @@
|
|
|
3346
3334
|
.vpg-ai-empty-state {
|
|
3347
3335
|
text-align: center;
|
|
3348
3336
|
padding: 2rem;
|
|
3349
|
-
color:
|
|
3337
|
+
color: var(--vpg-text-muted);
|
|
3350
3338
|
}
|
|
3351
3339
|
|
|
3352
3340
|
.vpg-ai-docs-link {
|
|
@@ -3355,8 +3343,8 @@
|
|
|
3355
3343
|
gap: 0.5rem;
|
|
3356
3344
|
padding: 0.625rem 1rem;
|
|
3357
3345
|
font-size: 0.875rem;
|
|
3358
|
-
color:
|
|
3359
|
-
background:
|
|
3346
|
+
color: var(--vpg-accent);
|
|
3347
|
+
background: var(--vpg-accent-soft-bg);
|
|
3360
3348
|
border-radius: 0.375rem;
|
|
3361
3349
|
text-decoration: none;
|
|
3362
3350
|
transition: all 0.15s;
|
|
@@ -3385,8 +3373,8 @@
|
|
|
3385
3373
|
max-width: 360px;
|
|
3386
3374
|
display: flex;
|
|
3387
3375
|
flex-direction: column;
|
|
3388
|
-
background:
|
|
3389
|
-
border-right: 1px solid
|
|
3376
|
+
background: var(--vpg-surface-elevated);
|
|
3377
|
+
border-right: 1px solid var(--vpg-border-default);
|
|
3390
3378
|
}
|
|
3391
3379
|
|
|
3392
3380
|
.vpg-ai-chat-header {
|
|
@@ -3394,7 +3382,7 @@
|
|
|
3394
3382
|
align-items: center;
|
|
3395
3383
|
gap: 0.375rem;
|
|
3396
3384
|
padding: 0.5rem 0.625rem;
|
|
3397
|
-
border-bottom: 1px solid
|
|
3385
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
3398
3386
|
}
|
|
3399
3387
|
|
|
3400
3388
|
.vpg-ai-back-btn {
|
|
@@ -3406,14 +3394,14 @@
|
|
|
3406
3394
|
background: transparent;
|
|
3407
3395
|
border: none;
|
|
3408
3396
|
border-radius: 0.25rem;
|
|
3409
|
-
color:
|
|
3397
|
+
color: var(--vpg-text-secondary);
|
|
3410
3398
|
cursor: pointer;
|
|
3411
3399
|
transition: all 0.15s;
|
|
3412
3400
|
}
|
|
3413
3401
|
|
|
3414
3402
|
.vpg-ai-back-btn:hover {
|
|
3415
|
-
background:
|
|
3416
|
-
color:
|
|
3403
|
+
background: var(--vpg-surface-hover);
|
|
3404
|
+
color: var(--vpg-text-primary);
|
|
3417
3405
|
}
|
|
3418
3406
|
|
|
3419
3407
|
.vpg-ai-back-btn svg {
|
|
@@ -3430,7 +3418,7 @@
|
|
|
3430
3418
|
background: transparent;
|
|
3431
3419
|
border: none;
|
|
3432
3420
|
border-radius: 0.25rem;
|
|
3433
|
-
color:
|
|
3421
|
+
color: var(--vpg-text-secondary);
|
|
3434
3422
|
cursor: pointer;
|
|
3435
3423
|
transition: all 0.15s;
|
|
3436
3424
|
}
|
|
@@ -3454,7 +3442,7 @@
|
|
|
3454
3442
|
display: block;
|
|
3455
3443
|
font-size: 0.75rem;
|
|
3456
3444
|
font-weight: 600;
|
|
3457
|
-
color:
|
|
3445
|
+
color: var(--vpg-text-primary);
|
|
3458
3446
|
white-space: nowrap;
|
|
3459
3447
|
overflow: hidden;
|
|
3460
3448
|
text-overflow: ellipsis;
|
|
@@ -3479,7 +3467,7 @@
|
|
|
3479
3467
|
.vpg-ai-welcome p {
|
|
3480
3468
|
margin: 0 0 0.5rem;
|
|
3481
3469
|
font-size: 0.75rem;
|
|
3482
|
-
color:
|
|
3470
|
+
color: var(--vpg-text-secondary);
|
|
3483
3471
|
}
|
|
3484
3472
|
|
|
3485
3473
|
.vpg-ai-suggestions {
|
|
@@ -3492,8 +3480,8 @@
|
|
|
3492
3480
|
.vpg-ai-suggestions button {
|
|
3493
3481
|
padding: 0.25rem 0.5rem;
|
|
3494
3482
|
font-size: 0.625rem;
|
|
3495
|
-
color:
|
|
3496
|
-
background:
|
|
3483
|
+
color: var(--vpg-accent);
|
|
3484
|
+
background: var(--vpg-accent-soft-bg);
|
|
3497
3485
|
border: none;
|
|
3498
3486
|
border-radius: 0.75rem;
|
|
3499
3487
|
cursor: pointer;
|
|
@@ -3513,8 +3501,8 @@
|
|
|
3513
3501
|
|
|
3514
3502
|
.vpg-ai-msg-user {
|
|
3515
3503
|
align-self: flex-end;
|
|
3516
|
-
background:
|
|
3517
|
-
color:
|
|
3504
|
+
background: var(--vpg-accent);
|
|
3505
|
+
color: var(--vpg-text-inverse);
|
|
3518
3506
|
padding: 0.5rem 0.625rem;
|
|
3519
3507
|
border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
|
|
3520
3508
|
max-width: 90%;
|
|
@@ -3523,8 +3511,8 @@
|
|
|
3523
3511
|
}
|
|
3524
3512
|
|
|
3525
3513
|
.vpg-ai-msg-assistant {
|
|
3526
|
-
background:
|
|
3527
|
-
color:
|
|
3514
|
+
background: var(--vpg-surface-hover);
|
|
3515
|
+
color: var(--vpg-text-primary);
|
|
3528
3516
|
padding: 0.5rem 0.625rem;
|
|
3529
3517
|
border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
|
|
3530
3518
|
max-width: 100%;
|
|
@@ -3555,8 +3543,8 @@
|
|
|
3555
3543
|
|
|
3556
3544
|
/* Result message (clickable) */
|
|
3557
3545
|
.vpg-ai-msg-result {
|
|
3558
|
-
background:
|
|
3559
|
-
border: 1px solid
|
|
3546
|
+
background: var(--vpg-surface-elevated);
|
|
3547
|
+
border: 1px solid var(--vpg-border-default);
|
|
3560
3548
|
border-radius: 0.5rem;
|
|
3561
3549
|
cursor: pointer;
|
|
3562
3550
|
transition: all 0.15s;
|
|
@@ -3569,7 +3557,7 @@
|
|
|
3569
3557
|
}
|
|
3570
3558
|
|
|
3571
3559
|
.vpg-ai-msg-result.vpg-ai-msg-selected {
|
|
3572
|
-
border-color:
|
|
3560
|
+
border-color: var(--vpg-accent);
|
|
3573
3561
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
|
|
3574
3562
|
}
|
|
3575
3563
|
|
|
@@ -3605,24 +3593,24 @@
|
|
|
3605
3593
|
align-items: center;
|
|
3606
3594
|
gap: 0.25rem;
|
|
3607
3595
|
padding: 0.125rem 0.375rem;
|
|
3608
|
-
background:
|
|
3609
|
-
color:
|
|
3596
|
+
background: var(--vpg-surface-hover);
|
|
3597
|
+
color: var(--vpg-text-secondary);
|
|
3610
3598
|
font-size: 0.625rem;
|
|
3611
3599
|
font-weight: 500;
|
|
3612
|
-
border: 1px solid
|
|
3600
|
+
border: 1px solid var(--vpg-border-default);
|
|
3613
3601
|
border-radius: 0.25rem;
|
|
3614
3602
|
cursor: pointer;
|
|
3615
3603
|
transition: all 0.15s;
|
|
3616
3604
|
}
|
|
3617
3605
|
|
|
3618
3606
|
.vpg-ai-sql-toggle:hover {
|
|
3619
|
-
background:
|
|
3620
|
-
color:
|
|
3607
|
+
background: var(--vpg-border-default);
|
|
3608
|
+
color: var(--vpg-text-secondary);
|
|
3621
3609
|
}
|
|
3622
3610
|
|
|
3623
3611
|
.vpg-ai-sql-toggle.vpg-ai-sql-expanded {
|
|
3624
|
-
background:
|
|
3625
|
-
color:
|
|
3612
|
+
background: var(--vpg-accent-soft-bg);
|
|
3613
|
+
color: var(--vpg-accent);
|
|
3626
3614
|
border-color: #c7d2fe;
|
|
3627
3615
|
}
|
|
3628
3616
|
|
|
@@ -3634,7 +3622,7 @@
|
|
|
3634
3622
|
/* Result content - full text */
|
|
3635
3623
|
.vpg-ai-result-content {
|
|
3636
3624
|
font-size: 0.75rem;
|
|
3637
|
-
color:
|
|
3625
|
+
color: var(--vpg-text-primary);
|
|
3638
3626
|
line-height: 1.5;
|
|
3639
3627
|
white-space: pre-wrap;
|
|
3640
3628
|
word-wrap: break-word;
|
|
@@ -3649,14 +3637,14 @@
|
|
|
3649
3637
|
background: transparent;
|
|
3650
3638
|
border: none;
|
|
3651
3639
|
border-radius: 0.25rem;
|
|
3652
|
-
color:
|
|
3640
|
+
color: var(--vpg-text-muted);
|
|
3653
3641
|
cursor: pointer;
|
|
3654
3642
|
transition: all 0.15s;
|
|
3655
3643
|
}
|
|
3656
3644
|
|
|
3657
3645
|
.vpg-ai-analyst .vpg-ai-copy-btn:hover {
|
|
3658
|
-
background:
|
|
3659
|
-
color:
|
|
3646
|
+
background: var(--vpg-border-default);
|
|
3647
|
+
color: var(--vpg-text-secondary);
|
|
3660
3648
|
}
|
|
3661
3649
|
|
|
3662
3650
|
.vpg-ai-analyst .vpg-ai-copy-btn svg {
|
|
@@ -3673,14 +3661,14 @@
|
|
|
3673
3661
|
display: flex;
|
|
3674
3662
|
gap: 0.1875rem;
|
|
3675
3663
|
padding: 0.375rem 0.5rem;
|
|
3676
|
-
background:
|
|
3664
|
+
background: var(--vpg-surface-hover);
|
|
3677
3665
|
border-radius: 0.5rem;
|
|
3678
3666
|
}
|
|
3679
3667
|
|
|
3680
3668
|
.vpg-ai-typing span {
|
|
3681
3669
|
width: 0.3125rem;
|
|
3682
3670
|
height: 0.3125rem;
|
|
3683
|
-
background:
|
|
3671
|
+
background: var(--vpg-text-muted);
|
|
3684
3672
|
border-radius: 50%;
|
|
3685
3673
|
animation: vpg-ai-bounce 1.4s infinite ease-in-out both;
|
|
3686
3674
|
}
|
|
@@ -3696,8 +3684,8 @@
|
|
|
3696
3684
|
/* Input Area */
|
|
3697
3685
|
.vpg-ai-input-area {
|
|
3698
3686
|
padding: 0.5rem;
|
|
3699
|
-
border-top: 1px solid
|
|
3700
|
-
background:
|
|
3687
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
3688
|
+
background: var(--vpg-surface-elevated);
|
|
3701
3689
|
}
|
|
3702
3690
|
|
|
3703
3691
|
.vpg-ai-input-form {
|
|
@@ -3710,7 +3698,7 @@
|
|
|
3710
3698
|
flex: 1;
|
|
3711
3699
|
padding: 0.5rem 0.75rem;
|
|
3712
3700
|
font-size: 0.8125rem;
|
|
3713
|
-
border: 1px solid
|
|
3701
|
+
border: 1px solid var(--vpg-border-default);
|
|
3714
3702
|
border-radius: 0.75rem;
|
|
3715
3703
|
resize: none;
|
|
3716
3704
|
outline: none;
|
|
@@ -3722,12 +3710,12 @@
|
|
|
3722
3710
|
}
|
|
3723
3711
|
|
|
3724
3712
|
.vpg-ai-input:focus {
|
|
3725
|
-
border-color:
|
|
3713
|
+
border-color: var(--vpg-accent);
|
|
3726
3714
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
|
|
3727
3715
|
}
|
|
3728
3716
|
|
|
3729
3717
|
.vpg-ai-input:disabled {
|
|
3730
|
-
background:
|
|
3718
|
+
background: var(--vpg-surface-panel);
|
|
3731
3719
|
cursor: not-allowed;
|
|
3732
3720
|
}
|
|
3733
3721
|
|
|
@@ -3737,21 +3725,21 @@
|
|
|
3737
3725
|
justify-content: center;
|
|
3738
3726
|
width: 1.75rem;
|
|
3739
3727
|
height: 1.75rem;
|
|
3740
|
-
background:
|
|
3728
|
+
background: var(--vpg-accent);
|
|
3741
3729
|
border: none;
|
|
3742
3730
|
border-radius: 50%;
|
|
3743
|
-
color:
|
|
3731
|
+
color: var(--vpg-text-inverse);
|
|
3744
3732
|
cursor: pointer;
|
|
3745
3733
|
transition: all 0.15s;
|
|
3746
3734
|
flex-shrink: 0;
|
|
3747
3735
|
}
|
|
3748
3736
|
|
|
3749
3737
|
.vpg-ai-send-btn:hover:not(:disabled) {
|
|
3750
|
-
background:
|
|
3738
|
+
background: var(--vpg-accent-hover);
|
|
3751
3739
|
}
|
|
3752
3740
|
|
|
3753
3741
|
.vpg-ai-send-btn:disabled {
|
|
3754
|
-
background:
|
|
3742
|
+
background: var(--vpg-border-strong);
|
|
3755
3743
|
cursor: not-allowed;
|
|
3756
3744
|
}
|
|
3757
3745
|
|
|
@@ -3771,7 +3759,7 @@
|
|
|
3771
3759
|
.vpg-ai-model-name {
|
|
3772
3760
|
font-size: 0.625rem;
|
|
3773
3761
|
font-style: italic;
|
|
3774
|
-
color:
|
|
3762
|
+
color: var(--vpg-text-muted);
|
|
3775
3763
|
}
|
|
3776
3764
|
|
|
3777
3765
|
/* Action buttons */
|
|
@@ -3787,8 +3775,8 @@
|
|
|
3787
3775
|
padding: 0.25rem 0.5rem;
|
|
3788
3776
|
font-size: 0.625rem;
|
|
3789
3777
|
font-weight: 500;
|
|
3790
|
-
color:
|
|
3791
|
-
background:
|
|
3778
|
+
color: var(--vpg-text-secondary);
|
|
3779
|
+
background: var(--vpg-surface-hover);
|
|
3792
3780
|
border: none;
|
|
3793
3781
|
border-radius: 0.25rem;
|
|
3794
3782
|
cursor: pointer;
|
|
@@ -3796,8 +3784,8 @@
|
|
|
3796
3784
|
}
|
|
3797
3785
|
|
|
3798
3786
|
.vpg-ai-action-btn:hover {
|
|
3799
|
-
background:
|
|
3800
|
-
color:
|
|
3787
|
+
background: var(--vpg-border-default);
|
|
3788
|
+
color: var(--vpg-text-secondary);
|
|
3801
3789
|
}
|
|
3802
3790
|
|
|
3803
3791
|
.vpg-ai-action-btn svg {
|
|
@@ -3806,8 +3794,8 @@
|
|
|
3806
3794
|
}
|
|
3807
3795
|
|
|
3808
3796
|
.vpg-ai-action-btn.vpg-ai-action-primary {
|
|
3809
|
-
background:
|
|
3810
|
-
color:
|
|
3797
|
+
background: var(--vpg-accent-soft-bg);
|
|
3798
|
+
color: var(--vpg-accent);
|
|
3811
3799
|
}
|
|
3812
3800
|
|
|
3813
3801
|
.vpg-ai-action-btn.vpg-ai-action-primary:hover {
|
|
@@ -3820,14 +3808,14 @@
|
|
|
3820
3808
|
display: flex;
|
|
3821
3809
|
flex-direction: column;
|
|
3822
3810
|
min-width: 0;
|
|
3823
|
-
background:
|
|
3811
|
+
background: var(--vpg-surface-panel);
|
|
3824
3812
|
}
|
|
3825
3813
|
|
|
3826
3814
|
.vpg-ai-preview-header {
|
|
3827
3815
|
display: flex;
|
|
3828
3816
|
flex-direction: column;
|
|
3829
|
-
background:
|
|
3830
|
-
border-bottom: 1px solid
|
|
3817
|
+
background: var(--vpg-surface-elevated);
|
|
3818
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
3831
3819
|
}
|
|
3832
3820
|
|
|
3833
3821
|
.vpg-ai-preview-title-row {
|
|
@@ -3841,7 +3829,7 @@
|
|
|
3841
3829
|
margin: 0;
|
|
3842
3830
|
font-size: 0.875rem;
|
|
3843
3831
|
font-weight: 600;
|
|
3844
|
-
color:
|
|
3832
|
+
color: var(--vpg-text-primary);
|
|
3845
3833
|
}
|
|
3846
3834
|
|
|
3847
3835
|
.vpg-ai-preview-meta {
|
|
@@ -3852,9 +3840,9 @@
|
|
|
3852
3840
|
|
|
3853
3841
|
.vpg-ai-preview-count {
|
|
3854
3842
|
font-size: 0.75rem;
|
|
3855
|
-
color:
|
|
3843
|
+
color: var(--vpg-text-secondary);
|
|
3856
3844
|
padding: 0.125rem 0.5rem;
|
|
3857
|
-
background:
|
|
3845
|
+
background: var(--vpg-surface-hover);
|
|
3858
3846
|
border-radius: 0.25rem;
|
|
3859
3847
|
}
|
|
3860
3848
|
|
|
@@ -3866,8 +3854,8 @@
|
|
|
3866
3854
|
padding: 0.25rem 0.5rem;
|
|
3867
3855
|
font-size: 0.6875rem;
|
|
3868
3856
|
font-weight: 500;
|
|
3869
|
-
color:
|
|
3870
|
-
background:
|
|
3857
|
+
color: var(--vpg-text-secondary);
|
|
3858
|
+
background: var(--vpg-surface-hover);
|
|
3871
3859
|
border: none;
|
|
3872
3860
|
border-radius: 0.25rem;
|
|
3873
3861
|
cursor: pointer;
|
|
@@ -3876,13 +3864,13 @@
|
|
|
3876
3864
|
|
|
3877
3865
|
.vpg-ai-preview-sql-btn:hover,
|
|
3878
3866
|
.vpg-ai-preview-view-btn:hover {
|
|
3879
|
-
background:
|
|
3880
|
-
color:
|
|
3867
|
+
background: var(--vpg-border-default);
|
|
3868
|
+
color: var(--vpg-text-secondary);
|
|
3881
3869
|
}
|
|
3882
3870
|
|
|
3883
3871
|
.vpg-ai-preview-view-btn {
|
|
3884
|
-
background:
|
|
3885
|
-
color:
|
|
3872
|
+
background: var(--vpg-accent-soft-bg);
|
|
3873
|
+
color: var(--vpg-accent);
|
|
3886
3874
|
}
|
|
3887
3875
|
|
|
3888
3876
|
.vpg-ai-preview-view-btn:hover {
|
|
@@ -3901,8 +3889,8 @@
|
|
|
3901
3889
|
flex-wrap: wrap;
|
|
3902
3890
|
gap: 0.25rem;
|
|
3903
3891
|
padding: 0.5rem 0.75rem;
|
|
3904
|
-
background:
|
|
3905
|
-
border-top: 1px solid
|
|
3892
|
+
background: var(--vpg-surface-striped);
|
|
3893
|
+
border-top: 1px solid var(--vpg-border-subtle);
|
|
3906
3894
|
max-height: 80px;
|
|
3907
3895
|
overflow-y: auto;
|
|
3908
3896
|
}
|
|
@@ -3912,8 +3900,8 @@
|
|
|
3912
3900
|
align-items: center;
|
|
3913
3901
|
gap: 0.25rem;
|
|
3914
3902
|
padding: 0.25rem 0.5rem;
|
|
3915
|
-
background:
|
|
3916
|
-
border: 1px solid
|
|
3903
|
+
background: var(--vpg-surface-elevated);
|
|
3904
|
+
border: 1px solid var(--vpg-border-default);
|
|
3917
3905
|
border-radius: 0.25rem;
|
|
3918
3906
|
font-size: 0.6875rem;
|
|
3919
3907
|
}
|
|
@@ -3924,22 +3912,22 @@
|
|
|
3924
3912
|
display: flex;
|
|
3925
3913
|
align-items: center;
|
|
3926
3914
|
justify-content: center;
|
|
3927
|
-
background:
|
|
3915
|
+
background: var(--vpg-border-default);
|
|
3928
3916
|
border-radius: 0.125rem;
|
|
3929
3917
|
font-size: 0.625rem;
|
|
3930
3918
|
font-weight: 700;
|
|
3931
|
-
color:
|
|
3919
|
+
color: var(--vpg-text-secondary);
|
|
3932
3920
|
}
|
|
3933
3921
|
|
|
3934
3922
|
.vpg-ai-chip-name {
|
|
3935
|
-
color:
|
|
3923
|
+
color: var(--vpg-text-secondary);
|
|
3936
3924
|
font-family: ui-monospace, monospace;
|
|
3937
3925
|
}
|
|
3938
3926
|
|
|
3939
3927
|
/* SQL Panel (collapsible, above the table) */
|
|
3940
3928
|
.vpg-ai-sql-panel {
|
|
3941
|
-
background:
|
|
3942
|
-
border-bottom: 1px solid
|
|
3929
|
+
background: var(--vpg-surface-panel);
|
|
3930
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
3943
3931
|
}
|
|
3944
3932
|
|
|
3945
3933
|
.vpg-ai-sql-panel-header {
|
|
@@ -3947,14 +3935,14 @@
|
|
|
3947
3935
|
align-items: center;
|
|
3948
3936
|
justify-content: space-between;
|
|
3949
3937
|
padding: 0.5rem 0.75rem;
|
|
3950
|
-
background:
|
|
3951
|
-
border-bottom: 1px solid
|
|
3938
|
+
background: var(--vpg-surface-hover);
|
|
3939
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
3952
3940
|
}
|
|
3953
3941
|
|
|
3954
3942
|
.vpg-ai-sql-panel-title {
|
|
3955
3943
|
font-size: 0.6875rem;
|
|
3956
3944
|
font-weight: 600;
|
|
3957
|
-
color:
|
|
3945
|
+
color: var(--vpg-text-secondary);
|
|
3958
3946
|
text-transform: uppercase;
|
|
3959
3947
|
letter-spacing: 0.025em;
|
|
3960
3948
|
}
|
|
@@ -3974,14 +3962,14 @@
|
|
|
3974
3962
|
background: transparent;
|
|
3975
3963
|
border: none;
|
|
3976
3964
|
border-radius: 0.25rem;
|
|
3977
|
-
color:
|
|
3965
|
+
color: var(--vpg-text-muted);
|
|
3978
3966
|
cursor: pointer;
|
|
3979
3967
|
transition: all 0.15s;
|
|
3980
3968
|
}
|
|
3981
3969
|
|
|
3982
3970
|
.vpg-ai-sql-panel-close:hover {
|
|
3983
|
-
background:
|
|
3984
|
-
color:
|
|
3971
|
+
background: var(--vpg-border-default);
|
|
3972
|
+
color: var(--vpg-text-secondary);
|
|
3985
3973
|
}
|
|
3986
3974
|
|
|
3987
3975
|
.vpg-ai-sql-panel-close svg {
|
|
@@ -3996,8 +3984,8 @@
|
|
|
3996
3984
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
3997
3985
|
font-size: 0.75rem;
|
|
3998
3986
|
line-height: 1.5;
|
|
3999
|
-
color:
|
|
4000
|
-
background:
|
|
3987
|
+
color: var(--vpg-text-primary);
|
|
3988
|
+
background: var(--vpg-surface-panel);
|
|
4001
3989
|
white-space: pre-wrap;
|
|
4002
3990
|
word-break: break-word;
|
|
4003
3991
|
max-height: 150px;
|
|
@@ -4010,8 +3998,8 @@
|
|
|
4010
3998
|
|
|
4011
3999
|
/* SQL button active state */
|
|
4012
4000
|
.vpg-ai-preview-sql-btn.vpg-ai-sql-active {
|
|
4013
|
-
background:
|
|
4014
|
-
color:
|
|
4001
|
+
background: var(--vpg-accent-soft-bg);
|
|
4002
|
+
color: var(--vpg-accent);
|
|
4015
4003
|
border-color: #c7d2fe;
|
|
4016
4004
|
}
|
|
4017
4005
|
|
|
@@ -4029,8 +4017,8 @@
|
|
|
4029
4017
|
.vpg-ai-preview-spinner {
|
|
4030
4018
|
width: 2rem;
|
|
4031
4019
|
height: 2rem;
|
|
4032
|
-
border: 2px solid
|
|
4033
|
-
border-top-color:
|
|
4020
|
+
border: 2px solid var(--vpg-border-default);
|
|
4021
|
+
border-top-color: var(--vpg-accent);
|
|
4034
4022
|
border-radius: 50%;
|
|
4035
4023
|
animation: vpg-ai-spin 1s linear infinite;
|
|
4036
4024
|
}
|
|
@@ -4041,7 +4029,7 @@
|
|
|
4041
4029
|
|
|
4042
4030
|
.vpg-ai-preview-loading span {
|
|
4043
4031
|
font-size: 0.8125rem;
|
|
4044
|
-
color:
|
|
4032
|
+
color: var(--vpg-text-secondary);
|
|
4045
4033
|
}
|
|
4046
4034
|
|
|
4047
4035
|
/* Ready state (schema loaded, no data yet) */
|
|
@@ -4076,21 +4064,21 @@
|
|
|
4076
4064
|
margin: 0 0 0.25rem;
|
|
4077
4065
|
font-size: 1rem;
|
|
4078
4066
|
font-weight: 600;
|
|
4079
|
-
color:
|
|
4067
|
+
color: var(--vpg-text-primary);
|
|
4080
4068
|
}
|
|
4081
4069
|
|
|
4082
4070
|
.vpg-ai-preview-ready span {
|
|
4083
4071
|
font-size: 0.875rem;
|
|
4084
|
-
color:
|
|
4072
|
+
color: var(--vpg-text-secondary);
|
|
4085
4073
|
}
|
|
4086
4074
|
|
|
4087
4075
|
.vpg-ai-preview-hint {
|
|
4088
4076
|
margin-top: 1rem;
|
|
4089
4077
|
padding: 0.5rem 1rem;
|
|
4090
|
-
background:
|
|
4078
|
+
background: var(--vpg-surface-panel);
|
|
4091
4079
|
border-radius: 0.5rem;
|
|
4092
4080
|
font-size: 0.8125rem;
|
|
4093
|
-
color:
|
|
4081
|
+
color: var(--vpg-text-secondary);
|
|
4094
4082
|
}
|
|
4095
4083
|
|
|
4096
4084
|
/* Preview empty state */
|
|
@@ -4107,12 +4095,12 @@
|
|
|
4107
4095
|
.vpg-ai-preview-empty-icon {
|
|
4108
4096
|
width: 3.5rem;
|
|
4109
4097
|
height: 3.5rem;
|
|
4110
|
-
background:
|
|
4098
|
+
background: var(--vpg-border-default);
|
|
4111
4099
|
border-radius: 0.75rem;
|
|
4112
4100
|
display: flex;
|
|
4113
4101
|
align-items: center;
|
|
4114
4102
|
justify-content: center;
|
|
4115
|
-
color:
|
|
4103
|
+
color: var(--vpg-text-muted);
|
|
4116
4104
|
margin-bottom: 0.75rem;
|
|
4117
4105
|
}
|
|
4118
4106
|
|
|
@@ -4125,12 +4113,12 @@
|
|
|
4125
4113
|
margin: 0 0 0.25rem;
|
|
4126
4114
|
font-size: 0.8125rem;
|
|
4127
4115
|
font-weight: 500;
|
|
4128
|
-
color:
|
|
4116
|
+
color: var(--vpg-text-secondary);
|
|
4129
4117
|
}
|
|
4130
4118
|
|
|
4131
4119
|
.vpg-ai-preview-empty span {
|
|
4132
4120
|
font-size: 0.75rem;
|
|
4133
|
-
color:
|
|
4121
|
+
color: var(--vpg-text-muted);
|
|
4134
4122
|
}
|
|
4135
4123
|
|
|
4136
4124
|
/* Preview table */
|
|
@@ -4156,19 +4144,19 @@
|
|
|
4156
4144
|
text-align: left;
|
|
4157
4145
|
font-size: 0.625rem;
|
|
4158
4146
|
font-weight: 600;
|
|
4159
|
-
color:
|
|
4147
|
+
color: var(--vpg-text-secondary);
|
|
4160
4148
|
text-transform: uppercase;
|
|
4161
4149
|
letter-spacing: 0.025em;
|
|
4162
|
-
background:
|
|
4163
|
-
border-bottom: 1px solid
|
|
4150
|
+
background: var(--vpg-surface-hover);
|
|
4151
|
+
border-bottom: 1px solid var(--vpg-border-default);
|
|
4164
4152
|
white-space: nowrap;
|
|
4165
4153
|
}
|
|
4166
4154
|
|
|
4167
4155
|
.vpg-ai-preview-table td {
|
|
4168
4156
|
padding: 0.375rem 0.625rem;
|
|
4169
|
-
color:
|
|
4170
|
-
background:
|
|
4171
|
-
border-bottom: 1px solid
|
|
4157
|
+
color: var(--vpg-text-primary);
|
|
4158
|
+
background: var(--vpg-surface-elevated);
|
|
4159
|
+
border-bottom: 1px solid var(--vpg-border-subtle);
|
|
4172
4160
|
white-space: nowrap;
|
|
4173
4161
|
max-width: 180px;
|
|
4174
4162
|
overflow: hidden;
|
|
@@ -4176,20 +4164,20 @@
|
|
|
4176
4164
|
}
|
|
4177
4165
|
|
|
4178
4166
|
.vpg-ai-preview-table tr:hover td {
|
|
4179
|
-
background:
|
|
4167
|
+
background: var(--vpg-surface-panel);
|
|
4180
4168
|
}
|
|
4181
4169
|
|
|
4182
4170
|
.vpg-ai-preview-more {
|
|
4183
4171
|
padding: 0.5rem 0.75rem;
|
|
4184
4172
|
text-align: center;
|
|
4185
4173
|
font-size: 0.6875rem;
|
|
4186
|
-
color:
|
|
4187
|
-
background:
|
|
4188
|
-
border-top: 1px solid
|
|
4174
|
+
color: var(--vpg-text-secondary);
|
|
4175
|
+
background: var(--vpg-surface-elevated);
|
|
4176
|
+
border-top: 1px solid var(--vpg-border-default);
|
|
4189
4177
|
}
|
|
4190
4178
|
|
|
4191
4179
|
.vpg-ai-preview-more button {
|
|
4192
|
-
color:
|
|
4180
|
+
color: var(--vpg-accent);
|
|
4193
4181
|
background: none;
|
|
4194
4182
|
border: none;
|
|
4195
4183
|
cursor: pointer;
|
|
@@ -4201,52 +4189,13 @@
|
|
|
4201
4189
|
text-decoration: underline;
|
|
4202
4190
|
}
|
|
4203
4191
|
|
|
4204
|
-
/* Dark theme
|
|
4192
|
+
/* Dark theme - AIAnalyst
|
|
4193
|
+
* Most chrome surface/text overrides are now handled by --vpg-* tokens.
|
|
4194
|
+
* Rules below cover token-mismatches (panels that drop to surface-bg for depth),
|
|
4195
|
+
* decorative AI accent variants, and state-fixed semantics (destructive, success).
|
|
4196
|
+
*/
|
|
4205
4197
|
.vpg-ai-analyst.vpg-theme-dark {
|
|
4206
|
-
background:
|
|
4207
|
-
}
|
|
4208
|
-
|
|
4209
|
-
.vpg-theme-dark .vpg-ai-picker-header h2 {
|
|
4210
|
-
color: #f1f5f9;
|
|
4211
|
-
}
|
|
4212
|
-
|
|
4213
|
-
.vpg-theme-dark .vpg-ai-picker-header p {
|
|
4214
|
-
color: #94a3b8;
|
|
4215
|
-
}
|
|
4216
|
-
|
|
4217
|
-
.vpg-theme-dark .vpg-ai-analyst .vpg-ai-search {
|
|
4218
|
-
background: #1e293b;
|
|
4219
|
-
border-color: #334155;
|
|
4220
|
-
}
|
|
4221
|
-
|
|
4222
|
-
.vpg-theme-dark .vpg-ai-search-input {
|
|
4223
|
-
color: #e2e8f0;
|
|
4224
|
-
}
|
|
4225
|
-
|
|
4226
|
-
.vpg-theme-dark .vpg-ai-datasource-card {
|
|
4227
|
-
background: #1e293b;
|
|
4228
|
-
border-color: #334155;
|
|
4229
|
-
}
|
|
4230
|
-
|
|
4231
|
-
.vpg-theme-dark .vpg-ai-datasource-card:hover {
|
|
4232
|
-
border-color: #6366f1;
|
|
4233
|
-
}
|
|
4234
|
-
|
|
4235
|
-
.vpg-theme-dark .vpg-ai-datasource-name {
|
|
4236
|
-
color: #f1f5f9;
|
|
4237
|
-
}
|
|
4238
|
-
|
|
4239
|
-
.vpg-theme-dark .vpg-ai-chat-panel {
|
|
4240
|
-
background: #1e293b;
|
|
4241
|
-
border-color: #334155;
|
|
4242
|
-
}
|
|
4243
|
-
|
|
4244
|
-
.vpg-theme-dark .vpg-ai-chat-header {
|
|
4245
|
-
border-color: #334155;
|
|
4246
|
-
}
|
|
4247
|
-
|
|
4248
|
-
.vpg-theme-dark .vpg-ai-back-btn:hover {
|
|
4249
|
-
background: #334155;
|
|
4198
|
+
background: var(--vpg-surface-bg);
|
|
4250
4199
|
}
|
|
4251
4200
|
|
|
4252
4201
|
.vpg-theme-dark .vpg-ai-clear-btn:hover {
|
|
@@ -4254,39 +4203,17 @@
|
|
|
4254
4203
|
color: #f87171;
|
|
4255
4204
|
}
|
|
4256
4205
|
|
|
4257
|
-
.vpg-theme-dark .vpg-ai-chat-name {
|
|
4258
|
-
color: #f1f5f9;
|
|
4259
|
-
}
|
|
4260
|
-
|
|
4261
|
-
.vpg-theme-dark .vpg-ai-welcome p {
|
|
4262
|
-
color: #94a3b8;
|
|
4263
|
-
}
|
|
4264
|
-
|
|
4265
4206
|
.vpg-theme-dark .vpg-ai-suggestions button {
|
|
4266
|
-
background:
|
|
4207
|
+
background: var(--vpg-surface-hover);
|
|
4267
4208
|
color: #a5b4fc;
|
|
4268
4209
|
}
|
|
4269
4210
|
|
|
4270
4211
|
.vpg-theme-dark .vpg-ai-suggestions button:hover {
|
|
4271
|
-
background:
|
|
4272
|
-
}
|
|
4273
|
-
|
|
4274
|
-
.vpg-theme-dark .vpg-ai-msg-assistant {
|
|
4275
|
-
background: #334155;
|
|
4276
|
-
color: #e2e8f0;
|
|
4277
|
-
}
|
|
4278
|
-
|
|
4279
|
-
.vpg-theme-dark .vpg-ai-msg-result {
|
|
4280
|
-
background: #1e293b;
|
|
4281
|
-
border-color: #334155;
|
|
4212
|
+
background: var(--vpg-border-strong);
|
|
4282
4213
|
}
|
|
4283
4214
|
|
|
4284
4215
|
.vpg-theme-dark .vpg-ai-msg-result:hover {
|
|
4285
|
-
border-color:
|
|
4286
|
-
}
|
|
4287
|
-
|
|
4288
|
-
.vpg-theme-dark .vpg-ai-msg-result.vpg-ai-msg-selected {
|
|
4289
|
-
border-color: #6366f1;
|
|
4216
|
+
border-color: var(--vpg-border-strong);
|
|
4290
4217
|
}
|
|
4291
4218
|
|
|
4292
4219
|
.vpg-theme-dark .vpg-ai-result-badge {
|
|
@@ -4294,37 +4221,18 @@
|
|
|
4294
4221
|
color: #34d399;
|
|
4295
4222
|
}
|
|
4296
4223
|
|
|
4297
|
-
.vpg-theme-dark .vpg-ai-
|
|
4298
|
-
color:
|
|
4299
|
-
}
|
|
4300
|
-
|
|
4301
|
-
.vpg-theme-dark .vpg-ai-typing {
|
|
4302
|
-
background: #334155;
|
|
4303
|
-
}
|
|
4304
|
-
|
|
4305
|
-
.vpg-theme-dark .vpg-ai-input-area {
|
|
4306
|
-
background: #1e293b;
|
|
4307
|
-
border-color: #334155;
|
|
4224
|
+
.vpg-theme-dark .vpg-ai-copy-btn:hover {
|
|
4225
|
+
color: var(--vpg-text-primary);
|
|
4308
4226
|
}
|
|
4309
4227
|
|
|
4310
4228
|
.vpg-theme-dark .vpg-ai-input {
|
|
4311
|
-
background:
|
|
4312
|
-
|
|
4313
|
-
color: #e2e8f0;
|
|
4314
|
-
}
|
|
4315
|
-
|
|
4316
|
-
.vpg-theme-dark .vpg-ai-input:focus {
|
|
4317
|
-
border-color: #6366f1;
|
|
4318
|
-
}
|
|
4319
|
-
|
|
4320
|
-
.vpg-theme-dark .vpg-ai-action-btn {
|
|
4321
|
-
background: #334155;
|
|
4322
|
-
color: #94a3b8;
|
|
4229
|
+
background: var(--vpg-surface-bg);
|
|
4230
|
+
color: var(--vpg-text-primary);
|
|
4323
4231
|
}
|
|
4324
4232
|
|
|
4325
4233
|
.vpg-theme-dark .vpg-ai-action-btn:hover {
|
|
4326
|
-
background:
|
|
4327
|
-
color:
|
|
4234
|
+
background: var(--vpg-border-strong);
|
|
4235
|
+
color: var(--vpg-text-primary);
|
|
4328
4236
|
}
|
|
4329
4237
|
|
|
4330
4238
|
.vpg-theme-dark .vpg-ai-action-btn.vpg-ai-action-primary {
|
|
@@ -4333,28 +4241,13 @@
|
|
|
4333
4241
|
}
|
|
4334
4242
|
|
|
4335
4243
|
.vpg-theme-dark .vpg-ai-preview-panel {
|
|
4336
|
-
background:
|
|
4337
|
-
}
|
|
4338
|
-
|
|
4339
|
-
.vpg-theme-dark .vpg-ai-preview-header {
|
|
4340
|
-
background: #1e293b;
|
|
4341
|
-
border-color: #334155;
|
|
4342
|
-
}
|
|
4343
|
-
|
|
4344
|
-
.vpg-theme-dark .vpg-ai-preview-header h3 {
|
|
4345
|
-
color: #f1f5f9;
|
|
4346
|
-
}
|
|
4347
|
-
|
|
4348
|
-
.vpg-theme-dark .vpg-ai-preview-sql-btn,
|
|
4349
|
-
.vpg-theme-dark .vpg-ai-preview-view-btn {
|
|
4350
|
-
background: #334155;
|
|
4351
|
-
color: #94a3b8;
|
|
4244
|
+
background: var(--vpg-surface-bg);
|
|
4352
4245
|
}
|
|
4353
4246
|
|
|
4354
4247
|
.vpg-theme-dark .vpg-ai-preview-sql-btn:hover,
|
|
4355
4248
|
.vpg-theme-dark .vpg-ai-preview-view-btn:hover {
|
|
4356
|
-
background:
|
|
4357
|
-
color:
|
|
4249
|
+
background: var(--vpg-border-strong);
|
|
4250
|
+
color: var(--vpg-text-primary);
|
|
4358
4251
|
}
|
|
4359
4252
|
|
|
4360
4253
|
.vpg-theme-dark .vpg-ai-preview-view-btn {
|
|
@@ -4362,111 +4255,45 @@
|
|
|
4362
4255
|
color: #a5b4fc;
|
|
4363
4256
|
}
|
|
4364
4257
|
|
|
4365
|
-
.vpg-theme-dark .vpg-ai-preview-count {
|
|
4366
|
-
background: #334155;
|
|
4367
|
-
color: #94a3b8;
|
|
4368
|
-
}
|
|
4369
|
-
|
|
4370
4258
|
.vpg-theme-dark .vpg-ai-schema-bar {
|
|
4371
|
-
background:
|
|
4372
|
-
border-color:
|
|
4373
|
-
}
|
|
4374
|
-
|
|
4375
|
-
.vpg-theme-dark .vpg-ai-schema-chip {
|
|
4376
|
-
background: #1e293b;
|
|
4377
|
-
border-color: #334155;
|
|
4378
|
-
}
|
|
4379
|
-
|
|
4380
|
-
.vpg-theme-dark .vpg-ai-chip-type {
|
|
4381
|
-
background: #334155;
|
|
4382
|
-
color: #94a3b8;
|
|
4259
|
+
background: var(--vpg-surface-bg);
|
|
4260
|
+
border-color: var(--vpg-border-default);
|
|
4383
4261
|
}
|
|
4384
4262
|
|
|
4385
4263
|
.vpg-theme-dark .vpg-ai-chip-name {
|
|
4386
|
-
color:
|
|
4387
|
-
}
|
|
4388
|
-
|
|
4389
|
-
.vpg-theme-dark .vpg-ai-preview-loading span {
|
|
4390
|
-
color: #94a3b8;
|
|
4391
|
-
}
|
|
4392
|
-
|
|
4393
|
-
.vpg-theme-dark .vpg-ai-preview-spinner {
|
|
4394
|
-
border-color: #334155;
|
|
4395
|
-
border-top-color: #6366f1;
|
|
4264
|
+
color: var(--vpg-text-primary);
|
|
4396
4265
|
}
|
|
4397
4266
|
|
|
4398
4267
|
.vpg-theme-dark .vpg-ai-preview-ready-icon {
|
|
4399
4268
|
background: rgba(16, 185, 129, 0.15);
|
|
4400
4269
|
}
|
|
4401
4270
|
|
|
4402
|
-
.vpg-theme-dark .vpg-ai-preview-ready p {
|
|
4403
|
-
color: #f1f5f9;
|
|
4404
|
-
}
|
|
4405
|
-
|
|
4406
|
-
.vpg-theme-dark .vpg-ai-preview-ready span {
|
|
4407
|
-
color: #94a3b8;
|
|
4408
|
-
}
|
|
4409
|
-
|
|
4410
|
-
.vpg-theme-dark .vpg-ai-preview-hint {
|
|
4411
|
-
background: #1e293b;
|
|
4412
|
-
color: #94a3b8;
|
|
4413
|
-
}
|
|
4414
|
-
|
|
4415
|
-
.vpg-theme-dark .vpg-ai-preview-empty-icon {
|
|
4416
|
-
background: #334155;
|
|
4417
|
-
}
|
|
4418
|
-
|
|
4419
4271
|
.vpg-theme-dark .vpg-ai-preview-empty p {
|
|
4420
|
-
color:
|
|
4272
|
+
color: var(--vpg-text-primary);
|
|
4421
4273
|
}
|
|
4422
4274
|
|
|
4423
4275
|
.vpg-theme-dark .vpg-ai-preview-table th {
|
|
4424
|
-
background:
|
|
4425
|
-
border-color: #334155;
|
|
4426
|
-
color: #94a3b8;
|
|
4276
|
+
background: var(--vpg-surface-panel);
|
|
4427
4277
|
}
|
|
4428
4278
|
|
|
4429
4279
|
.vpg-theme-dark .vpg-ai-preview-table td {
|
|
4430
|
-
background:
|
|
4431
|
-
border-color: #1e293b;
|
|
4432
|
-
color: #e2e8f0;
|
|
4433
|
-
}
|
|
4434
|
-
|
|
4435
|
-
.vpg-theme-dark .vpg-ai-preview-table tr:hover td {
|
|
4436
|
-
background: #1e293b;
|
|
4437
|
-
}
|
|
4438
|
-
|
|
4439
|
-
.vpg-theme-dark .vpg-ai-preview-more {
|
|
4440
|
-
background: #1e293b;
|
|
4441
|
-
border-color: #334155;
|
|
4442
|
-
}
|
|
4443
|
-
|
|
4444
|
-
.vpg-theme-dark .vpg-ai-model-name {
|
|
4445
|
-
color: #64748b;
|
|
4280
|
+
background: var(--vpg-surface-bg);
|
|
4446
4281
|
}
|
|
4447
4282
|
|
|
4448
4283
|
.vpg-theme-dark .vpg-ai-sql-panel {
|
|
4449
|
-
background:
|
|
4450
|
-
border-color: #334155;
|
|
4284
|
+
background: var(--vpg-surface-bg);
|
|
4451
4285
|
}
|
|
4452
4286
|
|
|
4453
4287
|
.vpg-theme-dark .vpg-ai-sql-panel-header {
|
|
4454
|
-
background:
|
|
4455
|
-
border-color: #334155;
|
|
4456
|
-
}
|
|
4457
|
-
|
|
4458
|
-
.vpg-theme-dark .vpg-ai-sql-panel-title {
|
|
4459
|
-
color: #94a3b8;
|
|
4288
|
+
background: var(--vpg-surface-panel);
|
|
4460
4289
|
}
|
|
4461
4290
|
|
|
4462
4291
|
.vpg-theme-dark .vpg-ai-sql-panel-close:hover {
|
|
4463
|
-
|
|
4464
|
-
color: #e2e8f0;
|
|
4292
|
+
color: var(--vpg-text-primary);
|
|
4465
4293
|
}
|
|
4466
4294
|
|
|
4467
4295
|
.vpg-theme-dark .vpg-ai-sql-panel-code {
|
|
4468
|
-
background:
|
|
4469
|
-
color: #e2e8f0;
|
|
4296
|
+
background: var(--vpg-surface-bg);
|
|
4470
4297
|
}
|
|
4471
4298
|
|
|
4472
4299
|
.vpg-theme-dark .vpg-ai-preview-sql-btn.vpg-ai-sql-active {
|