@pythia-software/query-table-ui 0.1.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/dist/theme.css ADDED
@@ -0,0 +1,1172 @@
1
+ /* src/theme.css */
2
+ :root {
3
+ --qt-font-size: 14px;
4
+ --qt-border: #d0d7de;
5
+ --qt-border-subtle: #eaeef2;
6
+ --qt-header-bg: #f6f8fa;
7
+ --qt-text: #1f2328;
8
+ --qt-muted: #656d76;
9
+ --qt-accent: #0969da;
10
+ --qt-accent-bg: #ddf4ff;
11
+ --qt-cell-hover: rgba(9, 105, 218, 0.04);
12
+ --qt-row-selected-bg: #ddf4ff;
13
+ --qt-pass-fg: #1a7f37;
14
+ --qt-pass-bg: #dafbe1;
15
+ --qt-fail-fg: #d1242f;
16
+ --qt-fail-bg: #ffebe9;
17
+ --qt-warn-fg: #9a6700;
18
+ --qt-warn-bg: #fff8c5;
19
+ --qt-radius: 6px;
20
+ }
21
+ .qt-sr-only {
22
+ position: absolute;
23
+ width: 1px;
24
+ height: 1px;
25
+ padding: 0;
26
+ margin: -1px;
27
+ overflow: hidden;
28
+ clip: rect(0, 0, 0, 0);
29
+ white-space: nowrap;
30
+ border: 0;
31
+ }
32
+ .qt-muted {
33
+ color: var(--qt-muted);
34
+ }
35
+ .qt-truncate {
36
+ display: block;
37
+ overflow: hidden;
38
+ text-overflow: ellipsis;
39
+ white-space: nowrap;
40
+ }
41
+ .qt-link {
42
+ color: var(--qt-accent);
43
+ text-decoration: none;
44
+ }
45
+ .qt-link:hover {
46
+ text-decoration: underline;
47
+ }
48
+ .qt-pills {
49
+ display: inline-flex;
50
+ flex-wrap: wrap;
51
+ gap: 4px;
52
+ }
53
+ .qt-pill {
54
+ background: var(--qt-header-bg);
55
+ border: 1px solid var(--qt-border);
56
+ border-radius: 999px;
57
+ padding: 0 8px;
58
+ font-size: 11px;
59
+ }
60
+ .qt-btn,
61
+ .qt-add,
62
+ .qt-link-btn {
63
+ font: inherit;
64
+ font-size: 12px;
65
+ cursor: pointer;
66
+ background: #fff;
67
+ color: var(--qt-text);
68
+ border: 1px solid var(--qt-border);
69
+ border-radius: var(--qt-radius);
70
+ padding: 0 6px;
71
+ height: 24px;
72
+ box-sizing: border-box;
73
+ display: inline-flex;
74
+ align-items: center;
75
+ }
76
+ .qt-btn:hover:not(:disabled),
77
+ .qt-add:hover:not(:disabled) {
78
+ background: var(--qt-accent-bg);
79
+ border-color: var(--qt-accent);
80
+ }
81
+ .qt-btn--active {
82
+ color: var(--qt-accent);
83
+ border-color: var(--qt-accent);
84
+ background: var(--qt-accent-bg);
85
+ }
86
+ .qt-btn--primary {
87
+ color: #fff;
88
+ background: var(--qt-accent);
89
+ border-color: var(--qt-accent);
90
+ }
91
+ .qt-btn--primary:hover:not(:disabled) {
92
+ background: #0757b6;
93
+ border-color: #0757b6;
94
+ }
95
+ .qt-btn:disabled,
96
+ .qt-add:disabled {
97
+ opacity: 0.45;
98
+ cursor: default;
99
+ }
100
+ .qt-add {
101
+ color: var(--qt-accent);
102
+ border-style: dashed;
103
+ }
104
+ .qt-link-btn {
105
+ border: 0;
106
+ background: transparent;
107
+ color: var(--qt-muted);
108
+ }
109
+ .qt-link-btn:hover:not(:disabled) {
110
+ color: var(--qt-text);
111
+ }
112
+ .qt-table-wrap {
113
+ position: relative;
114
+ display: block;
115
+ overflow-x: auto;
116
+ overflow-y: hidden;
117
+ overscroll-behavior-x: contain;
118
+ -webkit-overflow-scrolling: touch;
119
+ touch-action: pan-x pan-y;
120
+ }
121
+ .qt-table-wrap--loading .qt-row {
122
+ opacity: 0.55;
123
+ transition: opacity 120ms ease-in;
124
+ }
125
+ .qt-table {
126
+ width: 100%;
127
+ border-collapse: collapse;
128
+ border: 1px solid var(--qt-border);
129
+ border-radius: var(--qt-radius);
130
+ font-size: var(--qt-font-size);
131
+ table-layout: fixed;
132
+ }
133
+ .qt-th {
134
+ background: var(--qt-header-bg);
135
+ font-weight: 600;
136
+ text-align: left;
137
+ padding: 8px 12px;
138
+ position: relative;
139
+ user-select: none;
140
+ border-bottom: 1px solid var(--qt-border);
141
+ border-right: 1px solid var(--qt-border-subtle);
142
+ box-sizing: border-box;
143
+ min-width: 0;
144
+ max-width: 0;
145
+ overflow: hidden;
146
+ text-overflow: ellipsis;
147
+ white-space: nowrap;
148
+ }
149
+ .qt-th:last-child {
150
+ border-right: 0;
151
+ }
152
+ .qt-th--dragging {
153
+ opacity: 0.5;
154
+ }
155
+ .qt-th-drop-slot {
156
+ width: 120px;
157
+ min-height: 36px;
158
+ background: transparent;
159
+ border: 1px dashed var(--qt-accent);
160
+ box-sizing: border-box;
161
+ }
162
+ .qt-th-label:hover {
163
+ color: var(--qt-accent);
164
+ }
165
+ .qt-sort-indicator {
166
+ color: var(--qt-accent);
167
+ }
168
+ .qt-sort-priority {
169
+ font-size: 9px;
170
+ margin-left: 1px;
171
+ }
172
+ .qt-table-wrap--resizing {
173
+ cursor: col-resize;
174
+ }
175
+ .qt-cell {
176
+ padding: 8px 12px;
177
+ border-bottom: 1px solid var(--qt-border-subtle);
178
+ border-right: 1px solid var(--qt-border-subtle);
179
+ box-sizing: border-box;
180
+ min-width: 0;
181
+ overflow: hidden;
182
+ text-overflow: ellipsis;
183
+ white-space: nowrap;
184
+ }
185
+ .qt-cell[data-qt-field],
186
+ .qt-trailing-cell {
187
+ max-width: 0;
188
+ }
189
+ .qt-cell:last-child {
190
+ border-right: 0;
191
+ }
192
+ .qt-cell:hover {
193
+ background: var(--qt-cell-hover);
194
+ }
195
+ .qt-cell-copy-chip {
196
+ display: inline-flex;
197
+ align-items: center;
198
+ gap: 4px;
199
+ background: var(--qt-pass-bg);
200
+ border: 1px solid var(--qt-pass-fg);
201
+ color: var(--qt-pass-fg);
202
+ border-radius: 999px;
203
+ padding: 2px 8px;
204
+ font-size: 11px;
205
+ line-height: 1;
206
+ }
207
+ .qt-checkbox-cell {
208
+ text-align: center;
209
+ overflow: hidden;
210
+ text-overflow: clip;
211
+ white-space: nowrap;
212
+ padding-left: 0;
213
+ padding-right: 0;
214
+ }
215
+ .qt-checkbox-cell:hover {
216
+ background: transparent;
217
+ }
218
+ .qt-row--selected {
219
+ background: var(--qt-row-selected-bg);
220
+ }
221
+ .qt-row--selected .qt-cell:hover {
222
+ background: var(--qt-row-selected-bg);
223
+ }
224
+ .qt-empty {
225
+ text-align: center;
226
+ color: var(--qt-muted);
227
+ padding: 24px 12px;
228
+ }
229
+ .qt-table-summary-cell {
230
+ background: var(--qt-header-bg);
231
+ border-bottom: 0;
232
+ }
233
+ .qt-table-summary {
234
+ display: flex;
235
+ align-items: center;
236
+ justify-content: space-between;
237
+ gap: 8px;
238
+ min-height: 24px;
239
+ }
240
+ .qt-table-summary-hint {
241
+ color: var(--qt-muted);
242
+ font-style: italic;
243
+ font-size: 12px;
244
+ }
245
+ .qt-trailing-cell {
246
+ text-align: center;
247
+ }
248
+ .qt-resize-handle {
249
+ position: absolute;
250
+ top: 0;
251
+ right: -5px;
252
+ width: 10px;
253
+ height: 100%;
254
+ cursor: col-resize;
255
+ z-index: 2;
256
+ touch-action: none;
257
+ outline: none;
258
+ }
259
+ .qt-resize-handle::after {
260
+ content: "";
261
+ position: absolute;
262
+ top: 0;
263
+ right: 4px;
264
+ width: 1px;
265
+ height: 100%;
266
+ background: var(--qt-border);
267
+ opacity: 0.45;
268
+ }
269
+ .qt-resize-handle:hover::after,
270
+ .qt-resize-handle:focus-visible::after,
271
+ .qt-th--resizing .qt-resize-handle::after {
272
+ background: var(--qt-accent);
273
+ opacity: 0.8;
274
+ }
275
+ .qt-resize-handle:focus-visible {
276
+ box-shadow: inset 0 0 0 2px var(--qt-accent);
277
+ }
278
+ .qt-loading-bar {
279
+ position: absolute;
280
+ top: 0;
281
+ left: 0;
282
+ right: 0;
283
+ height: 2px;
284
+ overflow: hidden;
285
+ background: var(--qt-border-subtle);
286
+ z-index: 1;
287
+ pointer-events: none;
288
+ }
289
+ .qt-loading-bar::before {
290
+ content: "";
291
+ position: absolute;
292
+ top: 0;
293
+ left: 0;
294
+ height: 100%;
295
+ width: 30%;
296
+ background:
297
+ linear-gradient(
298
+ 90deg,
299
+ transparent,
300
+ var(--qt-accent),
301
+ transparent);
302
+ animation: qt-loading-slide 1.1s ease-in-out infinite;
303
+ }
304
+ @keyframes qt-loading-slide {
305
+ 0% {
306
+ transform: translateX(-100%);
307
+ }
308
+ 100% {
309
+ transform: translateX(450%);
310
+ }
311
+ }
312
+ .qt-qb {
313
+ display: flex;
314
+ flex-direction: column;
315
+ gap: 0;
316
+ row-gap: 0;
317
+ font-size: 13px;
318
+ padding: 0;
319
+ border: 0;
320
+ }
321
+ .qt-qb-row {
322
+ display: flex;
323
+ align-items: center;
324
+ flex-wrap: wrap;
325
+ gap: 6px;
326
+ }
327
+ .qt-qb-body {
328
+ display: flex;
329
+ flex-direction: column;
330
+ gap: 8px;
331
+ }
332
+ .qt-qb-bar {
333
+ border: 1px solid var(--qt-border);
334
+ border-top: 0;
335
+ border-radius: 0;
336
+ background: #fff;
337
+ padding: 8px;
338
+ }
339
+ .qt-qb-bar:first-child {
340
+ border-top: 1px solid var(--qt-border);
341
+ border-radius: var(--qt-radius) var(--qt-radius) 0 0;
342
+ }
343
+ .qt-qb-bar:last-child {
344
+ border-bottom: 0;
345
+ border-bottom-left-radius: 0;
346
+ border-bottom-right-radius: 0;
347
+ }
348
+ .qt-qb-state-bar {
349
+ position: relative;
350
+ padding-left: 4px;
351
+ gap: 6px;
352
+ }
353
+ .qt-qb-state-main {
354
+ display: inline-flex;
355
+ align-items: center;
356
+ gap: 6px;
357
+ flex-wrap: wrap;
358
+ margin-right: auto;
359
+ min-width: 0;
360
+ }
361
+ .qt-qb-editor-bar {
362
+ display: flex;
363
+ gap: 8px;
364
+ align-items: flex-start;
365
+ }
366
+ .qt-qb-editor-bar .qt-qb-body {
367
+ flex: 1;
368
+ min-width: 0;
369
+ }
370
+ .qt-qb-editor-stack {
371
+ display: inline-flex;
372
+ flex-direction: column;
373
+ gap: 6px;
374
+ min-width: 92px;
375
+ }
376
+ .qt-qb-editor-stack .qt-btn {
377
+ width: 100%;
378
+ }
379
+ .qt-qb-run-bar {
380
+ display: flex;
381
+ gap: 8px;
382
+ align-items: center;
383
+ flex-wrap: wrap;
384
+ }
385
+ .qt-qb-run-metric {
386
+ color: var(--qt-muted);
387
+ font-size: 12px;
388
+ }
389
+ .qt-qb-run-metric--strong {
390
+ font-weight: 700;
391
+ color: var(--qt-text);
392
+ }
393
+ .qt-qb-auto-status {
394
+ color: var(--qt-muted);
395
+ font-size: 11px;
396
+ }
397
+ .qt-qb-run-actions {
398
+ display: inline-flex;
399
+ align-items: center;
400
+ gap: 8px;
401
+ margin-left: auto;
402
+ }
403
+ .qt-qb-run-error {
404
+ color: var(--qt-fail-fg);
405
+ font-size: 11px;
406
+ }
407
+ .qt-qb-collapse-btn {
408
+ position: absolute;
409
+ top: 50%;
410
+ transform: translateY(-50%);
411
+ left: -20px;
412
+ width: 20px;
413
+ height: 26px;
414
+ min-width: 20px;
415
+ padding: 0;
416
+ justify-content: center;
417
+ border-right: 0;
418
+ border-radius: var(--qt-radius) 0 0 var(--qt-radius);
419
+ }
420
+ .qt-qb-collapse-caret {
421
+ display: inline-flex;
422
+ align-items: center;
423
+ justify-content: center;
424
+ line-height: 1;
425
+ transition: transform 0.12s ease;
426
+ transform: rotate(0deg);
427
+ font-size: 13px;
428
+ }
429
+ .qt-qb-collapse-caret--collapsed {
430
+ transform: rotate(-90deg);
431
+ }
432
+ .qt-qb-kw {
433
+ color: var(--qt-muted);
434
+ text-transform: uppercase;
435
+ font-size: 12px;
436
+ letter-spacing: 0.5px;
437
+ width: 76px;
438
+ min-width: 76px;
439
+ flex: 0 0 76px;
440
+ display: inline-flex;
441
+ white-space: nowrap;
442
+ }
443
+ .qt-qb-hint {
444
+ color: var(--qt-muted);
445
+ font-style: italic;
446
+ font-size: 12px;
447
+ }
448
+ .qt-qb-left {
449
+ display: inline-flex;
450
+ align-items: center;
451
+ gap: 6px;
452
+ margin-right: auto;
453
+ }
454
+ .qt-qb-count {
455
+ color: var(--qt-muted);
456
+ font-size: 12px;
457
+ }
458
+ .qt-qb-num {
459
+ width: 72px;
460
+ font: inherit;
461
+ border: 1px solid var(--qt-border);
462
+ border-radius: var(--qt-radius);
463
+ padding: 2px 6px;
464
+ }
465
+ .qt-qb-saved {
466
+ display: inline-flex;
467
+ align-items: center;
468
+ gap: 4px;
469
+ }
470
+ .qt-qb-saved-star {
471
+ border: 0;
472
+ background: transparent;
473
+ padding: 0;
474
+ margin: 0 2px;
475
+ line-height: 1;
476
+ font-size: 14px;
477
+ color: var(--qt-text);
478
+ cursor: pointer;
479
+ }
480
+ .qt-qb-saved-star--saved {
481
+ color: var(--qt-accent);
482
+ }
483
+ .qt-qb-saved-star--unsaved {
484
+ color: var(--qt-text);
485
+ }
486
+ .qt-qb-saved-input-wrap {
487
+ display: inline-flex;
488
+ align-items: center;
489
+ gap: 4px;
490
+ }
491
+ .qt-qb-saved-name {
492
+ border: 0;
493
+ background: transparent;
494
+ padding: 0;
495
+ color: var(--qt-text);
496
+ font-size: 12px;
497
+ font-weight: 700;
498
+ line-height: 1;
499
+ cursor: pointer;
500
+ }
501
+ .qt-qb-saved-name--custom {
502
+ font-weight: 400;
503
+ }
504
+ .qt-qb-saved-cancel {
505
+ border: 0;
506
+ background: transparent;
507
+ padding: 0;
508
+ line-height: 1;
509
+ font-size: 13px;
510
+ color: var(--qt-muted);
511
+ cursor: pointer;
512
+ }
513
+ .qt-qb-saved-cancel:hover:not(:disabled) {
514
+ color: var(--qt-fail-fg);
515
+ }
516
+ .qt-qb-saved-input {
517
+ font: inherit;
518
+ font-size: 12px;
519
+ width: min(220px, 35vw);
520
+ border: 1px solid var(--qt-border);
521
+ border-radius: var(--qt-radius);
522
+ padding: 2px 5px;
523
+ }
524
+ .qt-auto-refresh {
525
+ position: relative;
526
+ display: inline-flex;
527
+ }
528
+ .qt-auto-refresh-popover {
529
+ position: absolute;
530
+ z-index: 30;
531
+ top: calc(100% + 4px);
532
+ left: 0;
533
+ width: 260px;
534
+ display: flex;
535
+ flex-direction: column;
536
+ gap: 8px;
537
+ background: #fff;
538
+ border: 1px solid var(--qt-border);
539
+ border-radius: var(--qt-radius);
540
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
541
+ padding: 8px;
542
+ box-sizing: border-box;
543
+ }
544
+ .qt-auto-refresh-popover--align-right {
545
+ left: auto;
546
+ right: 0;
547
+ }
548
+ .qt-auto-refresh-field {
549
+ display: flex;
550
+ align-items: center;
551
+ justify-content: space-between;
552
+ gap: 8px;
553
+ color: var(--qt-muted);
554
+ font-size: 12px;
555
+ }
556
+ .qt-auto-refresh-select {
557
+ width: 132px;
558
+ font: inherit;
559
+ font-size: 12px;
560
+ border: 1px solid var(--qt-border);
561
+ border-radius: var(--qt-radius);
562
+ background: #fff;
563
+ color: var(--qt-text);
564
+ padding: 2px 6px;
565
+ height: 24px;
566
+ box-sizing: border-box;
567
+ }
568
+ .qt-auto-refresh-status {
569
+ color: var(--qt-muted);
570
+ font-size: 11px;
571
+ line-height: 1.35;
572
+ }
573
+ .qt-auto-refresh-status--error {
574
+ color: var(--qt-fail-fg);
575
+ }
576
+ .qt-auto-refresh-actions {
577
+ display: flex;
578
+ justify-content: flex-end;
579
+ gap: 6px;
580
+ }
581
+ .qt-chip {
582
+ display: inline-flex;
583
+ align-items: center;
584
+ gap: 4px;
585
+ background: #fff;
586
+ border: 1px solid var(--qt-border);
587
+ border-radius: var(--qt-radius);
588
+ padding: 0 6px;
589
+ font-size: 12px;
590
+ height: 24px;
591
+ box-sizing: border-box;
592
+ }
593
+ .qt-chip--col {
594
+ cursor: grab;
595
+ }
596
+ .qt-chip-drop-slot {
597
+ min-width: 44px;
598
+ min-height: 20px;
599
+ background: transparent;
600
+ border: 1px dashed var(--qt-accent);
601
+ border-radius: var(--qt-radius);
602
+ padding: 2px 10px;
603
+ color: transparent;
604
+ box-sizing: border-box;
605
+ }
606
+ .qt-chip--dragging {
607
+ opacity: 0.5;
608
+ }
609
+ .qt-chip-grip {
610
+ color: var(--qt-border);
611
+ user-select: none;
612
+ }
613
+ .qt-chip-priority {
614
+ background: var(--qt-accent);
615
+ color: #fff;
616
+ border-radius: 999px;
617
+ font-size: 10px;
618
+ padding: 0 5px;
619
+ }
620
+ .qt-chip-field {
621
+ font-weight: 600;
622
+ }
623
+ .qt-chip--where {
624
+ align-items: center;
625
+ }
626
+ .qt-chip-op,
627
+ .qt-chip-val {
628
+ font: inherit;
629
+ font-size: 12px;
630
+ border: 1px solid var(--qt-border-subtle);
631
+ border-radius: 4px;
632
+ padding: 1px 4px;
633
+ background: #fff;
634
+ height: 20px;
635
+ min-height: 20px;
636
+ box-sizing: border-box;
637
+ width: auto;
638
+ min-width: 0;
639
+ }
640
+ .qt-chip-where-list {
641
+ display: inline-flex;
642
+ align-items: center;
643
+ gap: 4px;
644
+ flex-wrap: wrap;
645
+ }
646
+ .qt-chip-where-clause {
647
+ display: inline-flex;
648
+ align-items: center;
649
+ gap: 4px;
650
+ }
651
+ .qt-chip-and {
652
+ color: var(--qt-muted);
653
+ font-size: 11px;
654
+ padding: 0 1px;
655
+ white-space: nowrap;
656
+ }
657
+ .qt-chip-op-btn,
658
+ .qt-chip-x {
659
+ display: inline-flex;
660
+ align-items: center;
661
+ box-sizing: border-box;
662
+ }
663
+ .qt-chip-op-btn {
664
+ font: inherit;
665
+ font-size: 11px;
666
+ border: 1px solid var(--qt-border-subtle);
667
+ border-radius: 4px;
668
+ background: #fff;
669
+ cursor: pointer;
670
+ padding: 0 5px;
671
+ height: 20px;
672
+ }
673
+ .qt-chip-x {
674
+ border: 0;
675
+ background: transparent;
676
+ cursor: pointer;
677
+ color: var(--qt-muted);
678
+ font-size: 11px;
679
+ padding: 0 2px;
680
+ height: 20px;
681
+ }
682
+ .qt-autocomplete {
683
+ display: inline-flex;
684
+ align-items: center;
685
+ gap: 4px;
686
+ }
687
+ .qt-chip-x:hover {
688
+ color: var(--qt-fail-fg);
689
+ }
690
+ .qt-autocomplete-hint {
691
+ color: var(--qt-muted);
692
+ font-size: 10px;
693
+ font-style: italic;
694
+ }
695
+ .qt-picker {
696
+ position: relative;
697
+ display: inline-block;
698
+ }
699
+ .qt-picker-input {
700
+ font: inherit;
701
+ font-size: 12px;
702
+ border: 1px solid var(--qt-accent);
703
+ border-radius: 4px;
704
+ padding: 2px 6px;
705
+ width: 160px;
706
+ }
707
+ .qt-picker-list {
708
+ position: absolute;
709
+ z-index: 20;
710
+ margin-top: 2px;
711
+ width: 280px;
712
+ max-height: 280px;
713
+ overflow-y: auto;
714
+ background: #fff;
715
+ border: 1px solid var(--qt-border);
716
+ border-radius: var(--qt-radius);
717
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
718
+ }
719
+ .qt-picker-empty {
720
+ padding: 6px 8px;
721
+ color: var(--qt-muted);
722
+ font-size: 12px;
723
+ }
724
+ .qt-picker-group-label {
725
+ padding: 3px 8px;
726
+ background: var(--qt-header-bg);
727
+ color: var(--qt-muted);
728
+ text-transform: uppercase;
729
+ font-size: 10px;
730
+ letter-spacing: 0.5px;
731
+ }
732
+ .qt-picker-item {
733
+ display: block;
734
+ width: 100%;
735
+ text-align: left;
736
+ border: 0;
737
+ background: transparent;
738
+ cursor: pointer;
739
+ padding: 5px 8px;
740
+ font-size: 12px;
741
+ }
742
+ .qt-picker-item:hover {
743
+ background: var(--qt-cell-hover);
744
+ }
745
+ .qt-picker-item--disabled {
746
+ opacity: 0.4;
747
+ cursor: not-allowed;
748
+ }
749
+ .qt-picker-row {
750
+ display: flex;
751
+ justify-content: space-between;
752
+ gap: 8px;
753
+ }
754
+ .qt-picker-label {
755
+ font-weight: 500;
756
+ }
757
+ .qt-picker-name {
758
+ color: var(--qt-muted);
759
+ }
760
+ .qt-picker-alias {
761
+ display: block;
762
+ color: var(--qt-accent);
763
+ font-size: 10px;
764
+ }
765
+ .qt-picker-stats {
766
+ display: block;
767
+ color: var(--qt-muted);
768
+ font-size: 10px;
769
+ }
770
+ .qt-cell-menu {
771
+ position: fixed;
772
+ z-index: 200;
773
+ background: #fff;
774
+ border: 1px solid var(--qt-border);
775
+ border-radius: var(--qt-radius);
776
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
777
+ padding: 4px;
778
+ font-size: 13px;
779
+ }
780
+ .qt-cm-header {
781
+ padding: 6px 8px;
782
+ border-bottom: 1px solid var(--qt-border-subtle);
783
+ margin-bottom: 4px;
784
+ }
785
+ .qt-cm-field {
786
+ display: block;
787
+ color: var(--qt-muted);
788
+ font-size: 11px;
789
+ text-transform: uppercase;
790
+ letter-spacing: 0.5px;
791
+ }
792
+ .qt-cm-value {
793
+ display: block;
794
+ font-weight: 600;
795
+ word-break: break-all;
796
+ max-height: 60px;
797
+ overflow: hidden;
798
+ }
799
+ .qt-cm-sep {
800
+ height: 1px;
801
+ background: var(--qt-border-subtle);
802
+ margin: 4px 0;
803
+ }
804
+ .qt-cm-item {
805
+ display: block;
806
+ width: 100%;
807
+ padding: 6px 10px;
808
+ background: transparent;
809
+ border: 0;
810
+ text-align: left;
811
+ cursor: pointer;
812
+ color: var(--qt-text);
813
+ font-size: 13px;
814
+ border-radius: 4px;
815
+ }
816
+ .qt-cm-item:hover {
817
+ background: var(--qt-header-bg);
818
+ }
819
+ .qt-cm-item:disabled {
820
+ cursor: default;
821
+ opacity: 0.45;
822
+ color: var(--qt-muted);
823
+ }
824
+ .qt-cm-item:disabled:hover {
825
+ background: transparent;
826
+ }
827
+ .qt-cm-item code {
828
+ background: var(--qt-border-subtle);
829
+ padding: 1px 4px;
830
+ border-radius: 3px;
831
+ font-size: 11px;
832
+ }
833
+ .qt-selection-toolbar {
834
+ display: flex;
835
+ align-items: center;
836
+ gap: 8px;
837
+ padding: 6px 8px;
838
+ background: var(--qt-accent-bg);
839
+ border: 1px solid var(--qt-accent);
840
+ border-radius: var(--qt-radius);
841
+ }
842
+ .qt-selection-count {
843
+ font-weight: 600;
844
+ font-size: 13px;
845
+ }
846
+ .qt-selection-actions {
847
+ display: inline-flex;
848
+ align-items: center;
849
+ gap: 6px;
850
+ margin-left: auto;
851
+ }
852
+ .qt-modal-backdrop {
853
+ position: fixed;
854
+ inset: 0;
855
+ background: rgba(0, 0, 0, 0.35);
856
+ display: flex;
857
+ align-items: center;
858
+ justify-content: center;
859
+ z-index: 100;
860
+ }
861
+ .qt-modal {
862
+ background: #fff;
863
+ border-radius: 8px;
864
+ padding: 20px;
865
+ width: 480px;
866
+ max-height: 80vh;
867
+ overflow-y: auto;
868
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
869
+ }
870
+ .qt-modal-title {
871
+ margin-top: 0;
872
+ }
873
+ .qt-modal-footer {
874
+ text-align: right;
875
+ margin-top: 12px;
876
+ }
877
+ .qt-saved-list {
878
+ list-style: none;
879
+ padding: 0;
880
+ margin: 0;
881
+ }
882
+ .qt-saved-item {
883
+ display: flex;
884
+ align-items: center;
885
+ gap: 6px;
886
+ padding: 6px 0;
887
+ border-bottom: 1px solid var(--qt-border-subtle);
888
+ }
889
+ .qt-saved-pick {
890
+ flex: 1;
891
+ text-align: left;
892
+ background: transparent;
893
+ border: 0;
894
+ cursor: pointer;
895
+ padding: 4px;
896
+ color: var(--qt-text);
897
+ border-radius: 4px;
898
+ }
899
+ .qt-saved-pick:hover {
900
+ background: var(--qt-header-bg);
901
+ }
902
+ .qt-saved-name {
903
+ display: block;
904
+ font-weight: 600;
905
+ font-size: 13px;
906
+ }
907
+ .qt-saved-meta {
908
+ font-size: 11px;
909
+ }
910
+ .qt-saved-default {
911
+ white-space: nowrap;
912
+ }
913
+ .qt-pill--pass {
914
+ color: var(--qt-pass-fg);
915
+ background: var(--qt-pass-bg);
916
+ }
917
+ .qt-pill--fail {
918
+ color: var(--qt-fail-fg);
919
+ background: var(--qt-fail-bg);
920
+ }
921
+ .qt-pill--warn {
922
+ color: var(--qt-warn-fg);
923
+ background: var(--qt-warn-bg);
924
+ }
925
+ .qt-qb-row--metrics {
926
+ border-top: 1px dotted var(--qt-border);
927
+ padding-top: 9px;
928
+ margin-top: 3px;
929
+ }
930
+ .qt-chip--agg {
931
+ gap: 4px;
932
+ height: auto;
933
+ min-height: 24px;
934
+ padding: 1px 6px;
935
+ flex-wrap: wrap;
936
+ }
937
+ .qt-chip-agg-by {
938
+ display: inline-flex;
939
+ align-items: center;
940
+ gap: 4px;
941
+ flex-wrap: wrap;
942
+ }
943
+ .qt-chip-agg-group {
944
+ display: inline-flex;
945
+ align-items: center;
946
+ gap: 2px;
947
+ background: #fff;
948
+ border: 1px solid var(--qt-border-subtle);
949
+ border-radius: 4px;
950
+ padding: 0 2px 0 6px;
951
+ height: 20px;
952
+ font-size: 11px;
953
+ }
954
+ .qt-chip-agg-group-label {
955
+ white-space: nowrap;
956
+ }
957
+ .qt-chip-agg-group .qt-chip-x {
958
+ font-size: 9px;
959
+ padding: 0 1px;
960
+ }
961
+ .qt-chip-agg-add {
962
+ padding: 0 7px;
963
+ }
964
+ .qt-metrics {
965
+ display: flex;
966
+ flex-wrap: wrap;
967
+ align-items: stretch;
968
+ gap: 12px;
969
+ margin: 0;
970
+ padding: 12px;
971
+ background: var(--qt-header-bg);
972
+ border: 1px solid var(--qt-border);
973
+ border-radius: 0;
974
+ }
975
+ .qt-metrics-error {
976
+ flex: 1 0 100%;
977
+ color: var(--qt-fail-fg);
978
+ font-size: 12px;
979
+ }
980
+ .qt-metric {
981
+ flex: 1 1 calc(25% - 9px);
982
+ min-width: 170px;
983
+ max-width: 100%;
984
+ display: flex;
985
+ flex-direction: column;
986
+ gap: 6px;
987
+ border: 1px solid var(--qt-border);
988
+ border-radius: var(--qt-radius);
989
+ background: #fff;
990
+ padding: 10px 12px;
991
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
992
+ box-sizing: border-box;
993
+ }
994
+ .qt-metric--gb2,
995
+ .qt-metric--gb3 {
996
+ flex-basis: calc(50% - 6px);
997
+ }
998
+ .qt-metric-head {
999
+ display: flex;
1000
+ align-items: baseline;
1001
+ gap: 6px;
1002
+ flex-wrap: wrap;
1003
+ }
1004
+ .qt-metric-title {
1005
+ font-weight: 700;
1006
+ font-size: 12px;
1007
+ }
1008
+ .qt-metric-by {
1009
+ color: var(--qt-muted);
1010
+ font-size: 11px;
1011
+ }
1012
+ .qt-metric-loading,
1013
+ .qt-metric-empty {
1014
+ color: var(--qt-muted);
1015
+ font-size: 12px;
1016
+ font-style: italic;
1017
+ }
1018
+ .qt-metric-big {
1019
+ flex: 1;
1020
+ display: flex;
1021
+ flex-direction: column;
1022
+ justify-content: center;
1023
+ gap: 2px;
1024
+ }
1025
+ .qt-metric-big-value {
1026
+ font-size: 24px;
1027
+ font-weight: 700;
1028
+ line-height: 1.1;
1029
+ color: var(--qt-text);
1030
+ font-variant-numeric: tabular-nums;
1031
+ }
1032
+ .qt-metric-big-sub {
1033
+ color: var(--qt-muted);
1034
+ font-size: 11px;
1035
+ }
1036
+ .qt-metric-bars {
1037
+ flex: 1;
1038
+ display: flex;
1039
+ flex-direction: column;
1040
+ justify-content: center;
1041
+ gap: 4px;
1042
+ min-width: 0;
1043
+ }
1044
+ .qt-metric-bar-row {
1045
+ display: grid;
1046
+ grid-template-columns: minmax(54px, 38%) 1fr auto;
1047
+ align-items: center;
1048
+ gap: 8px;
1049
+ }
1050
+ .qt-metric-bar-label {
1051
+ font-size: 12px;
1052
+ overflow: hidden;
1053
+ text-overflow: ellipsis;
1054
+ white-space: nowrap;
1055
+ }
1056
+ .qt-metric-bar-track {
1057
+ height: 8px;
1058
+ background: var(--qt-border-subtle);
1059
+ border-radius: 999px;
1060
+ overflow: hidden;
1061
+ }
1062
+ .qt-metric-bar-fill {
1063
+ display: block;
1064
+ height: 100%;
1065
+ background: var(--qt-accent);
1066
+ border-radius: 999px;
1067
+ min-width: 2px;
1068
+ }
1069
+ .qt-metric-bar-value {
1070
+ font-size: 12px;
1071
+ font-variant-numeric: tabular-nums;
1072
+ color: var(--qt-text);
1073
+ }
1074
+ .qt-metric-pivot-wrap {
1075
+ overflow-x: auto;
1076
+ }
1077
+ .qt-metric-pivot,
1078
+ .qt-metric-flat {
1079
+ border-collapse: collapse;
1080
+ font-size: 12px;
1081
+ }
1082
+ .qt-metric-pivot th,
1083
+ .qt-metric-pivot td,
1084
+ .qt-metric-flat th,
1085
+ .qt-metric-flat td {
1086
+ border: 1px solid var(--qt-border-subtle);
1087
+ padding: 3px 8px;
1088
+ text-align: right;
1089
+ font-variant-numeric: tabular-nums;
1090
+ white-space: nowrap;
1091
+ }
1092
+ .qt-metric-pivot thead th,
1093
+ .qt-metric-flat thead th {
1094
+ background: var(--qt-header-bg);
1095
+ font-weight: 600;
1096
+ }
1097
+ .qt-metric-pivot-row,
1098
+ .qt-metric-flat td:first-child,
1099
+ .qt-metric-flat th:first-child {
1100
+ text-align: left;
1101
+ }
1102
+ .qt-metric-pivot-corner {
1103
+ text-align: left;
1104
+ color: var(--qt-muted);
1105
+ font-weight: 500;
1106
+ }
1107
+ .qt-metric-pivot-axes {
1108
+ font-size: 11px;
1109
+ }
1110
+ .qt-metric-flat-value {
1111
+ font-weight: 600;
1112
+ }
1113
+ .qt-qt-section {
1114
+ position: relative;
1115
+ margin: 0;
1116
+ }
1117
+ .qt-qt-section-head {
1118
+ display: flex;
1119
+ align-items: center;
1120
+ justify-content: flex-start;
1121
+ gap: 8px;
1122
+ min-height: 26px;
1123
+ padding: 5px 6px 5px 4px;
1124
+ border: 1px solid var(--qt-border);
1125
+ border-bottom: 0;
1126
+ border-radius: 0;
1127
+ box-sizing: border-box;
1128
+ }
1129
+ .qt-qt-section-title {
1130
+ font-size: 12px;
1131
+ color: var(--qt-muted);
1132
+ text-transform: uppercase;
1133
+ letter-spacing: 0.5px;
1134
+ font-weight: 700;
1135
+ }
1136
+ .qt-qt-section-summary {
1137
+ font-size: 12px;
1138
+ color: var(--qt-muted);
1139
+ }
1140
+ .qt-qt-section-toggle {
1141
+ position: absolute;
1142
+ left: -20px;
1143
+ top: 0;
1144
+ width: 20px;
1145
+ height: 26px;
1146
+ min-width: 20px;
1147
+ padding: 0;
1148
+ border-right: 0;
1149
+ border-radius: var(--qt-radius) 0 0 var(--qt-radius);
1150
+ justify-content: center;
1151
+ box-sizing: border-box;
1152
+ }
1153
+ .qt-qt-section-toggle-caret {
1154
+ display: inline-flex;
1155
+ align-items: center;
1156
+ justify-content: center;
1157
+ line-height: 1;
1158
+ transition: transform 0.12s ease;
1159
+ transform: rotate(0deg);
1160
+ font-size: 13px;
1161
+ }
1162
+ .qt-qt-section-toggle-caret--collapsed {
1163
+ transform: rotate(-90deg);
1164
+ }
1165
+ .qt-qt-section--metrics.qt-qt-section--expanded > .qt-metrics {
1166
+ border-bottom: 0;
1167
+ }
1168
+ .qt-qt-section--table.qt-qt-section--collapsed .qt-qt-section-head {
1169
+ border: 1px solid var(--qt-border);
1170
+ border-radius: 0 0 var(--qt-radius) 0;
1171
+ }
1172
+ /*# sourceMappingURL=theme.css.map */