@vii7/div-table-widget 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +300 -22
- package/dist/divtable-theme-dark.min.css +1 -0
- package/dist/divtable-theme-dark.min.js +1 -0
- package/dist/divtable.min.css +1 -0
- package/dist/divtable.min.js +1 -1
- package/package.json +15 -9
- package/src/div-table-theme-dark.css +104 -0
- package/src/div-table.css +258 -147
- package/src/div-table.js +133 -73
- package/dist/editor.worker.js +0 -1
- package/dist/json.worker.js +0 -1
- package/dist/ts.worker.js +0 -6
package/src/div-table.css
CHANGED
|
@@ -3,13 +3,107 @@
|
|
|
3
3
|
* All styles for the .div-table-widget component and its children
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
/* ============================================
|
|
7
|
+
CSS Variables for Theme Customization
|
|
8
|
+
Override these in your custom stylesheet
|
|
9
|
+
============================================ */
|
|
10
|
+
:root {
|
|
11
|
+
/* === Primary/Accent Colors === */
|
|
12
|
+
--dt-primary: #007bff;
|
|
13
|
+
--dt-primary-hover: #0056b3;
|
|
14
|
+
--dt-primary-light: rgba(0, 123, 255, 0.1);
|
|
15
|
+
--dt-primary-lighter: rgba(0, 123, 255, 0.05);
|
|
16
|
+
--dt-focus-ring: rgba(3, 102, 214, 0.1);
|
|
17
|
+
|
|
18
|
+
/* === Background Colors === */
|
|
19
|
+
--dt-bg-base: #ffffff;
|
|
20
|
+
--dt-bg-light: #f9f9f7;
|
|
21
|
+
--dt-bg-hover: rgb(240, 247, 255);
|
|
22
|
+
--dt-bg-selected: rgba(0, 123, 255, 0.1);
|
|
23
|
+
--dt-bg-header: #f9f9f7;
|
|
24
|
+
--dt-bg-summary: #f9f9f7;
|
|
25
|
+
--dt-bg-disabled: #f0f0f0;
|
|
26
|
+
|
|
27
|
+
/* === Border Colors === */
|
|
28
|
+
--dt-border-light: #e9ecef;
|
|
29
|
+
--dt-border-medium: #e1e5e9;
|
|
30
|
+
--dt-border-dark: #ced4da;
|
|
31
|
+
--dt-border-row: #f1f3f4;
|
|
32
|
+
--dt-border-focus: #123a67;
|
|
33
|
+
--dt-border-hover: #b0b8c1;
|
|
34
|
+
|
|
35
|
+
/* === Text Colors === */
|
|
36
|
+
--dt-text-primary: #374151;
|
|
37
|
+
--dt-text-secondary: #495057;
|
|
38
|
+
--dt-text-muted: #6b7280;
|
|
39
|
+
--dt-text-light: #666666;
|
|
40
|
+
--dt-text-disabled: #999999;
|
|
41
|
+
--dt-text-inverse: #ffffff;
|
|
42
|
+
|
|
43
|
+
/* === Shadow === */
|
|
44
|
+
--dt-shadow: rgba(0, 0, 0, 0.1);
|
|
45
|
+
--dt-shadow-medium: rgba(0, 0, 0, 0.12);
|
|
46
|
+
--dt-shadow-heavy: rgba(0, 0, 0, 0.15);
|
|
47
|
+
|
|
48
|
+
/* === Error State === */
|
|
49
|
+
--dt-error: #dc3545;
|
|
50
|
+
--dt-error-light: rgba(220, 53, 69, 0.6);
|
|
51
|
+
--dt-error-hover: #c82333;
|
|
52
|
+
--dt-error-active: #bd2130;
|
|
53
|
+
--dt-error-bg: #fff5f5;
|
|
54
|
+
--dt-error-border: #fed7d7;
|
|
55
|
+
--dt-error-text: #c53030;
|
|
56
|
+
--dt-error-border-hover: rgba(200, 35, 51, 0.6);
|
|
57
|
+
--dt-error-focus-ring: rgba(220, 53, 69, 0.25);
|
|
58
|
+
|
|
59
|
+
/* === Success State === */
|
|
60
|
+
--dt-success: #28a745;
|
|
61
|
+
--dt-success-bg: #e8f5e9;
|
|
62
|
+
--dt-success-bg-hover: #c8e6c9;
|
|
63
|
+
|
|
64
|
+
/* === Warning State === */
|
|
65
|
+
--dt-warning: #ffc107;
|
|
66
|
+
--dt-warning-bg: #fff8e1;
|
|
67
|
+
--dt-warning-bg-hover: #ffecb3;
|
|
68
|
+
|
|
69
|
+
/* === Info State === */
|
|
70
|
+
--dt-info: #0ea5e9;
|
|
71
|
+
--dt-info-bg: #e0f2fe;
|
|
72
|
+
--dt-info-bg-hover: #bae6fd;
|
|
73
|
+
|
|
74
|
+
/* === Button Colors === */
|
|
75
|
+
--dt-button-bg: #f0f0f0;
|
|
76
|
+
--dt-button-bg-hover: #e0e0e0;
|
|
77
|
+
--dt-button-text: #333333;
|
|
78
|
+
|
|
79
|
+
/* === Scrollbar Colors === */
|
|
80
|
+
--dt-scrollbar-track: #f1f1f1;
|
|
81
|
+
--dt-scrollbar-thumb: #c1c1c1;
|
|
82
|
+
--dt-scrollbar-thumb-hover: #a8a8a8;
|
|
83
|
+
|
|
84
|
+
/* === Spinner Colors === */
|
|
85
|
+
--dt-spinner-track: #e3e3e3;
|
|
86
|
+
--dt-spinner-active: #666666;
|
|
87
|
+
|
|
88
|
+
/* === Skeleton Loading === */
|
|
89
|
+
--dt-skeleton-base: #e9ecef;
|
|
90
|
+
--dt-skeleton-shine: #f8f9fa;
|
|
91
|
+
|
|
92
|
+
/* === Group Row === */
|
|
93
|
+
--dt-group-bg: rgba(249, 249, 247, 0.5);
|
|
94
|
+
|
|
95
|
+
/* === Summary Row === */
|
|
96
|
+
--dt-summary-border: #adb5bd;
|
|
97
|
+
}
|
|
98
|
+
|
|
6
99
|
/* Table widget container */
|
|
7
100
|
.div-table-widget {
|
|
8
101
|
width: 100%;
|
|
102
|
+
height: 100%;
|
|
9
103
|
box-sizing: border-box;
|
|
10
|
-
background:
|
|
104
|
+
background: var(--dt-bg-base);
|
|
11
105
|
border-radius: 8px;
|
|
12
|
-
box-shadow: 0 2px 8px
|
|
106
|
+
box-shadow: 0 2px 8px var(--dt-shadow);
|
|
13
107
|
overflow: hidden;
|
|
14
108
|
display: flex;
|
|
15
109
|
flex-direction: column;
|
|
@@ -21,18 +115,18 @@
|
|
|
21
115
|
gap: 10px;
|
|
22
116
|
align-items: center;
|
|
23
117
|
padding: 16px;
|
|
24
|
-
background:
|
|
25
|
-
border-bottom: 1px solid
|
|
118
|
+
background: var(--dt-bg-light);
|
|
119
|
+
border-bottom: 1px solid var(--dt-border-light);
|
|
26
120
|
flex-shrink: 0;
|
|
27
121
|
}
|
|
28
122
|
|
|
29
123
|
/* Query input field */
|
|
30
124
|
.query-inputfield {
|
|
31
125
|
padding: 10px 5px 4px 10px;
|
|
32
|
-
border: 2px solid
|
|
126
|
+
border: 2px solid var(--dt-border-medium);
|
|
33
127
|
border-radius: 8px;
|
|
34
|
-
background:
|
|
35
|
-
box-shadow: 0 1px 3px
|
|
128
|
+
background: var(--dt-bg-base);
|
|
129
|
+
box-shadow: 0 1px 3px var(--dt-shadow);
|
|
36
130
|
transition: all 0.2s ease-in-out;
|
|
37
131
|
flex: 1;
|
|
38
132
|
min-width: 50%;
|
|
@@ -40,27 +134,27 @@
|
|
|
40
134
|
}
|
|
41
135
|
|
|
42
136
|
.query-inputfield:hover {
|
|
43
|
-
border-color:
|
|
44
|
-
box-shadow: 0 2px 4px
|
|
137
|
+
border-color: var(--dt-border-hover);
|
|
138
|
+
box-shadow: 0 2px 4px var(--dt-shadow-medium);
|
|
45
139
|
}
|
|
46
140
|
|
|
47
141
|
.query-inputfield.focused {
|
|
48
|
-
border-color:
|
|
49
|
-
box-shadow: 0 0 0 3px
|
|
142
|
+
border-color: var(--dt-border-focus);
|
|
143
|
+
box-shadow: 0 0 0 3px var(--dt-focus-ring), 0 1px 3px var(--dt-shadow);
|
|
50
144
|
outline: none;
|
|
51
145
|
}
|
|
52
146
|
|
|
53
147
|
.query-inputfield.error {
|
|
54
|
-
border-color:
|
|
148
|
+
border-color: var(--dt-error-light);
|
|
55
149
|
}
|
|
56
150
|
|
|
57
151
|
.query-inputfield.error:hover {
|
|
58
|
-
border-color:
|
|
152
|
+
border-color: var(--dt-error-border-hover);
|
|
59
153
|
}
|
|
60
154
|
|
|
61
155
|
.query-inputfield.error.focused {
|
|
62
|
-
border-color:
|
|
63
|
-
box-shadow: 0 0 0 3px
|
|
156
|
+
border-color: var(--dt-error-light);
|
|
157
|
+
box-shadow: 0 0 0 3px var(--dt-error-focus-ring), 0 1px 3px var(--dt-shadow);
|
|
64
158
|
}
|
|
65
159
|
|
|
66
160
|
.query-inputfield .monaco-editor {
|
|
@@ -71,15 +165,15 @@
|
|
|
71
165
|
/* Toolbar elements */
|
|
72
166
|
.div-table-toolbar select {
|
|
73
167
|
padding: 10px 12px;
|
|
74
|
-
border: 2px solid
|
|
168
|
+
border: 2px solid var(--dt-border-medium);
|
|
75
169
|
border-radius: 8px;
|
|
76
|
-
background:
|
|
77
|
-
box-shadow: 0 1px 3px
|
|
170
|
+
background: var(--dt-bg-base);
|
|
171
|
+
box-shadow: 0 1px 3px var(--dt-shadow);
|
|
78
172
|
transition: all 0.2s ease-in-out;
|
|
79
173
|
min-width: 150px;
|
|
80
174
|
cursor: pointer;
|
|
81
175
|
font-size: 14px;
|
|
82
|
-
color:
|
|
176
|
+
color: var(--dt-text-secondary);
|
|
83
177
|
appearance: none;
|
|
84
178
|
-webkit-appearance: none;
|
|
85
179
|
-moz-appearance: none;
|
|
@@ -91,20 +185,20 @@
|
|
|
91
185
|
}
|
|
92
186
|
|
|
93
187
|
.div-table-toolbar select:hover {
|
|
94
|
-
border-color:
|
|
95
|
-
box-shadow: 0 2px 4px
|
|
188
|
+
border-color: var(--dt-border-hover);
|
|
189
|
+
box-shadow: 0 2px 4px var(--dt-shadow-medium);
|
|
96
190
|
}
|
|
97
191
|
|
|
98
192
|
.div-table-toolbar select:focus {
|
|
99
|
-
border-color:
|
|
100
|
-
box-shadow: 0 0 0 3px
|
|
193
|
+
border-color: var(--dt-border-focus);
|
|
194
|
+
box-shadow: 0 0 0 3px var(--dt-focus-ring), 0 1px 3px var(--dt-shadow);
|
|
101
195
|
outline: none;
|
|
102
196
|
}
|
|
103
197
|
|
|
104
198
|
.div-table-toolbar select:disabled {
|
|
105
|
-
background-color:
|
|
106
|
-
border-color:
|
|
107
|
-
color:
|
|
199
|
+
background-color: var(--dt-bg-light);
|
|
200
|
+
border-color: var(--dt-border-light);
|
|
201
|
+
color: var(--dt-text-muted);
|
|
108
202
|
cursor: not-allowed;
|
|
109
203
|
}
|
|
110
204
|
|
|
@@ -113,7 +207,7 @@
|
|
|
113
207
|
margin-left: auto;
|
|
114
208
|
text-align: right;
|
|
115
209
|
font-size: 0.9em;
|
|
116
|
-
color:
|
|
210
|
+
color: var(--dt-text-light);
|
|
117
211
|
padding: 0;
|
|
118
212
|
min-width: 200px;
|
|
119
213
|
display: flex;
|
|
@@ -136,14 +230,14 @@
|
|
|
136
230
|
|
|
137
231
|
.info-line.secondary {
|
|
138
232
|
font-size: 0.8em;
|
|
139
|
-
color:
|
|
233
|
+
color: var(--dt-text-disabled);
|
|
140
234
|
}
|
|
141
235
|
|
|
142
236
|
/* Refresh button in info section */
|
|
143
237
|
.refresh-button {
|
|
144
238
|
background: none;
|
|
145
239
|
border: none;
|
|
146
|
-
color:
|
|
240
|
+
color: var(--dt-text-light);
|
|
147
241
|
cursor: pointer;
|
|
148
242
|
padding: 4px;
|
|
149
243
|
border-radius: 3px;
|
|
@@ -159,16 +253,16 @@
|
|
|
159
253
|
}
|
|
160
254
|
|
|
161
255
|
.refresh-button:hover {
|
|
162
|
-
background-color:
|
|
163
|
-
color:
|
|
256
|
+
background-color: var(--dt-button-bg);
|
|
257
|
+
color: var(--dt-button-text);
|
|
164
258
|
}
|
|
165
259
|
|
|
166
260
|
.refresh-button:active {
|
|
167
|
-
background-color:
|
|
261
|
+
background-color: var(--dt-button-bg-hover);
|
|
168
262
|
}
|
|
169
263
|
|
|
170
264
|
.refresh-button.refreshing {
|
|
171
|
-
color:
|
|
265
|
+
color: var(--dt-primary);
|
|
172
266
|
}
|
|
173
267
|
|
|
174
268
|
.refresh-button.refreshing svg {
|
|
@@ -185,7 +279,7 @@
|
|
|
185
279
|
.auto-fetch-button {
|
|
186
280
|
background: none;
|
|
187
281
|
border: none;
|
|
188
|
-
color:
|
|
282
|
+
color: var(--dt-text-light);
|
|
189
283
|
cursor: pointer;
|
|
190
284
|
padding: 4px;
|
|
191
285
|
border-radius: 3px;
|
|
@@ -202,30 +296,30 @@
|
|
|
202
296
|
}
|
|
203
297
|
|
|
204
298
|
.auto-fetch-button:hover {
|
|
205
|
-
background-color:
|
|
206
|
-
color:
|
|
299
|
+
background-color: var(--dt-button-bg);
|
|
300
|
+
color: var(--dt-button-text);
|
|
207
301
|
}
|
|
208
302
|
|
|
209
303
|
.auto-fetch-button:active {
|
|
210
|
-
background-color:
|
|
304
|
+
background-color: var(--dt-button-bg-hover);
|
|
211
305
|
}
|
|
212
306
|
|
|
213
307
|
.auto-fetch-button.active {
|
|
214
|
-
color:
|
|
215
|
-
background-color:
|
|
308
|
+
color: var(--dt-success);
|
|
309
|
+
background-color: var(--dt-success-bg);
|
|
216
310
|
}
|
|
217
311
|
|
|
218
312
|
.auto-fetch-button.active:hover {
|
|
219
|
-
background-color:
|
|
313
|
+
background-color: var(--dt-success-bg-hover);
|
|
220
314
|
}
|
|
221
315
|
|
|
222
316
|
.auto-fetch-button.paused {
|
|
223
|
-
color:
|
|
224
|
-
background-color:
|
|
317
|
+
color: var(--dt-warning);
|
|
318
|
+
background-color: var(--dt-warning-bg);
|
|
225
319
|
}
|
|
226
320
|
|
|
227
321
|
.auto-fetch-button.paused:hover {
|
|
228
|
-
background-color:
|
|
322
|
+
background-color: var(--dt-warning-bg-hover);
|
|
229
323
|
}
|
|
230
324
|
|
|
231
325
|
.auto-fetch-button:disabled {
|
|
@@ -243,7 +337,7 @@
|
|
|
243
337
|
.filter-selected-only-toggle-button {
|
|
244
338
|
background: none;
|
|
245
339
|
border: none;
|
|
246
|
-
color:
|
|
340
|
+
color: var(--dt-text-light);
|
|
247
341
|
cursor: pointer;
|
|
248
342
|
padding: 4px;
|
|
249
343
|
border-radius: 3px;
|
|
@@ -260,21 +354,21 @@
|
|
|
260
354
|
}
|
|
261
355
|
|
|
262
356
|
.filter-selected-only-toggle-button:hover {
|
|
263
|
-
background-color:
|
|
264
|
-
color:
|
|
357
|
+
background-color: var(--dt-button-bg);
|
|
358
|
+
color: var(--dt-button-text);
|
|
265
359
|
}
|
|
266
360
|
|
|
267
361
|
.filter-selected-only-toggle-button:active {
|
|
268
|
-
background-color:
|
|
362
|
+
background-color: var(--dt-button-bg-hover);
|
|
269
363
|
}
|
|
270
364
|
|
|
271
365
|
.filter-selected-only-toggle-button.active {
|
|
272
|
-
color:
|
|
273
|
-
background-color:
|
|
366
|
+
color: var(--dt-info);
|
|
367
|
+
background-color: var(--dt-info-bg);
|
|
274
368
|
}
|
|
275
369
|
|
|
276
370
|
.filter-selected-only-toggle-button.active:hover {
|
|
277
|
-
background-color:
|
|
371
|
+
background-color: var(--dt-info-bg-hover);
|
|
278
372
|
}
|
|
279
373
|
|
|
280
374
|
.filter-selected-only-toggle-button svg {
|
|
@@ -288,7 +382,7 @@
|
|
|
288
382
|
}
|
|
289
383
|
|
|
290
384
|
.info-stats {
|
|
291
|
-
color:
|
|
385
|
+
color: var(--dt-text-light);
|
|
292
386
|
}
|
|
293
387
|
|
|
294
388
|
.progress-line {
|
|
@@ -301,7 +395,7 @@
|
|
|
301
395
|
.loading-progress {
|
|
302
396
|
width: 120px;
|
|
303
397
|
height: 4px;
|
|
304
|
-
background:
|
|
398
|
+
background: var(--dt-border-light);
|
|
305
399
|
border-radius: 2px;
|
|
306
400
|
overflow: hidden;
|
|
307
401
|
position: relative;
|
|
@@ -309,7 +403,7 @@
|
|
|
309
403
|
|
|
310
404
|
.loading-progress-bar {
|
|
311
405
|
height: 100%;
|
|
312
|
-
background:
|
|
406
|
+
background: var(--dt-text-secondary);
|
|
313
407
|
border-radius: 2px;
|
|
314
408
|
transition: width 0.3s ease;
|
|
315
409
|
position: relative;
|
|
@@ -337,17 +431,17 @@
|
|
|
337
431
|
}
|
|
338
432
|
|
|
339
433
|
.filtered-segment {
|
|
340
|
-
background:
|
|
434
|
+
background: var(--dt-error);
|
|
341
435
|
z-index: 3;
|
|
342
436
|
}
|
|
343
437
|
|
|
344
438
|
.loaded-segment {
|
|
345
|
-
background:
|
|
439
|
+
background: var(--dt-text-secondary);
|
|
346
440
|
z-index: 2;
|
|
347
441
|
}
|
|
348
442
|
|
|
349
443
|
.loading-segment {
|
|
350
|
-
background:
|
|
444
|
+
background: var(--dt-primary);
|
|
351
445
|
z-index: 1;
|
|
352
446
|
}
|
|
353
447
|
|
|
@@ -372,13 +466,13 @@
|
|
|
372
466
|
}
|
|
373
467
|
|
|
374
468
|
.loading-progress[data-state="filtered"] .loaded-segment {
|
|
375
|
-
background:
|
|
469
|
+
background: var(--dt-text-light);
|
|
376
470
|
}
|
|
377
471
|
|
|
378
472
|
/* Legacy support for old progress bars */
|
|
379
473
|
.loading-progress-bar {
|
|
380
474
|
height: 100%;
|
|
381
|
-
background:
|
|
475
|
+
background: var(--dt-text-secondary);
|
|
382
476
|
border-radius: 2px;
|
|
383
477
|
transition: width 0.3s ease;
|
|
384
478
|
position: relative;
|
|
@@ -398,7 +492,7 @@
|
|
|
398
492
|
|
|
399
493
|
/* Different states for progress bar */
|
|
400
494
|
.loading-progress[data-state="filtered"] .loading-progress-bar {
|
|
401
|
-
background:
|
|
495
|
+
background: var(--dt-text-light);
|
|
402
496
|
}
|
|
403
497
|
|
|
404
498
|
.loading-progress[data-state="filtered"] .loading-progress-bar.loading::after {
|
|
@@ -407,7 +501,7 @@
|
|
|
407
501
|
}
|
|
408
502
|
|
|
409
503
|
.loading-progress[data-state="loading"] .loading-progress-bar {
|
|
410
|
-
background:
|
|
504
|
+
background: var(--dt-text-secondary);
|
|
411
505
|
}
|
|
412
506
|
|
|
413
507
|
@keyframes loading-shimmer {
|
|
@@ -433,7 +527,7 @@
|
|
|
433
527
|
/* Table container using CSS Grid */
|
|
434
528
|
.div-table-container {
|
|
435
529
|
width: 100%;
|
|
436
|
-
background:
|
|
530
|
+
background: var(--dt-bg-base);
|
|
437
531
|
flex: 1;
|
|
438
532
|
min-height: 0;
|
|
439
533
|
display: flex;
|
|
@@ -446,14 +540,14 @@
|
|
|
446
540
|
position: sticky;
|
|
447
541
|
top: 0;
|
|
448
542
|
z-index: 10;
|
|
449
|
-
background:
|
|
543
|
+
background: var(--dt-bg-header);
|
|
450
544
|
backdrop-filter: blur(10px);
|
|
451
545
|
-webkit-backdrop-filter: blur(10px);
|
|
452
|
-
border-bottom: 1px solid
|
|
546
|
+
border-bottom: 1px solid var(--dt-border-light);
|
|
453
547
|
display: grid;
|
|
454
548
|
min-height: 48px;
|
|
455
549
|
align-items: auto;
|
|
456
|
-
color:
|
|
550
|
+
color: var(--dt-text-primary);
|
|
457
551
|
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
458
552
|
flex-shrink: 0;
|
|
459
553
|
}
|
|
@@ -466,7 +560,7 @@
|
|
|
466
560
|
|
|
467
561
|
/* Add shadow when scrolling */
|
|
468
562
|
.div-table-header.scrolled {
|
|
469
|
-
box-shadow: 0 2px 8px
|
|
563
|
+
box-shadow: 0 2px 8px var(--dt-shadow);
|
|
470
564
|
}
|
|
471
565
|
|
|
472
566
|
/* Body container - scrollable */
|
|
@@ -474,22 +568,24 @@
|
|
|
474
568
|
flex: 1;
|
|
475
569
|
min-height: 0;
|
|
476
570
|
overflow-y: auto;
|
|
477
|
-
background:
|
|
571
|
+
background: var(--dt-bg-base);
|
|
478
572
|
}
|
|
479
573
|
|
|
480
574
|
/* Row styling - CSS Grid based */
|
|
481
575
|
.div-table-row {
|
|
576
|
+
color: var(--dt-text-primary);
|
|
482
577
|
display: grid;
|
|
483
|
-
min-height:
|
|
578
|
+
min-height: 40px;
|
|
484
579
|
align-items: stretch;
|
|
485
|
-
border-bottom: 1px solid
|
|
580
|
+
border-bottom: 1px solid var(--dt-border-row);
|
|
486
581
|
transition: all 0.2s ease;
|
|
487
582
|
cursor: pointer;
|
|
488
583
|
gap: 0;
|
|
584
|
+
box-sizing: border-box; /* Include border in height calculation */
|
|
489
585
|
}
|
|
490
586
|
|
|
491
587
|
.div-table-row:hover {
|
|
492
|
-
background-color:
|
|
588
|
+
background-color: var(--dt-bg-hover);
|
|
493
589
|
}
|
|
494
590
|
|
|
495
591
|
.div-table-row:last-child {
|
|
@@ -504,14 +600,14 @@
|
|
|
504
600
|
white-space: nowrap;
|
|
505
601
|
display: flex;
|
|
506
602
|
align-items: flex-start;
|
|
507
|
-
min-height: 28px;
|
|
508
603
|
min-width: 0;
|
|
604
|
+
box-sizing: border-box;
|
|
509
605
|
}
|
|
510
606
|
|
|
511
607
|
/* Header cell styling */
|
|
512
608
|
.div-table-header-cell {
|
|
513
609
|
padding: 8px 12px;
|
|
514
|
-
color:
|
|
610
|
+
color: var(--dt-text-primary);
|
|
515
611
|
cursor: pointer;
|
|
516
612
|
user-select: none;
|
|
517
613
|
display: flex;
|
|
@@ -528,6 +624,7 @@
|
|
|
528
624
|
flex: 1 1 auto;
|
|
529
625
|
min-width: 0;
|
|
530
626
|
overflow: hidden;
|
|
627
|
+
font-weight: 600;
|
|
531
628
|
}
|
|
532
629
|
|
|
533
630
|
.header-left-content > span {
|
|
@@ -545,7 +642,7 @@
|
|
|
545
642
|
}
|
|
546
643
|
|
|
547
644
|
.div-table-header-cell:hover {
|
|
548
|
-
background-color:
|
|
645
|
+
background-color: var(--dt-shadow);
|
|
549
646
|
}
|
|
550
647
|
|
|
551
648
|
/* Group indicator styling - hidden by default */
|
|
@@ -652,15 +749,15 @@
|
|
|
652
749
|
.div-table-header-cell.checkbox-column input[type="checkbox"] {
|
|
653
750
|
margin: 0;
|
|
654
751
|
cursor: pointer;
|
|
655
|
-
accent-color:
|
|
752
|
+
accent-color: var(--dt-primary);
|
|
656
753
|
width: 15px;
|
|
657
754
|
height: 15px;
|
|
658
755
|
}
|
|
659
756
|
|
|
660
757
|
/* Three-state checkbox styling */
|
|
661
758
|
input[type="checkbox"]:indeterminate {
|
|
662
|
-
background-color:
|
|
663
|
-
border-color:
|
|
759
|
+
background-color: var(--dt-primary);
|
|
760
|
+
border-color: var(--dt-primary);
|
|
664
761
|
position: relative;
|
|
665
762
|
}
|
|
666
763
|
|
|
@@ -670,47 +767,47 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
670
767
|
top: 50%;
|
|
671
768
|
left: 50%;
|
|
672
769
|
transform: translate(-50%, -50%);
|
|
673
|
-
color:
|
|
770
|
+
color: var(--dt-text-inverse);
|
|
674
771
|
font-size: 10px;
|
|
675
772
|
font-weight: bold;
|
|
676
773
|
}
|
|
677
774
|
|
|
678
775
|
.div-table-header-cell.checkbox-column input[type="checkbox"]:indeterminate {
|
|
679
|
-
background-color:
|
|
680
|
-
border-color:
|
|
776
|
+
background-color: var(--dt-primary);
|
|
777
|
+
border-color: var(--dt-primary);
|
|
681
778
|
}
|
|
682
779
|
|
|
683
780
|
/* Row states */
|
|
684
781
|
.div-table-row.selected {
|
|
685
|
-
background-color:
|
|
782
|
+
background-color: var(--dt-bg-selected) !important;
|
|
686
783
|
}
|
|
687
784
|
|
|
688
785
|
.div-table-row.focused {
|
|
689
|
-
background-color:
|
|
690
|
-
box-shadow: inset 3px 0 0
|
|
786
|
+
background-color: var(--dt-bg-base);
|
|
787
|
+
box-shadow: inset 3px 0 0 var(--dt-primary);
|
|
691
788
|
}
|
|
692
789
|
|
|
693
790
|
.div-table-row.focused:hover {
|
|
694
|
-
background-color:
|
|
791
|
+
background-color: var(--dt-primary-lighter) !important;
|
|
695
792
|
}
|
|
696
793
|
|
|
697
794
|
/* Ensure group headers also get proper focus styling */
|
|
698
795
|
.div-table-row.group-header.focused {
|
|
699
|
-
background-color:
|
|
700
|
-
box-shadow: inset 3px 0 0
|
|
796
|
+
background-color: var(--dt-bg-base) !important;
|
|
797
|
+
box-shadow: inset 3px 0 0 var(--dt-primary) !important;
|
|
701
798
|
}
|
|
702
799
|
|
|
703
800
|
.div-table-row.group-header.focused:hover {
|
|
704
|
-
background-color:
|
|
801
|
+
background-color: var(--dt-bg-hover) !important;
|
|
705
802
|
}
|
|
706
803
|
|
|
707
804
|
/* Group header styling */
|
|
708
805
|
.div-table-row.group-header {
|
|
709
|
-
background:
|
|
806
|
+
background: var(--dt-bg-base);
|
|
710
807
|
font-weight: normal;
|
|
711
|
-
color:
|
|
712
|
-
border-bottom: 1px solid
|
|
713
|
-
border-top: 1px solid
|
|
808
|
+
color: var(--dt-text-secondary);
|
|
809
|
+
border-bottom: 1px solid var(--dt-border-row);
|
|
810
|
+
border-top: 1px solid var(--dt-border-row);
|
|
714
811
|
position: sticky;
|
|
715
812
|
top: 0px;
|
|
716
813
|
z-index: 9;
|
|
@@ -724,12 +821,12 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
724
821
|
}
|
|
725
822
|
|
|
726
823
|
.div-table-row.group-header:hover {
|
|
727
|
-
background-color:
|
|
824
|
+
background-color: var(--dt-bg-hover);
|
|
728
825
|
}
|
|
729
826
|
|
|
730
827
|
/* Add shadow only to the first group header (when sticky) */
|
|
731
828
|
.div-table-row.group-header:first-of-type {
|
|
732
|
-
box-shadow: 0 2px 8px
|
|
829
|
+
box-shadow: 0 2px 8px var(--dt-shadow-heavy);
|
|
733
830
|
}
|
|
734
831
|
|
|
735
832
|
/* Make only the group name text bold */
|
|
@@ -748,21 +845,27 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
748
845
|
width: 15px;
|
|
749
846
|
height: 15px;
|
|
750
847
|
cursor: pointer;
|
|
751
|
-
accent-color:
|
|
848
|
+
accent-color: var(--dt-primary);
|
|
752
849
|
}
|
|
753
850
|
|
|
754
851
|
.div-table-row.group-header .checkbox-column input[type="checkbox"]:indeterminate {
|
|
755
|
-
background-color:
|
|
852
|
+
background-color: var(--dt-primary);
|
|
756
853
|
}
|
|
757
854
|
|
|
758
855
|
/* Group toggle button styling */
|
|
759
856
|
.group-toggle,
|
|
760
857
|
.group-toggle-all {
|
|
761
|
-
display: inline-
|
|
858
|
+
display: inline-flex;
|
|
859
|
+
align-items: center;
|
|
860
|
+
justify-content: center;
|
|
762
861
|
cursor: pointer;
|
|
763
862
|
font-size: 0.9em;
|
|
764
863
|
transition: transform 0.2s ease;
|
|
765
864
|
transform: rotate(90deg);
|
|
865
|
+
min-width: 20px;
|
|
866
|
+
min-height: 20px;
|
|
867
|
+
padding: 2px;
|
|
868
|
+
border-radius: 3px;
|
|
766
869
|
}
|
|
767
870
|
|
|
768
871
|
.group-toggle.collapsed,
|
|
@@ -779,11 +882,12 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
779
882
|
.group-toggle:hover,
|
|
780
883
|
.group-toggle-all:hover {
|
|
781
884
|
opacity: 0.7;
|
|
885
|
+
background-color: var(--dt-shadow);
|
|
782
886
|
}
|
|
783
887
|
|
|
784
888
|
/* Grouped column styling */
|
|
785
889
|
.div-table-cell.grouped-column {
|
|
786
|
-
color:
|
|
890
|
+
color: var(--dt-text-disabled);
|
|
787
891
|
font-style: italic;
|
|
788
892
|
}
|
|
789
893
|
|
|
@@ -800,7 +904,7 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
800
904
|
/* First child (.composite-main) renders like normal cell - no special styling */
|
|
801
905
|
|
|
802
906
|
.composite-sub {
|
|
803
|
-
color:
|
|
907
|
+
color: var(--dt-text-muted);
|
|
804
908
|
line-height: 1.2;
|
|
805
909
|
}
|
|
806
910
|
|
|
@@ -825,7 +929,7 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
825
929
|
}
|
|
826
930
|
|
|
827
931
|
.composite-sub-cell:not(:first-child) {
|
|
828
|
-
color:
|
|
932
|
+
color: var(--dt-text-muted);
|
|
829
933
|
}
|
|
830
934
|
|
|
831
935
|
/* Composite header styling */
|
|
@@ -848,12 +952,17 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
848
952
|
|
|
849
953
|
.composite-sub-header:first-child {
|
|
850
954
|
font-weight: 600;
|
|
851
|
-
color:
|
|
955
|
+
color: var(--dt-text-primary);
|
|
852
956
|
margin-bottom: 4px;
|
|
853
957
|
}
|
|
854
958
|
|
|
959
|
+
/* Legacy composite header styling (for subLabel pattern) */
|
|
960
|
+
.composite-main-header {
|
|
961
|
+
color: var(--dt-text-primary);
|
|
962
|
+
}
|
|
963
|
+
|
|
855
964
|
.composite-sub-header:hover {
|
|
856
|
-
background-color:
|
|
965
|
+
background-color: var(--dt-bg-disabled);
|
|
857
966
|
}
|
|
858
967
|
|
|
859
968
|
/* Composite toggle button styling */
|
|
@@ -989,17 +1098,17 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
989
1098
|
}
|
|
990
1099
|
|
|
991
1100
|
.div-table-body::-webkit-scrollbar-track {
|
|
992
|
-
background:
|
|
1101
|
+
background: var(--dt-scrollbar-track);
|
|
993
1102
|
border-radius: 4px;
|
|
994
1103
|
}
|
|
995
1104
|
|
|
996
1105
|
.div-table-body::-webkit-scrollbar-thumb {
|
|
997
|
-
background:
|
|
1106
|
+
background: var(--dt-scrollbar-thumb);
|
|
998
1107
|
border-radius: 4px;
|
|
999
1108
|
}
|
|
1000
1109
|
|
|
1001
1110
|
.div-table-body::-webkit-scrollbar-thumb:hover {
|
|
1002
|
-
background:
|
|
1111
|
+
background: var(--dt-scrollbar-thumb-hover);
|
|
1003
1112
|
}
|
|
1004
1113
|
|
|
1005
1114
|
/* Loading state */
|
|
@@ -1008,7 +1117,7 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1008
1117
|
align-items: center;
|
|
1009
1118
|
justify-content: center;
|
|
1010
1119
|
min-height: 200px;
|
|
1011
|
-
color:
|
|
1120
|
+
color: var(--dt-text-light);
|
|
1012
1121
|
font-style: italic;
|
|
1013
1122
|
}
|
|
1014
1123
|
|
|
@@ -1018,7 +1127,7 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1018
1127
|
align-items: center;
|
|
1019
1128
|
justify-content: center;
|
|
1020
1129
|
min-height: 200px;
|
|
1021
|
-
color:
|
|
1130
|
+
color: var(--dt-text-disabled);
|
|
1022
1131
|
font-style: italic;
|
|
1023
1132
|
}
|
|
1024
1133
|
|
|
@@ -1028,7 +1137,7 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1028
1137
|
align-items: center;
|
|
1029
1138
|
justify-content: center;
|
|
1030
1139
|
min-height: 200px;
|
|
1031
|
-
color:
|
|
1140
|
+
color: var(--dt-text-light);
|
|
1032
1141
|
font-style: italic;
|
|
1033
1142
|
position: relative;
|
|
1034
1143
|
}
|
|
@@ -1037,8 +1146,8 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1037
1146
|
content: '';
|
|
1038
1147
|
width: 20px;
|
|
1039
1148
|
height: 20px;
|
|
1040
|
-
border: 2px solid
|
|
1041
|
-
border-top: 2px solid
|
|
1149
|
+
border: 2px solid var(--dt-spinner-track);
|
|
1150
|
+
border-top: 2px solid var(--dt-spinner-active);
|
|
1042
1151
|
border-radius: 50%;
|
|
1043
1152
|
animation: spin 1s linear infinite;
|
|
1044
1153
|
margin-right: 10px;
|
|
@@ -1064,21 +1173,21 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1064
1173
|
margin: 10px 0;
|
|
1065
1174
|
border-radius: 3px;
|
|
1066
1175
|
font-size: 14px;
|
|
1067
|
-
background:
|
|
1068
|
-
border: 1px solid
|
|
1069
|
-
color:
|
|
1176
|
+
background: var(--dt-error-bg);
|
|
1177
|
+
border: 1px solid var(--dt-error-border);
|
|
1178
|
+
color: var(--dt-error-text);
|
|
1070
1179
|
}
|
|
1071
1180
|
|
|
1072
1181
|
/* Loading Placeholder Rows */
|
|
1073
1182
|
.div-table-row.loading-placeholder {
|
|
1074
|
-
background:
|
|
1075
|
-
border-bottom: 1px solid
|
|
1183
|
+
background: var(--dt-group-bg);
|
|
1184
|
+
border-bottom: 1px solid var(--dt-border-row);
|
|
1076
1185
|
pointer-events: none;
|
|
1077
1186
|
cursor: default;
|
|
1078
1187
|
}
|
|
1079
1188
|
|
|
1080
1189
|
.div-table-row.loading-placeholder:hover {
|
|
1081
|
-
background:
|
|
1190
|
+
background: var(--dt-group-bg) !important;
|
|
1082
1191
|
}
|
|
1083
1192
|
|
|
1084
1193
|
.div-table-cell.loading-cell {
|
|
@@ -1089,15 +1198,15 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1089
1198
|
|
|
1090
1199
|
.loading-shimmer-content {
|
|
1091
1200
|
height: 16px;
|
|
1092
|
-
background: linear-gradient(90deg,
|
|
1201
|
+
background: linear-gradient(90deg, var(--dt-skeleton-base) 25%, var(--dt-skeleton-shine) 50%, var(--dt-skeleton-base) 75%);
|
|
1093
1202
|
background-size: 200% 100%;
|
|
1094
1203
|
border-radius: 4px;
|
|
1095
1204
|
animation: loading-shimmer 1.5s infinite;
|
|
1096
1205
|
}
|
|
1097
1206
|
|
|
1098
1207
|
.retry-button {
|
|
1099
|
-
background:
|
|
1100
|
-
color:
|
|
1208
|
+
background: var(--dt-error);
|
|
1209
|
+
color: var(--dt-text-inverse);
|
|
1101
1210
|
border: none;
|
|
1102
1211
|
border-radius: 4px;
|
|
1103
1212
|
padding: 8px 12px;
|
|
@@ -1112,11 +1221,11 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1112
1221
|
}
|
|
1113
1222
|
|
|
1114
1223
|
.retry-button:hover {
|
|
1115
|
-
background:
|
|
1224
|
+
background: var(--dt-error-hover);
|
|
1116
1225
|
}
|
|
1117
1226
|
|
|
1118
1227
|
.retry-button:active {
|
|
1119
|
-
background:
|
|
1228
|
+
background: var(--dt-error-active);
|
|
1120
1229
|
}
|
|
1121
1230
|
|
|
1122
1231
|
/* ============================================
|
|
@@ -1143,14 +1252,14 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1143
1252
|
flex: 0 0 auto;
|
|
1144
1253
|
display: flex;
|
|
1145
1254
|
flex-direction: column;
|
|
1146
|
-
border-right: 1px solid
|
|
1255
|
+
border-right: 1px solid var(--dt-border-light);
|
|
1147
1256
|
z-index: 5;
|
|
1148
|
-
background:
|
|
1257
|
+
background: var(--dt-bg-base);
|
|
1149
1258
|
}
|
|
1150
1259
|
|
|
1151
1260
|
/* Shadow only when horizontal scrolling is needed */
|
|
1152
1261
|
.div-table-fixed-section.has-scroll-shadow {
|
|
1153
|
-
box-shadow: 2px 0 8px
|
|
1262
|
+
box-shadow: 2px 0 8px var(--dt-shadow);
|
|
1154
1263
|
}
|
|
1155
1264
|
|
|
1156
1265
|
/* Scrollable section */
|
|
@@ -1237,54 +1346,54 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1237
1346
|
/* Row parts in fixed columns layout */
|
|
1238
1347
|
.div-table-fixed-row,
|
|
1239
1348
|
.div-table-scroll-row {
|
|
1240
|
-
min-height:
|
|
1349
|
+
min-height: 40px;
|
|
1241
1350
|
box-sizing: border-box;
|
|
1242
1351
|
align-items: flex-start;
|
|
1243
1352
|
}
|
|
1244
1353
|
|
|
1245
1354
|
/* Ensure consistent row height between fixed and scroll sections */
|
|
1246
1355
|
.div-table-fixed-row {
|
|
1247
|
-
background:
|
|
1356
|
+
background: var(--dt-bg-base);
|
|
1248
1357
|
display: grid;
|
|
1249
1358
|
}
|
|
1250
1359
|
|
|
1251
1360
|
.div-table-scroll-row {
|
|
1252
|
-
background:
|
|
1361
|
+
background: var(--dt-bg-base);
|
|
1253
1362
|
display: grid;
|
|
1254
1363
|
}
|
|
1255
1364
|
|
|
1256
1365
|
/* Hover state for split rows */
|
|
1257
1366
|
.div-table-row.hover,
|
|
1258
1367
|
.div-table-row:hover {
|
|
1259
|
-
background-color:
|
|
1368
|
+
background-color: var(--dt-bg-hover);
|
|
1260
1369
|
}
|
|
1261
1370
|
|
|
1262
1371
|
/* Selected state for split rows */
|
|
1263
1372
|
.div-table-fixed-row.selected,
|
|
1264
1373
|
.div-table-scroll-row.selected {
|
|
1265
|
-
background-color:
|
|
1374
|
+
background-color: var(--dt-bg-selected) !important;
|
|
1266
1375
|
}
|
|
1267
1376
|
|
|
1268
1377
|
/* Focused state for split rows */
|
|
1269
1378
|
.div-table-fixed-row.focused,
|
|
1270
1379
|
.div-table-scroll-row.focused {
|
|
1271
|
-
background-color:
|
|
1272
|
-
box-shadow: inset 3px 0 0
|
|
1380
|
+
background-color: var(--dt-bg-base);
|
|
1381
|
+
box-shadow: inset 3px 0 0 var(--dt-primary);
|
|
1273
1382
|
}
|
|
1274
1383
|
|
|
1275
1384
|
.div-table-fixed-row.focused:hover,
|
|
1276
1385
|
.div-table-scroll-row.focused:hover,
|
|
1277
1386
|
.div-table-fixed-row.focused.hover,
|
|
1278
1387
|
.div-table-scroll-row.focused.hover {
|
|
1279
|
-
background-color:
|
|
1388
|
+
background-color: var(--dt-primary-lighter) !important;
|
|
1280
1389
|
}
|
|
1281
1390
|
|
|
1282
1391
|
/* Group header in fixed columns layout */
|
|
1283
1392
|
.div-table-fixed-row.group-header,
|
|
1284
1393
|
.div-table-scroll-row.group-header {
|
|
1285
|
-
background:
|
|
1286
|
-
border-bottom: 1px solid
|
|
1287
|
-
border-top: 1px solid
|
|
1394
|
+
background: var(--dt-bg-base);
|
|
1395
|
+
border-bottom: 1px solid var(--dt-border-row);
|
|
1396
|
+
border-top: 1px solid var(--dt-border-row);
|
|
1288
1397
|
position: sticky;
|
|
1289
1398
|
top: 0;
|
|
1290
1399
|
z-index: 4;
|
|
@@ -1292,8 +1401,8 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1292
1401
|
|
|
1293
1402
|
.div-table-fixed-row.group-header.focused,
|
|
1294
1403
|
.div-table-scroll-row.group-header.focused {
|
|
1295
|
-
background-color:
|
|
1296
|
-
box-shadow: inset 3px 0 0
|
|
1404
|
+
background-color: var(--dt-bg-base) !important;
|
|
1405
|
+
box-shadow: inset 3px 0 0 var(--dt-primary) !important;
|
|
1297
1406
|
}
|
|
1298
1407
|
|
|
1299
1408
|
/* Scroll section: allow full content width since we can scroll horizontally */
|
|
@@ -1326,7 +1435,9 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1326
1435
|
/* Mobile: disable fixed columns on small screens */
|
|
1327
1436
|
@media (max-width: 768px) {
|
|
1328
1437
|
.div-table-container.has-fixed-columns {
|
|
1329
|
-
/* Fallback to standard layout */
|
|
1438
|
+
/* Fallback to standard layout - reset flex direction */
|
|
1439
|
+
display: flex;
|
|
1440
|
+
flex-direction: column;
|
|
1330
1441
|
}
|
|
1331
1442
|
|
|
1332
1443
|
.div-table-columns-wrapper {
|
|
@@ -1336,8 +1447,8 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1336
1447
|
.div-table-fixed-section {
|
|
1337
1448
|
flex: 0 0 auto;
|
|
1338
1449
|
border-right: none;
|
|
1339
|
-
border-bottom: 1px solid
|
|
1340
|
-
box-shadow: 0 2px 8px
|
|
1450
|
+
border-bottom: 1px solid var(--dt-border-light);
|
|
1451
|
+
box-shadow: 0 2px 8px var(--dt-shadow);
|
|
1341
1452
|
}
|
|
1342
1453
|
|
|
1343
1454
|
.div-table-scroll-section {
|
|
@@ -1351,8 +1462,8 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1351
1462
|
|
|
1352
1463
|
/* Base summary row styling */
|
|
1353
1464
|
.div-table-row.summary-row {
|
|
1354
|
-
background-color:
|
|
1355
|
-
border-bottom: 2px solid
|
|
1465
|
+
background-color: var(--dt-bg-base);
|
|
1466
|
+
border-bottom: 2px solid var(--dt-border-dark);
|
|
1356
1467
|
font-weight: 600;
|
|
1357
1468
|
min-height: 32px;
|
|
1358
1469
|
}
|
|
@@ -1362,43 +1473,43 @@ input[type="checkbox"]:indeterminate::after {
|
|
|
1362
1473
|
position: sticky;
|
|
1363
1474
|
top: 0;
|
|
1364
1475
|
z-index: 2;
|
|
1365
|
-
background-color:
|
|
1366
|
-
border-bottom: 1px solid
|
|
1476
|
+
background-color: var(--dt-bg-summary);
|
|
1477
|
+
border-bottom: 1px solid var(--dt-summary-border);
|
|
1367
1478
|
}
|
|
1368
1479
|
|
|
1369
1480
|
/* Group summary row (subtotal) */
|
|
1370
1481
|
.div-table-row.group-summary {
|
|
1371
1482
|
font-weight: 500;
|
|
1372
1483
|
font-size: 0.95em;
|
|
1373
|
-
border-bottom: 1px solid
|
|
1484
|
+
border-bottom: 1px solid var(--dt-summary-border);
|
|
1374
1485
|
}
|
|
1375
1486
|
|
|
1376
1487
|
/* Summary cell styling */
|
|
1377
1488
|
.div-table-cell.summary-cell {
|
|
1378
1489
|
padding: 8px 12px;
|
|
1379
|
-
color:
|
|
1490
|
+
color: var(--dt-text-secondary);
|
|
1380
1491
|
}
|
|
1381
1492
|
|
|
1382
1493
|
/* Aggregate value styling */
|
|
1383
1494
|
.aggregate-value {
|
|
1384
1495
|
font-variant-numeric: tabular-nums;
|
|
1385
|
-
color:
|
|
1496
|
+
color: var(--dt-text-primary);
|
|
1386
1497
|
font-weight: 700;
|
|
1387
1498
|
}
|
|
1388
1499
|
|
|
1389
1500
|
/* Summary row hover effect */
|
|
1390
1501
|
.div-table-row.summary-row:hover {
|
|
1391
|
-
background-color:
|
|
1502
|
+
background-color: var(--dt-bg-summary);
|
|
1392
1503
|
}
|
|
1393
1504
|
|
|
1394
1505
|
/* Summary row in fixed columns layout */
|
|
1395
1506
|
.div-table-fixed-row.summary-row {
|
|
1396
|
-
background-color:
|
|
1507
|
+
background-color: var(--dt-bg-base);
|
|
1397
1508
|
min-height: 32px;
|
|
1398
1509
|
}
|
|
1399
1510
|
|
|
1400
1511
|
.div-table-fixed-row.header-summary {
|
|
1401
|
-
background-color:
|
|
1512
|
+
background-color: var(--dt-bg-summary);
|
|
1402
1513
|
}
|
|
1403
1514
|
|
|
1404
1515
|
/* Empty summary cells should not affect layout */
|