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